/* App-specific layout - supplements tokens.css */

/* ===============================================================
   LOADING + EMPTY HELPERS
   =============================================================== */

/* Subtle opacity pulse for any caption that says "Loading…".
   Apply with class="caption loading-pulse" so the user sees the
   text is alive rather than thinking the page has frozen. The
   reduced-motion media query a few rules below cancels the
   animation for users who've opted out. */
.loading-pulse {
  animation: loading-pulse 1.4s ease-in-out infinite;
}
@keyframes loading-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ===============================================================
   ACCESSIBILITY
   =============================================================== */

/* Honour the OS-level reduce-motion setting. Animations are
   purely decorative in this app (loaders, modal fade, signal
   bars on the warmup screen, lightning bar fills); shutting
   them off keeps the UI fully usable while removing motion
   that can trigger vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Default focus ring for interactive elements. Browsers' default
   :focus styles got blanket-removed elsewhere in the cascade;
   put them back for keyboard users (:focus-visible only fires
   on keyboard navigation, not mouse clicks, so the ring doesn't
   show on every mouse click). */
button:focus-visible,
a:focus-visible,
.chip:focus-visible,
.combo-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ===============================================================
   SHELL
   =============================================================== */

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===============================================================
   BRAND LOCKUP (HTML/CSS so it uses page fonts)
   the funnel.
   Lowercase wordmark with a pink dot accent on the terminal period.
   =============================================================== */

.lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: -0.04em;
  color: var(--fg-1);
  line-height: 1;
  white-space: nowrap;
}

.lockup .lockup-brand {
  font-weight: 900;
}

.lockup .lockup-rule {
  display: inline-block;
  width: 1px;
  height: 0.75em;
  background: var(--lt-4);
  margin: 0 0.5em;
}

.lockup .lockup-product {
  font-weight: 900;
}

/* The terminal period is rendered as a glowing pink dot. The period
   sits at its natural font position (no margin override) so it never
   overlaps the previous letter or its glow. */
.lockup .lockup-dot {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(228, 52, 111, 0.55), 0 0 24px rgba(228, 52, 111, 0.35);
  font-weight: 900;
}

.lockup-lg { font-size: clamp(28px, 6vw, 52px); }
.lockup-md { font-size: clamp(22px, 4.4vw, 32px); }
.lockup-sm { font-size: clamp(20px, 3.4vw, 26px); }

/* ===============================================================
   ADMIN CONSOLE - tenant row layout
   Desktop: name on the left, four meta chips on the right.
   Mobile (<768px): stack vertically so the meta chips don't push
   the row off-screen.
   =============================================================== */
.admin-row {
  margin-bottom: 0.75rem;
}
.admin-row-head {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.admin-row-identity {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}
.admin-row-name {
  font-weight: 600;
  word-break: break-word;
}
.admin-row-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-row-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-default);
}

/* Compact input variant used throughout the admin tenant body so
   inputs sit cleanly in single-row forms next to small buttons. */
.input.input-sm {
  padding: 0.45rem 0.65rem;
  font-size: 13px;
  height: auto;
}

/* Quick-actions strip at the top of the expanded body.
   Credits inline + lock button + users summary, all on one row. */
.admin-quick-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--border-default, var(--line));
}
.admin-credits-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.admin-credits-delta { width: 110px; }
.admin-credits-note  { width: 220px; max-width: 100%; }
.admin-users-inline {
  margin-left: auto;
  color: var(--fg-2);
  font-size: 12px;
  text-align: right;
}

/* Section wrapper used for Instantly + Campaigns. Section head
   gives a clear title + optional right-aligned meta. */
.admin-section {
  margin-top: 1.25rem;
}
.admin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.admin-section-help {
  color: var(--fg-2);
  margin-top: 0.4rem;
  font-size: 12px;
}

/* Instantly creds: three controls on one row at full width. */
.admin-instantly-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.admin-instantly-row [data-instantly-msg] {
  grid-column: 1 / -1;
}
.admin-instantly-updated {
  color: var(--fg-2);
}

/* Campaign rows: scannable two-line block, ID-link form revealed
   on demand. Grid gives us the optional third row without forcing
   space when hidden. */
.admin-campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-campaign-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
}
.admin-campaign-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.admin-campaign-name {
  font-weight: 500;
  word-break: break-word;
}
.admin-campaign-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-campaign-link-form {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-default, var(--line));
}
.admin-campaign-link-form .input { flex: 1; min-width: 0; }

/* A pill that's actually a button. Keeps the visual weight of the
   pill but signals interactivity (cursor + faint outline on focus). */
.admin-pill-btn {
  background: inherit;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.admin-pill-btn:focus-visible {
  outline: 2px solid var(--accent, #e4346f);
  outline-offset: 2px;
  border-radius: 999px;
}

@media (max-width: 767px) {
  .admin-row-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .admin-row-meta {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem 1rem;
  }
  .admin-quick-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .admin-credits-inline { flex-direction: column; align-items: stretch; }
  .admin-credits-delta, .admin-credits-note { width: 100%; }
  .admin-users-inline { margin-left: 0; text-align: left; }
  .admin-instantly-row {
    grid-template-columns: 1fr;
  }
  .admin-campaign-row {
    grid-template-columns: 1fr;
  }
  .admin-campaign-meta { justify-content: flex-start; }
}

/* In-page brand row: logo icon next to the wordmark.
   Sits OUTSIDE .lockup so its gap separates the icon from the
   wordmark without separating the wordmark from its dot. */
.brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-row.nav-home {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* ===============================================================
   LOGIN VIEW
   =============================================================== */

.login-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--gutter-mobile);
  min-height: 100vh;
}

.login-lockup {
  margin-bottom: var(--space-6);
  text-align: center;
}

.login-rules {
  margin-bottom: var(--space-7);
  width: min(480px, 90vw);
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: var(--maxw-form);
}

.login-h1 {
  margin: 0 0 var(--space-6);
  font-size: var(--fs-h1);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-cta {
  width: 100%;
  margin-top: var(--space-2);
}

.login-sent {
  text-align: center;
  padding: var(--space-6) 0;
}

.login-sent-icon {
  font-size: 40px;
  color: var(--accent);
  margin: 0 0 var(--space-4);
}

.login-sent-h {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h2);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
}

.login-resend {
  margin-top: var(--space-4);
}

.login-error {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--accent-faint);
  border-radius: var(--r-md);
  color: var(--accent);
}

