/* ═══════════════════════════════════════════════
   SNAPPER STUDIO — BRAND SENTIMENT TRACKER
   Tiempos Headline Bold · Geograph Bold/Regular
   #231F20 · #58595B · #773DBD · #A9D273 · #F8FAEC
   ═══════════════════════════════════════════════ */

:root {
  --dark: #231F20;
  --dark-rgb: 35,31,32;
  --grey: #58595B;
  --grey-rgb: 88,89,91;
  --purple: #773DBD;
  --purple-light: #9260D0;
  --purple-dark: #5E2E9A;
  --green: #A9D273;
  --green-dark: #8BBF50;
  --cream: #F8FAEC;
  --white: #FFFFFF;
  --font-display: 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-body: 'Geograph', 'Helvetica Neue', Arial, sans-serif;
  --max-w: 1140px;
  --radius: 10px;
  --radius-lg: 16px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--cream);
  color: var(--dark);
  line-height: 1.72;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}

strong, b { font-weight: 700; }
a { color: var(--purple); text-decoration:none; transition:color .2s; }
a:hover { color: var(--purple-dark); }
img { max-width:100%; display:block; }

/* ─── TYPOGRAPHY ─── */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--dark);
}
h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom:1.25rem; }
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
  margin-bottom: .6rem;
}
h2 em, h1 em { font-style:italic; }
p + p { margin-top:.85rem; }

/* ─── LAYOUT ─── */
.section {
  padding: 5.5rem 2rem;
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-full {
  max-width: none;
  padding: 5.5rem 2rem;
}
.section-full .section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.bg-dark { background: var(--dark); color: var(--white); }
.bg-cream { background: var(--cream); }
.bg-white { background: var(--white); }

.section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: .85rem;
}
.bg-dark .section-label { color: var(--green); }

