/* Landing page styles. Loaded by src/app/page.tsx via a <link>
   tag so we don't have to escape it inside a JS string literal. */

:root {
  --navy: #1B2A58;
  --navy-deep: #0F1A3A;
  --navy-soft: #2A3D75;
  --gold: #EFBD32;
  --gold-bright: #FFD24A;
  --gold-soft: #FFF4D6;
  --white: #FFFFFF;
  --ivory: #FBFAF6;
  --stone: #E8E5DC;
  --ink: #0A0E1F;
  --muted: #6B7280;
  --danger: #C53030;
  --green: #16A34A;
  --shadow-soft: 0 8px 32px rgba(15, 26, 58, 0.08);
  --shadow-strong: 0 24px 64px rgba(15, 26, 58, 0.18);
  --shadow-gold: 0 12px 36px rgba(239, 189, 50, 0.35);
}

.tv-landing * { margin: 0; padding: 0; box-sizing: border-box; }
.tv-landing { font-family: 'Source Sans 3', sans-serif; background: var(--ivory); color: var(--ink); line-height: 1.6; overflow-x: hidden; }
.tv-landing h1, .tv-landing h2, .tv-landing h3, .tv-landing h4 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.tv-landing .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* NAV */
.tv-landing nav {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(27, 42, 88, 0.95);
  backdrop-filter: blur(12px);
  z-index: 1000;
  padding: 16px 0;
  border-bottom: 1px solid rgba(239, 189, 50, 0.15);
}
.tv-landing nav .container { display: flex; align-items: center; justify-content: space-between; }
.tv-landing .logo { display: inline-flex; align-items: center; text-decoration: none; height: 100%; }
/* Match the in-app navbar trick: the navy bar itself is short (56px),
   but the logo image is sized at 100px to match the in-app md Logo,
   and overflow-visible lets it render taller than its container
   without expanding the bar. The wordmark reads at a comfortable
   size while the navy band stays slim. */
/* Navy bar back to the slimmer 56px the user previously confirmed
   as "perfect". The 370px logo still overflows above and below via
   overflow-visible — the bar itself is what shrinks here, not the
   logo. */
.tv-landing nav { padding: 0; height: 56px; overflow: visible; }
.tv-landing nav .container { height: 100%; align-items: center; }
/* Same visual treatment as the in-app navbar Logo component: bumps
   contrast + adds a soft white glow so the gold-on-navy wordmark
   reads sharp instead of washed out. Without this the same 100px
   image looks dim and visually smaller than it really is. */
/* Nav logo: oversized (370px) and overflowing the slim navy bar. */
.tv-landing nav .logo img {
  height: 370px !important;
  min-height: 370px;
  width: auto;
  display: block;
  filter: contrast(1.1) brightness(1.05) drop-shadow(0 0 0.3px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}
/* Footer logo at the same 370px size as the nav for brand weight,
   but with negative vertical margins so it doesn't expand the footer
   band itself. The image overflows above (into the CTA section, also
   dark) and below — net vertical space taken by the image is only
   ~110px, so the footer stays slim like the user wants. */
.tv-landing footer .logo {
  display: block;
  /* Container reserves a modest height; image overflows it. */
  line-height: 0;
}
.tv-landing footer .logo img {
  height: 370px;
  width: auto;
  display: block;
  margin-top: -130px;
  margin-bottom: -130px;
  filter: contrast(1.1) brightness(1.05) drop-shadow(0 0 0.3px rgba(255, 255, 255, 1)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.35));
}
@media (max-width: 900px) {
  .tv-landing nav { height: 48px; }
  .tv-landing nav .logo img { height: 160px !important; min-height: 160px; }
  .tv-landing footer .logo img { height: 160px; margin-top: -55px; margin-bottom: -55px; }
}
.tv-landing .nav-links { display: flex; gap: 32px; align-items: center; }
.tv-landing .nav-links a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s; }
.tv-landing .nav-links a:hover { color: var(--gold); }
.tv-landing .nav-cta { background: var(--gold); color: var(--navy) !important; padding: 10px 22px; border-radius: 6px; font-weight: 600; transition: all 0.2s; }
.tv-landing .nav-cta:hover { background: var(--gold-bright); transform: translateY(-1px); }
.tv-landing .mobile-menu-btn { display: none; background: none; border: none; color: var(--white); cursor: pointer; }

