/* =========================================================================
   Tax Free Wealth Plan — homepage v5
   Brand blues on a white field. Plus Jakarta Sans. Deep-navy text (never #000).
   One product visual: the live Retirement Gap Analysis card in the hero.
   Prefix .v5-  ·  Self-contained (does not load tfwp-brand.css or Webflow CSS).
   ========================================================================= */

/* ---------- 0. Tokens ---------------------------------------------------- */
:root {
  --v5-b-50: #eef6ff;
  --v5-b-100: #dcedff;
  --v5-b-200: #b9dafe;
  --v5-b-300: #7fc0fb;
  --v5-b-500: #008bf9;
  --v5-b-600: #0077db;
  --v5-b-700: #0062b8;
  --v5-sky: #28a1e0;
  --v5-ink: #0b1f33;
  --v5-ink-2: #3b4c5e;
  --v5-mute: #66778a;
  --v5-line: #e4ecf4;
  --v5-line-2: #cfdceb;
  --v5-bg: #ffffff;
  --v5-bg-2: #f5f9fd;
  --v5-flex: #b9dafe;
  --v5-safe: #28a1e0;
  --v5-growth: #0062b8;
  --v5-ok: #0f8a5f;
  --v5-err: #b4372a;
  --v5-font: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --v5-wrap: 1200px;
  --v5-gutter: clamp(20px, 4vw, 48px);
  --v5-nav: 72px;
  --v5-r: 18px;
  --v5-r-s: 12px;
  --v5-t: 200ms;
  --v5-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --v5-shadow: 0 1px 2px rgba(11, 31, 51, 0.04), 0 14px 36px -22px rgba(11, 31, 51, 0.22);
  --v5-shadow-lg: 0 2px 4px rgba(11, 31, 51, 0.04), 0 30px 60px -30px rgba(0, 98, 184, 0.35);
}
@media (max-width: 767px) { :root { --v5-nav: 64px; } }

/* ---------- 1. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--v5-nav) + 16px); }
body.v5 {
  margin: 0; background: var(--v5-bg); color: var(--v5-ink);
  font: 400 17px/1.6 var(--v5-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.v5 img:where(:not(#tfwp-fs img)) { max-width: 100%; height: auto; display: block; }
.v5 a { color: inherit; }
/* :where() keeps this reset at zero specificity so component rules (.v5-hero-meta,
   .v5-cta-note, .v5-msg …) can set their own margins without needing !important. */
.v5 :where(p, h1, h2, h3, h4, dl, ul, ol, figure) { margin: 0; }
.v5 :where(ul, ol) { padding: 0; list-style: none; }
.v5-num { font-variant-numeric: tabular-nums lining-nums; }
.v5 svg { display: block; }

.v5 .v5-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--v5-ink); color: #fff; padding: 10px 18px; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 0; }
.v5 .v5-skip:focus { left: 0; }
.v5-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.v5 a:focus-visible, .v5 button:focus-visible, .v5 input:focus-visible, .v5 summary:focus-visible, .v5 [tabindex]:focus-visible { outline: 3px solid var(--v5-b-500); outline-offset: 3px; border-radius: 6px; }
#main:focus { outline: none; }

.v5-wrap { max-width: var(--v5-wrap); margin: 0 auto; padding: 0 var(--v5-gutter); }
.v5-section { padding: clamp(64px, 8vw, 112px) 0; }
.v5-section-tint { background: var(--v5-bg-2); }
.v5-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v5-b-600); margin-bottom: 16px; }
.v5-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--v5-b-500); }
.v5-h1 { font-size: clamp(36px, 4.3vw, 56px); line-height: 1.04; font-weight: 700; letter-spacing: -0.028em; color: var(--v5-ink); max-width: 13ch; }
.v5-h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -0.024em; color: var(--v5-ink); max-width: 20ch; }
.v5-h3 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -0.012em; color: var(--v5-ink); }
.v5-lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--v5-ink-2); max-width: 54ch; }
.v5-sub { font-size: 17px; line-height: 1.6; color: var(--v5-ink-2); max-width: 58ch; }
.v5-head { display: grid; gap: 16px 64px; align-items: end; margin-bottom: clamp(32px, 4.5vw, 56px); }
@media (min-width: 900px) { .v5-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .v5-head .v5-sub { justify-self: end; } }
.v5-head-center { text-align: center; display: block; }
.v5-head-center .v5-h2, .v5-head-center .v5-sub { margin-left: auto; margin-right: auto; }
.v5-head-center .v5-sub { margin-top: 14px; }

