/* =========================================================================
   TrueVisit — public website design system
   =========================================================================

   Scope: the marketing homepage AND the public product/quote pages, which
   share this sheet through resources/views/layouts/public.blade.php. It is
   NOT loaded by the client or super-admin Filament panels — those keep their
   own theme (public/css/filament/admin/cobalt-theme.css).

   Two constraints shape how this is written:

   1. The product pages load BOTH this sheet and the compiled Tailwind bundle
      (resources/css/app.css). Bare element selectors here therefore land on
      Tailwind-styled quote forms too. Utilities win the cascade on specificity
      (0,1,0 beats 0,0,1), so styled form markup is safe — but anything that
      would restyle *unclassed* form internals is scoped under .tv-prose or a
      component class rather than left global.

   2. Bootstrap 5 is loaded ahead of this sheet and drives the nav offcanvas,
      the products dropdown and the FAQ accordion. This sheet restyles those
      components rather than replacing them — no JS behaviour is reimplemented.

   Layer order below: tokens -> base -> layout -> components -> motion.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* Brand. Navy anchors the identity; teal is the single accent used for
     emphasis, "included" ticks and the recommended plan. Two accents would
     dilute the hierarchy the redesign is built around. */
  --tv-primary: #0B4F9E;
  --tv-primary-dark: #083A76;
  --tv-primary-deep: #06284F;
  --tv-primary-tint: rgba(11, 79, 158, 0.08);
  --tv-primary-tint-strong: rgba(11, 79, 158, 0.14);

  --tv-accent: #00B8A9;
  --tv-accent-dark: #067A70;
  --tv-accent-tint: rgba(0, 184, 169, 0.12);

  /* Neutrals */
  --tv-ink: #0A1628;
  --tv-ink-soft: #1E293B;
  --tv-muted: #5B6B7F;
  --tv-line: #E4E9F0;
  --tv-line-soft: #EFF3F8;
  --tv-surface: #F6F9FC;
  --tv-surface-2: #EDF3F9;
  --tv-white: #FFFFFF;

  /* Radii — generous, consistent, the main "premium" tell alongside spacing */
  --tv-r-sm: 8px;
  --tv-r-md: 12px;
  --tv-r-lg: 16px;
  --tv-r-xl: 20px;
  --tv-r-2xl: 28px;
  --tv-r-pill: 999px;

  /* Shadows — layered rather than a single flat blur */
  --tv-shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.05);
  --tv-shadow-sm: 0 2px 6px rgba(10, 22, 40, 0.06);
  --tv-shadow-md: 0 10px 28px -8px rgba(10, 22, 40, 0.14);
  --tv-shadow-lg: 0 24px 56px -16px rgba(10, 22, 40, 0.22);
  --tv-shadow-xl: 0 40px 88px -24px rgba(10, 22, 40, 0.32);
  --tv-ring: 0 0 0 1px var(--tv-line);

  /* Vertical rhythm. clamp() rather than a media query so the step between
     mobile and desktop is continuous — no jump at an arbitrary breakpoint. */
  --tv-section-py: clamp(4rem, 8vw, 7.5rem);
  --tv-gap: clamp(1rem, 2.5vw, 2rem);

  --tv-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --tv-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ base -- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sticky header height + breathing room, so an in-page anchor never lands
     with its heading hidden behind the header. */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--tv-font);
  color: var(--tv-ink);
  line-height: 1.65;
  background: var(--tv-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--tv-primary);
  text-decoration: none;
  transition: color 160ms var(--tv-ease);
}

a:hover {
  color: var(--tv-primary-dark);
}

/* Headings carry the hierarchy; the display size is reserved for the one h1
   per page. Utility classes still override these (see the header comment). */
h1, h2, h3, h4, h5 {
  font-weight: 750;
  color: var(--tv-ink);
  letter-spacing: -0.022em;
  margin-top: 0;
}

