/*
 * ecomspy — Shared Design System
 * All tool pages link to this file.
 * Tool-specific component CSS lives in each template's own <style> block.
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&display=swap');

/* ── Design Tokens ── */
:root {
  /* Accent — ecomspy brand green */
  --accent:        #00FF88;
  --accent-dark:   #00CC6E;
  --accent-soft:   rgba(0,255,136,.1);
  --accent-border: rgba(0,255,136,.25);
  --accent-glow:   rgba(0,255,136,.22);

  /* Surface — Dark mode */
  --bg:          #0A0F1C;
  --surface:     #121826;
  --surface-2:   #161F30;
  --surface-3:   #1A2236;
  --border:      #1E293B;
  --border-soft: #1E293B;

  /* Text */
  --text-dark:  #F1F5F9;
  --text-mid:   #CBD5E1;
  --text-body:  #94A3B8;
  --text-muted: #64748B;
  --text-faint: #475569;

  /* Semantic */
  --green:       #00CC6E;
  --green-bg:    rgba(0,255,136,.1);
  --green-border:rgba(0,255,136,.25);
  --amber:       #FBBF24;
  --amber-bg:    rgba(251,191,36,.1);
  --amber-border:rgba(251,191,36,.25);
  --red:         #F87171;
  --red-bg:      rgba(248,113,113,.1);
  --red-border:  rgba(248,113,113,.25);
  --blue:        #60A5FA;
  --blue-bg:     rgba(96,165,250,.1);
  --blue-border: rgba(96,165,250,.25);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Shadow */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:   0 1px 4px rgba(0,0,0,.5);
  --shadow-md:   0 2px 8px rgba(0,0,0,.6);
  --shadow-card: 0 1px 4px rgba(0,0,0,.5);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
html { background: #0A0F1C; overflow-x: hidden; height: -webkit-fill-available; }
body {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
  max-width: 100vw;
}

/* ════════════════════════════════════════════
   NAV
════════════════════════════════════════════ */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px; height: 62px;
  background: rgba(6,12,16,.97);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(12px);
}
.nav-left { display: flex; align-items: center; gap: 16px; }

/* Logo */
.nav-logo, .nav-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.nav-logo-icon, .nav-brand-icon {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  flex-shrink: 0; overflow: hidden;
  object-fit: contain; display: block;
}
.nav-logo-icon svg, .nav-brand-icon svg { display: none; }
.nav-logo-text, .nav-brand-name {
  font-size: 15px; font-weight: normal; color: var(--text-dark); letter-spacing: -.2px;
}
.logo-ecom { font-weight: 400; color: #CBD5E1; }
.logo-spy  { font-weight: normal; color: #00FF88; }

/* Separator */
.nav-sep, .nav-divider {
  width: 1px; height: 18px; background: var(--border); flex-shrink: 0;
}

/* Tool label */
.nav-tool, .nav-tool-name, .nav-page-label {
  font-size: 13px; color: var(--text-muted); font-weight: 500;
}

/* Back button — all variants */
.nav-back, .nav-home-btn, .nav-back-btn {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: normal; color: var(--text-body);
  text-decoration: none; padding: 7px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2);
  transition: all .15s;
}
.nav-back:hover, .nav-home-btn:hover, .nav-back-btn:hover {
  background: var(--surface-3); color: var(--text-dark); border-color: #334155;
}

/* ════════════════════════════════════════════
   HERO
════════════════════════════════════════════ */
.hero {
  background: linear-gradient(135deg, #060C10 0%, #0A1F18 40%, #050A14 100%);
  border-bottom: 1px solid var(--border);
  padding: 52px 36px 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,136,.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-chip, .hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(0,255,136,.1); border: 1px solid rgba(0,255,136,.25);
  color: rgba(0,255,136,.9); font-size: 11.5px; font-weight: normal;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(24px, 3.5vw, 38px); font-weight: normal;
  color: #fff; letter-spacing: -.03em;
  margin-bottom: 12px; line-height: 1.1;
}
.hero-sub, .hero > p {
  font-size: 15px; color: rgba(255,255,255,.62);
  max-width: 540px; margin: 0 auto 32px; line-height: 1.65;
}

/* ── Platform feature chips ── */
.platform-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.platform-chip { display: flex; align-items: center; gap: 7px; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.2); padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: normal; color: rgba(0,255,136,.9); }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Input inside hero ── */
.input-wrap { max-width: 620px; margin: 0 auto; }

.input-card, .input-box, .input-row {
  display: flex; gap: 8px; align-items: center;
  background: rgba(18,24,38,.95); border: 2px solid var(--border);
  border-radius: 14px; padding: 6px 6px 6px 16px;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.input-card:focus-within, .input-box:focus-within, .input-row:focus-within {
  border-color: rgba(0,255,136,.5);
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 3px rgba(0,255,136,.08);
  background: var(--surface);
}
.input-card input, .input-box input, .input-row input,
.url-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  color: var(--text-dark); padding: 8px 0; min-width: 0;
}
.input-card input::placeholder, .input-box input::placeholder,
.input-row input::placeholder, .url-input::placeholder { color: var(--text-faint); }

.url-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  color: var(--text-dark); padding: 8px 0;
}

.btn-go {
  padding: 10px 22px; border-radius: 10px; border: none; cursor: pointer;
  background: #00FF88;
  color: #000000; font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: normal; white-space: nowrap;
  transition: opacity .15s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 8px var(--accent-glow);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-go:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 0 20px rgba(0,255,136,.4); }
.btn-go:active { transform: translateY(0); }
.btn-go:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

.input-hint {
  font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 10px;
}

/* ── Error box (global — shared across all tools) ── */
#error-msg, #error-box,
.error-box {
  display: none;
  max-width: 520px; 
  margin: 12px auto 0; border-radius: 12px;
  padding: 12px 18px; font-size: 13px; font-weight: normal; text-align: center;
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: #F87171;
}
.error-box.show { display: block; }
.error-box p { color: inherit; }
@media (max-width: 640px) {
  .error-box { margin-left: 16px; margin-right: 16px; width: auto; }
}

/* ════════════════════════════════════════════
   LOADER
════════════════════════════════════════════ */
#loader {
  display: none; text-align: center; padding: 72px 32px;
}
.spin-ring {
  width: 44px; height: 44px; margin: 0 auto 18px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%; animation: _spin .75s linear infinite;
}
@keyframes _spin { to { transform: rotate(360deg); } }
#loader p { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.loading-wrap { text-align: center; padding: 48px 32px; }
.loading-wrap p { color: var(--text-muted); font-size: 14px; font-weight: 500; }

/* ════════════════════════════════════════════
   ERROR
════════════════════════════════════════════ */
#error-msg, #error-box {
  display: none; max-width: 620px; margin: 24px auto 0;
  padding: 13px 18px; background: var(--red-bg);
  border: 1px solid var(--red-border); border-radius: 10px;
  color: var(--red); font-size: 13px; font-weight: 500; text-align: center;
}
@media (max-width: 640px) {
  #error-msg, #error-box { margin-left: 16px; margin-right: 16px; width: auto; }
}

/* ════════════════════════════════════════════
   RESULTS WRAPPER
════════════════════════════════════════════ */
#results {
  display: none; max-width: 1100px; margin: 0 auto; padding: 36px 28px 80px;
}

/* ════════════════════════════════════════════
   SECTION EYEBROW
════════════════════════════════════════════ */
.section-eyebrow {
  font-size: 11px; font-weight: normal; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-faint);
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
}
.section-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.card, .panel, .side-card, .result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  min-width: 0;
  max-width: 100%;
}
.card-head, .panel-head, .side-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-soft);
}
.card-body, .panel-body, .side-body { padding: 16px 18px; }
.card-foot, .panel-foot {
  padding: 12px 18px; border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.card-title, .panel-title, .side-title {
  font-size: 13px; font-weight: normal; color: var(--text-dark);
}
.card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Side icon */
.side-icon {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ════════════════════════════════════════════
   TABS
════════════════════════════════════════════ */
.tab-bar, .fw-tab-bar, .email-tab-bar, .phase-tab-bar, .seq-tab-bar {
  display: flex; gap: 3px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 4px; margin-bottom: 16px;
}
.tab, .fw-tab, .email-tab, .phase-tab, .seq-tab, .filter-btn {
  flex: 1; min-width: 72px; padding: 8px 12px; border-radius: var(--r-sm);
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-family: 'Space Grotesk', sans-serif;
  font-size: 12px; font-weight: normal; text-align: center;
  transition: all .15s; white-space: nowrap;
}
.tab:hover, .fw-tab:hover, .email-tab:hover,
.phase-tab:hover, .seq-tab:hover, .filter-btn:hover {
  background: var(--surface-3); color: var(--text-dark);
}
.tab.active, .fw-tab.active, .email-tab.active,
.phase-tab.active, .seq-tab.active, .filter-btn.active {
  background: var(--surface-3); color: var(--text-dark);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.tab-panel, .fw-panel, .email-panel, .phase-panel, .seq-panel { display: none; }
.tab-panel.active, .fw-panel.active, .email-panel.active,
.phase-panel.active, .seq-panel.active { display: block; }

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
/* Primary */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 10px; border: none; cursor: pointer;
  background: #00FF88;
  color: #000000; font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px; font-weight: normal;
  transition: opacity .15s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 0 20px rgba(0,255,136,.4); }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }

/* Copy */
.btn-copy, .btn-copy-email {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 9px; cursor: pointer;
  background: var(--surface-3); border: 1.5px solid var(--border);
  color: var(--text-mid); font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px; font-weight: normal; transition: all .15s;
}
.btn-copy:hover, .btn-copy-email:hover { background: var(--surface-2); border-color: #334155; }
.btn-copy.ok, .btn-copy.copied,
.btn-copy-email.ok { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }

/* Ghost / plain */
.btn-copy-plain, .export-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text-body); font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px; font-weight: normal; transition: all .15s;
}
.btn-copy-plain:hover, .export-btn:hover {
  background: var(--surface-2); color: var(--text-dark); border-color: #334155;
}

/* Mini copy */
.mini-copy {
  padding: 3px 8px; border-radius: 5px; cursor: pointer;
  background: var(--surface-3); border: 1px solid var(--border);
  color: var(--text-muted); font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: normal; flex-shrink: 0; transition: all .12s;
}
.mini-copy:hover { background: var(--surface-2); color: var(--text-dark); }
.mini-copy.ok { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }

/* Download */
.dl-btn {
  display: none; align-items: center; gap: 8px;
  background: var(--accent-soft); border: 1.5px solid var(--accent-border);
  color: var(--accent); font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: normal; padding: 10px 20px;
  border-radius: 10px; cursor: pointer; transition: background .15s;
  margin-bottom: 28px;
}
.dl-btn.show { display: flex; }
.dl-btn:hover { background: rgba(0,255,136,.15); }

/* ════════════════════════════════════════════
   STATUS / SEMANTIC BADGES
════════════════════════════════════════════ */
.badge, .p-tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: normal; padding: 3px 10px;
  border-radius: 999px; border: 1px solid;
}
.badge-green, .pass-badge { background: var(--green-bg); color: #4ADE80; border-color: var(--green-border); }
.badge-amber, .warn-badge { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.badge-red,   .fail-badge { background: var(--red-bg);   color: var(--red); border-color: var(--red-border); }
.badge-blue               { background: var(--blue-bg);  color: var(--blue); border-color: var(--blue-border); }
.badge-gray, .p-tag       { background: var(--surface-3); color: var(--text-body); border-color: var(--border); }

/* Status text */
.pass, .s-good, .col-found { color: #4ADE80 !important; }
.warn, .s-needs            { color: var(--amber) !important; }
.fail, .s-missing, .col-missing { color: var(--red) !important; }
.empty-state, .muted { color: var(--text-faint) !important; }

/* ════════════════════════════════════════════
   EMAIL CARDS (referral, launch, email-flows)
════════════════════════════════════════════ */
.email-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card);
}
.email-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2);
}
.email-subj-label, .email-subject-label {
  font-size: 10px; font-weight: normal; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-faint); margin-bottom: 4px;
}
.email-subj, .email-subject {
  font-size: 15px; font-weight: normal; color: var(--text-dark); margin-bottom: 5px;
}
.email-prev, .email-preview { font-size: 12px; color: var(--text-muted); }
.email-body-wrap { padding: 20px; }
.email-body { font-size: 13px; color: var(--text-body); line-height: 1.8; white-space: pre-wrap; margin-bottom: 14px; }

/* ════════════════════════════════════════════
   COPY / RESULT TEXT AREA
════════════════════════════════════════════ */
.copy-area {
  padding: 20px 22px; font-size: 13.5px; color: var(--text-body);
  line-height: 1.85; white-space: pre-wrap;
  font-family: 'Space Grotesk', sans-serif; min-height: 200px;
}
.copy-area strong { color: var(--text-dark); font-weight: normal; }

/* ════════════════════════════════════════════
   GRID UTILITIES
════════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; }
.main-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }

@media(max-width:960px) { .main-grid { grid-template-columns: 1fr; } }
@media(max-width:900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px) { .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════
   COMMON RESULT COMPONENTS
════════════════════════════════════════════ */
/* Score hero */
.score-hero, .score-header {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}

/* Input card (in results sections) */
.input-card-title { font-size: 16px; font-weight: normal; color: var(--text-dark); }
.input-card-sub   { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* Checklist items */
.cl-text { color: var(--text-body); }
.cl-item.done .cl-text { color: var(--text-faint); text-decoration: line-through; }

/* Headings in result cards */
h1, h2, h3, h4 { color: var(--text-dark); }
p { color: var(--text-body); }

/* ════════════════════════════════════════════
   RESPONSIVE HELPERS
════════════════════════════════════════════ */

/* Input icon baseline fix — applies globally */
.input-card > svg, .input-box > svg, .input-row > svg {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-faint);
}

@media(max-width:600px) {
  nav { padding: 0 16px; }
  .hero { padding: 36px 16px 32px; }
  #results { padding: 24px 16px 60px; }
}

@media(max-width:480px) {
  .input-wrap { padding: 0 4px; }
  .input-box, .input-card, .input-row { padding: 6px 6px 6px 12px; gap: 6px; }
  .btn-go { padding: 10px 14px; font-size: 13px; }
}

