/* ============================================================
   Nodens Design System — single source of truth
   Raio-X de Receita. Derived from report.html + nodensgrowth.com.
   Load this BEFORE any page-local <style> so local rules can
   still override when a page genuinely needs to.
   ============================================================ */

:root{
  /* brand — Vault DS v3 canonical (nodensdesignsystem.vercel.app) */
  --navy:#1A2744; --navy-800:#243557; --navy-700:#141d33; --navy-deep:#11192B;
  --teal:#0D7377; --teal-700:#0A5A5D; --teal-light:#E0F2F4;
  --off:#F8F6F2; --offwhite:#F8F6F2; --warm-mid:#EDE9E2; --paper:#FFFFFF;

  /* text — canônico DS v3: warm grays (não cool) */
  --muted:#6B6560; --text-muted:#6B6560; --label-ink:#5A544E;
  --line:#E8E4DE; --ink-line:#E8E4DE;

  /* navy ramp */
  --navy-50:#EEF1F7; --navy-100:#D8DEEB; --navy-200:#AEB9D1;
  --navy-300:#7D8CAE; --navy-600:#253760;

  /* teal ramp */
  --teal-50:#E0F2F4; --teal-200:#85CBD0; --teal-600:#0D7377;
  /* interactive states */
  --teal-hover:#0B6064; --teal-active:#094F53;

  /* warm neutral ramp */
  --warm-50:#F8F6F2; --warm-100:#F1EEE8; --warm-300:#D6D1C8;
  --warm-600:#6B6560; --warm-700:#4D4844;

  /* semantic */
  --warn:#b4690e; --warn-bg:#fbf0dc;
  --bad:#a3331f;  --bad-bg:#f7e3de;
  --good:#0A5A5D; --good-bg:#e6f4f4;
  --danger:var(--bad); --warning-soft:var(--warn-bg);

  /* connected / done tint */
  --ok-border:#bfe0e0; --ok-bg:#f4fbfb;

  /* channels */
  --wa:#075e54; --wa-light:#d9fdd3; --wa-out:#dcf3ec; --wa-out-txt:#0d4f43;
  --ig:#3730a3; --ig-light:#d1e4ff; --ig-out:#e8edff; --ig-out-txt:#312e81;

  /* type */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --font-display:var(--serif);

  /* type scale — px canônico (11/13/15/17) */
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px;
  --fs-h4:1.125rem; --fs-h2:2rem;
  --font-body:var(--sans);

  /* shape — conjunto canônico {0,2,6,10,16,pill} */
  --r-btn:6px; --r-card:10px; --r-pill:9999px;
  --r-xs:2px; --r-sm:6px; --r-md:10px; --r-lg:16px;

  /* depth */
  --shadow-sm:0 1px 2px rgba(26,39,68,.05);
  --shadow-card:0 1px 2px rgba(26,39,68,.04), 0 10px 30px rgba(26,39,68,.07);
  --shadow-lift:0 2px 6px rgba(26,39,68,.06), 0 18px 48px rgba(26,39,68,.10);
  --sh-sm:0 1px 2px rgba(26,39,68,.05),0 1px 3px rgba(26,39,68,.06);
  --sh-md:0 4px 8px -2px rgba(26,39,68,.08),0 2px 4px -2px rgba(26,39,68,.06);
  --sh-lg:0 16px 32px -8px rgba(26,39,68,.14),0 4px 12px -4px rgba(26,39,68,.06);
  --sh-pop:rgba(26,39,68,.06) 0 0 0 1px,rgba(26,39,68,.08) 0 3px 6px,rgba(26,39,68,.14) 0 9px 24px;
  --sh-modal:0 0 0 1px rgba(26,39,68,.05),0 16px 70px rgba(26,39,68,.20);
  --sh-toast:0 4px 12px rgba(26,39,68,.10);

  /* spacing scale (4px base) */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
  --s-12:48px; --s-16:64px; --gutter:32px;

  /* motion — escala canônica */
  --m-100:100ms; --m-160:160ms; --m-240:240ms; --m-400:400ms;
  --t-fast:var(--m-160);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.3,0,.8,.15);
  --ease-move:cubic-bezier(.45,.05,.55,.95);

  /* controle de borda / foco */
  --line-control:#C9CCD4; --line-control-hover:#949BA8;
  --focus:#14919A;

  /* data-viz categórica */
  --dv-1:#0D7377; --dv-2:#446990; --dv-3:#6E8F68; --dv-4:#B08D3E; --dv-5:#9C5B45; --dv-6:#8C8275;

  /* data-viz sequential (Raio-X heat scale) + light teal on navy */
  --seq-1:#E9F4F3;--seq-2:#BBDCDA;--seq-3:#6FAFB2;--seq-4:#3D7088;--teal-on-navy:#7FD4D4;

  --maxw:980px;
}

*{box-sizing:border-box}

/* ---- focus-visible (WCAG 2.4.7) — consumes reserved --focus token ---- */
a:focus-visible,button:focus-visible,.btn:focus-visible,.tab:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm);
}

/* motion is JS-gated: with no JS, everything is visible (no .js class set) */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
}