h1 {
  font-size: clamp(2.35rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
}

h2 {
  font-size: clamp(1.85rem, 1.25rem + 2.2vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
}

h3 {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.32;
  font-weight: 700;
}

h4 {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
}

.tv-display {
  font-size: clamp(2.2rem, 1.2rem + 3.9vw, 3.9rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
  font-weight: 780;
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.62;
  color: var(--tv-muted);
}

.tv-muted { color: var(--tv-muted); }
.tv-balance { text-wrap: balance; }
.tv-pretty { text-wrap: pretty; }

/* Measure control, opt-in. Left off `p` globally so quote-form paragraphs and
   helper text are never silently narrowed. */
.tv-prose p { max-width: 68ch; }
.tv-measure { max-width: 42rem; }

/* Long-form legal/policy text (Privacy Policy, Terms & Conditions). The
   marketing h2/h3 sizes above are sized for a handful of section headings on
   a landing page — too large repeated a dozen times down a legal document —
   so this scales them down and adds the list/paragraph rhythm prose needs
   that the marketing sections never do (they build their own layout instead
   of relying on default element flow). */
.tv-prose h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.tv-prose h3 {
  font-size: 1.1rem;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.tv-prose p,
.tv-prose ul,
.tv-prose ol {
  margin-bottom: 1rem;
  color: var(--tv-ink-soft);
}

.tv-prose ul,
.tv-prose ol {
  padding-left: 1.25rem;
}

.tv-prose li {
  margin-bottom: 0.4rem;
  max-width: 68ch;
}

.tv-prose li::marker {
  color: var(--tv-muted);
}

.tv-prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tv-prose strong { color: var(--tv-ink); }

/*
 * Bootstrap's Reboot floats <legend> (`float: left; width: 100%;` — a
 * decades-old trick for its own form-grid alignment) and this sheet loads
 * after Bootstrap's, so it wins the tie on selector specificity via source
 * order. None of the four <legend> elements in this app (all in the Tailwind
 * quote forms — travel.blade.php, life.blade.php) use Bootstrap's form grid,
 * so nothing needs that behaviour.
 *
 * Left un-neutralised, an unrelated sibling block that starts within the
 * floated legend's vertical extent (e.g. a taller two-line legend, like the
 * pre-existing-conditions question with its info button) gets its available
 * width computed against the float and collapses to width:0, pushed off to
 * the right — visually "escaping" its card. Confirmed on
 * /supervisa-quote → Couple Policy → the per-applicant pre-existing-
 * conditions row.
 */
legend {
  float: none;
  width: auto;
}

/*
 * The small circular "i" info button next to the pre-existing-conditions
 * question (travel.blade.php). Plain CSS rather than Tailwind utilities for
 * the same reason as the legend fix above, but a sharper case of it: Tailwind
 * v4 wraps every utility class in `@layer utilities`, and per the CSS
 * Cascade Layers spec an UNLAYERED rule always wins over a layered one
 * regardless of specificity or source order. Bootstrap's plain <link> is
 * unlayered, so its Reboot rules (`button { border-radius: 0 }`, and
 * `button { font-size: inherit }` — inheriting the parent <legend>'s 1.5rem)
 * silently beat text-[8px]/rounded-full/h-3.5/w-3.5 no matter what order the
 * two stylesheets load in. This sheet's own <link> is ALSO unlayered, so it
 * only reliably wins because it is the plain CSS approach in the first
 * place, not a Tailwind class fighting the same losing battle.
 */
.tv-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 0.25rem;
  border: 1px solid #94A3B8;
  border-radius: 9999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  font-family: var(--tv-font);
  color: #64748B;
  background: #fff;
  cursor: help;
  flex-shrink: 0;
}

/*
 * The stacked actions inside a plan card — "Plan Summary", "View Details".
 *
 * These have to look identical, and they cannot both be described in Tailwind
 * alone, because one is a <button> and one is an <a>. Bootstrap's Reboot is
 * loaded unlayered on these pages while Tailwind v4 wraps every utility in
 * `@layer utilities`, and per the Cascade Layers spec an unlayered rule beats
 * a layered one regardless of specificity — so on the <button> only,
 * `button { font-size: inherit; line-height: inherit }` and
 * `button { border-radius: 0 }` quietly won. "Plan Summary" therefore rendered
 * at 16px/26.4px with square corners and a 44px box, next to a "View Details"
 * anchor at 12px/16px, 6px radius, 34px box. Same classes in the markup, two
 * visibly different buttons. See .tv-info-btn above for the same trap.
 *
 * The five declarations below are exactly what the <a> already computes to, so
 * adding this class to it changes nothing and adding it to the <button> makes
 * the two identical. Being unlayered, it wins on both elements.
 *
 * Border COLOUR is deliberately not set: both elements already resolve to the
 * same value from the existing cascade, and leaving it alone keeps them
 * following the theme together rather than pinning a hex here.
 *
 * This class is ADDITIVE — the markup keeps its full Tailwind class list. The
 * embedded widget (layouts/public.blade.php, @unless $embedded) loads neither
 * Bootstrap nor this sheet, so there the utilities are the only styling and
 * must still stand alone; nothing here may be the sole source of a property.
 */
.tv-card-btn {
  display: block;
  width: 100%;
  border-radius: 6px;
  font-size: 12px;
  line-height: 16px;
  /* Reboot's `button, select { text-transform: none }` kills Tailwind's
     `uppercase` on the solid buttons but not on the anchors, so the same
     action rendered two different ways depending on its tag. Pinned to `none`
     for all of them: the markup no longer asks for uppercase, so hosted and
     embedded now agree. */
  text-transform: none;
}

/* Outline actions — Plan Summary, View Details, Call Us, WhatsApp. */
.tv-card-btn--outline {
  color: var(--brand);
}

.tv-card-btn--outline:hover {
  background-color: #F8FAFC; /* slate-50, matching the Tailwind hover they carry */
}

/* Filled actions — Buy Directly, Contact Us. The background stays in the
   markup (slate-900, or the tenant's --brand inline); only the text colour is
   pinned here, alongside the box metrics above. */
.tv-card-btn--solid {
  color: #fff;
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--tv-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- layout -- */

/* Named .tv-shell, not .container: pages that load both this sheet and the
   Tailwind bundle would otherwise hit a collision between Bootstrap's
   .container and the bare .container Tailwind emits after scanning this
   markup. Neither framework defines .tv-shell. */
.tv-shell {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.tv-shell--narrow { max-width: 940px; }
.tv-shell--wide { max-width: 1320px; }

/* A Bootstrap .row pulls itself outward by half its gutter. At the g-4/g-5
   sizes used here that negative margin (24px) is wider than .tv-shell's own
   padding on a phone (16px), so the row hangs off both edges and the page
   scrolls sideways. Capping the gutter below sm keeps the row inside the
   shell; the columns are stacked at that width anyway, so nothing is lost. */
@media (max-width: 575.98px) {
  .tv-shell > .row,
  .tv-shell > * > .row {
    --bs-gutter-x: 1.5rem;
  }
}

.tv-section {
  padding-block: var(--tv-section-py);
  position: relative;
}

.tv-section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.tv-section--alt { background: var(--tv-surface); }

.tv-section--dark {
  background: var(--tv-ink);
  color: rgba(255, 255, 255, 0.78);
}

.tv-section--dark h2,
.tv-section--dark h3,
.tv-section--dark .tv-display { color: #fff; }

.tv-section--dark .lead,
.tv-section--dark .tv-muted { color: rgba(255, 255, 255, 0.7); }

/* A hairline between two same-coloured sections, so the rhythm reads as
   deliberate rather than as one long undifferentiated run. */
.tv-section--edge { border-top: 1px solid var(--tv-line-soft); }

.tv-section-head {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tv-section-head--left {
  margin-inline: 0;
  text-align: left;
}

.tv-section-head h2 { margin-bottom: 0.9rem; }
.tv-section-head p { margin-bottom: 0; }
.tv-section-head--left p { margin-inline: 0; }
.tv-section-head p { margin-inline: auto; max-width: 44rem; }

.tv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tv-primary);
  background: var(--tv-primary-tint);
  border: 1px solid rgba(11, 79, 158, 0.14);
  padding: 0.34rem 0.85rem;
  border-radius: var(--tv-r-pill);
  margin-bottom: 1.15rem;
}

.tv-eyebrow--accent {
  color: var(--tv-accent-dark);
  background: var(--tv-accent-tint);
  border-color: rgba(0, 184, 169, 0.22);
}

.tv-eyebrow--onDark {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.tv-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------- buttons -- */

.tv-btn,
.btn-tv-primary,
.btn-tv-secondary,
.btn-tv-outline,
.btn-tv-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-weight: 650;
  font-size: 0.975rem;
  line-height: 1.2;
  padding: 0.85rem 1.6rem;
  border-radius: var(--tv-r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 200ms var(--tv-ease), box-shadow 200ms var(--tv-ease),
    background-color 160ms var(--tv-ease), color 160ms var(--tv-ease),
    border-color 160ms var(--tv-ease);
}

.tv-btn:active,
.btn-tv-primary:active,
.btn-tv-secondary:active,
.btn-tv-outline:active,
.btn-tv-solid:active { transform: translateY(0); }

/* Solid navy — the single primary action on light backgrounds. */
.tv-btn--primary,
.btn-tv-solid {
  background: var(--tv-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.12);
}

.tv-btn--primary:hover,
.btn-tv-solid:hover {
  background: var(--tv-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--tv-shadow-md);
}

/* White — the primary action on top of the navy hero. */
.tv-btn--light,
.btn-tv-primary {
  background: var(--tv-white);
  color: var(--tv-primary-dark);
  box-shadow: var(--tv-shadow-md);
}

.tv-btn--light:hover,
.btn-tv-primary:hover {
  color: var(--tv-primary-deep);
  transform: translateY(-2px);
  box-shadow: var(--tv-shadow-lg);
}

/* Translucent — the secondary action on dark. Kept because
   subscribe/success.blade.php and subscribe/cancelled.blade.php both use it
   over .tv-hero. */
.tv-btn--onDark,
.btn-tv-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tv-btn--onDark:hover,
.btn-tv-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

/* Bordered — secondary action on light. */
.tv-btn--outline,
.btn-tv-outline {
  background: var(--tv-white);
  color: var(--tv-ink);
  border-color: var(--tv-line);
}

.tv-btn--outline:hover,
.btn-tv-outline:hover {
  border-color: var(--tv-primary);
  color: var(--tv-primary);
  background: var(--tv-white);
  transform: translateY(-2px);
  box-shadow: var(--tv-shadow-sm);
}

.tv-btn--ghost {
  background: transparent;
  color: var(--tv-ink);
  border-color: transparent;
  padding-inline: 0.9rem;
}

.tv-btn--ghost:hover {
  background: var(--tv-primary-tint);
  color: var(--tv-primary);
}

.tv-btn--lg {
  font-size: 1.05rem;
  padding: 1.05rem 2rem;
  border-radius: var(--tv-r-md);
}

.tv-btn--sm {
  font-size: 0.875rem;
  padding: 0.6rem 1.1rem;
}

.tv-btn--block { width: 100%; }

/* The arrow nudges on hover — a small directional cue on the main CTAs. */
.tv-btn-arrow { transition: transform 220ms var(--tv-ease); }
.tv-btn:hover .tv-btn-arrow,
.btn-tv-solid:hover .tv-btn-arrow,
.btn-tv-primary:hover .tv-btn-arrow { transform: translateX(3px); }

.tv-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------------- header -- */

.tv-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 240ms var(--tv-ease), border-color 240ms var(--tv-ease),
    background-color 240ms var(--tv-ease);
}

.tv-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--tv-shadow-sm);
  border-bottom-color: var(--tv-line);
}

.tv-header .navbar { padding-block: 0.85rem; }

.tv-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 780;
  font-size: 1.24rem;
  letter-spacing: -0.028em;
  color: var(--tv-ink);
}

.tv-logo:hover { color: var(--tv-ink); }

.tv-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--tv-primary) 0%, var(--tv-accent) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(11, 79, 158, 0.4);
  transition: transform 260ms var(--tv-ease);
}