/* ===============================================================
   LAYOUT PRIMITIVES
   =============================================================== */

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

.screen-wrap {
  flex: 1;
  padding: var(--space-6) 0 var(--space-8);
}

.minimal-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-4) 0;
  z-index: 50;
}

/* ===============================================================
   TYPOGRAPHY (extends tokens.css)
   =============================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 7vw, 80px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  margin: 0;
}

.h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  margin: 0;
}

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===============================================================
   BUTTON VARIANTS (extends .btn in tokens.css)
   =============================================================== */

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-arrow::after {
  content: "\2192";
  font-weight: 400;
  transition: transform 0.2s var(--ease-out, ease-out);
}

.btn-arrow:hover::after {
  transform: translateX(3px);
}

.btn-on-dark {
  background: var(--pure-white);
  color: var(--ink-black);
  border: 1px solid var(--pure-white);
}

.btn-on-dark:hover {
  background: var(--lt-1);
}

/* ===============================================================
   PROCESS CARDS (4-up "how it works")
   =============================================================== */

.process-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.process-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--pink-tint-20);
}

.process-card .step {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: var(--track-tight);
}

.process-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  margin: var(--space-4) 0 0;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
}

.process-card p {
  color: var(--fg-2);
  font-size: 14px;
  line-height: 1.5;
  margin: var(--space-2) 0 0;
}

/* ===============================================================
   ACCOUNT MANAGER CARD (dark, glossy)
   =============================================================== */

.am-card {
  background: linear-gradient(135deg, #000 0%, #1A1916 100%);
  color: var(--pure-white);
  border-radius: var(--r-xl);
  padding: var(--space-7);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  box-shadow: var(--shadow-lg);
  flex-wrap: wrap;
}

.am-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  color: var(--pure-white);
  flex-shrink: 0;
}

.am-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 240px;
}

.am-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
}

.am-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height: 1;
}

.am-email {
  font-size: 14px;
  color: #C2C2C2;
}

.am-quote {
  font-style: italic;
  color: #C2C2C2;
  font-size: 14px;
  margin: var(--space-2) 0 0;
  max-width: 38ch;
  line-height: 1.5;
}

.am-cta {
  flex-shrink: 0;
}

/* ===============================================================
   EXPLAINER SCREEN (3.3) bespoke bits
   =============================================================== */

.explainer {
  max-width: 920px;
  margin: 0 auto;
}

.credit-copy {
  max-width: 520px;
}

.credit-figure {
  text-align: center;
  flex-shrink: 0;
}

.credit-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 96px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: var(--track-tight);
}

.invite-card {
  text-align: center;
  padding: var(--space-7);
}

.invite-h {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  margin: var(--space-2) 0 0;
}

.invite-body {
  max-width: 520px;
  margin: var(--space-3) auto 0;
}

/* ===============================================================
   COMBO BOX (industry search, screen 3.4)
   =============================================================== */

.search-narrow {
  max-width: 720px;
  margin: 0 auto;
}

.combo {
  position: relative;
}

.combo-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-3);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.combo-input {
  padding-left: 56px;
  width: 100%;
}

.combo-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  max-height: 340px;
  overflow: auto;
  z-index: 10;
  padding: 8px;
}

.combo-group-label {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
}

.combo-item {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg-1);
  transition: background 0.15s;
}

.combo-item:hover,
.combo-item.highlight {
  background: var(--accent-tint);
  color: var(--accent);
}

.combo-item .arrow {
  opacity: 0;
  transition: opacity 0.15s;
}

.combo-item:hover .arrow,
.combo-item.highlight .arrow {
  opacity: 1;
}

.combo-item-marker {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 16px;
}

.combo-item .tick {
  display: none;
  color: var(--accent);
  font-weight: 700;
}

.combo-item.selected {
  color: var(--accent);
}

.combo-item.selected .arrow {
  display: none;
}

.combo-item.selected .tick {
  display: inline;
  opacity: 1;
}

.combo-empty {
  padding: 16px 12px;
  color: var(--fg-3);
  font-size: 14px;
  text-align: center;
}

/* ===============================================================
   SELECTED CHIPS (multi-select on search)
   =============================================================== */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--fg-1);
  font-family: var(--font-body);
}

.chip-selected {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent);
}

.chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  padding: 0;
  transition: background 0.15s;
}

.chip-x:hover {
  background: var(--accent);
  color: var(--pure-white);
}

.search-cta-row {
  display: flex;
  justify-content: flex-end;
}

/* ===============================================================
   FILTER SCREEN (3.5) layout
   =============================================================== */

