/* ==========================================================================
   TripDeck Product Marketing Landing Page Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Root Setup & Light-Mode Default Design System
   -------------------------------------------------------------------------- */
html:has(body.landing-page) {
  height: auto;
  overflow: visible !important;
}

/* Accessibility Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.landing-page {
  height: auto;
  min-height: 100vh;
  overflow: visible !important;
  background-color: var(--lp-bg-core, #f8fafc);
  color: var(--lp-text-primary, #0f172a);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
  margin: 0;
  padding: 0;
  line-height: 1.3;
  position: relative;
  scrollbar-gutter: stable;

  /* Design System Tokens (Light Mode Default) */
  --lp-bg-core: #f8fafc;
  --lp-surface-bg: #ffffff;
  --lp-surface-alt: #f1f5f9;
  --lp-text-primary: #0f172a;
  --lp-text-secondary: #334155;
  --lp-text-muted: #64748b;
  --lp-border-color: #cbd5e1;
  --lp-border-focus: #94a3b8;
  --lp-border-radius: 12px;

  /* Theme Specific Section Tokens */
  --lp-hero-bg: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
  --lp-cta-bg: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  --lp-cta-text: #ffffff;
  --lp-footer-bg: #f1f5f9;

  /* Button Tokens */
  --lp-btn-primary-bg: #0f172a;
  --lp-btn-primary-text: #ffffff;
  --lp-btn-primary-border: transparent;
  --lp-btn-primary-hover-bg: #1e293b;
  --lp-btn-primary-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);

  --lp-btn-secondary-bg: rgba(255, 255, 255, 0.8);
  --lp-btn-secondary-border: var(--lp-border-color);
  --lp-btn-secondary-text: var(--lp-text-primary);
  --lp-btn-secondary-hover-bg: #ffffff;

  /* Category Accent Colors */
  --lp-accent-flight: #0284c7;
  --lp-accent-flight-glow: rgba(2, 132, 199, 0.12);
  --lp-accent-lodging: #d946ef;
  --lp-accent-lodging-glow: rgba(217, 70, 239, 0.12);
  --lp-accent-car: #ea580c;
  --lp-accent-car-glow: rgba(234, 88, 12, 0.12);
  --lp-accent-dining: #e11d48;
  --lp-accent-dining-glow: rgba(225, 29, 72, 0.12);
  --lp-accent-sandbox: #16a34a;
  --lp-accent-budget: #0d9488;
  --lp-accent-budget-glow: rgba(13, 148, 136, 0.12);
}

/* Typography Line Wrapping Enhancements */
body.landing-page h1,
body.landing-page h2,
body.landing-page h3,
body.landing-page h4,
body.landing-page h5,
body.landing-page h6,
.landing-section-title,
.landing-hero-title {
  text-wrap: balance;
}

body.landing-page p,
body.landing-page li,
body.landing-page blockquote,
.landing-section-desc,
.highlight-desc {
  text-wrap: pretty;
}

/* Ensure live app mockup frame inside .landing-app-frame retains default slate theme tokens */
html:not([class*="theme-"]) .landing-app-frame,
html.theme-slate .landing-app-frame {
  --bg-core: #0a0b0d;
  --bg-surface: #12141c;
  --bg-surface-elevated: #1a1d29;
  --bg-surface-workbench: #0e1017;
  --border-workbench: #232736;
  --text-primary: #ffffff;
  --text-secondary: #acb9ca;
  --text-muted: #52637a;
  --border-color: #3d4355;
  --border-focus: #3e4866;
  --accent-flight: #00e5ff;
  --accent-flight-glow: rgba(0, 229, 255, 0.1);
  --accent-lodging: #FA60FF;
  --accent-lodging-glow: rgba(213, 0, 249, 0.1);
  --accent-car: #ffab00;
  --accent-car-glow: rgba(255, 171, 0, 0.1);
  --accent-dining: #FA7282;
  --accent-dining-glow: rgba(255, 61, 0, 0.1);
  --accent-sandbox: #00e676;
}

.landing-wrapper {
  width: 100%;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}

.landing-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   2. Section Vector Watermark Accents
   -------------------------------------------------------------------------- */
.section-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.04;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* !important needed: base.css's [hidden] rule is also !important, added
   later to stop hidden elements re-showing via a component's display:flex
   class. These 7 are the deliberate exception — decorative/preview elements
   shipped with `hidden` for a11y (aria-hidden) but always meant to render
   visually — so they have to out-rank that global rule the same way it
   out-ranks everything else. */
.section-watermark[hidden],
.landing-icon-motif[hidden],
.highlight-icon[hidden],
.mini-icon[hidden],
.card-icon-badge[hidden],
.landing-feature-card-wrapper[hidden],
.app-preview-wrapper[hidden] {
  display: flex !important;
}

.section-watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-watermark svg path,
.section-watermark svg rect,
.section-watermark svg circle,
.section-watermark svg line,
.section-watermark svg polygon {
  fill: transparent;
  stroke: var(--wm-color, var(--lp-accent-flight));
  stroke-width: 1.5px;
}

/* Section specific watermark colors */
#features-builder .section-watermark {
  --wm-color: #d1fae5;
}

#features-intelligence .section-watermark {
  --wm-color: #ffedd5;
}

#features-packing .section-watermark {
  --wm-color: #f3e8ff;
}

#features-security .section-watermark {
  --wm-color: #cffafe;
}

#features-budget .section-watermark {
  --wm-color: var(--lp-accent-budget);
}

.landing-hero-section .section-watermark {
  opacity: 0.12;
  --wm-color: var(--lp-accent-flight);
}

.watermark-plane {
  top: 50%;
  right: -50px;
  width: 420px;
  height: 420px;
  transform: translateY(-50%) rotate(-15deg);
}

.watermark-train {
  top: 50%;
  right: -50px;
  width: 380px;
  height: 380px;
  transform: translateY(-50%) rotate(8deg);
  color: var(--lp-accent-lodging);
}

.watermark-compass {
  top: 50%;
  left: -50px;
  width: 360px;
  height: 360px;
  transform: translateY(-50%) rotate(-12deg);
  color: var(--lp-accent-car);
}

.watermark-passport {
  top: 50%;
  right: -50px;
  width: 380px;
  height: 380px;
  transform: translateY(-50%) rotate(-10deg);
  color: var(--lp-accent-sandbox);
}

.watermark-padlock {
  top: 50%;
  left: -50px;
  width: 360px;
  height: 360px;
  transform: translateY(-50%) rotate(15deg);
  color: var(--lp-accent-dining);
}

.watermark-wallet {
  top: 50%;
  right: -50px;
  width: 380px;
  height: 380px;
  transform: translateY(-50%) rotate(-10deg);
  color: var(--lp-accent-budget);
}

/* --------------------------------------------------------------------------
   3. Header Navigation
   -------------------------------------------------------------------------- */
.landing-header-section {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--lp-surface-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lp-border-color);
  width: 100%;
}

.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}

.landing-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.landing-logo-text {
  font-size: 28px;
  font-weight: 900;
  color: var(--lp-text-primary);
  margin: 0;
  letter-spacing: -0.75px;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1;
}

.landing-logo-text span {
  color: var(--lp-accent-flight, #00e5ff);
  transition: color 0.25s ease;
}

.landing-nav-menu {
  display: flex;
  gap: 24px;
}

.landing-nav-link {
  color: var(--lp-text-secondary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.15s ease;
}

.landing-nav-link:hover {
  color: var(--lp-accent-flight);
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.landing-signin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--lp-btn-primary-bg);
  border: 1px solid var(--lp-btn-primary-border);
  color: var(--lp-btn-primary-text);
  text-decoration: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: var(--lp-border-radius);
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.2;
  box-shadow: var(--lp-btn-primary-shadow);
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.landing-signin-link:hover {
  background-color: var(--lp-btn-primary-hover-bg);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   4. Hero Section
   -------------------------------------------------------------------------- */
.landing-hero-section {
  position: relative;
  width: 100%;
  padding: 80px 0 60px;
  background: var(--lp-hero-bg);
  overflow: hidden;
}

.landing-hero {
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}

.landing-hero-title {
  font-size: 64px;
  font-weight: 700;
  -webkit-text-stroke: 0.5px currentColor;
  text-stroke: 0.5px currentColor;
  line-height: 1.1;
  letter-spacing: -2px;
  margin: 0 auto 22px;
  max-width: 900px;
  color: var(--lp-text-primary);
}

.landing-hero-subtitle {
  font-size: 21px;
  color: var(--lp-text-secondary);
  margin: 0 auto 36px;
  max-width: 760px;
  font-weight: 400;
  line-height: 1.6;
}

.landing-hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 50px;
  position: relative;
  z-index: 5;
}

.landing-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  box-sizing: border-box;
  background: var(--lp-btn-primary-bg);
  color: var(--lp-btn-primary-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 0 32px;
  border-radius: var(--lp-border-radius);
  border: 1px solid var(--lp-btn-primary-border);
  cursor: pointer;
  box-shadow: var(--lp-btn-primary-shadow);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.landing-primary-btn:hover,
.landing-primary-btn:focus,
.landing-primary-btn:visited {
  text-decoration: none;
  transform: translateY(-2px);
  background-color: var(--lp-btn-primary-hover-bg);
}

.landing-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  box-sizing: border-box;
  background: var(--lp-btn-secondary-bg);
  border: 1px solid var(--lp-btn-secondary-border);
  color: var(--lp-btn-secondary-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 0 28px;
  border-radius: var(--lp-border-radius);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.landing-secondary-btn:hover,
.landing-secondary-btn:focus,
.landing-secondary-btn:visited {
  text-decoration: none;
  border-color: var(--lp-text-secondary);
  background: var(--lp-btn-secondary-hover-bg);
}

.landing-hero-highlights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1050px;
  margin: 40px auto 0;
}

.highlight-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 16px;
  text-align: left;
}

.highlight-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--lp-border-radius);
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  color: var(--lp-accent-flight);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.highlight-icon svg {
  width: 20px;
  height: 20px;
}

.highlight-content {
  display: flex;
  flex-direction: column;
}

.highlight-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-text-primary);
  line-height: 1.2;
}

.highlight-desc {
  font-size: 13px;
  color: var(--lp-text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   5. Product Command Center Showcase
   -------------------------------------------------------------------------- */
.landing-preview-section {
  padding: 80px 0;
  background-color: var(--lp-surface-alt);
}

.landing-section-header {
  margin-bottom: 36px;
}

.landing-section-header.text-center {
  text-align: center;
}

.landing-tag {
  font-size: 14px;
  font-weight: 700;
  color: var(--section-accent, var(--lp-accent-flight));
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Each repeating feature section gets one accent, sourced from the same
   category color its icon-motif already uses, so the tag, checkmarks, and
   mini-icons inside a section always agree instead of mixing colors. */
#features-builder {
  --section-accent: var(--lp-accent-flight);
  --section-accent-glow: var(--lp-accent-flight-glow);
}

#features-intelligence {
  --section-accent: var(--lp-accent-lodging);
  --section-accent-glow: var(--lp-accent-lodging-glow);
}

#features-packing {
  --section-accent: var(--lp-accent-car);
  --section-accent-glow: var(--lp-accent-car-glow);
}

#features-security {
  --section-accent: var(--lp-accent-sandbox);
}

#features-mytrips {
  --section-accent: var(--lp-accent-lodging);
  --section-accent-glow: var(--lp-accent-lodging-glow);
}

#features-budget {
  --section-accent: var(--lp-accent-budget);
  --section-accent-glow: var(--lp-accent-budget-glow);
}

.landing-section-title {
  font-size: 42px;
  font-weight: 700;
  -webkit-text-stroke: 0.4px currentColor;
  text-stroke: 0.4px currentColor;
  letter-spacing: -1.2px;
  margin: 0;
  color: var(--lp-text-primary);
}

.landing-section-desc {
  font-size: 20px;
  color: var(--lp-text-secondary);
  margin: 0 auto;
  max-width: 800px;
}

/* Desktop App Frame Container */
.landing-app-frame {
  background: var(--bg-core);
  border: 1px solid var(--border-color);
  border-radius: var(--lp-border-radius);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  font-family: var(--font-sans) !important;
}

.landing-app-frame button,
.landing-app-frame input,
.landing-app-frame select,
.landing-app-frame textarea {
  font-family: var(--font-sans) !important;
}

.landing-app-frame code,
.landing-app-frame pre,
.landing-app-frame .flap-char,
.landing-app-frame .monospace {
  font-family: var(--font-mono, monospace) !important;
}

.landing-app-frame .live-hud {
  position: relative !important;
  top: auto !important;
  border-bottom: 1px solid var(--border-color);
}

.landing-app-frame .app-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  height: 685px;
  overflow: hidden;
  position: relative;
}

/* Fakey Packing/Budget overlays: absolute over the canvas column, matching
   how the real app's .panel-packing/.panel-budget slide in on desktop
   (see css/base.css) rather than shrinking the grid columns. */
.landing-side-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-color);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  z-index: 25;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-side-panel.collapsed {
  transform: translateX(100%);
  /* translateX(100%) only clears the panel's own box, not the -8px/24px
     box-shadow trailing off its left edge — that shadow lands right back
     at the container's boundary and bleeds inward, showing as a permanent
     line even while collapsed. Drop it until the panel is actually open. */
  box-shadow: none;
}

.landing-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.landing-side-panel-header h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
}

.btn-close-side-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: var(--border-radius-sm);
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.landing-side-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mockup-budget-summary {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mockup-budget-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mockup-budget-summary-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
}