.tv-logo:hover .tv-logo-mark { transform: rotate(-6deg) scale(1.05); }

.tv-nav-link {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--tv-ink-soft);
  padding: 0.5rem 0.85rem;
  border-radius: var(--tv-r-sm);
  position: relative;
  transition: color 160ms var(--tv-ease), background-color 160ms var(--tv-ease);
}

.tv-nav-link:hover,
.tv-nav-link:focus {
  color: var(--tv-primary);
  background: var(--tv-primary-tint);
}

/* Current section, set by main.js's scroll spy. */
.tv-nav-link.is-active { color: var(--tv-primary); }

.tv-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--tv-primary);
}

.tv-products-menu {
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-lg);
  box-shadow: var(--tv-shadow-lg);
  padding: 0.5rem;
  min-width: 19rem;
  margin-top: 0.5rem;
}

.tv-products-menu .dropdown-item {
  border-radius: var(--tv-r-sm);
  padding: 0.7rem 0.85rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--tv-ink);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: normal;
  transition: background-color 140ms var(--tv-ease), color 140ms var(--tv-ease);
}

.tv-products-menu .dropdown-item:hover,
.tv-products-menu .dropdown-item:focus,
.tv-products-menu .dropdown-item.active {
  background: var(--tv-primary-tint);
  color: var(--tv-primary);
}

.tv-products-menu .dropdown-item.active { font-weight: 700; }

.tv-menu-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tv-primary-tint);
  color: var(--tv-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tv-offcanvas { border-left: 1px solid var(--tv-line); }
.tv-offcanvas .offcanvas-header { padding: 1.25rem 1.35rem; border-bottom: 1px solid var(--tv-line-soft); }
.tv-offcanvas .offcanvas-body { padding: 1.1rem 1.35rem 2rem; }
.tv-offcanvas .tv-nav-link { display: block; padding-block: 0.7rem; }

/* ------------------------------------------------------------------ hero -- */

.tv-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 80% -10%, #1668C4 0%, transparent 55%),
    radial-gradient(90% 80% at 5% 105%, rgba(0, 184, 169, 0.45) 0%, transparent 55%),
    linear-gradient(150deg, #06284F 0%, #0B4F9E 52%, #0d5aa8 100%);
  color: #fff;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(4.5rem, 10vw, 8rem);
}

.tv-hero h1,
.tv-hero h2 { color: #fff; }

.tv-hero p.lead { color: rgba(255, 255, 255, 0.84); }

/* Fine dot grid — texture that reads as "product", not decoration. */
.tv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}

.tv-hero-content {
  position: relative;
  z-index: 1;
}

/* Small proof line directly under the hero CTAs. */
.tv-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

.tv-trust-strip li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tv-trust-strip svg { color: var(--tv-accent); flex-shrink: 0; }

/* ---- Hero visual: a hand-built product mockup, never a hotlinked image, so
   the page's LCP element has no external dependency and no real client data. */

.tv-browser-frame {
  background: #fff;
  border-radius: var(--tv-r-lg);
  box-shadow: var(--tv-shadow-xl), 0 0 0 1px rgba(255, 255, 255, 0.14);
  overflow: hidden;
  color: var(--tv-ink);
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition: transform 600ms var(--tv-ease);
}

.tv-browser-frame:hover {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-4px);
}

.tv-browser-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.95rem;
  background: var(--tv-surface-2);
  border-bottom: 1px solid var(--tv-line);
}

.tv-browser-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C6D2E0;
}

.tv-browser-url {
  margin-left: 0.6rem;
  font-size: 0.72rem;
  color: var(--tv-muted);
  background: #fff;
  border-radius: var(--tv-r-pill);
  padding: 0.22rem 0.8rem;
  flex: 1;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-mock-cards {
  padding: 1.15rem;
  display: grid;
  gap: 0.7rem;
  background: var(--tv-surface);
}

.tv-mock-card {
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-md);
  background: #fff;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: var(--tv-shadow-xs);
}

.tv-mock-card--best {
  border-color: var(--tv-accent);
  box-shadow: 0 0 0 3px rgba(0, 184, 169, 0.16), var(--tv-shadow-sm);
}

.tv-mock-card-name { font-weight: 700; font-size: 0.9rem; }
.tv-mock-card-sub { font-size: 0.75rem; color: var(--tv-muted); }

.tv-mock-card-price {
  text-align: right;
  font-weight: 780;
  font-size: 1.1rem;
  color: var(--tv-primary);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.tv-mock-card-price small {
  display: block;
  font-weight: 500;
  font-size: 0.68rem;
  color: var(--tv-muted);
  letter-spacing: 0;
}

.tv-mock-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--tv-accent-dark);
  padding: 0.14rem 0.5rem;
  border-radius: var(--tv-r-pill);
  margin-bottom: 0.35rem;
}

/* Floating stat chip pinned to the mockup — a depth cue. */
.tv-float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  color: var(--tv-ink);
  border-radius: var(--tv-r-md);
  padding: 0.7rem 0.95rem;
  box-shadow: var(--tv-shadow-lg);
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 2;
}

.tv-float-chip-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tv-primary);
  letter-spacing: -0.02em;
}

.tv-float-chip-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tv-accent-tint);
  color: var(--tv-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Sits off the frame's bottom-left corner. Clear of the mockup's own text —
   it overlaps the card edge only, which is the depth cue; covering a price
   would just look broken. */
.tv-float-chip--bl { left: -2.25rem; bottom: -2.25rem; }

@media (max-width: 991.98px) {
  .tv-browser-frame { transform: none; }
  .tv-browser-frame:hover { transform: translateY(-4px); }
  .tv-float-chip { display: none; }
}

/* ------------------------------------------------------------ logo strip -- */

.tv-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem clamp(1.5rem, 4vw, 3.25rem);
}

.tv-logo-chip {
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--tv-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.85;
  transition: opacity 200ms var(--tv-ease), color 200ms var(--tv-ease);
}

.tv-logo-chip:hover { opacity: 1; color: var(--tv-ink); }

/* ----------------------------------------------------------------- cards -- */

.tv-card {
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.85rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--tv-ease), box-shadow 260ms var(--tv-ease),
    border-color 260ms var(--tv-ease);
}

.tv-card--hover:hover,
.tv-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--tv-shadow-md);
  border-color: rgba(11, 79, 158, 0.28);
}

.tv-feature-card {
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-lg);
  padding: clamp(1.4rem, 2.5vw, 1.85rem);
  height: 100%;
  transition: transform 260ms var(--tv-ease), box-shadow 260ms var(--tv-ease),
    border-color 260ms var(--tv-ease);
}

.tv-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tv-r-md);
  background: var(--tv-primary-tint);
  color: var(--tv-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  transition: transform 260ms var(--tv-ease), background-color 260ms var(--tv-ease);
}

.tv-feature-card:hover .tv-feature-icon,
.tv-card--hover:hover .tv-feature-icon {
  transform: scale(1.08) rotate(-4deg);
  background: var(--tv-primary-tint-strong);
}

.tv-feature-icon--accent {
  background: var(--tv-accent-tint);
  color: var(--tv-accent-dark);
}

.tv-feature-card h3 { margin-bottom: 0.5rem; }

.tv-feature-card p,
.tv-card p {
  font-size: 0.945rem;
  color: var(--tv-muted);
  margin-bottom: 0;
  line-height: 1.62;
}

/* Product cards — one per insurance line, on the homepage overview. */
.tv-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-lg);
  padding: 1.6rem 1.5rem;
  overflow: hidden;
  transition: transform 260ms var(--tv-ease), box-shadow 260ms var(--tv-ease),
    border-color 260ms var(--tv-ease);
}

/* Per-product accent bar: each line keeps its own identity while the card
   system stays identical. --tv-pc is set inline per card in the markup. */
.tv-product-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: var(--tv-pc, var(--tv-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--tv-ease);
}

.tv-product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--tv-shadow-md);
  border-color: color-mix(in srgb, var(--tv-pc, var(--tv-primary)) 32%, var(--tv-line));
}

.tv-product-card:hover::before { transform: scaleX(1); }

.tv-product-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tv-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--tv-pc, var(--tv-primary)) 12%, transparent);
  color: var(--tv-pc, var(--tv-primary));
  transition: transform 260ms var(--tv-ease);
}

.tv-product-card:hover .tv-product-icon { transform: scale(1.08) rotate(-4deg); }

.tv-product-card h3 { margin-bottom: 0.45rem; }

.tv-product-card p {
  font-size: 0.925rem;
  color: var(--tv-muted);
  margin-bottom: 1.15rem;
  flex: 1;
}

.tv-product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--tv-pc, var(--tv-primary));
  margin-top: auto;
}

.tv-product-link svg { transition: transform 220ms var(--tv-ease); }
.tv-product-card:hover .tv-product-link svg { transform: translateX(4px); }

/* Split "why choose" tiles */
.tv-why-tile {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.15rem 0;
}

.tv-why-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--tv-r-md);
  background: var(--tv-accent-tint);
  color: var(--tv-accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tv-why-tile h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.tv-why-tile p { font-size: 0.93rem; color: var(--tv-muted); margin-bottom: 0; }

/* Checklist */
.tv-check-list { list-style: none; padding: 0; margin: 0; }

.tv-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.42rem 0;
  font-size: 0.95rem;
}

.tv-check-list svg {
  color: var(--tv-accent-dark);
  flex-shrink: 0;
  margin-top: 0.28rem;
}

/* ---------------------------------------------------------------- steps -- */

/* Numbered storytelling rail. The connector is drawn on the list, not on each
   item, so it never doubles up or overhangs the first/last marker. */
.tv-steps {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  counter-reset: tv-step;
}

@media (min-width: 768px) {
  .tv-steps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tv-steps--row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tv-step { position: relative; }

.tv-step-number {
  width: 54px;
  height: 54px;
  border-radius: var(--tv-r-md);
  background: linear-gradient(135deg, var(--tv-primary) 0%, #1668C4 100%);
  color: #fff;
  font-weight: 780;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  box-shadow: 0 8px 20px -6px rgba(11, 79, 158, 0.5);
  position: relative;
  z-index: 1;
  transition: transform 280ms var(--tv-ease);
}

.tv-step:hover .tv-step-number { transform: translateY(-3px) scale(1.05); }

.tv-step h3 { margin-bottom: 0.45rem; }
.tv-step p { font-size: 0.94rem; color: var(--tv-muted); margin-bottom: 0; }

/* Horizontal connector between step markers on wide screens. */
@media (min-width: 768px) {
  .tv-steps--row .tv-step:not(:last-child)::after,
  .tv-steps--row-3 .tv-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 62px;
    right: -1.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--tv-line) 0%, var(--tv-line) 60%, transparent 100%);
    z-index: 0;
  }
}

/* Alternating full-width feature rows (the "how it works" storytelling). */
.tv-story {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 992px) {
  .tv-story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tv-story--flip .tv-story-media { order: -1; }
}

.tv-story + .tv-story { margin-top: clamp(3.5rem, 7vw, 6rem); }

.tv-story-index {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tv-primary);
  margin-bottom: 1rem;
}

.tv-story-index span:first-child {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--tv-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.tv-story-media {
  background: linear-gradient(150deg, var(--tv-surface-2) 0%, var(--tv-surface) 100%);
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-xl);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  box-shadow: var(--tv-shadow-sm);
}

/* --------------------------------------------------------- mock dashboard -- */

.tv-mock-dashboard {
  padding: 1.4rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem;
  background: var(--tv-surface);
}

.tv-mock-stat {
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-md);
  padding: 1rem;
  background: #fff;
}

.tv-mock-stat-label {
  font-size: 0.7rem;
  color: var(--tv-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
  margin-bottom: 0.35rem;
}

.tv-mock-stat-value {
  font-size: 1.45rem;
  font-weight: 780;
  color: var(--tv-ink);
  letter-spacing: -0.02em;
}

.tv-mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: #fff;
  /* Fixed layout so the four columns divide the space available instead of
     each demanding its min-content width. Auto layout gave this table a
     ~390px floor, which on a 375px viewport pushed the whole page sideways. */
  table-layout: fixed;
}

.tv-mock-table th,
.tv-mock-table td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--tv-line);
  text-align: left;
}

.tv-mock-table th {
  color: var(--tv-muted);
  font-weight: 650;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--tv-surface);
}

.tv-mock-table tr:last-child td { border-bottom: 0; }
.tv-mock-table td.is-yes { color: var(--tv-accent-dark); font-weight: 650; }

/* Tabs on the product tour */
.tv-tour-tabs {
  gap: 0.25rem;
  border-bottom: 1px solid var(--tv-line);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.tv-tour-tabs::-webkit-scrollbar { display: none; }

.tv-tour-tabs .nav-link {
  font-weight: 650;
  font-size: 0.93rem;
  color: var(--tv-muted);
  border: none;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  padding: 0.85rem 1.15rem;
  white-space: nowrap;
  transition: color 160ms var(--tv-ease), border-color 160ms var(--tv-ease);
}

.tv-tour-tabs .nav-link:hover { color: var(--tv-ink); }

.tv-tour-tabs .nav-link.active {
  color: var(--tv-primary);
  border-bottom-color: var(--tv-primary);
  background: transparent;
}

.tv-tour-frame { margin-top: 1.75rem; }

/* ----------------------------------------------------------------- stats -- */

.tv-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 768px) {
  .tv-stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tv-stat-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tv-stat {
  text-align: center;
  padding: clamp(1.25rem, 3vw, 2rem) 1rem;
  border-radius: var(--tv-r-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tv-stat-value {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 0.45rem;
}

.tv-stat-label {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.45;
  margin-bottom: 0;
}

/* Light variant, used inside the About block. */
.tv-stat--light {
  background: #fff;
  border-color: var(--tv-line);
}

.tv-stat--light .tv-stat-value { color: var(--tv-primary); }
.tv-stat--light .tv-stat-label { color: var(--tv-muted); }

/* --------------------------------------------------------------- pricing -- */

.tv-plan-grid-public {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 640px) {
  .tv-plan-grid-public { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .tv-plan-grid-public--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tv-plan-grid-public--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tv-plan-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--tv-line);
  border-radius: var(--tv-r-xl);
  padding: 1.85rem 1.6rem 1.6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--tv-ease), box-shadow 260ms var(--tv-ease),
    border-color 260ms var(--tv-ease);
}

.tv-plan-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--tv-shadow-md);
  border-color: rgba(11, 79, 158, 0.3);
}

/* The recommended plan. Raised, ringed and badged — one obvious default,
   which is the whole point of the pricing layout. */
