/* =========================================================================
   Ulibot Terminal — marketing theme
   Brings /, /features, /pricing, /security, /faq and /contact onto the same
   design language as the app (see css/ulibot_terminal_overlay.css and
   static/design_preview/ulibot-terminal.css).

   marketing_revamp.css routes nearly every colour through --mk-* custom
   properties, so the palette is remapped there rather than rule-by-rule.
   Everything below that point is shape work the tokens can't express:
   typography, radii, pill-vs-square, and the flattening of the gradient
   chrome the old marketing look was built on.

   Loaded AFTER marketing_revamp.css; scoped to .marketing-shell.
   ========================================================================= */

/* ---------- palette: light ---------- */
:root {
  --ut-bg:         #f4f6f9;
  --ut-surface:    #ffffff;
  --ut-surface-2:  #f1f4f8;
  --ut-surface-3:  #e9eef4;
  --ut-border:     #e3e8ef;
  --ut-border-soft:#eef1f6;
  --ut-text:       #111725;
  --ut-text-2:     #55617a;
  --ut-text-muted: #94a0b3;
  --ut-brand:      #5a63f0;
  --ut-accent:     #3667ea;
  --ut-accent-soft:#e7efff;
  --ut-green:      #10a05e;
  --ut-red:        #e23a4e;
  --ut-amber:      #b06f0b;
  --ut-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ut-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --ut-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 26px -16px rgba(20,32,60,.28);

  /* remap the marketing tokens onto the terminal palette */
  --mk-bg: var(--ut-bg);
  --mk-bg-top: transparent;
  --mk-bg-side: transparent;
  --mk-grid-line: transparent;
  --mk-panel: var(--ut-surface);
  --mk-panel-strong: var(--ut-surface);
  --mk-panel-soft: var(--ut-surface-2);
  --mk-panel-accent: var(--ut-surface-2);
  --mk-ink: var(--ut-text);
  --mk-ink-soft: var(--ut-text-2);
  --mk-muted: var(--ut-text-muted);
  --mk-line: var(--ut-border);
  --mk-line-strong: var(--ut-border);
  --mk-primary: var(--ut-accent);
  --mk-primary-strong: #2b56c9;
  --mk-primary-soft: rgba(54, 103, 234, 0.12);
  --mk-blue: var(--ut-accent);
  --mk-blue-strong: #2b56c9;
  --mk-blue-soft: rgba(54, 103, 234, 0.12);
  --mk-accent: var(--ut-amber);
  --mk-accent-soft: rgba(176, 111, 11, 0.14);
  --mk-danger: var(--ut-red);
  --mk-shadow: var(--ut-shadow);
  --mk-radius-xl: 14px;
  --mk-radius-lg: 14px;
  --mk-radius-md: 12px;
  --mk-radius-sm: 10px;
}

/* ---------- palette: dark ---------- */
html[data-theme-version="dark"] {
  --ut-bg:         #090b0f;
  --ut-surface:    #0f1319;
  --ut-surface-2:  #141922;
  --ut-surface-3:  #1a2029;
  --ut-border:     #1f2732;
  --ut-border-soft:#171d26;
  --ut-text:       #e8ebf1;
  --ut-text-2:     #9aa3b2;
  --ut-text-muted: #5f6875;
  --ut-brand:      #6a74ff;
  --ut-accent:     #5b8cff;
  --ut-accent-soft:#213151;
  --ut-green:      #2fd085;
  --ut-red:        #fe596d;
  --ut-amber:      #f3ae41;
  --ut-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px -12px rgba(0,0,0,.7);

  --mk-primary-strong: #7ea3ff;
  --mk-blue-strong: #7ea3ff;
  --mk-primary-soft: rgba(91, 140, 255, 0.16);
  --mk-blue-soft: rgba(91, 140, 255, 0.16);
  --mk-accent-soft: rgba(243, 174, 65, 0.16);
}