.mockup-budget-summary-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-flight);
}

.mockup-budget-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.mockup-budget-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.mockup-budget-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.mockup-budget-item-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
}

.mockup-budget-item-amt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
}

.mockup-budget-item-of {
  color: var(--text-muted);
}

.landing-app-frame .panel-workbench {
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface-workbench, #0e1017);
  overflow-y: auto;
}

.landing-app-frame .panel-canvas {
  display: flex;
  flex-direction: column;
  background: var(--bg-core);
  overflow-y: auto;
}

.landing-app-frame .deck-map {
  width: 100%;
  aspect-ratio: 800 / 220;
  height: auto;
  max-height: 220px;
  position: relative;
  background-color: #0c0f16;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 0),
    linear-gradient(rgba(255, 255, 255, 0.008) 1px, transparent 0),
    linear-gradient(90deg, rgba(255, 255, 255, 0.008) 1px, transparent 0);
  background-size: 20px 20px, 40px 40px, 40px 40px;
  background-position: center;
  background-repeat: repeat;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}

.route-animated {
  stroke-dashoffset: 24;
  animation: dashRoute 3s linear infinite;
  will-change: stroke-dashoffset;
}

@keyframes dashRoute {
  to {
    stroke-dashoffset: 0;
  }
}

.landing-app-frame .deck-scroll-wrapper {
  padding: 16px 20px;
}

.landing-app-frame .category-pills-row {
  margin-top: 14px;
}

.landing-app-frame .sandbox-container {
  margin-top: 20px;
}

/* .outline-header h4 is styled in visual-builder.css for the real app;
   the landing demo widget uses h3 for correct document heading order,
   so mirror that styling here under the landing-scoped h3. */
.landing-app-frame .outline-header h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}

.theme-journal .landing-app-frame .outline-header h3 {
  color: #4e3535 !important;
  font-size: 14px !important;
}

.theme-journal .landing-app-frame .sandbox-header h3 {
  font-family: 'Caveat', cursive !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #5a4800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.landing-app-frame .sandbox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.landing-app-frame .sandbox-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.landing-app-frame .sandbox-count {
  font-size: 11px;
  color: var(--text-muted);
}

.landing-app-frame .sandbox-list {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. Feature Sections & Graphic Cards
   -------------------------------------------------------------------------- */
.landing-feature-block {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--lp-border-color);
}

#features-builder {
  background-color: #ecfdf5;
}

#features-intelligence {
  background-color: #fff7ed;
}

#features-packing {
  background-color: #faf5ff;
}

#features-security {
  background-color: #ecfeff;
}

/* Subtle Cartographic Grid Texture on Select Sections */
#features-builder::before,
#features-security::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 59px,
      rgba(0, 0, 0, 0.028) 59px,
      rgba(0, 0, 0, 0.028) 60px),
    repeating-linear-gradient(to right,
      transparent 0px,
      transparent 79px,
      rgba(0, 0, 0, 0.018) 79px,
      rgba(0, 0, 0, 0.018) 80px);
}

.landing-feature-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
  position: relative;
  z-index: 3;
  width: 100%;
}

.landing-icon-motif {
  width: 52px;
  height: 52px;
  border-radius: var(--lp-border-radius);
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.landing-icon-motif svg {
  width: 26px;
  height: 26px;
}

.landing-icon-motif.flight {
  color: var(--lp-accent-flight);
}

.landing-icon-motif.car {
  color: var(--lp-accent-car);
}

.landing-icon-motif.lodging {
  color: var(--lp-accent-lodging);
}

.landing-icon-motif.dining {
  color: var(--lp-accent-dining);
}

.landing-icon-motif.sandbox {
  color: var(--lp-accent-sandbox);
}

.landing-icon-motif.budget {
  color: var(--lp-accent-budget);
}

.landing-block-title {
  font-size: 38px;
  font-weight: 700;
  -webkit-text-stroke: 0.4px currentColor;
  text-stroke: 0.4px currentColor;
  letter-spacing: -1px;
  margin: 0 0 16px;
  color: var(--lp-text-primary);
}

.landing-block-desc {
  font-size: 18px;
  color: var(--lp-text-secondary);
  margin: 0 auto 28px;
  line-height: 1.6;
  max-width: 720px;
}

.landing-checklist {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 600px;
}

.landing-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: var(--lp-text-secondary);
}

.landing-checklist p {
  text-wrap: pretty;
  margin: 0;
}

.chk-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--section-accent-glow, var(--lp-accent-flight-glow));
  color: var(--section-accent, var(--lp-accent-flight));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.landing-checklist strong {
  color: var(--lp-text-primary);
}

/* Feature Graphic Cards */
.landing-feature-card-wrapper {
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 28px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.landing-feature-card-graphic {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.demo-day-group {
  background: var(--lp-surface-alt);
  border: 1px solid var(--lp-border-color);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-day-header {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--lp-border-color);
  padding-bottom: 8px;
}

.demo-day-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--lp-accent-flight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.demo-day-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--lp-text-primary);
}

.demo-day-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: 8px;
  padding: 10px 12px;
  position: relative;
  cursor: grab;
  user-select: none;
  transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.demo-item:active {
  cursor: grabbing;
}

.demo-item.type-F {
  border-left: 3px solid var(--lp-accent-flight);
}

.demo-item.type-H {
  border-left: 3px solid var(--lp-accent-lodging);
}

.demo-item.type-A {
  border-left: 3px solid var(--lp-accent-car);
}

.demo-item.dragging {
  opacity: 0.45;
  border-color: var(--lp-accent-flight) !important;
  transform: scale(0.98);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.demo-handle {
  font-size: 12px;
  color: var(--lp-text-muted);
  cursor: grab;
}

.demo-icon {
  font-size: 16px;
}

.demo-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.demo-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-text-primary);
  line-height: 1.2;
}

.demo-meta {
  font-size: 11px;
  color: var(--lp-text-muted);
}

/* Subfeature Mini Grid */
.landing-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 24px auto 0;
  max-width: 1000px;
  width: 100%;
  text-align: left;
}

.mini-feature-card {
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 16px;
}

.mini-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--lp-surface-alt);
  color: var(--section-accent, var(--lp-accent-flight));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.mini-icon svg {
  width: 17px;
  height: 17px;
}

.mini-feature-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--lp-text-primary);
  text-wrap: balance;
}

.mini-feature-card p {
  font-size: 15px;
  color: var(--lp-text-secondary);
  margin: 0;
  line-height: 1.5;
  text-wrap: balance;
}

/* 2x2 Mini Grid for Intelligence Feature Block */
#features-intelligence .landing-mini-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  #features-intelligence .landing-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* Packing List Showcase */
.landing-packing-preview-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.packing-alert-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--lp-text-primary);
  margin-bottom: 2px;
}

.packing-alert-banner .alert-icon {
  font-size: 20px;
}

.packing-alert-banner strong {
  color: var(--lp-accent-flight);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}

.packing-alert-banner .alert-sub {
  font-size: 12px;
  color: var(--lp-text-secondary);
  margin-top: 1px;
}

.landing-packing-preview-card .packing-preview-header {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-text-primary);
}

.landing-packing-preview-card .packing-pct {
  color: var(--lp-accent-sandbox);
  transition: color 0.3s ease;
}

.landing-packing-preview-card .packing-progress-bar {
  height: 8px;
  background: var(--lp-surface-alt);
  border-radius: var(--lp-border-radius);
  overflow: hidden;
}

.landing-packing-preview-card .packing-progress-fill {
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, var(--lp-accent-flight), var(--lp-accent-sandbox));
  border-radius: var(--lp-border-radius);
  transition: width 0.4s ease;
}

.landing-packing-preview-card .packing-items-mock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-packing-preview-card .packing-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--lp-bg-core);
  border-radius: var(--lp-border-radius);
  border: 1px solid var(--lp-border-color);
  color: var(--lp-text-primary);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
}

.landing-packing-preview-card .packing-item:hover {
  border-color: rgba(0, 229, 255, 0.4);
}

.landing-packing-preview-card .packing-item.checked {
  color: var(--lp-text-muted);
  text-decoration: line-through;
  opacity: 0.85;
}

.landing-packing-preview-card .packing-item .box {
  font-weight: bold;
  font-size: 15px;
  width: 16px;
  text-align: center;
}

.suggestion-tag {
  margin-left: auto;
  font-size: 11px;
  color: var(--lp-accent-car);
  background: rgba(234, 88, 12, 0.1);
  padding: 2px 8px;
  border-radius: var(--lp-border-radius);
  text-decoration: none !important;
}

/* Budget Showcase — its own classes, not a reskin of the packing preview
   above. A budget category is never "done" the way a packed item is, so
   there's no checkbox/checked/strikethrough state here — each row instead
   gets a left accent + tinted amount pill in that category's own color
   (matching CATEGORY_COLORS in js/modules/budget.js) so the preview reads
   as a mini budget breakdown, not a to-do list. */
.landing-budget-preview-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  position: relative;
}

.landing-budget-preview-card .budget-preview-header {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-text-primary);
}

.landing-budget-preview-card .budget-preview-total {
  color: var(--lp-accent-sandbox);
  font-variant-numeric: tabular-nums;
}

.landing-budget-preview-card .budget-preview-currency {
  font-size: 11px;
  font-weight: 600;
  color: var(--lp-text-secondary);
  letter-spacing: 0.5px;
}

.landing-budget-preview-card .budget-preview-progress-bar {
  height: 8px;
  background: var(--lp-surface-alt);
  border-radius: var(--lp-border-radius);
  overflow: hidden;
  position: relative;
}

.landing-budget-preview-card .budget-preview-progress-fill {
  height: 100%;
  display: flex;
  border-radius: var(--lp-border-radius);
  width: 0%;
  transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.landing-budget-preview-card .budget-fill-segment {
  height: 100%;
  flex-shrink: 0;
}

.landing-budget-preview-card .seg-lodging {
  background: #8b5cf6;
}

.landing-budget-preview-card .seg-dining {
  background: #f59e0b;
}

.landing-budget-preview-card .seg-transit {
  background: #3b82f6;
}

.landing-budget-preview-card .seg-activities {
  background: #10b981;
}

.landing-budget-preview-card .budget-preview-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
}

.landing-budget-preview-card.is-visible .budget-preview-progress-fill::after {
  animation: budget-fill-shimmer 1.4s ease-out 1.1s;
}

@keyframes budget-fill-shimmer {
  to {
    transform: translateX(100%);
  }
}

.landing-budget-preview-card .budget-preview-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-budget-preview-card .budget-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 10px 12px;
  background: var(--lp-bg-core);
  border-radius: var(--lp-border-radius);
  border: 1px solid var(--lp-border-color);
  border-left: 3px solid var(--row-accent, var(--lp-border-color));
  color: var(--lp-text-primary);
  opacity: 0;
  transform: translateX(-8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.5s ease, border-color 0.2s ease;
}

.landing-budget-preview-card.is-visible .budget-preview-row {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease,
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.landing-budget-preview-card.is-visible .budget-preview-row:nth-child(1) {
  transition-delay: 0.15s;
}

.landing-budget-preview-card.is-visible .budget-preview-row:nth-child(2) {
  transition-delay: 0.25s;
}

.landing-budget-preview-card.is-visible .budget-preview-row:nth-child(3) {
  transition-delay: 0.35s;
}

.landing-budget-preview-card.is-visible .budget-preview-row:nth-child(4) {
  transition-delay: 0.45s;
}

.landing-budget-preview-card .budget-preview-row:hover {
  transform: translateX(2px);
  border-color: var(--row-accent, var(--lp-border-color));
  box-shadow: 0 4px 14px -6px var(--row-accent-bg, transparent);
}

.landing-budget-preview-card .budget-preview-row .box {
  width: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--row-accent, var(--lp-text-secondary));
}

.landing-budget-preview-card .budget-preview-row .amount-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--row-accent, var(--lp-text-secondary));
  background: var(--row-accent-bg, rgba(255, 255, 255, 0.08));
  padding: 2px 8px;
  border-radius: var(--lp-border-radius);
  transition: transform 0.2s ease;
}

.landing-budget-preview-card .budget-preview-row:hover .amount-tag {
  transform: scale(1.06);
}

.landing-budget-preview-card .budget-preview-toast {
  position: absolute;
  right: 18px;
  bottom: -16px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  color: var(--lp-text-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--lp-border-radius);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
}

.landing-budget-preview-card .budget-preview-toast .box {
  color: #10b981;
  display: flex;
}

.landing-budget-preview-card.is-visible .budget-preview-toast {
  animation: budget-toast-pop 3.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.3s;
}

@keyframes budget-toast-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }

  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-budget-preview-card .budget-preview-row {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .landing-budget-preview-card .budget-preview-progress-fill {
    transition: none;
  }

  .landing-budget-preview-card .budget-preview-progress-fill::after {
    display: none;
  }

  .landing-budget-preview-card .budget-preview-toast {
    display: none;
  }
}

.landing-budget-preview-card .row-lodging {
  --row-accent: #8b5cf6;
  --row-accent-bg: rgba(139, 92, 246, 0.12);
}

.landing-budget-preview-card .row-dining {
  --row-accent: #f59e0b;
  --row-accent-bg: rgba(245, 158, 11, 0.12);
}

.landing-budget-preview-card .row-transit {
  --row-accent: #3b82f6;
  --row-accent-bg: rgba(59, 130, 246, 0.12);
}

.landing-budget-preview-card .row-activities {
  --row-accent: #10b981;
  --row-accent-bg: rgba(16, 185, 129, 0.12);
}