/* HERO */
.tv-landing .hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-soft) 100%);
  color: var(--white);
  /* Top padding leaves room for the slim nav (60px) plus the 370px
     logo image that overflows below it (~155px below the bar). */
  padding: 100px 0 30px;
  position: relative;
  overflow: hidden;
}
.tv-landing .hero::before {
  content: ''; position: absolute; top: -50%; right: -20%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(239, 189, 50, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.tv-landing .hero::after {
  content: ''; position: absolute; bottom: -200px; left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(239, 189, 50, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.tv-landing .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 2; }
.tv-landing .eyebrow {
  display: inline-block;
  background: rgba(239, 189, 50, 0.15);
  color: var(--gold);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 24px;
  border: 1px solid rgba(239, 189, 50, 0.3);
}
.tv-landing .hero h1 { font-size: clamp(40px, 5.5vw, 72px); margin-bottom: 24px; }
.tv-landing .hero h1 .accent { color: var(--gold); font-style: italic; }
.tv-landing .hero-sub { font-size: 20px; color: rgba(255, 255, 255, 0.85); margin-bottom: 36px; max-width: 560px; }
.tv-landing .hero-cta-group { display: flex; gap: 16px; flex-wrap: wrap; }
.tv-landing .btn-primary {
  background: var(--gold);
  color: var(--navy);
  padding: 18px 36px;
  border-radius: 8px;
  border: none;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s;
  box-shadow: var(--shadow-gold);
  font-family: inherit;
}
.tv-landing .btn-primary:hover { transform: translateY(-2px); background: var(--gold-bright); box-shadow: 0 16px 40px rgba(239, 189, 50, 0.45); }
.tv-landing .btn-secondary {
  background: transparent;
  color: var(--white);
  padding: 18px 36px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s;
}
.tv-landing .btn-secondary:hover { border-color: var(--gold); color: var(--gold); }
.tv-landing .hero-trust { margin-top: 40px; display: flex; gap: 32px; flex-wrap: wrap; align-items: center; }
.tv-landing .trust-item { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.tv-landing .trust-item svg { color: var(--gold); }

/* HERO VISUAL */
.tv-landing .hero-visual { position: relative; display: flex; justify-content: center; }
.tv-landing .pain-card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-strong);
  width: 100%;
  max-width: 420px;
  position: relative;
  transform: rotate(-2deg);
  animation: tv-float 6s ease-in-out infinite;
}
@keyframes tv-float {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-12px); }
}
.tv-landing .pain-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--stone); }
.tv-landing .pain-card-icon { width: 44px; height: 44px; background: rgba(197, 48, 48, 0.1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--danger); }
.tv-landing .pain-card-title { font-family: 'Source Sans 3'; font-size: 16px; font-weight: 600; color: var(--navy); }
.tv-landing .pain-card-sub { font-size: 14px; color: var(--muted); }
.tv-landing .pain-list { list-style: none; }
.tv-landing .pain-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 15px; color: var(--ink); border-bottom: 1px dashed var(--stone); }
.tv-landing .pain-list li:last-child { border-bottom: none; }
.tv-landing .pain-list .x { color: var(--danger); flex-shrink: 0; margin-top: 2px; }
.tv-landing .vault-card {
  position: absolute;
  bottom: -30px;
  right: -20px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
  color: var(--white);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-strong);
  max-width: 280px;
  transform: rotate(3deg);
  border: 2px solid var(--gold);
  animation: tv-float 6s ease-in-out infinite reverse;
}
.tv-landing .vault-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tv-landing .vault-card-icon { width: 32px; height: 32px; background: var(--gold); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--navy); }
.tv-landing .vault-card-title { font-family: 'DM Serif Display'; font-size: 20px; }
.tv-landing .vault-stat { font-family: 'DM Serif Display'; font-size: 36px; color: var(--gold); line-height: 1; margin: 8px 0; }
.tv-landing .vault-stat-label { font-size: 14px; color: rgba(255, 255, 255, 0.7); }