/* ---------- 2. Buttons ---------------------------------------------------- */
.v5-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--v5-font); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--v5-t) var(--v5-ease), border-color var(--v5-t) var(--v5-ease), color var(--v5-t) var(--v5-ease), transform var(--v5-t) var(--v5-ease), box-shadow var(--v5-t) var(--v5-ease);
}
.v5 .v5-btn-primary { background: var(--v5-b-500); color: #fff; border-color: var(--v5-b-500); box-shadow: 0 10px 24px -14px rgba(0, 139, 249, 0.8); }
.v5 .v5-btn-primary:hover { background: var(--v5-b-600); border-color: var(--v5-b-600); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -14px rgba(0, 139, 249, 0.9); }
.v5 .v5-btn-secondary { background: #fff; color: var(--v5-ink); border-color: var(--v5-line-2); }
.v5 .v5-btn-secondary:hover { border-color: var(--v5-ink); transform: translateY(-1px); }
.v5 .v5-btn-white { background: #fff; color: var(--v5-b-700); border-color: #fff; }
.v5 .v5-btn-white:hover { background: var(--v5-b-50); transform: translateY(-1px); }
.v5-btn svg { width: 18px; height: 18px; }
.v5-btn:active { transform: translateY(0); }
.v5-btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.v5-link { color: var(--v5-b-600); font-weight: 600; text-decoration: none; }
.v5-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.v5-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--v5-ink); }
.v5-phone svg { width: 18px; height: 18px; color: var(--v5-b-500); }
.v5-phone:hover { color: var(--v5-b-600); }
.v5-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ---------- 3. Nav -------------------------------------------------------- */
.v5-nav { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--v5-line); }
.v5-nav-in { max-width: var(--v5-wrap); margin: 0 auto; padding: 0 var(--v5-gutter); height: var(--v5-nav); display: flex; align-items: center; gap: 28px; }
.v5-brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; flex-shrink: 0; }
.v5-brand img { height: 34px; width: auto; }
.v5-nav-links { display: flex; align-items: center; gap: 4px; }
.v5-nav-links a { white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--v5-ink-2); text-decoration: none; padding: 10px 12px; border-radius: 999px; transition: color var(--v5-t), background-color var(--v5-t); }
.v5-nav-links a:hover { color: var(--v5-ink); background: var(--v5-b-50); }
.v5-nav-actions { display: flex; align-items: center; gap: 18px; }
.v5-nav-phone { font-size: 15px; white-space: nowrap; }
.v5-nav-cta { white-space: nowrap; }
/* Longer Spanish labels: drop the phone number a step earlier. */
@media (max-width: 1339px) { html[lang="es"] .v5-nav-phone { display: none; } }
.v5-nav-toggle { display: none; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; }
.v5-nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--v5-ink); transition: transform var(--v5-t) var(--v5-ease), opacity var(--v5-t); }
.v5-nav-panel { display: none; }
/* Dropdowns: Solutions, Calculators, About (desktop); details rows (mobile). */
.lib-nav { gap: 2px; }
.lib-dd { position: relative; }
.lib-dd-t { display: inline-flex !important; align-items: center; gap: 4px; }
.lib-dd-t .chev { width: 15px; height: 15px; opacity: .6; transition: transform var(--v5-t); }
.lib-dd:hover .chev, .lib-dd:focus-within .chev { transform: rotate(180deg); }
.lib-dd-p { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); opacity: 0; visibility: hidden; transition: opacity 160ms var(--v5-ease), transform 160ms var(--v5-ease), visibility 160ms; background: #fff; border: 1px solid var(--v5-line); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(11, 31, 51, .35), 0 2px 6px rgba(11, 31, 51, .05); padding: 14px; z-index: 80; }
.lib-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.lib-dd:hover .lib-dd-p, .lib-dd:focus-within .lib-dd-p { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.lib-dd-p a { display: grid !important; gap: 2px; padding: 10px 12px !important; border-radius: 12px !important; text-decoration: none; }
.lib-dd-p a b { font-size: 14.5px; font-weight: 700; color: var(--v5-ink); }
.lib-dd-p a span { font-size: 13px; font-weight: 500; color: var(--v5-mute); }
.lib-dd-p a:hover { background: var(--v5-b-50) !important; }
.lib-mega { display: grid; grid-template-columns: 260px 280px; gap: 8px; width: max-content; }
.lib-mega-col p { margin: 6px 12px 6px; font-size: 12px; font-weight: 700; color: var(--v5-b-600); letter-spacing: .02em; }
.lib-drop { width: 280px; }
.lib-drop a.all { border-top: 1px solid var(--v5-line); margin-top: 6px; border-radius: 0 0 12px 12px !important; }
.lib-drop a.all b { color: var(--v5-b-600); }
.lib-panel details { border-radius: 12px; }
.lib-panel summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; font-size: 17px; font-weight: 600; color: var(--v5-ink); }
.lib-panel summary::-webkit-details-marker { display: none; }
.lib-panel summary::after { content: "+"; font-size: 22px; color: var(--v5-b-600); }
.lib-panel details[open] summary::after { content: "\2212"; }
.lib-panel details a { min-height: 40px !important; font-size: 15.5px !important; padding-left: 26px !important; color: var(--v5-ink-2) !important; }