/* Override tokens default: filter group titles read as body text,
   not pink. Pink stays reserved for the toggle mark and active
   include / exclude states, so it pulls the eye to state changes
   rather than to every header. */
.filter-header .name {
  color: var(--fg-1);
  font-weight: var(--w-semibold);
}

.filter-group.open .filter-header .name {
  color: var(--fg-1);
}

/* tokens.css sets .filter-body { display: flex } which overrides
   the browser default for [hidden]. Restore it explicitly. */
.filter-body[hidden] {
  display: none;
}

/* Filter group has overflow:hidden by default for rounded corners.
   Combo dropdowns and the info-tip popover both render outside
   the group's bounding box, so they get clipped. Lift the
   overflow whenever the group contains either. */
.filter-group:has(.combo),
.filter-group:has(.info-tip) {
  overflow: visible;
}

.filter-group .combo-list {
  z-index: 60;
}

/* Inside a filter header, the info-tip popover needs to lift above
   adjacent filter groups too. */
.filter-header .info-tip-pop {
  z-index: 70;
}

.filter-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .filter-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.filter-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-sidebar {
  display: flex;
  flex-direction: column;
}

/* On wide screens the sidebar sticks to the top while the user
   scrolls through filter groups so the live count and Continue
   button stay in view. On mobile we let it flow normally at the
   bottom of the single-column stack; pinning it inside a
   collapsed grid cell creates awkward overlap with the filters. */
@media (min-width: 1024px) {
  .filter-sidebar {
    position: sticky;
    top: 96px;
  }
}

.filter-text-input {
  font-size: 14px;
  padding: 10px 14px;
}

/* Location autocomplete inside a filter group */
.location-combo {
  position: relative;
}

.location-list {
  /* Smaller dropdown than the global search since the filter body
     is narrower. Same look. */
  max-height: 280px;
}

.loc-kind {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
  margin-left: 12px;
}

.combo-item.highlight .loc-kind,
.combo-item:hover .loc-kind {
  color: var(--accent);
}

.filter-option-list {
  display: flex;
  flex-direction: column;
}

.filter-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-muted);
}

.filter-toggle-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ---- Live result card ---- */

.result-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--accent-tint) 200%);
  border: 1px solid var(--pink-tint-20);
  border-radius: var(--r-xl);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.result-card .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 6.5vw, 76px);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-tight);
}

.result-card .meta {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-2);
  margin-top: 6px;
}

.result-card .lightning {
  margin: var(--space-4) auto 0;
  width: 100%;
}

.result-card .caption {
  margin-top: var(--space-3);
}

.delivery-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: var(--track-tight);
}

.filter-nav {
  margin-top: var(--space-5);
}

.strong {
  font-weight: 600;
}

/* ===============================================================
   CONFIRM SCREEN (3.7)
   =============================================================== */

.confirm-narrow {
  max-width: 760px;
  margin: 0 auto;
}

.summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.summary-row {
  align-items: flex-start;
  gap: var(--space-5);
}

.summary-row .subtitle {
  flex-shrink: 0;
  min-width: 150px;
}

.summary-row .summary-value {
  text-align: right;
  flex: 1;
}

.credit-block {
  border-top: 1px solid var(--border-default);
  padding-top: var(--space-5);
  margin-top: var(--space-2);
}

.credit-charge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  color: var(--accent);
  letter-spacing: var(--track-tight);
  line-height: 1;
}

.credit-warn {
  color: var(--accent);
}

/* ===============================================================
   INFO CAPTURE (3.8)
   =============================================================== */

.info-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--fg-3);
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  margin-left: 8px;
  cursor: help;
  vertical-align: middle;
  outline: 0;
}
.info-tip:hover,
.info-tip:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.info-tip-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ink-black);
  color: var(--pure-white);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  width: 260px;
  max-width: 80vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 50;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-lg);
}
.info-tip-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink-black);
}
.info-tip:hover .info-tip-pop,
.info-tip:focus-visible .info-tip-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Validation error states */
.input.input-invalid,
.input-invalid {
  border-color: var(--accent);
}
.input.input-invalid:focus,
.input-invalid:focus {
  box-shadow: 0 0 0 3px var(--pink-tint-20);
}

.field-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--accent);
  line-height: 1.4;
}

/* ===============================================================
   LOADERS (3.6 Hunt, 3.9 Forge) cosmetic interstitials
   =============================================================== */

.loader-stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-7) var(--gutter-mobile);
  gap: var(--space-5);
  text-align: center;
}

.loader-pillars {
  width: min(420px, 80vw);
  justify-content: center;
}

.loader-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
  margin: 0;
}

.loader-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 1;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.loader-status {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-2);
  min-height: 1.5em;
  transition: opacity 0.25s ease;
  margin: 0;
}

.loader-bar {
  width: min(420px, 80vw);
  height: 6px;
  background: var(--lt-2);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--pink-hover) 100%);
  border-radius: var(--r-pill);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(228, 52, 111, 0.45);
}
/* Shimmer sweep across the fill so the bar feels alive, not just
   a static gradient. */
.loader-bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: loader-bar-shimmer 1.4s infinite;
}
@keyframes loader-bar-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(400%); }
}