body{
  margin:0;background:var(--off);color:var(--navy);
  font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--maxw);margin:0 auto}

/* ---- wordmark ---- */
.mark{font-family:var(--serif);font-weight:520;font-size:20px;letter-spacing:-.01em;color:var(--navy)}
.mark .dot{color:var(--teal)}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between}
.actions{display:flex;gap:10px}

/* ---- section label (mono, uppercase, teal) ---- */
.sec{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);
}
/* ---- eyebrow — Vault DS v3 (sans) ---- */
.eyebrow{
  font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-600);margin:0 0 var(--s-2);
}
.clinic{
  font-family:var(--mono);font-size:12px;color:var(--label-ink);
  text-transform:uppercase;letter-spacing:.1em;
}

/* ---- display headings ---- */
h1{
  font-family:var(--serif);font-weight:460;
  font-size:clamp(26px,3.4vw,38px);line-height:1.12;margin:0 0 8px;
  font-variation-settings:"opsz" 96,"SOFT" 40;letter-spacing:-.01em;
}
h1 em{color:var(--teal-700);font-style:italic}
.display{
  font-family:var(--serif);font-weight:420;
  font-size:clamp(40px,6vw,84px);line-height:1.02;letter-spacing:-.02em;
  font-variation-settings:"opsz" 144;
}
.display em{font-style:italic;color:var(--teal)}
.sub{color:var(--muted);font-size:14px;margin:0 0 6px;max-width:680px}

/* ============================================================
   Buttons — teal = action (brand), navy = text/structure only
   ============================================================ */
.btn{
  font-family:var(--sans);font-size:13px;font-weight:600;
  border-radius:var(--r-btn);padding:9px 16px;
  border:1px solid var(--line);background:var(--paper);color:var(--navy);
  cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;line-height:1;
}
.btn:hover{border-color:#d4cec4;transform:translateY(-1px)}
.btn.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn.primary:hover{background:var(--teal-hover);border-color:var(--teal-hover)}
.btn.ghost{background:transparent}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;transform:none}

/* page-level forward CTA — the website signature: teal pill + arrow */
.btn.cta{
  background:var(--teal);color:#fff;border-color:var(--teal);
  border-radius:var(--r-pill);padding:12px 22px;font-size:14px;
  box-shadow:var(--shadow-sm);
}
.btn.cta:hover{background:var(--teal-hover);border-color:var(--teal-hover);box-shadow:var(--shadow-card)}
.btn.cta::after{content:"→";font-size:15px;line-height:1;transition:transform .15s ease}
.btn.cta:hover::after{transform:translateX(3px)}
.btn.cta.lg{padding:15px 28px;font-size:15px}

/* ---- tabs ---- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tab{font-family:var(--sans);font-size:14px;font-weight:600;padding:12px 18px;border:none;background:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--navy);border-bottom-color:var(--teal)}
.tab .badge{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--warm-mid);color:var(--muted);padding:2px 6px;border-radius:10px;margin-left:7px;vertical-align:middle}
.tab .badge.live{background:var(--teal-light);color:var(--teal-700)}

/* ============================================================
   Cards & metrics
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;transition:box-shadow var(--m-160) var(--ease-out),transform var(--m-160) var(--ease-out)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.card.float{box-shadow:var(--shadow-card);border-color:transparent}
.card.flat{box-shadow:var(--shadow-sm)}.card.flat:hover{transform:none;box-shadow:var(--shadow-sm)}
.chart:hover svg{filter:brightness(1.03) saturate(1.06);transition:filter 200ms ease}
.card .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label-ink)}
.card .val{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.1;margin-top:6px}
.card .val-sm{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.1;margin-top:6px}
.val .u{font-size:15px;color:var(--muted);font-family:var(--sans);font-weight:500}
.card .meta{font-size:12px;color:var(--muted);margin-top:2px}

/* ---- status pills ---- */
.pill{display:inline-block;font-family:var(--mono);font-size:11px;padding:2px 7px;border-radius:20px;margin-top:8px}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.good{background:var(--good-bg);color:var(--good)}

/* ============================================================
   Stat band — big serif numbers + mono labels, hairline dividers
   (the website's signature proof row)
   ============================================================ */
.stat-band{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);overflow:hidden}
.stat-band .stat{padding:18px 20px;border-left:1px solid var(--line)}
.stat-band .stat:first-child{border-left:none}
.stat .s-val{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1;letter-spacing:-.01em}
.stat .s-val em{font-style:italic;color:var(--teal-700)}
.stat .s-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label-ink);margin-top:8px}

/* ============================================================
   Sections — alternating cream / navy full-bleed
   ============================================================ */
.section{padding:clamp(40px,7vw,88px) 0}
.section.dark{background:var(--navy);color:#fff}
.section.dark .sec,.section.dark .eyebrow{color:#7fd4d4}
.section.dark h1,.section.dark .display,.section.dark h2{color:#fff}
.section.dark .sub{color:var(--navy-200)}

/* ============================================================
   Funnel
   ============================================================ */
.funnel .row{display:flex;align-items:center;gap:14px;margin:10px 0}
.funnel .name{width:180px;font-size:13px;font-weight:500}
.funnel .track{flex:1;background:var(--warm-mid);border-radius:6px;height:30px;overflow:hidden}
.funnel .fill{height:100%;background:linear-gradient(90deg,var(--teal),#14919A);border-radius:6px;display:flex;align-items:center;padding-left:12px;color:#fff;font-size:13px;font-weight:600;min-width:40px}
.funnel .fill.ig-fill{background:linear-gradient(90deg,var(--ig),#312e81)}
.funnel .pct{width:50px;text-align:right;font-family:var(--mono);font-size:13px;color:var(--muted)}

/* ============================================================
   Comparison table
   ============================================================ */
.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
.cmp th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--label-ink);padding:8px 14px;text-align:left;border-bottom:1px solid var(--line)}
.cmp td{padding:10px 14px;border-bottom:1px solid var(--line)}
.cmp tr:last-child td{border:none}
.cmp .metric-name{font-weight:500;color:var(--navy)}
.cmp .ch-wa{color:var(--wa);font-weight:600}
.cmp .ch-ig{color:var(--ig);font-weight:600}
.cmp .ch-combined{color:var(--teal-700);font-weight:600}
.ch-head.wa{color:var(--wa)}.ch-head.ig{color:var(--ig)}.ch-head.combined{color:var(--teal-700)}

/* ============================================================
   Locked panel + source chips
   ============================================================ */
.locked{background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-card);padding:28px;text-align:center}
.locked .ic{font-size:22px}
.locked h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:8px 0 6px}
.locked p{color:var(--muted);font-size:14px;max-width:520px;margin:0 auto 16px}
.sources{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.src{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;border:1px solid var(--line);border-radius:var(--r-btn);padding:9px 14px;background:var(--off)}
.src .dot{width:8px;height:8px;border-radius:50%}
.src.on .dot{background:var(--teal)}.src.off .dot{background:var(--warm-mid)}
.src.on{border-color:var(--ok-border);background:var(--ok-bg)}.src.off{opacity:.7}

/* ============================================================
   Voice-style card
   ============================================================ */
.voice-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.voice-narrative{font-size:14px;line-height:1.75;color:var(--navy);white-space:pre-wrap;margin-bottom:18px}
.voice-narrative p{margin:0 0 12px}
.voice-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.voice-stat{background:var(--off);border-radius:10px;padding:12px 14px}
.voice-stat .vs-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label-ink);margin-bottom:4px}
.voice-stat .vs-val{font-family:var(--serif);font-weight:500;font-size:20px;line-height:1}
.voice-stat .vs-unit{font-size:12px;color:var(--muted);font-family:var(--sans);font-weight:400}
.traits{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.trait{font-size:12px;font-weight:500;border:1px solid var(--line);border-radius:20px;padding:4px 11px;background:var(--off);color:var(--navy)}
.voice-pending{font-size:13px;color:var(--muted);font-style:italic;padding:10px 0}

/* ---- channel badges ---- */
.ch-badge{display:inline-block;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:2px 7px;border-radius:20px;margin-bottom:10px}
.ch-badge.wa{background:var(--wa-light);color:var(--wa);border:1px solid #b2d8c8}
.ch-badge.ig{background:var(--ig-light);color:var(--ig);border:1px solid #c7d2fe}

/* ============================================================
   Chat bubbles (review screens) — channel-tinted, single source
   ============================================================ */
.bubble{max-width:78%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;margin:4px 0}
.bubble.in{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble.out{margin-left:auto;border-bottom-right-radius:4px}
.bubble.out.wa{background:var(--wa-out);color:var(--wa-out-txt)}
.bubble.out.ig{background:var(--ig-out);color:var(--ig-out-txt)}

/* ============================================================
   Misc
   ============================================================ */
.footnote{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.footnote .mono{font-family:var(--mono)}
.hidden{display:none}

/* ============================================================
   Responsive — phones/small tablets (≤720px). Card grids drop
   to 1–2 columns, funnel labels shrink, stat band stacks,
   wide tables scroll instead of crushing.
   ============================================================ */
@media (max-width:720px){
  .grid,.grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .voice-stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-auto-flow:row}
  .stat-band .stat{border-left:none;border-top:1px solid var(--line)}
  .stat-band .stat:first-child{border-top:none}
  .funnel .name{width:96px;font-size:12px}
  .funnel .pct{width:42px;font-size:12px}
  .cmp{display:block;overflow-x:auto;white-space:nowrap}
  .topbar{flex-wrap:wrap;gap:10px}
}

/* ============================================================
   Vault DS v3 — new components
   ============================================================ */

/* ---- page header ---- */
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-4);margin-bottom:var(--s-8)}

/* ---- badge (Vault v3 — complementa .pill) ---- */
.badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--warm-100);color:var(--warm-700);
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.badge.status{background:var(--teal-50);color:var(--teal-700)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.off{background:var(--warm-100);color:var(--label-ink)}
.badge.neutral{background:var(--navy-50);color:var(--navy-600)}