/* ---------- type ---------- */
.marketing-shell,
.marketing-shell button,
.marketing-shell input,
.marketing-shell select,
.marketing-shell textarea {
  font-family: var(--ut-font);
}
.marketing-shell {
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.marketing-shell h1,
.marketing-shell h2,
.marketing-shell h3,
.marketing-shell h4 {
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ut-text);
}
.marketing-shell h1 { font-size: clamp(2rem, 3.4vw, 2.85rem); line-height: 1.12; }
.marketing-shell h2 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); line-height: 1.2; }
.marketing-shell h3 { font-size: 1.12rem; line-height: 1.3; }
/* prices and other figures are tabular, like the app */
.marketing-shell .plan-card__price,
.marketing-shell .plan-card__savings,
.marketing-shell .marketing-stat__value {
  font-family: var(--ut-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- flatten the old gradient chrome ---------- */
.marketing-shell .marketing-background,
.marketing-shell .marketing-background::before,
.marketing-shell .marketing-background::after {
  background: none !important;
  opacity: 1 !important;
}
.marketing-shell { background: var(--ut-bg); }

/* ---------- nav ---------- */
.marketing-shell .marketing-nav {
  background: color-mix(in srgb, var(--ut-surface) 85%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ut-border-soft);
}
.marketing-shell .marketing-nav__inner { min-height: 60px; }
.marketing-shell .marketing-brand span {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.2px;
  color: var(--ut-text);
}
.marketing-shell .marketing-nav__links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ut-text-2);
  padding: 7px 13px;
  border-radius: 8px;
}
.marketing-shell .marketing-nav__links a:hover {
  color: var(--ut-text);
  background: var(--ut-surface-2);
}
.marketing-shell .marketing-nav__links a.is-active {
  color: var(--ut-accent);
  background: color-mix(in srgb, var(--ut-accent) 12%, transparent);
  font-weight: 550;
}
.marketing-shell .marketing-theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--ut-surface-2);
  color: var(--ut-text-2);
}
.marketing-shell .marketing-theme-toggle:hover { color: var(--ut-text); }
.marketing-shell .marketing-lang-switcher {
  border: 1px solid var(--ut-border);
  border-radius: 8px;
  background: var(--ut-surface);
  padding: 2px;
  gap: 0;
}
.marketing-shell .marketing-lang-switcher a {
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--ut-text-2);
}
.marketing-shell .marketing-lang-switcher a.is-active {
  background: var(--ut-accent);
  color: #fff;
}

/* ---------- buttons: square-ish, flat, 13px (prototype .ut-btn-*) ---------- */
.marketing-shell .marketing-btn {
  min-height: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0;
  box-shadow: none;
}
.marketing-shell .marketing-btn:hover { transform: none; box-shadow: none; }
.marketing-shell .marketing-btn--primary {
  background: var(--ut-accent);
  border-color: var(--ut-accent);
  color: #fff;
}
.marketing-shell .marketing-btn--primary:hover { filter: brightness(1.06); }
.marketing-shell .marketing-btn--secondary,
.marketing-shell .marketing-btn--ghost {
  background: var(--ut-surface);
  border: 1px solid var(--ut-border);
  color: var(--ut-text-2);
}
.marketing-shell .marketing-btn--secondary:hover,
.marketing-shell .marketing-btn--ghost:hover {
  background: var(--ut-surface-2);
  color: var(--ut-text);
}
/* hero CTAs stay a little larger than nav buttons */
.marketing-shell .marketing-hero__actions .marketing-btn,
.marketing-shell .cta-band__actions .marketing-btn {
  padding: 12px 22px;
  font-size: 14px;
}

/* ---------- eyebrow -> the app's uppercase micro-label ---------- */
.marketing-shell .marketing-eyebrow {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--ut-text-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ---------- surfaces ---------- */
.marketing-shell .marketing-card,
.marketing-shell .marketing-panel,
.marketing-shell .plan-card,
.marketing-shell .security-card,
.marketing-shell .feature-stack__item,
.marketing-shell .marketing-form-panel,
.marketing-shell .marketing-accordion-item,
.marketing-shell .marketing-step,
.marketing-shell .cta-band,
.marketing-shell .exchange-strip,
.marketing-shell .marketing-hero__visual-frame {
  background: var(--ut-surface);
  background-image: none;
  border: 1px solid var(--ut-border);
  border-radius: var(--mk-radius-lg);
  box-shadow: var(--ut-shadow);
}
.marketing-shell .marketing-card--soft { background: var(--ut-surface-2); }
.marketing-shell .marketing-card--lifted { box-shadow: var(--ut-shadow); }
.marketing-shell .marketing-card h3,
.marketing-shell .security-card h3,
.marketing-shell .feature-stack__item h3 { margin-bottom: 0.4rem; }
.marketing-shell .marketing-card p,
.marketing-shell .marketing-section-header p,
.marketing-shell .marketing-hero__subtitle {
  color: var(--ut-text-2);
}

/* section rhythm: the terminal look is tighter than the old marketing scale */
.marketing-shell .marketing-section { padding-block: 3.25rem; }
.marketing-shell .marketing-section-header { gap: 0.6rem; margin-bottom: 1.5rem; }
.marketing-shell .marketing-grid { gap: 14px; }

/* ---------- pricing ---------- */
.marketing-shell .plan-card__price { font-size: 2.1rem; font-weight: 700; }
.marketing-shell .plan-card__badge,
.marketing-shell .exchange-strip__badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ut-accent) 14%, transparent);
  color: var(--ut-accent);
  border: 0;
}
.marketing-shell .plan-card__meta,
.marketing-shell .plan-card__savings,
.marketing-shell .pricing-disclaimer,
.marketing-shell .pricing-toolbar__note { font-size: 11.5px; color: var(--ut-text-muted); }
.marketing-shell .pricing-toggle {
  background: var(--ut-surface);
  border: 1px solid var(--ut-border);
  border-radius: 8px;
  padding: 2px;
}
.marketing-shell .pricing-toggle button,
.marketing-shell .pricing-toggle a {
  border: 0;
  background: transparent;
  color: var(--ut-text-2);
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
}
.marketing-shell .pricing-toggle .is-active,
.marketing-shell .pricing-toggle [aria-pressed="true"] {
  background: var(--ut-accent);
  color: #fff;
}
.marketing-shell .plan-card__button { border-radius: 8px; }