/* Hunt loader: dot cluster pulse + radar sweep overlay */
.dot-cluster {
  position: relative;
  width: min(360px, 80vw);
  height: 280px;
  overflow: hidden;
}
/* Radar-style horizontal sweep across the cluster */
.dot-cluster::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  filter: blur(0.5px);
  animation: dot-cluster-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.55;
}
@keyframes dot-cluster-sweep {
  0%   { top: -5%;  opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { top: 105%; opacity: 0; }
}
.pulse-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  animation: pulse-dot 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--pink-tint-20);
}
.pulse-dot.dot-l { width: 16px; height: 16px; }
.pulse-dot.dot-s { width: 8px;  height: 8px; background: var(--ink-black); }
@keyframes pulse-dot {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 0 0 var(--pink-tint-20); opacity: 0.7; }
  50%      { transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 0 18px rgba(228, 52, 111, 0); opacity: 1; }
}

/* Forge loader: orbit graphic */
.orbit {
  position: relative;
  width: 220px;
  height: 220px;
}
.orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, var(--hal-red-soft) 0%, var(--hal-red) 55%, #8C1018 100%);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.02em;
  box-shadow:
    0 0 0 6px rgba(225, 29, 42, 0.12),
    0 0 24px 4px var(--hal-red-glow),
    0 6px 28px rgba(225, 29, 42, 0.35);
  z-index: 2;
  animation: hal-pulse 2.4s ease-in-out infinite;
}
@keyframes hal-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(225, 29, 42, 0.10),
      0 0 18px 2px var(--hal-red-glow),
      0 6px 24px rgba(225, 29, 42, 0.30);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(225, 29, 42, 0.18),
      0 0 32px 8px var(--hal-red-glow),
      0 6px 36px rgba(225, 29, 42, 0.45);
  }
}
.orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--border-default);
  border-radius: 50%;
  animation: orbit-spin 6s linear infinite;
}
.orbit-ring-1 { animation-duration: 4s; }
.orbit-ring-2 { animation-duration: 6s; animation-direction: reverse; }
.orbit-ring-3 { animation-duration: 8s; }
.orbit-ring-4 { animation-duration: 5s; animation-direction: reverse; }
.orbit-dot {
  position: absolute;
  top: -7px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(228, 52, 111, 0.35);
}
.orbit-ring-2 .orbit-dot { background: var(--signal-blue); }
.orbit-ring-3 .orbit-dot { background: var(--signal-green); }
.orbit-ring-4 .orbit-dot { background: var(--signal-yellow); }
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.build-log {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 180px;
  text-align: left;
}
.build-log-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-2);
  opacity: 0;
  animation: log-fade-in 0.5s ease-out forwards;
}
.build-log-tick {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--pure-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
@keyframes log-fade-in {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.upsell-card {
  padding: var(--space-5);
  display: flex;
  gap: var(--space-5);
  align-items: center;
  flex-wrap: wrap;
}

.upsell-content {
  flex: 1;
  min-width: 240px;
}

.upsell-cta {
  flex-shrink: 0;
}

.upsell-cta[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* ===============================================================
   TEMPLATES (3.10)
   =============================================================== */

.template-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .template-grid { grid-template-columns: minmax(0, 1fr) 320px; }
}

.template-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.template-sidebar {
  position: sticky;
  top: 96px;
}

.template-card {
  padding: var(--space-5);
}

.template-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.template-head-label {
  display: block;
}

.template-hint {
  margin: 6px 0 0;
  color: var(--fg-3);
  font-size: 13px;
}

.template-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--lt-1);
  border: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
}
.meta-pill.over {
  background: var(--accent-tint);
  border-color: var(--pink-tint-20);
  color: var(--accent);
}
.meta-pill.good {
  background: rgba(126, 217, 87, 0.15);
  border-color: rgba(126, 217, 87, 0.4);
  color: #2f7a14;
}
.meta-pill.weak {
  background: var(--accent-tint);
  border-color: var(--pink-tint-20);
  color: var(--accent);
}

.template-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  min-height: 180px;
}

.template-tips {
  padding: var(--space-5);
}

.tips-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.7;
}
.tips-list code {
  background: var(--lt-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

/* Variable insertion pills (templates sidebar) */
.var-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.var-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 12px;
  background: var(--lt-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}

.var-pill:hover {
  background: var(--accent-tint);
  border-color: var(--pink-tint-20);
}

.var-pill code {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-1);
}

.var-pill:hover code {
  color: var(--accent);
}

.var-desc {
  font-size: 11px;
  color: var(--fg-3);
  font-weight: 500;
}

/* Preview pane (templates sidebar) */
.preview-card {
  padding: var(--space-5);
}

.preview-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--lt-1);
  border-radius: var(--r-pill);
  padding: 3px;
}

.preview-tab {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.preview-tab:hover {
  color: var(--fg-1);
}

.preview-tab.active {
  background: var(--ink-black);
  color: var(--pure-white);
}

.preview-body {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--space-4);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-1);
  max-height: 460px;
  overflow-y: auto;
}

.preview-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.preview-from,
.preview-to {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--fg-2);
  flex-wrap: wrap;
}

.preview-from-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: 10px;
  color: var(--fg-3);
  width: 28px;
}

.preview-from-name {
  font-weight: 600;
  color: var(--fg-1);
}

.preview-from-email {
  font-family: monospace;
  font-size: 11px;
  color: var(--fg-3);
}

.preview-subject {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin-bottom: var(--space-3);
}

.preview-prose {
  color: var(--fg-1);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.preview-rule {
  border: 0;
  border-top: 1px dashed var(--border-default);
  margin: var(--space-4) 0;
}

.preview-footer {
  color: var(--fg-3);
  font-size: 11px;
  line-height: 1.5;
}

/* ===============================================================
   WARMUP (3.11)
   =============================================================== */

.warmup-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.signal-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 120px;
}