.lib-drop-sm { width: 220px; }
.lib-panel .lib-panel-h { margin: 8px 26px 2px; font-size: 12.5px; font-weight: 700; color: var(--v5-b-600); }
.v5-nav-links a[aria-current="page"] { color: var(--v5-b-700); }
@media (max-width: 1199px) { .v5-nav-phone { display: none; } }
@media (max-width: 979px) {
  .v5-nav-links, .v5-nav-cta { display: none; }
  .v5-nav-toggle { display: inline-flex; }
  .v5-nav-panel { display: none; position: absolute; left: 12px; right: 12px; top: calc(var(--v5-nav) + 8px); background: #fff; border: 1px solid var(--v5-line); border-radius: 16px; padding: 10px; box-shadow: var(--v5-shadow-lg); max-height: calc(100dvh - var(--v5-nav) - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .v5-nav.is-open .v5-nav-panel { display: block; }
  .v5-nav-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; font-size: 17px; font-weight: 600; color: var(--v5-ink); text-decoration: none; border-radius: 12px; }
  .v5-nav-panel a:hover { background: var(--v5-b-50); }
  .v5-nav-panel .v5-nav-panel-extra { display: flex; flex-direction: column; gap: 10px; padding: 12px 4px 4px; border-top: 1px solid var(--v5-line); margin-top: 6px; }
  .v5-nav-panel .v5-nav-panel-extra .v5-btn { display: inline-flex; justify-content: center; }
  .v5-nav.is-open .v5-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .v5-nav.is-open .v5-nav-toggle span:nth-child(2) { opacity: 0; }
  .v5-nav.is-open .v5-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- 4. Hero ------------------------------------------------------- */
.v5-hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(820px 520px at 6% -10%, var(--v5-b-100) 0%, rgba(220, 237, 255, 0) 62%),
    radial-gradient(640px 460px at 100% 0%, var(--v5-b-50) 0%, rgba(238, 246, 255, 0) 60%),
    #fff;
}
.v5-hero-grid { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .v5-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(32px, 4vw, 64px); align-items: start; } .v5-hero-copy { padding-top: 20px; } }
@media (min-width: 1280px) { .v5-hero-grid { grid-template-columns: minmax(0, 5.4fr) minmax(0, 7.6fr); } }
.v5-hero .v5-cta-row .v5-btn { min-height: 48px; padding: 0 20px; font-size: 15.5px; }
@media (max-width: 479px) { .v5-hero .v5-cta-row .v5-btn, .v5-cta .v5-cta-row .v5-btn, .v5-why .v5-cta-row .v5-btn { width: 100%; } .v5-panel-foot .v5-btn { width: 100%; } }
.v5-hero { padding-bottom: clamp(56px, 7vw, 88px); }
.v5-hero .v5-fine { margin-top: clamp(28px, 3.5vw, 44px); }
.v5-hero .v5-lead { margin-top: 22px; }
.v5-hero .v5-cta-row { margin-top: 30px; }
.v5-hero-meta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px 26px; font-size: 14px; color: var(--v5-mute); font-weight: 500; }
.v5-hero-meta li { display: inline-flex; align-items: center; gap: 7px; }
.v5-hero-meta svg { width: 16px; height: 16px; color: var(--v5-b-500); }