/* SECTION BASE */
.tv-landing section { padding: 20px 0; position: relative; }
.tv-landing .section-eyebrow { display: inline-block; color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.tv-landing .section-eyebrow.dark { color: var(--navy); }
.tv-landing .section-title { font-size: clamp(32px, 4vw, 52px); color: var(--navy); margin-bottom: 20px; max-width: 800px; }
.tv-landing .section-title .gold { color: var(--gold); font-style: italic; }
.tv-landing .section-sub { font-size: 19px; color: var(--muted); max-width: 700px; margin-bottom: 24px; }

/* PAIN-TO-SOLUTION SECTION */
.tv-landing .pain-section { background: var(--ivory); }
.tv-landing .solution-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.tv-landing .solution-row {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  transition: all 0.3s;
}
.tv-landing .solution-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--gold); }
.tv-landing .solution-pain {
  background: linear-gradient(135deg, #FFF6F6 0%, #FCEDED 100%);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--stone);
}
.tv-landing .solution-pain-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(197, 48, 48, 0.1);
  color: var(--danger);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  width: fit-content;
}
.tv-landing .solution-pain-text { font-family: 'DM Serif Display'; font-style: italic; font-size: 28px; color: var(--navy); line-height: 1.3; }
.tv-landing .solution-fix { padding: 32px 36px; }
.tv-landing .solution-fix-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(22, 163, 74, 0.1);
  color: var(--green);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tv-landing .solution-fix-list { list-style: none; }
.tv-landing .solution-fix-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 16px; color: var(--ink); }
.tv-landing .solution-fix-list li svg { color: var(--green); flex-shrink: 0; margin-top: 4px; }

/* COMPARISON */
.tv-landing .compare-section { background: linear-gradient(180deg, var(--ivory) 0%, var(--white) 100%); }
.tv-landing .compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 16px; }
.tv-landing .compare-card { border-radius: 20px; padding: 40px; position: relative; }
.tv-landing .compare-card.without { background: var(--white); border: 2px solid #FCE4E4; }
.tv-landing .compare-card.with { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--white); position: relative; overflow: hidden; }
.tv-landing .compare-card.with::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(239, 189, 50, 0.2) 0%, transparent 70%);
}
.tv-landing .compare-tag { display: inline-block; padding: 8px 18px; border-radius: 100px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 24px; }
.tv-landing .compare-card.without .compare-tag { background: #FCE4E4; color: var(--danger); }
.tv-landing .compare-card.with .compare-tag { background: var(--gold); color: var(--navy); }
.tv-landing .compare-card h3 { font-size: 35px; margin-bottom: 28px; }
.tv-landing .compare-card.without h3 { color: var(--navy); }
.tv-landing .compare-card.with h3 { color: var(--white); position: relative; }
.tv-landing .compare-list { list-style: none; position: relative; }
.tv-landing .compare-list li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; font-size: 17px; border-bottom: 1px solid; }
.tv-landing .compare-card.without .compare-list li { border-color: var(--stone); color: var(--ink); }
.tv-landing .compare-card.with .compare-list li { border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.92); }
.tv-landing .compare-list li:last-child { border-bottom: none; }
.tv-landing .compare-icon { flex-shrink: 0; margin-top: 3px; }
.tv-landing .compare-card.without .compare-icon { color: var(--danger); }
.tv-landing .compare-card.with .compare-icon { color: var(--gold); }