/* ─── NAV/FOOTER PLACEHOLDERS ─── */
.nav-placeholder, .footer-placeholder {
  background: var(--dark);
  padding: 1.1rem 2rem;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
}

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .8rem 1.8rem;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: all .22s;
  text-decoration: none;
}
.btn-purple { background:var(--purple); color:#fff; }
.btn-purple:hover { background:var(--purple-dark); color:#fff; transform:translateY(-1px); }
.btn-green { background:var(--green); color:var(--dark); }
.btn-green:hover { background:var(--green-dark); transform:translateY(-1px); }
.btn-outline { background:transparent; border:2px solid rgba(255,255,255,.3); color:#fff; }
.btn-outline:hover { border-color:#fff; color:#fff; }
.btn-outline-dark { background:transparent; border:2px solid rgba(35,31,32,.2); color:var(--dark); }
.btn-outline-dark:hover { border-color:var(--dark); }
.btn-white { background:#fff; color:var(--purple); }
.btn-white:hover { background:var(--cream); transform:translateY(-1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  padding: 7rem 2rem 5.5rem;
  overflow: hidden;
  text-align: center;
}
.hero::before {
  content:'';
  position:absolute;
  top:-30%; left:-15%;
  width:130%; height:160%;
  background: radial-gradient(ellipse at 25% 35%, rgba(119,61,189,.12) 0%, transparent 55%),
              radial-gradient(ellipse at 75% 65%, rgba(169,210,115,.08) 0%, transparent 45%);
  pointer-events:none;
}
.hero-inner { position:relative; max-width:820px; margin:0 auto; }
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(169,210,115,.12); border:1px solid rgba(169,210,115,.25);
  padding:.35rem 1.1rem; border-radius:100px;
  font-size:12px; font-weight:700; color:var(--green);
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:2rem;
}
.hero h1 { color:#fff; margin-bottom:1.3rem; }
.hero h1 em { color:var(--green); }
.hero p {
  font-size:1.1rem; color:rgba(255,255,255,.65);
  max-width:580px; margin:0 auto 2.5rem; line-height:1.75;
}
.hero-ctas { display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════
   INTRO CONTENT
   ═══════════════════════════════════════════════ */
.intro-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center;
}
.intro-grid .content p { color:var(--grey); }
.stat-row {
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:1.5rem;
}
.stat-card {
  background:#fff; border-radius:var(--radius); padding:1.4rem;
  border:1px solid rgba(35,31,32,.06);
}
.stat-number {
  font-family:var(--font-display); font-size:2.2rem; font-weight:700;
  color:var(--purple); line-height:1; margin-bottom:.2rem;
}
.stat-label { font-size:13px; color:var(--grey); line-height:1.45; }

/* ═══════════════════════════════════════════════
   PILLARS
   ═══════════════════════════════════════════════ */
.pillars-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.75rem; margin-top:2.5rem;
}
.pillar {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  padding:2.2rem 1.8rem;
  transition:transform .3s, border-color .3s;
}
.pillar:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.15); }
.pillar-icon {
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem; font-size:22px;
}
.pillar:nth-child(1) .pillar-icon { background:rgba(119,61,189,.2); }
.pillar:nth-child(2) .pillar-icon { background:rgba(169,210,115,.2); }
.pillar:nth-child(3) .pillar-icon { background:rgba(119,61,189,.2); }
.pillar p { color:rgba(255,255,255,.6); font-size:14.5px; line-height:1.65; }

/* ═══════════════════════════════════════════════
   TRACKER TOOL
   ═══════════════════════════════════════════════ */
.tool-section {
  background:var(--white); max-width:none; padding:5.5rem 2rem;
  border-top:1px solid rgba(35,31,32,.06);
  border-bottom:1px solid rgba(35,31,32,.06);
}
.tool-section .section-inner { max-width:1060px; margin:0 auto; }
.tool-header { text-align:center; margin-bottom:3rem; }
.tool-header p { max-width:560px; margin:0 auto; color:var(--grey); }

.tracker-app {
  background:var(--cream); border-radius:var(--radius-lg);
  border:1px solid rgba(35,31,32,.08);
  box-shadow:0 12px 40px rgba(35,31,32,.06);
  overflow:hidden;
}
.tracker-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.8rem; background:var(--dark); color:#fff;
  gap:1rem; flex-wrap:wrap;
}
.tracker-toolbar-title {
  font-family:var(--font-body); font-weight:700; font-size:.9rem;
  letter-spacing:.03em;
}
.tracker-body { padding:2rem; }

/* Brand input area */
.brand-input-area {
  display:flex; gap:.75rem; margin-bottom:1.75rem; flex-wrap:wrap; align-items:center;
}
.brand-name-input {
  flex:1; min-width:200px;
  padding:.7rem 1rem; border:2px solid rgba(35,31,32,.12);
  border-radius:6px; font-family:var(--font-body); font-size:14.5px;
  outline:none; transition:border-color .2s; background:#fff;
}
.brand-name-input:focus { border-color:var(--purple); }
.brand-name-input::placeholder { color:rgba(88,89,91,.5); }

/* Brand chips */
.brands-row { display:flex; gap:.6rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.brand-chip {
  display:flex; align-items:center; gap:.4rem;
  padding:.45rem .9rem; border-radius:6px;
  font-weight:700; font-size:13px; cursor:pointer;
  border:2px solid; transition:all .2s; font-family:var(--font-body);
  position:relative;
}
.brand-chip.active { color:#fff; }
.brand-chip:not(.active) { opacity:.55; }
.brand-chip .remove-brand {
  margin-left:.3rem; opacity:.5; cursor:pointer; font-size:15px; font-weight:400;
}
.brand-chip .remove-brand:hover { opacity:1; }

/* Status indicators */
.brand-status {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:11px; font-weight:600; padding:.2rem .6rem;
  border-radius:100px; margin-left:.35rem;
}
.status-researching { background:rgba(119,61,189,.15); color:var(--purple); }
.status-complete { background:rgba(169,210,115,.2); color:var(--green-dark); }
.status-manual { background:rgba(88,89,91,.1); color:var(--grey); }

/* Tabs */
.tracker-tabs {
  display:flex; gap:.3rem; margin-bottom:1.75rem;
  border-bottom:2px solid rgba(35,31,32,.08); padding-bottom:0;
}
.tracker-tab {
  padding:.65rem 1.3rem; font-family:var(--font-body); font-weight:700;
  font-size:13px; cursor:pointer; background:none; border:none;
  color:var(--grey); border-bottom:3px solid transparent;
  margin-bottom:-2px; transition:all .2s;
}
.tracker-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.tracker-tab:hover:not(.active) { color:var(--dark); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Overview scores */
.overview-brand-header {
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1.5rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(35,31,32,.06);
}
.overview-brand-name {
  font-family:var(--font-display); font-weight:700;
  font-size:1.5rem;
}
.overall-score {
  font-family:var(--font-display); font-weight:700;
  font-size:2.4rem; margin-left:auto;
}

.dims-grid {
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:.85rem; margin-bottom:2rem;
}
.dim-card {
  text-align:center; padding:1rem .5rem;
  border-radius:var(--radius); background:#fff;
  border:1px solid rgba(35,31,32,.05);
  transition:all .2s;
}
.dim-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--grey); margin-bottom:.2rem;
}
.dim-score {
  font-family:var(--font-display); font-size:1.85rem;
  font-weight:700; line-height:1;
}
.dim-evidence {
  font-size:10px; color:var(--grey); margin-top:.3rem;
  line-height:1.3; max-height:2.6em; overflow:hidden;
}

/* Charts */
.chart-area {
  display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; margin-bottom:2rem;
}
.chart-box {
  background:#fff; border-radius:var(--radius); padding:1.4rem;
  border:1px solid rgba(35,31,32,.05);
}
.chart-box-title {
  font-family:var(--font-body); font-weight:700;
  font-size:.85rem; margin-bottom:.85rem; color:var(--dark);
}
.chart-canvas-wrap { position:relative; width:100%; aspect-ratio:1; }
.chart-canvas-wrap canvas { width:100%!important; height:100%!important; }
.bar-chart-wrap { height:260px; }
.bar-chart-wrap canvas { width:100%!important; height:100%!important; }

/* Evidence panel */
.evidence-panel {
  background:#fff; border-radius:var(--radius); padding:1.5rem;
  border:1px solid rgba(35,31,32,.05); margin-bottom:1.5rem;
}
.evidence-title {
  font-weight:700; font-size:14px; margin-bottom:.75rem;
  display:flex; align-items:center; gap:.5rem;
}
.evidence-list { list-style:none; }
.evidence-item {
  padding:.6rem 0; border-bottom:1px solid rgba(35,31,32,.04);
  font-size:13.5px; line-height:1.55; color:var(--grey);
}
.evidence-item:last-child { border-bottom:none; }
.evidence-dim {
  font-weight:700; color:var(--dark); font-size:12px;
  text-transform:uppercase; letter-spacing:.04em;
}
.evidence-source {
  font-size:11px; color:var(--purple); margin-top:.15rem;
}

/* Gap table */
.gap-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.gap-table thead th {
  text-align:left; padding:.65rem .85rem; background:var(--dark); color:#fff;
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
}
.gap-table thead th:first-child { border-radius:6px 0 0 0; }
.gap-table thead th:last-child { border-radius:0 6px 0 0; }
.gap-table tbody td {
  padding:.65rem .85rem; border-bottom:1px solid rgba(35,31,32,.05);
  background:#fff;
}
.gap-table tbody tr:hover td { background:var(--cream); }
.gap-positive { color:var(--green-dark); font-weight:700; }
.gap-negative { color:#C0392B; font-weight:700; }
.gap-bar {
  height:7px; border-radius:4px; background:rgba(35,31,32,.06);
  overflow:hidden; width:90px; display:inline-block; vertical-align:middle;
  margin-left:.4rem;
}
.gap-bar-fill { height:100%; border-radius:4px; }

/* Campaign */
.campaign-output {
  background:#fff; border-radius:var(--radius); padding:2rem;
  border:1px solid rgba(35,31,32,.05);
}
.campaign-quote {
  font-family:var(--font-display); font-size:5rem;
  color:var(--purple); opacity:.15; line-height:1;
  margin-bottom:-2rem;
}
.campaign-text {
  font-family:var(--font-display); font-size:1.25rem;
  font-weight:700; line-height:1.45;
}
.campaign-strategy {
  margin-top:1.25rem; padding-top:1.25rem;
  border-top:1px solid rgba(35,31,32,.08);
  font-size:14px; color:var(--grey); line-height:1.7;
}

/* Manual input area */
.manual-area {
  margin-top:1.5rem; background:#fff; border-radius:var(--radius);
  padding:1.5rem; border:1px solid rgba(35,31,32,.05);
}
.manual-area h3 { font-size:14px; }
.manual-textarea {
  width:100%; min-height:100px; padding:.75rem 1rem;
  border:2px solid rgba(35,31,32,.1); border-radius:6px;
  font-family:var(--font-body); font-size:13.5px;
  resize:vertical; outline:none; transition:border-color .2s;
  margin-top:.5rem;
}
.manual-textarea:focus { border-color:var(--purple); }
.manual-textarea::placeholder { color:rgba(88,89,91,.45); }

/* Loading states */
.loading-skeleton {
  background:linear-gradient(90deg, rgba(35,31,32,.04) 25%, rgba(35,31,32,.08) 50%, rgba(35,31,32,.04) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:6px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

.research-progress {
  text-align:center; padding:3rem 2rem;
}
.research-progress .spinner {
  width:36px; height:36px; border:3px solid rgba(35,31,32,.1);
  border-top-color:var(--purple); border-radius:50%;
  animation:spin .8s linear infinite; margin:0 auto 1rem;
}
@keyframes spin { to{transform:rotate(360deg)} }
.research-progress p { color:var(--grey); font-size:14px; }
.research-progress .progress-step {
  font-weight:700; color:var(--dark); font-size:15px;
  margin-bottom:.3rem;
}

/* Empty state */
.empty-state {
  text-align:center; padding:3.5rem 2rem; color:var(--grey);
}
.empty-state-icon { font-size:2.5rem; margin-bottom:.75rem; opacity:.4; }
.empty-state p { font-size:14.5px; max-width:380px; margin:0 auto; }

/* ═══════════════════════════════════════════════
   CONTENT SECTIONS
   ═══════════════════════════════════════════════ */
.content-2col {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:start;
}
.content-2col p { color:var(--grey); }
.content-2col h3 { margin-top:1.75rem; }

.quote-block {
  background:var(--dark); color:#fff;
  border-radius:var(--radius-lg); padding:2.5rem;
  position:relative; overflow:hidden;
}
.quote-block::before {
  content:'"'; font-family:var(--font-display); font-size:7rem;
  color:var(--purple); opacity:.25; position:absolute;
  top:-.5rem; left:1.2rem; line-height:1;
}
.quote-block p {
  font-family:var(--font-display); font-size:1.15rem;
  font-style:italic; line-height:1.6; position:relative; z-index:1;
  color:rgba(255,255,255,.9);
}
.quote-block cite {
  display:block; margin-top:1.2rem; font-style:normal;
  font-family:var(--font-body); font-size:13px;
  color:rgba(255,255,255,.45);
}

/* Steps */
.steps-list { counter-reset:step; margin-top:2.2rem; }
.step-item {
  counter-increment:step;
  display:grid; grid-template-columns:52px 1fr;
  gap:1.25rem; margin-bottom:2.2rem; align-items:start;
}
.step-number {
  font-family:var(--font-display); font-size:2rem; font-weight:700;
  color:var(--green); line-height:1;
}
.step-number::before { content:counter(step); }
.step-item h3 { color:#fff; margin-bottom:.3rem; }
.step-item p { color:rgba(255,255,255,.6); font-size:14.5px; }

/* Emilie callout */
.emilie-callout {
  display:flex; gap:1.75rem; align-items:center;
  background:var(--dark); border-radius:var(--radius-lg);
  padding:2.2rem; margin-top:2.5rem; transition:transform .3s;
}
.emilie-callout:hover { transform:translateY(-2px); }
.emilie-avatar {
  width:70px; height:70px; border-radius:50%;
  background:linear-gradient(135deg, var(--purple) 0%, var(--green) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; flex-shrink:0;
}
.emilie-callout h3 { color:#fff; margin-bottom:.2rem; }
.emilie-callout p { color:rgba(255,255,255,.55); font-size:13.5px; }
.emilie-callout .btn { margin-top:.65rem; font-size:12px; padding:.55rem 1.2rem; }

/* CTA */
.cta-section {
  background:var(--purple); color:#fff;
  max-width:none; padding:5rem 2rem; text-align:center;
}
.cta-section .section-inner { max-width:680px; margin:0 auto; }
.cta-section h2 { color:#fff; }
.cta-section h2 em { color:var(--green); }
.cta-section p { color:rgba(255,255,255,.8); font-size:1.05rem; margin-bottom:2rem; }

/* ─── EXPORT BUTTON ─── */
.export-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 0; margin-top:1.5rem;
  border-top:2px solid rgba(35,31,32,.06);
}
.export-bar p { font-size:13px; color:var(--grey); margin:0; }
.export-bar .btn { flex-shrink:0; }

/* ─── LEAD CAPTURE MODAL ─── */
.lead-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(35,31,32,.55); backdrop-filter:blur(5px);
  z-index:2000; align-items:center; justify-content:center;
}
.lead-overlay.open { display:flex; }
.lead-modal {
  background:#fff; border-radius:var(--radius-lg);
  padding:2.8rem; width:92%; max-width:440px;
  box-shadow:0 30px 80px rgba(35,31,32,.2);
  position:relative;
}
.lead-modal-close {
  position:absolute; top:1rem; right:1.2rem;
  background:none; border:none; font-size:1.4rem;
  cursor:pointer; color:var(--grey); transition:color .2s;
  line-height:1;
}
.lead-modal-close:hover { color:var(--dark); }
.lead-modal h3 {
  font-family:var(--font-display); font-weight:700;
  font-size:1.4rem; margin-bottom:.4rem;
}
.lead-modal .lead-subtitle {
  color:var(--grey); font-size:14px; margin-bottom:1.5rem; line-height:1.55;
}
.lead-input {
  width:100%; padding:.7rem 1rem;
  border:2px solid rgba(35,31,32,.12); border-radius:6px;
  font-family:var(--font-body); font-size:14.5px;
  outline:none; transition:border-color .2s; background:#fff;
  margin-bottom:.75rem;
}
.lead-input:focus { border-color:var(--purple); }
.lead-input::placeholder { color:rgba(88,89,91,.45); }
.lead-consent {
  font-size:12px; color:var(--grey); line-height:1.5;
  margin-top:.5rem; margin-bottom:1.25rem;
}
.lead-consent a { text-decoration:underline; }
.lead-error {
  color:#C0392B; font-size:12.5px; font-weight:600;
  margin-bottom:.75rem; display:none;
}
.lead-success {
  text-align:center; padding:1.5rem 0;
}
.lead-success-icon {
  font-size:2.5rem; margin-bottom:.75rem;
}
.lead-success h3 {
  font-family:var(--font-display); font-weight:700;
  font-size:1.3rem; margin-bottom:.4rem;
}
.lead-success p {
  color:var(--grey); font-size:14px;
}

/* ─── RESPONSIVE ─── */
@media(max-width:900px) {
  .intro-grid, .content-2col, .chart-area { grid-template-columns:1fr; }
  .pillars-grid { grid-template-columns:1fr; }
  .dims-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:600px) {
  .hero { padding:4.5rem 1.5rem 3.5rem; }
  .section, .section-full, .tool-section, .cta-section { padding:3.5rem 1.5rem; }
  .tracker-body { padding:1.25rem; }
  .dims-grid { grid-template-columns:repeat(2,1fr); }
  .brands-row { gap:.4rem; }
  .brand-chip { font-size:11.5px; padding:.35rem .7rem; }
  .emilie-callout { flex-direction:column; text-align:center; }
  .step-item { grid-template-columns:40px 1fr; }
}