.signal-bar {
  width: 6px;
  height: 100%;
  border-radius: var(--r-pill);
  animation: signal-pulse 1.3s ease-in-out infinite;
  transform-origin: center;
}
.signal-bar.bar-accent { background: var(--accent); }
.signal-bar.bar-dark   { background: var(--ink-black); }

@keyframes signal-pulse {
  0%, 100% { transform: scaleY(0.25); opacity: 0.8; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

.warmup-card {
  padding: var(--space-6);
}

.warmup-day {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: var(--track-tight);
  line-height: 1;
}

.warmup-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  color: var(--accent);
  letter-spacing: var(--track-tight);
  line-height: 1;
}

.warmup-bar {
  width: 100%;
  height: 6px;
}

.warmup-actions {
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* "Why 14 days" explainer card on the warmup screen */
.warmup-explainer {
  padding: var(--space-6);
  text-align: left;
}

.warmup-explainer-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .warmup-explainer-grid { grid-template-columns: repeat(3, 1fr); }
}

.warmup-explainer-step h3 {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  margin: var(--space-3) 0 var(--space-2);
}

.warmup-explainer-step p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}

.warmup-explainer-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
  letter-spacing: var(--track-tight);
}

/* ===============================================================
   APP NAV (dashboard / campaigns / settings)
   =============================================================== */

.app-nav-header {
  padding: var(--space-3) 0;
}

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-link {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.nav-link:hover {
  background: var(--lt-1);
  color: var(--fg-1);
}
.nav-link.active {
  color: var(--accent);
  background: var(--accent-tint);
}
.nav-signout {
  color: var(--fg-3);
}

.nav-credits {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  border: 1px solid var(--pink-tint-20);
  margin-right: var(--space-2);
  cursor: pointer;
  font: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.nav-credits:hover {
  background: var(--pink-tint-10);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.nav-credits-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.nav-credits-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent);
}
@media (max-width: 640px) {
  .nav-credits-label { display: none; }
}

/* ===============================================================
   DASHBOARD (3.12)
   =============================================================== */

.dashboard-section {
  display: flex;
  flex-direction: column;
}

.dashboard-section-head {
  align-items: flex-end;
}

.stat-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: var(--track-tight);
  line-height: 1;
  color: var(--fg-1);
}

.stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
  margin-top: 6px;
}

.mailbox-list,
.other-campaigns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mailbox-row,
.other-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  font-size: 14px;
}

.empty-card {
  padding: var(--space-7);
  text-align: center;
}

.empty-state-hero {
  padding: var(--space-8) var(--space-7);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.empty-pillars {
  display: inline-flex;
  gap: 6px;
  justify-content: center;
}

.empty-state-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  max-width: 520px;
  margin: 0 auto;
}

.empty-step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--bg-2);
}

.empty-step-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--accent);
  letter-spacing: -0.02em;
  min-width: 32px;
}

.empty-step-label {
  font-size: 0.9375rem;
  color: var(--fg-1);
}

.dashboard-actions {
  display: flex;
  gap: var(--space-3);
}

/* ===============================================================
   STATUS PILLS (used across dashboard / campaigns list)
   =============================================================== */

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  background: var(--lt-2);
  color: var(--fg-2);
}
/* pending_ops and warming both display as "Warming up", so they
   share the amber pill colour per the spec. */
.status-pill.status-pending_ops { background: rgba(255, 222, 89, 0.25); color: #8a6d00; }
.status-pill.status-warming     { background: rgba(255, 222, 89, 0.25); color: #8a6d00; }
.status-pill.status-live        { background: rgba(126, 217, 87, 0.2); color: #2f7a14; }
.status-pill.status-paused      { background: var(--lt-2); color: var(--fg-2); }
.status-pill.status-completed   { background: rgba(71, 132, 246, 0.15); color: #2856a8; }
.status-pill.status-active      { background: rgba(126, 217, 87, 0.2); color: #2f7a14; }
.status-pill.status-disconnected{ background: var(--accent-tint); color: var(--accent); }

/* Generic pill used by admin rows (Instantly linked / not linked,
   tenant locked / active, campaign status). Visual language matches
   .status-pill but without the status-specific coupling so the same
   tones can be applied to any boolean state in the admin console. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  background: var(--lt-2);
  color: var(--fg-2);
  white-space: nowrap;
}
.pill-green   { background: rgba(126, 217, 87, 0.2); color: #2f7a14; }
.pill-amber   { background: rgba(255, 222, 89, 0.25); color: #8a6d00; }
.pill-neutral { background: var(--lt-2); color: var(--fg-2); }
.pill-pink    { background: var(--accent-tint); color: var(--accent); }
.pill-blue    { background: rgba(71, 132, 246, 0.15); color: #2856a8; }

/* ===============================================================
   CAMPAIGNS LIST (3.13)
   =============================================================== */

.campaign-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campaign-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  font-size: 14px;
}

.campaign-row > span:nth-child(2),
.campaign-row > span:nth-child(3) {
  font-size: 12px;
  color: var(--fg-2);
  grid-column: 1;
}

.campaign-row > span:nth-child(4) {
  grid-row: 1;
  grid-column: 2;
}

@media (min-width: 768px) {
  .campaign-row {
    /* Fixed width on the status column so the pills line up cleanly
       across rows regardless of label length ("Live" vs "Warming up"). */
    grid-template-columns: 1.6fr 1.4fr 1fr 120px;
    gap: var(--space-4);
  }
  .campaign-row > span:nth-child(2),
  .campaign-row > span:nth-child(3) {
    font-size: 14px;
    color: var(--fg-1);
    grid-column: auto;
  }
  .campaign-row > span:nth-child(4) {
    grid-row: auto;
    grid-column: auto;
    text-align: right;
  }
}

.campaign-row.campaign-head {
  background: transparent;
  border: 0;
  padding: 0 var(--space-4) 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
  display: none;
}

@media (min-width: 768px) {
  .campaign-row.campaign-head {
    display: grid;
  }
}

/* ===============================================================
   SETTINGS (3.14)
   =============================================================== */

.settings-narrow {
  max-width: 720px;
  margin: 0 auto;
}

.settings-section {
  display: flex;
  flex-direction: column;
}

.settings-section-head {
  align-items: flex-end;
}

.credit-balance {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 48px;
  color: var(--accent);
  letter-spacing: var(--track-tight);
  line-height: 1;
}

.credit-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  font-size: 13px;
}

.ledger-row > span:first-child {
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  grid-column: 1;
}

.ledger-row > span:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--fg-1);
}

.ledger-row > span:last-child {
  text-align: right;
  font-weight: 600;
  grid-row: 1;
  grid-column: 2;
}

@media (min-width: 640px) {
  .ledger-row {
    grid-template-columns: 110px 1fr 110px;
    gap: var(--space-4);
  }
  .ledger-row > span:first-child {
    font-size: 13px;
    color: var(--fg-1);
    text-transform: none;
    letter-spacing: 0;
  }
  .ledger-row > span:nth-child(2) {
    grid-column: auto;
    grid-row: auto;
  }
  .ledger-row > span:last-child {
    grid-row: auto;
    grid-column: auto;
  }
}

.ledger-row.ledger-head {
  background: transparent;
  border: 0;
  padding: 0 var(--space-4) 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-3);
  display: none;
}