@media(max-width:640px) {
  .input-box, .input-row {
    flex-wrap: wrap;
  }
  .input-box > svg, .input-row > svg {
    order: 1;
  }
  .input-box > input, .input-row > input,
  .input-box > .url-input, .input-row > .url-input {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
  }
  .input-box > button, .input-row > button {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

@media(max-width:480px) {
  nav {
    padding: 0 12px;
    height: 54px;
    gap: 8px;
  }
  .nav-left {
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .nav-logo, .nav-brand {
    gap: 8px;
    min-width: 0;
    max-width: 60vw;
  }
  .nav-logo-icon, .nav-brand-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }
  .nav-logo-text, .nav-brand-name {
    font-size: 12.5px;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-tool, .nav-tool-name, .nav-page-label {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 45vw;
  }
  .nav-back, .nav-home-btn, .nav-back-btn {
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav-sep, .nav-divider {
    display: none;
  }
  /* How It Works — horizontal scroll on mobile */
  .tp-steps {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-bottom: 8px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .tp-steps::-webkit-scrollbar { height: 3px; }
  .tp-steps::-webkit-scrollbar-track { background: transparent; }
  .tp-steps::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }
  .tp-step {
    min-width: 240px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start;
  }
}

@media(max-width:390px) {
  nav { padding: 0 10px; }
  .nav-logo-text, .nav-brand-name {
    max-width: 72px;
    font-size: 11.5px;
  }
  .nav-tool, .nav-tool-name, .nav-page-label {
    font-size: 11px;
    max-width: 38vw;
  }
  .nav-count {
    padding: 3px 6px;
    font-size: 9px;
    gap: 3px;
  }
  .nav-profile-btn {
    padding: 1px;
  }
  .nav-profile-btn-inner {
    gap: 5px;
    padding: 1px 7px 1px 1px;
  }
  .nav-avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  .nav-profile-name {
    max-width: 54px;
    font-size: 11.5px;
  }

  /* Hero tightening */
  .hero { padding: 28px 14px 22px; }
  .hero h1 { font-size: 22px; }
  .hero-sub, .hero > p { font-size: 14px; margin-bottom: 20px; }
  .hero-chip, .hero-badge { font-size: 10.5px; padding: 4px 12px; margin-bottom: 14px; }

  /* Results container */
  #results { padding: 20px 12px 56px; }

  /* Card sizing — prevent overflow */
  .card, .panel, .result-card, .side-card, .section-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Card padding tightening */
  .card-body, .panel-body, .side-body { padding: 14px 14px; }
  .card-head, .panel-head, .side-head { padding: 12px 14px; }
  .card-foot, .panel-foot { padding: 10px 14px; }

  /* Tab tightening */
  .tab, .fw-tab, .email-tab, .phase-tab, .seq-tab, .filter-btn {
    min-width: 60px;
    font-size: 11px;
    padding: 7px 8px;
  }

  /* Input at 390px */
  .input-box, .input-card, .input-row { padding: 5px 5px 5px 12px; gap: 5px; }
  .input-box input, .input-card input, .input-row input { font-size: 13px; }
  .btn-go { padding: 9px 12px; font-size: 12.5px; }
}

/* ── Results sticky action bar ─────────────────────────────────────────── */
.espy-results-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(7, 11, 20, 0.96); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(0,255,136,.18);
  padding: 12px 24px 14px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -4px 32px rgba(0,0,0,.4);
}
body.espy-results-mode .espy-results-bar { transform: translateY(0); }
.erb-inner {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.erb-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: normal; color: #00FF88;
}
.erb-status svg { flex-shrink: 0; }
.erb-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.erb-btn {
  font-size: 13px; font-weight: normal; padding: 9px 18px;
  border-radius: 9px; cursor: pointer; text-decoration: none;
  transition: all .15s; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.erb-btn-sec {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #CBD5E1;
}
.erb-btn-sec:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.erb-btn-primary {
  background: #00FF88; border: none; color: #0A0F1C;
  box-shadow: 0 4px 16px rgba(0,255,136,.3);
}
.erb-btn-primary:hover { background: #00e67a; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,255,136,.45); color: #0A0F1C; }
@media (max-width: 480px) {
  .erb-inner { flex-direction: column; gap: 10px; }
  .erb-actions { width: 100%; }
  .erb-btn { flex: 1; justify-content: center; padding: 10px 12px; }
  .erb-status { font-size: 12px; }
}

/* ── Results Mode: keep dark theme, hide hero/landing sections ─────────── */
body.espy-results-mode {
  background: var(--bg) !important;
}
/* hide hero / input sections */
body.espy-results-mode .hero,
body.espy-results-mode .tool-hero,
body.espy-results-mode .hero-section,
body.espy-results-mode .landing-hero,
body.espy-results-mode .page-hero,
body.espy-results-mode .tool-intro,
body.espy-results-mode .platform-chips,
body.espy-results-mode .hero-badges,
body.espy-results-mode .hero-badge,
body.espy-results-mode .loading-wrap { display: none !important; }
/* hide ALL tool landing/SEO partials below the fold */
body.espy-results-mode .tp-section,
body.espy-results-mode .tp-da-section,
body.espy-results-mode .tp-faq-section,
body.espy-results-mode .tp-bookcall-section,
body.espy-results-mode footer { display: none !important; }
/* keep nav */
body.espy-results-mode nav { display: flex !important; }
/* page wrapper — stays dark */
body.espy-results-mode .page { background: var(--bg) !important; }

/* results panel — dark elevated surface with accent top stripe */
body.espy-results-mode #results,
body.espy-results-mode #results-wrap,
body.espy-results-mode #results-panel,
body.espy-results-mode #resultsWrap,
body.espy-results-mode #blog-results,
body.espy-results-mode #video-results,
body.espy-results-mode #calResults,
body.espy-results-mode #stratResults,
body.espy-results-mode #mi-results,
body.espy-results-mode #resultsAiSeo,
body.espy-results-mode #resultsAeo,
body.espy-results-mode #resultsGeo,
body.espy-results-mode #resultsSection,
body.espy-results-mode #ideas-results {
  background: var(--bg) !important;
  color: var(--text-dark) !important;
  border-radius: 0 !important;
  padding: 32px 0 100px !important;
  min-height: calc(100vh - 56px) !important;
  border-top: 2px solid var(--accent-border) !important;
}

/* loading spinner stays hidden while in results mode */
body.espy-results-mode #loading { display: none !important; }

/* CRO tool containers (hidden-class pattern) — keep dark */
body.espy-results-mode #pdpReportContainer,
body.espy-results-mode #siteReportContainer {
  background: var(--bg) !important;
  padding: 16px 0 100px !important;
  min-height: calc(100vh - 56px) !important;
  border-top: 2px solid var(--accent-border) !important;
}

/* ── Shared Tool Page Landing Sections ── */
.tp-container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.tp-container-narrow { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.tp-section { padding: 64px 0; }
.tp-section-title { font-size: 26px; font-weight: normal; color: #F1F5F9; margin-bottom: 10px; letter-spacing: -.02em; }

/* Related Tools — homepage card style */
.tp-related-section { background: #0A0F1C; border-top: 1px solid #1E293B; padding: 72px 0 60px; }
.tp-related-header { text-align: center; margin-bottom: 40px; }
.tp-related-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #22c55e; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.tp-related-section .tp-section-title { font-size: 28px; font-weight: normal; letter-spacing: -.02em; margin-bottom: 12px; }
.tp-related-section .tp-section-sub { font-size: 15px; color: #94A3B8; margin-bottom: 0; }
.tp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 0; }
/* .tp-related-track-wrap retired — replaced by Swiper in tool_related_tools.html */
.tp-related-card {
  display: flex; flex-direction: column; height: 100%;
  background: linear-gradient(160deg, #161F30 0%, #121826 100%);
  border: 1.5px solid #1E293B;
  /* border-top: 3px solid var(--rc, #22c55e); */
  border-radius: 16px; padding: 20px 18px 16px;
  text-decoration: none; color: inherit;
  transition: all .2s; position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.tp-related-card:hover { border-color: var(--rc, #22c55e); border-top-color: var(--rc, #22c55e); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.4); background: linear-gradient(160deg, #1A2438 0%, #141C2C 100%); }
.tp-rc-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.tp-rc-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--rb, rgba(34,197,94,.08)); border: 1.5px solid var(--rbd, rgba(34,197,94,.2)); display: flex; align-items: center; justify-content: center; color: var(--rc, #22c55e); flex-shrink: 0; transition: transform .2s; }
.tp-related-card:hover .tp-rc-icon { transform: scale(1.1) rotate(-3deg); }
.tp-rc-badge { font-size: 10.5px; font-weight: normal; padding: 4px 10px; border-radius: 8px; background: rgba(34,197,94,.08); color: #4ADE80; border: 1px solid rgba(34,197,94,.2); }
.tp-rc-title { font-size: 15px; font-weight: normal; color: #F1F5F9 !important; margin-bottom: 8px; line-height: 1.3; letter-spacing: -.02em; }
.tp-rc-desc { font-size: 13px; color: #94A3B8 !important; line-height: 1.65; flex: 1; margin-bottom: 16px; }
.tp-rc-footer { display: flex; align-items: center; padding-top: 12px; border-top: 1px solid #1E293B; margin-top: auto; }
.tp-rc-action { font-size: 12.5px; font-weight: normal; color: var(--rc, #22c55e) !important; display: flex; align-items: center; gap: 5px; }
.tp-rc-action svg { transition: transform .15s; }
.tp-related-card:hover .tp-rc-action svg { transform: translateX(4px); }

/* Book a Call CTA */
.tp-bookcall-section { padding: 80px 24px; background: linear-gradient(135deg, rgba(124,58,237,0.07) 0%, rgba(59,130,246,0.07) 100%); border-top: 1px solid #1E293B; border-bottom: 1px solid #1E293B; text-align: center; }
.tp-bookcall-label { font-size: 11px; font-weight: normal; letter-spacing: .1em; text-transform: uppercase; color: #64748B; margin-bottom: 14px; }
.tp-bookcall-heading { font-size: clamp(22px, 4vw, 30px); font-weight: normal; color: #F1F5F9; margin-bottom: 14px; letter-spacing: -.01em; }
.tp-bookcall-sub { font-size: 15px; color: #94A3B8; max-width: 520px; margin: 0 auto 28px; line-height: 1.65; }
.tp-bookcall-btn { display: inline-block; background: linear-gradient(135deg, #7c3aed, #3b82f6); color: #fff !important; font-size: 15px; font-weight: normal; padding: 14px 36px; border-radius: 12px; text-decoration: none; transition: transform .18s, box-shadow .18s; }
.tp-bookcall-btn:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.35); opacity: 1; }

/* ── Tool Page Content Sections (shared) ── */
.tp-section-sub { font-size: 14px; color: #64748B; margin-bottom: 28px; }

/* Direct Answer */
/* ── Direct Answer / Featured Answer card ── */
.tp-da-section { background: #080D1A; padding: 64px 0; }
.tp-da-card {
  background: linear-gradient(135deg, #0F1A2E 0%, #0A1220 100%);
  border: 1.5px solid #1E3A5F;
  border-left: 4px solid #00FF88;
  border-radius: 16px;
  padding: 32px 36px;
  position: relative;
  box-shadow: 0 4px 32px rgba(0,255,136,.06), 0 1px 8px rgba(0,0,0,.4);
}
.tp-da-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: 16px;
  background: radial-gradient(ellipse at top left, rgba(0,255,136,.04) 0%, transparent 60%);
  pointer-events: none;
}
.tp-da-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: normal; text-transform: uppercase; letter-spacing: .08em;
  color: #00FF88;
  background: rgba(0,255,136,.08);
  border: 1px solid rgba(0,255,136,.2);
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 18px;
}
.tp-da-q { font-size: 20px; font-weight: normal; color: #F1F5F9; line-height: 1.4; margin-bottom: 16px; }
.tp-da-rule { height: 1px; background: linear-gradient(90deg, rgba(0,255,136,.3), transparent); margin-bottom: 16px; }
.tp-da-a { font-size: 15px; color: #94A3B8; line-height: 1.8; margin: 0; }
@media (max-width: 640px) { .tp-da-card { padding: 24px 20px; } .tp-da-q { font-size: 17px; } }

/* How It Works */
.tp-hiw-section { background: #080D1A; }
.tp-hiw-header { text-align: center; margin-bottom: 40px; }
.tp-hiw-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #00FF88; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.2);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.tp-hiw-section .tp-section-title { font-size: 28px; font-weight: normal; letter-spacing: -.02em; margin-bottom: 10px; }
.tp-hiw-section .tp-section-sub { font-size: 15px; color: #64748B; margin: 0; }
.tp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; align-items: stretch; }
.tp-step { display: flex; gap: 14px; align-items: flex-start; background: #0E1520; border: 1px solid #1E293B; border-radius: 14px; padding: 22px; transition: border-color .2s; height: 100%; box-sizing: border-box; }
.tp-step:hover { border-color: rgba(0,255,136,.25); }
.tp-step-num { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.25); color: #00FF88; font-size: 14px; font-weight: normal; display: flex; align-items: center; justify-content: center; }
.tp-step-title { font-size: 14px; font-weight: normal; color: #F1F5F9; margin-bottom: 6px; }
.tp-step-desc { font-size: 13px; color: #64748B; line-height: 1.55; }

/* Sample Output */
.tp-sample-section { background: #0D1220; }
.tp-sample-intro { text-align: center; margin-bottom: 32px; }
.tp-sample-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #00FF88; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.2);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.tp-sample-section .tp-section-title { font-size: 28px; font-weight: normal; letter-spacing: -.02em; margin-bottom: 10px; }
.tp-sample-section .tp-section-sub { font-size: 15px; color: #64748B; margin-bottom: 0; }
.tp-sample-card { background: #121826; border: 1px solid #1E293B; border-radius: 14px; overflow: hidden; margin-top: 28px; }
.tp-sample-header { display: flex; align-items: center; gap: 6px; padding: 12px 18px; background: #0D1220; border-bottom: 1px solid #1E293B; }
.tp-sample-dot { width: 10px; height: 10px; border-radius: 50%; background: #2D3748; }
.tp-sample-header .tp-sample-dot:nth-child(1) { background: #EF4444; }
.tp-sample-header .tp-sample-dot:nth-child(2) { background: #FBBF24; }
.tp-sample-header .tp-sample-dot:nth-child(3) { background: #4ADE80; }
.tp-sample-url { margin-left: 10px; font-size: 12px; color: #475569; font-weight: 500; }
.tp-sample-rows { padding: 8px 0; }
.tp-sample-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid #1E293B; }
.tp-sample-row:last-child { border-bottom: none; }
.tp-sample-label { font-size: 13px; color: #94A3B8; font-weight: 500; }
.tp-sample-value { font-size: 13px; font-weight: normal; }
.tp-status-good { color: #4ADE80; }
.tp-status-warning { color: #FBBF24; }
.tp-status-danger { color: #F87171; }

/* CRO Audit Mockup */
.tp-mock-cro { max-width: 860px; margin: 28px auto 0; }
.tp-mock-score-row { display: flex; align-items: center; gap: 20px; padding: 24px 28px; border-bottom: 1px solid #1E293B; }
.tp-mock-score-ring { position: relative; flex-shrink: 0; }
.tp-mock-score-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 20px; font-weight: normal; color: #FBBF24; line-height: 1; }
.tp-mock-score-num span { font-size: 11px; color: #64748B; font-weight: normal; }
.tp-mock-score-info { display: flex; align-items: center; gap: 14px; flex: 1; }
.tp-mock-grade { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: normal; flex-shrink: 0; }
.tp-mock-grade-c { background: #78350F; color: #FBBF24; }
.tp-mock-grade-b { background: #14532D; color: #4ADE80; }
.tp-mock-grade-label { font-size: 15px; font-weight: normal; color: #F1F5F9; }
.tp-mock-url-blur { font-size: 12px; color: #475569; margin-top: 3px; filter: blur(3.5px); user-select: none; }
.tp-mock-score-sub { font-size: 10px; font-weight: normal; color: #475569; letter-spacing: .08em; margin-left: auto; }
.tp-mock-tabs { display: flex; gap: 6px; padding: 14px 18px; border-bottom: 1px solid #1E293B; overflow-x: auto; flex-wrap: wrap; }
.tp-mock-tab { background: #0D1220; border: 1px solid #1E293B; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: normal; color: #64748B; cursor: default; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tp-mock-tab-active { border-color: #4ADE80; color: #F1F5F9; }
.tp-mock-tab-score { font-size: 11px; font-weight: normal; padding: 1px 6px; border-radius: 5px; }
.tp-mock-tab-score.good { background: rgba(74,222,128,.15); color: #4ADE80; }
.tp-mock-tab-score.warn { background: rgba(251,191,36,.15); color: #FBBF24; }
.tp-mock-tab-score.danger { background: rgba(248,113,113,.15); color: #F87171; }
.tp-mock-tab-score.neutral { background: #1E293B; color: #94A3B8; }
.tp-mock-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 18px; }
.tp-mock-card { background: #0D1220; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; }
.tp-mock-card-title { font-size: 12px; font-weight: normal; color: #F1F5F9; margin-bottom: 8px; line-height: 1.3; }
.tp-mock-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tp-mock-tag { font-size: 10px; font-weight: normal; padding: 2px 6px; border-radius: 4px; }
.tp-mock-tag.good { background: rgba(74,222,128,.15); color: #4ADE80; }
.tp-mock-tag.danger { background: rgba(248,113,113,.15); color: #F87171; }
.tp-mock-bar { height: 4px; background: #1E293B; border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.tp-mock-bar-fill { height: 100%; border-radius: 2px; }
.tp-mock-bar-fill.good { background: #4ADE80; }
.tp-mock-bar-fill.warn { background: #FBBF24; }
.tp-mock-bar-fill.danger { background: #F87171; }
.tp-mock-card-footer { display: flex; align-items: center; justify-content: space-between; }
.tp-mock-badge { font-size: 10px; font-weight: normal; padding: 2px 7px; border-radius: 4px; }
.tp-mock-badge.good { background: rgba(74,222,128,.15); color: #4ADE80; }
.tp-mock-badge.warn { background: rgba(251,191,36,.15); color: #FBBF24; }
.tp-mock-badge.danger { background: rgba(248,113,113,.15); color: #F87171; }
.tp-mock-card-score { font-size: 20px; font-weight: normal; color: #F1F5F9; }
.tp-mock-dl-row { display: flex; gap: 10px; justify-content: center; padding: 18px; border-top: 1px solid #1E293B; flex-wrap: wrap; }
.tp-mock-dl-btn { display: flex; align-items: center; gap: 7px; background: #1E293B; border: 1px solid #334155; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: normal; color: #F1F5F9; cursor: default; }

/* Competitor Compare Mockup */
.tp-mock-cc { max-width: 860px; margin: 28px auto 0; }
.tp-mock-cc-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid #1E293B; }
.tp-mock-cc-report-label { font-size: 10px; font-weight: normal; color: #475569; letter-spacing: .1em; }
.tp-mock-cc-winner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border: 1px solid #334155; border-radius: 10px; margin: 16px; background: #0D1220; }
.tp-mock-cc-winner-title { font-size: 17px; font-weight: normal; color: #F1F5F9; margin-bottom: 6px; }
.tp-mock-cc-winner-sub { font-size: 12px; color: #94A3B8; line-height: 1.5; max-width: 480px; }
.tp-mock-cc-scores { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tp-mock-cc-score-box { background: #1E293B; border-radius: 8px; padding: 10px 16px; text-align: center; min-width: 64px; }
.tp-mock-cc-score-num { font-size: 26px; font-weight: normal; line-height: 1; }
.tp-mock-cc-score-num.a { color: #3B82F6; }
.tp-mock-cc-score-num.b { color: #A78BFA; }
.tp-mock-cc-score-lbl { font-size: 9px; font-weight: normal; color: #475569; letter-spacing: .07em; margin-top: 4px; }
.tp-mock-cc-vs { font-size: 12px; color: #475569; font-weight: normal; }
.tp-mock-cc-store-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; }
.tp-mock-cc-store-card { background: #0D1220; border-radius: 10px; padding: 16px; }
.tp-mock-cc-store-card.a { border: 1.5px solid #3B82F6; }
.tp-mock-cc-store-card.b { border: 1.5px solid #A78BFA; }
.tp-mock-cc-store-tag { font-size: 10px; font-weight: normal; letter-spacing: .08em; margin-bottom: 4px; }
.tp-mock-cc-store-tag.a { color: #3B82F6; }
.tp-mock-cc-store-tag.b { color: #A78BFA; }
.tp-mock-cc-store-url { font-size: 12px; color: #475569; margin-bottom: 8px; filter: blur(3px); user-select: none; }
.tp-mock-cc-store-score { font-size: 32px; font-weight: normal; line-height: 1; }
.tp-mock-cc-store-score span { font-size: 14px; color: #64748B; font-weight: normal; }
.tp-mock-cc-store-score.a { color: #FBBF24; }
.tp-mock-cc-store-score.b { color: #FBBF24; }
.tp-mock-cc-store-grade { font-size: 11px; color: #94A3B8; margin-top: 4px; }
.tp-mock-cc-table { margin: 0 16px 16px; border: 1px solid #1E293B; border-radius: 10px; overflow: hidden; }
.tp-mock-cc-thead { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 12px; padding: 10px 14px; background: #0A0F1C; font-size: 10px; font-weight: normal; letter-spacing: .08em; color: #475569; border-bottom: 1px solid #1E293B; }
.tp-mock-cc-row { display: grid; grid-template-columns: 180px 1fr 1fr; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #1E293B; }
.tp-mock-cc-row:last-child { border-bottom: none; }
.tp-mock-cc-cell-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: normal; color: #F1F5F9; }
.tp-mock-cc-dot { width: 8px; height: 8px; border-radius: 50%; background: #EF4444; flex-shrink: 0; }
.tp-mock-cc-cell { display: flex; flex-direction: column; gap: 4px; }
.tp-mock-cc-status { font-size: 11px; font-weight: normal; }
.tp-mock-cc-status.good { color: #4ADE80; }
.tp-mock-cc-status.warn { color: #FBBF24; }
.tp-mock-cc-status.danger { color: #F87171; }
.tp-mock-cc-badge { font-size: 10px; font-weight: normal; padding: 1px 7px; border-radius: 20px; }
.tp-mock-cc-badge.a { background: rgba(59,130,246,.15); color: #3B82F6; }
.tp-mock-cc-badge.b { background: rgba(74,222,128,.15); color: #4ADE80; }
.tp-mock-cc-badge.t { background: #1E293B; color: #94A3B8; }
.tp-mock-cc-score-inline { font-size: 14px; font-weight: normal; flex-shrink: 0; }
.tp-mock-cc-score-inline.good { color: #4ADE80; }
.tp-mock-cc-score-inline.warn { color: #FBBF24; }
.tp-mock-cc-score-inline.danger { color: #F87171; }
@media (max-width: 600px) {
  .tp-mock-cc-winner { flex-direction: column; }
  .tp-mock-cc-thead { grid-template-columns: 120px 1fr 1fr; font-size: 9px; }
  .tp-mock-cc-row { grid-template-columns: 120px 1fr 1fr; }
  .tp-mock-cc-cell-label { font-size: 11px; }
}

/* SEO Hub Mockup */
.tp-mock-seo { max-width: 860px; margin: 28px auto 0; }
.tp-mock-seo-wins { border: 1px solid #14532D; border-radius: 10px; padding: 16px 20px; margin: 16px; background: rgba(20,83,45,.12); }
.tp-mock-seo-wins-label { font-size: 10px; font-weight: normal; color: #4ADE80; letter-spacing: .1em; margin-bottom: 12px; }
.tp-mock-seo-win-item { display: flex; gap: 12px; margin-bottom: 10px; }
.tp-mock-seo-win-item:last-child { margin-bottom: 0; }
.tp-mock-seo-win-num { width: 20px; height: 20px; border-radius: 4px; background: #14532D; color: #4ADE80; font-size: 11px; font-weight: normal; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tp-mock-seo-win-cat { font-size: 10px; font-weight: normal; color: #94A3B8; letter-spacing: .08em; margin-bottom: 3px; }
.tp-mock-seo-win-desc { font-size: 12px; color: #CBD5E1; line-height: 1.45; }
.tp-mock-seo-issues { border: 1px solid #3B1515; border-radius: 10px; padding: 16px 20px; margin: 0 16px 16px; background: rgba(59,21,21,.15); }
.tp-mock-seo-issues-label { font-size: 10px; font-weight: normal; color: #F87171; letter-spacing: .1em; margin-bottom: 12px; }
.tp-mock-seo-issue { display: flex; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; align-items: flex-start; }
.tp-mock-seo-issue:last-child { margin-bottom: 0; }
.tp-mock-seo-issue-tag { font-size: 10px; font-weight: normal; background: #7F1D1D; color: #FCA5A5; padding: 2px 8px; border-radius: 4px; flex-shrink: 0; }
.tp-mock-seo-issue-desc { font-size: 12px; color: #94A3B8; line-height: 1.45; flex: 1; min-width: 200px; }
.tp-mock-seo-audit-label { font-size: 10px; font-weight: normal; color: #475569; letter-spacing: .1em; padding: 0 20px 10px; }
.tp-mock-seo-sections { display: flex; flex-direction: column; gap: 0; padding: 0 16px 16px; }
.tp-mock-seo-row { display: flex; gap: 14px; align-items: flex-start; background: #0D1220; border: 1px solid #1E293B; border-radius: 10px; padding: 14px 16px; margin-bottom: 6px; }
.tp-mock-seo-row:last-child { margin-bottom: 0; }
.tp-mock-seo-score { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: normal; flex-shrink: 0; }
.tp-mock-seo-score.good { background: #14532D; color: #4ADE80; }
.tp-mock-seo-score.warn { background: #78350F; color: #FBBF24; }
.tp-mock-seo-score.danger { background: #7F1D1D; color: #F87171; }
.tp-mock-seo-row-inner { flex: 1; }
.tp-mock-seo-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-mock-seo-name { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-seo-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tp-mock-seo-status { font-size: 12px; font-weight: normal; }
.tp-mock-seo-status.good { color: #4ADE80; }
.tp-mock-seo-status.warn { color: #FBBF24; }
.tp-mock-seo-status.danger { color: #F87171; }
.tp-mock-seo-pri { font-size: 10px; font-weight: normal; padding: 2px 8px; border-radius: 20px; letter-spacing: .05em; }
.tp-mock-seo-pri.high { background: rgba(248,113,113,.15); color: #F87171; border: 1px solid rgba(248,113,113,.3); }
.tp-mock-seo-pri.med { background: rgba(251,191,36,.12); color: #FBBF24; border: 1px solid rgba(251,191,36,.3); }
/* AEO sub-tabs */
.tp-mock-seo-tabs { display: flex; gap: 0; border-bottom: 1px solid #1E293B; padding: 0 16px; }
.tp-mock-seo-tab { font-size: 12px; font-weight: normal; color: #475569; padding: 10px 16px; cursor: default; border-bottom: 2px solid transparent; }
.tp-mock-seo-tab.active { color: #4ADE80; border-bottom-color: #4ADE80; }
/* AEO score banner */
.tp-mock-seo-score-banner { padding: 16px 20px; border-bottom: 1px solid #1E293B; }
.tp-mock-seo-big-score { display: inline-flex; align-items: baseline; gap: 4px; margin-bottom: 8px; }
.tp-mock-seo-big-num { font-size: 38px; font-weight: normal; color: #FBBF24; line-height: 1; }
.tp-mock-seo-big-denom { font-size: 14px; color: #64748B; font-weight: normal; }
.tp-mock-seo-counters { display: flex; gap: 20px; margin-bottom: 10px; }
.tp-mock-seo-counter { display: flex; flex-direction: column; align-items: center; font-size: 9px; font-weight: normal; letter-spacing: .06em; gap: 2px; }
.tp-mock-seo-counter span { font-size: 20px; font-weight: normal; line-height: 1; }
.tp-mock-seo-counter.good span { color: #4ADE80; }
.tp-mock-seo-counter.warn span { color: #FBBF24; }
.tp-mock-seo-counter.danger span { color: #F87171; }
.tp-mock-seo-counter.good { color: #4ADE80; }
.tp-mock-seo-counter.warn { color: #94A3B8; }
.tp-mock-seo-counter.danger { color: #94A3B8; }
.tp-mock-seo-grade-pill { display: inline-block; background: #78350F; color: #FBBF24; font-size: 11px; font-weight: normal; padding: 3px 10px; border-radius: 6px; margin-bottom: 10px; }
.tp-mock-seo-engine-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-mock-seo-engine-label { font-size: 9px; font-weight: normal; color: #475569; letter-spacing: .08em; }
.tp-mock-seo-engine-chip { font-size: 11px; font-weight: normal; color: #A78BFA; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.3); padding: 3px 10px; border-radius: 20px; }
/* blue bar/score for AEO */
.tp-mock-seo-score.blue { background: #1E3A5F; color: #60A5FA; }
.tp-mock-seo-status.blue { color: #60A5FA; }
.tp-mock-bar-fill.blue { background: #3B82F6; }

/* Description Rewriter Mockup */
.tp-mock-dr { max-width: 860px; margin: 28px auto 0; }
.tp-mock-blur-inline { filter: blur(4px); user-select: none; display: inline-block; }
.tp-mock-dr-header { background: rgba(74,222,128,.07); border-bottom: 1px solid rgba(74,222,128,.15); padding: 16px 20px; }
.tp-mock-dr-title { font-size: 15px; font-weight: normal; color: #F1F5F9; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tp-mock-dr-ready { font-size: 10px; font-weight: normal; background: rgba(74,222,128,.15); color: #4ADE80; border: 1px solid rgba(74,222,128,.3); padding: 2px 8px; border-radius: 5px; letter-spacing: .04em; }
.tp-mock-dr-meta { font-size: 12px; color: #94A3B8; margin-bottom: 10px; }
.tp-mock-dr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-mock-dr-chip { font-size: 11px; font-weight: normal; color: #4ADE80; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.2); padding: 3px 10px; border-radius: 20px; }
.tp-mock-dr-dlbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #1E293B; }
.tp-mock-dr-dlbtn { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: normal; padding: 7px 14px; border-radius: 8px; cursor: default; border: none; }
.tp-mock-dr-dlbtn.green { background: #00FF88; color: #0A0F1C; }
.tp-mock-dr-blocks { display: flex; flex-direction: column; gap: 0; padding: 12px 16px; }
.tp-mock-dr-block { background: #0D1220; border: 1px solid #1E293B; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.tp-mock-dr-block:last-child { margin-bottom: 0; }
.tp-mock-dr-block-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #1E293B; flex-wrap: wrap; }
.tp-mock-dr-block-title { font-size: 13px; font-weight: normal; color: #F1F5F9; flex: 1; }
.tp-mock-dr-copy { font-size: 11px; color: #475569; margin-left: auto; cursor: default; }
.tp-mock-dr-badge { font-size: 10px; font-weight: normal; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.tp-mock-dr-badge.snippet { background: rgba(74,222,128,.12); color: #4ADE80; }
.tp-mock-dr-badge.voice { background: rgba(167,139,250,.12); color: #A78BFA; }
.tp-mock-dr-badge.list { background: rgba(74,222,128,.12); color: #4ADE80; }
.tp-mock-dr-badge.howto { background: rgba(74,222,128,.12); color: #4ADE80; }
.tp-mock-dr-badge.table { background: rgba(59,130,246,.12); color: #60A5FA; }
.tp-mock-dr-badge.paa { background: rgba(251,191,36,.12); color: #FBBF24; }
.tp-mock-dr-block-body { padding: 14px; }
.tp-mock-dr-quote { border-left: 3px solid #4ADE80; padding-left: 12px; font-size: 13px; color: #CBD5E1; line-height: 1.6; }
.tp-mock-dr-qa-box { background: rgba(74,222,128,.06); border-radius: 8px; padding: 12px 14px; }
.tp-mock-dr-qa-label { font-size: 9px; font-weight: normal; color: #4ADE80; letter-spacing: .1em; margin-bottom: 6px; }
.tp-mock-dr-qa-text { font-size: 13px; font-weight: normal; color: #F1F5F9; line-height: 1.55; }
.tp-mock-dr-list-item { font-size: 13px; color: #CBD5E1; padding: 8px 0; border-bottom: 1px solid #1E293B; }
.tp-mock-dr-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.tp-mock-dr-step { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #CBD5E1; padding: 8px 0; border-bottom: 1px solid #1E293B; line-height: 1.45; }
.tp-mock-dr-step:last-child { border-bottom: none; padding-bottom: 0; }
.tp-mock-dr-step-num { width: 22px; height: 22px; background: #14532D; color: #4ADE80; border-radius: 6px; font-size: 12px; font-weight: normal; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-mock-dr-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tp-mock-dr-table thead tr { border-bottom: 1px solid #1E293B; }
.tp-mock-dr-table th { padding: 10px 14px; font-size: 10px; font-weight: normal; color: #475569; letter-spacing: .07em; text-align: left; }
.tp-mock-dr-table td { padding: 10px 14px; color: #94A3B8; border-bottom: 1px solid #1E293B; vertical-align: middle; }
.tp-mock-dr-table tr:last-child td { border-bottom: none; }
.tp-mock-dr-td-green { color: #4ADE80 !important; font-weight: normal; }

/* Schema Checker Mockup */
.tp-mock-sc { max-width: 860px; margin: 28px auto 0; }
.tp-mock-sc-banner { display: flex; gap: 24px; padding: 20px 24px; border-bottom: 1px solid #1E293B; align-items: flex-start; flex-wrap: wrap; }
.tp-mock-sc-left { flex-shrink: 0; }
.tp-mock-sc-score { font-size: 52px; font-weight: normal; color: #4ADE80; line-height: 1; }
.tp-mock-sc-score span { font-size: 18px; color: #64748B; font-weight: normal; }
.tp-mock-sc-grade { background: #14532D; color: #4ADE80; font-size: 12px; font-weight: normal; padding: 4px 10px; border-radius: 6px; display: inline-block; margin-top: 8px; }
.tp-mock-sc-right { flex: 1; min-width: 200px; }
.tp-mock-sc-url { font-size: 12px; color: #475569; margin-bottom: 10px; filter: blur(3.5px); user-select: none; }
.tp-mock-sc-counters { display: flex; gap: 20px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-mock-sc-counter { display: flex; flex-direction: column; align-items: center; font-size: 9px; font-weight: normal; letter-spacing: .06em; gap: 2px; }
.tp-mock-sc-counter span { font-size: 20px; font-weight: normal; line-height: 1; }
.tp-mock-sc-counter.good span { color: #4ADE80; }
.tp-mock-sc-counter.warn span { color: #FBBF24; }
.tp-mock-sc-counter.danger span { color: #F87171; }
.tp-mock-sc-counter.blue span { color: #60A5FA; }
.tp-mock-sc-counter { color: #94A3B8; }
.tp-mock-sc-ok { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4ADE80; }
.tp-mock-sc-section { padding: 14px 20px; border-bottom: 1px solid #1E293B; }
.tp-mock-sc-section-label { font-size: 10px; font-weight: normal; color: #475569; letter-spacing: .1em; margin-bottom: 10px; padding: 0; }
.tp-mock-sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-mock-sc-chip { font-size: 12px; font-weight: normal; padding: 5px 12px; border-radius: 20px; }
.tp-mock-sc-chip.check { color: #4ADE80; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.25); }
.tp-mock-sc-chip.purple { color: #A78BFA; background: rgba(167,139,250,.1); border: 1px solid rgba(167,139,250,.25); }
.tp-mock-sc-growth { margin: 14px 16px; border: 1px solid rgba(167,139,250,.25); border-radius: 10px; padding: 14px 16px; background: rgba(167,139,250,.05); }
.tp-mock-sc-growth-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tp-mock-sc-growth-icon { width: 28px; height: 28px; background: rgba(167,139,250,.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-mock-sc-growth-title { font-size: 11px; font-weight: normal; color: #A78BFA; letter-spacing: .08em; }
.tp-mock-sc-growth-sub { font-size: 12px; color: #64748B; margin-bottom: 8px; line-height: 1.45; }
.tp-mock-sc-growth-item { font-size: 12px; color: #CBD5E1; line-height: 1.5; }
.tp-mock-sc-video { margin: 0 16px 14px; border: 1px solid rgba(96,165,250,.2); border-radius: 10px; padding: 14px 16px; background: rgba(96,165,250,.04); }
.tp-mock-sc-video-title { font-size: 13px; font-weight: normal; color: #60A5FA; margin-bottom: 10px; }
.tp-mock-sc-video-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #94A3B8; line-height: 1.45; margin-bottom: 8px; }
.tp-mock-sc-video-item:last-child { margin-bottom: 0; }
.tp-mock-sc-vtag { font-size: 11px; font-weight: normal; color: #60A5FA; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.2); padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.tp-mock-sc-rows { display: flex; flex-direction: column; gap: 0; padding: 4px 16px 16px; }
.tp-mock-sc-row { display: flex; align-items: center; gap: 14px; background: #0D1220; border: 1px solid #1E293B; border-radius: 10px; padding: 12px 16px; margin-bottom: 6px; }
.tp-mock-sc-row:last-child { margin-bottom: 0; }
.tp-mock-sc-score-box { width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: normal; flex-shrink: 0; }
.tp-mock-sc-score-box.good { background: #14532D; color: #4ADE80; }
.tp-mock-sc-score-box.warn { background: #78350F; color: #FBBF24; }
.tp-mock-sc-score-box.danger { background: #7F1D1D; color: #F87171; }
.tp-mock-sc-row-inner { flex: 1; }
.tp-mock-sc-row-name { font-size: 14px; font-weight: normal; color: #F1F5F9; }
.tp-mock-sc-row-status { font-size: 12px; font-weight: normal; margin-top: 2px; }
.tp-mock-sc-row-status.good { color: #4ADE80; }
.tp-mock-sc-row-status.warn { color: #FBBF24; }
.tp-mock-sc-row-status.danger { color: #F87171; }

/* EEAT Auditor mockup */
.tp-mock-eeat-wrap { background: #0A0F1E; border-radius: 14px; overflow: hidden; }
.tp-mock-eeat-hero { display: flex; align-items: flex-start; gap: 18px; padding: 20px 20px 14px; }
.tp-mock-eeat-ring-wrap { flex-shrink: 0; position: relative; width: 80px; height: 80px; }
.tp-mock-eeat-ring { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#FBBF24 0% 47%, #1E293B 47% 100%); display: flex; align-items: center; justify-content: center; }
.tp-mock-eeat-ring-inner { width: 56px; height: 56px; border-radius: 50%; background: #0A0F1E; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-mock-eeat-score-num { font-size: 18px; font-weight: normal; color: #FBBF24; line-height: 1; }
.tp-mock-eeat-score-denom { font-size: 10px; color: #64748B; line-height: 1; }
.tp-mock-eeat-grade { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: normal; color: #EF4444; }
.tp-mock-eeat-meta { flex: 1; }
.tp-mock-eeat-verdict { font-size: 18px; font-weight: normal; color: #F1F5F9; margin-bottom: 4px; }
.tp-mock-eeat-url { font-size: 11px; color: #64748B; margin-bottom: 10px; }
.tp-mock-eeat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-mock-eeat-chip { font-size: 11px; font-weight: normal; padding: 3px 10px; border-radius: 20px; display: flex; align-items: center; gap: 5px; }
.tp-mock-eeat-chip.words { background: rgba(99,102,241,.15); color: #818CF8; border: 1px solid rgba(99,102,241,.25); }
.tp-mock-eeat-chip.type { background: rgba(168,85,247,.15); color: #C084FC; border: 1px solid rgba(168,85,247,.25); }
.tp-mock-eeat-chip.score { background: rgba(251,191,36,.12); color: #FBBF24; border: 1px solid rgba(251,191,36,.25); }
.tp-mock-eeat-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tp-mock-eeat-warn { margin: 0 16px 14px; border: 1px solid rgba(251,191,36,.3); border-radius: 10px; padding: 12px 16px; background: rgba(251,191,36,.06); font-size: 12px; color: #FCD34D; line-height: 1.55; }
.tp-mock-eeat-warn-title { font-weight: normal; margin-bottom: 3px; color: #FBBF24; }
.tp-mock-eeat-counters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 16px 14px; }
.tp-mock-eeat-counter { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px 10px; text-align: center; }
.tp-mock-eeat-counter-num { font-size: 26px; font-weight: normal; line-height: 1; }
.tp-mock-eeat-counter-num.green { color: #4ADE80; }
.tp-mock-eeat-counter-num.yellow { color: #FBBF24; }
.tp-mock-eeat-counter-num.red { color: #F87171; }
.tp-mock-eeat-counter-label { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.tp-mock-eeat-recs { margin: 0 16px 14px; background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px 16px; }
.tp-mock-eeat-recs-title { font-size: 14px; font-weight: normal; color: #F1F5F9; margin-bottom: 3px; }
.tp-mock-eeat-recs-sub { font-size: 11px; color: #64748B; margin-bottom: 12px; }
.tp-mock-eeat-recs-badge { float: right; font-size: 11px; font-weight: normal; background: rgba(16,185,129,.15); color: #34D399; border: 1px solid rgba(16,185,129,.25); border-radius: 20px; padding: 2px 10px; margin-top: -2px; }
.tp-mock-eeat-rec-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.tp-mock-eeat-rec-item:last-child { margin-bottom: 0; }
.tp-mock-eeat-rec-num { width: 22px; height: 22px; border-radius: 50%; background: #10B981; color: #fff; font-size: 11px; font-weight: normal; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tp-mock-eeat-rec-text { font-size: 12px; color: #CBD5E1; line-height: 1.5; }
.tp-mock-eeat-dims { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 18px; }
.tp-mock-eeat-dim { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px 16px; }
.tp-mock-eeat-dim-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tp-mock-eeat-dim-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tp-mock-eeat-dim-dot.purple { background: #A855F7; }
.tp-mock-eeat-dim-dot.blue { background: #60A5FA; }
.tp-mock-eeat-dim-dot.yellow { background: #FBBF24; }
.tp-mock-eeat-dim-dot.green { background: #4ADE80; }
.tp-mock-eeat-dim-name { font-size: 14px; font-weight: normal; color: #F1F5F9; flex: 1; }
.tp-mock-eeat-dim-weight { font-size: 12px; color: #64748B; }
.tp-mock-eeat-dim-score { font-size: 12px; font-weight: normal; padding: 2px 8px; border-radius: 6px; }
.tp-mock-eeat-dim-score.red { background: #7F1D1D; color: #F87171; }
.tp-mock-eeat-dim-score.yellow { background: #78350F; color: #FBBF24; }
.tp-mock-eeat-dim-score.green { background: #14532D; color: #4ADE80; }
.tp-mock-eeat-dim-bar-bg { height: 6px; background: #1E293B; border-radius: 3px; overflow: hidden; }
.tp-mock-eeat-dim-bar-fill { height: 100%; border-radius: 3px; }
.tp-mock-eeat-dim-bar-fill.red { background: #EF4444; }
.tp-mock-eeat-dim-bar-fill.yellow { background: #FBBF24; }
.tp-mock-eeat-dim-bar-fill.green { background: #22C55E; }

/* LLMs Validator mockup */
.tp-mock-lv-wrap { background: #0A0F1E; border-radius: 14px; overflow: hidden; }
.tp-mock-lv-hero { display: flex; align-items: center; gap: 16px; padding: 18px 20px 14px; background: #0D1220; border-bottom: 1px solid #1E293B; }
.tp-mock-lv-ring { width: 72px; height: 72px; border-radius: 50%; background: conic-gradient(#818CF8 0% 63%, #1E293B 63% 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-mock-lv-ring-inner { width: 50px; height: 50px; border-radius: 50%; background: #0D1220; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-mock-lv-score-num { font-size: 18px; font-weight: normal; color: #818CF8; line-height: 1; }
.tp-mock-lv-score-denom { font-size: 10px; color: #64748B; line-height: 1; }
.tp-mock-lv-meta { flex: 1; }
.tp-mock-lv-domain { font-size: 16px; font-weight: normal; color: #F1F5F9; margin-bottom: 8px; }
.tp-mock-lv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tp-mock-lv-chip { font-size: 11px; font-weight: normal; padding: 3px 12px; border-radius: 20px; }
.tp-mock-lv-chip.grade { background: #D97706; color: #fff; }
.tp-mock-lv-chip.found { background: rgba(16,185,129,.15); color: #34D399; border: 1px solid rgba(16,185,129,.3); }
.tp-mock-lv-chip.missing { background: rgba(239,68,68,.12); color: #F87171; border: 1px solid rgba(239,68,68,.25); }
.tp-mock-lv-url { font-size: 11px; color: #60A5FA; }
.tp-mock-lv-filesize { font-size: 11px; color: #64748B; margin-left: 6px; }
.tp-mock-lv-body { display: grid; grid-template-columns: 1fr 260px; gap: 0; }
@media (max-width: 640px) { .tp-mock-lv-body { grid-template-columns: 1fr; } }
.tp-mock-lv-checks { padding: 14px 16px; border-right: 1px solid #1E293B; }
.tp-mock-lv-checks-title { font-size: 12px; font-weight: normal; color: #94A3B8; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .6px; }
.tp-mock-lv-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #1E293B; }
.tp-mock-lv-check-item:last-child { border-bottom: 0; }
.tp-mock-lv-check-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.tp-mock-lv-check-icon.pass { background: #14532D; color: #4ADE80; }
.tp-mock-lv-check-icon.fail { background: #7F1D1D; color: #F87171; }
.tp-mock-lv-check-icon.warn { background: #78350F; color: #FBBF24; }
.tp-mock-lv-check-info { flex: 1; }
.tp-mock-lv-check-name { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-lv-check-desc { font-size: 11px; color: #64748B; margin-top: 2px; line-height: 1.4; }
.tp-mock-lv-check-pts { font-size: 12px; font-weight: normal; flex-shrink: 0; margin-top: 2px; }
.tp-mock-lv-check-pts.pass { color: #4ADE80; }
.tp-mock-lv-check-pts.fail { color: #F87171; }
.tp-mock-lv-check-pts.warn { color: #FBBF24; }
.tp-mock-lv-sidebar { padding: 14px 16px; }
.tp-mock-lv-sb-title { font-size: 13px; font-weight: normal; color: #F1F5F9; margin-bottom: 12px; }
.tp-mock-lv-sb-bar-bg { height: 6px; background: #1E293B; border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.tp-mock-lv-sb-bar-fill { height: 100%; background: #818CF8; border-radius: 3px; width: 63%; }
.tp-mock-lv-sb-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.tp-mock-lv-sb-key { color: #94A3B8; }
.tp-mock-lv-sb-val { font-weight: normal; color: #F1F5F9; }
.tp-mock-lv-sb-val.green { color: #4ADE80; }
.tp-mock-lv-sb-divider { border: 0; border-top: 1px solid #1E293B; margin: 12px 0; }
.tp-mock-lv-rec-title { font-size: 13px; font-weight: normal; color: #F1F5F9; margin-bottom: 10px; }
.tp-mock-lv-rec-item { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: #94A3B8; line-height: 1.4; margin-bottom: 8px; }
.tp-mock-lv-rec-item:last-child { margin-bottom: 0; }
.tp-mock-lv-rec-dot { width: 6px; height: 6px; border-radius: 50%; background: #818CF8; flex-shrink: 0; margin-top: 4px; }

/* Catalog Optimizer mockup */
.tp-mock-cat-wrap { background: #0A0F1E; border-radius: 14px; overflow: hidden; }
.tp-mock-cat-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px 24px; background: #0D1220; border-bottom: 1px solid #1E293B; }
@media (max-width: 600px) { .tp-mock-cat-hero { grid-template-columns: 1fr; } }
.tp-mock-cat-score-block { text-align: center; }
.tp-mock-cat-score-num { font-size: 42px; font-weight: normal; color: #4ADE80; line-height: 1; }
.tp-mock-cat-score-denom { font-size: 13px; color: #64748B; }
.tp-mock-cat-grade { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: normal; color: #4ADE80; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.3); border-radius: 6px; padding: 3px 10px; }
.tp-mock-cat-mid { }
.tp-mock-cat-url { font-size: 12px; color: #64748B; margin-bottom: 12px; }
.tp-mock-cat-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.tp-mock-cat-stat { text-align: center; }
.tp-mock-cat-stat-num { font-size: 22px; font-weight: normal; line-height: 1; }
.tp-mock-cat-stat-num.green { color: #4ADE80; }
.tp-mock-cat-stat-num.yellow { color: #FBBF24; }
.tp-mock-cat-stat-num.red { color: #F87171; }
.tp-mock-cat-stat-label { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.tp-mock-cat-dist { min-width: 200px; }
.tp-mock-cat-dist-title { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; }
.tp-mock-cat-dist-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tp-mock-cat-dist-label { font-size: 11px; color: #64748B; width: 40px; flex-shrink: 0; }
.tp-mock-cat-dist-bar-bg { flex: 1; height: 6px; background: #1E293B; border-radius: 3px; overflow: hidden; }
.tp-mock-cat-dist-bar-fill { height: 100%; border-radius: 3px; }
.tp-mock-cat-dist-bar-fill.green { background: #22C55E; }
.tp-mock-cat-dist-bar-fill.blue { background: #60A5FA; }
.tp-mock-cat-dist-bar-fill.empty { background: transparent; }
.tp-mock-cat-dist-count { font-size: 11px; color: #94A3B8; width: 20px; text-align: right; }
.tp-mock-cat-dist-btn { margin-top: 12px; width: 100%; background: rgba(74,222,128,.12); color: #4ADE80; border: 1px solid rgba(74,222,128,.3); border-radius: 8px; padding: 8px; font-size: 11px; font-weight: normal; text-align: center; cursor: default; }
.tp-mock-cat-issues { margin: 16px 20px; background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 16px 18px; }
.tp-mock-cat-issues-title { font-size: 11px; font-weight: normal; color: #EF4444; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
.tp-mock-cat-issue-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tp-mock-cat-issue-row:last-child { margin-bottom: 0; }
.tp-mock-cat-issue-count { width: 30px; height: 30px; border-radius: 50%; background: rgba(251,191,36,.15); color: #FBBF24; font-size: 12px; font-weight: normal; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(251,191,36,.3); }
.tp-mock-cat-issue-text { font-size: 12px; color: #CBD5E1; line-height: 1.4; }
.tp-mock-cat-cats { margin: 0 20px 16px; background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 16px 18px; }
.tp-mock-cat-cats-title { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px; }
.tp-mock-cat-cat-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tp-mock-cat-cat-row:last-child { margin-bottom: 0; }
.tp-mock-cat-cat-name { font-size: 13px; font-weight: normal; color: #F1F5F9; width: 180px; flex-shrink: 0; }
.tp-mock-cat-cat-bar-bg { flex: 1; height: 8px; background: #1E293B; border-radius: 4px; overflow: hidden; }
.tp-mock-cat-cat-bar-fill { height: 100%; border-radius: 4px; background: #22C55E; }
.tp-mock-cat-cat-score { font-size: 13px; font-weight: normal; color: #4ADE80; width: 28px; text-align: right; flex-shrink: 0; }
.tp-mock-cat-cat-items { font-size: 11px; color: #64748B; width: 50px; text-align: right; flex-shrink: 0; }
.tp-mock-cat-products { display: flex; flex-direction: column; gap: 0; padding: 0 20px 18px; }
.tp-mock-cat-prod-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #1E293B; }
.tp-mock-cat-prod-row:last-child { border-bottom: 0; }
.tp-mock-cat-prod-img { width: 44px; height: 44px; border-radius: 8px; background: #1E293B; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.tp-mock-cat-prod-info { flex: 1; min-width: 0; }
.tp-mock-cat-prod-title { font-size: 13px; font-weight: normal; color: #F1F5F9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.tp-mock-cat-prod-meta { font-size: 11px; color: #64748B; }
.tp-mock-cat-prod-score { flex-shrink: 0; text-align: center; }
.tp-mock-cat-prod-score-num { font-size: 18px; font-weight: normal; color: #4ADE80; display: block; line-height: 1; }
.tp-mock-cat-prod-badge { font-size: 10px; font-weight: normal; background: rgba(74,222,128,.12); color: #4ADE80; border-radius: 4px; padding: 2px 6px; margin-top: 3px; display: inline-block; }

/* Pricing Audit mockup */
.tp-mock-pa-wrap { background: #0A0F1E; border-radius: 14px; overflow: hidden; }
.tp-mock-pa-hero { display: flex; align-items: center; gap: 20px; padding: 20px 22px; background: #0D1220; border-bottom: 1px solid #1E293B; }
.tp-mock-pa-ring { width: 76px; height: 76px; border-radius: 50%; background: conic-gradient(#60A5FA 0% 80%, #1E293B 80% 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-mock-pa-ring-inner { width: 54px; height: 54px; border-radius: 50%; background: #0D1220; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-mock-pa-score-num { font-size: 20px; font-weight: normal; color: #60A5FA; line-height: 1; }
.tp-mock-pa-score-denom { font-size: 10px; color: #64748B; line-height: 1; }
.tp-mock-pa-meta { flex: 1; }
.tp-mock-pa-domain { font-size: 16px; font-weight: normal; color: #F1F5F9; margin-bottom: 6px; }
.tp-mock-pa-stats { font-size: 13px; color: #94A3B8; margin-bottom: 8px; }
.tp-mock-pa-stats strong { color: #F1F5F9; font-weight: normal; }
.tp-mock-pa-grade { display: inline-block; font-size: 12px; font-weight: normal; color: #4ADE80; border: 1px solid rgba(74,222,128,.4); border-radius: 20px; padding: 3px 14px; }
.tp-mock-pa-dl-btn { display: inline-flex; align-items: center; gap: 6px; background: #10B981; color: #fff; font-size: 12px; font-weight: normal; border-radius: 8px; padding: 8px 16px; cursor: default; margin: 14px 22px 0; }
.tp-mock-pa-dims-title { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .8px; padding: 14px 22px 10px; }
.tp-mock-pa-dims { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; padding: 0 22px 16px; }
@media (max-width: 640px) { .tp-mock-pa-dims { grid-template-columns: 1fr 1fr; } }
.tp-mock-pa-dim { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; }
.tp-mock-pa-dim-label { font-size: 11px; color: #64748B; margin-bottom: 8px; }
.tp-mock-pa-dim-bar-bg { height: 5px; background: #1E293B; border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.tp-mock-pa-dim-bar-fill { height: 100%; border-radius: 3px; }
.tp-mock-pa-dim-bar-fill.green { background: #22C55E; }
.tp-mock-pa-dim-bar-fill.yellow { background: #FBBF24; }
.tp-mock-pa-dim-bar-fill.blue { background: #60A5FA; }
.tp-mock-pa-dim-score { font-size: 20px; font-weight: normal; color: #F1F5F9; line-height: 1; }
.tp-mock-pa-dim-score span { font-size: 13px; font-weight: 400; color: #64748B; }
.tp-mock-pa-dim-desc { font-size: 11px; color: #64748B; margin-top: 4px; line-height: 1.4; }
.tp-mock-pa-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 22px 20px; }
@media (max-width: 600px) { .tp-mock-pa-two-col { grid-template-columns: 1fr; } }
.tp-mock-pa-issues-card { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; }
.tp-mock-pa-wins-card { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; }
.tp-mock-pa-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tp-mock-pa-card-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.tp-mock-pa-card-icon.red { background: rgba(239,68,68,.15); color: #F87171; }
.tp-mock-pa-card-icon.green { background: rgba(74,222,128,.12); color: #4ADE80; }
.tp-mock-pa-card-title { font-size: 14px; font-weight: normal; color: #F1F5F9; }
.tp-mock-pa-card-sub { font-size: 11px; color: #64748B; }
.tp-mock-pa-issue-item { border-left: 3px solid #EF4444; border-radius: 4px; background: rgba(239,68,68,.04); padding: 10px 12px; margin-bottom: 8px; }
.tp-mock-pa-issue-item:last-child { margin-bottom: 0; }
.tp-mock-pa-issue-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tp-mock-pa-issue-name { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-pa-issue-severity { font-size: 10px; font-weight: normal; background: #EF4444; color: #fff; border-radius: 20px; padding: 2px 8px; }
.tp-mock-pa-issue-desc { font-size: 12px; color: #94A3B8; margin-bottom: 6px; line-height: 1.4; }
.tp-mock-pa-issue-fix { font-size: 11px; color: #64748B; font-style: italic; line-height: 1.4; }
.tp-mock-pa-win-item { background: rgba(74,222,128,.05); border: 1px solid rgba(74,222,128,.15); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.tp-mock-pa-win-item:last-child { margin-bottom: 0; }
.tp-mock-pa-win-name { font-size: 12px; font-weight: normal; color: #4ADE80; margin-bottom: 4px; }
.tp-mock-pa-win-desc { font-size: 12px; color: #94A3B8; line-height: 1.4; }

/* Marketing Intelligence mockup */
.tp-mock-mi-wrap { background: #0A0F1E; border-radius: 14px; overflow: hidden; }
.tp-mock-mi-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-bottom: 1px solid #1E293B; }
@media (max-width: 560px) { .tp-mock-mi-stats { grid-template-columns: repeat(3, 1fr); } }
.tp-mock-mi-stat { padding: 18px 16px; border-right: 1px solid #1E293B; }
.tp-mock-mi-stat:last-child { border-right: 0; }
.tp-mock-mi-stat-num { font-size: 26px; font-weight: normal; color: #F1F5F9; line-height: 1; margin-bottom: 4px; }
.tp-mock-mi-stat-label { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .6px; }
.tp-mock-mi-channels { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #1E293B; }
.tp-mock-mi-ch-label { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .6px; align-self: center; margin-right: 4px; }
.tp-mock-mi-ch-chip { font-size: 11px; font-weight: normal; padding: 4px 12px; border-radius: 20px; border: 1px solid #1E293B; color: #94A3B8; cursor: default; }
.tp-mock-mi-ch-chip.active { background: #F1F5F9; color: #0A0F1E; border-color: #F1F5F9; }
.tp-mock-mi-filters { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #1E293B; }
.tp-mock-mi-filter-label { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .6px; }
.tp-mock-mi-filter-chip { font-size: 11px; font-weight: normal; padding: 4px 14px; border-radius: 20px; border: 1px solid #1E293B; color: #94A3B8; cursor: default; }
.tp-mock-mi-filter-chip.active { background: #F1F5F9; color: #0A0F1E; border-color: #F1F5F9; }
.tp-mock-mi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 18px; }
@media (max-width: 560px) { .tp-mock-mi-grid { grid-template-columns: 1fr; } }
.tp-mock-mi-card { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; }
.tp-mock-mi-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.tp-mock-mi-card-title { font-size: 13px; font-weight: normal; color: #F1F5F9; line-height: 1.35; flex: 1; }
.tp-mock-mi-cat-chip { font-size: 10px; font-weight: normal; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.tp-mock-mi-cat-chip.content { background: rgba(74,222,128,.12); color: #4ADE80; border: 1px solid rgba(74,222,128,.25); }
.tp-mock-mi-cat-chip.social { background: rgba(168,85,247,.12); color: #C084FC; border: 1px solid rgba(168,85,247,.25); }
.tp-mock-mi-cat-chip.email { background: rgba(251,191,36,.12); color: #FBBF24; border: 1px solid rgba(251,191,36,.25); }
.tp-mock-mi-cat-chip.influencer { background: rgba(96,165,250,.12); color: #60A5FA; border: 1px solid rgba(96,165,250,.25); }
.tp-mock-mi-card-desc { font-size: 12px; color: #94A3B8; line-height: 1.45; margin-bottom: 10px; }
.tp-mock-mi-badges { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tp-mock-mi-badge { font-size: 10px; font-weight: normal; padding: 3px 10px; border-radius: 20px; border: 1px solid; }
.tp-mock-mi-badge.effort-med { color: #FBBF24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.tp-mock-mi-badge.effort-low { color: #4ADE80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
.tp-mock-mi-badge.impact { color: #4ADE80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
.tp-mock-mi-badge.free { color: #94A3B8; border-color: #334155; background: rgba(148,163,184,.06); }
.tp-mock-mi-steps { display: flex; flex-direction: column; gap: 5px; }
.tp-mock-mi-step { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: #64748B; line-height: 1.4; }
.tp-mock-mi-step-q { color: #60A5FA; font-weight: normal; flex-shrink: 0; }

/* Content Creator mockup */
.tp-mock-cc2-wrap { background: #0A0F1E; border-radius: 14px; overflow: hidden; }
.tp-mock-cc2-brand { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #0D1220; border-bottom: 1px solid #1E293B; }
.tp-mock-cc2-brand-icon { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg,#6366F1,#3B82F6); flex-shrink: 0; }
.tp-mock-cc2-brand-info { flex: 1; }
.tp-mock-cc2-brand-name { font-size: 15px; font-weight: normal; color: #F1F5F9; margin-bottom: 3px; }
.tp-mock-cc2-brand-desc { font-size: 11px; color: #64748B; margin-bottom: 6px; line-height: 1.4; }
.tp-mock-cc2-brand-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tp-mock-cc2-tag { font-size: 10px; color: #94A3B8; background: #1E293B; border-radius: 20px; padding: 2px 8px; }
.tp-mock-cc2-platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px; border-bottom: 1px solid #1E293B; }
.tp-mock-cc2-platform { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 12px 8px; text-align: center; cursor: default; }
.tp-mock-cc2-platform.active { border-color: #60A5FA; background: rgba(96,165,250,.08); }
.tp-mock-cc2-plat-icon { font-size: 22px; margin-bottom: 4px; }
.tp-mock-cc2-plat-name { font-size: 11px; font-weight: normal; color: #94A3B8; }
.tp-mock-cc2-platform.active .tp-mock-cc2-plat-name { color: #60A5FA; }
.tp-mock-cc2-posts { padding: 12px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.tp-mock-cc2-post { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; }
.tp-mock-cc2-post-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.tp-mock-cc2-post-title { font-size: 13px; font-weight: normal; color: #F1F5F9; line-height: 1.3; flex: 1; }
.tp-mock-cc2-post-type { font-size: 10px; font-weight: normal; color: #94A3B8; background: #1E293B; border-radius: 6px; padding: 3px 8px; white-space: nowrap; flex-shrink: 0; }
.tp-mock-cc2-post-brief { font-size: 12px; color: #64748B; margin-bottom: 10px; line-height: 1.4; }
.tp-mock-cc2-caption-box { background: #0D1220; border: 1px solid #1E293B; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; }
.tp-mock-cc2-caption-label { font-size: 10px; font-weight: normal; color: #475569; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; }
.tp-mock-cc2-caption-text { font-size: 12px; color: #CBD5E1; line-height: 1.6; }
.tp-mock-cc2-caption-text p { margin: 0 0 6px; }
.tp-mock-cc2-caption-text p:last-child { margin-bottom: 0; }
.tp-mock-cc2-caption-bullet { color: #4ADE80; }
.tp-mock-cc2-copy-btn { display: inline-block; font-size: 11px; font-weight: normal; color: #94A3B8; background: #1E293B; border-radius: 6px; padding: 4px 12px; cursor: default; }
.tp-mock-cc2-pro-tip { display: flex; align-items: flex-start; gap: 8px; background: rgba(251,146,60,.06); border: 1px solid rgba(251,146,60,.25); border-radius: 8px; padding: 10px 12px; margin-top: 8px; font-size: 11px; color: #94A3B8; line-height: 1.45; }
.tp-mock-cc2-pro-tip strong { color: #FB923C; }

/* Content Strategy mockup */
.tp-mock-cs-wrap { background: #0A0F1E; border-radius: 14px; overflow: hidden; }
.tp-mock-cs-brand { padding: 16px 18px; background: #0D1220; border-bottom: 1px solid #1E293B; }
.tp-mock-cs-brand-title { font-size: 16px; font-weight: normal; color: #F1F5F9; margin-bottom: 4px; }
.tp-mock-cs-brand-url { font-size: 11px; color: #64748B; margin-bottom: 8px; }
.tp-mock-cs-brand-tags { display: flex; gap: 6px; }
.tp-mock-cs-brand-tag { font-size: 11px; color: #94A3B8; background: #1E293B; border: 1px solid #334155; border-radius: 20px; padding: 3px 10px; }
.tp-mock-cs-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 18px; border-bottom: 1px solid #1E293B; }
.tp-mock-cs-tab { font-size: 12px; font-weight: normal; color: #64748B; background: #111827; border: 1px solid #1E293B; border-radius: 20px; padding: 8px 10px; text-align: center; cursor: pointer; }
.tp-mock-cs-tab.active { background: #7C3AED; color: #fff; border-color: #7C3AED; }
.tp-mock-cs-panel { padding: 16px 18px 20px; display: none; }
.tp-mock-cs-panel.active { display: block; }
.tp-mock-cs-section-title { font-size: 11px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; }
.tp-mock-cs-audience-box { background: #1E293B; border-radius: 8px; padding: 12px 16px; font-size: 13px; color: #CBD5E1; margin-bottom: 16px; }
.tp-mock-cs-channel { background: #111827; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; margin-bottom: 8px; }
.tp-mock-cs-channel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tp-mock-cs-channel-name { font-size: 14px; font-weight: normal; color: #F1F5F9; }
.tp-mock-cs-priority { font-size: 10px; font-weight: normal; background: rgba(74,222,128,.15); color: #4ADE80; border: 1px solid rgba(74,222,128,.3); border-radius: 20px; padding: 3px 10px; }
.tp-mock-cs-channel-steps { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.tp-mock-cs-channel-step { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: #94A3B8; line-height: 1.4; }
.tp-mock-cs-step-q { color: #7C3AED; font-weight: normal; flex-shrink: 0; }
.tp-mock-cs-kpi-label { font-size: 10px; font-weight: normal; color: #475569; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.tp-mock-cs-kpi-text { font-size: 11px; color: #64748B; }
.tp-mock-cs-seo-sub { font-size: 10px; font-weight: normal; color: #64748B; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; margin-top: 12px; }
.tp-mock-cs-seo-items { display: flex; flex-direction: column; gap: 5px; }
.tp-mock-cs-seo-item { background: #111827; border: 1px solid #1E293B; border-radius: 7px; padding: 10px 14px; font-size: 12px; color: #CBD5E1; }
.tp-mock-cs-phase { border-left: 3px solid #7C3AED; border-radius: 4px; background: #111827; padding: 14px; margin-bottom: 10px; }
.tp-mock-cs-phase-month { font-size: 11px; font-weight: normal; color: #7C3AED; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }
.tp-mock-cs-phase-name { font-size: 14px; font-weight: normal; color: #F1F5F9; margin-bottom: 10px; }
.tp-mock-cs-phase-tasks { display: flex; flex-direction: column; gap: 5px; }
.tp-mock-cs-phase-task { font-size: 12px; color: #94A3B8; padding-left: 10px; position: relative; }
.tp-mock-cs-phase-task::before { content: '—'; position: absolute; left: 0; color: #475569; }

/* Brand Toolkit mockup */
.tp-mock-bt-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-bt-banner { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 60%, #1e1b4b 100%); flex-wrap: wrap; gap: 12px; }
.tp-mock-bt-banner-left { display: flex; align-items: center; gap: 14px; }
.tp-mock-bt-banner-icon { width: 38px; height: 38px; background: rgba(168,85,247,0.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.tp-mock-bt-banner-title { font-size: 15px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-bt-banner-sub { font-size: 11px; color: #c4b5fd; }
.tp-mock-bt-banner-btns { display: flex; gap: 8px; }
.tp-mock-bt-dl-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 7px; font-size: 12px; font-weight: normal; cursor: pointer; }
.tp-mock-bt-dl-btn.pdf { background: #22c55e; color: #fff; }
.tp-mock-bt-dl-btn.ppt { background: transparent; color: #22c55e; border: 1.5px solid #22c55e; }
/* Score hero row */
.tp-mock-bt-hero { display: flex; align-items: center; gap: 22px; padding: 20px 22px 16px; background: #0f172a; flex-wrap: wrap; }
.tp-mock-bt-ring-wrap { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.tp-mock-bt-ring-wrap svg { display: block; }
.tp-mock-bt-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-mock-bt-ring-num { font-size: 22px; font-weight: normal; color: #F1F5F9; line-height: 1; }
.tp-mock-bt-ring-denom { font-size: 10px; color: #64748b; }
.tp-mock-bt-hero-info { flex: 1; min-width: 160px; }
.tp-mock-bt-brand-name { font-size: 20px; font-weight: normal; color: #F1F5F9; margin-bottom: 6px; }
.tp-mock-bt-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.tp-mock-bt-pill { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: normal; }
.tp-mock-bt-pill.grade { background: #a855f7; color: #fff; }
.tp-mock-bt-pill.cat { background: #1e293b; color: #94a3b8; border: 1px solid #334155; }
.tp-mock-bt-brand-url { font-size: 11px; color: #475569; }
/* Stat boxes */
.tp-mock-bt-stats { display: flex; gap: 8px; padding: 12px 22px; background: #0c1424; flex-wrap: wrap; }
.tp-mock-bt-stat { flex: 1; min-width: 80px; background: #1e293b; border-radius: 8px; padding: 10px 12px; text-align: center; }
.tp-mock-bt-stat-val { font-size: 14px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-bt-stat-lbl { font-size: 9px; font-weight: normal; color: #64748b; letter-spacing: .06em; text-transform: uppercase; }
/* Scorecard grid */
.tp-mock-bt-heading { font-size: 11px; font-weight: normal; color: #475569; letter-spacing: .1em; text-transform: uppercase; padding: 14px 22px 8px; }
.tp-mock-bt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 18px; }
@media (max-width: 640px) { .tp-mock-bt-grid { grid-template-columns: 1fr; } }
.tp-mock-bt-card { background: #0f172a; border: 1px solid #1e293b; border-top: 2px solid transparent; border-radius: 10px; padding: 14px; border-top-color: #a855f7; }
.tp-mock-bt-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tp-mock-bt-card-title { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-bt-card-score { font-size: 16px; font-weight: normal; }
.tp-mock-bt-card-score.high { color: #22c55e; }
.tp-mock-bt-card-score.mid { color: #f59e0b; }
.tp-mock-bt-card-score.low { color: #ef4444; }
.tp-mock-bt-bar-bg { height: 4px; background: #1e293b; border-radius: 4px; margin-bottom: 12px; overflow: hidden; }
.tp-mock-bt-bar-fill { height: 100%; border-radius: 4px; }
.tp-mock-bt-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tp-mock-bt-check { font-size: 11px; color: #cbd5e1; padding-left: 16px; position: relative; }
.tp-mock-bt-check::before { content: '✓'; position: absolute; left: 0; color: #22c55e; font-weight: normal; }
.tp-mock-bt-check.warn::before { content: '⚠'; color: #f59e0b; }
.tp-mock-bt-recs-lbl { font-size: 9px; font-weight: normal; letter-spacing: .08em; color: #475569; text-transform: uppercase; margin-bottom: 6px; }
.tp-mock-bt-rec { font-size: 11px; color: #94a3b8; padding-left: 12px; position: relative; margin-bottom: 4px; }
.tp-mock-bt-rec::before { content: '•'; position: absolute; left: 2px; color: #a855f7; }
/* Brand Toolkit — mode tabs */
.tp-mock-bt-tab-strip { display: flex; gap: 2px; padding: 10px 22px 0; background: #0c1424; }
.tp-mock-bt-tab-btn { padding: 7px 13px; border-radius: 8px 8px 0 0; font-size: 11px; font-weight: normal; cursor: pointer; color: #64748b; background: transparent; border: 1px solid transparent; border-bottom: none; }
.tp-mock-bt-tab-btn.active { background: #0f172a; color: #F1F5F9; border-color: #1e293b; }
.tp-mock-bt-panel { display: none; }
.tp-mock-bt-panel.active { display: block; }
/* Launch New Brand elements */
.tp-mock-bt-brand-hdr { display: flex; align-items: flex-start; gap: 16px; padding: 16px 22px 14px; background: #1e1b4b; }
.tp-mock-bt-logo-sq { width: 56px; height: 56px; background: #22c55e; border-radius: 12px; flex-shrink: 0; }
.tp-mock-bt-brand-hdr-name { font-size: 20px; font-weight: normal; color: #F1F5F9; margin-bottom: 7px; }
.tp-mock-bt-brand-hdr-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.tp-mock-bt-hpill { padding: 3px 11px; border-radius: 20px; font-size: 10px; font-weight: normal; }
.tp-mock-bt-hpill.outline { background: transparent; border: 1px solid #6366f1; color: #a5b4fc; }
.tp-mock-bt-hpill.filled { background: #312e81; color: #c4b5fd; }
.tp-mock-bt-audience { display: inline-block; padding: 5px 14px; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); border-radius: 20px; font-size: 10px; color: #a5b4fc; }
.tp-mock-bt-sec-div { display: flex; align-items: center; gap: 12px; padding: 14px 22px 10px; }
.tp-mock-bt-sec-lbl { font-size: 9px; font-weight: normal; letter-spacing: .1em; color: #64748b; text-transform: uppercase; white-space: nowrap; }
.tp-mock-bt-sec-line { flex: 1; height: 1px; background: #1e293b; }
.tp-mock-bt-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 22px 14px; }
@media (max-width: 580px) { .tp-mock-bt-two-col { grid-template-columns: 1fr; } }
.tp-mock-bt-lcard { background: #0f172a; border: 1px solid #1e293b; border-top: 2px solid #6366f1; border-radius: 10px; padding: 14px; }
.tp-mock-bt-lcard-title { font-size: 13px; font-weight: normal; color: #F1F5F9; margin-bottom: 12px; }
.tp-mock-bt-field-lbl { font-size: 9px; font-weight: normal; letter-spacing: .1em; color: #6366f1; text-transform: uppercase; margin-bottom: 4px; margin-top: 10px; }
.tp-mock-bt-blockquote { border-left: 3px solid #3b82f6; padding: 8px 10px; background: rgba(59,130,246,0.08); border-radius: 0 6px 6px 0; font-size: 11px; color: #94a3b8; margin-bottom: 8px; }
.tp-mock-bt-green-box { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); border-radius: 6px; padding: 8px 12px; font-size: 11px; font-weight: normal; color: #22c55e; margin-bottom: 8px; }
.tp-mock-bt-diff-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; margin-bottom: 6px; }
.tp-mock-bt-diff-tag { padding: 3px 10px; border-radius: 20px; border: 1px solid #4f46e5; color: #a5b4fc; font-size: 10px; }
.tp-mock-bt-price-pill { display: inline-block; padding: 5px 14px; background: #22c55e; border-radius: 20px; font-size: 12px; font-weight: normal; color: #000; margin-bottom: 6px; }
.tp-mock-bt-price-tier { font-size: 10px; color: #64748b; margin-bottom: 8px; }
.tp-mock-bt-lrec-lbl { font-size: 9px; font-weight: normal; letter-spacing: .08em; color: #475569; text-transform: uppercase; margin-top: 10px; margin-bottom: 6px; }
.tp-mock-bt-lrec { font-size: 10px; color: #94a3b8; padding-left: 13px; position: relative; margin-bottom: 4px; line-height: 1.4; }
.tp-mock-bt-lrec::before { content: '•'; position: absolute; left: 2px; color: #22c55e; }
/* Channel cards */
.tp-mock-bt-channel-list { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
.tp-mock-bt-ch-item { display: flex; align-items: flex-start; gap: 9px; background: #1e293b; border-radius: 8px; padding: 9px 10px; }
.tp-mock-bt-ch-badge { padding: 2px 7px; border-radius: 20px; font-size: 9px; font-weight: normal; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
.tp-mock-bt-ch-badge.must { background: #ef4444; color: #fff; }
.tp-mock-bt-ch-badge.phase { background: #f59e0b; color: #000; }
.tp-mock-bt-ch-name { font-size: 12px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-bt-ch-desc { font-size: 10px; color: #64748b; }
/* Trust signals */
.tp-mock-bt-trust-sub { font-size: 9px; font-weight: normal; letter-spacing: .1em; color: #475569; text-transform: uppercase; margin-top: 10px; margin-bottom: 5px; }
.tp-mock-bt-trust-item { font-size: 10px; color: #94a3b8; padding-left: 13px; position: relative; margin-bottom: 4px; }
.tp-mock-bt-trust-item::before { content: '•'; position: absolute; left: 2px; color: #22c55e; }
/* Pre-launch checklist */
.tp-mock-bt-cl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 22px 18px; }
@media (max-width: 640px) { .tp-mock-bt-cl-grid { grid-template-columns: 1fr; } }
.tp-mock-bt-cl-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 12px; }
.tp-mock-bt-cl-title { font-size: 9px; font-weight: normal; letter-spacing: .1em; color: #22c55e; text-transform: uppercase; margin-bottom: 9px; }
.tp-mock-bt-cl-item { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 6px; }
.tp-mock-bt-cl-box { width: 12px; height: 12px; border: 1.5px solid #334155; border-radius: 3px; flex-shrink: 0; margin-top: 1px; }
.tp-mock-bt-cl-text { font-size: 10px; color: #94a3b8; line-height: 1.4; }

/* Social Listening mockup */
.tp-mock-sl-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-sl-banner { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #1e1b4b 100%); flex-wrap: wrap; gap: 12px; }
.tp-mock-sl-banner-left { display: flex; align-items: center; gap: 14px; }
.tp-mock-sl-banner-icon { width: 38px; height: 38px; background: rgba(139,92,246,0.3); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.tp-mock-sl-banner-title { font-size: 15px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-sl-banner-sub { font-size: 11px; color: #a5b4fc; }
.tp-mock-sl-banner-btns { display: flex; gap: 8px; }
.tp-mock-sl-dl-btn { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 7px; font-size: 12px; font-weight: normal; cursor: pointer; }
.tp-mock-sl-dl-btn.pdf { background: #ef4444; color: #fff; }
.tp-mock-sl-dl-btn.ppt { background: #f97316; color: #fff; }
.tp-mock-sl-rep-card { margin: 16px; background: #0C1524; border: 1px solid #1E293B; border-radius: 10px; padding: 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.tp-mock-sl-rep-ring { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.tp-mock-sl-rep-ring svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
.tp-mock-sl-rep-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-mock-sl-rep-ring-num { font-size: 26px; font-weight: normal; color: #f87171; line-height: 1; }
.tp-mock-sl-rep-ring-denom { font-size: 10px; color: #64748B; }
.tp-mock-sl-rep-ring-label { font-size: 9px; font-weight: normal; color: #f87171; margin-top: 1px; }
.tp-mock-sl-rep-right { flex: 1; }
.tp-mock-sl-rep-title { font-size: 18px; font-weight: normal; color: #F1F5F9; margin-bottom: 3px; }
.tp-mock-sl-rep-mentions { font-size: 12px; color: #64748B; margin-bottom: 10px; }
.tp-mock-sl-sentiment-bar-wrap { height: 6px; background: #1E293B; border-radius: 3px; margin-bottom: 8px; overflow: hidden; }
.tp-mock-sl-sentiment-bar { height: 6px; display: flex; }
.tp-mock-sl-sentiment-dots { display: flex; gap: 14px; flex-wrap: wrap; }
.tp-mock-sl-sdot { font-size: 12px; color: #94A3B8; display: flex; align-items: center; gap: 5px; }
.tp-mock-sl-sdot-circle { width: 8px; height: 8px; border-radius: 50%; }
/* Tabs */
.tp-mock-sl-tabs-wrap { margin: 0 16px 10px; background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; padding: 6px 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.tp-mock-sl-tab { padding: 6px 16px; font-size: 13px; font-weight: normal; color: #64748B; border-radius: 6px; cursor: pointer; }
.tp-mock-sl-tab.active { background: #4ade80; color: #0A1220; }
/* Tab panels */
.tp-mock-sl-panel { padding: 0 16px 16px; }
.tp-mock-sl-panel-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #475569; font-weight: normal; margin-bottom: 10px; }
/* Competitors */
.tp-mock-sl-comp-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; margin-bottom: 6px; }
.tp-mock-sl-comp-num { width: 28px; height: 28px; border-radius: 6px; background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: normal; color: #fb923c; flex-shrink: 0; }
.tp-mock-sl-comp-num.red { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: #f87171; }
.tp-mock-sl-comp-name { font-size: 15px; font-weight: normal; color: #F1F5F9; flex: 1; display: flex; align-items: center; gap: 8px; }
.tp-mock-sl-you-tag { font-size: 10px; font-weight: normal; padding: 1px 8px; border-radius: 4px; background: rgba(74,222,128,0.12); color: #4ade80; border: 1px solid rgba(74,222,128,0.3); }
.tp-mock-sl-comp-score { font-size: 14px; font-weight: normal; padding: 4px 12px; border-radius: 6px; }
.tp-mock-sl-comp-score.orange { background: rgba(249,115,22,0.12); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.tp-mock-sl-comp-score.red { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
/* Actions */
.tp-mock-sl-action-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #1E293B; }
.tp-mock-sl-action-num { width: 28px; height: 28px; border-radius: 7px; background: rgba(124,58,237,0.2); border: 1px solid rgba(124,58,237,0.4); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: normal; color: #a78bfa; flex-shrink: 0; }
.tp-mock-sl-action-text { font-size: 13px; color: #94A3B8; line-height: 1.5; flex: 1; }
/* Mentions panel */
.tp-mock-sl-mention-card { background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; padding: 12px 14px; margin-bottom: 7px; }
.tp-mock-sl-mention-source { font-size: 11px; font-weight: normal; color: #4ade80; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.tp-mock-sl-mention-text { font-size: 13px; color: #F1F5F9; margin-bottom: 6px; line-height: 1.5; }
.tp-mock-sl-mention-meta { display: flex; align-items: center; gap: 10px; }
.tp-mock-sl-sentiment-badge { font-size: 10px; font-weight: normal; padding: 2px 8px; border-radius: 20px; }
.tp-mock-sl-sentiment-badge.positive { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.tp-mock-sl-sentiment-badge.neutral { background: #0A1220; color: #64748B; border: 1px solid #1E2D45; }
.tp-mock-sl-mention-date { font-size: 11px; color: #475569; }

/* Speed Audit mockup */
.tp-mock-sa-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-sa-hero { display: flex; align-items: center; gap: 22px; padding: 22px 24px; background: #0C1524; border-bottom: 1px solid #1E293B; flex-wrap: wrap; }
.tp-mock-sa-ring { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.tp-mock-sa-ring svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
.tp-mock-sa-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-mock-sa-ring-num { font-size: 28px; font-weight: normal; color: #F1F5F9; line-height: 1; }
.tp-mock-sa-ring-denom { font-size: 11px; color: #64748B; }
.tp-mock-sa-hero-right { flex: 1; }
.tp-mock-sa-domain { font-size: 20px; font-weight: normal; color: #F1F5F9; margin-bottom: 7px; }
.tp-mock-sa-meta { font-size: 13px; color: #64748B; margin-bottom: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.tp-mock-sa-meta strong { color: #F1F5F9; font-weight: normal; }
.tp-mock-sa-grade { display: inline-block; padding: 5px 14px; background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.4); border-radius: 20px; font-size: 13px; font-weight: normal; color: #fb923c; }
.tp-mock-sa-export-row { padding: 14px 24px 4px; }
.tp-mock-sa-export-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; background: #0C1524; border: 1px solid #1E293B; border-radius: 7px; font-size: 13px; font-weight: normal; color: #94A3B8; }
.tp-mock-sa-section-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #475569; font-weight: normal; padding: 14px 24px 10px; }
/* Dimension grid */
.tp-mock-sa-dims { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 0 24px 16px; }
.tp-mock-sa-dim { background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; padding: 12px 12px 10px; }
.tp-mock-sa-dim-name { font-size: 12px; color: #64748B; font-weight: normal; margin-bottom: 8px; }
.tp-mock-sa-dim-bar { height: 4px; background: #1E293B; border-radius: 2px; margin-bottom: 8px; }
.tp-mock-sa-dim-bar-fill { height: 4px; border-radius: 2px; }
.tp-mock-sa-dim-score { font-size: 20px; font-weight: normal; color: #F1F5F9; margin-bottom: 4px; }
.tp-mock-sa-dim-score span { font-size: 13px; font-weight: 400; color: #64748B; }
.tp-mock-sa-dim-desc { font-size: 11px; color: #475569; line-height: 1.4; }
/* Issues/Strengths 2-col */
.tp-mock-sa-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 24px 16px; }
.tp-mock-sa-issues-wrap, .tp-mock-sa-strengths-wrap { background: #0C1524; border: 1px solid #1E293B; border-radius: 10px; overflow: hidden; }
.tp-mock-sa-col-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #1E293B; }
.tp-mock-sa-col-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.tp-mock-sa-col-title { font-size: 14px; font-weight: normal; color: #F1F5F9; }
.tp-mock-sa-col-sub { font-size: 11px; color: #64748B; margin-top: 1px; }
.tp-mock-sa-issue { border-left: 3px solid #f97316; background: #0A1220; margin: 10px 12px; border-radius: 0 6px 6px 0; padding: 10px 12px; }
.tp-mock-sa-issue.high { border-left-color: #ef4444; }
.tp-mock-sa-issue-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tp-mock-sa-issue-name { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-sa-issue-badge { font-size: 10px; font-weight: normal; padding: 2px 8px; border-radius: 20px; }
.tp-mock-sa-issue-badge.high { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.tp-mock-sa-issue-badge.medium { background: rgba(249,115,22,0.12); color: #fb923c; border: 1px solid rgba(249,115,22,0.3); }
.tp-mock-sa-issue-desc { font-size: 12px; color: #94A3B8; margin-bottom: 5px; }
.tp-mock-sa-issue-fix { font-size: 11px; font-style: italic; }
.tp-mock-sa-issue-fix.orange { color: #fb923c; }
.tp-mock-sa-issue-fix.red { color: #f87171; }
.tp-mock-sa-strength { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #0F1A2A; }
.tp-mock-sa-strength-icon { font-size: 13px; color: #fbbf24; flex-shrink: 0; margin-top: 1px; }
.tp-mock-sa-strength-name { font-size: 13px; font-weight: normal; color: #fbbf24; margin-bottom: 2px; }
.tp-mock-sa-strength-desc { font-size: 11px; color: #64748B; line-height: 1.4; }
/* Core Web Vitals */
.tp-mock-sa-cwv-card { margin: 0 24px 16px; background: #0C1524; border: 1px solid #1E2D45; border-radius: 10px; overflow: hidden; }
.tp-mock-sa-cwv-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #1E293B; }
.tp-mock-sa-cwv-title { font-size: 16px; font-weight: normal; color: #F1F5F9; margin-bottom: 3px; }
.tp-mock-sa-cwv-sub { font-size: 12px; color: #64748B; }
.tp-mock-sa-cwv-risk { font-size: 11px; font-weight: normal; padding: 4px 12px; border-radius: 20px; background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.tp-mock-sa-cwv-body { display: grid; grid-template-columns: 200px 1fr; }
.tp-mock-sa-cwv-left { padding: 16px; border-right: 1px solid #1E293B; }
.tp-mock-sa-cwv-val { font-size: 42px; font-weight: normal; color: #f87171; margin-bottom: 4px; }
.tp-mock-sa-cwv-est { font-size: 11px; color: #64748B; margin-bottom: 8px; }
.tp-mock-sa-cwv-poor { display: inline-block; padding: 3px 10px; background: rgba(239,68,68,0.15); color: #f87171; border-radius: 4px; font-size: 11px; font-weight: normal; margin-bottom: 12px; }
.tp-mock-sa-cwv-bench { font-size: 11px; color: #64748B; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.tp-mock-sa-cwv-bench-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tp-mock-sa-cwv-right { padding: 16px; }
.tp-mock-sa-cwv-detect-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #475569; font-weight: normal; margin-bottom: 8px; }
.tp-mock-sa-cwv-element { background: #0A1220; border: 1px solid #1E2D45; border-radius: 6px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 10px; }
.tp-mock-sa-cwv-element-icon { width: 28px; height: 28px; background: rgba(124,58,237,0.15); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.tp-mock-sa-cwv-element-name { font-size: 13px; font-weight: normal; color: #F1F5F9; margin-bottom: 4px; }
.tp-mock-sa-cwv-element-tag { font-size: 11px; color: #475569; line-height: 1.5; font-family: monospace; }
.tp-mock-sa-cwv-sublabel { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #475569; font-weight: normal; padding: 12px 16px 6px; border-top: 1px solid #1E293B; }
.tp-mock-sa-cwv-bullets { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 5px; }
.tp-mock-sa-cwv-bullet { font-size: 12px; color: #94A3B8; display: flex; align-items: flex-start; gap: 7px; line-height: 1.4; }
.tp-mock-sa-cwv-bullet::before { content: '•'; font-size: 14px; line-height: 1.2; flex-shrink: 0; }
.tp-mock-sa-cwv-bullet.good::before { color: #4ade80; }
.tp-mock-sa-cwv-bullet.bad::before { color: #f87171; }
.tp-mock-sa-cwv-blockquote { margin: 0 16px 12px; padding: 10px 12px; background: #0A1220; border-left: 3px solid #fbbf24; border-radius: 0 6px 6px 0; font-size: 12px; color: #94A3B8; line-height: 1.6; }
.tp-mock-sa-cwv-fixes { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.tp-mock-sa-cwv-fix { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: #94A3B8; line-height: 1.4; }
.tp-mock-sa-cwv-fix-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.35); color: #fb923c; font-size: 11px; font-weight: normal; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0; }
.tp-mock-sa-disclaimer { margin: 0 16px 16px; padding: 10px 12px; background: rgba(14,165,233,0.06); border: 1px solid rgba(14,165,233,0.2); border-radius: 6px; font-size: 11px; color: #64748B; line-height: 1.5; }
.tp-mock-sa-disclaimer strong { color: #38bdf8; }

/* Checkout Audit mockup */
.tp-mock-ca-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-ca-hero { display: flex; align-items: center; gap: 24px; padding: 24px; background: #0C1524; border-bottom: 1px solid #1E293B; flex-wrap: wrap; }
.tp-mock-ca-ring { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.tp-mock-ca-ring svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
.tp-mock-ca-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-mock-ca-ring-num { font-size: 26px; font-weight: normal; color: #F1F5F9; line-height: 1; }
.tp-mock-ca-ring-denom { font-size: 11px; color: #64748B; }
.tp-mock-ca-hero-right { flex: 1; }
.tp-mock-ca-hero-domain { font-size: 20px; font-weight: normal; color: #F1F5F9; margin-bottom: 10px; }
.tp-mock-ca-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-mock-ca-pill { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: #0A1220; border: 1px solid #1E2D45; border-radius: 20px; font-size: 13px; color: #94A3B8; }
.tp-mock-ca-pill-dot { width: 7px; height: 7px; border-radius: 50%; }
.tp-mock-ca-pill strong { color: #F1F5F9; font-weight: normal; }
.tp-mock-ca-grade { display: inline-block; padding: 6px 16px; background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.35); border-radius: 6px; font-size: 13px; font-weight: normal; color: #60a5fa; }
.tp-mock-ca-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 16px 24px; }
.tp-mock-ca-stat { background: #0C1524; border: 1px solid #1E293B; border-radius: 10px; padding: 18px 14px; text-align: center; }
.tp-mock-ca-stat-num { font-size: 32px; font-weight: normal; margin-bottom: 5px; }
.tp-mock-ca-stat-num.purple { color: #a78bfa; }
.tp-mock-ca-stat-num.red { color: #f87171; }
.tp-mock-ca-stat-num.green { color: #4ade80; }
.tp-mock-ca-stat-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #475569; font-weight: normal; }
.tp-mock-ca-export-row { padding: 0 24px 14px; }
.tp-mock-ca-export-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; background: #0C1524; border: 1px solid #1E293B; border-radius: 7px; font-size: 13px; font-weight: normal; color: #94A3B8; }
.tp-mock-ca-section-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #475569; font-weight: normal; padding: 16px 24px 10px; border-top: 1px solid #1E293B; }
/* Quick wins */
.tp-mock-ca-qw { margin: 0 24px 16px; border: 1px solid rgba(124,58,237,0.35); border-left: 4px solid #7c3aed; border-radius: 10px; overflow: hidden; background: #0C1524; }
.tp-mock-ca-qw-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #1E293B; }
.tp-mock-ca-qw-icon { width: 36px; height: 36px; background: rgba(124,58,237,0.15); border-radius: 8px; flex-shrink: 0; }
.tp-mock-ca-qw-title { font-size: 15px; font-weight: normal; color: #F1F5F9; }
.tp-mock-ca-qw-sub { font-size: 12px; color: #64748B; margin-top: 2px; }
.tp-mock-ca-qw-badge { margin-left: auto; font-size: 12px; font-weight: normal; padding: 4px 12px; border-radius: 20px; background: #0A1220; border: 1px solid #2D4A70; color: #94A3B8; }
.tp-mock-ca-action { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; }
.tp-mock-ca-action-num { width: 24px; height: 24px; border-radius: 50%; background: #0A1628; border: 1px solid #2D4A70; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: normal; color: #94A3B8; flex-shrink: 0; margin-top: 1px; }
.tp-mock-ca-action-body { flex: 1; }
.tp-mock-ca-action-title { font-size: 14px; font-weight: normal; color: #F1F5F9; margin-bottom: 5px; }
.tp-mock-ca-action-desc { font-size: 12px; color: #64748B; line-height: 1.6; }
.tp-mock-ca-action-pri { font-size: 11px; font-weight: normal; padding: 2px 10px; border-radius: 20px; background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); flex-shrink: 0; margin-top: 1px; }
/* Dimensions */
.tp-mock-ca-dims { padding: 0 24px 14px; display: flex; flex-direction: column; gap: 8px; }
.tp-mock-ca-dim { background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; padding: 12px 14px; }
.tp-mock-ca-dim-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tp-mock-ca-dim-score { width: 44px; height: 44px; border-radius: 8px; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.tp-mock-ca-dim-score-num { font-size: 14px; font-weight: normal; color: #4ade80; line-height: 1; }
.tp-mock-ca-dim-score-denom { font-size: 10px; color: #475569; }
.tp-mock-ca-dim-name { font-size: 14px; font-weight: normal; color: #F1F5F9; flex: 1; }
.tp-mock-ca-dim-badges { display: flex; gap: 6px; }
.tp-mock-ca-dim-badge { font-size: 11px; font-weight: normal; padding: 2px 9px; border-radius: 20px; }
.tp-mock-ca-dim-badge.good { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.tp-mock-ca-dim-badge.low { background: #0A1220; color: #64748B; border: 1px solid #1E2D45; }
.tp-mock-ca-dim-arrow { color: #475569; font-size: 12px; flex-shrink: 0; }
.tp-mock-ca-dim-bar { height: 3px; background: #1E293B; border-radius: 2px; }
.tp-mock-ca-dim-bar-fill { height: 3px; border-radius: 2px; background: #3b82f6; }
/* Strengths */
.tp-mock-ca-strengths { padding: 0 24px 14px; display: flex; flex-direction: column; gap: 7px; }
.tp-mock-ca-strength { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #0C1524; border: 1px solid rgba(34,197,94,0.15); border-radius: 8px; }
.tp-mock-ca-strength-icon { width: 22px; height: 22px; background: rgba(34,197,94,0.12); border-radius: 5px; flex-shrink: 0; margin-top: 1px; }
.tp-mock-ca-strength-name { font-size: 13px; font-weight: normal; color: #4ade80; margin-bottom: 2px; }
.tp-mock-ca-strength-desc { font-size: 12px; color: #64748B; line-height: 1.4; }
/* Final summary */
.tp-mock-ca-summary { margin: 0 24px 20px; background: #0C1A2E; border: 1px solid #1E2D45; border-radius: 10px; padding: 16px; }
.tp-mock-ca-summary-text { font-size: 13px; color: #94A3B8; line-height: 1.7; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #1E293B; }
.tp-mock-ca-summary-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tp-mock-ca-summary-col-label { font-size: 10px; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.tp-mock-ca-summary-col-label.risk { color: #f87171; }
.tp-mock-ca-summary-col-label.opp { color: #4ade80; }
.tp-mock-ca-summary-col-text { font-size: 12px; color: #64748B; line-height: 1.6; }
.tp-mock-ca-summary-bullet { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 5px; font-size: 12px; color: #64748B; line-height: 1.4; }
.tp-mock-ca-summary-bullet::before { content: '•'; color: #f87171; font-size: 14px; line-height: 1.2; flex-shrink: 0; }

/* Ad Creative mockup */
.tp-mock-ac-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-ac-brand { display: flex; align-items: center; gap: 20px; padding: 14px 22px; background: #0C1524; border-bottom: 1px solid #1E293B; flex-wrap: wrap; }
.tp-mock-ac-brand-name { font-size: 16px; font-weight: normal; color: #F1F5F9; }
.tp-mock-ac-brand-url { font-size: 12px; color: #64748B; margin-top: 2px; }
.tp-mock-ac-brand-divider { width: 1px; height: 28px; background: #1E293B; flex-shrink: 0; }
.tp-mock-ac-brand-meta { font-size: 13px; color: #94A3B8; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tp-mock-ac-brand-meta strong { color: #F1F5F9; font-weight: normal; }
.tp-mock-ac-platform-tabs { display: flex; gap: 8px; padding: 14px 22px; border-bottom: 1px solid #1E293B; flex-wrap: wrap; }
.tp-mock-ac-ptab { padding: 7px 18px; font-size: 13px; font-weight: normal; color: #64748B; background: #0C1524; border: 1px solid #1E293B; border-radius: 6px; cursor: pointer; }
.tp-mock-ac-ptab.active { background: #0C1A30; color: #a855f7; border-color: rgba(168,85,247,0.45); }
.tp-mock-ac-panel { padding: 0; }
/* Google Ads panel */
.tp-mock-ac-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.tp-mock-ac-col { padding: 14px 20px 16px; }
.tp-mock-ac-col:first-child { border-right: 1px solid #1E293B; }
.tp-mock-ac-col-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #475569; font-weight: normal; margin-bottom: 10px; }
.tp-mock-ac-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #0C1524; border: 1px solid #1E293B; border-radius: 6px; margin-bottom: 5px; }
.tp-mock-ac-row-text { flex: 1; font-size: 13px; color: #F1F5F9; }
.tp-mock-ac-char { font-size: 11px; font-weight: normal; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.tp-mock-ac-char.green { background: rgba(34,197,94,0.12); color: #4ade80; }
.tp-mock-ac-char.yellow { background: rgba(234,179,8,0.12); color: #fbbf24; }
.tp-mock-ac-char.red { background: rgba(239,68,68,0.12); color: #f87171; }
.tp-mock-ac-copy-btn { font-size: 11px; font-weight: normal; color: #94A3B8; background: #0A1220; border: 1px solid #1E2D45; border-radius: 4px; padding: 2px 9px; flex-shrink: 0; cursor: pointer; }
/* Email Subject Lines panel */
.tp-mock-ac-email-list { padding: 14px 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.tp-mock-ac-email-card { background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; padding: 12px 14px; }
.tp-mock-ac-email-type { font-size: 10px; font-weight: normal; letter-spacing: 1px; text-transform: uppercase; color: #38bdf8; margin-bottom: 5px; }
.tp-mock-ac-email-subject { font-size: 14px; font-weight: normal; color: #F1F5F9; margin-bottom: 3px; }
.tp-mock-ac-email-preview { font-size: 12px; color: #64748B; font-style: italic; margin-bottom: 10px; }
.tp-mock-ac-email-btns { display: flex; gap: 7px; }
.tp-mock-ac-email-btn { font-size: 11px; font-weight: normal; color: #94A3B8; background: #0A1220; border: 1px solid #1E2D45; border-radius: 5px; padding: 4px 12px; cursor: pointer; }

/* A/B Test Planner mockup */
.tp-mock-ab-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-ab-brand { padding: 18px 24px; background: #0C1524; border-bottom: 1px solid #1E293B; display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.tp-mock-ab-brand-name { font-size: 18px; font-weight: normal; color: #F1F5F9; margin-bottom: 4px; }
.tp-mock-ab-brand-url { font-size: 13px; color: #64748B; }
.tp-mock-ab-brand-stats { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.tp-mock-ab-stat-pill { font-size: 13px; color: #94A3B8; display: flex; align-items: center; gap: 5px; }
.tp-mock-ab-stat-pill strong { color: #F1F5F9; font-size: 15px; font-weight: normal; }
.tp-mock-ab-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; padding: 16px 24px; }
.tp-mock-ab-sum-card { background: #0C1524; border: 1px solid #1E293B; border-radius: 10px; padding: 16px 14px; text-align: center; }
.tp-mock-ab-sum-num { font-size: 30px; font-weight: normal; margin-bottom: 4px; }
.tp-mock-ab-sum-label { font-size: 12px; color: #64748B; }
.tp-mock-ab-sum-num.blue { color: #818cf8; }
.tp-mock-ab-sum-num.red { color: #f87171; }
.tp-mock-ab-sum-num.yellow { color: #fbbf24; }
.tp-mock-ab-sum-num.green { color: #4ade80; }
.tp-mock-ab-filters { padding: 0 24px; }
.tp-mock-ab-page-tabs { display: flex; gap: 0; border-bottom: 1px solid #1E293B; overflow-x: auto; }
.tp-mock-ab-ptab { white-space: nowrap; padding: 10px 16px; font-size: 13px; font-weight: normal; color: #64748B; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; }
.tp-mock-ab-ptab.active { color: #F1F5F9; border-bottom-color: #0ea5e9; }
.tp-mock-ab-ptab-count { font-size: 11px; background: #1E293B; color: #94A3B8; border-radius: 20px; padding: 1px 7px; }
.tp-mock-ab-ptab.active .tp-mock-ab-ptab-count { background: rgba(14,165,233,0.2); color: #38bdf8; }
.tp-mock-ab-priority-row { display: flex; align-items: center; gap: 8px; padding: 12px 0 4px; }
.tp-mock-ab-priority-label { font-size: 11px; font-weight: normal; letter-spacing: 1px; color: #475569; text-transform: uppercase; }
.tp-mock-ab-ppill { font-size: 12px; font-weight: normal; padding: 3px 12px; border-radius: 20px; cursor: pointer; border: 1px solid #1E293B; color: #64748B; background: none; }
.tp-mock-ab-ppill.active { background: rgba(14,165,233,0.15); color: #38bdf8; border-color: rgba(14,165,233,0.4); }
.tp-mock-ab-sep { color: #334155; margin: 0 4px; }
.tp-mock-ab-list { padding: 12px 24px 20px; display: flex; flex-direction: column; gap: 8px; }
.tp-mock-ab-card { background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; padding: 12px 14px 12px 16px; display: flex; align-items: center; gap: 12px; border-left: 3px solid transparent; }
.tp-mock-ab-card.high { border-left-color: #ef4444; }
.tp-mock-ab-card.medium { border-left-color: #eab308; }
.tp-mock-ab-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.tp-mock-ab-badge { font-size: 10px; font-weight: normal; padding: 2px 8px; border-radius: 4px; }
.tp-mock-ab-badge.page { background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.3); }
.tp-mock-ab-badge.category { background: #0C1A2E; color: #94A3B8; border: 1px solid #1E2D45; }
.tp-mock-ab-card-body { flex: 1; }
.tp-mock-ab-card-title { font-size: 14px; font-weight: normal; color: #F1F5F9; }
.tp-mock-ab-card-right { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.tp-mock-ab-pri { font-size: 11px; font-weight: normal; padding: 3px 10px; border-radius: 20px; }
.tp-mock-ab-pri.high { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.tp-mock-ab-pri.medium { background: rgba(234,179,8,0.12); color: #fbbf24; border: 1px solid rgba(234,179,8,0.3); }
.tp-mock-ab-diff { font-size: 11px; font-weight: normal; padding: 3px 10px; border-radius: 20px; background: #0A1220; color: #64748B; border: 1px solid #1E2D45; }

/* Launch Strategy mockup */
.tp-mock-ls-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-ls-brand { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px; background: #0C1524; border-bottom: 1px solid #1E293B; flex-wrap: wrap; }
.tp-mock-ls-brand-left { display: flex; flex-direction: column; gap: 6px; }
.tp-mock-ls-brand-name { font-size: 22px; font-weight: normal; color: #F1F5F9; }
.tp-mock-ls-brand-meta { font-size: 13px; color: #64748B; }
.tp-mock-ls-readiness { background: #0A1628; border: 1px solid #1E2D45; border-radius: 10px; padding: 14px 20px; min-width: 200px; }
.tp-mock-ls-readiness-label { font-size: 10px; letter-spacing: 1px; color: #64748B; text-transform: uppercase; font-weight: normal; margin-bottom: 6px; }
.tp-mock-ls-readiness-pct { font-size: 34px; font-weight: normal; color: #F1F5F9; margin-bottom: 6px; }
.tp-mock-ls-readiness-bar { height: 4px; background: #1E293B; border-radius: 2px; margin-bottom: 10px; }
.tp-mock-ls-readiness-fill { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #f97316, #ef4444); }
.tp-mock-ls-check { font-size: 12px; color: #94A3B8; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.tp-mock-ls-check::before { content: '✓'; color: #22c55e; font-weight: normal; font-size: 11px; }
.tp-mock-ls-section-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #475569; font-weight: normal; padding: 16px 24px 8px; border-bottom: 1px solid #0F1A2A; }
.tp-mock-ls-orb { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 14px 24px; }
.tp-mock-ls-orb-card { background: #0C1A2E; border: 1px solid #1E293B; border-radius: 10px; padding: 14px; }
.tp-mock-ls-orb-title { font-size: 14px; font-weight: normal; color: #F1F5F9; margin-bottom: 5px; }
.tp-mock-ls-orb-desc { font-size: 11px; color: #64748B; margin-bottom: 10px; line-height: 1.5; }
.tp-mock-ls-orb-item { background: #0A1220; border: 1px solid #1E2D45; border-radius: 6px; padding: 7px 10px; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.tp-mock-ls-orb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tp-mock-ls-orb-dot.green { background: #22c55e; }
.tp-mock-ls-orb-dot.yellow { background: #eab308; }
.tp-mock-ls-orb-item-name { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-ls-orb-item-sub { font-size: 11px; color: #475569; }
.tp-mock-ls-phase-tabs { display: flex; padding: 14px 24px 0; border-bottom: 1px solid #1E293B; overflow-x: auto; gap: 4px; }
.tp-mock-ls-ptab { white-space: nowrap; padding: 7px 18px; font-size: 12px; font-weight: normal; color: #64748B; background: none; border: 1px solid #1E293B; border-bottom: none; border-radius: 7px 7px 0 0; cursor: pointer; }
.tp-mock-ls-ptab.active { background: #0D1A30; color: #F1F5F9; border-color: #2D4A70; }
.tp-mock-ls-goal-banner { margin: 12px 24px; padding: 9px 13px; background: #0A1628; border-left: 3px solid #22c55e; border-radius: 0 6px 6px 0; font-size: 13px; color: #94A3B8; line-height: 1.5; }
.tp-mock-ls-action-list { padding: 0 24px 14px; display: flex; flex-direction: column; gap: 7px; }
.tp-mock-ls-action { background: #0C1524; border: 1px solid #1E293B; border-radius: 8px; padding: 11px 12px; display: flex; align-items: flex-start; gap: 9px; }
.tp-mock-ls-channel { font-size: 10px; font-weight: normal; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; margin-top: 2px; }
.tp-mock-ls-channel.owned { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.3); }
.tp-mock-ls-channel.rented { background: rgba(249,115,22,0.12); color: #f97316; border: 1px solid rgba(249,115,22,0.3); }
.tp-mock-ls-action-body { flex: 1; }
.tp-mock-ls-action-title { font-size: 13px; font-weight: normal; color: #F1F5F9; margin-bottom: 3px; }
.tp-mock-ls-action-desc { font-size: 11px; color: #64748B; line-height: 1.5; }
.tp-mock-ls-priority { font-size: 10px; font-weight: normal; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; margin-top: 2px; }
.tp-mock-ls-priority.high { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.tp-mock-ls-priority.medium { background: rgba(234,179,8,0.12); color: #eab308; border: 1px solid rgba(234,179,8,0.25); }
.tp-mock-ls-checks-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 14px 24px; }
.tp-mock-ls-cl { background: #0C1524; border: 1px solid #1E293B; border-radius: 10px; padding: 13px; }
.tp-mock-ls-cl-header { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.tp-mock-ls-cl-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.tp-mock-ls-cl-title { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-ls-cl-count { font-size: 11px; color: #475569; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px solid #1E293B; }
.tp-mock-ls-cl-bar { height: 3px; background: #1E293B; border-radius: 2px; margin-bottom: 9px; }
.tp-mock-ls-cl-bar-fill { height: 3px; border-radius: 2px; }
.tp-mock-ls-cl-item { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 6px; font-size: 11px; color: #94A3B8; line-height: 1.4; }
.tp-mock-ls-cl-box { width: 12px; height: 12px; border: 1px solid #334155; border-radius: 3px; flex-shrink: 0; margin-top: 1px; }
.tp-mock-ls-email-tabs { display: flex; gap: 4px; padding: 14px 24px 0; border-bottom: 1px solid #1E293B; overflow-x: auto; }
.tp-mock-ls-etab { white-space: nowrap; padding: 7px 14px; font-size: 12px; font-weight: normal; color: #64748B; background: none; border: 1px solid #1E293B; border-bottom: none; border-radius: 7px 7px 0 0; cursor: pointer; }
.tp-mock-ls-etab.active { background: #0D1A30; color: #F1F5F9; border-color: #2D4A70; }
.tp-mock-ls-email-card { margin: 14px 24px; background: #0C1524; border: 1px solid #1E2D45; border-radius: 10px; overflow: hidden; }
.tp-mock-ls-email-subject-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #475569; font-weight: normal; padding: 13px 15px 3px; }
.tp-mock-ls-email-subject { font-size: 15px; font-weight: normal; color: #F1F5F9; padding: 0 15px 5px; }
.tp-mock-ls-email-preview { font-size: 12px; color: #475569; padding: 0 15px 11px; border-bottom: 1px solid #1E293B; }
.tp-mock-ls-email-body { padding: 13px 15px; font-size: 12px; color: #94A3B8; line-height: 1.9; }
.tp-mock-ls-seq-tabs { display: flex; gap: 4px; padding: 14px 24px 0; border-bottom: 1px solid #1E293B; }
.tp-mock-ls-stab { padding: 7px 16px; font-size: 12px; font-weight: normal; color: #64748B; background: none; border: 1px solid #1E293B; border-bottom: none; border-radius: 7px 7px 0 0; cursor: pointer; }
.tp-mock-ls-stab.active { background: #0D1A30; color: #F1F5F9; border-color: #2D4A70; }
.tp-mock-ls-seq-pills { display: flex; gap: 8px; flex-wrap: wrap; padding: 11px 24px 6px; }
.tp-mock-ls-pill { font-size: 11px; font-weight: normal; padding: 3px 10px; border-radius: 20px; }
.tp-mock-ls-pill.trigger { background: rgba(124,58,237,0.15); color: #a78bfa; border: 1px solid rgba(124,58,237,0.3); }
.tp-mock-ls-pill.goal { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.tp-mock-ls-pill.duration { background: rgba(234,179,8,0.1); color: #fbbf24; border: 1px solid rgba(234,179,8,0.25); }
.tp-mock-ls-seq-list { padding: 0 24px 18px; display: flex; flex-direction: column; }
.tp-mock-ls-seq-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid #0F1A2A; }
.tp-mock-ls-seq-num { width: 26px; height: 26px; border-radius: 50%; background: #0A1628; border: 1px solid #2D4A70; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: normal; color: #94A3B8; flex-shrink: 0; }
.tp-mock-ls-seq-day { font-size: 11px; font-weight: normal; color: #475569; background: #0A1220; border: 1px solid #1E2D45; border-radius: 4px; padding: 2px 7px; flex-shrink: 0; white-space: nowrap; }
.tp-mock-ls-seq-title { font-size: 13px; font-weight: normal; color: #F1F5F9; }
.tp-mock-ls-seq-subject { font-size: 11px; color: #64748B; margin-top: 2px; }

/* Market Research mockup */
.tp-mock-mr-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-mr-brand-hdr { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: linear-gradient(135deg, #1e3a5f 0%, #1e1b4b 60%, #2d1f6e 100%); flex-wrap: wrap; }
.tp-mock-mr-logo { width: 54px; height: 54px; background: #6366f1; border-radius: 12px; flex-shrink: 0; }
.tp-mock-mr-hdr-info { flex: 1; min-width: 160px; }
.tp-mock-mr-hdr-label { font-size: 9px; font-weight: normal; letter-spacing: .1em; color: #94a3b8; text-transform: uppercase; margin-bottom: 4px; }
.tp-mock-mr-hdr-name { font-size: 22px; font-weight: normal; color: #F1F5F9; margin-bottom: 8px; }
.tp-mock-mr-hdr-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.tp-mock-mr-hpill { padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #cbd5e1; font-size: 10px; }
.tp-mock-mr-hdr-stats { display: flex; gap: 18px; }
.tp-mock-mr-hdr-stat { text-align: right; }
.tp-mock-mr-hdr-stat-val { font-size: 18px; font-weight: normal; color: #F1F5F9; }
.tp-mock-mr-hdr-stat-lbl { font-size: 8px; font-weight: normal; letter-spacing: .06em; color: #64748b; text-transform: uppercase; }
.tp-mock-mr-banner { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; background: #0d1729; border-top: 1px solid #1e293b; border-bottom: 1px solid #1e293b; flex-wrap: wrap; gap: 8px; }
.tp-mock-mr-banner-left { display: flex; align-items: center; gap: 10px; }
.tp-mock-mr-banner-icon { width: 32px; height: 32px; background: #1e293b; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.tp-mock-mr-banner-title { font-size: 12px; font-weight: normal; color: #F1F5F9; }
.tp-mock-mr-banner-sub { font-size: 10px; color: #64748b; }
.tp-mock-mr-banner-btns { display: flex; gap: 7px; }
.tp-mock-mr-dl { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 11px; font-weight: normal; }
.tp-mock-mr-dl.pdf { background: #22c55e; color: #000; }
.tp-mock-mr-dl.ppt { background: transparent; border: 1.5px solid #22c55e; color: #22c55e; }
.tp-mock-mr-stats { display: flex; gap: 7px; padding: 10px 22px; background: #0c1424; }
.tp-mock-mr-stat { flex: 1; background: #0f172a; border: 1px solid #1e293b; border-radius: 9px; padding: 9px 10px; text-align: center; }
.tp-mock-mr-stat-val { font-size: 13px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-mr-stat-lbl { font-size: 8px; font-weight: normal; letter-spacing: .05em; color: #64748b; text-transform: uppercase; }
.tp-mock-mr-layout { display: grid; grid-template-columns: 1fr 240px; }
@media (max-width: 640px) { .tp-mock-mr-layout { grid-template-columns: 1fr; } }
.tp-mock-mr-main { padding: 14px 14px 14px 22px; border-right: 1px solid #1e293b; }
.tp-mock-mr-sidebar { padding: 14px 22px 14px 12px; }
.tp-mock-mr-sec-div { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tp-mock-mr-sec-lbl { font-size: 9px; font-weight: normal; letter-spacing: .1em; color: #64748b; text-transform: uppercase; white-space: nowrap; }
.tp-mock-mr-sec-line { flex: 1; height: 1px; background: #1e293b; }
.tp-mock-mr-aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tp-mock-mr-aud-card { border-radius: 10px; padding: 12px; }
.tp-mock-mr-aud-card.primary { background: linear-gradient(145deg, #1e3a8a 0%, #2563eb 100%); }
.tp-mock-mr-aud-card.secondary { background: linear-gradient(145deg, #4c1d95 0%, #7c3aed 100%); }
.tp-mock-mr-aud-label { font-size: 8px; font-weight: normal; letter-spacing: .08em; color: rgba(255,255,255,0.65); text-transform: uppercase; margin-bottom: 3px; }
.tp-mock-mr-aud-title { font-size: 12px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-mr-aud-size { font-size: 9px; color: rgba(255,255,255,0.55); margin-bottom: 7px; }
.tp-mock-mr-aud-sub { font-size: 8px; font-weight: normal; letter-spacing: .08em; color: rgba(255,255,255,0.5); text-transform: uppercase; margin-bottom: 3px; margin-top: 6px; }
.tp-mock-mr-aud-item { font-size: 10px; color: rgba(255,255,255,0.8); padding-left: 11px; position: relative; margin-bottom: 2px; }
.tp-mock-mr-aud-item::before { content: '•'; position: absolute; left: 1px; color: rgba(255,255,255,0.55); }
.tp-mock-mr-aud-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.tp-mock-mr-aud-tag { padding: 2px 7px; background: rgba(0,0,0,0.25); border-radius: 4px; font-size: 9px; color: rgba(255,255,255,0.7); }
.tp-mock-mr-comp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tp-mock-mr-comp-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; overflow: hidden; }
.tp-mock-mr-comp-head { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 1px solid #1e293b; }
.tp-mock-mr-comp-av { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: normal; color: #fff; flex-shrink: 0; }
.tp-mock-mr-comp-name { font-size: 11px; font-weight: normal; color: #F1F5F9; margin-bottom: 3px; }
.tp-mock-mr-comp-tags { display: flex; gap: 4px; }
.tp-mock-mr-ctag { padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: normal; }
.tp-mock-mr-ctag.direct { background: rgba(59,130,246,.2); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.tp-mock-mr-ctag.indirect { background: rgba(99,102,241,.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }
.tp-mock-mr-ctag.budget { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.tp-mock-mr-ctag.premium { background: rgba(168,85,247,.15); color: #d8b4fe; border: 1px solid rgba(168,85,247,.3); }
.tp-mock-mr-ctag.aspirational { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.tp-mock-mr-comp-body { padding: 9px 11px; }
.tp-mock-mr-comp-lbl { font-size: 8px; font-weight: normal; letter-spacing: .08em; color: #475569; text-transform: uppercase; margin-bottom: 2px; }
.tp-mock-mr-comp-text { font-size: 10px; color: #94a3b8; margin-bottom: 7px; }
.tp-mock-mr-swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-mock-mr-swot-card { background: #0f172a; border-radius: 10px; padding: 11px; border: 1px solid; }
.tp-mock-mr-swot-card.str { border-color: #3b82f6; }
.tp-mock-mr-swot-card.wk { border-color: #ef4444; }
.tp-mock-mr-swot-card.op { border-color: #22c55e; }
.tp-mock-mr-swot-card.th { border-color: #f59e0b; }
.tp-mock-mr-swot-title { font-size: 10px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.tp-mock-mr-swot-card.str .tp-mock-mr-swot-title { color: #3b82f6; }
.tp-mock-mr-swot-card.wk .tp-mock-mr-swot-title { color: #ef4444; }
.tp-mock-mr-swot-card.op .tp-mock-mr-swot-title { color: #22c55e; }
.tp-mock-mr-swot-card.th .tp-mock-mr-swot-title { color: #f59e0b; }
.tp-mock-mr-swot-item { font-size: 10px; color: #94a3b8; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #1e293b; line-height: 1.3; }
.tp-mock-mr-swot-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.tp-mock-mr-side-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.tp-mock-mr-side-title { font-size: 12px; font-weight: normal; color: #F1F5F9; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.tp-mock-mr-side-icon { width: 22px; height: 22px; background: #1e293b; border-radius: 5px; flex-shrink: 0; }
.tp-mock-mr-qw-item { display: flex; align-items: flex-start; gap: 7px; padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid #1e293b; }
.tp-mock-mr-qw-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.tp-mock-mr-qw-num { width: 17px; height: 17px; background: #3b82f6; border-radius: 50%; font-size: 9px; font-weight: normal; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tp-mock-mr-qw-text { font-size: 10px; color: #94a3b8; line-height: 1.4; }
.tp-mock-mr-kw-lbl { font-size: 8px; font-weight: normal; letter-spacing: .08em; color: #64748b; text-transform: uppercase; margin-bottom: 6px; }
.tp-mock-mr-kw-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tp-mock-mr-kw-tag { padding: 3px 9px; border: 1px solid #334155; border-radius: 6px; font-size: 9px; color: #94a3b8; }
.tp-mock-mr-prod-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #1e293b; }
.tp-mock-mr-prod-row:last-child { border-bottom: none; }
.tp-mock-mr-prod-name { font-size: 10px; color: #94a3b8; }
.tp-mock-mr-prod-price { font-size: 10px; font-weight: normal; color: #22c55e; }
.tp-mock-mr-mkt-text { font-size: 10px; color: #94a3b8; line-height: 1.5; }

/* Upsell Planner mockup */
.tp-mock-up-wrap { background: #060D18; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-up-banner { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: linear-gradient(135deg, #92400e 0%, #c2410c 50%, #ea580c 100%); flex-wrap: wrap; gap: 8px; }
.tp-mock-up-banner-left { display: flex; align-items: center; gap: 12px; }
.tp-mock-up-banner-icon { width: 34px; height: 34px; background: rgba(255,255,255,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.tp-mock-up-banner-title { font-size: 13px; font-weight: normal; color: #fff; }
.tp-mock-up-banner-sub { font-size: 10px; color: rgba(255,255,255,0.7); }
.tp-mock-up-banner-btns { display: flex; gap: 7px; }
.tp-mock-up-dl { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 7px; font-size: 11px; font-weight: normal; }
.tp-mock-up-dl.pdf { background: #22c55e; color: #000; }
.tp-mock-up-dl.ppt { background: transparent; border: 1.5px solid #22c55e; color: #22c55e; }
.tp-mock-up-stats { display: flex; gap: 0; background: #0c1424; border-bottom: 1px solid #1e293b; }
.tp-mock-up-stat { flex: 1; padding: 12px 10px; text-align: center; border-right: 1px solid #1e293b; }
.tp-mock-up-stat:last-child { border-right: none; }
.tp-mock-up-stat-val { font-size: 18px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-up-stat-val.orange { color: #f97316; }
.tp-mock-up-stat-val.green { color: #22c55e; }
.tp-mock-up-stat-lbl { font-size: 8px; font-weight: normal; letter-spacing: .06em; color: #64748b; text-transform: uppercase; }
.tp-mock-up-tabs { display: flex; gap: 2px; padding: 10px 22px 0; background: #0d1729; }
.tp-mock-up-tab { padding: 7px 13px; border-radius: 8px 8px 0 0; font-size: 11px; font-weight: normal; cursor: pointer; color: #64748b; background: transparent; border: 1px solid transparent; border-bottom: none; }
.tp-mock-up-tab.active { background: #0f172a; color: #F1F5F9; border-color: #1e293b; }
.tp-mock-up-panel { display: none; padding: 14px 22px 16px; }
.tp-mock-up-panel.active { display: block; }
.tp-mock-up-sec-head { display: flex; align-items: center; gap: 10px; border-left: 3px solid #f97316; padding-left: 10px; margin-bottom: 12px; }
.tp-mock-up-sec-title { font-size: 11px; font-weight: normal; letter-spacing: .1em; color: #F1F5F9; text-transform: uppercase; }
.tp-mock-up-sec-badge { padding: 2px 9px; background: #f97316; border-radius: 20px; font-size: 10px; font-weight: normal; color: #fff; }
/* Bundle cards */
.tp-mock-up-bundle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
@media (max-width: 560px) { .tp-mock-up-bundle-grid { grid-template-columns: 1fr; } }
.tp-mock-up-bundle { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; overflow: hidden; }
.tp-mock-up-bundle-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 11px 12px 8px; border-bottom: 1px solid #1e293b; }
.tp-mock-up-bundle-name { font-size: 13px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-up-bundle-type { font-size: 10px; color: #64748b; }
.tp-mock-up-bundle-off { padding: 3px 9px; background: transparent; border: 1.5px solid #f97316; border-radius: 6px; font-size: 11px; font-weight: normal; color: #f97316; white-space: nowrap; }
.tp-mock-up-bundle-body { padding: 10px 12px; }
.tp-mock-up-bundle-prods { margin-bottom: 10px; }
.tp-mock-up-bundle-prod { font-size: 10px; color: #cbd5e1; padding-left: 14px; position: relative; margin-bottom: 4px; }
.tp-mock-up-bundle-prod::before { content: '⬡'; position: absolute; left: 0; color: #f97316; font-size: 8px; top: 1px; }
.tp-mock-up-bundle-price { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tp-mock-up-bundle-old { font-size: 12px; color: #475569; text-decoration: line-through; }
.tp-mock-up-bundle-new { font-size: 16px; font-weight: normal; color: #22c55e; }
.tp-mock-up-bundle-save { padding: 2px 8px; background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); border-radius: 6px; font-size: 10px; font-weight: normal; color: #22c55e; }
.tp-mock-up-bundle-desc { font-size: 10px; color: #64748b; line-height: 1.4; margin-bottom: 8px; }
.tp-mock-up-bundle-placement { font-size: 8px; font-weight: normal; letter-spacing: .08em; color: #475569; text-transform: uppercase; margin-bottom: 4px; }
.tp-mock-up-bundle-quote { font-size: 10px; color: #94a3b8; font-style: italic; }
/* Quick wins sidebar */
.tp-mock-up-bundles-layout { display: grid; grid-template-columns: 1fr 220px; gap: 12px; }
@media (max-width: 580px) { .tp-mock-up-bundles-layout { grid-template-columns: 1fr; } }
.tp-mock-up-side-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.tp-mock-up-side-title { font-size: 12px; font-weight: normal; color: #F1F5F9; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tp-mock-up-side-icon { width: 24px; height: 24px; background: rgba(249,115,22,0.2); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.tp-mock-up-qw-item { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid #1e293b; }
.tp-mock-up-qw-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.tp-mock-up-qw-num { width: 18px; height: 18px; background: #f97316; border-radius: 50%; font-size: 9px; font-weight: normal; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tp-mock-up-qw-text { font-size: 10px; color: #94a3b8; line-height: 1.4; }
/* Cross-sell table */
.tp-mock-up-cs-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.tp-mock-up-cs-th { font-size: 9px; font-weight: normal; letter-spacing: .1em; color: #64748b; text-transform: uppercase; padding: 6px 10px; background: #0c1424; border-bottom: 1px solid #1e293b; text-align: left; }
.tp-mock-up-cs-row td { padding: 10px; border-bottom: 1px solid #1e293b; vertical-align: top; }
.tp-mock-up-cs-row:last-child td { border-bottom: none; }
.tp-mock-up-cs-trigger { font-size: 11px; font-weight: normal; color: #F1F5F9; margin-bottom: 2px; }
.tp-mock-up-cs-hint { font-size: 9px; color: #475569; }
.tp-mock-up-cs-rec { font-size: 11px; font-weight: normal; color: #22c55e; margin-bottom: 4px; }
.tp-mock-up-cs-rec-desc { font-size: 9px; color: #64748b; }
.tp-mock-up-cs-placement { padding: 3px 9px; border-radius: 6px; border: 1.5px solid; font-size: 10px; font-weight: normal; white-space: nowrap; display: inline-block; }
.tp-mock-up-cs-placement.cart { border-color: #3b82f6; color: #60a5fa; }
.tp-mock-up-cs-placement.product { border-color: #8b5cf6; color: #a78bfa; }
.tp-mock-up-cs-placement.checkout { border-color: #06b6d4; color: #67e8f9; }
.tp-mock-up-cs-placement.thankyou { border-color: #f59e0b; color: #fbbf24; }
/* Volume tiers */
.tp-mock-up-vol-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.tp-mock-up-vol-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; padding: 14px 10px; text-align: center; position: relative; }
.tp-mock-up-vol-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 20px; background: #22c55e; color: #000; font-size: 9px; font-weight: normal; white-space: nowrap; }
.tp-mock-up-vol-mult { font-size: 28px; font-weight: normal; color: #F1F5F9; margin-bottom: 4px; margin-top: 4px; }
.tp-mock-up-vol-label { font-size: 10px; color: #64748b; margin-bottom: 8px; }
.tp-mock-up-vol-pct { font-size: 20px; font-weight: normal; color: #22c55e; }
.tp-mock-up-vol-tip { background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.25); border-radius: 8px; padding: 10px 14px; font-size: 11px; color: #94a3b8; margin-bottom: 14px; }
/* Post-purchase offer cards */
.tp-mock-up-offer-card { background: #0f172a; border: 1px solid #1e293b; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.tp-mock-up-offer-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid #1e293b; flex-wrap: wrap; gap: 6px; }
.tp-mock-up-offer-name { font-size: 12px; font-weight: normal; color: #F1F5F9; }
.tp-mock-up-offer-sub { font-size: 10px; color: #64748b; }
.tp-mock-up-offer-badge { padding: 3px 9px; background: #1e293b; border-radius: 6px; font-size: 9px; color: #94a3b8; }
.tp-mock-up-offer-body { padding: 10px 12px; }
.tp-mock-up-offer-quote { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 8px; padding: 10px 12px; font-size: 11px; color: #4ade80; font-style: italic; margin-bottom: 8px; line-height: 1.4; }
.tp-mock-up-offer-note { font-size: 9px; color: #475569; }
.tp-mock-up-offer-note b { color: #64748b; }
/* Implementation guide */
.tp-mock-up-impl-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #0f172a; border: 1px solid #1e293b; border-radius: 8px; margin-bottom: 6px; }
.tp-mock-up-impl-week { padding: 3px 8px; background: #1e293b; border-radius: 5px; font-size: 10px; font-weight: normal; color: #94a3b8; white-space: nowrap; flex-shrink: 0; }
.tp-mock-up-impl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tp-mock-up-impl-title { font-size: 12px; font-weight: normal; color: #F1F5F9; flex: 1; }
.tp-mock-up-impl-chevron { color: #334155; font-size: 12px; }

/* ── Blog Posts (content-creator blog mode) ── */
.tp-mock-bp-wrap { background: #0D1117; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-bp-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #161B22; border-bottom: 1px solid #30363D; }
.tp-mock-bp-header-icon { width: 36px; height: 36px; background: #238636; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.tp-mock-bp-header-info { flex: 1; }
.tp-mock-bp-header-title { font-size: 15px; font-weight: normal; color: #E6EDF3; }
.tp-mock-bp-header-sub { font-size: 12px; color: #8B949E; margin-top: 2px; }
.tp-mock-bp-dl-btns { display: flex; gap: 8px; flex-shrink: 0; }
.tp-mock-bp-dl-btn { display: flex; align-items: center; gap: 6px; background: #238636; color: #fff; border-radius: 6px; padding: 7px 14px; font-size: 12px; font-weight: normal; cursor: default; white-space: nowrap; }
.tp-mock-bp-tabs { display: flex; gap: 8px; padding: 14px 20px; background: #161B22; border-bottom: 1px solid #30363D; flex-wrap: wrap; }
.tp-mock-bp-tab { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; cursor: default; border: 1px solid #30363D; color: #8B949E; background: transparent; }
.tp-mock-bp-tab.active { background: #238636; border-color: #238636; color: #fff; }
.tp-mock-bp-tab-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tp-mock-bp-tab-dot.green { background: #3FB950; }
.tp-mock-bp-tab-dot.teal { background: #39D353; }
.tp-mock-bp-tab-dot.orange { background: #E3B341; }
.tp-mock-bp-tab-min { font-size: 11px; opacity: .8; }
.tp-mock-bp-body { display: flex; gap: 16px; padding: 20px; }
.tp-mock-bp-main { flex: 1; min-width: 0; }
.tp-mock-bp-sidebar { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.tp-mock-bp-type-badge { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 11px; font-weight: normal; letter-spacing: .08em; background: linear-gradient(135deg,#6366F1,#8B5CF6); color: #fff; margin-bottom: 12px; text-transform: uppercase; }
.tp-mock-bp-post-title { font-size: 17px; font-weight: normal; color: #E6EDF3; line-height: 1.4; margin-bottom: 12px; }
.tp-mock-bp-meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tp-mock-bp-meta-pill { background: #21262D; border: 1px solid #30363D; color: #8B949E; padding: 3px 10px; border-radius: 20px; font-size: 12px; }
.tp-mock-bp-sec-label { font-size: 11px; font-weight: normal; letter-spacing: .08em; color: #8B949E; text-transform: uppercase; margin-bottom: 8px; margin-top: 16px; border-top: 1px solid #21262D; padding-top: 14px; }
.tp-mock-bp-sec-label:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.tp-mock-bp-meta-desc { background: rgba(35,134,54,.1); border: 1px solid rgba(35,134,54,.35); border-radius: 8px; padding: 14px; color: #3FB950; font-size: 13px; line-height: 1.6; margin-bottom: 4px; }
.tp-mock-bp-kw-pill { display: inline-block; background: #21262D; border: 1px solid #30363D; color: #E6EDF3; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.tp-mock-bp-intro-text { font-size: 13px; color: #8B949E; line-height: 1.6; margin-bottom: 4px; }
.tp-mock-bp-sections-label { font-size: 11px; font-weight: normal; letter-spacing: .08em; color: #8B949E; text-transform: uppercase; margin-bottom: 10px; margin-top: 16px; }
.tp-mock-bp-accordion { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.tp-mock-bp-acc-item { background: #161B22; border: 1px solid #30363D; border-radius: 8px; overflow: hidden; }
.tp-mock-bp-acc-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 13px; font-weight: 500; color: #E6EDF3; cursor: default; gap: 10px; }
.tp-mock-bp-acc-chevron { color: #8B949E; font-size: 13px; flex-shrink: 0; }
.tp-mock-bp-acc-body { padding: 0 16px 14px; font-size: 12.5px; color: #8B949E; line-height: 1.6; }
.tp-mock-bp-acc-body p { margin: 0 0 8px; }
.tp-mock-bp-acc-body p:last-child { margin-bottom: 0; }
.tp-mock-bp-acc-body strong { color: #C9D1D9; }
.tp-mock-bp-conclusion { background: rgba(35,134,54,.1); border: 1px solid rgba(35,134,54,.3); border-radius: 8px; padding: 14px; color: #3FB950; font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.tp-mock-bp-copy-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; background: #21262D; border: 1px solid #30363D; border-radius: 6px; color: #8B949E; font-size: 12px; cursor: default; }
.tp-mock-bp-side-card { background: #161B22; border: 1px solid #30363D; border-radius: 10px; padding: 16px; }
.tp-mock-bp-side-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.tp-mock-bp-side-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.tp-mock-bp-side-icon.green { background: rgba(35,134,54,.2); color: #3FB950; border: 1px solid rgba(35,134,54,.4); }
.tp-mock-bp-side-icon.yellow { background: rgba(227,179,65,.2); color: #E3B341; border: 1px solid rgba(227,179,65,.4); }
.tp-mock-bp-side-card-title { font-size: 14px; font-weight: normal; color: #E6EDF3; }
.tp-mock-bp-checklist { display: flex; flex-direction: column; gap: 9px; }
.tp-mock-bp-check-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #8B949E; line-height: 1.4; }
.tp-mock-bp-checkbox { width: 14px; height: 14px; border: 1px solid #30363D; border-radius: 3px; flex-shrink: 0; margin-top: 1px; background: #0D1117; }
.tp-mock-bp-tips { display: flex; flex-direction: column; gap: 8px; }
.tp-mock-bp-tip { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #8B949E; line-height: 1.4; }
.tp-mock-bp-tip-dot { width: 6px; height: 6px; border-radius: 50%; background: #3FB950; flex-shrink: 0; margin-top: 4px; }
.tp-mock-bp-tag-header { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.tp-mock-bp-tag-icon { color: #8B949E; font-size: 13px; }
.tp-mock-bp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-mock-bp-tag-chip { background: #21262D; border: 1px solid #30363D; color: #8B949E; padding: 3px 10px; border-radius: 20px; font-size: 12px; }

/* ── Referral Program ── */
.tp-mock-rp-wrap { background: #080D16; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-rp-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #0D1117; border-bottom: 1px solid #1a2234; }
.tp-mock-rp-topbar-text { font-size: 13px; color: #8B949E; }
.tp-mock-rp-dl-btn { display: flex; align-items: center; gap: 7px; background: #EC4899; color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: normal; cursor: default; }
/* Hero card */
.tp-mock-rp-hero { margin: 20px; background: #0e1322; border: 1px solid #1a2234; border-radius: 12px; padding: 22px 24px; display: flex; gap: 24px; }
.tp-mock-rp-hero-left { flex: 1; }
.tp-mock-rp-type-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: normal; letter-spacing: .08em; background: transparent; border: 1px solid #EC4899; color: #EC4899; text-transform: uppercase; margin-bottom: 14px; }
.tp-mock-rp-hero-title { font-size: 20px; font-weight: normal; color: #F0F6FC; line-height: 1.3; margin-bottom: 10px; }
.tp-mock-rp-hero-desc { font-size: 13px; color: #8B949E; line-height: 1.6; }
.tp-mock-rp-hero-stats { display: flex; gap: 28px; flex-shrink: 0; align-items: center; }
.tp-mock-rp-stat { text-align: center; }
.tp-mock-rp-stat-num { font-size: 22px; font-weight: normal; color: #F0F6FC; line-height: 1.1; }
.tp-mock-rp-stat-lbl { font-size: 11px; color: #8B949E; margin-top: 4px; }
/* Section label */
.tp-mock-rp-section-lbl { font-size: 11px; font-weight: normal; letter-spacing: .1em; color: #8B949E; text-transform: uppercase; padding: 0 20px 10px; }
/* Steps */
.tp-mock-rp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 20px 20px; }
.tp-mock-rp-step { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; padding: 16px; }
.tp-mock-rp-step-num { width: 28px; height: 28px; background: #EC4899; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: normal; margin-bottom: 10px; }
.tp-mock-rp-step-title { font-size: 13px; font-weight: normal; color: #F0F6FC; margin-bottom: 6px; }
.tp-mock-rp-step-desc { font-size: 11.5px; color: #8B949E; line-height: 1.5; }
/* Do's / Don'ts */
.tp-mock-rp-dos-donts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 20px; }
.tp-mock-rp-card { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; padding: 16px; }
.tp-mock-rp-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; font-weight: normal; color: #F0F6FC; }
.tp-mock-rp-card-header .ok { color: #3FB950; }
.tp-mock-rp-card-header .no { color: #F85149; }
.tp-mock-rp-card-items { display: flex; flex-direction: column; gap: 8px; }
.tp-mock-rp-card-item { font-size: 12.5px; color: #8B949E; line-height: 1.5; }
/* Trigger moments */
.tp-mock-rp-triggers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 20px; }
.tp-mock-rp-trigger { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; padding: 16px; }
.tp-mock-rp-trigger-label { font-size: 10px; font-weight: normal; letter-spacing: .08em; color: #EC4899; text-transform: uppercase; margin-bottom: 4px; }
.tp-mock-rp-trigger-when { font-size: 12px; color: #8B949E; margin-bottom: 12px; }
.tp-mock-rp-trigger-quote { border-left: 3px solid #EC4899; padding-left: 12px; font-size: 12.5px; color: #C9D1D9; line-height: 1.5; font-style: italic; margin-bottom: 10px; }
.tp-mock-rp-trigger-note { font-size: 11px; color: #6e7f9a; }
/* Email templates */
.tp-mock-rp-email-wrap { padding: 0 20px 20px; }
.tp-mock-rp-email-tabs { display: flex; background: #0e1322; border: 1px solid #1a2234; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.tp-mock-rp-email-tab { flex: 1; padding: 10px 14px; font-size: 12px; font-weight: 500; color: #8B949E; cursor: default; text-align: center; border-right: 1px solid #1a2234; }
.tp-mock-rp-email-tab:last-child { border-right: none; }
.tp-mock-rp-email-tab.active { background: #161B22; color: #F0F6FC; }
.tp-mock-rp-email-card { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; padding: 20px; }
.tp-mock-rp-email-subj-lbl { font-size: 10px; font-weight: normal; letter-spacing: .1em; color: #8B949E; text-transform: uppercase; margin-bottom: 6px; }
.tp-mock-rp-email-subject { font-size: 15px; font-weight: normal; color: #F0F6FC; margin-bottom: 4px; }
.tp-mock-rp-email-preview { font-size: 12px; color: #8B949E; margin-bottom: 16px; }
.tp-mock-rp-email-body { font-size: 13px; color: #C9D1D9; line-height: 1.8; border-top: 1px solid #1a2234; padding-top: 14px; }
.tp-mock-rp-email-body p { margin: 0 0 10px; }
.tp-mock-rp-email-body p:last-child { margin-bottom: 0; }

/* ── Email Flows ── */
.tp-mock-ef-wrap { background: #080D16; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-ef-header { padding: 16px 20px; background: #0D1117; border-bottom: 1px solid #1a2234; display: flex; align-items: center; justify-content: space-between; }
.tp-mock-ef-header-left { }
.tp-mock-ef-app-name { font-size: 15px; font-weight: normal; color: #F0F6FC; margin-bottom: 3px; }
.tp-mock-ef-platform { font-size: 12px; color: #8B949E; }
.tp-mock-ef-platform-link { color: #7C3AED; }
.tp-mock-ef-header-stats { display: flex; gap: 20px; font-size: 13px; color: #8B949E; }
.tp-mock-ef-header-stats strong { color: #F0F6FC; font-weight: normal; margin-right: 4px; }
.tp-mock-ef-tabs { display: flex; gap: 8px; padding: 12px 20px; flex-wrap: wrap; background: #0D1117; border-bottom: 1px solid #1a2234; }
.tp-mock-ef-tab { padding: 8px 14px; border-radius: 8px; font-size: 12.5px; cursor: default; border: 1px solid #21262D; background: #161B22; }
.tp-mock-ef-tab.active { border-color: rgba(124,58,237,.5); background: rgba(124,58,237,.12); }
.tp-mock-ef-tab-name { font-weight: normal; color: #C9D1D9; margin-bottom: 2px; }
.tp-mock-ef-tab.active .tp-mock-ef-tab-name { color: #A78BFA; }
.tp-mock-ef-tab-meta { font-size: 11px; color: #8B949E; }
.tp-mock-ef-tab.active .tp-mock-ef-tab-meta { color: #7C3AED; }
.tp-mock-ef-flow-header { margin: 16px 20px 0; padding: 14px 18px; background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; }
.tp-mock-ef-flow-name { font-size: 15px; font-weight: normal; color: #F0F6FC; margin-bottom: 8px; }
.tp-mock-ef-flow-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 12px; color: #8B949E; }
.tp-mock-ef-flow-meta strong { color: #F0F6FC; font-weight: normal; }
.tp-mock-ef-steps { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 0; }
.tp-mock-ef-step-row { display: flex; gap: 14px; }
.tp-mock-ef-step-tl { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 28px; }
.tp-mock-ef-step-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.45); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: normal; color: #A78BFA; flex-shrink: 0; }
.tp-mock-ef-step-line { flex: 1; width: 2px; background: rgba(124,58,237,.2); min-height: 10px; margin: 2px 0; }
.tp-mock-ef-step-row:last-child .tp-mock-ef-step-line { display: none; }
.tp-mock-ef-step-card { flex: 1; background: #0e1322; border: 1px solid #1a2234; border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
.tp-mock-ef-step-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 11px 14px; }
.tp-mock-ef-step-info { }
.tp-mock-ef-step-title { font-size: 13px; font-weight: normal; color: #F0F6FC; margin-bottom: 3px; }
.tp-mock-ef-step-send { font-size: 12px; color: #7C3AED; font-weight: 500; }
.tp-mock-ef-preview-btn { padding: 4px 10px; border-radius: 5px; border: 1px solid #1a2234; background: #161B22; color: #8B949E; font-size: 11px; cursor: default; flex-shrink: 0; margin-top: 1px; }
.tp-mock-ef-email { border-top: 1px solid #1a2234; }
.tp-mock-ef-email-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 14px; }
.tp-mock-ef-email-row + .tp-mock-ef-email-row { border-top: 1px solid rgba(26,34,52,.8); }
.tp-mock-ef-lbl { font-size: 10px; font-weight: normal; letter-spacing: .08em; color: #8B949E; text-transform: uppercase; flex-shrink: 0; min-width: 52px; }
.tp-mock-ef-subject { font-size: 12.5px; font-weight: 500; color: #F0F6FC; }
.tp-mock-ef-preview { font-size: 12px; color: #8B949E; font-style: italic; }

/* ── Growth Metrics ── */
.tp-mock-gm-wrap { background: #080D16; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-gm-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg,#0d2b1a,#0a1f14); border-bottom: 1px solid #0f3a22; }
.tp-mock-gm-hdr-icon { width: 38px; height: 38px; background: #22C55E; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: normal; flex-shrink: 0; }
.tp-mock-gm-hdr-info { flex: 1; }
.tp-mock-gm-hdr-title { font-size: 14px; font-weight: normal; color: #F0F6FC; }
.tp-mock-gm-hdr-sub { font-size: 12px; color: #86EFAC; margin-top: 2px; }
.tp-mock-gm-hdr-btns { display: flex; gap: 8px; flex-shrink: 0; }
.tp-mock-gm-dl-btn { display: flex; align-items: center; gap: 6px; background: #22C55E; color: #fff; border-radius: 7px; padding: 8px 16px; font-size: 12px; font-weight: normal; cursor: default; white-space: nowrap; }
/* Score card */
.tp-mock-gm-score-card { margin: 16px 20px; background: #0e1322; border: 1px solid #1a2234; border-radius: 12px; padding: 20px 24px; display: flex; align-items: center; gap: 24px; }
.tp-mock-gm-ring { position: relative; flex-shrink: 0; }
.tp-mock-gm-ring svg { display: block; }
.tp-mock-gm-ring-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.tp-mock-gm-grade { font-size: 22px; font-weight: normal; color: #38BDF8; line-height: 1; }
.tp-mock-gm-ring-score { font-size: 11px; color: #8B949E; margin-top: 2px; }
.tp-mock-gm-score-info { flex: 1; }
.tp-mock-gm-score-title { font-size: 16px; font-weight: normal; color: #F0F6FC; margin-bottom: 4px; }
.tp-mock-gm-score-sub { font-size: 12px; color: #8B949E; margin-bottom: 14px; }
.tp-mock-gm-stats-row { display: flex; gap: 28px; flex-wrap: wrap; }
.tp-mock-gm-stat-num { font-size: 22px; font-weight: normal; line-height: 1; }
.tp-mock-gm-stat-num.orange { color: #F59E0B; }
.tp-mock-gm-stat-num.blue { color: #38BDF8; }
.tp-mock-gm-stat-lbl { font-size: 10px; font-weight: normal; letter-spacing: .08em; color: #8B949E; text-transform: uppercase; margin-top: 3px; }
/* Wins / Issues */
.tp-mock-gm-wi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 20px 16px; }
.tp-mock-gm-wi-card { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; padding: 16px; }
.tp-mock-gm-wi-lbl { font-size: 10px; font-weight: normal; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.tp-mock-gm-wi-lbl.green { color: #22C55E; }
.tp-mock-gm-wi-lbl.red { color: #EF4444; }
.tp-mock-gm-wi-items { display: flex; flex-direction: column; gap: 0; }
.tp-mock-gm-wi-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #1a2234; font-size: 12.5px; color: #C9D1D9; }
.tp-mock-gm-wi-item:last-child { border-bottom: none; }
.tp-mock-gm-wi-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tp-mock-gm-wi-dot.green { background: #22C55E; }
.tp-mock-gm-wi-dot.red { background: #EF4444; }
/* Section cards */
.tp-mock-gm-sections { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.tp-mock-gm-sec { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; overflow: hidden; }
.tp-mock-gm-sec-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 8px; }
.tp-mock-gm-sec-title { font-size: 15px; font-weight: normal; color: #F0F6FC; }
.tp-mock-gm-sec-score { font-size: 16px; font-weight: normal; }
.tp-mock-gm-sec-score .denom { font-size: 13px; color: #8B949E; font-weight: 400; }
.tp-mock-gm-sec-score.green { color: #22C55E; }
.tp-mock-gm-sec-score.red { color: #EF4444; }
.tp-mock-gm-progress { margin: 0 18px 14px; height: 5px; background: #1a2234; border-radius: 3px; overflow: hidden; }
.tp-mock-gm-bar { height: 100%; border-radius: 3px; }
.tp-mock-gm-bar.green { background: #22C55E; }
.tp-mock-gm-bar.red { background: #EF4444; }
.tp-mock-gm-sec-body { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #1a2234; }
.tp-mock-gm-sec-col { padding: 14px 18px; }
.tp-mock-gm-sec-col + .tp-mock-gm-sec-col { border-left: 1px solid #1a2234; }
.tp-mock-gm-col-lbl { font-size: 10px; font-weight: normal; letter-spacing: .08em; color: #8B949E; text-transform: uppercase; margin-bottom: 10px; }
.tp-mock-gm-metric-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #1a2234; font-size: 12.5px; }
.tp-mock-gm-metric-row:last-child { border-bottom: none; }
.tp-mock-gm-metric-key { color: #C9D1D9; }
.tp-mock-gm-metric-val { font-weight: 500; }
.tp-mock-gm-metric-val.green { color: #22C55E; }
.tp-mock-gm-metric-val.red { color: #EF4444; }
.tp-mock-gm-metric-val.blue { color: #38BDF8; }
.tp-mock-gm-recs { display: flex; flex-direction: column; gap: 8px; }
.tp-mock-gm-rec { font-size: 12px; color: #8B949E; line-height: 1.5; padding-bottom: 8px; border-bottom: 1px dashed #1a2234; }
.tp-mock-gm-rec:last-child { border-bottom: none; padding-bottom: 0; }

/* ── Psychology Audit ── */
.tp-mock-pa-wrap { background: #080D16; border-radius: 14px; overflow: hidden; font-family: inherit; }
.tp-mock-pa-topbar { display: flex; justify-content: flex-end; padding: 12px 20px; background: #080D16; }
.tp-mock-pa-dl-btn { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #22C55E; color: #22C55E; border-radius: 8px; padding: 8px 16px; font-size: 12px; font-weight: normal; cursor: default; }
/* Score card */
.tp-mock-pa-score-card { margin: 0 20px 20px; background: #0e1322; border: 1px solid #1a2234; border-radius: 12px; padding: 22px 28px; display: flex; align-items: center; gap: 24px; }
.tp-mock-pa-ring { position: relative; flex-shrink: 0; }
.tp-mock-pa-ring svg { display: block; }
.tp-mock-pa-ring-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.tp-mock-pa-ring-num { font-size: 26px; font-weight: normal; color: #F0F6FC; line-height: 1; }
.tp-mock-pa-ring-denom { font-size: 12px; color: #8B949E; }
.tp-mock-pa-score-info { flex: 1; }
.tp-mock-pa-grade { font-size: 36px; font-weight: normal; color: #F0F6FC; line-height: 1; margin-bottom: 6px; }
.tp-mock-pa-grade-sub { font-size: 14px; color: #8B949E; margin-bottom: 6px; }
.tp-mock-pa-url { font-size: 12px; color: #8B949E; }
.tp-mock-pa-counts { display: flex; gap: 28px; text-align: center; flex-shrink: 0; }
.tp-mock-pa-count-num { font-size: 24px; font-weight: normal; color: #F0F6FC; line-height: 1; }
.tp-mock-pa-count-lbl { font-size: 10px; font-weight: normal; letter-spacing: .08em; color: #8B949E; text-transform: uppercase; margin-top: 4px; }
/* Section label */
.tp-mock-pa-sec-lbl { font-size: 11px; font-weight: normal; letter-spacing: .1em; color: #8B949E; text-transform: uppercase; padding: 0 20px 12px; }
/* Quick wins grid */
.tp-mock-pa-qw-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 20px 20px; }
.tp-mock-pa-qw-card { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; }
.tp-mock-pa-qw-badge { font-size: 10px; font-weight: normal; letter-spacing: .08em; color: #8B949E; text-transform: uppercase; margin-bottom: 8px; }
.tp-mock-pa-qw-title { font-size: 14px; font-weight: normal; color: #F0F6FC; margin-bottom: 8px; }
.tp-mock-pa-qw-desc { font-size: 12.5px; color: #8B949E; line-height: 1.5; flex: 1; margin-bottom: 10px; }
.tp-mock-pa-qw-principle { font-size: 11px; color: #6e7f9a; }
/* Dimensions grid */
.tp-mock-pa-dims { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 20px 20px; }
.tp-mock-pa-dim-card { background: #0e1322; border: 1px solid #1a2234; border-radius: 10px; padding: 16px; }
.tp-mock-pa-dim-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tp-mock-pa-dim-title { font-size: 14px; font-weight: normal; color: #F0F6FC; }
.tp-mock-pa-dim-pill { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: normal; white-space: nowrap; flex-shrink: 0; }
.tp-mock-pa-dim-pill.green { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.35); color: #22C55E; }
.tp-mock-pa-dim-pill.orange { background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.35); color: #F59E0B; }
.tp-mock-pa-dim-pill.red { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.35); color: #EF4444; }
.tp-mock-pa-dim-pill.gray { background: rgba(107,114,128,.15); border: 1px solid rgba(107,114,128,.35); color: #9CA3AF; }
.tp-mock-pa-dim-sub { font-size: 11px; color: #6366F1; margin-bottom: 10px; }
.tp-mock-pa-dim-bar { height: 4px; background: #1a2234; border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.tp-mock-pa-bar-fill { height: 100%; border-radius: 3px; }
.tp-mock-pa-bar-fill.green { background: #22C55E; }
.tp-mock-pa-bar-fill.orange { background: #F59E0B; }
.tp-mock-pa-bar-fill.red { background: #EF4444; }
.tp-mock-pa-bar-fill.gray { background: #374151; }
.tp-mock-pa-dim-note { font-size: 12px; color: #8B949E; line-height: 1.5; }
.tp-mock-pa-signals { display: flex; flex-direction: column; gap: 8px; }
.tp-mock-pa-signal { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #C9D1D9; line-height: 1.4; padding-bottom: 8px; border-bottom: 1px solid #1a2234; }
.tp-mock-pa-signal:last-child { border-bottom: none; padding-bottom: 0; }
.tp-mock-pa-sig-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.tp-mock-pa-sig-dot.green { background: #22C55E; }
.tp-mock-pa-sig-dot.red { background: #EF4444; }

/* Content Creator mode strip */
.tp-mock-cc-mode-strip { display: flex; background: #161B22; border-bottom: 1px solid #30363D; }
.tp-mock-cc-mode-btn { padding: 11px 20px; font-size: 13px; font-weight: 500; color: #8B949E; cursor: default; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 7px; }
.tp-mock-cc-mode-btn.active { color: #E6EDF3; border-bottom-color: #3FB950; }

/* What You Get */
.tp-wyg-section { background: #0A0F1C; border-top: 1px solid #1E293B; padding: 72px 0; }
.tp-wyg-header { text-align: center; margin-bottom: 40px; }
.tp-wyg-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #00FF88; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.2);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.tp-wyg-section .tp-section-title { font-size: 28px; font-weight: normal; letter-spacing: -.02em; margin-bottom: 10px; }
.tp-wyg-section .tp-section-sub { font-size: 15px; color: #64748B; margin-bottom: 0; }
.tp-wyg-list { list-style: none; margin: 28px auto 0; max-width: 520px; display: flex; flex-direction: column; gap: 12px; }
.tp-wyg-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #CBD5E1; line-height: 1.5; }
.tp-wyg-check { color: var(--accent, #00FF88); flex-shrink: 0; margin-top: 1px; }
.tp-wyg-cta { display: table; margin: 32px auto 0; background: #00FF88; color: #0A0F1C !important; font-size: 14px; font-weight: normal; padding: 12px 28px; border-radius: 10px; text-decoration: none; transition: background .18s, transform .18s; }
.tp-wyg-cta:hover { background: #00e67a; color: #0A0F1C !important; transform: translateY(-2px); opacity: 1; }

/* FAQ Accordion */
.tp-faq-section { background: #0A0F1C; padding: 64px 0; border-top: 1px solid #1E293B; }
.tp-faq-header { text-align: center; margin-bottom: 40px; }
.tp-faq-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #00FF88; background: rgba(0,255,136,.08); border: 1px solid rgba(0,255,136,.2);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px;
}
.tp-faq-section .tp-section-title { font-size: 28px; font-weight: normal; letter-spacing: -.02em; margin-bottom: 10px; }
.tp-faq-section .tp-section-sub { font-size: 15px; color: #64748B; margin-bottom: 0; }
.tp-faq-list { display: flex; flex-direction: column; gap: 12px; }
.tp-faq-item { background: #0f172a; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.tp-faq-item:hover { border-color: rgba(0,255,136,.25); }
.tp-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: normal; color: #F1F5F9; font-family: inherit; text-align: left; transition: background .15s; line-height: 1.4; }
.tp-faq-q:hover { background: rgba(255,255,255,.05); }
.tp-faq-arrow { flex-shrink: 0; width: 20px; height: 20px; color: #00FF88; transition: transform .25s ease; }
.tp-faq-a { padding: 0 20px 18px; font-size: 14px; color: #94A3B8; line-height: 1.75; }

/* Q Blocks */
.tp-qblocks-section { background: #0A0F1C; }
.tp-qblock { margin-bottom: 48px; }
.tp-qblock:last-child { margin-bottom: 0; }
.tp-qblock-h2 { font-size: 20px; font-weight: normal; color: #F1F5F9; margin-bottom: 14px; letter-spacing: -.01em; }
.tp-qblock-answer { font-size: 15px; color: #94A3B8; line-height: 1.8; }

/* CTA Section */
.tp-cta-section { padding: 80px 24px; background: linear-gradient(180deg, #0D1220 0%, #0A0F1C 100%); border-top: 1px solid #1E293B; }
.tp-cta-heading { font-size: 28px; font-weight: normal; color: #F1F5F9; margin-bottom: 10px; letter-spacing: -.01em; }
.tp-cta-sub { font-size: 14px; color: #64748B; margin-bottom: 28px; }
.tp-cta-btn { display: inline-block; background: #00FF88; color: #0A0F1C !important; font-size: 15px; font-weight: normal; padding: 14px 32px; border-radius: 12px; text-decoration: none; transition: background .18s, transform .18s; }
.tp-cta-btn:hover { background: #00e67a; color: #0A0F1C !important; transform: translateY(-2px); opacity: 1; }

/* ── Shared Footer — redesigned ── */
footer {
  background: linear-gradient(180deg, #070B14 0%, #04070F 100%);
  padding: 0; position: relative; overflow: hidden;
}
footer::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,255,136,.15) 20%, rgba(0,255,136,.45) 50%, rgba(0,255,136,.15) 80%, transparent 100%);
}
footer::after { content: none; }

.footer-inner { max-width: 1120px; margin: 0 auto; padding: 72px 40px 0; position: relative; z-index: 1; }

.footer-grid { display: grid; grid-template-columns: 1.9fr 1fr 1.1fr; gap: 64px; padding-bottom: 64px; align-items: start; }
.footer-col { display: flex; flex-direction: column; }

/* Brand col */
.footer-logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; margin-bottom: 18px; }
.footer-logo-icon { width: 46px; height: 46px; border-radius: 12px; object-fit: contain; display: block; flex-shrink: 0; }
.footer-logo-text { font-size: 19px; font-weight: normal; color: #00FF88; letter-spacing: -.5px; line-height: 1; }
.footer-logo-sub { font-size: 11px; color: rgba(255,255,255,.3); font-weight: 500; margin-top: 3px; letter-spacing: .02em; }
.footer-tagline { font-size: 13.5px; color: rgba(255,255,255,.45); line-height: 1.8; max-width: 320px; margin: 0 0 22px; }
.footer-tagline strong { color: rgba(255,255,255,.75); font-weight: normal; }

/* Pill badges */
.footer-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-stat-sep { display: none; }
.footer-stat-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: normal; color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  padding: 5px 11px; border-radius: 20px;
  transition: border-color .15s, color .15s;
}
.footer-stat-item:hover { border-color: rgba(0,255,136,.3); color: rgba(255,255,255,.7); }
.footer-stat-dot { width: 5px; height: 5px; border-radius: 50%; background: #00FF88; flex-shrink: 0; }

/* Column titles */
.footer-col-title {
  font-size: 10.5px; font-weight: normal; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin: 0 0 22px;
}

/* Nav links */
.footer-nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-nav-link {
  font-size: 14px; color: rgba(255,255,255,.4); text-decoration: none;
  font-weight: 400; transition: color .15s;
}
.footer-nav-link:hover { color: #00FF88; }

/* Social links — dark card style */
.footer-socials { display: flex; flex-direction: column; gap: 9px; }
.footer-social-link {
  display: flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.5); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  padding: 9px 14px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07);
  transition: background .15s, border-color .15s, color .15s;
}
.footer-social-link:hover {
  background: rgba(0,255,136,.05); border-color: rgba(0,255,136,.25);
  color: #00FF88; transform: none;
}
.footer-social-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.footer-social-icon svg { width: 15px; height: 15px; }
.footer-social-link:hover .footer-social-icon {
  background: rgba(0,255,136,.12); border-color: rgba(0,255,136,.3);
}
.threads-icon-mask {
  width: 15px; height: 15px; display: block;
  background-color: rgba(255,255,255,.7);
  -webkit-mask-image: url('/static/thred1.png'); mask-image: url('/static/thred1.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.footer-social-link:hover .threads-icon-mask { background-color: #00FF88; }

.footer-plans-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: normal; color: #0A0F1C; text-decoration: none; border-radius: 10px; padding: 10px 20px; background: #00FF88; transition: background .15s, transform .15s, box-shadow .15s; margin-top: 8px; width: fit-content; box-shadow: 0 4px 16px rgba(0,255,136,.3); }
.footer-plans-btn:hover { background: #00e67a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,255,136,.45); color: #0A0F1C; }

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 22px 0; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.footer-bottom-links { display: flex; align-items: center; gap: 24px; }
.footer-bottom-link { font-size: 12px; color: rgba(255,255,255,.22); text-decoration: none; font-weight: 500; transition: color .15s; }
.footer-bottom-link:hover { color: #00FF88; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.22); font-weight: 500; }
.footer-copy a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .15s; }
.footer-copy a:hover { color: #00FF88; }

/* Responsive */
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px; } .footer-col-brand { grid-column: 1 / -1; } .footer-tagline { max-width: 100%; } }
@media (max-width: 768px) { .footer-inner { padding: 52px 24px 0; } .footer-bottom { justify-content: center; text-align: center; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-inner { padding: 36px 16px 0; } .footer-tagline { font-size: 13px; } .footer-socials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } }