/* Salesense LP — paleta de marketing Ink & Sinal (spec §5/§9). Independente dos tokens do app. */
:root {
  --ink: #1E1B4B; --ink-2: #312E81; --accent: #5B5BF6; --cyan: #22D3EE;
  --stone: #F5F5F0; --stone-ink: #57534E; --text-on-dark: #C7D2FE;
}
* { margin: 0; box-sizing: border-box; }
body { font-family: 'Geist', system-ui, sans-serif; color: #0F172A; background: var(--stone); }

.nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px clamp(20px, 6vw, 72px); background: var(--ink); }
.nav nav { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.nav nav a { font: 500 14px/1 'Geist', sans-serif; color: var(--text-on-dark); text-decoration: none; }
.lockup { display: flex; align-items: center; gap: 8px; }
.lockup span { font: 600 17px/1 'Geist', sans-serif; letter-spacing: -0.03em; color: #FFFFFF; }
.lockup-sm span { color: var(--ink); font-size: 15px; }

.btn { display: inline-flex; align-items: center; border-radius: 9px; padding: 13px 22px; font: 600 14.5px/1 'Geist', sans-serif; text-decoration: none; }
.btn-primary { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: #4B4BE0; }
.btn-ghost { color: var(--cyan); }
.nav .btn-primary { padding: 10px 16px; font-size: 13px; }

section { padding: clamp(56px, 9vw, 104px) clamp(20px, 6vw, 72px); }
.hero { background: var(--ink); }
.kicker { font: 600 12px/1 'Geist Mono', monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; }
.hero h1 { font: 650 clamp(34px, 5.4vw, 56px)/1.12 'Geist', sans-serif; letter-spacing: -0.035em; color: #FFFFFF; max-width: 640px; text-wrap: pretty; }
.hero .sub, .dark .sub { font: 400 clamp(15px, 1.6vw, 18px)/1.55 'Geist', sans-serif; color: var(--text-on-dark); max-width: 560px; margin-top: 16px; }
.cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

.light { background: var(--stone); }
.light h2, .dark h2 { font: 650 clamp(24px, 3vw, 34px)/1.2 'Geist', sans-serif; letter-spacing: -0.03em; }
.light h2 { color: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 34px; }
.steps article { background: #FFFFFF; border: 1px solid rgba(30, 27, 75, 0.08); border-radius: 14px; padding: 24px; }
.steps h3 { font: 600 17px/1.3 'Geist', sans-serif; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.step-n { font: 600 12px/1 'Geist Mono', monospace; color: var(--cyan); background: var(--ink); border-radius: 99px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.steps p { font: 400 14px/1.6 'Geist', sans-serif; color: var(--stone-ink); margin-top: 10px; }

.dark { background: var(--ink); }
.dark h2 { color: #FFFFFF; max-width: 620px; }
.checklist { margin-top: 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.checklist li { font: 400 15px/1.5 'Geist', sans-serif; color: var(--text-on-dark); padding-left: 26px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 99px; background: var(--cyan); }

#faq details { background: #FFFFFF; border: 1px solid rgba(30, 27, 75, 0.08); border-radius: 12px; padding: 18px 22px; margin-top: 12px; }
#faq summary { font: 600 15px/1.4 'Geist', sans-serif; color: var(--ink); cursor: pointer; }
#faq details p { font: 400 14px/1.6 'Geist', sans-serif; color: var(--stone-ink); margin-top: 10px; }

.closing { text-align: center; }
.closing h2 { margin: 0 auto; }
.closing .cta-row { justify-content: center; }

footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 26px clamp(20px, 6vw, 72px); background: var(--stone); border-top: 1px solid rgba(30, 27, 75, 0.1); }
footer p { font: 400 13px/1.5 'Geist', sans-serif; color: var(--stone-ink); }
footer a { color: var(--ink); }

/* Seção Produto — mocks ilustrativos (dados fictícios; cores de estado = UI do produto retratada) */
.white { background: #FFFFFF; }
.white h2 { font: 650 clamp(24px, 3vw, 34px)/1.2 'Geist', sans-serif; letter-spacing: -0.03em; color: var(--ink); }
.section-sub { font: 400 15px/1.55 'Geist', sans-serif; color: var(--stone-ink); max-width: 560px; margin-top: 10px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin-top: 34px; }
.shot { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.shot-frame { background: #FFFFFF; border: 1px solid rgba(30, 27, 75, 0.1); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 32px rgba(30, 27, 75, 0.08); }
.shot-bar { display: flex; gap: 5px; padding: 9px 12px; border-bottom: 1px solid rgba(30, 27, 75, 0.07); }
.shot-bar span { width: 8px; height: 8px; border-radius: 99px; background: rgba(30, 27, 75, 0.14); }
.shot-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.shot-title { font: 600 12.5px/1 'Geist', sans-serif; color: var(--ink); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 500 10.5px/1 'Geist', sans-serif; border-radius: 99px; padding: 5px 8px; white-space: nowrap; }
.chip-ok { background: #D1FAE5; color: #047857; }
.chip-warn { background: #FEF3C7; color: #92400E; }
.chip-bad { background: #FFE4E6; color: #9F1239; }
.mini-cards { display: flex; gap: 8px; }
.mini-card { flex: 1; border: 1px solid rgba(30, 27, 75, 0.08); border-radius: 8px; padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.mini-label { font: 500 8.5px/1 'Geist Mono', monospace; letter-spacing: 0.08em; color: #94A3B8; }
.mini-value { font: 600 14px/1 'Geist Mono', monospace; color: #0F172A; }
.mini-delta { font: 500 9.5px/1 'Geist', sans-serif; }
.mini-delta.ok { color: #047857; }
.mini-delta.warn { color: #92400E; }
.rfv-row { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(30, 27, 75, 0.07); border-radius: 8px; padding: 8px 10px; }
.rfv-name { font: 500 11.5px/1 'Geist', sans-serif; color: #0F172A; flex: 1; }
.rfv-val { font: 500 11px/1 'Geist Mono', monospace; color: var(--stone-ink); }
.kanban { display: flex; gap: 8px; }
.kcol { flex: 1; background: #F7F7F9; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.kcol-h { font: 500 9px/1 'Geist Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #94A3B8; }
.kcard { background: #FFFFFF; border: 1px solid rgba(30, 27, 75, 0.08); border-radius: 7px; padding: 8px 9px; font: 500 10.5px/1.35 'Geist', sans-serif; color: #0F172A; display: flex; flex-direction: column; gap: 5px; }
.kcard.done { opacity: 0.55; }
.kdue { font: 500 9px/1 'Geist', sans-serif; }
.kdue.ok { color: #047857; }
.kdue.warn { color: #92400E; }
.shot figcaption h3 { font: 600 16px/1.3 'Geist', sans-serif; color: var(--ink); }
.shot figcaption p { font: 400 13px/1.55 'Geist', sans-serif; color: var(--stone-ink); margin-top: 6px; }
.feature-row { list-style: none; padding: 0; margin: 38px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; }
.feature-row li { font: 400 13.5px/1.55 'Geist', sans-serif; color: var(--stone-ink); border-top: 2px solid var(--cyan); padding-top: 10px; }
.feature-row b { color: var(--ink); }
.shot-frame { flex: 1; display: flex; flex-direction: column; }
.shot-body { flex: 1; justify-content: center; }