@media (min-width: 640px) {
  .ledger-row.ledger-head {
    display: grid;
  }
}

/* ===============================================================
   Creation header (logo + Save & exit on each creation step)
   =============================================================== */

.creation-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* ===============================================================
   Campaigns list - clickable rows + draft banner
   =============================================================== */

.campaign-row-clickable {
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.campaign-row-clickable:hover {
  border-color: var(--pink-tint-20);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.campaign-row-clickable:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}

.draft-banner {
  padding: var(--space-5);
}

.draft-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.nav-home {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

/* ===============================================================
   Per-campaign dashboard - back link, campaign head, stat rates,
   funnel viz
   =============================================================== */

.back-link {
  background: transparent;
  border: 0;
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  cursor: pointer;
  margin-bottom: var(--space-4);
}
.back-link:hover { color: var(--accent); }

.campaign-head {
  align-items: flex-end;
}

.dashboard-actions-row {
  align-items: center;
}

.stat-card {
  position: relative;
}

.stat-rate {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--accent);
  margin-top: 8px;
  letter-spacing: var(--track-tight);
}

/* Funnel: three rows, each label + bar + stat. Stat sits outside
   the bar so it stays readable at any fill width including zero. */

.funnel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}

.funnel-row {
  display: grid;
  grid-template-columns: 72px 1fr 96px;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .funnel-row {
    grid-template-columns: 90px 1fr 130px;
    gap: var(--space-4);
  }
}

.funnel-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-2);
}

.funnel-track {
  position: relative;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--lt-1);
  overflow: hidden;
}

.funnel-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-md);
  transition: width 0.5s var(--ease-out, ease-out);
  min-width: 4px;
}

.funnel-track-sent    .funnel-fill { background: linear-gradient(90deg, var(--ink-black), #3a3835); }
.funnel-track-opened  .funnel-fill { background: linear-gradient(90deg, var(--accent), var(--pink-hover)); }
.funnel-track-replied .funnel-fill { background: linear-gradient(90deg, var(--signal-green), #5aab3b); }

.funnel-stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--fg-1);
  letter-spacing: var(--track-tight);
  text-align: right;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
}

.funnel-pct {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

/* Templates: back + submit row */
.templates-nav {
  align-items: center;
}

/* ===============================================================
   MODALS (terms, landing-page request)
   =============================================================== */

.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 25, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 100;
  animation: modal-fade 0.18s ease-out;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  background: var(--bg-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-card-lg {
  max-width: 720px;
}

.modal-card-wide {
  max-width: 960px;
}

.brief-section {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-5);
}
.brief-section:last-child {
  border-bottom: 0;
}

.brief-dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: .5rem 1rem;
  margin: 0;
}
@media (max-width: 560px) {
  /* Collapse the term/definition into a single column on narrow
     screens so long values (URLs, addresses) don't shove the
     definition off the right edge of a phone. */
  .brief-dl {
    grid-template-columns: 1fr;
    gap: .125rem .5rem;
  }
  .brief-dl dt {
    margin-top: .5rem;
  }
}
.brief-dl dt {
  font-size: 0.8125rem;
  color: var(--fg-2);
}
.brief-dl dd {
  margin: 0;
  font-size: 0.9375rem;
  word-break: break-word;
}

.brief-template-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--space-4);
  background: var(--bg-2);
}

.brief-template-body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  white-space: pre-wrap;
  line-height: 1.5;
  margin: 0;
  background: var(--bg-card);
  padding: var(--space-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
}