/* Interactive Map & Weather Showcase Graphic */
#features-intelligence .landing-feature-grid {
  align-items: start;
}

.map-milestone-ticker-header {
  background: var(--bg-surface-workbench, #0e1017);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: var(--lp-border-radius);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.map-milestone-ticker-header .hud-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.75px;
  color: var(--lp-accent-flight);
  font-weight: 800;
}

#demo-map-milestone-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px;
  min-height: 23px;
  font-weight: bold;
  color: #ffffff;
}

#demo-map-milestone-timer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px;
  min-height: 17px;
  font-size: 10px;
  color: #a1a1aa;
}

#demo-map-milestone-text .flap-char,
#demo-map-milestone-timer .flap-char {
  font-size: 13px;
  width: 14px;
  height: 20px;
  margin: 0 1px;
  border-color: rgba(255, 255, 255, 0.12);
  background: #15161c;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-family: monospace;
}

/* The timer flap text runs up to ~19 chars ("4 hours 32 minutes"), which at
   the default flap size overflows most iPhone widths by just enough to wrap
   the last couple characters onto their own line. Shrink the tiles below
   the point where that starts happening. */
@media (max-width: 480px) {
  #demo-map-milestone-timer {
    gap: 1px;
  }

  #demo-map-milestone-timer .flap-char {
    font-size: 10px;
    width: 10px;
    height: 15px;
    margin: 0 0.5px;
  }
}

.landing-map-preview-card {
  background: #0d121c;
  border-radius: var(--lp-border-radius);
  border: 1px solid var(--border-color);
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 51.47%;
  /* 280/544 aspect ratio */
  max-width: 100%;
  width: 100%;
  margin: 0 auto 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.landing-map-preview-card svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.landing-map-preview-card image {
  opacity: 0.85;
  filter: brightness(0.85) contrast(1.1);
}

.preview-marker circle.marker-activity {
  fill: var(--accent-activity);
  stroke: #0a0b0d;
  stroke-width: 2.5;
  filter: drop-shadow(0px 0px 4px var(--accent-activity));
}

.preview-marker circle.marker-dining {
  fill: var(--accent-dining);
  stroke: #0a0b0d;
  stroke-width: 2.5;
  filter: drop-shadow(0px 0px 4px var(--accent-dining));
}

.preview-marker circle.marker-lodging {
  fill: var(--accent-lodging);
  stroke: #0a0b0d;
  stroke-width: 2.5;
  filter: drop-shadow(0px 0px 4px var(--accent-lodging));
}

.preview-marker text {
  filter: drop-shadow(0px 1px 2px #000);
  font-family: var(--font-sans);
}

/* Map Label Pill Badges & High-Contrast Halos */
.map-label-pill {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 1px;
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15));
}

.preview-marker.map-label-group text {
  filter: none !important;
}

.deck-map text {
  font-family: var(--font-sans);
  paint-order: stroke fill;
  stroke: rgba(15, 23, 42, 0.7);
  stroke-width: 2px;
  stroke-linejoin: round;
}

/* Light-map themes: use dark charcoal labels + light pill badges */
.theme-journal .preview-marker text,
.theme-terminal .preview-marker text,
.theme-roadtrip .preview-marker text {
  fill: #1a1a1a;
  filter: none;
}

.theme-journal .map-label-pill,
.theme-terminal .map-label-pill,
.theme-roadtrip .map-label-pill {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(0, 0, 0, 0.15);
}

.theme-journal .deck-map text,
.theme-terminal .deck-map text,
.theme-roadtrip .deck-map text {
  fill: #0f172a;
  stroke: rgba(255, 255, 255, 0.9);
}

/* Privacy & Security 3-Card Grid */
.privacy-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 900px) {
  .privacy-cards-grid {
    grid-template-columns: 1fr;
  }
}

.privacy-feature-card {
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.privacy-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.3);
}

.privacy-feature-card .card-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--lp-border-radius);
  background: var(--lp-surface-alt);
  color: var(--lp-accent-sandbox, var(--lp-accent-flight));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.privacy-feature-card .card-icon-badge svg {
  width: 22px;
  height: 22px;
}

.privacy-feature-card .card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-text-primary);
  margin: 0 0 10px;
}

.privacy-feature-card .card-desc {
  font-size: 14px;
  color: var(--lp-text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
  flex-grow: 1;
}

.privacy-feature-card .card-visual-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.privacy-feature-card .strip-pill {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--section-accent);
  background: rgb(from var(--section-accent) r g b / 15%);
  border: 1px solid var(--section-accent);
  padding: 4px 10px;
  border-radius: 6px;
}

#privacy-scramble-text {
  font-family: var(--font-mono, monospace);
  color: var(--lp-accent-flight, #0284c7);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* My Trips Dashboard Showcase Card */
.mytrips-preview-card {
  background: var(--lp-surface-bg);
  padding: 20px;
  border-radius: var(--lp-border-radius);
  border: 1px solid var(--lp-border-color);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

.mytrips-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.mytrips-preview-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--lp-text-primary);
}

.mytrips-badge-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--lp-surface-alt);
  color: var(--lp-text-muted);
}

#features-mytrips .landing-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 640px) {
  #features-mytrips .landing-mini-grid {
    grid-template-columns: 1fr;
  }
}

.mytrips-search-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--lp-bg-core);
  border: 1px solid var(--lp-border-color);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

.mytrips-search-wrapper .search-icon {
  font-size: 13px;
  color: var(--lp-text-muted);
}

.mytrips-search-input {
  background: transparent;
  border: none;
  color: var(--lp-text-primary);
  font-size: 13px;
  width: 100%;
  outline: none;
}

.mytrips-search-input::placeholder {
  color: var(--lp-text-muted);
}

.mytrips-filter-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.mytrips-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--lp-text-muted);
  background: var(--lp-bg-core);
  border: 1px solid var(--lp-border-color);
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.mytrips-pill:hover {
  border-color: var(--lp-accent-flight);
  color: var(--lp-text-primary);
}

.mytrips-pill.active {
  background: rgba(0, 229, 255, 0.12);
  color: var(--lp-accent-flight);
  border-color: rgba(0, 229, 255, 0.3);
}

.mytrips-list-mock {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mytrip-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--lp-bg-core);
  border: 1px solid var(--lp-border-color);
  border-radius: 8px;
  opacity: 0.45;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  gap: 8px;
}

.mytrip-item.active {
  border-color: var(--lp-accent-flight);
  background: var(--lp-surface-bg);
  opacity: 1;
}

.mytrip-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.mytrip-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-text-primary);
}

.mytrip-dates {
  font-size: 11px;
  color: var(--lp-text-muted);
}

.mytrip-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.mytrip-tag.current {
  background: rgba(2, 132, 199, 0.12);
  color: var(--lp-accent-flight);
}

.mytrip-tag.shared {
  background: rgba(217, 70, 239, 0.12);
  color: var(--lp-accent-lodging);
}

.mytrip-tag.archive {
  background: var(--lp-surface-alt);
  color: var(--lp-text-muted);
}

/* Markdown Export Bonus Card */
.landing-feature-block.markdown-bonus {
  background-color: var(--lp-bg-core);
  padding: 60px 0;
  --section-accent: var(--lp-accent-dining);
  --section-accent-glow: var(--lp-accent-dining-glow);
}

.landing-markdown-bonus-card {
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 36px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.bonus-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: var(--section-accent, var(--lp-accent-flight));
  background: var(--section-accent-glow, rgba(0, 229, 255, 0.08));
  border: 1px solid var(--section-accent-glow, rgba(0, 229, 255, 0.2));
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.landing-markdown-bonus-card h3 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--lp-text-primary);
}

.landing-markdown-bonus-card p {
  font-size: 16px;
  color: var(--lp-text-secondary);
  margin: 0 0 24px;
}

.markdown-snippet-box {
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: var(--lp-border-radius);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.markdown-snippet-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f4f4f5;
  padding: 8px 14px;
  border-bottom: 1px solid #000000;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: #374151;
  font-weight: 600;
}

.copy-snippet-btn {
  font-size: 11px;
  font-weight: 700;
  color: #111827;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 4px 10px;
  border-radius: 0px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.copy-snippet-btn:hover {
  border-color: #0284c7;
  color: #0284c7;
  background: #f0f9ff;
}

.markdown-code-pre {
  margin: 0;
  padding: 16px 20px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  line-height: 1.8;
  overflow-x: auto;
  background: #ffffff;
  color: #111827;
}

.markdown-code-pre code {
  display: block;
}

.md-h2 {
  color: #0284c7;
  font-weight: 800;
}

.md-tag {
  font-weight: 800;
  margin-right: 4px;
}

.md-tag.flight {
  color: #0284c7;
}

.md-tag.lodging {
  color: #7e22ce;
}

.md-tag.dining {
  color: #15803d;
}

.md-title {
  color: #111827;
  font-weight: 700;
}

.md-sub {
  color: #374151;
  font-weight: 500;
}

.md-geo {
  color: #4b5563;
  font-weight: 500;
}

.landing-theme-selector-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.landing-theme-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--lp-text-muted);
}

/* Controlled grid: 4 columns on wide displays (≥840px), collapsing to a balanced 2x2 grid
   on tablet and mobile viewports (<840px) so pills fill rows evenly without orphan buttons. */
.landing-theme-pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 820px;
}

@media (max-width: 840px) {
  .landing-theme-pills {
    grid-template-columns: repeat(2, 1fr);
  }
}

.landing-theme-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  color: var(--lp-text-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--lp-border-radius);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.landing-theme-pill:hover {
  border-color: var(--lp-border-focus);
  transform: translateY(-1px);
}

.landing-theme-pill.active {
  border-color: var(--lp-accent-flight);
  background: #f0fdf4;
}

.landing-theme-pill .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot.slate {
  background: #00f0ff;
}

.dot.journal {
  background: #d4a373;
}

.dot.terminal {
  background: #3b82f6;
}

.dot.airport {
  background: #ea580c;
}

.dot.roadtrip {
  background: #006B3F;
}

/* --------------------------------------------------------------------------
   8. Documentation & Support Hub, FAQ, Call-to-Action & Footer
   -------------------------------------------------------------------------- */
.landing-docs-section {
  padding: 80px 0;
  background-color: var(--lp-surface-alt);
  border-top: 1px solid var(--lp-border-color);
  border-bottom: 1px solid var(--lp-border-color);
  position: relative;
}

.landing-docs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.landing-doc-card {
  background-color: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.landing-doc-card:hover {
  transform: translateY(-4px);
  border-color: var(--lp-accent-flight);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08);
}

.doc-card-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--lp-accent-flight);
  margin-bottom: 16px;
}

.doc-card-icon {
  font-size: 32px;
  margin-bottom: 12px;
  line-height: 1;
}

.doc-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--lp-text-primary);
  margin: 0 0 12px;
  line-height: 1.25;
}

.doc-card-desc {
  font-size: 15px;
  color: var(--lp-text-secondary);
  line-height: 1.5;
  margin: 0 0 24px;
  flex-grow: 1;
}

.doc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-accent-flight);
  background: var(--lp-surface-alt, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--lp-border-color, rgba(0, 0, 0, 0.1));
  padding: 8px 16px;
  border-radius: var(--lp-border-radius, 6px);
  width: fit-content;
  margin-top: auto;
  transition: all 0.2s ease;
}

.landing-doc-card:hover .doc-card-link {
  gap: 10px;
  background: var(--lp-accent-flight);
  color: #ffffff;
  border-color: var(--lp-accent-flight);
}

.landing-docs-subhead {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--lp-accent-flight, #00e5ff);
}

.landing-docs-subhead::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--lp-border-color, rgba(255, 255, 255, 0.2));
}

.landing-doc-quick-links {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.doc-quick-tile {
  background-color: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.doc-quick-tile:hover {
  transform: translateY(-2px);
  border-color: var(--lp-border-focus);
}

.tile-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.tile-content h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--lp-text-primary);
  margin: 0 0 4px;
}

.tile-content p {
  font-size: 13px;
  color: var(--lp-text-muted);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .landing-doc-quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .landing-docs-grid {
    grid-template-columns: 1fr;
  }

  .landing-doc-quick-links {
    grid-template-columns: 1fr;
  }

  .landing-doc-card {
    padding: 14px 16px;
  }
}

.landing-faq-section {
  padding: 80px 0;
  background-color: var(--lp-surface-bg);
  border-top: 1px solid var(--lp-border-color);
}

.landing-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.faq-item {
  background: var(--lp-bg-core);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 26px;
}

.faq-item h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--lp-text-primary);
}

.faq-item p {
  font-size: 16px;
  color: var(--lp-text-secondary);
  margin: 0;
  line-height: 1.6;
}

.landing-cta-section {
  text-align: center;
  background: var(--lp-cta-bg);
  border-top: 1px solid var(--lp-border-color);
  padding: 80px 32px;
  width: 100%;
  color: var(--lp-cta-text);
}

.cta-inner {
  margin: 0 auto;
}

.landing-cta-title {
  font-size: 44px;
  font-weight: 700;
  -webkit-text-stroke: 0.4px currentColor;
  text-stroke: 0.4px currentColor;
  letter-spacing: -1.2px;
  margin: 0 0 16px;
  color: inherit;
}

.landing-cta-desc {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 32px;
}

.landing-footer {
  background-color: var(--lp-footer-bg);
  border-top: 1px solid var(--lp-border-color);
  padding: 36px 0;
  width: 100%;
  font-size: 14px;
  color: var(--lp-text-muted);
}

.landing-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-sm {
  font-weight: 700;
  color: var(--lp-text-primary);
}