/* ---------- 5. Product card: Retirement Gap Analysis --------------------- */
.v5-panel { background: #fff; border: 1px solid var(--v5-line); border-radius: 22px; box-shadow: var(--v5-shadow-lg); overflow: hidden; }
.v5-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--v5-line); background: linear-gradient(180deg, #fbfdff, #fff); }
.v5-panel-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--v5-ink); }
.v5-panel-title svg { width: 18px; height: 18px; color: var(--v5-b-500); }
.v5-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--v5-b-700); background: var(--v5-b-50); border: 1px solid var(--v5-b-100); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.v5-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v5-b-500); box-shadow: 0 0 0 3px rgba(0, 139, 249, 0.18); }
.v5-panel { container-type: inline-size; }
.v5-panel-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.v5-inputs { padding: 20px 22px 18px; border-bottom: 1px solid var(--v5-line); }
.v5-outputs { padding: 20px 22px 20px; background: #fff; }
@container (min-width: 560px) {
  .v5-panel-body { grid-template-columns: minmax(0, 10fr) minmax(0, 14fr); }
  .v5-inputs { border-bottom: 0; border-right: 1px solid var(--v5-line); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 680px) { .v5-panel-body { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); } .v5-inputs { border-bottom: 0; border-right: 1px solid var(--v5-line); } }
}
.v5-panel-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v5-mute); margin-bottom: 14px; }
.v5-panel-sub .v5-example { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--v5-mute); }
.v5-panel-sub .v5-example[hidden] { display: none; }
.v5-field { margin-bottom: 12px; }
.v5-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.v5-field label { display: block; font-size: 13px; font-weight: 600; color: var(--v5-ink-2); margin-bottom: 6px; line-height: 1.35; }
.v5-field label small { display: block; font-weight: 500; color: var(--v5-mute); font-size: 12px; }
.v5-input { display: flex; align-items: center; min-width: 0; border: 1px solid var(--v5-line-2); border-radius: 12px; background: #fff; transition: border-color var(--v5-t), box-shadow var(--v5-t); }
.v5-input:focus-within { border-color: var(--v5-b-500); box-shadow: 0 0 0 4px rgba(0, 139, 249, 0.14); }
.v5-input.is-invalid { border-color: var(--v5-err); }
.v5-input .v5-unit { color: var(--v5-mute); font-size: 14px; font-weight: 600; padding: 0 0 0 12px; white-space: nowrap; }
.v5-input .v5-unit-r { padding: 0 12px 0 0; }
.v5-input input { flex: 1 1 auto; width: 100%; min-width: 0; height: 44px; border: 0; background: transparent; outline: none; font: 600 16px/1 var(--v5-font); font-variant-numeric: tabular-nums; color: var(--v5-ink); padding: 0 12px; text-align: right; appearance: textfield; -moz-appearance: textfield; }
.v5-input input::-webkit-outer-spin-button, .v5-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v5-input input::placeholder { color: #9fb0c1; }
.v5-field-err { display: none; font-size: 12px; color: var(--v5-err); margin-top: 6px; }
.v5-field.has-error .v5-field-err { display: block; }
.v5-split { margin-top: 4px; border-top: 1px solid var(--v5-line); padding-top: 4px; }
.v5-split summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--v5-b-700); }
.v5-split summary::-webkit-details-marker { display: none; }
.v5-split summary .v5-opt { font-weight: 500; color: var(--v5-mute); }
.v5-split summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--v5-b-500); border-bottom: 2px solid var(--v5-b-500); transform: rotate(45deg); margin: -3px 6px 0 auto; transition: transform var(--v5-t); }
.v5-split[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.v5-split-hint { font-size: 12px; color: var(--v5-mute); margin: 2px 0 12px; line-height: 1.5; }
.v5-split .v5-field { margin-bottom: 10px; }
.v5-split .v5-field label { display: flex; align-items: center; gap: 8px; }
.v5-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.v5-swatch-flex { background: var(--v5-flex); } .v5-swatch-safe { background: var(--v5-safe); } .v5-swatch-growth { background: var(--v5-growth); }

.v5-ledger { margin: 0; }
.v5-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--v5-line); }
.v5-row:last-child { border-bottom: 0; }
.v5-row dt { font-size: 14px; color: var(--v5-ink-2); font-weight: 500; line-height: 1.35; }
.v5-row dt small { display: block; font-size: 12px; color: var(--v5-mute); font-weight: 500; margin-top: 2px; }
.v5-row dd { margin: 0; font-size: 17px; font-weight: 700; white-space: nowrap; color: var(--v5-ink); font-variant-numeric: tabular-nums; transition: opacity var(--v5-t); }
.v5-outputs { container-type: inline-size; }
.v5-key { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
@container (min-width: 330px) { .v5-key { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.v5-key > div { min-width: 0; background: var(--v5-b-50); border: 1px solid var(--v5-b-100); border-radius: 14px; padding: 14px 16px; }
.v5-key .v5-key-gap { background: linear-gradient(160deg, var(--v5-b-500), var(--v5-b-700)); border-color: transparent; color: #fff; }
.v5-key dt { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v5-ink-2); margin-bottom: 8px; }
.v5-key .v5-key-gap dt { color: rgba(255, 255, 255, 0.85); }
.v5-key dd { margin: 0; }
.v5-key .v { font-size: clamp(24px, 2vw, 30px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--v5-ink); white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity var(--v5-t); }
.v5-key .v5-key-gap .v { color: #fff; }
.v5-key .v > span { transition: opacity var(--v5-t); }
.v5-key .v .v5-per { font-size: 14px; font-weight: 600; color: var(--v5-mute); margin-left: 3px; letter-spacing: 0; }
.v5-key .v .v5-per[hidden] { display: none; }
.v5-key .s { font-size: 12px; color: var(--v5-mute); margin-top: 8px; line-height: 1.45; }
.v5-key .v5-key-gap .s { color: rgba(255, 255, 255, 0.82); }
.v5-msg { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--v5-ink-2); padding: 10px 12px; background: var(--v5-bg-2); border-radius: 10px; border: 1px solid var(--v5-line); }
.v5-msg[hidden] { display: none; }
.is-tick { opacity: 0.35; }

.v5-mix { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v5-line); }
.v5-mix-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.v5-mix-head h4 { font-size: 13px; font-weight: 700; }
.v5-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v5-mute); }
.v5-bar-block { margin-bottom: 12px; }
.v5-bar-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; color: var(--v5-ink-2); margin-bottom: 6px; }
.v5-bar-label span { font-weight: 500; color: var(--v5-mute); }
.v5-bar { display: flex; height: 10px; gap: 2px; border-radius: 6px; overflow: hidden; background: var(--v5-b-50); }
.v5-seg { display: block; height: 100%; flex: 0 0 auto; transition: width var(--v5-t) var(--v5-ease); }
.v5-seg-flex { background: var(--v5-flex); } .v5-seg-safe { background: var(--v5-safe); } .v5-seg-growth { background: var(--v5-growth); }
.v5-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 7px; font-size: 12px; color: var(--v5-mute); font-weight: 500; }
.v5-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.v5-legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.v5-legend span:nth-child(1)::before { background: var(--v5-flex); } .v5-legend span:nth-child(2)::before { background: var(--v5-safe); } .v5-legend span:nth-child(3)::before { background: var(--v5-growth); }
.v5-legend b { color: var(--v5-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.v5-mix-note { font-size: 12px; color: var(--v5-mute); line-height: 1.5; }

.v5-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 22px; border-top: 1px solid var(--v5-line); background: var(--v5-bg-2); }
.v5-panel-foot .v5-note { font-size: 13px; color: var(--v5-mute); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.v5-panel-foot .v5-note svg { width: 16px; height: 16px; color: var(--v5-b-500); }
.v5-fine { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--v5-mute); }
.v5-fine details { margin-top: 6px; }
.v5-fine summary { cursor: pointer; font-weight: 600; color: var(--v5-b-700); list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.v5-fine summary::-webkit-details-marker { display: none; }
.v5-fine summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.v5-fine details[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.v5-fine details p { margin-top: 6px; }

/* ---------- 6. Trust strip ---------------------------------------------- */
.v5-trust { border-top: 1px solid var(--v5-line); border-bottom: 1px solid var(--v5-line); background: #fff; }
.v5-trust-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .v5-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .v5-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v5-trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 22px 20px 22px 0; border-bottom: 1px solid var(--v5-line); }
@media (min-width: 600px) { .v5-trust-item:nth-child(odd) { padding-right: 28px; } .v5-trust-item:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--v5-line); } }
@media (min-width: 1000px) { .v5-trust-item { border-bottom: 0; padding: 26px 28px 26px 0; } .v5-trust-item + .v5-trust-item { border-left: 1px solid var(--v5-line); padding-left: 28px; } .v5-trust-item:nth-child(odd) { padding-right: 28px; } }
.v5-trust-item svg { width: 22px; height: 22px; color: var(--v5-b-500); flex: none; margin-top: 2px; }
.v5-trust-item b { display: block; font-size: 15px; font-weight: 700; color: var(--v5-ink); }
.v5-trust-item span { display: block; font-size: 13.5px; color: var(--v5-mute); line-height: 1.45; margin-top: 2px; }
.v5-trust-item a { color: inherit; }

/* ---------- 7. Cards (three accounts) ------------------------------------ */
.v5-cards { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .v5-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.v5-card { background: #fff; border: 1px solid var(--v5-line); border-radius: var(--v5-r); padding: 26px 26px 24px; box-shadow: var(--v5-shadow); display: flex; flex-direction: column; gap: 12px; transition: transform var(--v5-t) var(--v5-ease), box-shadow var(--v5-t) var(--v5-ease); }
.v5-card:hover { transform: translateY(-2px); box-shadow: var(--v5-shadow-lg); }
.v5-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v5-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--v5-b-50); color: var(--v5-b-600); flex: none; }
.v5-icon svg { width: 22px; height: 22px; }
.v5-card .v5-def { font-size: 16px; font-weight: 600; color: var(--v5-ink); }
.v5-card p { font-size: 15.5px; line-height: 1.6; color: var(--v5-ink-2); }
.v5-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.v5-tags span { font-size: 12px; font-weight: 600; color: var(--v5-b-700); background: var(--v5-b-50); border: 1px solid var(--v5-b-100); border-radius: 999px; padding: 4px 10px; }
.v5-card-flex .v5-icon { background: var(--v5-b-50); }
.v5-card-safe .v5-icon { background: rgba(40, 161, 224, 0.12); color: #1b86bf; }
.v5-card-growth .v5-icon { background: rgba(0, 98, 184, 0.1); color: var(--v5-b-700); }
.v5-mixline { margin-top: 28px; background: #fff; border: 1px solid var(--v5-line); border-radius: var(--v5-r); padding: 20px 24px; display: grid; gap: 14px 32px; align-items: center; }
@media (min-width: 900px) { .v5-mixline { grid-template-columns: auto minmax(0, 1fr) auto; } }
.v5-mixline .l { font-size: 14px; font-weight: 700; color: var(--v5-ink); white-space: nowrap; }
.v5-mixline .l small { display: block; font-weight: 500; color: var(--v5-mute); font-size: 12px; }
.v5-mixline .v5-bar { height: 12px; }
.v5-mixline .v5-legend { margin-top: 8px; }
.v5-mixline .r { font-size: 12px; color: var(--v5-mute); max-width: 26ch; }

/* ---------- 8. How it works ----------------------------------------------- */
.v5-steps { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); counter-reset: step; position: relative; }
@media (min-width: 900px) { .v5-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.v5-step { background: #fff; border: 1px solid var(--v5-line); border-radius: var(--v5-r); padding: 24px; box-shadow: var(--v5-shadow); display: flex; flex-direction: column; gap: 14px; }
.v5-step-n { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v5-b-600); }
.v5-step-n i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--v5-b-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: 0; }
.v5-step p { font-size: 15.5px; line-height: 1.6; color: var(--v5-ink-2); }
.v5-mini { margin-top: auto; border: 1px solid var(--v5-line); border-radius: 14px; background: var(--v5-bg-2); padding: 14px; font-size: 13px; color: var(--v5-ink-2); }
.v5-mini-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v5-mute); margin-bottom: 9px; }
.v5-mini-rows { display: grid; gap: 6px; }
.v5-mini-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--v5-line); border-radius: 10px; padding: 8px 12px; font-weight: 500; }
.v5-mini-row b { font-weight: 700; color: var(--v5-ink); font-variant-numeric: tabular-nums; }
.v5-mini-big { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.v5-mini-big b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--v5-b-700); font-variant-numeric: tabular-nums; line-height: 1; }
.v5-mini-big span { font-size: 12px; color: var(--v5-mute); font-weight: 600; }
.v5-mini-bar { margin-top: 10px; }
.v5-checks { display: grid; gap: 7px; }
.v5-checks li { display: flex; align-items: center; gap: 9px; font-weight: 600; color: var(--v5-ink); font-size: 13.5px; }
.v5-checks svg { width: 16px; height: 16px; color: var(--v5-ok); flex: none; }