.modal-head {
  padding: var(--space-6) var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.modal-body {
  padding: var(--space-5) var(--space-6);
  overflow-y: auto;
  flex: 1;
}

.modal-foot {
  padding: var(--space-4) var(--space-6) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  align-items: center;
}

.terms-section {
  margin-top: var(--space-5);
}
.terms-section:first-of-type {
  margin-top: var(--space-4);
}

.terms-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.terms-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.terms-footer-note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.landing-pitch {
  padding: var(--space-5);
}

/* ===============================================================
   UTILITIES (spacing, layout helpers)
   =============================================================== */

.row-spread {
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--fg-3); }
.flex-1      { flex: 1; }

.mt-2  { margin-top: 8px;  }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 32px; }
.mt-8  { margin-top: 48px; }
.mt-10 { margin-top: 64px; }

.mb-2  { margin-bottom: 8px;  }
.mb-3  { margin-bottom: 12px; }
.mb-4  { margin-bottom: 16px; }
.mb-6  { margin-bottom: 32px; }
.mb-8  { margin-bottom: 48px; }
.mb-10 { margin-bottom: 64px; }

.grid-3 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(4, 1fr); }
  .container { padding: 0 var(--gutter-desktop, 32px); }
}

/* ===============================================================
   AUTHED HOLDING (temp, replaced by dashboard in session 2)
   =============================================================== */

.authed-holding {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-7) var(--gutter-mobile);
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */

@media (min-width: 768px) {
  .login-lockup {
    margin-bottom: var(--space-7);
  }

  .login-card {
    padding: var(--space-7);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
  }
}

/* ===============================================================
   WOW POLISH (small, brand-quiet)
   =============================================================== */

/* (1) Count-card "thinking" indicator during "Calculating live
   count...". Earlier version used background-clip:text on the
   number itself, which risked rendering the number invisible if
   the fetch hung (color:transparent + an animation that depended
   on a gradient mask). Replaced with a thin pink line that pulses
   under the number - the number itself is always fully visible
   at its normal colour. */
.result-card {
  position: relative;
}
.result-card .num {
  position: relative;
  display: inline-block;
}
.result-card[data-state="calculating"] .num::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent, #e4346f);
  transform-origin: left;
  animation: count-thinking 1.2s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes count-thinking {
  0%   { transform: scaleX(0);   transform-origin: left; }
  50%  { transform: scaleX(1);   transform-origin: left; }
  51%  { transform: scaleX(1);   transform-origin: right; }
  100% { transform: scaleX(0);   transform-origin: right; }
}

/* (2) Industry / location / titles chip scale-in. When a chip
   is added we want a tiny moment of arrival rather than a hard
   pop. Sub-200ms so it never feels slow. */
.chip-selected {
  animation: chip-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: left center;
}
@keyframes chip-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* (3) Filter group expand uses height:auto under hidden, which
   doesn't transition. Add a transform-based reveal on the body
   so opening feels smooth without measuring heights from JS. */
.filter-body {
  transform-origin: top;
  transition: opacity 0.18s ease-out;
}
.filter-group:not(.open) .filter-body {
  opacity: 0;
}
.filter-group.open .filter-body {
  opacity: 1;
}

/* (4) Initial app boot: the static lockup in index.html fades
   in so the customer sees a deliberate reveal rather than a
   raw flash of unstyled content. Replaced once main.js mounts
   so this only governs the first ~120 ms before JS runs. */
.login-wrap > .login-lockup,
.login-wrap > .login-rules {
  animation: app-boot-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.login-wrap > .login-rules { animation-delay: 0.08s; }
@keyframes app-boot-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===============================================================
   CELEBRATION (deploy/scripts/celebrate.js)
   ===============================================================
   Brand-fit dopamine moments. Full-screen overlay with a
   sequential reveal: pink pillar-rules build first, then the
   eyebrow, then the headline, then the body line. Three seconds
   total. Auto-dismisses; click anywhere or hit Esc to dismiss
   early. Background scroll is locked while the overlay is on
   so the moment feels owned.
   
   Honors the global @media (prefers-reduced-motion: reduce) rule
   defined near the top of this file - it collapses every
   animation-duration to 0.01ms which makes the celebration
   render statically. No additional handling needed here. */

.celebration-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.92) 60%,
    rgba(228, 52, 111, 0.10) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  animation: celebration-bg-in 0.32s ease-out;
  cursor: pointer;
}
.celebration-overlay.celebration-out {
  animation: celebration-bg-out 0.3s ease-in forwards;
}
body.celebration-open {
  overflow: hidden;
}

.celebration-card {
  text-align: center;
  padding: var(--space-7) var(--space-6);
  max-width: 640px;
  cursor: default;
}

