/* ============================================================
   RAIO-X DO SEU NEGÓCIO — Design System
   Aesthetic: Clinical Precision × Strategic Intelligence
   ============================================================ */

:root {
  --bg:           #06101E;
  --surface:      #0C1A2E;
  --surface-2:    #122338;
  --surface-3:    #1A3050;
  --border:       rgba(14, 201, 176, 0.12);
  --border-med:   rgba(14, 201, 176, 0.22);
  --border-str:   rgba(14, 201, 176, 0.40);
  --accent:       #0EC9B0;
  --accent-soft:  rgba(14, 201, 176, 0.08);
  --accent-glow:  rgba(14, 201, 176, 0.18);
  --text-1:       #DCF0EE;
  --text-2:       #7DA8B8;
  --text-3:       #4A7089;
  --green:        #00D67A;
  --green-bg:     rgba(0, 214, 122, 0.10);
  --yellow:       #F5B700;
  --yellow-bg:    rgba(245, 183, 0, 0.10);
  --red:          #FF3E6C;
  --red-bg:       rgba(255, 62, 108, 0.10);
  --neutral:      #7DA8B8;
  --neutral-bg:   rgba(125, 168, 184, 0.10);
  --font:         'Outfit', system-ui, -apple-system, sans-serif;
  --mono:         'JetBrains Mono', 'Courier New', monospace;
  --radius:       16px;
  --radius-sm:    10px;
  --radius-xs:    6px;
  --shadow:       0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-sm:    0 2px 12px rgba(0, 0, 0, 0.3);
  --transition:   0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100dvh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Subtle grid texture on background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(14,201,176,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,201,176,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

#app { position: relative; z-index: 1; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; }
p { color: var(--text-2); }
strong { color: var(--text-1); font-weight: 600; }

.mono { font-family: var(--mono); }

/* ── Screens ─────────────────────────────────────────────── */
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  animation: screenIn 0.4s var(--transition) both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── LANDING SCREEN ──────────────────────────────────────── */
.landing {
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  gap: 0;
}

.landing-header {
  text-align: center;
  padding: 40px 0 32px;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--border-med);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

.brand-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.landing-title {
  font-size: clamp(32px, 8vw, 64px);
  font-weight: 900;
  color: var(--text-1);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 8px;
}

.landing-title span {
  color: var(--accent);
  position: relative;
}

.landing-subtitle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 28px;
}

.landing-promise {
  max-width: 540px;
  margin: 0 auto 40px;
  font-size: clamp(15px, 2.5vw, 18px);
  color: var(--text-2);
  line-height: 1.7;
}

.landing-promise em {
  color: var(--text-1);
  font-style: normal;
  font-weight: 500;
}

/* Journey preview */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 540px;
  width: 100%;
  margin: 0 auto 40px;
}

.journey-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color var(--transition);
}

.journey-item:hover { border-color: var(--border-med); }

.journey-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  min-width: 18px;
}

.journey-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

/* CTA */
.cta-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.btn-cta {
  background: var(--accent);
  color: #06101E;
  border: none;
  border-radius: 100px;
  padding: 16px 40px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 0 24px rgba(14, 201, 176, 0.35);
}

.btn-cta:hover {
  background: #0FE8CC;
  box-shadow: 0 0 40px rgba(14, 201, 176, 0.55);
  transform: translateY(-1px);
}

.btn-cta:active { transform: translateY(0); }

.cta-note {
  font-size: 12px;
  color: var(--text-3);
}

.landing-footer {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  padding-bottom: 24px;
  letter-spacing: 0.05em;
}

/* ── TOP BAR (Progress) ──────────────────────────────────── */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 16, 30, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.top-bar-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
}

.top-logo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.progress-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}

.progress-seg {
  flex: 1;
  height: 4px;
  background: var(--surface-3);
  border-radius: 100px;
  transition: background 0.4s ease;
  position: relative;
  overflow: hidden;
}

.progress-seg.done {
  background: var(--accent);
}

.progress-seg.active {
  background: var(--surface-3);
}

.progress-seg.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: 100px;
  animation: segFill 0.6s ease forwards;
  transform-origin: left;
}

@keyframes segFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(0.6); }
}

.progress-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--mono);
}

/* ── STEP SCREEN ─────────────────────────────────────────── */
.step-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 120px;
}