.tv-plan-card--featured {
  border-color: var(--tv-primary);
  box-shadow: 0 0 0 4px var(--tv-primary-tint), var(--tv-shadow-md);
  background: linear-gradient(180deg, rgba(11, 79, 158, 0.035) 0%, #fff 220px);
}

.tv-plan-card--featured:hover {
  border-color: var(--tv-primary);
  box-shadow: 0 0 0 4px var(--tv-primary-tint), var(--tv-shadow-lg);
}

@media (min-width: 1100px) {
  .tv-plan-card--featured { transform: translateY(-10px); }
  .tv-plan-card--featured:hover { transform: translateY(-15px); }
}

.tv-plan-badge {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(135deg, var(--tv-primary) 0%, #1668C4 100%);
  padding: 0.35rem 0.9rem;
  border-radius: var(--tv-r-pill);
  box-shadow: 0 6px 16px -4px rgba(11, 79, 158, 0.55);
  white-space: nowrap;
}

.tv-plan-badge--value {
  background: linear-gradient(135deg, var(--tv-accent-dark) 0%, var(--tv-accent) 100%);
  box-shadow: 0 6px 16px -4px rgba(0, 184, 169, 0.5);
}

.tv-plan-name {
  font-weight: 750;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.15rem;
}

.tv-plan-desc {
  color: var(--tv-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.15rem;
  min-height: 2.6em;
}

.tv-plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.tv-plan-price {
  font-size: clamp(2.1rem, 1.8rem + 1vw, 2.6rem);
  font-weight: 800;
  color: var(--tv-ink);
  line-height: 1;
  letter-spacing: -0.035em;
}

.tv-plan-period {
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--tv-muted);
}

.tv-plan-billed {
  font-size: 0.78rem;
  color: var(--tv-muted);
  margin-bottom: 1.35rem;
}

.tv-plan-divider {
  border: 0;
  border-top: 1px solid var(--tv-line);
  margin: 0 0 1.25rem;
}

.tv-plan-includes {
  font-size: 0.74rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tv-ink);
  margin-bottom: 0.75rem;
}

.tv-plan-products {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  flex: 1;
}

.tv-plan-products li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 0.33rem 0;
  color: var(--tv-ink-soft);
}

.tv-plan-products svg {
  color: var(--tv-accent-dark);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.tv-plan-card .tv-btn { margin-top: auto; }

.tv-plan-notice {
  background: #fff;
  border: 1px solid var(--tv-line);
  border-left: 4px solid var(--tv-accent);
  border-radius: var(--tv-r-md);
  padding: 1.1rem 1.4rem;
  font-size: 0.93rem;
  color: var(--tv-ink-soft);
  max-width: 46rem;
  margin-inline: auto;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  text-align: left;
}

.tv-plan-notice svg { color: var(--tv-accent-dark); flex-shrink: 0; margin-top: 0.2rem; }

/* ---------------------------------------------------------- testimonials -- */

.tv-testimonial-card {
  background: #fff;
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-lg);
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--tv-ease), box-shadow 260ms var(--tv-ease);
}

.tv-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tv-shadow-md);
}

.tv-testimonial-stars {
  color: #F5A623;
  margin-bottom: 0.9rem;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
}

.tv-testimonial-quote {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--tv-ink-soft);
  flex: 1;
  margin-bottom: 0;
}

.tv-testimonial-person {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--tv-line-soft);
}

.tv-avatar-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tv-primary-tint) 0%, var(--tv-accent-tint) 100%);
  color: var(--tv-primary);
  font-weight: 750;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--tv-line);
}

.tv-testimonial-name { font-weight: 700; font-size: 0.92rem; }
.tv-testimonial-role { font-size: 0.8rem; color: var(--tv-muted); line-height: 1.4; }

/* ------------------------------------------------------------------- faq -- */

.tv-accordion .accordion-item {
  border: 1px solid var(--tv-line);
  border-radius: var(--tv-r-md) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: #fff;
  transition: border-color 200ms var(--tv-ease), box-shadow 200ms var(--tv-ease);
}

.tv-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(11, 79, 158, 0.35);
  box-shadow: var(--tv-shadow-sm);
}

.tv-accordion .accordion-button {
  font-weight: 650;
  font-size: 1rem;
  color: var(--tv-ink);
  padding: 1.15rem 1.35rem;
  background: #fff;
  letter-spacing: -0.01em;
}

.tv-accordion .accordion-button:not(.collapsed) {
  color: var(--tv-primary);
  background: rgba(11, 79, 158, 0.035);
  box-shadow: none;
}

.tv-accordion .accordion-button:focus {
  box-shadow: none;
  outline: 3px solid var(--tv-accent);
  outline-offset: -3px;
}

.tv-accordion .accordion-button::after {
  width: 1.1rem;
  height: 1.1rem;
  background-size: 1.1rem;
}

.tv-accordion .accordion-body {
  padding: 0 1.35rem 1.35rem;
  color: var(--tv-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ------------------------------------------------------------- final CTA -- */

.tv-cta-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(100% 120% at 85% 0%, #1668C4 0%, transparent 55%),
    radial-gradient(90% 100% at 0% 100%, rgba(0, 184, 169, 0.4) 0%, transparent 55%),
    linear-gradient(150deg, #06284F 0%, #0B4F9E 100%);
  color: #fff;
  border-radius: var(--tv-r-2xl);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  box-shadow: var(--tv-shadow-lg);
}

.tv-cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

.tv-cta-panel > * { position: relative; z-index: 1; }
.tv-cta-panel h2 { color: #fff; }
.tv-cta-panel p.lead { color: rgba(255, 255, 255, 0.84); }

.tv-cta-reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}

.tv-cta-reassurance li { display: flex; align-items: center; gap: 0.4rem; }
.tv-cta-reassurance svg { color: var(--tv-accent); flex-shrink: 0; }

/* ------------------------------------------------------- product page hero -- */

/* Shared by every public quote page (form, results, comparison, plan
   details) so they read as one product ecosystem. --tv-pc carries the
   per-product accent, set inline from the product slug. */
.tv-page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #06284F 0%, #0B4F9E 100%);
  color: #fff;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.tv-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 140% at 88% 0%, color-mix(in srgb, var(--tv-pc, #1668C4) 60%, transparent) 0%, transparent 58%),
    radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: auto, 26px 26px;
  pointer-events: none;
}

.tv-page-hero > * { position: relative; z-index: 1; }

.tv-page-hero h1 {
  color: #fff;
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem);
  margin-bottom: 0.5rem;
  line-height: 1.12;
}

.tv-page-hero p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  margin-bottom: 0;
  max-width: 56ch;
}