.celebration-pillars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-6);
}
.celebration-pillars span {
  display: block;
  width: 6px;
  height: 56px;
  border-radius: 3px;
  background: var(--accent, #e4346f);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: celebration-pillar 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.celebration-pillars span.b { background: #1a1916; }
.celebration-pillars span.g { background: #c9c4ba; }
.celebration-pillars span.y { background: #f5ccda; }

.celebration-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--track-wide, 0.08em);
  text-transform: uppercase;
  color: var(--accent, #e4346f);
  margin: 0 0 var(--space-3);
  opacity: 0;
  animation: celebration-text-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.46s forwards;
}

.celebration-headline {
  font-family: var(--font-display, inherit);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg-1, #1a1916);
  margin: 0 0 var(--space-4);
  opacity: 0;
  animation: celebration-text-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.62s forwards;
}

.celebration-body {
  font-size: 17px;
  line-height: 1.45;
  color: var(--fg-2, #4b4945);
  max-width: 480px;
  margin: 0 auto;
  opacity: 0;
  animation: celebration-text-in 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.84s forwards;
}

@keyframes celebration-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes celebration-bg-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes celebration-pillar {
  0%   { opacity: 0; transform: scaleY(0); }
  60%  { opacity: 1; transform: scaleY(1.06); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes celebration-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===============================================================
   COMPOSITE FILTER GROUPS (tech stack, hiring signals)
   ===============================================================
   Two of the filter groups added in v0.12 hold more than one
   control. Tech stack has two chip rows (uses / does not use).
   Hiring signals has a number input + a chip row. The shared
   helpers in filters.js render each sub-control with a small
   subtitle on top so the customer can see what each input does
   at a glance. */

.filter-subgroup + .filter-subgroup {
  margin-top: var(--space-4);
}

.filter-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide, 0.06em);
  color: var(--fg-2, #4b4945);
  margin-bottom: 6px;
}

.filter-num-row {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}

.filter-num-input {
  max-width: 160px;
  font-variant-numeric: tabular-nums;
}

/* ===============================================================
   BRAND MARK + LOCKUP (deploy/scripts/logo.js)
   ===============================================================
   The black rounded square + centred pink square that doubles as
   the favicon. Used as a brand glyph wherever a single mark
   reads more clearly than the wordmark alone - login, top nav,
   warmup hero, modal headers. */

.sw-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.sw-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sw-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-1, #1a1916);
  white-space: nowrap;
}
.sw-lockup-sm { font-size: 14px; gap: 8px; }
.sw-lockup-md { font-size: 18px; }
.sw-lockup-lg { font-size: clamp(20px, 3vw, 28px); gap: 12px; }
.sw-lockup-text {
  line-height: 1;
}

/* ===============================================================
   WARMUP "STACK A SECOND CAMPAIGN" CARD
   ===============================================================
   Engagement card shown during the 14-day warmup window so the
   customer can use the silent time productively. Same pink accent
   tone as the credit-block on Confirm so the visual language
   tracks "this is a meaningful action that costs something". */

.warmup-stack-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}
.warmup-stack-text {
  flex: 1;
}
.warmup-stack-cta {
  align-self: stretch;
}
@media (min-width: 768px) {
  .warmup-stack-card {
    flex-direction: row;
    align-items: center;
  }
  .warmup-stack-cta {
    align-self: center;
    flex-shrink: 0;
  }
}

/* ===============================================================
   LANDING PAGE REQUEST MODAL (redesigned 23 May 2026)
   ===============================================================
   Three-state modal: recording → success → (rare) failure.
   Success state has an animated draw-on pink check inside a
   stroked circle, large display headline, and a "what you get"
   pitch card with the price prominent. */

.landing-modal-card {
  max-width: 560px;
}
.landing-modal-body {
  padding: var(--space-7) var(--space-7) var(--space-6);
  text-align: center;
}

/* State 1: recording - pillar-rules build animation */
.landing-recording {
  padding: var(--space-5) 0;
}
.landing-pillars {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.landing-pillars span {
  display: block;
  width: 6px;
  height: 44px;
  border-radius: 3px;
  background: var(--accent, #e4346f);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: landing-pillar-build 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.landing-pillars span.b { background: #1a1916; }
.landing-pillars span.g { background: #c9c4ba; }
.landing-pillars span.y { background: #f5ccda; }
@keyframes landing-pillar-build {
  0%   { opacity: 0; transform: scaleY(0); }
  60%  { opacity: 1; transform: scaleY(1.08); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* State 2: success - draw-on check inside a stroked circle */
.landing-success {
  padding: var(--space-3) 0 0;
}
.landing-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@keyframes landing-circle-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes landing-check-draw {
  to { stroke-dashoffset: 0; }
}
.landing-success-h {
  font-size: clamp(28px, 5vw, 44px);
  margin: var(--space-2) 0 0;
}
.landing-success-lede {
  font-size: 15px;
  color: var(--fg-2);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.landing-pitch-card {
  background: var(--bg-2, #f7f5f1);
  border-radius: var(--r-lg, 12px);
  padding: var(--space-5) var(--space-6);
  text-align: left;
  border-left: 4px solid var(--accent, #e4346f);
}
.landing-pitch-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.landing-price {
  font-family: var(--font-display, inherit);
  font-weight: 900;
  font-size: 28px;
  color: var(--accent, #e4346f);
  letter-spacing: -0.01em;
}
.landing-pitch-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.landing-pitch-list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-1);
}
.landing-pitch-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #e4346f);
}

/* State 3: failure - calm + actionable */
.landing-failure {
  text-align: left;
  padding: var(--space-3) 0;
}

/* ----------------------------------------------------------------
   Scroll hint
   A small floating chevron in the bottom-right that appears when
   the page has more content below the fold. Hides at the bottom.
   Used to nudge customers toward the CTA on long forms (filters,
   templates, dashboard) without being naggy.
---------------------------------------------------------------- */

.scroll-hint {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg, #fff);
  color: var(--accent, #e4346f);
  border: 1px solid var(--line, rgba(0,0,0,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
  z-index: 90;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  padding: 0;
}
.scroll-hint:focus-visible {
  outline: 2px solid var(--accent, #e4346f);
  outline-offset: 2px;
}
.scroll-hint svg {
  width: 18px;
  height: 18px;
  display: block;
}
.scroll-hint.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: scroll-hint-bob 2.4s ease-in-out infinite;
}
@keyframes scroll-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint.visible { animation: none; }
}