/* PRICING */
.tv-landing .pricing-section { background: var(--ivory); }
.tv-landing .pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 48px; }
.tv-landing .toggle-label { font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color 0.2s; }
.tv-landing .toggle-label.active { color: var(--navy); }
.tv-landing .toggle-switch {
  position: relative;
  width: 56px;
  height: 30px;
  background: var(--navy);
  border-radius: 100px;
  cursor: pointer;
  border: none;
}
.tv-landing .toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  background: var(--gold);
  border-radius: 50%;
  transition: transform 0.25s;
}
.tv-landing .toggle-switch.annual::after { transform: translateX(26px); }
.tv-landing .save-badge { background: var(--gold); color: var(--navy); padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.tv-landing .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tv-landing .price-card {
  background: var(--white);
  border: 1px solid var(--stone);
  border-radius: 18px;
  padding: 32px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.tv-landing .price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.tv-landing .price-card.featured { border: 2px solid var(--gold); background: linear-gradient(180deg, var(--white) 0%, #FFFCF2 100%); transform: scale(1.03); box-shadow: var(--shadow-soft); }
.tv-landing .price-card.featured:hover { transform: scale(1.03) translateY(-6px); }
.tv-landing .popular-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--navy); padding: 6px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.tv-landing .price-name { font-family: 'DM Serif Display'; font-size: 26px; color: var(--navy); margin-bottom: 6px; }
.tv-landing .price-tag-line { font-size: 14px; color: var(--muted); margin-bottom: 24px; min-height: 18px; }
.tv-landing .price-amount { font-family: 'DM Serif Display'; font-size: 48px; color: var(--navy); line-height: 1; margin-bottom: 4px; }
.tv-landing .price-amount.custom-price { font-size: 38px; }
.tv-landing .price-amount.custom-price .currency { font-size: 28px !important; color: var(--navy); vertical-align: baseline; margin-right: 4px; }
.tv-landing .price-amount .currency { font-size: 22px; color: var(--muted); vertical-align: top; }
.tv-landing .price-period { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.tv-landing .price-features { list-style: none; margin-bottom: 28px; flex: 1; }
.tv-landing .price-features li { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 15px; color: var(--ink); }
.tv-landing .price-features li svg { color: var(--green); flex-shrink: 0; margin-top: 3px; }
.tv-landing .price-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  width: 100%;
  font-family: inherit;
}
.tv-landing .price-cta.outline { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.tv-landing .price-cta.outline:hover { background: var(--navy); color: var(--white); }
.tv-landing .price-cta.solid { background: var(--gold); color: var(--navy); }
.tv-landing .price-cta.solid:hover { background: var(--gold-bright); }
.tv-landing .pricing-note { text-align: center; margin-top: 32px; font-size: 14px; color: var(--muted); }

/* CTA SECTION */
.tv-landing .cta-section { background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%); color: var(--white); text-align: center; position: relative; overflow: hidden; }
.tv-landing .cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(239, 189, 50, 0.12) 0%, transparent 60%); pointer-events: none; }
.tv-landing .cta-section .container { position: relative; z-index: 2; }
.tv-landing .cta-section h2 { font-size: clamp(36px, 4.5vw, 56px); color: var(--white); margin: 0 auto 20px; max-width: 800px; }
.tv-landing .cta-section h2 .gold { color: var(--gold); font-style: italic; }
.tv-landing .cta-section p { font-size: 20px; color: rgba(255, 255, 255, 0.85); max-width: 640px; margin: 0 auto 40px; }
.tv-landing .cta-section .btn-primary { font-size: 19px; padding: 22px 44px; }
.tv-landing .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.tv-landing .cta-note { margin-top: 24px; font-size: 15px; color: rgba(255, 255, 255, 0.6); }

/* FOOTER */
/* Footer padding cut by 60% (from 60/30 to 24/12) to slim the
   navy-deep band at the very bottom of the page. */
.tv-landing footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.7); padding: 24px 0 12px; }
.tv-landing .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 16px; }
/* Compact brand block: logo + one-line tagline, both aligned to
   the top of the footer grid so the column doesn't tower over the
   sibling Product / Get Started / Contact columns. */