.tv-page-hero-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* Breadcrumb */
.tv-crumbs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tv-crumbs a { color: rgba(255, 255, 255, 0.82); font-weight: 550; }
.tv-crumbs a:hover { color: #fff; }
.tv-crumbs li { display: flex; align-items: center; gap: 0.45rem; }
.tv-crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* Trust chips under the product hero heading */
.tv-page-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.35rem;
  list-style: none;
  padding: 0;
}

.tv-page-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--tv-r-pill);
  padding: 0.32rem 0.8rem;
}

.tv-page-hero-chips svg { color: var(--tv-accent); flex-shrink: 0; }

/* The quote UI sits on a tinted page so the white form panels have contrast. */
.tv-page-body { background: var(--tv-surface); }

/* ---------------------------------------------------------------- footer -- */

.tv-footer {
  background: var(--tv-ink);
  color: rgba(255, 255, 255, 0.7);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.tv-footer h3 {
  color: #fff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 1.1rem;
}

.tv-footer a {
  color: rgba(255, 255, 255, 0.68);
  display: inline-block;
  padding: 0.28rem 0;
  font-size: 0.92rem;
}

.tv-footer a:hover { color: #fff; }
.tv-footer .tv-logo { color: #fff; }
.tv-footer .tv-logo:hover { color: #fff; }

.tv-footer-desc {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.92rem;
  max-width: 34ch;
  line-height: 1.62;
}

.tv-social-icons {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.tv-social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 180ms var(--tv-ease), transform 180ms var(--tv-ease),
    border-color 180ms var(--tv-ease);
}

.tv-social-icons a:hover {
  background: var(--tv-primary);
  border-color: var(--tv-primary);
  transform: translateY(-2px);
}

.tv-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  padding-top: 1.6rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}

/* ---------------------------------------------------------- floating contact -- */

/* Fixed Call Now / WhatsApp bar — every root-website page (homepage, product
   quote pages, legal pages; see landing/partials/floating-contact.blade.php
   and its @unless($embedded) inclusion in layouts/public.blade.php). Not
   shown inside the §12 embed widget — that iframe is the agency's own quote
   UI, not a place to advertise TrueVisit's own phone number. */
.tv-contact-bar {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1020;
  display: flex;
  align-items: stretch;
  background: var(--tv-primary);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--tv-r-lg);
  box-shadow: var(--tv-shadow-lg);
  overflow: hidden;
}

.tv-contact-bar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: background-color 160ms var(--tv-ease);
}

.tv-contact-bar-link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.tv-contact-bar-link + .tv-contact-bar-link {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.tv-contact-bar-link svg {
  flex-shrink: 0;
}

.tv-contact-bar-label {
  display: none;
}

@media (min-width: 480px) {
  .tv-contact-bar-label {
    display: inline;
  }
}

/* Below this, the desktop corner pill becomes a full-width dock so it stays
   reachable with a thumb instead of pinned in a corner that is awkward to
   reach one-handed. */
@media (max-width: 575.98px) {
  .tv-contact-bar {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    border-radius: var(--tv-r-lg);
  }

  .tv-contact-bar-link {
    flex: 1 1 0;
    justify-content: center;
  }

  .tv-contact-bar-label {
    display: inline;
  }
}

/* ---------------------------------------------------------------- motion -- */

/* Scroll reveal. Staggered via --tv-delay set inline on grid children so a
   row of cards resolves left-to-right rather than all at once. */
.tv-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms var(--tv-ease), transform 620ms var(--tv-ease);
  transition-delay: var(--tv-delay, 0ms);
}

.tv-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Horizontal entry, for the two-column story rows where the halves slide in
   from their own side. */
.tv-reveal--left { transform: translateX(-24px); }
.tv-reveal--right { transform: translateX(24px); }
.tv-reveal--left.is-visible,
.tv-reveal--right.is-visible { transform: translateX(0); }

/* Below lg those rows are a single column, so there is no "own side" to come
   from — and, more importantly, an element still waiting to be revealed sits
   24px past the right edge and makes the whole page scroll sideways. Fall
   back to the vertical entry, which stays within the viewport. */
@media (max-width: 991.98px) {
  .tv-reveal--left,
  .tv-reveal--right { transform: translateY(20px); }

  .tv-reveal--left.is-visible,
  .tv-reveal--right.is-visible { transform: translateY(0); }
}

.tv-reveal--scale { transform: scale(0.96); }
.tv-reveal--scale.is-visible { transform: scale(1); }

/* Everything animated must survive the reduced-motion switch as a static,
   fully visible layout — never a hidden one. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tv-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .tv-browser-frame,
  .tv-plan-card--featured { transform: none !important; }
}