/* ---------- 9. Why us ----------------------------------------------------- */
.v5-why { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .v5-why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
.v5-why .v5-cta-row { margin-top: 26px; }
.v5-why-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .v5-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v5-why-item { background: #fff; border: 1px solid var(--v5-line); border-radius: var(--v5-r); padding: 22px; box-shadow: var(--v5-shadow); display: flex; flex-direction: column; gap: 10px; }
.v5-why-item h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.v5-why-item p { font-size: 14.5px; line-height: 1.6; color: var(--v5-ink-2); }
.v5-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--v5-line); }
@media (min-width: 600px) { .v5-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v5-stat b { display: block; font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -0.03em; color: var(--v5-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.v5-stat span { display: block; font-size: 13px; color: var(--v5-mute); font-weight: 500; margin-top: 8px; line-height: 1.4; }

/* ---------- 10. Testimonials --------------------------------------------- */
.v5-quotes { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .v5-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
.v5-quote { background: #fff; border: 1px solid var(--v5-line); border-radius: var(--v5-r); padding: 26px; box-shadow: var(--v5-shadow); display: flex; flex-direction: column; gap: 16px; }
.v5-quote .q { width: 28px; height: 28px; color: var(--v5-b-300); }
.v5-quote p { font-size: 16px; line-height: 1.6; color: var(--v5-ink); }
.v5-quote footer { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.v5-quote footer b { font-size: 14px; font-weight: 700; color: var(--v5-ink-2); }
.v5-quote footer i { width: 34px; height: 34px; border-radius: 50%; background: var(--v5-b-50); color: var(--v5-b-700); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 13px; flex: none; }
.v5-quotes-note { margin-top: 18px; font-size: 12.5px; color: var(--v5-mute); text-align: center; }

/* ---------- 11. FAQ ------------------------------------------------------- */
.v5-faq-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .v5-faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } }
.v5-faq details { background: #fff; border: 1px solid var(--v5-line); border-radius: 14px; margin-bottom: 10px; transition: border-color var(--v5-t), box-shadow var(--v5-t); }
.v5-faq details[open] { border-color: var(--v5-b-200); box-shadow: var(--v5-shadow); }
.v5-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; min-height: 52px; font-size: 16.5px; font-weight: 700; color: var(--v5-ink); }
.v5-faq summary::-webkit-details-marker { display: none; }
.v5-faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--v5-b-50); background-image: linear-gradient(var(--v5-b-600), var(--v5-b-600)), linear-gradient(var(--v5-b-600), var(--v5-b-600)); background-size: 10px 2px, 2px 10px; background-position: center; background-repeat: no-repeat; transition: transform var(--v5-t); }
.v5-faq details[open] summary::after { transform: rotate(45deg); }
.v5-faq details > div { padding: 0 18px 18px; font-size: 15.5px; line-height: 1.65; color: var(--v5-ink-2); max-width: 66ch; }

/* ---------- 12. CTA band ------------------------------------------------- */
.v5-cta { background: linear-gradient(120deg, var(--v5-b-600) 0%, var(--v5-b-500) 55%, var(--v5-sky) 100%); color: #fff; position: relative; overflow: hidden; }
.v5-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 85% 120%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.v5-cta-grid { position: relative; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .v5-cta-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; } .v5-cta-grid .v5-cta-row { justify-content: flex-end; } }
.v5-cta .v5-h2 { color: #fff; max-width: 22ch; }
.v5-cta .v5-eyebrow { color: rgba(255, 255, 255, 0.85); } .v5-cta .v5-eyebrow::before { background: rgba(255, 255, 255, 0.7); }
.v5-cta-note { margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.86); font-weight: 500; }
.v5-cta .v5-phone { color: #fff; } .v5-cta .v5-phone svg { color: #fff; }

/* ---------- 13. Footer --------------------------------------------------- */
.v5-footer { padding: clamp(48px, 6vw, 72px) 0 40px; font-size: 14.5px; color: var(--v5-ink-2); background: #fff; }
.v5-footer-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .v5-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .v5-footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; } }
.v5-footer-brand img { height: 30px; width: auto; margin-bottom: 16px; }
.v5-footer-brand p { max-width: 40ch; line-height: 1.55; }
.v5-footer-contact { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.v5-footer-contact a { text-decoration: none; color: var(--v5-ink); font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; }
.v5-footer-contact a:hover { color: var(--v5-b-600); }
.v5-footer-contact address { font-style: normal; color: var(--v5-mute); font-size: 13px; margin-top: 6px; line-height: 1.5; }
.v5-footer h3 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--v5-ink); margin-bottom: 14px; }
.v5-footer li { margin-bottom: 6px; }
.v5-footer li a { text-decoration: none; color: var(--v5-ink-2); display: inline-block; padding: 4px 0; }
.v5-footer li a:hover { color: var(--v5-b-600); }
.v5-footer-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--v5-line); font-size: 12.5px; line-height: 1.6; color: var(--v5-mute); }
.v5-footer-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; color: var(--v5-ink-2); font-weight: 500; }
.v5-footer-legal p { max-width: 125ch; }
.v5-footer-legal a { color: var(--v5-ink-2); }