.tv-landing .footer-brand { display: flex; flex-direction: column; gap: 12px; }
.tv-landing .footer-brand p { margin-top: 0; max-width: 320px; font-size: 14px; }
.tv-landing .footer-col h4 { font-family: 'Source Sans 3'; color: var(--white); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.tv-landing .footer-col a { display: block; color: rgba(255, 255, 255, 0.6); text-decoration: none; padding: 6px 0; font-size: 14px; transition: color 0.2s; }
.tv-landing .footer-col a:hover { color: var(--gold); }
.tv-landing .footer-bottom { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-size: 13px; }

/* AI CHAT WIDGET */
.tv-landing .chat-launcher { position: fixed; bottom: 24px; right: 24px; z-index: 9998; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.tv-landing .chat-bubble-prompt { background: var(--white); color: var(--navy); padding: 12px 18px; border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow-strong); font-size: 14px; font-weight: 500; max-width: 240px; animation: tv-bubbleIn 0.5s ease-out; cursor: pointer; border: 1px solid var(--stone); }
@keyframes tv-bubbleIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tv-landing .chat-bubble-prompt strong { color: var(--gold); display: block; margin-bottom: 2px; }
.tv-landing .chat-btn { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%); border: 3px solid var(--white); cursor: pointer; box-shadow: var(--shadow-gold); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: all 0.25s; position: relative; }
.tv-landing .chat-btn:hover { transform: scale(1.08); }
.tv-landing .chat-btn-pulse { position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; border: 3px solid var(--gold); animation: tv-pulse 2s infinite; }
@keyframes tv-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