.step-card {
  width: 100%;
  max-width: 640px;
  animation: cardIn 0.35s var(--transition) both;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step-card.going-back {
  animation: cardInBack 0.35s var(--transition) both;
}

@keyframes cardInBack {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Step header */
.step-header {
  margin-bottom: 28px;
}

.step-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--accent);
  color: #06101E;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.step-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.step-title {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.step-description {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 520px;
  border-left: 2px solid var(--border-med);
  padding-left: 14px;
}

/* Section block */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
  transition: border-color var(--transition);
}

.form-section:focus-within { border-color: var(--border-med); }

.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

/* Field groups */
.field-group {
  margin-bottom: 18px;
}

.field-group:last-child { margin-bottom: 0; }

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.opt-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-3);
  border-radius: 4px;
  padding: 1px 6px;
}

.field-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 5px;
  line-height: 1.4;
}

/* Inputs */
.field-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}

.field-input:focus {
  border-color: var(--border-str);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.field-input::placeholder { color: var(--text-3); font-weight: 400; }

.field-input[type="number"] {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* Currency wrapper */
.input-wrap {
  position: relative;
}

.input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  pointer-events: none;
}

.input-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-3);
  pointer-events: none;
}

.field-input.has-prefix { padding-left: 36px; }
.field-input.has-suffix { padding-right: 36px; }

/* Select */
.field-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 36px 11px 14px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A7089' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field-select:focus { border-color: var(--border-str); box-shadow: 0 0 0 3px var(--accent-glow); }
.field-select option { background: var(--surface-2); }

/* Radio groups */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radio-opt {
  position: relative;
}

.radio-opt input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.radio-opt label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.radio-opt input:checked + label {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.radio-opt label:hover { border-color: var(--border-med); }

/* Two-col layout for some fields */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── RESULT PANEL ────────────────────────────────────────── */
.result-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.result-panel::before {
  content: 'RESULTADO';
  position: absolute;
  top: 12px; right: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-3);
}

.result-panel::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.result-metrics {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result-metric {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.metric-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  line-height: 1.3;
  flex: 1;
}

.metric-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
}

.metric-value.large {
  font-size: 26px;
  color: var(--accent);
}

.metric-value.highlight { color: var(--accent); }
.metric-value.warning   { color: var(--yellow); }
.metric-value.danger    { color: var(--red); }

.result-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── ALERT CHIP (Semaphore) ──────────────────────────────── */
.alert-area {
  margin-top: 14px;
}

.alert-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.alert-chip .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.alert-chip.green {
  background: var(--green-bg);
  border-color: rgba(0, 214, 122, 0.25);
  color: var(--green);
}
.alert-chip.green .dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.alert-chip.yellow {
  background: var(--yellow-bg);
  border-color: rgba(245, 183, 0, 0.25);
  color: var(--yellow);
}
.alert-chip.yellow .dot {
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
}

.alert-chip.red {
  background: var(--red-bg);
  border-color: rgba(255, 62, 108, 0.25);
  color: var(--red);
}
.alert-chip.red .dot {
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
}

.alert-chip.neutral {
  background: var(--neutral-bg);
  border-color: rgba(125, 168, 184, 0.2);
  color: var(--neutral);
}
.alert-chip.neutral .dot { background: var(--neutral); }

/* ── RECOMMENDATION ──────────────────────────────────────── */
.recommendation {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 16px;
}

.recommendation strong { color: var(--accent); }

/* ── NAVIGATION BAR ──────────────────────────────────────── */
.nav-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(6, 16, 30, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.nav-bar-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-back {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-back:hover { border-color: var(--border-med); color: var(--text-1); }

.btn-advance {
  flex: 1;
  background: var(--accent);
  border: none;
  border-radius: 100px;
  padding: 13px 28px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #06101E;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-advance:hover { background: #0FE8CC; box-shadow: 0 0 20px rgba(14,201,176,0.4); }
.btn-advance:disabled {
  background: var(--surface-3);
  color: var(--text-3);
  cursor: not-allowed;
  box-shadow: none;
}

/* ── DIAGNOSIS SCREEN ────────────────────────────────────── */
.diagnosis-screen {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-bottom: 100px;
}

.diag-body {
  flex: 1;
  padding: 32px 20px 40px;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.diag-header {
  margin-bottom: 32px;
}

.diag-stamp {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.stamp-badge {
  background: var(--accent);
  color: #06101E;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
}

.stamp-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
}

.diag-title {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900;
  color: var(--text-1);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 10px;
}

.diag-title span { color: var(--accent); }

.diag-subtitle {
  font-size: 14px;
  color: var(--text-2);
  font-style: italic;
}

/* Scan line decorative element */
.scan-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: 24px 0;
  position: relative;
}

.scan-line::before {
  content: '◆';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent);
  font-size: 8px;
  background: var(--bg);
  padding: 0 8px;
}

/* Metric grid */
.diag-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.diag-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  transition: border-color var(--transition);
  position: relative;
}

.metric-card.green  { border-top: 2px solid var(--green); }
.metric-card.yellow { border-top: 2px solid var(--yellow); }
.metric-card.red    { border-top: 2px solid var(--red); }
.metric-card.neutral{ border-top: 2px solid var(--text-3); }

.mc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
  line-height: 1.4;
}