/* ---------- 14. Motion --------------------------------------------------- */
/* Visible by default: hiding in CSS made above-the-fold text wait ~2s for the
   deferred JS before it could ever paint (Lighthouse "element render delay").
   JS adds .v5-hold only to elements still BELOW the viewport, so first paint
   is never blocked and the scroll-in animation is unchanged for the rest. */
.v5-reveal { transition: opacity 480ms var(--v5-ease), transform 480ms var(--v5-ease); }
.v5-reveal.v5-hold:not(.is-in) { opacity: 0; transform: translateY(14px); }
.v5-reveal.is-in { opacity: 1; transform: none; }
.v5-reveal-2 { transition-delay: 80ms; } .v5-reveal-3 { transition-delay: 160ms; } .v5-reveal-4 { transition-delay: 240ms; }
html.no-reveal .v5-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .v5-reveal { opacity: 1; transform: none; }
  .is-tick { opacity: 1; }
}

/* ---------- 15. Product-fit survey overlay (scoped fixes, this page only) ----
   The survey bundle is shared with the IUL pages; these host-page rules
   (a) keep its logo at its intended 26px, and (b) un-hide its close button,
   which the bundle ships as display:none!important. Esc already closes it. */
.v5 #tfwp-fs .tfwp-fs-logo { height: 26px; width: auto; max-width: none; }
.v5 #tfwp-fs .tfwp-fs-header { padding-right: 76px; }
.v5 #tfwp-fs .tfwp-fs-close {
  display: flex !important;
  position: fixed; top: 12px; right: 14px; z-index: 20;
  width: 44px; height: 44px; border-radius: 50%;
  align-items: center; justify-content: center; padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.14); background: rgba(255, 255, 255, 0.95);
  color: #334155; font-size: 26px; line-height: 1; font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