/* ---------- lists / steps / rails ---------- */
.marketing-shell .marketing-check-list li,
.marketing-shell .plan-card__bullets li,
.marketing-shell .security-card__bullets li,
.marketing-shell .feature-stack__bullets li,
.marketing-shell .marketing-hero__bullets li {
  font-size: 13.5px;
  color: var(--ut-text-2);
}
.marketing-shell .marketing-check-list li::before,
.marketing-shell .plan-card__bullets li::before,
.marketing-shell .marketing-hero__bullets li::before { color: var(--ut-green); }
.marketing-shell .feature-stack__index,
.marketing-shell .security-card__index,
.marketing-shell .marketing-step__index {
  background: var(--ut-surface-3);
  color: var(--ut-text-2);
  border: 0;
  font-family: var(--ut-mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 8px;
}
.marketing-shell .security-card__rail-dot { background: var(--ut-accent); }
.marketing-shell .security-card__rail-label { font-size: 10px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ut-text-muted); }

/* ---------- faq accordion ---------- */
.marketing-shell .marketing-accordion-item summary,
.marketing-shell .marketing-accordion-item > button {
  font-size: 14px;
  font-weight: 600;
  color: var(--ut-text);
}
.marketing-shell .marketing-accordion-item p { font-size: 13.5px; color: var(--ut-text-2); }
.marketing-shell .faq-page-block__anchors a {
  font-size: 11.5px;
  border: 1px solid var(--ut-border);
  background: var(--ut-surface);
  color: var(--ut-text-2);
  border-radius: 20px;
  padding: 5px 11px;
}
.marketing-shell .faq-page-block__anchors a:hover {
  color: var(--ut-accent);
  border-color: color-mix(in srgb, var(--ut-accent) 40%, transparent);
}

/* ---------- forms (contact) ---------- */
.marketing-shell .marketing-contact-form label {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ut-text-muted);
  margin-bottom: 6px;
}
.marketing-shell .marketing-contact-form input,
.marketing-shell .marketing-contact-form select,
.marketing-shell .marketing-contact-form textarea {
  background: var(--ut-surface-2);
  border: 1px solid var(--ut-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ut-text);
}
.marketing-shell .marketing-contact-form input::placeholder,
.marketing-shell .marketing-contact-form textarea::placeholder { color: var(--ut-text-muted); }
.marketing-shell .marketing-contact-form input:focus,
.marketing-shell .marketing-contact-form select:focus,
.marketing-shell .marketing-contact-form textarea:focus {
  outline: 0;
  border-color: var(--ut-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ut-accent) 16%, transparent);
}
.marketing-shell .marketing-form-note { font-size: 11.5px; color: var(--ut-text-muted); }
.marketing-shell .marketing-alert { border-radius: 10px; font-size: 13px; }

/* ---------- trust strip / footer ---------- */
.marketing-shell .marketing-trust-strip,
.marketing-shell .exchange-strip__label,
.marketing-shell .exchange-strip__note {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ut-text-muted);
}
.marketing-shell .marketing-footer {
  background: var(--ut-surface);
  border-top: 1px solid var(--ut-border-soft);
}
.marketing-shell .marketing-footer__links a,
.marketing-shell .marketing-footer__trust { font-size: 12.5px; color: var(--ut-text-2); }
.marketing-shell .marketing-footer__links a:hover { color: var(--ut-accent); }