.mc-value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
  word-break: break-all;
}

.mc-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
}

.mc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.metric-card.green  .mc-status { color: var(--green); }
.metric-card.green  .mc-dot    { background: var(--green); box-shadow: 0 0 6px var(--green); }
.metric-card.yellow .mc-status { color: var(--yellow); }
.metric-card.yellow .mc-dot    { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.metric-card.red    .mc-status { color: var(--red); }
.metric-card.red    .mc-dot    { background: var(--red); box-shadow: 0 0 6px var(--red); }
.metric-card.neutral .mc-status { color: var(--text-3); }
.metric-card.neutral .mc-dot   { background: var(--text-3); }

/* Overall health score */
.health-banner {
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.health-score-wrap {
  flex-shrink: 0;
  text-align: center;
}

.health-score {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.health-score.green  { color: var(--green); }
.health-score.yellow { color: var(--yellow); }
.health-score.red    { color: var(--red); }

.health-score-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.health-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}

.health-text {
  flex: 1;
}

.health-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.health-text p {
  font-size: 13px;
}

/* Priorities */
.priorities-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.priority-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.priority-num {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 900;
  color: var(--border-str);
  line-height: 1;
  flex-shrink: 0;
  min-width: 30px;
}

.priority-content {}

.priority-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 4px;
}

.priority-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

/* Diagnosis nav */
.diag-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(6,16,30,0.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 90;
}

.diag-nav-inner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
}

.btn-restart {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-restart:hover { border-color: var(--red); color: var(--red); }

.btn-print {
  flex: 1;
  background: var(--accent);
  border: none;
  border-radius: 100px;
  padding: 13px 28px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #06101E;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-print:hover { background: #0FE8CC; box-shadow: 0 0 20px rgba(14,201,176,0.4); }

/* ── TRANSITION OVERLAY ──────────────────────────────────── */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 16, 30, 0.96);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}

.transition-overlay.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.transition-card {
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.transition-icon {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 20px;
  animation: arrowPulse 0.8s ease infinite alternate;
}

@keyframes arrowPulse {
  from { transform: translateX(0); opacity: 0.6; }
  to   { transform: translateX(6px); opacity: 1; }
}

.transition-text {
  font-size: 17px;
  color: var(--text-1);
  line-height: 1.7;
  margin-bottom: 28px;
  font-weight: 400;
}

.btn-skip {
  background: none;
  border: 1px solid var(--border-med);
  border-radius: 100px;
  padding: 10px 28px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-skip:hover { background: var(--accent-soft); border-color: var(--border-str); }

/* ── STEP 4 — PE auto screen ─────────────────────────────── */
.auto-calc-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 16px;
}

/* ── STEP 5 — meta toggle ────────────────────────────────── */
.tab-toggle {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
  margin-bottom: 18px;
}

.tab-opt {
  flex: 1;
  background: none;
  border: none;
  border-radius: 100px;
  padding: 9px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--transition);
}

.tab-opt.active {
  background: var(--accent);
  color: #06101E;
}

/* ── UTILITY ─────────────────────────────────────────────── */
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