.landing-footer-links {
  display: flex;
  gap: 24px;
}

.landing-footer-link {
  color: var(--lp-text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.landing-footer-link:hover {
  color: var(--lp-accent-flight);
}

/* --------------------------------------------------------------------------
   9. Responsive Breakpoint Layout Tiers
   -------------------------------------------------------------------------- */

/* Tier 1: Small Desktop / Tablet-ish (≤ 960px) */
@media (max-width: 960px) {
  .landing-container {
    padding: 0 20px;
  }

  .landing-hero-title {
    font-size: 42px;
  }

  .landing-section-title {
    font-size: 34px;
  }

  .landing-block-title {
    font-size: 30px;
  }

  .landing-cta-title {
    font-size: 36px;
  }

  .landing-hero-highlights {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-app-frame .app-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .landing-app-frame .deck-map {
    max-height: 180px;
  }

  .landing-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  .landing-feature-card-wrapper {
    max-width: 100%;
    box-sizing: border-box;
  }

  .landing-mini-grid,
  .landing-faq-grid {
    grid-template-columns: 1fr;
  }

  .landing-nav-menu {
    display: none;
  }

  .landing-footer-inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

/* Tier 2: Tablet (≤ 768px) */
@media (max-width: 768px) {
  .landing-container {
    padding: 0 16px;
  }

  .landing-nav {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 16px 0;
  }

  .landing-logo-text {
    font-size: 24px;
  }

  .landing-nav-actions {
    gap: 8px;
  }

  .landing-signin-link {
    font-size: 13px;
    padding: 8px 16px;
  }

  .landing-hero-section {
    padding: 60px 0 40px;
  }

  .landing-preview-section,
  .landing-faq-section,
  .landing-tiers-section,
  .landing-feature-block {
    padding: 56px 0;
  }

  .landing-cta-section {
    padding: 64px 16px;
  }

  .landing-hero-title {
    font-size: 38px;
  }

  .landing-section-title {
    font-size: 32px;
  }

  .landing-block-title {
    font-size: 28px;
  }

  .landing-block-desc,
  .landing-section-desc {
    font-size: 17px;
  }

  .landing-cta-title {
    font-size: 32px;
  }

  .landing-cta-desc {
    font-size: 17px;
  }

  .faq-item {
    padding: 20px;
  }

  .landing-app-frame .deck-map {
    max-height: 160px;
  }

  /* Hide desktop mockup frame, reveal responsive iPhone mockup */
  .landing-app-frame {
    display: none !important;
  }

  .mobile-mockup-frame {
    display: flex !important;
    max-width: 420px;
    margin: 0 auto;
    background-color: transparent;
    position: relative;
    z-index: 5;
  }

  .app-preview-wrapper {
    min-height: 760px;
  }

  .landing-feature-info,
  .landing-feature-card-wrapper,
  .landing-container {
    position: relative;
    z-index: 1;
  }

  /* Suppress secondary section watermarks on mobile */
  .section-watermark {
    display: none !important;
  }

  .landing-hero-section .section-watermark.watermark-plane {
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    opacity: 0.06 !important;
    top: 50% !important;
    right: -30px !important;
    transform: translateY(-50%) rotate(-10deg) !important;
  }
}

/* Tier 3: Mobile (≤ 480px) */
@media (max-width: 480px) {
  body.landing-page {
    font-size: 17px;
  }

  .landing-container {
    padding: 0 15px;
  }

  #features-intelligence .landing-container {
    padding: 0 10px;
  }

  .landing-logo-text {
    font-size: 22px;
  }

  .landing-nav {
    padding: 16px 0;
  }

  .landing-hero-section {
    padding: 48px 0 32px;
  }

  .landing-preview-section,
  .landing-faq-section,
  .landing-tiers-section,
  .landing-feature-block {
    padding: 44px 0;
  }

  .landing-cta-section {
    padding: 56px 15px;
  }

  .landing-hero-title {
    font-size: 30px;
    letter-spacing: -1px;
  }

  .landing-hero-subtitle {
    font-size: 16px;
  }

  .landing-section-title {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .landing-block-title {
    font-size: 24px;
    letter-spacing: -0.5px;
  }

  .landing-block-desc,
  .landing-section-desc {
    font-size: 16px;
  }

  .landing-tag {
    font-size: 12px;
  }

  .landing-cta-title {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .landing-cta-desc {
    font-size: 16px;
  }

  h1.landing-hero-title,
  h2.landing-block-title,
  h2.landing-section-title,
  h2.landing-cta-title,
  .landing-block-desc,
  .landing-section-desc {
    text-align: center;
  }

  .landing-hero-cta-group {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 12px;
  }

  .landing-hero-cta-group button,
  .landing-hero-cta-group a,
  .landing-cta-section .landing-primary-btn {
    width: 100%;
    justify-content: center;
  }

  .landing-cta-section .landing-primary-btn {
    max-width: 340px;
  }

  .landing-hero-highlights {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-mini-grid {
    gap: 14px;
  }

  .landing-feature-card-wrapper {
    padding: 20px;
  }

  #features-intelligence .landing-feature-card-wrapper {
    padding: 10px !important;
  }

  .landing-faq-grid {
    gap: 14px;
  }

  .faq-item {
    padding: 18px;
  }

  .faq-item h3 {
    font-size: 16px;
  }

  .faq-item p,
  .landing-checklist li,
  .mini-feature-card p {
    font-size: 16px;
  }

  .landing-theme-pills {
    gap: 8px;
  }

  .landing-theme-pill {
    padding: 10px 12px;
    font-size: 13px;
  }

  .landing-app-frame .deck-map {
    max-height: 140px;
  }

  .landing-footer {
    padding: 24px 0;
  }

  .landing-footer-links {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   10. Multi-Theme Token Palette Overrides
   -------------------------------------------------------------------------- */

/* --- ROADTRIP MODE --- */
.theme-roadtrip body.landing-page {
  /* Landing page design system tokens */
  --lp-bg-core: #dde3ea;
  /* Galvanized asphalt mid-gray */
  --lp-surface-bg: #eef1f5;
  /* White-ish sign surface */
  --lp-surface-alt: #d4dae3;
  /* Slightly darker steel tray */
  --lp-text-primary: #0f172a;
  /* Dark slate */
  --lp-text-secondary: #334155;
  --lp-text-muted: #64748b;
  --lp-border-color: #94a3b8;
  /* Galvanized steel border */
  --lp-border-focus: var(--accent-dining, #003F87);
  /* Highway Blue focus ring */
  --lp-border-radius: 6px;
  /* Slightly more angular — sign-like */

  --lp-hero-bg: var(--accent-flight, #006B3F);
  /* Interstate Green hero */
  --lp-cta-bg: linear-gradient(135deg, #004F2D 0%, var(--accent-flight, #006B3F) 100%);
  /* Interstate Green */
  --lp-cta-text: #ffffff;
  --lp-footer-bg: #c2cdd9;

  --lp-btn-primary-bg: var(--accent-flight, #006B3F);
  --lp-btn-primary-text: #ffffff;
  --lp-btn-primary-border: #004F2D;
  --lp-btn-primary-hover-bg: #004F2D;
  --lp-btn-primary-shadow: 0 4px 14px rgba(0, 107, 63, 0.25);

  --lp-btn-secondary-bg: rgba(255, 255, 255, 0.15);
  --lp-btn-secondary-border: rgba(255, 255, 255, 0.5);
  --lp-btn-secondary-text: #ffffff;
  --lp-btn-secondary-hover-bg: rgba(255, 255, 255, 0.25);

  --lp-accent-flight: var(--accent-flight, #006B3F);
  /* Interstate Green */
  --lp-accent-flight-glow: rgba(0, 107, 63, 0.12);
  --lp-accent-lodging: var(--accent-lodging, #072241);
  /* Overnight Rest Stop Navy — matches the real app's theme-roadtrip
     --accent-lodging exactly (see css/base.css's theme rules), not a
     marketing-only color. The live #timeline-container demo above renders
     through the real renderer.js, so its card colors need to actually
     match what a user sees in the app, not just look plausible. */
  --lp-accent-lodging-glow: rgba(7, 34, 65, 0.12);
  --lp-accent-car: var(--accent-car, #c75500);
  /* Highway Rest Stop Orange — matches the real app's theme-roadtrip
     --accent-car exactly (was previously an unrelated cyan). */
  --lp-accent-car-glow: rgba(199, 85, 0, 0.12);
  --lp-accent-dining: var(--accent-dining, #003F87);
  /* Highway Blue — matches the real app's theme-roadtrip --accent-dining
     exactly (was previously an unrelated orange, and Lodging above was
     wrongly holding this blue instead — see note there). */
  --lp-accent-dining-glow: rgba(0, 63, 135, 0.12);
  --lp-accent-sandbox: var(--accent-sandbox, #5C4033);
  /* Scenic Overlook Brown */

  /* App mockup theme variables */
  --bg-core: #cbd5e1;
  --bg-surface: #eef1f5;
  --bg-surface-elevated: #e2e8f0;
  --bg-surface-workbench: #b8c5d3;
  --border-color: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent-flight: #006B3F;
  --accent-lodging: #072241;
  --accent-car: #c75500;
  --accent-dining: #003F87;
  --accent-sandbox: #5C4033;
}

/* Roadtrip hero: full Interstate Green background, white text */
.theme-roadtrip .landing-hero-section {
  background: var(--accent-flight, #006B3F) !important;
}

.theme-roadtrip .landing-hero .landing-hero-title {
  color: #ffffff !important;
}

.theme-roadtrip .landing-hero .landing-hero-subtitle {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Hero CTA buttons: high-contrast highway sign styles on Interstate Green */
.theme-roadtrip .landing-hero-cta-group .landing-primary-btn {
  background: var(--accent-dining, #003F87) !important;
  /* Highway Blue sign style */
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  font-weight: 700 !important;
}

.theme-roadtrip .landing-hero-cta-group .landing-primary-btn:hover {
  background: #004fb3 !important;
  border-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

.theme-roadtrip .landing-hero-cta-group .landing-secondary-btn {
  background: #ffffff !important;
  color: #004F2D !important;
  border: 2px solid #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.theme-roadtrip .landing-hero-cta-group .landing-secondary-btn:hover {
  background: #eef2f7 !important;
  color: var(--accent-dining, #003F87) !important;
  border-color: #ffffff !important;
}

/* Hero highlight cards: non-interactive info modules (subtle ghost borders, no button hover shadow) */
.theme-roadtrip .highlight-card {
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  backdrop-filter: blur(7px);
}

.theme-roadtrip .highlight-card .highlight-title {
  color: #ffffff !important;
}

.theme-roadtrip .highlight-card .highlight-desc {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Hero watermark plane: visible on green background */
.theme-roadtrip .landing-hero-section .section-watermark {
  opacity: 0.15 !important;
  --wm-color: #ffffff !important;
}

.theme-roadtrip .landing-hero-section .section-watermark svg path {
  stroke: #ffffff !important;
}

/* Feature section backgrounds — steel-gray surfaces with highway accent borders */
.theme-roadtrip #features-builder {
  background-color: #e8eff5;
  border-top: 3px solid var(--accent-flight, #006B3F);
  /* Interstate Green */
}

.theme-roadtrip #features-intelligence {
  background-color: #eef2f7;
  border-top: 3px solid var(--accent-dining, #003F87);
  /* Highway Blue */
}

.theme-roadtrip #features-packing {
  background-color: #e8eff5;
  border-top: 3px solid #00A1DE;
  /* Route Cyan */
}

.theme-roadtrip #features-security {
  background-color: #eef2f7;
  border-top: 3px solid var(--accent-flight, #006B3F);
  /* Interstate Green */
}

.theme-roadtrip #features-mytrips {
  background-color: #e8eff5;
  border-top: 3px solid var(--accent-dining, #003F87);
  /* Highway Blue */
}

/* Landing preview, docs, and FAQ sections */
.theme-roadtrip .landing-preview-section {
  background-color: #d4dae3;
  border-color: var(--text-muted, #94a3b8);
}

.theme-roadtrip .landing-docs-section {
  background-color: #004F2D;
  border-top: 3px solid var(--accent-dining, #003F87);
  border-bottom: 3px solid var(--accent-dining, #003F87);
  color: #ffffff;
}

.theme-roadtrip .landing-docs-section .landing-section-title {
  color: #ffffff !important;
}

.theme-roadtrip .landing-docs-section .landing-section-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

.theme-roadtrip .landing-docs-section .landing-tag {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.theme-roadtrip .landing-docs-section .landing-doc-card {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.theme-roadtrip .landing-docs-section .landing-doc-card:hover {
  background: rgba(0, 0, 0, 0.35);
  border-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.theme-roadtrip .landing-docs-section .doc-card-title {
  color: #ffffff !important;
}

.theme-roadtrip .landing-docs-section .doc-card-desc {
  color: rgba(255, 255, 255, 0.85) !important;
}

.theme-roadtrip .landing-docs-section .doc-card-badge {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  padding: 0;
  border: none;
}

.theme-roadtrip .landing-docs-section .landing-docs-subhead {
  color: rgba(255, 255, 255, 0.92);
}

.theme-roadtrip .landing-docs-section .landing-docs-subhead::after {
  background: rgba(255, 255, 255, 0.35);
}

.theme-roadtrip .landing-docs-section .doc-card-icon {
  background: transparent;
  color: #ffffff;
  padding: 0;
  border: none;
}

.theme-roadtrip .landing-docs-section .doc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff !important;
  font-weight: 700;
  width: fit-content;
  margin-top: 12px;
  transition: all 0.2s ease;
}

.theme-roadtrip .landing-docs-section .landing-doc-card:hover .doc-card-link {
  background: #ffffff;
  color: #004F2D !important;
  border-color: #ffffff;
}

.theme-roadtrip .landing-docs-section .doc-quick-tile {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 3px solid #00A1DE;
  /* Route Cyan sign edge */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  cursor: pointer;
}

.theme-roadtrip .landing-docs-section .doc-quick-tile:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
  border-left-color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.theme-roadtrip .landing-docs-section .doc-quick-tile h4 {
  color: #ffffff !important;
}

.theme-roadtrip .landing-docs-section .doc-quick-tile p {
  color: rgba(255, 255, 255, 0.8) !important;
}

.theme-roadtrip .landing-docs-section .tile-icon {
  background: transparent;
  color: #ffffff;
  padding: 0;
  border: none;
}

.theme-roadtrip .landing-docs-section .landing-docs-hub-btn {
  background: var(--accent-dining, #003F87);
  /* Highway Blue sign button */
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: var(--lp-border-radius, 8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.theme-roadtrip .landing-docs-section .landing-docs-hub-btn:hover {
  background: #004fb3;
  border-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.theme-roadtrip .landing-faq-section {
  background-color: #d4dae3;
  border-color: var(--text-muted, #94a3b8);
}

/* Markdown bonus block */
.theme-roadtrip .landing-feature-block.markdown-bonus {
  background-color: #e2e8f0;
  border-top: 3px solid #F96A00;
  /* Construction Orange */
}

/* Security and markdown code boxes */
.theme-roadtrip .markdown-snippet-box {
  background: #f1f5f9;
  border-color: var(--text-muted, #94a3b8);
}

.theme-roadtrip .markdown-snippet-box {
  color: var(--accent-flight, #006B3F);
}

/* CTA section accent border */
.theme-roadtrip .landing-cta-section {
  border-top: 3px solid var(--accent-flight, #006B3F);
}

/* Footer — the inherited --lp-text-muted (#64748b) falls below WCAG AA
   contrast against this theme's light steel footer background, so the
   copyright text needs a darker color here specifically. */
.theme-roadtrip .landing-footer {
  background-color: #b8c5d3;
  border-top: 1px solid var(--text-muted, #94a3b8);
  color: var(--text-secondary, #334155);
}

/* Active theme pill */
.theme-roadtrip .landing-theme-pill.active {
  background: #dde3ea;
  border-color: var(--accent-flight, #006B3F);
  color: var(--text-primary, #0f172a);
}

/* Watermark tints tuned for light steel backgrounds */
.theme-roadtrip #features-builder .section-watermark {
  --wm-color: #b6ccd8;
}

.theme-roadtrip #features-intelligence .section-watermark {
  --wm-color: #b0c4d6;
}

.theme-roadtrip #features-packing .section-watermark {
  --wm-color: #aac8da;
}

.theme-roadtrip #features-security .section-watermark {
  --wm-color: #b6ccd8;
}

.theme-roadtrip #features-mytrips .section-watermark {
  --wm-color: #b0c4d6;
}

/* Odometer Countdown mockup cells fix: black cells, white text, clear borders */
.theme-roadtrip .landing-app-frame .flap-char {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid var(--text-secondary, #334155) !important;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8) !important;
}

/* Map Countdown Mockup Ticker header color match */
.theme-roadtrip .map-milestone-ticker-header {
  background: #1e293b !important;
  border-color: var(--text-primary, #0f172a) !important;
}

.theme-roadtrip .map-milestone-ticker-header .hud-label {
  color: var(--bg-core, #cbd5e1) !important;
}

/* My Trips section branding correction: purely Highway Blue */
.theme-roadtrip #features-mytrips .landing-tag {
  background: var(--accent-dining, #003F87) !important;
  color: #ffffff !important;
}

.theme-roadtrip #features-mytrips .landing-icon-motif.lodging {
  background: var(--accent-dining, #003F87) !important;
  border-color: #002E6B !important;
  color: #ffffff !important;
}

.theme-roadtrip #features-mytrips .mini-icon {
  background: var(--accent-dining, #003F87) !important;
  color: #ffffff !important;
}

.theme-roadtrip #features-mytrips .chk-icon {
  background: var(--accent-dining, #003F87) !important;
  color: #ffffff !important;
}



/* Suggestion tags (checklist badges) styling: clean silver with dark slate text */
.theme-roadtrip .suggestion-tag {
  background: var(--bg-core, #cbd5e1) !important;
  color: var(--text-primary, #0f172a) !important;
  font-weight: 700 !important;
}

/* Ensure watermarks are visible on light backgrounds */
.theme-roadtrip .section-watermark {
  opacity: 0.2 !important;
}

.theme-roadtrip .section-watermark svg path {
  stroke: var(--wm-color) !important;
}

/* Plan tier buttons contrast fixes */
.theme-roadtrip .tier-card .landing-secondary-btn {
  background: #ffffff !important;
  border-color: var(--text-muted, #94a3b8) !important;
  color: var(--text-primary, #0f172a) !important;
}

.theme-roadtrip .tier-card .landing-secondary-btn:hover {
  background: #eef1f5 !important;
  border-color: var(--accent-dining, #003F87) !important;
}

.theme-roadtrip .tier-card.featured .landing-primary-btn {
  background: var(--accent-flight, #006B3F) !important;
  color: #ffffff !important;
  border-color: #004F2D !important;
}

.theme-roadtrip .tier-card.featured .landing-primary-btn:hover {
  background: #004F2D !important;
}

/* Roadtrip Mobile Mockup overrides */
.theme-roadtrip .mockup-screen {
  background: var(--bg-core, #cbd5e1) !important;
  /* Galvanized asphalt */
  font-family: 'Overpass', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* The HUD is its own dark dashboard-plastic strip in the real app (see
   .theme-roadtrip .live-hud in hud.css) — not the light steel "sign"
   surface the rest of the roadtrip theme uses. Was previously the light
   #b8c5d3 workbench color, which read as a washed-out gray-blue instead of
   the actual rich dark-navy HUD. Text below is switched to the same
   light-on-dark palette hud.css uses for the identical real components
   (.hud-branding, .hud-label, .weather-hud-*) so it stays legible now that
   the background is dark instead of light. */
.theme-roadtrip .mockup-hud {
  background: #1e293b !important;
  /* Dark dashboard plastic — matches .live-hud exactly */
  border-bottom: 4px solid var(--text-primary, #0f172a) !important;
}

.theme-roadtrip .mockup-brand {
  color: #ffffff !important;
}

.theme-roadtrip .mockup-brand span {
  color: #F96A00 !important;
  /* Construction Orange accent — matches hud.css .hud-branding h1 span
     (was incorrectly Interstate Green here, the logo's flight-card color
     rather than its actual HUD accent) */
}

.theme-roadtrip .mockup-milestone-label {
  color: var(--bg-core, #cbd5e1) !important;
}

.theme-roadtrip .mockup-hud-weather-temp {
  color: #ffffff !important;
}

.theme-roadtrip .mockup-hud-weather-range {
  color: var(--bg-core, #cbd5e1) !important;
}

.theme-roadtrip .mockup-hud-weather-loc {
  color: var(--text-muted, #94a3b8) !important;
}

/* Cards feed: light concrete surface */
.theme-roadtrip .mockup-panel-deck {
  background: #d1dae4 !important;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Bottom nav: matches the real app's roadtrip .mobile-nav dashboard chrome */
.theme-roadtrip .mockup-bottom-nav {
  background: #1e293b !important;
  border-top: 4px solid var(--text-primary, #0f172a) !important;
}

.theme-roadtrip .mockup-nav-btn {
  color: var(--bg-core, #cbd5e1) !important;
}

.theme-roadtrip .mockup-nav-svg {
  stroke: var(--bg-core, #cbd5e1) !important;
}

.theme-roadtrip .mockup-nav-btn.active,
.theme-roadtrip .mockup-nav-btn.active .mockup-nav-svg {
  color: #F96A00 !important;
  stroke: #F96A00 !important;
}

/* -- Roadtrip: Highway Sign Color Extensions -- */

/* Nav header: exact match of the Roadtrip HUD — dark dashboard plastic */
.theme-roadtrip .landing-header-section {
  background-color: #1e293b !important;
  border-bottom: 4px solid var(--text-primary, #0f172a) !important;
  backdrop-filter: none;
}

/* Nav links: light on dark HUD background */
.theme-roadtrip .landing-nav-link {
  color: var(--bg-core, #cbd5e1);
}

.theme-roadtrip .landing-nav-link:hover {
  color: #ffffff;
}

/* Logo: white text, orange 'Deck' accent — matches HUD branding exactly */
.theme-roadtrip .landing-logo-text {
  color: #ffffff;
}

.theme-roadtrip .landing-logo-text span {
  color: #F96A00;
  /* Construction Orange — matches hud.css .hud-branding h1 span */
}

/* Sign-in button: light border on dark nav — matches HUD action style */
.theme-roadtrip .landing-signin-link {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.theme-roadtrip .landing-signin-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Hero highlight card icon badges: white fill on green hero */
.theme-roadtrip .highlight-icon {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

/* Section tags: bold themed pill matching the section's accent color — reads like route markers */
.theme-roadtrip .landing-tag {
  display: inline-block;
  background: var(--section-accent, #006B3F);
  color: #ffffff;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

/* Section icon motifs: full color fills per section accent */
.theme-roadtrip .landing-icon-motif {
  border-width: 2px;
}

.theme-roadtrip .landing-icon-motif.flight {
  background: var(--accent-flight, #006B3F);
  border-color: #004F2D;
  color: #ffffff;
}

.theme-roadtrip .landing-icon-motif.lodging {
  background: var(--accent-dining, #003F87);
  border-color: #002E6B;
  color: #ffffff;
}

.theme-roadtrip .landing-icon-motif.car {
  background: #00A1DE;
  border-color: #0084BA;
  color: #ffffff;
}

.theme-roadtrip .landing-icon-motif.dining {
  background: #F96A00;
  border-color: #D05500;
  color: #ffffff;
}

.theme-roadtrip .landing-icon-motif.sandbox {
  background: var(--accent-sandbox, #5C4033);
  border-color: #3f2b22;
  color: #ffffff;
}

.theme-roadtrip .landing-icon-motif.budget {
  background: var(--lp-accent-budget);
  border-color: #0f766e;
  color: #ffffff;
}

/* Feature graphic card wrappers: highway-accented left border */
.theme-roadtrip #features-builder .landing-feature-card-wrapper {
  border-left: 4px solid var(--accent-flight, #006B3F);
}

.theme-roadtrip #features-intelligence .landing-feature-card-wrapper {
  border-left: 4px solid var(--accent-dining, #003F87);
}

.theme-roadtrip #features-packing .landing-feature-card-wrapper {
  border-left: 4px solid #00A1DE;
}

.theme-roadtrip #features-security .landing-feature-card-wrapper {
  border-left: 4px solid var(--accent-flight, #006B3F);
}

/* Demo day headers inside feature cards: green sign strip */
.theme-roadtrip .demo-day-header {
  background: var(--accent-flight, #006B3F);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 4px;
  border-bottom: none;
}

.theme-roadtrip .demo-day-date {
  color: rgba(255, 255, 255, 0.7) !important;
}

.theme-roadtrip .demo-day-title {
  color: #ffffff !important;
}

/* Demo items: consistent with card left-border system */
.theme-roadtrip .demo-item {
  background: #eef1f5;
  border-color: var(--text-muted, #94a3b8);
}

.theme-roadtrip .demo-item.type-F {
  border-left-color: var(--accent-flight, #006B3F);
}

.theme-roadtrip .demo-item.type-H {
  border-left-color: var(--accent-dining, #003F87);
}

.theme-roadtrip .demo-item.type-A {
  border-left-color: #00A1DE;
}

/* Mini feature card icon badges: solid highway-color fill */
.theme-roadtrip .mini-icon {
  background: var(--accent-flight, #006B3F);
  color: #ffffff;
  border-radius: 6px;
}

/* Per-section mini-icon color overrides */
.theme-roadtrip #features-intelligence .mini-icon {
  background: var(--accent-dining, #003F87);
}

.theme-roadtrip #features-packing .mini-icon {
  background: #00A1DE;
}

.theme-roadtrip #features-security .mini-icon {
  background: var(--accent-flight, #006B3F);
}

/* Checklist check icons: solid highway green, no translucent glow */
.theme-roadtrip .chk-icon {
  background: var(--accent-flight, #006B3F);
  color: #ffffff;
}

.theme-roadtrip #features-intelligence .chk-icon {
  background: var(--accent-dining, #003F87);
}

.theme-roadtrip #features-packing .chk-icon {
  background: #00A1DE;
}

.theme-roadtrip #features-security .chk-icon {
  background: var(--accent-flight, #006B3F);
}

.theme-roadtrip #features-budget .chk-icon {
  background: var(--lp-accent-budget);
}

/* FAQ items: highway-blue left accent border */
.theme-roadtrip .faq-item {
  border-left: 4px solid var(--accent-dining, #003F87);
  background: #eef1f5;
}

.theme-roadtrip .faq-item h3 {
  color: var(--text-primary, #0f172a);
}

/* Packing alert banner: construction orange */
.theme-roadtrip .packing-alert-banner {
  background: rgba(249, 106, 0, 0.1);
  border-color: #F96A00;
}

.theme-roadtrip .packing-alert-banner strong {
  color: #F96A00;
}

/* Privacy security card icon badges: green fill */
.theme-roadtrip .privacy-feature-card .card-icon-badge {
  background: var(--section-accent);
  color: #ffffff;
  border-color: #004F2D;
}

/* CTA section: stronger Interstate Green gradient */
.theme-roadtrip .landing-cta-section {
  background: linear-gradient(155deg, #004F2D 0%, var(--accent-flight, #006B3F) 45%, var(--accent-dining, #003F87) 100%);
  border-top: none;
}

/* --- VINTAGE JOURNAL MODE --- */
.theme-journal body.landing-page {
  --lp-bg-core: #f6eedb;
  --lp-surface-bg: #fdfaf2;
  --lp-surface-alt: #fbfaf9;
  --lp-text-primary: #2e1e1e;
  --lp-text-secondary: #4e3535;
  --lp-text-muted: #7a6060;
  --lp-border-color: rgba(46, 30, 30, 0.22);
  --lp-border-focus: rgba(46, 30, 30, 0.4);

  --lp-hero-bg: linear-gradient(135deg, #fdfaf2 0%, #f5ecd5 100%);
  --lp-cta-bg: linear-gradient(135deg, #8b2020 0%, #5a1818 100%);
  --lp-footer-bg: #eae1c9;

  --lp-btn-primary-bg: #8b2020;
  --lp-btn-primary-text: #fdfaf2;
  --lp-btn-primary-hover-bg: #6e1616;
  --lp-btn-primary-shadow: 0 4px 14px rgba(139, 32, 32, 0.2);

  --lp-accent-flight: var(--accent-flight, #1e6b4a);
  --lp-accent-lodging: var(--accent-lodging, #2c5282);
  --lp-accent-car: var(--accent-car, #c26010);
  --lp-accent-dining: var(--accent-dining, #9b2335);
  --lp-accent-sandbox: var(--accent-sandbox, #3d6b4f);

  /* App Theme Variables for Mockup */
  --bg-core: #f6eedb;
  --bg-surface: #fdfaf2;
  --bg-surface-elevated: #eae1c9;
  --bg-surface-workbench: #ede4cc;
  --border-color: rgba(46, 30, 30, 0.22);
  --text-primary: #2e1e1e;
  --text-secondary: #4e3535;
  --text-muted: #7a6060;
  --accent-flight: #1e6b4a;
  --accent-lodging: #2c5282;
  --accent-car: #c26010;
  --accent-dining: #9b2335;
  --accent-sandbox: #3d6b4f;
}

.theme-journal #features-builder {
  background-color: #f0f7f4;
}

.theme-journal #features-intelligence {
  background-color: #f9f5e8;
}

.theme-journal #features-packing {
  background-color: #fbf5f3;
}

.theme-journal #features-security {
  background-color: #f0f4f8;
}

.theme-journal #features-mytrips {
  background-color: #f9f5e8;
}

.theme-journal #features-builder .section-watermark {
  --wm-color: #e2ede7;
}

.theme-journal #features-intelligence .section-watermark {
  --wm-color: #ede7d5;
}

.theme-journal #features-packing .section-watermark {
  --wm-color: #efe7e4;
}

.theme-journal #features-security .section-watermark {
  --wm-color: #e4eaf0;
}

.theme-journal #features-mytrips .section-watermark {
  --wm-color: #ede7d5;
}

/* Journal Theme Typography Refinement:
   - Headings (h1, h2, h3, .landing-hero-title, .landing-section-title, .landing-block-title, .tier-name): Classic Serif (Playfair Display)
   - Subheads / Tags (.landing-tag): Handwriting ('Caveat')
   - Body text, Subtitles, Buttons, Feature Boxes, Lists, & Controls: Work Sans
   - Logo stays in Space Grotesk across every theme — excluded via :not() below */

.theme-journal h1:not(.landing-logo-text):not(.hud-brand-mock),
.theme-journal h2,
.theme-journal h3,
.theme-journal .landing-hero-title,
.theme-journal .landing-section-title,
.theme-journal .landing-block-title,
.theme-journal .tier-name,
.theme-journal .doc-card-title {
  font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif !important;
  font-weight: 700 !important;
}

.theme-journal body.landing-page,
.theme-journal .landing-hero-subtitle,
.theme-journal .landing-section-desc,
.theme-journal .landing-block-desc,
.theme-journal .landing-nav-link,
.theme-journal .landing-primary-btn,
.theme-journal .landing-secondary-btn,
.theme-journal .highlight-card,
.theme-journal .highlight-desc,
.theme-journal .landing-feature-info p,
.theme-journal .landing-checklist,
.theme-journal .landing-checklist li,
.theme-journal .landing-checklist p,
.theme-journal .tier-card,
.theme-journal .tier-desc,
.theme-journal .tier-price,
.theme-journal .tier-badge,
.theme-journal .tier-features li,
.theme-journal .landing-doc-card,
.theme-journal .doc-card-desc,
.theme-journal .doc-card-link,
.theme-journal .doc-quick-tile,
.theme-journal .tile-content p,
.theme-journal .tile-content h4 {
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.theme-journal .landing-tag {
  font-family: 'Caveat', cursive !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0.5px !important;
}


/* Vintage Authentic App Material Overrides for Mobile Mockup */
.theme-journal .mockup-screen {
  background: var(--card-ground, #fdfaf2) !important;
  font-family: 'Georgia', 'Times New Roman', serif !important;
}

.theme-journal .mockup-hud {
  background: #ede4cc !important;
  border-bottom: 2px solid rgba(46, 30, 30, 0.25) !important;
  position: relative !important;
}

.theme-journal .mockup-hud::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 100% !important;
  height: 8px !important;
  background: linear-gradient(to bottom, #ede4cc 0%, var(--card-ground, #fdfaf2) 100%) !important;
  clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 90% 80%, 80% 30%, 70% 90%, 60% 40%, 50% 85%, 40% 30%, 30% 75%, 20% 40%, 10% 85%, 0% 40%) !important;
  z-index: 5 !important;
}

.theme-journal .mockup-brand {
  font-family: 'Georgia', serif !important;
  color: var(--text-primary, #2e1e1e) !important;
}

.theme-journal .mockup-brand span {
  color: var(--accent-flight, #1e6b4a) !important;
}

.theme-journal .mockup-panel-deck {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 23px,
      rgba(46, 30, 30, 0.05) 23px,
      rgba(46, 30, 30, 0.05) 24px),
    var(--card-ground, #fdfaf2) !important;
  padding-left: 20px !important;
  position: relative !important;
}

.theme-journal .mockup-panel-deck::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 14px !important;
  width: 1px !important;
  background: rgba(139, 32, 32, 0.35) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.theme-journal .mockup-panel-deck .day-header {
  background: linear-gradient(to right, #c4a76b, #d4b87c 40%, #c9ae72) !important;
  color: var(--text-primary, #2e1e1e) !important;
  padding: 5px 8px 5px 22px !important;
  border-radius: 3px !important;
  border: none !important;
  position: relative !important;
  box-shadow: 0 1px 3px rgba(46, 30, 30, 0.2) !important;
}

.theme-journal .mockup-panel-deck .day-header::before {
  content: '' !important;
  position: absolute !important;
  left: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(46, 30, 30, 0.5) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.theme-journal .mockup-panel-deck .day-date,
.theme-journal .mockup-panel-deck .day-title {
  font-family: 'Caveat', cursive !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-primary, #2e1e1e) !important;
  text-transform: none !important;
}

.theme-journal .mockup-panel-deck .card {
  background: #fbf6e8 !important;
  border: 1px solid rgba(46, 30, 30, 0.2) !important;
  box-shadow: 1px 2px 4px rgba(46, 30, 30, 0.1) !important;
  font-family: 'Georgia', serif !important;
}

.theme-journal .mockup-bottom-nav {
  background: #ede4cc !important;
  border-top: 1px solid rgba(46, 30, 30, 0.2) !important;
}

.theme-journal .mockup-nav-btn {
  color: var(--text-muted, #7a6060) !important;
}

.theme-journal .mockup-nav-btn.active {
  color: var(--accent-flight, #1e6b4a) !important;
}

/* --- TERMINAL LIGHT MODE --- */
.theme-terminal body.landing-page {
  --lp-bg-core: #ffffff;
  --lp-surface-bg: #ffffff;
  --lp-surface-alt: #f4f4f5;
  --lp-text-primary: #000000;
  --lp-text-secondary: #222222;
  --lp-text-muted: #555555;
  --lp-border-color: #000000;
  --lp-border-focus: #0284c7;
  --lp-border-radius: 0px;

  --lp-hero-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  --lp-cta-bg: linear-gradient(135deg, #0a0b0d 0%, #181a1f 100%);
  --lp-cta-text: #ffffff;
  --lp-footer-bg: #f4f4f5;

  --lp-btn-primary-bg: #0369a1;
  --lp-btn-primary-text: #ffffff;
  --lp-btn-primary-border: var(--accent-flight, #0284c7);
  --lp-btn-primary-hover-bg: #075985;
  --lp-btn-primary-shadow: 0 4px 14px rgba(2, 132, 199, 0.15);

  --lp-accent-flight: var(--accent-flight, #0284c7);
  --lp-accent-lodging: var(--accent-lodging, #c026d3);
  --lp-accent-car: var(--accent-car, #d97706);
  --lp-accent-dining: var(--accent-dining, #dc2626);
  --lp-accent-sandbox: var(--accent-sandbox, #059669);

  /* App Theme Variables for Mockup */
  --bg-core: #f4f4f5;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #eaeaea;
  --bg-surface-workbench: #ffffff;
  --border-color: #d1d5db;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --accent-flight: #0284c7;
  --accent-lodging: #c026d3;
  --accent-car: #d97706;
  --accent-dining: #dc2626;
  --accent-sandbox: #059669;
}

.theme-terminal #features-builder {
  background-color: #ffffff;
}

.theme-terminal #features-intelligence {
  background-color: #f4f4f5;
}

.theme-terminal #features-packing {
  background-color: #ffffff;
}

.theme-terminal #features-security {
  background-color: #f4f4f5;
}

.theme-terminal #features-mytrips {
  background-color: #ffffff;
}

.theme-terminal #features-builder .section-watermark,
.theme-terminal #features-intelligence .section-watermark,
.theme-terminal #features-packing .section-watermark,
.theme-terminal #features-security .section-watermark,
.theme-terminal #features-mytrips .section-watermark {
  --wm-color: #e2e8f0;
}


.theme-terminal .landing-cta-section {
  border-top: 1px solid var(--accent-flight, #0284c7);
}

/* Terminal Light App Material Overrides for Mobile Mockup */
.theme-terminal .mockup-screen {
  background: #f4f4f5 !important;
  font-family: var(--font-mono, monospace) !important;
}

.theme-terminal .mockup-hud {
  background: #ffffff !important;
  border-bottom: 1px solid #000000 !important;
}

.theme-terminal .mockup-brand {
  font-family: var(--font-mono, monospace) !important;
  color: #000000 !important;
}

.theme-terminal .mockup-brand span {
  color: var(--accent-flight, #0284c7) !important;
}

.theme-terminal .mockup-panel-deck .day-header {
  border: 1px solid #000000 !important;
  background: #ffffff !important;
  color: #000000 !important;
}

.theme-terminal .mockup-panel-deck .day-date,
.theme-terminal .mockup-panel-deck .day-title {
  color: #000000 !important;
  font-family: var(--font-mono, monospace) !important;
}

.theme-terminal .mockup-panel-deck .card {
  background: #ffffff !important;
  border: 1px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

.theme-terminal .mockup-panel-deck .card-wrapper.lodging,
.theme-terminal .mockup-panel-deck .card-wrapper.dining {
  --bullet-accent: #000000;
}

.theme-terminal .mockup-panel-deck .card-lodging-expandable,
.theme-terminal .mockup-panel-deck .card-dining-expandable {
  --card-accent: #000000;
}

.theme-terminal .mockup-bottom-nav {
  background: #ffffff !important;
  border-top: 1px solid #000000 !important;
}

.theme-terminal .mockup-nav-btn {
  color: #555555 !important;
}

.theme-terminal .mockup-nav-btn.active {
  color: var(--accent-flight, #0284c7) !important;
}

/* --- SLATE DARK MODE --- */
.theme-slate body.landing-page {
  --lp-bg-core: #0a0b0d;
  --lp-surface-bg: rgba(15, 23, 40, 0.85);
  --lp-surface-alt: #0b1220;
  --lp-text-primary: #f1f5f9;
  --lp-text-secondary: #cbd5e1;
  --lp-text-muted: #94a3b8;
  --lp-border-color: #1e304d;
  --lp-border-focus: #00e5ff;

  --lp-hero-bg: linear-gradient(135deg, #090b10 0%, #0c1526 40%, #0a1b36 75%, #052642 100%);
  --lp-cta-bg: linear-gradient(135deg, #081628 0%, #0c2342 50%, #081628 100%);
  --lp-footer-bg: #04060b;

  --lp-btn-primary-bg: #00e5ff;
  --lp-btn-primary-text: #0a0b0d;
  --lp-btn-primary-border: #80f2ff;
  --lp-btn-primary-hover-bg: #33ebff;
  --lp-btn-primary-shadow: 0 4px 20px rgba(0, 229, 255, 0.35);

  --lp-btn-secondary-bg: rgba(14, 24, 42, 0.9);
  --lp-btn-secondary-border: #1e3352;
  --lp-btn-secondary-text: #f8fafc;
  --lp-btn-secondary-hover-bg: #162842;

  --lp-accent-flight: #00e5ff;
  --lp-accent-flight-glow: rgba(0, 229, 255, 0.18);
  --lp-accent-lodging: #d500f9;
  --lp-accent-lodging-glow: rgba(213, 0, 249, 0.18);
  --lp-accent-car: #ffab00;
  --lp-accent-car-glow: rgba(255, 171, 0, 0.18);
  --lp-accent-dining: #ff3d00;
  --lp-accent-dining-glow: rgba(255, 61, 0, 0.18);
  --lp-accent-sandbox: #00e676;
}


.theme-slate .landing-hero-section {
  border-bottom: 1px solid #162a45;
}

.theme-slate #features-builder {
  background: linear-gradient(135deg, #05101a 0%, #091b2c 60%, #07253b 100%);
  border-top: 2px solid #00e5ff;
}

.theme-slate #features-builder .section-watermark {
  --wm-color: #0d2838;
}

.theme-slate #features-intelligence .section-watermark {
  --wm-color: #2b1236;
}

.theme-slate #features-packing .section-watermark {
  --wm-color: #332210;
}

.theme-slate #features-security .section-watermark {
  --wm-color: #0b2f21;
}

.theme-slate #features-intelligence {
  background: linear-gradient(135deg, #12071a 0%, #1e0a2b 60%, #2b0b3d 100%);
  border-top: 2px solid #d500f9;
}

.theme-slate #features-packing {
  background: linear-gradient(135deg, #181105 0%, #281907 60%, #3a2206 100%);
  border-top: 2px solid #ffab00;
}

.theme-slate #features-security {
  background: linear-gradient(135deg, #021a14 0%, #062b20 60%, #093c2d 100%);
  border-top: 2px solid #00e676;
}

.theme-slate #features-mytrips {
  background: linear-gradient(135deg, #12071a 0%, #1e0a2b 60%, #2b0b3d 100%);
  border-top: 2px solid #d500f9;
}

.theme-slate #features-mytrips .section-watermark {
  --wm-color: #2b1236;
}


.theme-slate .watermark-train {
  color: #00e5ff !important;
}

.theme-slate .watermark-compass {
  color: #d500f9 !important;
}

.theme-slate .watermark-passport {
  color: #ffab00 !important;
}

.theme-slate .watermark-padlock {
  color: #00e676 !important;
}

.theme-slate .watermark-wallet {
  color: var(--lp-accent-budget) !important;
}

.theme-slate .landing-feature-block.markdown-bonus {
  background: linear-gradient(135deg, #1a0605 0%, #2b0906 60%, #3d0d07 100%);
  border-top: 2px solid #ff3d00;
}

.theme-slate .landing-docs-section,
.theme-slate .landing-faq-section {
  background: linear-gradient(180deg, #07090e 0%, #0b111e 100%);
  border-top: 1px solid #182840;
}

.theme-slate .landing-theme-pill.active {
  background: #162640;
  border-color: #00e5ff;
}

.theme-slate .landing-cta-section {
  border-top: 2px solid #00e5ff;
}

.theme-slate .markdown-snippet-box {
  background: #070a12;
  border-color: #1e304d;
}

.theme-slate .markdown-snippet-box {
  color: #00e5ff;
}

.theme-slate .landing-footer {
  border-top: 1px solid #152236;
}

.theme-slate .section-watermark {
  mix-blend-mode: screen;
  opacity: 0.22;
}

/* --- AIRPORT SIGNAGE MODE --- */
.theme-airport body.landing-page {
  --lp-bg-core: #09090b;
  --lp-surface-bg: #181b24;
  --lp-surface-alt: #0b0c10;
  --lp-text-primary: #f8fafc;
  --lp-text-secondary: #cbd5e1;
  --lp-text-muted: #94a3b8;
  --lp-border-color: #27272a;
  --lp-border-focus: #facc15;
  --lp-border-radius: 4px;

  --lp-hero-bg: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  --lp-cta-bg: #07080b;
  --lp-footer-bg: #040507;

  --lp-btn-primary-bg: #0f172a;
  --lp-btn-primary-text: #facc15;
  --lp-btn-primary-border: #facc15;
  --lp-btn-primary-hover-bg: #1e293b;
  --lp-btn-primary-shadow: 0 4px 18px rgba(15, 23, 42, 0.4);

  --lp-btn-secondary-bg: #0f172a;
  --lp-btn-secondary-border: #0f172a;
  --lp-btn-secondary-text: #ffffff;
  --lp-btn-secondary-hover-bg: #1e293b;

  --lp-accent-flight: #facc15;
  --lp-accent-flight-glow: rgba(250, 204, 21, 0.18);
  --lp-accent-lodging: #38bdf8;
  --lp-accent-lodging-glow: rgba(56, 189, 248, 0.18);
  --lp-accent-car: #f97316;
  --lp-accent-car-glow: rgba(249, 115, 22, 0.18);
  --lp-accent-dining: #facc15;
  --lp-accent-dining-glow: rgba(250, 204, 21, 0.18);
  --lp-accent-sandbox: #4ade80;

  /* App Theme Variables for Mockup */
  --bg-core: #0c0c0e;
  --bg-surface: #181b24;
  --bg-surface-elevated: #1a1a1f;
  --bg-surface-workbench: #09090b;
  --border-color: #2d3345;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --accent-flight: #facc15;
  --accent-lodging: #00c14a;
  --accent-car: #facc15;
  --accent-dining: #f97316;
  --accent-sandbox: #00c14a;
}

/* Mobile mockup HUD: background/text already resolve correctly through the
   --bg-surface-workbench/--text-primary/--accent-flight fallbacks the base
   .mockup-hud rule uses (this theme's values above happen to match), but
   the border needs its own override — the base rule falls back to
   --border-color (a plain dark slate) where the real app's
   .theme-airport .live-hud (see css/themes/airport.css) uses a yellow
   accent-colored border instead. */
.theme-airport .mockup-hud {
  border-bottom: 2px solid #facc15 !important;
}

.theme-airport .landing-hero .landing-hero-title {
  color: #0f172a !important;
}

.theme-airport .landing-hero .landing-hero-subtitle {
  color: #1e293b !important;
}

.theme-airport .highlight-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: #cbd5e1;
  color: #0f172a;
}

.theme-airport .highlight-card .highlight-title {
  color: #0f172a !important;
}

.theme-airport .highlight-card .highlight-desc {
  color: #334155 !important;
}

.theme-airport .landing-preview-section,
.theme-airport .landing-docs-section,
.theme-airport .landing-faq-section {
  background-color: #0b0c10;
  border-color: #27272a;
}

.theme-airport #features-builder {
  background-color: #0f1117;
  border-top: 3px solid #facc15;
}

.theme-airport #features-intelligence {
  background-color: #12141d;
  border-top: 3px solid #38bdf8;
}

.theme-airport #features-packing {
  background-color: #141310;
  border-top: 3px solid #facc15;
}

.theme-airport #features-security {
  background-color: #0f1219;
  border-top: 3px solid #38bdf8;
}

.theme-airport #features-mytrips {
  background-color: #12141d;
  border-top: 3px solid #38bdf8;
}

.theme-airport .landing-feature-block.markdown-bonus {
  background-color: #121118;
  border-top: 3px solid #facc15;
}

.theme-airport .markdown-snippet-box {
  background: #0a0b0e;
  border-color: #2d3345;
}

.theme-airport .markdown-snippet-box {
  color: #facc15;
}

.theme-airport .landing-theme-pill.active {
  background: #242938;
  border-color: #facc15;
  color: #ffffff;
}

.theme-airport .watermark-train,
.theme-airport .watermark-passport {
  color: #facc15 !important;
}

.theme-airport .watermark-compass,
.theme-airport .watermark-padlock {
  color: #38bdf8 !important;
}

.theme-airport .watermark-wallet {
  color: var(--lp-accent-budget) !important;
}

.theme-airport .landing-cta-section {
  border-top: 3px solid #facc15;
}

.theme-airport .landing-footer {
  background-color: #040507;
  border-top: 1px solid #1e293b;
}

.theme-airport .section-watermark {
  mix-blend-mode: multiply;
  opacity: 0.18;
  filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.15));
}

.theme-slate .highlight-card {
  background: rgba(15, 23, 40, 0.85);
  border-color: #1e304d;
}

.theme-slate .highlight-card .highlight-title {
  color: #f1f5f9 !important;
}

.theme-slate .highlight-card .highlight-desc {
  color: #94a3b8 !important;
}

.theme-airport .watermark-plane {
  color: #a16207 !important;
  opacity: 0.55 !important;
}

/* --------------------------------------------------------------------------
   11. Static Landing Page App Mockup Bounds & Restrictions
   -------------------------------------------------------------------------- */
.landing-app-frame * {
  pointer-events: none;
  cursor: default !important;
}

/* Re-enable pointer events on scrollable containers */
.landing-app-frame .visual-outline-list,
.landing-app-frame .deck-scroll-wrapper {
  pointer-events: auto !important;
}

/* Packing/Budget toggle buttons, the side panels' close buttons, and their
   scroll area are the only interactions wired in this demo (see landing.js) */
.landing-app-frame [data-mockup-side-panel],
.landing-app-frame [data-mockup-side-panel] *,
.landing-app-frame .btn-close-side-panel,
.landing-app-frame .btn-close-side-panel * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.landing-app-frame .landing-side-panel-body {
  pointer-events: auto !important;
}

/* Re-enable card click & expansion */
.landing-app-frame .card-flight-expandable,
.landing-app-frame .card-flight-expandable *,
.landing-app-frame .card-transit-expandable,
.landing-app-frame .card-transit-expandable *,
.landing-app-frame .card-lodging-expandable,
.landing-app-frame .card-lodging-expandable *,
.landing-app-frame .card-car-expandable,
.landing-app-frame .card-car-expandable *,
.landing-app-frame .card-dining-expandable,
.landing-app-frame .card-dining-expandable *,
.landing-app-frame .card-activity-expandable,
.landing-app-frame .card-activity-expandable * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Re-enable HUD weather badge & popover close button */
.landing-app-frame #hud-weather-badge,
.landing-app-frame #hud-weather-badge * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

#weather-popover {
  pointer-events: auto !important;
}

#weather-popover * {
  cursor: default;
}

#weather-popover .weather-popover-close-btn,
#weather-popover .weather-popover-close-btn * {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Hide interactive action buttons in static mockup */
.landing-page .flight-drawer-actions,
.landing-page .deck-item-custom-links,
.landing-page .deck-item-dial-wrapper,
.landing-page .btn-sync-flight,
.landing-page .deck-item-directions-link,
.landing-page .transit-alert-dismiss,
.landing-app-frame .btn-outline-collapse-toggle {
  display: none !important;
}

.landing-page .btn-copy-deck-conf,
.landing-page .btn-copy-conf {
  pointer-events: none !important;
  cursor: default !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

/* The mobile mockup reuses the real app's card/timeline markup and CSS, so
   without this it also inherits the real app's interactive :hover states
   (action buttons revealing, cards lifting, etc.) — wrong for what's meant
   to be a static phone-frame screenshot. Same restriction as .landing-app-frame
   above, scoped to the mobile mockup instead. */
.mobile-mockup-frame * {
  pointer-events: none;
  cursor: default !important;
}

/* Re-enable pointer events on the scrollable Deck/Edit panels */
.mobile-mockup-frame .mockup-panel {
  pointer-events: auto !important;
}

/* Edit/Deck tab buttons and the map image's tap-to-toast are the only
   interactions actually wired in this demo (see landing.js) */
.mobile-mockup-frame .mockup-nav-btn[data-mockup-tab] {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.mobile-mockup-frame .mockup-map-img {
  pointer-events: auto !important;
  cursor: default !important;
}

/* Weather Hud trend text colors */
.theme-journal .weather-hud-trend-temp,
.theme-terminal .weather-hud-trend-temp {
  color: black;
}

.weather-hud-location,
.weather-hud-location.is-approx {
  color: var(--lp-accent-flight);
  border-bottom: none !important;
  animation: none !important;
}

/* Remove background and border on current weather in the HUD on landing page */
.landing-page .hud-status-group,
.landing-app-frame .hud-status-group,
.landing-page #hud-weather-badge,
.landing-app-frame #hud-weather-badge {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   12. iPhone Mockup Showcase Frame (.mobile-mockup-frame)
   -------------------------------------------------------------------------- */
.app-preview-wrapper {
  min-height: 760px;
}

.mobile-mockup-frame {
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 0 20px;
  max-width: 420px;
  margin: 0 auto;
  background-color: transparent;
  position: relative;
  z-index: 5;
}

.mockup-phone {
  width: 360px;
  flex-shrink: 0;
  background: linear-gradient(175deg, #2c2c2e 0%, #1c1c1e 50%, #141416 100%);
  border-radius: 52px;
  padding: 12px;
  position: relative;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    inset 0 -3px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 36px 90px rgba(0, 0, 0, 0.8),
    0 8px 24px rgba(0, 0, 0, 0.4);
}

.mockup-phone::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 96px;
  width: 3px;
  height: 32px;
  background: #2c2c2e;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 46px 0 #2c2c2e, 0 88px 0 #2c2c2e;
}

.mockup-phone::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 144px;
  width: 3px;
  height: 64px;
  background: #2c2c2e;
  border-radius: 0 2px 2px 0;
}

.mockup-screen {
  background: var(--bg-core, #0a0b0d);
  border-radius: 42px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 680px;
  position: relative;
  transition: background-color 0.25s ease;
}

.mockup-dynamic-island {
  width: 120px;
  height: 32px;
  background: #000;
  border-radius: 18px;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mockup-hud {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 52px 16px 12px;
  background: var(--bg-surface-workbench, #0e1017);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
  flex-shrink: 0;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.mockup-hud-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.mockup-brand {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-primary, #ffffff);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.5px;
  line-height: 1;
}

.mockup-brand span {
  color: var(--accent-flight, #00e5ff);
}

.mockup-hud-weather {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.mockup-hud-weather-temp {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
}

.mockup-hud-weather-range {
  font-size: 9px;
  color: var(--text-secondary, #acb9ca);
}

.mockup-hud-weather-loc {
  font-size: 8px;
  color: var(--text-muted, #52637a);
}

.mockup-hud-milestone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.mockup-milestone-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted, #52637a);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mockup-flap-text,
.mockup-flap-timer {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}

.mockup-flap-text .flap-char {
  font-size: 13px;
  width: 13px;
  height: 19px;
  margin: 0 0.5px;
}

.mockup-flap-timer .flap-char {
  font-size: 13px;
  width: 13px;
  height: 16px;
  margin: 0 0.5px;
}

/* Mockup Body: hosts the Deck (Timeline) and Edit panels, both built from
   the real app's own components (.timeline-container / .visual-outline-list)
   so the phone mockup matches the actual app instead of a bespoke look-alike. */
.mockup-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
}

.mockup-panel {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 14px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.mockup-panel::-webkit-scrollbar {
  width: 4px;
}

.mockup-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.mockup-panel.active {
  display: block;
}

.mockup-panel-edit {
  background: var(--bg-surface-workbench, #0e1017);
}

.mockup-panel-deck .timeline-container {
  gap: 20px;
}

.mockup-panel-deck .day-group {
  gap: 10px;
}

/* base.css pins the real app's .day-header under a fixed full-screen HUD via
   a --mobile-hud-height offset; that doesn't exist in this in-flow static
   mockup, so reset it back to sticking against the mockup panel's own top. */
.mockup-panel-deck .day-header {
  top: 0 !important;
  padding: 8px 10px !important;
}

.mockup-panel-deck .day-date,
.mockup-panel-deck .day-title {
  font-size: 12px;
}

.mockup-panel-deck .card {
  padding: 10px 12px;
  gap: 6px;
}

/* Real app's mobile .deck-scroll-wrapper pads well past the last card so it
   never sits flush against the fixed bottom nav; match that here so the
   last card's rounded corner has breathing room instead of pinching against
   the nav's top edge/border. */
.mockup-panel-deck,
.mockup-panel-edit {
  padding-bottom: 28px;
}

.mockup-outline-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Fakey mobile packing tab: mirrors css/packing.css's look (stats HUD,
   category headers, checkbox rows) using the real app's own CSS variables
   so it re-themes for free alongside .mockup-panel-deck, without needing
   packing.css loaded or its interactive drag/collapse/form behavior. */
.mockup-panel-packing {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.mockup-panel-packing.active {
  display: flex;
}

.mockup-packing-stats-hud {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mockup-packing-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mockup-packing-stats-label {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
}

.mockup-packing-stats-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-flight);
}

.mockup-packing-progress-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}

.mockup-packing-progress-bar {
  height: 100%;
  background: var(--accent-flight);
  border-radius: 3px;
}

.mockup-packing-category-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mockup-packing-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-color);
}

.mockup-packing-chevron {
  font-size: 9px;
}

.mockup-packing-category-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: normal;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 10px;
}

.mockup-packing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.mockup-packing-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}

.mockup-packing-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
}

.mockup-packing-item.checked .mockup-packing-checkbox {
  background: var(--accent-flight);
  border-color: var(--accent-flight);
}

.mockup-packing-item.checked .mockup-packing-checkbox::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.mockup-packing-text {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mockup-packing-item.checked .mockup-packing-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.mockup-packing-suggestion-tag {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--accent-car, #ea580c);
  background: rgba(234, 88, 12, 0.1);
  padding: 2px 6px;
  border-radius: var(--border-radius-sm);
  white-space: nowrap;
}

.mockup-packing-add-btn {
  width: 100%;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 10px;
}

.mockup-panel-map {
  display: none;
  position: relative;
  padding: 0;
  overflow: hidden;
}

.mockup-panel-map.active {
  display: block;
}

.mockup-map-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 700;
  color: #1a1a1a;
  background: rgba(255, 255, 255, 0.92);
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mockup-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: default;
  -webkit-user-drag: none;
  user-select: none;
}

/* Shown briefly when the user clicks/drags the static map preview image,
   clarifying it's a snapshot rather than a live interactive map. */
.mockup-map-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 3;
  background: rgba(10, 11, 13, 0.92);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mockup-map-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.mockup-bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0 24px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.07));
  flex-shrink: 0;
  background: var(--bg-surface, #12141c);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.mockup-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted, #52637a);
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  cursor: default;
  pointer-events: none;
  padding: 2px 12px;
}

/* Edit & Deck are the only tabs wired to switch content in this demo */
.mockup-nav-btn[data-mockup-tab] {
  cursor: pointer;
  pointer-events: auto;
}

.mockup-nav-btn.active {
  color: var(--accent-green, #00ff66);
}

.mockup-nav-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* Standalone Signed Out Toast styling for landing page */
.landing-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%, 20px);
  background-color: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.landing-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.landing-toast svg {
  width: 16px;
  height: 16px;
  stroke: #10b981;
  fill: none;
  stroke-width: 2;
  display: block;
}



/* --------------------------------------------------------------------------
   Documentation & Support Hub Section Styles
   -------------------------------------------------------------------------- */
.landing-docs-section .doc-card-icon svg,
.landing-docs-section .tile-icon svg {
  display: block;
}

.landing-docs-footer-action {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

.landing-docs-hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--lp-border-radius, 8px);
  background: var(--lp-surface-bg, #0f172a);
  color: var(--lp-text-primary, #ffffff);
  border: 1px solid var(--lp-border-color, rgba(255, 255, 255, 0.15));
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.landing-docs-hub-btn:hover {
  transform: translateY(-2px);
  border-color: var(--lp-accent-flight, #00e5ff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: var(--lp-text-primary, #ffffff);
}

.landing-docs-hub-btn svg {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .landing-docs-section {
    padding: 44px 0;
  }

  .landing-docs-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 18px;
  }

  .landing-docs-section .landing-doc-card,
  .landing-doc-card {
    padding: 14px 16px;
  }

  .landing-docs-section .doc-card-badge,
  .doc-card-badge {
    font-size: 9.5px;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
  }

  .landing-docs-section .doc-card-icon,
  .doc-card-icon {
    font-size: 20px;
    margin-bottom: 4px;
    line-height: 1;
  }

  .landing-docs-section .doc-card-icon svg,
  .doc-card-icon svg {
    width: 20px;
    height: 20px;
  }

  .landing-docs-section .doc-card-title,
  .doc-card-title {
    font-size: 16px;
    margin-bottom: 4px;
    line-height: 1.25;
  }

  .landing-docs-section .doc-card-desc,
  .doc-card-desc {
    font-size: 12.5px;
    line-height: 1.4;
    margin-bottom: 10px;
  }

  .landing-docs-section .doc-card-link,
  .theme-roadtrip .landing-docs-section .doc-card-link,
  .doc-card-link {
    padding: 5px 12px;
    font-size: 11.5px;
    gap: 5px;
    margin-top: 2px;
  }

  .landing-docs-section .doc-card-link svg,
  .doc-card-link svg {
    width: 12px;
    height: 12px;
  }

  .landing-docs-subhead {
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.8px;
    gap: 10px;
  }

  .landing-doc-quick-links {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
  }

  .landing-docs-section .doc-quick-tile,
  .doc-quick-tile {
    padding: 12px 14px;
    gap: 10px;
  }

  .landing-docs-section .tile-icon,
  .tile-icon {
    font-size: 18px;
  }

  .landing-docs-section .tile-content h4,
  .tile-content h4 {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .landing-docs-section .tile-content p,
  .tile-content p {
    font-size: 12px;
  }

  .landing-docs-footer-action {
    margin-top: 24px;
  }

  .landing-docs-hub-btn {
    padding: 9px 18px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {

  .landing-docs-section .landing-doc-card,
  .landing-doc-card {
    padding: 12px 14px;
  }

  .landing-docs-section .doc-card-badge,
  .doc-card-badge {
    font-size: 9px;
    margin-bottom: 3px;
  }

  .landing-docs-section .doc-card-icon,
  .doc-card-icon {
    margin-bottom: 3px;
  }

  .landing-docs-section .doc-card-icon svg,
  .doc-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .landing-docs-section .doc-card-title,
  .doc-card-title {
    font-size: 15px;
    margin-bottom: 3px;
  }

  .landing-docs-section .doc-card-desc,
  .doc-card-desc {
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .landing-docs-section .doc-card-link,
  .theme-roadtrip .landing-docs-section .doc-card-link,
  .doc-card-link {
    padding: 4px 10px;
    font-size: 11px;
  }
}


/* --------------------------------------------------------------------------
   Account & Feature Tier Matrix Styles
   -------------------------------------------------------------------------- */
.landing-tiers-section {
  padding: 80px 0;
  background-color: var(--lp-surface-bg);
  border-top: 1px solid var(--lp-border-color);
}

.landing-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.tier-card {
  background: var(--lp-surface-bg);
  border: 1px solid var(--lp-border-color);
  border-radius: var(--lp-border-radius);
  padding: 32px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.tier-card.featured {
  border: 2px solid var(--lp-accent-flight);
  box-shadow: 0 8px 28px rgba(0, 229, 255, 0.15);
}

.tier-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 12px;
  background: var(--lp-surface-alt);
  color: var(--lp-text-muted);
  margin-bottom: 14px;
}

.tier-badge.popular {
  background: var(--lp-accent-flight-glow);
  color: var(--lp-accent-flight);
}

.tier-badge.pro {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
}

.tier-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--lp-text-primary);
  margin: 0 0 8px;
}

.tier-desc {
  font-size: 14px;
  color: var(--lp-text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
  min-height: 42px;
}

.tier-price {
  font-size: 32px;
  font-weight: 900;
  color: var(--lp-text-primary);
  margin-bottom: 24px;
}

.tier-price span {
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-text-muted);
}

.tier-features {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: var(--lp-text-secondary);
}

.tier-features li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tier-features li.disabled {
  color: var(--lp-text-muted);
  opacity: 0.6;
}

.tier-features .check {
  color: #10b981;
  font-weight: 800;
}

.tier-features .cross {
  color: #ef4444;
  font-weight: 800;
}

.landing-tiers-swipe-hint {
  display: none;
}

/* Below ~640px the grid would otherwise collapse to a single column, making
   the three tiers hard to compare without scrolling back and forth. Swap to
   a horizontal snap-scroll row instead so the cards stay comparable. */
@media (max-width: 640px) {
  .landing-tiers-swipe-hint {
    display: block;
    text-align: center;
    font-size: 13px;
    color: var(--lp-text-muted);
    margin: 10px 0 0;
  }

  .landing-tiers-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }

  .landing-tiers-grid::-webkit-scrollbar {
    display: none;
  }

  .tier-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
}

/* --------------------------------------------------------------------------
   Desktop 2-Column Asymmetric Grid Layout Rules
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .landing-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    text-align: left;
  }

  .landing-icon-motif {
    margin: 0 0 18px 0;
  }

  .landing-block-desc {
    margin-left: 0;
    margin-right: 0;
  }

  .landing-feature-block.reverse .landing-feature-grid {
    grid-template-areas: "graphic copy";
  }

  .landing-feature-block.reverse .landing-feature-info {
    grid-area: copy;
  }

  .landing-feature-block.reverse .landing-feature-card-wrapper {
    grid-area: graphic;
  }
}

/* Demo widget branding mock — same look as the real app's .hud-branding h1,
   but not a heading (this widget lives inside the landing page, whose only
   h1 is the hero title). */
.hud-brand-mock {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.75px;
  font-family: 'Space Grotesk', sans-serif;
}

.hud-brand-mock span {
  color: var(--accent-flight, #00f2fe);
}

.theme-journal .hud-brand-mock {
  color: #2e1e1e;
}

.theme-journal .hud-brand-mock span {
  color: #1e6b4a;
}

.theme-terminal .hud-brand-mock {
  color: #111827;
}

.theme-terminal .hud-brand-mock span {
  color: #0284c7;
}

.theme-airport .hud-brand-mock {
  color: #f8fafc;
}

.theme-airport .hud-brand-mock span {
  color: #facc15;
}

.theme-roadtrip .hud-brand-mock {
  color: #ffffff;
}

.theme-roadtrip .hud-brand-mock span {
  color: #F96A00;
  /* Construction Orange */
}

/* Fix weather widget color contrast specifically within the mockup's dark HUD for roadtrip theme */
.theme-roadtrip .landing-app-frame .weather-hud-layout,
.theme-roadtrip .landing-app-frame .weather-hud-temp,
.theme-roadtrip .landing-app-frame .weather-hud-range,
.theme-roadtrip .landing-app-frame .weather-hud-trend-hour,
.theme-roadtrip .landing-app-frame .weather-hud-trend-temp,
.theme-roadtrip .landing-app-frame .weather-hud-arrow {
  color: #ffffff !important;
}

.theme-roadtrip .landing-app-frame .weather-hud-location {
  color: #cbd5e1 !important;
}

.footer-copyright a,
.footer-signature {
  color: inherit !important;
  text-decoration: none !important;
}

.footer-copyright a:hover,
.footer-signature:hover {
  text-decoration: underline !important;
}