@media (max-width: 640px) {
  .v5 #tfwp-fs .tfwp-fs-logo { height: 22px; }
  .v5 #tfwp-fs .tfwp-fs-close { top: 8px; right: 10px; width: 40px; height: 40px; }
  .v5 #tfwp-fs .tfwp-fs-header { padding-right: 60px; }
}

/* ---------- 16. Article pages (/post/*) --------------------------------- */
.v5-article-hero { padding: clamp(36px, 4.5vw, 64px) 0 clamp(24px, 3vw, 36px);
  background: radial-gradient(820px 520px at 6% -10%, var(--v5-b-100) 0%, rgba(220,237,255,0) 62%),
              radial-gradient(640px 460px at 100% 0%, var(--v5-b-50) 0%, rgba(238,246,255,0) 60%), #fff; }
.v5-article-hero .v5-wrap { max-width: 940px; }
.v5-back { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--v5-b-600); text-decoration: none; margin-bottom: 20px; }
.v5-back svg { width: 16px; height: 16px; transition: transform 200ms var(--v5-ease); }
.v5-back:hover svg { transform: translateX(-3px); }
.v5-article-title { font-size: clamp(34px, 5vw, 60px); line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; color: var(--v5-ink); max-width: 18ch; }
.v5-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; font-size: 14px; font-weight: 500; color: var(--v5-mute); }
.v5-article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--v5-line-2); }
.v5 .v5-article-figure { margin: 0 auto; max-width: 1100px; padding: 0 var(--v5-gutter); }
.v5-article-figure img { width: 100%; height: auto; aspect-ratio: 16/8; object-fit: cover; border-radius: 22px; box-shadow: var(--v5-shadow-lg); }
.v5-article-body { padding: clamp(40px, 5vw, 68px) 0 clamp(48px, 6vw, 80px); }
.v5-article-body .v5-wrap { max-width: 760px; }