/* CHAT WINDOW */
.tv-landing .chat-window { position: fixed; bottom: 24px; right: 24px; width: 400px; height: 620px; max-height: calc(100vh - 48px); background: var(--white); border-radius: 20px; box-shadow: var(--shadow-strong); z-index: 9999; display: none; flex-direction: column; overflow: hidden; border: 1px solid var(--stone); }
.tv-landing .chat-window.open { display: flex; animation: tv-chatIn 0.3s ease-out; }
@keyframes tv-chatIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.tv-landing .chat-header { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); color: var(--white); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }
.tv-landing .chat-header-info { display: flex; align-items: center; gap: 12px; }
.tv-landing .chat-avatar { width: 42px; height: 42px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--navy); font-family: 'DM Serif Display'; font-size: 20px; position: relative; }
.tv-landing .chat-avatar::after { content: ''; position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background: #22c55e; border-radius: 50%; border: 2px solid var(--navy); }
.tv-landing .chat-name { font-weight: 600; font-size: 15px; }
.tv-landing .chat-status { font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.tv-landing .chat-actions { display: flex; gap: 8px; }
.tv-landing .chat-icon-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 8px; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.tv-landing .chat-icon-btn:hover { background: rgba(255, 255, 255, 0.2); }
.tv-landing .chat-icon-btn.active { background: var(--gold); color: var(--navy); }

.tv-landing .chat-messages { flex: 1; overflow-y: auto; padding: 20px; background: var(--ivory); display: flex; flex-direction: column; gap: 12px; }
.tv-landing .chat-messages::-webkit-scrollbar { width: 6px; }
.tv-landing .chat-messages::-webkit-scrollbar-thumb { background: var(--stone); border-radius: 3px; }
.tv-landing .msg { max-width: 85%; padding: 12px 16px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; animation: tv-msgIn 0.3s ease-out; }
@keyframes tv-msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.tv-landing .msg.bot { background: var(--white); color: var(--ink); border-radius: 14px 14px 14px 4px; align-self: flex-start; border: 1px solid var(--stone); }
.tv-landing .msg.user { background: var(--navy); color: var(--white); border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.tv-landing .quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tv-landing .quick-reply { background: var(--white); border: 1px solid var(--gold); color: var(--navy); padding: 8px 14px; border-radius: 100px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; font-family: inherit; }
.tv-landing .quick-reply:hover { background: var(--gold); }
.tv-landing .quick-reply.solid { background: var(--gold); }
.tv-landing .quick-reply.solid:hover { background: var(--gold-bright); }
.tv-landing .typing { display: flex; gap: 4px; padding: 14px 16px; background: var(--white); border-radius: 14px 14px 14px 4px; align-self: flex-start; width: fit-content; border: 1px solid var(--stone); }
.tv-landing .typing span { width: 7px; height: 7px; background: var(--muted); border-radius: 50%; animation: tv-typing 1.4s infinite; }
.tv-landing .typing span:nth-child(2) { animation-delay: 0.2s; }
.tv-landing .typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tv-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } }
.tv-landing .chat-input-area { border-top: 1px solid var(--stone); background: var(--white); padding: 14px; }
.tv-landing .chat-input-row { display: flex; gap: 8px; align-items: center; }
.tv-landing .chat-input { flex: 1; border: 1px solid var(--stone); border-radius: 100px; padding: 12px 18px; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.2s; }
.tv-landing .chat-input:focus { border-color: var(--gold); }
.tv-landing .chat-send { width: 44px; height: 44px; background: var(--navy); border: none; border-radius: 50%; color: var(--gold); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.tv-landing .chat-send:hover { background: var(--navy-deep); }
.tv-landing .chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.tv-landing .chat-footer { text-align: center; padding: 8px 0 4px; font-size: 11px; color: var(--muted); }

/* VOICE MODE */
.tv-landing .voice-mode { position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%); z-index: 10; display: none; flex-direction: column; align-items: center; justify-content: center; color: var(--white); padding: 32px; text-align: center; }
.tv-landing .voice-mode.active { display: flex; }
.tv-landing .voice-orb-wrap { position: relative; width: 200px; height: 200px; margin-bottom: 32px; }
.tv-landing .voice-orb { width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-bright) 0%, var(--gold) 40%, #B8891E 100%); box-shadow: 0 0 80px rgba(239, 189, 50, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.2); position: relative; transition: transform 0.2s; }
.tv-landing .voice-orb.listening { animation: tv-orbPulse 1.5s ease-in-out infinite; }
.tv-landing .voice-orb.speaking { animation: tv-orbSpeak 0.6s ease-in-out infinite; }
@keyframes tv-orbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes tv-orbSpeak { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.tv-landing .voice-ring { position: absolute; inset: -20px; border: 2px solid rgba(239, 189, 50, 0.3); border-radius: 50%; animation: tv-ringExpand 2s ease-out infinite; opacity: 0; }
.tv-landing .voice-orb-wrap.active .voice-ring { opacity: 1; }
.tv-landing .voice-ring:nth-child(2) { animation-delay: 0.5s; }
.tv-landing .voice-ring:nth-child(3) { animation-delay: 1s; }
@keyframes tv-ringExpand { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
.tv-landing .voice-status { font-family: 'DM Serif Display'; font-size: 24px; margin-bottom: 8px; color: var(--gold); }
.tv-landing .voice-transcript { font-size: 15px; color: rgba(255, 255, 255, 0.8); min-height: 60px; max-width: 320px; margin-bottom: 32px; }
.tv-landing .voice-controls { display: flex; gap: 16px; }
.tv-landing .voice-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); width: 56px; height: 56px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.tv-landing .voice-btn:hover { background: rgba(255, 255, 255, 0.2); }
.tv-landing .voice-btn.end { background: var(--danger); border-color: var(--danger); }
.tv-landing .voice-btn.end:hover { background: #A52020; }
.tv-landing .voice-btn.mic-on { background: var(--gold); color: var(--navy); border-color: var(--gold); }

/* BOOKING MODAL */
.tv-landing .modal-overlay { position: fixed; inset: 0; background: rgba(15, 26, 58, 0.75); backdrop-filter: blur(8px); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; }
.tv-landing .modal-overlay.open { display: flex; }
.tv-landing .modal { background: var(--white); border-radius: 20px; max-width: 560px; width: 100%; padding: 40px; position: relative; animation: tv-modalIn 0.3s ease-out; max-height: 90vh; overflow-y: auto; }
@keyframes tv-modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.tv-landing .modal-close { position: absolute; top: 16px; right: 16px; background: var(--ivory); border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--navy); }
.tv-landing .modal h3 { font-size: 28px; color: var(--navy); margin-bottom: 8px; }
.tv-landing .modal-sub { color: var(--muted); margin-bottom: 24px; }

.tv-landing .booking-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.tv-landing .booking-option { border: 2px solid var(--stone); border-radius: 14px; padding: 20px; cursor: pointer; text-align: center; text-decoration: none; color: var(--navy); transition: all 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tv-landing .booking-option:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px); }
.tv-landing .booking-option svg { color: var(--gold); }
.tv-landing .booking-option .opt-title { font-family: 'DM Serif Display'; font-size: 18px; }
.tv-landing .booking-option .opt-sub { font-size: 13px; color: var(--muted); }
.tv-landing .booking-divider { text-align: center; color: var(--muted); font-size: 13px; margin: 4px 0 20px; position: relative; }
.tv-landing .booking-divider::before, .tv-landing .booking-divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: var(--stone); }
.tv-landing .booking-divider::before { left: 0; }
.tv-landing .booking-divider::after { right: 0; }