.text-accent { color: var(--accent); }
.text-green  { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-red    { color: var(--red); }

/* Validation error */
.field-error {
  font-size: 11px;
  color: var(--red);
  margin-top: 4px;
}

.field-input.error { border-color: var(--red); }

/* ── PRINT STYLES ────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #111; }
  body::before { display: none; }
  .top-bar, .nav-bar, .diag-nav, .btn-print, .btn-restart { display: none !important; }
  .diagnosis-screen { padding-bottom: 0; }
  .diag-body { max-width: 100%; }
  .metric-card { border: 1px solid #ccc !important; break-inside: avoid; }
  .metrics-grid { grid-template-columns: repeat(3, 1fr); }
  .health-banner, .priority-item { border: 1px solid #ccc; break-inside: avoid; }
  :root {
    --bg: #fff; --surface: #f5f5f5; --surface-2: #ebebeb;
    --text-1: #111; --text-2: #444; --text-3: #777;
    --border: #ccc; --border-med: #bbb;
    --accent: #0a7a6e;
    --green: #00843c; --yellow: #a07800; --red: #c0003a;
  }
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .journey-grid { grid-template-columns: 1fr; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .health-banner { flex-direction: column; text-align: center; }
  .health-divider { width: 80px; height: 1px; }
  .top-logo { font-size: 10px; }
  .diag-nav-inner { flex-direction: column-reverse; }
  .btn-restart { width: 100%; }
}

@media (max-width: 360px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .step-body { padding: 24px 16px 120px; }
}

/* ── KONO BRIDGE — continuação natural pós-diagnóstico ───── */
.kono-bridge{margin-top:28px;padding:28px;border:1px solid var(--border-med);border-radius:calc(var(--radius) + 4px);background:radial-gradient(circle at 100% 0%,rgba(14,201,176,.14),transparent 42%),linear-gradient(145deg,rgba(12,26,46,.96),rgba(6,16,30,.96));box-shadow:var(--shadow-sm)}
.kono-eyebrow{display:inline-flex;align-items:center;padding:5px 10px;margin-bottom:14px;border-radius:999px;border:1px solid var(--border-med);background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.kono-title{margin:0 0 12px;font-size:clamp(22px,4.5vw,32px);color:var(--text-1);line-height:1.15}.kono-title span{color:var(--accent)}
.kono-context{max-width:620px;margin:0 0 20px;color:var(--text-2);font-size:14px;line-height:1.7}
.kono-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}
.kono-value-card{min-height:128px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:rgba(18,35,56,.72)}
.kono-value-card strong{display:block;margin-bottom:7px;color:var(--text-1);font-size:13px}.kono-value-card span{display:block;color:var(--text-2);font-size:12px;line-height:1.5}
.btn-kono{width:100%;margin-top:4px;padding:14px 22px;border:0;border-radius:999px;background:var(--accent);color:#06101E;font-family:var(--font);font-size:14px;font-weight:800;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition),background var(--transition)}
.btn-kono:hover{transform:translateY(-1px);background:#0FE8CC;box-shadow:0 0 24px rgba(14,201,176,.28)}
.kono-note{margin-top:9px;text-align:center;color:var(--text-3);font-size:11px}.kono-more{margin-top:18px}
.kono-more-inner{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(6,16,30,.72)}
.kono-more h3{margin:0 0 12px;color:var(--text-1);font-size:18px}.kono-more ol{margin:0 0 16px 18px;color:var(--text-2);font-size:13px;line-height:1.65}.kono-more li{margin-bottom:8px;padding-left:4px}
.kono-truth{padding:12px 14px;border-left:3px solid var(--accent);border-radius:0 var(--radius-xs) var(--radius-xs) 0;background:var(--accent-soft);color:var(--text-2);font-size:12px;line-height:1.55}
.kono-coming{margin-top:12px;color:var(--text-3);font-size:11px;line-height:1.5}
@media(max-width:620px){.kono-bridge{padding:20px}.kono-value-grid{grid-template-columns:1fr}.kono-value-card{min-height:0}}
@media print{.kono-bridge{display:none!important}}
/* ── KONO VISUAL SYSTEM V1 — 2026-09-27 ─────────────────
   Alinhado ao site comercial: verde profundo + marfim + dourado discreto.
   Mantém cores semânticas dos semáforos sem transformar a interface em dashboard tech.
──────────────────────────────────────────────────────────── */
:root{
  --bg:#f5eddf;
  --surface:#fffaf1;
  --surface-2:#f3e7d4;
  --surface-3:#e7dcc9;
  --border:rgba(16,39,31,.13);
  --border-med:rgba(13,52,39,.22);
  --border-str:rgba(13,52,39,.38);
  --accent:#0d3427;
  --accent-soft:rgba(13,52,39,.075);
  --accent-glow:rgba(13,52,39,.14);
  --text-1:#10271f;
  --text-2:#40564c;
  --text-3:#6b766f;
  --green:#27734f;
  --green-bg:rgba(39,115,79,.10);
  --yellow:#9a7138;
  --yellow-bg:rgba(191,145,80,.13);
  --red:#a84444;
  --red-bg:rgba(168,68,68,.09);
  --neutral:#596a62;
  --neutral-bg:rgba(89,106,98,.09);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --radius:20px;
  --radius-sm:12px;
  --radius-xs:8px;
  --shadow:0 24px 60px rgba(25,45,36,.11);
  --shadow-sm:0 12px 34px rgba(25,45,36,.07);
  --transition:.20s ease;
}

body{
  background:
    radial-gradient(circle at 8% 4%,rgba(191,145,80,.11),transparent 24%),
    radial-gradient(circle at 90% 11%,rgba(13,52,39,.08),transparent 25%),
    linear-gradient(180deg,#f5eddf 0%,#eee3d2 54%,#f7efe3 100%);
  color:var(--text-1);
}
body::before{
  background-image:none;
  background:
    radial-gradient(circle at 82% 28%,rgba(191,145,80,.08),transparent 20%);
}

/* Landing editorial / premium */
.landing{
  justify-content:flex-start;
  padding:54px 20px 42px;
}
.landing-header{
  width:min(720px,100%);
  padding:28px 0 26px;
}
.brand-badge{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  color:#8f6b37;
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  margin-bottom:22px;
}
.brand-badge::before{
  width:32px;
  height:1px;
  border-radius:0;
  background:#bf9150;
  box-shadow:none;
  animation:none;
}
.landing-title{
  font-size:clamp(42px,8vw,68px);
  line-height:.99;
  letter-spacing:-.052em;
  font-weight:850;
  color:#10291f;
  margin-bottom:18px;
}
.landing-title span{color:#0d3427}
.landing-subtitle{
  color:#8f6b37;
  font-size:10px;
  letter-spacing:.16em;
}
.landing-promise{
  max-width:680px;
  font-size:17px;
  line-height:1.72;
  color:#40564c;
  margin-bottom:30px;
}
.journey-grid{
  max-width:720px;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:30px;
}
.journey-item{
  background:rgba(255,250,241,.82);
  border:1px solid rgba(16,39,31,.12);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:0 10px 24px rgba(25,45,36,.035);
}
.journey-item:hover{border-color:rgba(191,145,80,.38)}
.journey-num{
  color:#9a7138;
  font-family:Georgia,serif;
  font-size:13px;
}
.journey-label{color:#385247;font-weight:650}
.cta-area{margin-bottom:28px}
.btn-cta{
  background:#0d3427;
  color:#fffaf1;
  border-radius:10px;
  padding:15px 28px;
  box-shadow:0 14px 32px rgba(13,52,39,.16);
}
.btn-cta:hover{
  background:#154936;
  box-shadow:0 18px 36px rgba(13,52,39,.22);
  transform:translateY(-2px);
}
.cta-note,.landing-footer{color:#6b766f}

/* Barra de progresso KONO */
.top-bar{
  background:rgba(247,241,230,.93);
  border-bottom:1px solid rgba(16,39,31,.13);
  box-shadow:0 8px 28px rgba(25,45,36,.035);
}
.top-logo{
  color:#0d3427;
  letter-spacing:.14em;
  font-weight:900;
}
.progress-seg{background:#ddd2bf}
.progress-seg.done{background:#0d3427}
.progress-seg.active::after{background:#bf9150}
.progress-label{color:#6b766f}

/* Conteúdo das etapas */
.step-body{padding-top:42px}
.step-card{max-width:680px}
.step-badge{
  background:#0d3427;
  color:#f7f1e6;
  border-radius:10px;
  font-family:var(--font);
}
.step-tag{color:#8f6b37}
.step-title{
  color:#10291f;
  font-weight:820;
  letter-spacing:-.04em;
}
.step-description{
  color:#596a62;
  border-left:2px solid #bf9150;
}
.form-section{
  background:rgba(255,250,241,.90);
  border:1px solid rgba(16,39,31,.12);
  box-shadow:0 12px 34px rgba(25,45,36,.045);
}
.form-section:focus-within{border-color:rgba(191,145,80,.48)}
.section-label{color:#8f6b37}
.field-label{color:#40564c}
.opt-badge{
  background:#efe3d0;
  color:#7d7468;
}
.field-input,.field-select{
  background:#fffdf8;
  border:1px solid rgba(16,39,31,.16);
  color:#10271f;
}
.field-input:focus,.field-select:focus{
  border-color:#0d3427;
  box-shadow:0 0 0 3px rgba(13,52,39,.08);
  background:#fff;
}
.field-input::placeholder{color:#9b9a91}
.field-select option{background:#fffaf1}
.input-prefix{color:#8f6b37}
.input-suffix{color:#6b766f}
.radio-opt label{
  background:#fffaf1;
  border-color:rgba(16,39,31,.14);
  color:#40564c;
  border-radius:10px;
}
.radio-opt input:checked+label{
  background:#0d3427;
  border-color:#0d3427;
  color:#fffaf1;
}
.radio-opt label:hover{border-color:rgba(191,145,80,.48)}

/* Resultados e orientações */
.result-panel{
  background:linear-gradient(145deg,#fffdf7,#f4e6cc);
  border:1px solid rgba(191,145,80,.34);
  box-shadow:0 16px 38px rgba(25,45,36,.06);
}
.result-panel::before{color:#8f6b37}
.result-panel::after{background:#bf9150}
.metric-label{color:#6b766f}
.metric-value{color:#17362a}
.metric-value.large,.metric-value.highlight{color:#0d3427}
.recommendation{
  background:rgba(255,250,241,.78);
  border:1px solid rgba(16,39,31,.11);
  border-left:3px solid #bf9150;
  color:#506158;
}
.recommendation strong{color:#17362a}
.auto-calc-notice{
  background:#f0dfbe;
  border-color:rgba(191,145,80,.38);
  color:#684e2a;
}
.alert-chip{border-radius:999px}
.alert-chip.green{color:#236342;border-color:rgba(39,115,79,.20)}
.alert-chip.yellow{color:#795526;border-color:rgba(154,113,56,.20)}
.alert-chip.red{color:#8d3535;border-color:rgba(168,68,68,.18)}
.alert-chip.neutral{color:#596a62;border-color:rgba(89,106,98,.16)}

/* Bottom actions — less app-like / more premium */
.nav-bar,.diag-nav{
  background:rgba(247,241,230,.96);
  border-top:1px solid rgba(16,39,31,.13);
  box-shadow:0 -12px 34px rgba(25,45,36,.05);
}
.btn-back,.btn-restart{
  background:transparent;
  border:1px solid rgba(13,52,39,.25);
  color:#385247;
  border-radius:10px;
}
.btn-back:hover{border-color:#0d3427;color:#0d3427}
.btn-advance,.btn-print{
  background:#0d3427;
  color:#fffaf1;
  border-radius:10px;
  box-shadow:0 12px 26px rgba(13,52,39,.13);
}
.btn-advance:hover,.btn-print:hover{
  background:#154936;
  box-shadow:0 16px 30px rgba(13,52,39,.18);
}
.btn-advance:disabled{background:#d8d0c1;color:#8f8a80}

/* Toggle */
.tab-toggle{
  background:#eee2cf;
  border-color:rgba(16,39,31,.10);
  border-radius:12px;
}
.tab-opt{border-radius:9px;color:#68776f}
.tab-opt.active{background:#0d3427;color:#fffaf1}

/* Diagnóstico */
.diag-title{
  color:#10291f;
  font-weight:850;
  letter-spacing:-.045em;
}
.diag-title span{color:#0d3427}
.diag-subtitle{color:#596a62;font-style:normal}
.stamp-badge{
  background:#0d3427;
  color:#f7f1e6;
  border-radius:8px;
}
.stamp-date{color:#7a7569}
.scan-line{
  background:linear-gradient(90deg,transparent,#bf9150,transparent);
}
.scan-line::before{
  color:#bf9150;
  background:#f2e8d9;
}
.diag-section-label{color:#8f6b37}
.metric-card,.health-banner,.priority-item{
  background:rgba(255,250,241,.88);
  border-color:rgba(16,39,31,.12);
  box-shadow:0 10px 26px rgba(25,45,36,.04);
}
.health-banner{
  background:linear-gradient(145deg,#0d3427,#154936);
  border-color:#0d3427;
}
.health-banner .health-score-label,
.health-banner .health-text p{color:#cfddd7}
.health-banner .health-text strong{color:#fff4e2}
.health-divider{background:rgba(255,255,255,.16)}
.priority-num{
  color:#bf9150;
  font-family:Georgia,serif;
}

/* Transição */
.transition-overlay{
  background:rgba(9,41,31,.94);
  backdrop-filter:blur(10px);
}
.transition-card{
  background:#fffaf1;
  border:1px solid rgba(191,145,80,.35);
  border-radius:24px;
  padding:34px 28px;
  box-shadow:0 32px 80px rgba(0,0,0,.22);
}
.transition-icon{color:#bf9150}
.transition-text{color:#17362a}
.btn-skip{
  border-color:rgba(13,52,39,.28);
  border-radius:10px;
  color:#0d3427;
}
.btn-skip:hover{background:rgba(13,52,39,.06);border-color:#0d3427}

/* KONO bridge — assinatura comercial do ecossistema */
.kono-bridge{
  background:
    radial-gradient(circle at 88% 12%,rgba(210,171,102,.21),transparent 28%),
    linear-gradient(145deg,#09291f,#123e2f);
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  padding:32px;
  box-shadow:0 28px 62px rgba(10,39,30,.18);
}
.kono-eyebrow{
  background:transparent;
  border:0;
  padding:0;
  color:#d5b47a;
  border-radius:0;
  letter-spacing:.17em;
}
.kono-title{color:#fff;font-weight:820;letter-spacing:-.04em}
.kono-title span{color:#f0dfbf}
.kono-context{color:#d3dfda}
.kono-value-card{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.13);
}
.kono-value-card strong{color:#fff4e2}
.kono-value-card span{color:#cfddd7}
.btn-kono{
  background:#f0dfbf;
  color:#16382b;
  border-radius:10px;
  box-shadow:none;
}
.btn-kono:hover{
  background:#f7ead1;
  box-shadow:none;
}
.kono-note{color:#acbeb6}
.kono-more-inner{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
.kono-more h3,.kono-more li strong{color:#fff4e2}
.kono-more ol,.kono-truth{color:#cfddd7}
.kono-truth{
  background:rgba(240,223,191,.08);
  border-left-color:#d5b47a;
}
.kono-coming{color:#acbeb6}

@media(max-width:620px){
  .landing{padding-top:30px}
  .landing-title{font-size:42px}
  .journey-grid{grid-template-columns:1fr}
  .step-body{padding-top:30px}
  .form-section{padding:20px}
  .kono-bridge{padding:24px 20px}
}


/* ── KONO LANDING V2 — verde protagonista ───────────────── */
.landing{
  min-height:100dvh;
  justify-content:flex-start;
  padding:54px 20px 44px;
  background:
    radial-gradient(circle at 86% 12%,rgba(210,171,102,.22),transparent 27%),
    radial-gradient(circle at 10% 92%,rgba(255,255,255,.05),transparent 24%),
    linear-gradient(145deg,#09291f 0%,#0d3427 48%,#154936 100%);
}
.landing-header{
  width:min(760px,100%);
  padding:34px 0 26px;
}
.landing .brand-badge{color:#d8ba83}
.landing .brand-badge::before{background:#d8ba83}
.landing .landing-title{color:#fffaf1}
.landing .landing-title span{color:#f0dfbf}
.landing .landing-subtitle{color:#d8ba83}
.landing .landing-promise{color:#d3dfda}
.landing .landing-promise em{color:#fffaf1}
.landing .journey-item{
  background:rgba(255,250,241,.075);
  border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.landing .journey-item:hover{border-color:rgba(240,223,191,.42)}
.landing .journey-num{color:#f0dfbf}
.landing .journey-label{color:#d3dfda}
.landing .btn-cta{
  background:#f0dfbf;
  color:#16382b;
  box-shadow:0 14px 32px rgba(0,0,0,.16);
}
.landing .btn-cta:hover{
  background:#fff0d4;
  color:#0d3427;
  box-shadow:0 18px 36px rgba(0,0,0,.20);
}
.landing .btn-manual{
  color:#f0dfbf;
  border-color:rgba(240,223,191,.34);
}
.landing .btn-manual:hover{
  background:rgba(240,223,191,.08);
  border-color:#f0dfbf;
}
.landing .cta-note,.landing .landing-footer{color:#acbeb6}
@media(max-width:620px){
  .landing{padding-top:26px}
  .landing-header{padding-top:24px}
}


/* ── KONO BRIDGE COPY V2 — explicação + curiosidade ─────── */
.kono-definition{
  max-width:690px;
  margin:0 0 14px;
  color:#e0e9e5;
  font-size:15px;
  line-height:1.72;
}
.kono-definition strong{color:#fff4e2}
.kono-curiosity{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:18px 0 14px;
  padding:15px 16px;
  border:1px solid rgba(240,223,191,.22);
  border-radius:12px;
  background:rgba(240,223,191,.07);
}
.kono-curiosity strong{color:#f0dfbf;font-size:14px}
.kono-curiosity span{color:#cfddd7;font-size:12px;line-height:1.55}
.btn-kono{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}


/* ── GUIA RÁPIDO INLINE — funcional em arquivo único ────── */
.manual-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(13,52,39,.24);
  background:transparent;
  color:#0d3427;
  font-family:var(--font);
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--transition);
}
.manual-link:hover{background:rgba(13,52,39,.06);border-color:#0d3427}
.landing .manual-link{
  color:#f0dfbf;
  border-color:rgba(240,223,191,.34);
}
.landing .manual-link:hover{background:rgba(240,223,191,.08);border-color:#f0dfbf}
.top-bar .manual-link{padding:7px 10px;font-size:11px}
.guide-open{overflow:hidden}
.guide-overlay{
  position:fixed;
  inset:0;
  z-index:400;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(7,29,22,.74);
  backdrop-filter:blur(10px);
}
.guide-overlay.open{display:flex}
.guide-panel{
  width:min(900px,100%);
  max-height:min(88dvh,900px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(191,145,80,.34);
  border-radius:24px;
  background:#fffaf1;
  box-shadow:0 34px 90px rgba(0,0,0,.28);
}
.guide-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:26px 28px 22px;
  border-bottom:1px solid rgba(16,39,31,.11);
  background:linear-gradient(145deg,#0a2c21,#154b37);
}
.guide-eyebrow{
  margin-bottom:8px;
  color:#d8ba83;
  font-size:9px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.guide-head h2{
  margin:0 0 8px;
  color:#fffaf1;
  font-size:clamp(26px,4vw,38px);
  line-height:1.05;
  letter-spacing:-.04em;
}
.guide-head p{max-width:650px;margin:0;color:#d3dfda;font-size:13px}
.guide-close{
  flex:0 0 auto;
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#fffaf1;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.guide-body{
  overflow:auto;
  padding:24px 28px 28px;
}
.guide-callout{
  display:grid;
  gap:4px;
  margin-bottom:18px;
  padding:15px 16px;
  border-left:3px solid #bf9150;
  border-radius:0 12px 12px 0;
  background:#f3e7d4;
}
.guide-callout strong{color:#17362a}
.guide-callout span{color:#596a62;font-size:13px;line-height:1.55}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.guide-card{
  position:relative;
  padding:17px 18px 17px 52px;
  border:1px solid rgba(16,39,31,.11);
  border-radius:14px;
  background:#fffdf8;
}
.guide-card>span{
  position:absolute;
  left:16px;top:17px;
  color:#bf9150;
  font-family:Georgia,serif;
  font-size:17px;
}
.guide-card h3{margin:0 0 6px;color:#17362a;font-size:14px}
.guide-card p{margin:0;color:#596a62;font-size:12px;line-height:1.55}
.guide-traffic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:18px;
}
.guide-traffic div{
  display:grid;
  gap:3px;
  padding:13px 14px;
  border:1px solid rgba(16,39,31,.10);
  border-radius:12px;
  background:#f8f1e4;
}
.guide-traffic b{color:#17362a;font-size:12px}
.guide-traffic span{color:#68776f;font-size:11px;line-height:1.45}
.guide-mini{
  margin-top:18px;
  padding:18px;
  border:1px solid rgba(16,39,31,.11);
  border-radius:14px;
  background:#fffdf8;
}
.guide-mini h3{margin:0 0 10px;color:#17362a;font-size:15px}
.guide-mini ul{margin:0;padding-left:18px;color:#596a62;font-size:12px;line-height:1.65}
.guide-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  border-top:1px solid rgba(16,39,31,.11);
  background:#f3e7d4;
}
.guide-foot span{color:#6b766f;font-size:10px}
.guide-foot button{
  flex:0 0 auto;
  padding:10px 14px;
  border:0;
  border-radius:10px;
  background:#0d3427;
  color:#fffaf1;
  font-family:var(--font);
  font-weight:800;
  cursor:pointer;
}
@media(max-width:700px){
  .guide-overlay{padding:8px}
  .guide-panel{max-height:94dvh;border-radius:18px}
  .guide-head{padding:20px 18px 18px}
  .guide-body{padding:18px}
  .guide-grid,.guide-traffic{grid-template-columns:1fr}
  .guide-foot{align-items:flex-start;flex-direction:column}
  .guide-foot button{width:100%}
}
@media print{.guide-overlay{display:none!important}}

.share-raiox{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(13,52,39,.24);background:transparent;color:#0d3427;border-radius:10px;padding:9px 12px;font-family:var(--font);font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}
.share-raiox:hover{background:rgba(13,52,39,.06);border-color:#0d3427}
.landing .share-dark{color:#f0dfbf;border-color:rgba(240,223,191,.34)}
.landing .share-dark:hover{background:rgba(240,223,191,.08);border-color:#f0dfbf}
.share-message{display:block;min-height:12px;color:#6b766f;font-size:10px}
.landing .share-message{color:#acbeb6}
@media(max-width:480px){.cta-area .share-raiox{width:100%;margin-top:8px}}