/* Prose: one rhythm for everything the editor can emit */
.v5-prose { font-size: 18.5px; line-height: 1.72; color: var(--v5-ink-2); }
.v5-prose > *:first-child { margin-top: 0; }
.v5-prose p { margin: 0 0 1.15em; }
.v5-prose strong, .v5-prose b { color: var(--v5-ink); font-weight: 700; }
.v5-prose em { font-style: italic; }
.v5-prose h2 { font-size: clamp(26px, 2.6vw, 33px); line-height: 1.18; font-weight: 700; letter-spacing: -0.022em; color: var(--v5-ink); margin: 2em 0 .6em; }
.v5-prose h3 { font-size: clamp(21px, 2vw, 25px); line-height: 1.25; font-weight: 700; letter-spacing: -0.016em; color: var(--v5-ink); margin: 1.7em 0 .5em; }
.v5-prose h4 { font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--v5-ink); margin: 1.5em 0 .45em; }
.v5-prose h2 + p, .v5-prose h3 + p, .v5-prose h4 + p { margin-top: 0; }
.v5-prose ul, .v5-prose ol { margin: 0 0 1.3em; padding-left: 0; list-style: none; }
.v5-prose ol { counter-reset: v5li; }
.v5-prose li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.v5-prose ul > li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--v5-b-300); }
.v5-prose ol > li { counter-increment: v5li; }
.v5-prose ol > li::before { content: counter(v5li); position: absolute; left: 0; top: .12em; width: 22px; height: 22px; border-radius: 50%; background: var(--v5-b-50); color: var(--v5-b-700); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.v5-prose a { color: var(--v5-b-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v5-prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--v5-b-300); font-size: 20px; color: var(--v5-ink); }
.v5-prose img { border-radius: 14px; margin: 1.6em 0; }
.v5-prose hr { border: 0; border-top: 1px solid var(--v5-line); margin: 2.2em 0; }
.v5-prose figure { margin: 1.6em 0; }
.v5-table-wrap { overflow-x: auto; margin: 1.6em 0; border: 1px solid var(--v5-line); border-radius: 14px; }
.v5-prose table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15.5px; background: #fff; }
.v5-prose th, .v5-prose td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--v5-line); vertical-align: top; }
.v5-prose thead th { background: var(--v5-bg-2); color: var(--v5-ink); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.v5-prose tbody tr:last-child td { border-bottom: 0; }
.v5-article-foot { margin-top: clamp(36px, 4vw, 52px); padding-top: 26px; border-top: 1px solid var(--v5-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.v5-article-foot .note { font-size: 13px; color: var(--v5-mute); max-width: 54ch; }
.v5-more { border-top: 1px solid var(--v5-line); }

/* ---------- 17. Article refinements (2026-08-24) ------------------------ */
/* Hero image demoted: smaller, editorial, no longer the loudest thing on the page */
.v5 .v5-article-figure { max-width: 880px; }
.v5 .v5-article-figure img { aspect-ratio: 16 / 9; border-radius: 18px; }
/* Yes/No pills inside comparison tables (emoji removed from markup) */
.v5-prose .check, .v5-prose .cross { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--v5-ink); white-space: nowrap; }
.v5-prose .check::before, .v5-prose .cross::before { content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; background-position: center; background-repeat: no-repeat; }
.v5-prose .check::before { background-color: #e7f6ee; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a5f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E"); background-size: 10px; }
.v5-prose .cross::before { background-color: #fdeee9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4372a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-size: 9px; }
/* Faux-list paragraphs (were emoji bullets) */
.v5-prose p.v5-li { position: relative; padding-left: 32px; margin-bottom: .7em; }
.v5-prose p.v5-li::before { content: ""; position: absolute; left: 8px; top: .58em; width: 8px; height: 8px; border-radius: 50%; background: var(--v5-b-300); }
.v5-prose p.v5-li-ck::before { left: 2px; top: .18em; width: 19px; height: 19px; background: #e7f6ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f8a5f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* Key-note callout (was a pushpin emoji line) */
.v5-prose p.v5-callout { background: var(--v5-b-50); border: 1px solid var(--v5-b-100); border-left: 3px solid var(--v5-b-500); border-radius: 12px; padding: 16px 18px; margin: 1.4em 0; color: var(--v5-ink); font-size: 16.5px; }

/* ---------- 18. Cookie notice ------------------------------------------- */
/* Notice-only banner: it informs and records acknowledgement, it does NOT gate
   any script. Nothing is blocked before dismissal. The stored value is a
   versioned object rather than a boolean so this can become real consent
   gating later without re-prompting everyone or losing the audit trail. */
.v5-cookie {
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px;
  max-width: 720px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: #fff; border: 1px solid var(--v5-line-2); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 18px 48px -18px rgba(11, 31, 51, 0.28);
  font-size: 14px; line-height: 1.5; color: var(--v5-ink-2);
  transform: translateY(12px); opacity: 0;
  transition: opacity 260ms var(--v5-ease), transform 260ms var(--v5-ease);
}
.v5-cookie.is-in { opacity: 1; transform: none; }
.v5-cookie p { flex: 1 1 320px; min-width: 0; margin: 0; }
.v5-cookie a { color: var(--v5-b-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.v5-cookie .v5-cookie-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.v5-cookie button {
  font: 600 14px/1 var(--v5-font); min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--v5-b-500); background: var(--v5-b-500); color: #fff; cursor: pointer;
  transition: background-color var(--v5-t) var(--v5-ease);
}
.v5-cookie button:hover { background: var(--v5-b-600); border-color: var(--v5-b-600); }
@media (max-width: 560px) {
  .v5-cookie { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; }
  .v5-cookie .v5-cookie-actions { width: 100%; }
  .v5-cookie button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .v5-cookie { transition: none; opacity: 1; transform: none; }
}

/* ---------- 7b. Carrier marquee ------------------------------------------ */
.v5-carriers { background: #fff; border-bottom: 1px solid var(--v5-line); padding: clamp(30px, 4vw, 46px) 0; }
.v5-carriers-head { text-align: center; margin-bottom: clamp(20px, 2.6vw, 30px); }
.v5-carriers-head .v5-eyebrow { margin-bottom: 10px; }
.v5-carriers-head p { margin: 0 auto; font-size: 15px; line-height: 1.55; color: var(--v5-mute); max-width: 58ch; }
.v5-marquee { position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.v5-marquee-track { display: flex; align-items: center; width: max-content; animation: v5-marquee-scroll 46s linear infinite; }
.v5-marquee:hover .v5-marquee-track,
.v5-marquee:focus-within .v5-marquee-track { animation-play-state: paused; }
.v5-marquee img { width: 150px; height: 50px; flex: none; margin: 0 clamp(16px, 2.4vw, 36px);
  opacity: 0.55; filter: grayscale(1); transition: opacity var(--v5-t) var(--v5-ease), filter var(--v5-t) var(--v5-ease); }
.v5-marquee img:hover { opacity: 1; filter: none; }
/* The track holds the twelve logos twice, so -50% lands exactly on the seam. */
@keyframes v5-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .v5-marquee { -webkit-mask-image: none; mask-image: none; }
  .v5-marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .v5-marquee-track img[aria-hidden="true"] { display: none; }
  .v5-marquee img { margin: 4px 12px; }
}

/* Free tools strip on the homepage (2026-09-23) */
.v5-tool { text-decoration: none; color: inherit; }
.v5-tool:hover .v5-h3 { color: var(--v5-b-700); }
.v5-tool-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--v5-b-600); }
.v5-tool-go svg, .v5-tools-all svg { width: 16px; height: 16px; }
.v5-tools-all { margin: 26px 0 0; text-align: center; }
.v5-tools-all a { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--v5-b-600); text-decoration: none; }
.v5-tools-all a:hover { text-decoration: underline; text-underline-offset: 3px; }
#tools + .v5-section-tint { border-top: 1px solid var(--v5-line); }