.tv-landing .form-group { margin-bottom: 18px; }
.tv-landing .form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.tv-landing .form-input, .tv-landing .form-select, .tv-landing .form-textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--stone); border-radius: 10px; font-size: 15px; font-family: inherit; background: var(--white); transition: border-color 0.2s; }
.tv-landing .form-input:focus, .tv-landing .form-select:focus, .tv-landing .form-textarea:focus { outline: none; border-color: var(--gold); }
.tv-landing .form-textarea { resize: vertical; min-height: 80px; }
.tv-landing .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-landing .btn-full { width: 100%; justify-content: center; margin-top: 8px; }
.tv-landing .modal-success { text-align: center; padding: 20px 0; }
.tv-landing .modal-success .check { width: 70px; height: 70px; background: rgba(34, 197, 94, 0.1); color: #22c55e; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }

/* MOBILE */
@media (max-width: 900px) {
  .tv-landing .nav-links { display: none; }
  .tv-landing .nav-links.mobile-open { display: flex; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy); flex-direction: column; padding: 20px; gap: 16px; }
  .tv-landing .mobile-menu-btn { display: block; }
  .tv-landing .hero { padding: 50px 0 40px; }
  .tv-landing .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .tv-landing .solution-row { grid-template-columns: 1fr; }
  .tv-landing .solution-pain { border-right: none; border-bottom: 1px solid var(--stone); }
  .tv-landing .compare-grid { grid-template-columns: 1fr; }
  .tv-landing .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
  .tv-landing .price-card.featured { transform: none; }
  .tv-landing .price-card.featured:hover { transform: translateY(-6px); }
  .tv-landing .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .tv-landing .chat-window { width: calc(100vw - 24px); right: 12px; bottom: 12px; height: calc(100vh - 24px); max-height: none; }
  .tv-landing .chat-launcher { right: 16px; bottom: 16px; }
  .tv-landing .chat-bubble-prompt { max-width: 200px; font-size: 13px; }
  .tv-landing .modal { padding: 28px 24px; }
  .tv-landing .form-row, .tv-landing .booking-options { grid-template-columns: 1fr; }
  .tv-landing section { padding: 20px 0; }
  .tv-landing .vault-card { right: 0; bottom: -20px; transform: rotate(2deg) scale(0.85); }
  .tv-landing .cta-row { flex-direction: column; }
}
@media (max-width: 1240px) and (min-width: 901px) {
  .tv-landing .pricing-grid { grid-template-columns: repeat(3, 1fr); }
  .tv-landing .price-card.featured { transform: none; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .tv-landing .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .tv-landing .price-card.featured { transform: none; }
}

/* AI inline row in the pain/fix stack. By default it looks like
   every other row (the parent .solution-row rules apply). The gold
   tint only appears on hover, matching the existing hover state on
   .solution-row. The badge is a small navy/gold pill always visible
   inside the "How TrustVault fixes it" tag. */
.tv-landing .solution-row.ai-row:hover .solution-fix {
  background: linear-gradient(135deg, #ffffff 0%, #fff8e1 100%);
  border-color: #EFBD32;
  box-shadow: 0 6px 18px rgba(239, 189, 50, 0.18);
}
.tv-landing .ai-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #1B2A58;
  color: #EFBD32;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 999px;
  text-transform: uppercase;
  vertical-align: middle;
}