/* TBC - TextByChoice 2027 — generated from tokens.json */
:root, [data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #ebf1f9;
  --color-surface-raised: #ffffff;
  --color-text: #333333;
  --color-text-muted: #61615c;
  --color-accent: #04346c;
  --color-accent-strong: #06264d;
  --color-accent-2: #1dc9fc;
  --color-on-accent-2: #06182f;
  --color-primary: #04346c;
  --color-on-primary: #ffffff;
  --color-primary-hover: #06264d;
  --color-primary-active: #001739;
  --color-navy: #04346c;
  --color-navy-strong: #06264d;
  --color-ink-deep: #04346c;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #c9d9ee;
  --color-overlay: #04346c94;
  --color-divider: #04346c1a;
  --color-border-control: var(--color-neutral-500);
  --color-focus: #04346c;
  --color-neutral-100: #f7f7f4;
  --color-neutral-200: #ebebe8;
  --color-neutral-300: #d8d8d5;
  --color-neutral-400: #bebebb;
  --color-neutral-500: #868684;
  --color-neutral-600: #6c6c69;
  --color-neutral-700: #535350;
  --color-neutral-800: #3d3d3b;
  --color-neutral-900: #272724;
  --color-accent-100: #e8f6fc;
  --color-accent-200: #ceecf9;
  --color-accent-300: #a9def4;
  --color-accent-400: #84d0ef;
  --color-accent-500: #1dc9fc;
  --color-accent-600: #229fe4;
  --color-accent-700: #2886a6;
  --color-accent-800: #0a6e8b;
  --color-accent-900: #02556d;
  --color-accent-2-100: #e8f6fc;
  --color-accent-2-200: #ceecf9;
  --color-accent-2-300: #a9def4;
  --color-accent-2-400: #84d0ef;
  --color-accent-2-500: #1dc9fc;
  --color-accent-2-600: #229fe4;
  --color-accent-2-700: #2886a6;
  --color-accent-2-800: #0a6e8b;
  --color-accent-2-900: #02556d;
  --color-navy-100: #ebf1f9;
  --color-navy-200: #d3dff0;
  --color-navy-300: #a7c0e1;
  --color-navy-400: #6c94ca;
  --color-navy-500: #3c6aa6;
  --color-navy-600: #23508a;
  --color-navy-700: #04346c;
  --color-navy-800: #06264d;
  --color-navy-900: #001739;
  --color-ink-glow: #14417b;
  --color-ink-deep-1: #0a3a75;
  --color-ink-deep-2: #14417b;
  --color-ink-deep-3: #1b4983;
  --color-ink-deep-4: #23508a;
  --color-danger-surface: #fbe9e6;
  --color-danger-border: #e9b8ae;
  --color-danger-text: #9a3412;
  --color-note-surface: #e8f6fc;
  --color-on-dark-hover: #ffffff0d;
  --color-on-dark-outline: #ffffff80;
  --color-on-dark-line: #ffffff14;
  --color-on-dark-line-strong: #ffffff24;
  --shadow-sm: 0 1px 2px #1414141f;
  --shadow-md: 0 6px 16px #14141424;
  --shadow-lg: 0 18px 40px #14141433;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --radius-device: 36px;
  --radius-screen: 28px;
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;
  --container-max: 1280px;
  --measure: 68ch;
  --gutter-mobile: 20px;
  --gutter-desktop: 64px;
  --nav-height-mobile: 56px;
  --nav-height-desktop: 64px;
  --deck-bar-height: 52px;
  --profile-dialog-width: 760px;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
/* components/bundle.css */
/* TBC - TextByChoice 2027: base layer and component classes. Every value comes from tokens.css. */


:root {
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);
  --font-heading-weight: 800;
  --dur: 180ms;
  --gutter: var(--gutter-mobile);
}
@media (min-width: 992px) { :root { --gutter: var(--gutter-desktop); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans); font-weight: 600; color: var(--color-text);
  margin: 0 0 var(--space-3); letter-spacing: -0.01em;
}
h1, h2 { font-family: var(--font-sans); font-weight: var(--font-heading-weight); letter-spacing: -0.035em; font-variant-numeric: lining-nums; text-wrap: balance; }
h1 { font-size: clamp(32px, 1.6vw + 26px, 52px); line-height: 1.08; }
h2 { font-size: clamp(24px, 1.2vw + 20px, 36px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 var(--space-4); }
.prose p, p.body { color: var(--color-text-muted); max-width: var(--measure); }
a { color: var(--color-navy-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-text); }
img { display: block; max-width: 100%; height: auto; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-accent-200); color: var(--color-neutral-900); }

/* layout helpers */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-16); }
@media (min-width: 992px) { .section { padding-block: var(--space-24); } }
.section-heading { text-align: left; max-width: var(--measure); margin-bottom: var(--space-12); }
/* editorial section header: hairline, kicker, serif heading */
.section-heading, .sec-head { padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.rule-top { padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.col-narrow { max-width: var(--measure); }
.section-sm { padding-block: var(--space-12); }
.section-major { padding-block: var(--space-24); }
.statement { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--color-accent); margin: 0 0 var(--space-4); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-divider); }
.meta {
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; font-feature-settings: "tnum" 1;
  color: var(--color-text-muted);
}
.kicker, .eyebrow { display: block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy-strong); margin: 0 0 var(--space-3); }
.eyebrow { color: var(--color-accent-strong); }

/* the cyan marker block: cyan behind ink type */
.marker { background: var(--color-accent-2); color: var(--color-on-accent-2); padding: 0.05em 0.3em 0.1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* surfaces */
.panel-mist { background: var(--color-surface); }
.panel-brand { background: var(--color-accent-2); color: var(--color-on-accent-2); }
.panel-brand h1, .panel-brand h2, .panel-brand h3, .panel-brand h4 { color: var(--color-on-accent-2); }
.panel-dark {
  --color-bg: #06182f; --color-surface: #0a2240; --color-surface-raised: #0c2747;
  --color-text: #f4f9ff; --color-text-muted: #aebdd0; --color-accent: #1dc9fc;
  --color-accent-strong: #a9def4; --color-navy: #1dc9fc; --color-navy-strong: #a9def4;
  --color-focus: #1dc9fc; --color-divider: #f4f9ff1a;
  --color-primary: #1dc9fc; --color-on-primary: #06182f; --color-primary-hover: #84d0ef; --color-primary-active: #a9def4;
  background: var(--color-ink-deep); color: var(--color-text);
}

/* imagery: photography under a navy scrim; full-bleed is square, inset media takes radius-lg */
.media { position: relative; overflow: hidden; background: var(--color-ink-deep); color: var(--color-on-dark); }
.media > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.05); }
.media::after { content: ""; position: absolute; inset: 0; background: var(--color-overlay); pointer-events: none; }
.media > .media-body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--space-8) var(--gutter); }
.media-inset { border-radius: var(--radius-lg); }
.media-strip { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 700; font-size: 20px; color: var(--color-on-dark); }

/* geometric lattice: facade grid for empty image slots and section fields, never behind body copy */
.tile {
  --tile-line: var(--color-navy-800);
  background-color: var(--color-ink-deep);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, var(--tile-line) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 15px, var(--tile-line) 15px 16px);
}
.tile-light { --tile-line: var(--color-accent-200); background-color: var(--color-surface); }

/* buttons: softly rounded (radius-md), cyan fill primary, fine outlined secondary */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-6); white-space: nowrap;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em;
  color: var(--color-text); background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-md); cursor: pointer; text-decoration: none;
  transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}
.btn svg { display: block; flex: none; }
/* Buttons inside cards wrap instead of spilling out when a 3-column grid gets narrow (~850-1100px). */
.card .btn { white-space: normal; max-width: 100%; text-align: center; }
/* scroll reveal: content is visible by default; hidden only when JS adds js-reveal to <html> and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
  html.js-reveal .reveal.is-in { opacity: 1; transform: none; }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); color: var(--color-on-primary); }
/* btn-cta: the page's main conversion action ("Start For Free") in brand cyan with near-black ink (9.2:1) */
.btn-cta { background: var(--color-accent-2); color: var(--color-on-accent-2); border-color: var(--color-accent-2); }
.btn-cta:hover { background: var(--color-accent-2-600); border-color: var(--color-accent-2-600); color: var(--color-on-accent-2); }
.btn-cta:active { background: var(--color-accent-2-400); border-color: var(--color-accent-2-400); color: var(--color-on-accent-2); }
.btn-secondary { border-color: var(--color-navy); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-navy-100); }
.btn-secondary:active { background: var(--color-navy-200); }
.panel-dark .btn-secondary:hover, [data-theme="dark"] .btn-secondary:hover { background: #f4f9ff14; }
.btn-ghost { color: var(--color-navy-strong); padding-inline: var(--space-2); }
.btn-ghost:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.btn-on-dark { color: var(--color-on-dark); border-color: var(--color-on-dark); }
.btn-on-dark:hover { background: var(--color-on-dark); color: var(--color-ink-deep); }
.btn-icon { width: 44px; padding: 0; }
.btn-icon.round { border-radius: var(--radius-full); }
.btn-block { width: 100%; }

/* tags */
.tag { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 600; line-height: 18px; padding: 3px 10px; border-radius: var(--radius-sm); }
.tag-accent { background: var(--color-navy-100); color: var(--color-navy-800); }
.tag-accent-2 { background: var(--color-accent-2); color: var(--color-on-accent-2); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-navy); color: var(--color-text); }

/* forms */
.field { display: grid; gap: 6px; align-content: start; }
.field > label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.field .hint { font-size: 12px; line-height: 18px; color: var(--color-text-muted); }
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit; font-size: 15px; line-height: 22px;
  color: var(--color-text); background: var(--color-surface-raised); caret-color: var(--color-navy);
  border: 1px solid var(--color-border-control); border-radius: var(--radius-md);
  transition: border-color var(--dur) ease;
}
.input::placeholder { color: var(--color-neutral-600); }
.input:hover { border-color: var(--color-navy); }
.input:focus-visible { border-color: var(--color-focus); outline-offset: 0; }
textarea.input { min-height: 112px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 15px; }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 18px; height: 18px; flex: none; border-radius: var(--radius-full); border: 1.5px solid var(--color-neutral-500); }
.radio:hover .dot { border-color: var(--color-navy); }
.radio input:checked + .dot { border-color: var(--color-navy); background: var(--color-navy); box-shadow: inset 0 0 0 4px var(--color-surface-raised); }
.radio input:focus-visible + .dot { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-navy); border-radius: var(--radius-md); overflow: hidden; }
.seg-opt { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-navy); }
.seg-opt:has(input:checked) { background: var(--color-accent-2); color: var(--color-on-accent-2); }
.seg-opt:not(:has(input:checked)):hover { background: var(--color-navy-100); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: -4px; }

/* cards */
.card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--color-surface-raised); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); }
.card-mist { background: var(--color-surface); border-color: transparent; }
.card-kicker { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-navy-strong); }
.card-title { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.card-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); flex: 1; }
.card-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-text-muted); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.card-milestone { border-radius: var(--radius-lg); background: #1dc9fc26; border: 0; color: var(--color-on-dark); padding: var(--space-12) var(--space-8); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }
/* Cards rest on a soft shadow; CTAs lift 2px on hover and their arrow nudges right. */
.card, .tbc-ind, .tbc-pr-fees > div, .prompt { box-shadow: 0 1px 2px rgba(4, 52, 108, .04), 0 6px 16px -8px rgba(4, 52, 108, .10); }
.btn { transition: background-color var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, box-shadow .25s ease, translate .25s ease; }
.btn svg { transition: translate .25s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.btn-cta, .btn-primary, .btn-secondary):hover { translate: 0 -2px; box-shadow: 0 10px 20px -12px rgba(4, 52, 108, .5); }
  :is(.btn-cta, .btn-primary, .btn-secondary):active { translate: 0 0; box-shadow: 0 2px 6px -4px rgba(4, 52, 108, .4); }
  .btn:hover svg { translate: 3px 0; }
}

/* navigation */
.nav { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; padding: var(--space-2) var(--gutter); border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.nav-brand { margin-right: auto; font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; text-decoration: none; }
.nav-links { display: none; gap: var(--space-8); }
.nav-links a { color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; padding-block: 6px; border-bottom: 1px solid transparent; transition: border-color var(--dur) ease, color var(--dur) ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--color-navy); }
.nav-links a[aria-current="page"] { color: var(--color-navy-strong); font-weight: 600; }
.nav-over-media .nav-links a[aria-current="page"] { color: inherit; }
.nav-toggle { display: inline-flex; }
@media (min-width: 992px) { .nav-links { display: flex; } .nav-toggle { display: none; } }
.nav-over-media { position: absolute; inset: 0 0 auto 0; z-index: 2; background: linear-gradient(#04346cb3, #04346c00); border-bottom: 0; color: var(--color-on-dark); }
.breadcrumb { display: flex; gap: var(--space-2); font-size: 13px; color: inherit; opacity: .9; }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface-raised); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 22px; min-width: 520px; font-feature-settings: "tnum" 1; }
.table th { text-align: left; vertical-align: bottom; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text); background: var(--color-surface); padding: 12px 16px; border-bottom: 1px solid var(--color-divider); }
.table td { vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--color-divider); color: var(--color-text-muted); }
.table td:first-child { color: var(--color-text); font-weight: 500; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-feature-settings: "tnum" 1; }
.table tbody tr:hover { background: var(--color-navy-100); }
[data-theme="dark"] .table tbody tr:hover, .panel-dark .table tbody tr:hover { background: #1dc9fc14; }

/* dialog */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: var(--color-overlay); }
.dialog { width: min(480px, 100%); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--color-surface-raised); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.dialog-title { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 0; }
.dialog-body { font-size: 15px; line-height: 26px; color: var(--color-text-muted); margin: 0; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }

/* hero: photo, scrim, centered lead */
.hero { position: relative; min-height: 560px; display: grid; align-items: end; overflow: hidden; background: var(--color-ink-deep); color: var(--color-on-dark); }
.hero-media { position: absolute; inset: 0; }
.hero-media > img { width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #04346c80 0%, #04346c40 40%, #04346ccc 100%); }
.hero-body { position: relative; z-index: 1; width: 100%; max-width: var(--container-max); margin-inline: auto; padding: var(--space-24) var(--gutter) var(--space-12); text-align: left; }
.hero-lead { font-size: clamp(18px, 1.2vw + 12px, 26px); line-height: 1.45; font-weight: 500; color: var(--color-on-dark); margin: 0; max-width: 30ch; }

/* value panel: the cyan block with three columns */
.value-panel { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding: var(--space-8) var(--space-6); background: var(--color-accent-2); color: var(--color-on-accent-2); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .value-panel { grid-template-columns: repeat(3, 1fr); padding: var(--space-12); } }
.value-title { font-size: 22px; line-height: 1.3; font-weight: 600; margin: 0 0 var(--space-3); color: var(--color-on-accent-2); }
.value-body { font-size: 16px; line-height: 1.6; margin: 0; color: var(--color-on-accent-2); }

/* stats: allocation figures */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: left; padding-block: var(--space-6); border-top: 1px solid var(--color-divider); }
.stat-figure { font-family: var(--font-sans); font-size: clamp(44px, 2.4vw + 28px, 56px); line-height: 1; font-weight: 800; letter-spacing: -0.035em; color: var(--color-accent); font-variant-numeric: lining-nums tabular-nums; margin: 0 0 var(--space-3); }
.stat-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }

/* footer */
.footer { background: var(--color-ink-deep); color: var(--color-on-dark-muted); font-size: 13.5px; line-height: 20px; }
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding: var(--space-16) var(--gutter); max-width: var(--container-max); margin-inline: auto; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr repeat(3, 1fr); } }
.footer h4 { color: var(--color-on-dark); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-4); }
.footer a { color: var(--color-on-dark-muted); text-decoration: none; display: block; padding-block: 4px; }
.footer a:hover { color: var(--color-navy-300); }
.footer-base { background: #032a58; text-align: center; padding: var(--space-6) var(--gutter); border-top: 1px solid var(--color-on-dark-line-strong); }

/* bubbles: the signature pattern, a sparse field of outlined message bubbles and dots in a 128px tile.
   Strokes meet 3:1 on their ground: navy 500 #3c6aa6 on the panel (4.9:1), navy 400 #6c94ca on navy (3.9:1).
   Text never sits on the field: .bubbles-fade keeps the left 55% solid, so copy reads on plain ground. */
.bubbles {
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='%23ffffff' stroke='%233c6aa6' stroke-width='1'%3E%3Crect x='12' y='14' width='44' height='24' rx='12'/%3E%3Cpath d='M21 37.5l-4 8 10-7.5'/%3E%3Crect x='72' y='80' width='40' height='22' rx='11'/%3E%3Cpath d='M103 101.5l4 8-10-7.5'/%3E%3C/g%3E%3Ccircle cx='96' cy='30' r='2' fill='%233c6aa6'/%3E%3Ccircle cx='32' cy='92' r='2' fill='%233c6aa6'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  background-position: right top;
}
.bubbles-dark {
  background-color: var(--color-ink-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%236c94ca' stroke-width='1'%3E%3Crect x='12' y='14' width='44' height='24' rx='12'/%3E%3Cpath d='M21 37.5l-4 8 10-7.5'/%3E%3Crect x='72' y='80' width='40' height='22' rx='11'/%3E%3Cpath d='M103 101.5l4 8-10-7.5'/%3E%3C/g%3E%3Ccircle cx='96' cy='30' r='2' fill='%231dc9fc'/%3E%3Ccircle cx='32' cy='92' r='2' fill='%231dc9fc'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  background-position: right top;
}
.bubbles-fade {
  background-color: var(--color-surface);
  background-image:
    linear-gradient(90deg, #ebf1f9 0%, #ebf1f9 55%, #ebf1f9b3 75%, #ebf1f900 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='%23ffffff' stroke='%233c6aa6' stroke-width='1'%3E%3Crect x='12' y='14' width='44' height='24' rx='12'/%3E%3Cpath d='M21 37.5l-4 8 10-7.5'/%3E%3Crect x='72' y='80' width='40' height='22' rx='11'/%3E%3Cpath d='M103 101.5l4 8-10-7.5'/%3E%3C/g%3E%3Ccircle cx='96' cy='30' r='2' fill='%233c6aa6'/%3E%3Ccircle cx='32' cy='92' r='2' fill='%233c6aa6'/%3E%3C/svg%3E");
  background-size: auto, 128px 128px;
  background-position: 0 0, right top;
}
.bubbles-dark.bubbles-fade {
  background-color: var(--color-ink-deep);
  background-image:
    linear-gradient(90deg, #04346c 0%, #04346c 55%, #04346cb3 75%, #04346c00 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%236c94ca' stroke-width='1'%3E%3Crect x='12' y='14' width='44' height='24' rx='12'/%3E%3Cpath d='M21 37.5l-4 8 10-7.5'/%3E%3Crect x='72' y='80' width='40' height='22' rx='11'/%3E%3Cpath d='M103 101.5l4 8-10-7.5'/%3E%3C/g%3E%3Ccircle cx='96' cy='30' r='2' fill='%231dc9fc'/%3E%3Ccircle cx='32' cy='92' r='2' fill='%231dc9fc'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  /* phones: the text column is the full width, so the fade covers the field almost entirely */
  .bubbles-fade { background-image: linear-gradient(90deg, #ebf1f9 0%, #ebf1f9 80%, #ebf1f9b3 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='%23ffffff' stroke='%233c6aa6' stroke-width='1'%3E%3Crect x='12' y='14' width='44' height='24' rx='12'/%3E%3Cpath d='M21 37.5l-4 8 10-7.5'/%3E%3Crect x='72' y='80' width='40' height='22' rx='11'/%3E%3Cpath d='M103 101.5l4 8-10-7.5'/%3E%3C/g%3E%3Ccircle cx='96' cy='30' r='2' fill='%233c6aa6'/%3E%3Ccircle cx='32' cy='92' r='2' fill='%233c6aa6'/%3E%3C/svg%3E"); }
  .bubbles-dark.bubbles-fade { background-image: linear-gradient(90deg, #04346c 0%, #04346c 80%, #04346cb3 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 128 128'%3E%3Cg fill='none' stroke='%236c94ca' stroke-width='1'%3E%3Crect x='12' y='14' width='44' height='24' rx='12'/%3E%3Cpath d='M21 37.5l-4 8 10-7.5'/%3E%3Crect x='72' y='80' width='40' height='22' rx='11'/%3E%3Cpath d='M103 101.5l4 8-10-7.5'/%3E%3C/g%3E%3Ccircle cx='96' cy='30' r='2' fill='%231dc9fc'/%3E%3Ccircle cx='32' cy='92' r='2' fill='%231dc9fc'/%3E%3C/svg%3E"); }
}

/* hero-band: the compact title hero for inner pages; Jakarta 800 H1, left aligned, fine cyan rule below */
.hero-band {
  --color-text: #ffffff; --color-text-muted: #c9d9ee; --color-accent: #1dc9fc;
  --color-accent-strong: #a9def4; --color-navy-strong: #a9def4; --color-divider: #f4f9ff1a;
  color: var(--color-text); border-bottom: 1px solid var(--color-divider);
}
.hero-band-body { max-width: var(--container-max); margin-inline: auto; padding: var(--space-12) var(--gutter) var(--space-16); }
@media (min-width: 992px) { .hero-band-body { padding-block: var(--space-16) var(--space-24); } }
.hero-band h1 { color: #ffffff; margin: var(--space-4) 0 var(--space-6); font-size: clamp(36px, 8vw + 6px, 56px); line-height: 1.05; max-width: 16ch; }
@media (min-width: 992px) { .hero-band h1 { font-size: clamp(64px, 4vw + 24px, 80px); } }
.hero-band h1 em { font-style: normal; color: var(--color-accent); }
.hero-band .meta { color: var(--color-accent-strong); }
.hero-band .hero-band-lead { font-size: 18px; line-height: 1.6; color: var(--color-text-muted); max-width: var(--measure); margin: 0; }

/* ===== Landing and deck layer (from the "What AI Unlocks" landing page, the source of truth) =====
   Page-level layout, sticky logo nav, speaker profile, slide deck, prompt cards and diagram primitives. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.grid-auto{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-auto-sm{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.split{display:grid;gap:var(--space-8);grid-template-columns:1fr}
@media (min-width:992px){.split{grid-template-columns:5fr 7fr;align-items:start}}
.sec-head{max-width:var(--measure);margin-bottom:var(--space-12)}
.sec-head p{color:var(--color-text-muted)}
.slide-line{font-family:var(--font-display);font-size:clamp(24px,1.4vw + 16px,30px);line-height:1.3;font-weight:600;color:var(--color-accent);margin:var(--space-8) 0 0;max-width:30ch}
.ladder{display:grid;gap:0;counter-reset:rung}
.rung{display:grid;grid-template-columns:56px 1fr;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--color-divider)}
.rung-n{font-size:28px;line-height:1;font-weight:400;color:var(--color-accent)}
.rung h4{margin:0 0 4px}
.rung p{margin:0;color:var(--color-text-muted);font-size:15px;line-height:24px}
.list-clean{margin:0;padding-left:20px;color:var(--color-text-muted)}
.list-clean li{margin-bottom:var(--space-2)}
.list-clean strong{color:var(--color-text)}
.prompt{border:1px solid var(--color-divider);background:var(--color-surface-raised);border-radius:var(--radius-lg);overflow:hidden}
.prompt summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-3) var(--space-4);font-weight:700;font-size:16px}
.prompt summary::-webkit-details-marker{display:none}
.prompt summary:hover{background:var(--color-navy-100)}
.prompt[open] summary{border-bottom:1px solid var(--color-divider)}
.prompt pre{margin:0;padding:var(--space-4);font-family:var(--font-mono);font-size:13px;line-height:21px;white-space:pre-wrap;word-break:break-word;color:var(--color-text);background:var(--color-surface)}
.pnum{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--color-navy-strong);min-width:32px}
.pmeta{margin-left:auto;font-size:13px;font-weight:500;color:var(--color-text-muted)}
.check{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-2) 0;color:var(--color-text-muted);font-size:15px;line-height:24px}
.box{flex:none;width:18px;height:18px;margin-top:3px;border:1px solid var(--color-navy);border-radius:5px}
.chain{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.chain .tag{font-family:var(--font-mono);font-size:12px}
.arrow{color:var(--color-accent);font-weight:700}
.toc a{display:block;padding:6px 0;text-decoration:none;color:var(--color-on-dark-muted);font-size:14px}
.toc a:hover{color:var(--color-navy-300)}

.vz{margin:24px 0 32px;font-family:var(--font-sans);color:var(--color-text);max-width:980px}
.vz .vz-k{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-strong)}
.vz .vz-n{font-family:var(--font-mono);font-size:12px;color:var(--color-accent-strong)}
.vz-arrow{color:var(--color-accent);font-weight:700;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}
.vz-chip{display:inline-flex;align-items:center;padding:6px 12px;margin:4px;border:1px solid var(--color-divider);border-radius:var(--radius-full);background:var(--color-surface-raised);font-size:13px;font-weight:600;line-height:18px;white-space:nowrap}
.vz-chip.is-dark{background:var(--color-ink-deep);color:var(--color-on-dark);border-color:var(--color-ink-deep)}
/* shift */
.vz-shift{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch}
@media(min-width:640px){.vz-shift{grid-template-columns:1fr 48px 1.3fr}}
@media(max-width:639px){.vz-shift .vz-arrow{transform:rotate(90deg)}}
.vz-shift-col{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border-radius:var(--radius-lg);border:1px solid var(--color-divider);background:var(--color-surface-raised)}
.vz-shift-col strong{font-family:var(--font-display);font-size:clamp(22px,2.4vw,32px);line-height:1.15;font-weight:600}
.vz-shift-col span:last-child{color:var(--color-text-muted);font-size:14px}
.vz-shift-col.is-then{opacity:.7}.vz-shift-col.is-then strong{text-decoration:line-through;text-decoration-color:var(--color-accent);text-decoration-thickness:2px}
.vz-shift-col.is-now{background:var(--color-ink-deep);color:var(--color-on-dark);border-color:var(--color-ink-deep)}.vz-shift-col.is-now .vz-k{color:var(--color-accent)}.vz-shift-col.is-now span:last-child{color:var(--color-on-dark-muted)}
/* problem shift */
.vz-ps{display:grid;gap:8px}
.vz-ps-head,.vz-ps-row{display:grid;grid-template-columns:1fr 32px 1fr;gap:8px;align-items:center}
.vz-ps-head span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.vz-ps-old,.vz-ps-new{padding:10px 14px;border-radius:var(--radius-md);font-size:15px;font-weight:600}
.vz-ps-old{background:var(--color-surface);color:var(--color-text-muted);border:1px solid var(--color-divider)}
.vz-ps-new{background:var(--color-navy-100);color:var(--color-navy-800);border:1px solid var(--color-navy-200)}
/* moat */
.vz-moat{position:relative;display:grid;gap:6px;padding-right:0}
.vz-moat-layer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 18px;border-radius:var(--radius-md);background:var(--color-ink-deep);color:var(--color-on-dark)}
.vz-moat-layer span{color:var(--color-on-dark-muted);font-size:14px}
.vz-moat-layer:nth-child(3){background:var(--color-ink-deep-1)}.vz-moat-layer:nth-child(4){background:var(--color-ink-deep-2)}.vz-moat-layer:nth-child(5){background:var(--color-ink-deep-3)}.vz-moat-layer:nth-child(6){background:var(--color-ink-deep-4)}
.vz-moat-layer.is-thin{background:var(--color-surface);color:var(--color-text-muted);border:1px dashed var(--color-neutral-500)}.vz-moat-layer.is-thin span{color:var(--color-text-muted)}
.vz-moat-tag{justify-self:start;margin-top:4px;padding:4px 10px;border-radius:var(--radius-sm);background:var(--color-accent-2);color:var(--color-on-accent-2);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* roles */
.vz-rf{display:grid;gap:8px}
.vz-rf-row{display:grid;grid-template-columns:110px 1fr 28px 1.4fr;gap:8px;align-items:center}
@media(max-width:639px){.vz-rf-row{grid-template-columns:1fr 28px 1.3fr}.vz-rf-role{grid-column:1/-1}}
.vz-rf-role{font-weight:700}
.vz-rf-less{padding:8px 12px;border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-muted);text-decoration:line-through;font-size:14px}
.vz-rf-more{padding:8px 12px;border-radius:var(--radius-md);background:var(--color-navy-100);color:var(--color-navy-800);font-weight:600;font-size:14px}
/* spectrum */
.vz-sp-axis{display:flex;justify-content:space-between;gap:16px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.vz-sp-axis span:last-child{text-align:right}
.vz-sp-line{height:4px;margin:10px 0 0;border-radius:2px;background:linear-gradient(90deg,var(--color-accent-300),var(--color-navy))}
.vz-sp-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:639px){.vz-sp-pts{grid-template-columns:1fr}}
.vz-sp-pt{position:relative;display:flex;flex-direction:column;gap:4px;padding-top:18px}
.vz-sp-pt .vz-dot{position:absolute;top:-10px;left:0;width:16px;height:16px;border-radius:50%;background:var(--color-navy);border:3px solid var(--color-surface-raised)}
.vz-sp-pt:nth-child(1) .vz-dot{background:var(--color-accent)}
.vz-sp-pt strong{font-size:17px}.vz-sp-pt span{font-size:14px;color:var(--color-text-muted)}.vz-sp-pt em{font-style:normal;font-size:13px;font-weight:600;color:var(--color-navy-strong)}
/* tiles */
.vz-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.vz-tile{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.vz-tile strong{font-size:17px}.vz-tile span:last-child{font-size:14px;color:var(--color-text-muted)}
/* funnel */
.vz-fn{display:grid;gap:8px}
.vz-fn-step{display:grid;grid-template-columns:150px 1fr;gap:4px 16px;align-items:baseline;padding:14px 20px;border-radius:var(--radius-md);background:var(--color-surface-raised);border:1px solid var(--color-divider)}
.vz-fn-step span:last-child{grid-column:2;font-size:14px;color:var(--color-text-muted)}
.vz-fn-step.s1{width:100%}.vz-fn-step.s2{width:88%;margin-inline:auto}.vz-fn-step.s3{width:76%;margin-inline:auto;background:var(--color-ink-deep);color:var(--color-on-dark);border-color:var(--color-ink-deep)}
.vz-fn-step.s3 .vz-k{color:var(--color-accent)}.vz-fn-step.s3 span:last-child{color:var(--color-on-dark-muted)}
@media(max-width:639px){.vz-fn-step{grid-template-columns:1fr}.vz-fn-step span:last-child{grid-column:1}.vz-fn-step.s2,.vz-fn-step.s3{width:100%}}
/* context net */
.vz-cn{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.vz-cn{grid-template-columns:1fr 1fr}}
.vz-cn-panel{padding:18px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.vz-cn-panel p{margin:12px 0 0;font-size:14px;color:var(--color-text-muted)}
.vz-cn-scatter{position:relative;display:flex;flex-wrap:wrap;gap:18px 26px;padding:18px 6px;min-height:150px;align-content:center}
.vz-cn-scatter .vz-chip{opacity:.75;transform:rotate(-3deg)}.vz-cn-scatter .sc1,.vz-cn-scatter .sc4{transform:rotate(4deg) translateY(10px)}.vz-cn-scatter .sc2{transform:rotate(-6deg) translateY(-6px)}
.vz-cn-hub{position:relative;height:230px;margin-top:8px}
.vz-cn-hub svg{position:absolute;inset:0;width:100%;height:100%}.vz-cn-hub line{stroke:var(--color-navy-300);stroke-width:.6;vector-effect:non-scaling-stroke}
.vz-cn-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px;border-radius:var(--radius-md);background:var(--color-ink-deep);color:var(--color-on-dark);font-weight:700;font-size:14px;white-space:nowrap}
.vz-ring{position:absolute;transform:translate(-50%,-50%);margin:0;font-size:12px;padding:5px 10px}
.vz-cn-panel.is-on{border-color:var(--color-navy-200)}
/* foundation */
.vz-fd{display:grid;gap:8px}
.vz-fd-top{padding:16px 18px;border:1px dashed var(--color-accent);border-radius:var(--radius-lg)}
.vz-fd-base{padding:16px 18px;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-divider)}
.vz-fd .vz-k{margin-bottom:8px}
/* habits */
.vz-hb{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.vz-hb-card{display:flex;flex-direction:column;border:1px solid var(--color-divider);border-radius:var(--radius-lg);overflow:hidden}
.vz-hb-old{padding:12px 16px;background:var(--color-surface);color:var(--color-text-muted);text-decoration:line-through;font-size:14px}
.vz-hb-new{padding:14px 16px;background:var(--color-surface-raised);font-weight:700;font-size:16px;border-top:2px solid var(--color-navy)}
/* impact chain */
.vz-ic{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:768px){.vz-ic{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}}
@media(max-width:767px){.vz-ic .vz-arrow{transform:rotate(90deg)}}
.vz-ic-col{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.vz-ic-col strong{font-size:17px}.vz-ic-col span:last-child{font-size:14px;color:var(--color-text-muted)}
.vz-ic-col:last-child{background:var(--color-ink-deep);color:var(--color-on-dark);border-color:var(--color-ink-deep)}.vz-ic-col:last-child span:last-child{color:var(--color-on-dark-muted)}.vz-ic-col:last-child .vz-k{color:var(--color-accent)}
/* selling */
.vz-sell{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a b" "c c" "d d";gap:10px;max-width:640px}
@media(min-width:640px){.vz-sell{grid-template-columns:1fr 1.1fr 1fr;grid-template-areas:"a d b" ". c .";align-items:center}}
.vz-sell-node{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised);text-align:center}
.vz-sell-node span{font-size:13px;color:var(--color-text-muted)}
.vz-sell-node.n1{grid-area:a}.vz-sell-node.n2{grid-area:b}.vz-sell-node.n3{grid-area:c}
.vz-sell-core{grid-area:d;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;max-width:180px;width:100%;justify-self:center;border-radius:50%;background:var(--color-accent-2);color:var(--color-on-accent-2);text-align:center}
.vz-sell-core strong{font-family:var(--font-display);font-size:24px}.vz-sell-core .vz-k{color:var(--color-on-accent-2)}
/* framings */
.vz-fr{display:grid;gap:10px;grid-template-columns:1fr 1fr;align-items:center;max-width:720px}
@media(min-width:640px){.vz-fr{grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:auto auto}.vz-fr-core{grid-column:2;grid-row:1/3}}
.vz-fr-core{grid-column:1/-1;padding:24px;border-radius:var(--radius-lg);background:var(--color-ink-deep);color:var(--color-on-dark);text-align:center;font-family:var(--font-display);font-size:22px}
.vz-fr-spoke{padding:12px 14px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface-raised)}
.vz-fr-spoke strong{font-size:15px}
/* stairs */
.vz-st{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:768px){.vz-st{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end}.vz-st-step.s1{min-height:110px}.vz-st-step.s2{min-height:150px}.vz-st-step.s3{min-height:190px}.vz-st-step.s4{min-height:230px}}
.vz-st-step{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px 16px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--color-navy-100);border-bottom:3px solid var(--color-navy)}
.vz-st-step strong{font-size:18px}.vz-st-step span:last-child{font-size:14px;color:var(--color-text-muted)}
.vz-st-step.s4{background:var(--color-ink-deep);color:var(--color-on-dark)}.vz-st-step.s4 span:last-child{color:var(--color-on-dark-muted)}.vz-st-step.s4 .vz-k{color:var(--color-accent)}
/* matrix */
.vz-mx{display:grid;grid-template-columns:24px 1fr;grid-template-rows:1fr auto;gap:8px;max-width:720px}
.vz-mx-y{writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);text-align:center}
.vz-mx-x{grid-column:2;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);text-align:center}
.vz-mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vz-mx-grid>div{display:flex;flex-direction:column;gap:4px;min-height:110px;padding:14px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface-raised)}
.vz-mx-grid strong{font-size:15px}.vz-mx-grid span{font-size:13px;color:var(--color-text-muted)}
.vz-mx-grid .is-best{background:var(--color-navy-100);border-color:var(--color-navy-200)}
.vz-mx-grid .is-danger{background:var(--color-danger-surface);border-color:var(--color-danger-border)}.vz-mx-grid .is-danger strong{color:var(--color-danger-text)}
/* ladder */
.vz-ld{display:flex;flex-direction:column;gap:6px;max-width:760px}
.vz-ld-rung{display:grid;grid-template-columns:28px 160px 1fr;gap:12px;align-items:center;width:var(--w);min-width:min(100%,300px);padding:10px 14px;border-radius:var(--radius-md);background:var(--color-surface-raised);border:1px solid var(--color-divider);border-left:4px solid var(--color-navy)}
.vz-ld-rung:first-child{background:var(--color-ink-deep);color:var(--color-on-dark);border-color:var(--color-ink-deep);border-left-color:var(--color-accent)}.vz-ld-rung:first-child span:last-child{color:var(--color-on-dark-muted)}.vz-ld-rung:first-child .vz-n{color:var(--color-accent)}
.vz-ld-rung span:last-child{font-size:13px;color:var(--color-text-muted)}
@media(max-width:639px){.vz-ld-rung{width:100%;grid-template-columns:24px 1fr}.vz-ld-rung span:last-child{grid-column:2}}
/* id chain */
.vz-idc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px}
@media(min-width:640px){.vz-idc{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vz-id{position:relative;display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface-raised)}
.vz-id code{background:none;padding:0;font-size:13px;overflow-wrap:anywhere}
.vz-id::after{content:"→";position:absolute;right:-21px;top:50%;transform:translateY(-50%);color:var(--color-accent);font-weight:700}
.vz-id:last-child::after{content:none}
@media(max-width:639px){.vz-id:nth-child(2n)::after{content:none}}
@media(min-width:640px){.vz-id:nth-child(3n)::after{content:none}}
/* loop */
.vz-lp{position:relative;max-width:620px}
.vz-lp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vz-lp-node{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface-raised)}
.vz-lp-node em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-navy-strong)}
.vz-lp-core{display:none}.vz-lp-ring{display:none}
@media(min-width:768px){
.vz-lp{aspect-ratio:1/1;max-width:520px;margin-inline:0}
.vz-lp-ring{display:block;position:absolute;inset:10%;border:2px dashed var(--color-navy-300);border-radius:50%}
.vz-lp-core{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;aspect-ratio:1;border-radius:50%;background:var(--color-ink-deep);color:var(--color-on-dark);text-align:center}
.vz-lp-core strong{font-family:var(--font-display);font-size:20px;line-height:1.2}.vz-lp-core .vz-k{color:var(--color-accent)}
.vz-lp-list{position:absolute;inset:0;display:block}
.vz-lp-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:150px;grid-template-columns:1fr;gap:2px;text-align:center;padding:10px}
}
/* slop matrix uses .vz-mx */
/* iceberg */
.vz-ice{display:grid;max-width:760px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-divider)}
.vz-ice-top{padding:18px;background:var(--color-surface-raised)}
.vz-ice-water{height:6px;background:repeating-linear-gradient(90deg,var(--color-navy-300) 0 14px,transparent 14px 22px)}
.vz-ice-bottom{padding:22px 18px 28px;background:linear-gradient(180deg,var(--color-ink-glow),var(--color-ink-deep));color:var(--color-on-dark)}
.vz-ice-bottom .vz-k{color:var(--color-accent)}
.vz-ice .vz-k{margin-bottom:8px}
/* cases */
.vz-cases{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:768px){.vz-cases{grid-template-columns:1fr 1fr}}
.vz-tl{padding:18px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.vz-tl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}.vz-tl-head strong{font-family:var(--font-display);font-size:24px}
.vz-tl ol{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--color-navy-200);display:grid;gap:10px}
.vz-tl li{position:relative;font-size:14px;line-height:21px}.vz-tl li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--color-navy)}
.vz-tl li:last-child{font-weight:700}

.present-toggle{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:1px solid var(--color-ink-deep);border-radius:var(--radius-md);background:var(--color-ink-deep);color:var(--color-on-dark);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.present-toggle:hover{background:var(--color-ink-deep-1)}
.present-toggle:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.nav-mobile .present-toggle{margin-top:8px;justify-content:center}
.deck{display:none}
html.dc-present,html.dc-present body{overflow:hidden !important}
html.dc-present .deck{display:block;position:fixed;inset:0;z-index:300;background:var(--color-surface)}
.deck-bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;gap:12px;height:52px;padding:0 clamp(12px,3vw,32px);background:var(--color-bg);border-bottom:1px solid var(--color-divider)}
.deck-count{font-family:var(--font-mono);font-size:13px;color:var(--color-text-muted);margin-right:auto}
.deck-hint{font-size:12px;color:var(--color-text-muted)}
@media(max-width:767px){.deck-hint{display:none}}
.deck-btn{min-height:36px;padding:6px 12px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface-raised);font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--color-text)}
.deck-btn:hover{border-color:var(--color-navy)}
.deck-nav{position:absolute;right:clamp(12px,3vw,32px);bottom:16px;z-index:3;display:flex;gap:8px}
.deck-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--color-divider);background:var(--color-surface-raised);font-size:18px;cursor:pointer;color:var(--color-text)}
.deck-arrow:hover{border-color:var(--color-navy)}
.deck-progress{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:var(--color-neutral-300)}
.deck-progress-bar{display:block;height:100%;width:0;background:var(--color-accent);transition:width .2s}
.deck-slides{position:absolute;top:52px;left:0;right:0;bottom:4px}
.slide{position:absolute;inset:0;display:none;overflow-y:auto;padding:clamp(20px,4vh,56px) clamp(16px,5vw,88px) 88px}
.slide[data-on]{display:grid}
.slide--light{grid-template-columns:1fr;gap:24px;align-content:start}
@media(min-width:992px){.slide--light{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;align-content:center}.slide--light.slide--wide{grid-template-columns:1fr;gap:28px;align-content:center}}
.slide-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-strong);margin-bottom:12px}
.slide-title{font-family:var(--font-sans);font-weight:var(--font-heading-weight);letter-spacing:-0.035em;font-size:clamp(30px,3.4vw,54px);line-height:1.1;margin:0 0 16px;color:var(--color-text)}
.slide-title em,.slide-h1 em{font-style:normal;color:var(--color-accent)}
.slide-line{font-family:var(--font-sans);margin:20px 0 0;padding-left:16px;border-left:3px solid var(--color-accent);font-size:clamp(18px,1.5vw,24px);line-height:1.4;font-weight:600;color:var(--color-text);max-width:34ch}
.slide--wide .slide-line{max-width:60ch}
.slide-bullets{margin:0;padding-left:20px;font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:var(--color-text-muted)}
.slide-bullets li{margin-bottom:6px}
.slide-more{display:inline-block;margin-top:20px;font-size:14px;font-weight:600;color:var(--color-navy-strong)}
.slide-visual .vz{margin:0;max-width:none}
.slide-visual .vz-lp{max-width:560px;margin-inline:auto}
.slide-visual figure{margin:0}
.slide--dark{align-content:center;color:var(--color-on-dark)}
.slide-hero{max-width:1100px}
.slide-hero .meta{color:var(--color-accent-strong)}
.slide-h1{font-family:var(--font-sans);font-weight:var(--font-heading-weight);letter-spacing:-0.035em;font-size:clamp(36px,5vw,88px);line-height:1.05;margin:16px 0;color:var(--color-on-dark);max-width:20ch}
.slide-lead{font-size:clamp(18px,1.6vw,24px);line-height:1.5;color:var(--color-on-dark-muted);max-width:52ch;margin:0}
.slide--dark .hero-speaker{cursor:default;pointer-events:none}
.slide--dark .slide-more{color:var(--color-accent)}
.slide-notes{display:none}
.slide-notes .vz-k{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-strong);margin-bottom:4px}
html.dc-notes .slide[data-on] .slide-notes{display:block;grid-column:1/-1;align-self:end;margin-top:8px;padding:14px 18px;border-radius:var(--radius-md);background:var(--color-note-surface);border:1px solid var(--color-accent-300);font-size:15px;line-height:1.5;color:var(--color-text);max-width:900px}
.slide--dark .slide-notes{color:var(--color-text)}
.slide .dtree{margin:0}.slide .dt-q,.slide .dt-a{padding:8px 12px;font-size:14px}.slide .dt-no{padding:2px 0 2px 20px}.slide .dt-end{padding:8px 12px;font-size:14px}
.deck-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.deck-cards .card{margin:0}
.deck-agenda{display:grid;gap:8px 32px;grid-template-columns:1fr}
@media(min-width:768px){.deck-agenda{grid-template-columns:1fr 1fr}}
.deck-agenda a{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:10px 0;border-top:1px solid var(--color-divider);text-decoration:none;color:var(--color-text);font-weight:600;font-size:clamp(15px,1.2vw,18px)}
.deck-agenda a span:first-child{font-family:var(--font-mono);font-size:13px;color:var(--color-accent-strong);padding-top:2px}
.deck .slide [data-step]{opacity:0;transform:translateY(10px)}
.deck .slide[data-live] [data-step]{transition:opacity .22s ease,transform .22s ease}
.deck .slide [data-step][data-in]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.deck .slide[data-live] [data-step]{transition:opacity .2s;transform:none}}
.deck-dots{display:inline-flex;gap:4px;margin-left:12px;vertical-align:middle}
.deck-dots i{width:6px;height:6px;border-radius:50%;background:var(--color-neutral-300)}
.deck-dots i.on{background:var(--color-accent)}
.slide--image{padding:clamp(12px,2.5vh,28px) clamp(12px,3vw,40px) 76px;background:var(--color-surface)}
.slide--image[data-on]{display:flex}
.slide-img{margin:0;flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.slide-img img{flex:1;min-height:0;width:100%;height:100%;object-fit:contain;border-radius:var(--radius-lg,12px)}
.slide-img figcaption{font-size:clamp(15px,1.3vw,20px);font-weight:700;color:var(--color-text);max-width:1100px}
.slide-img figcaption .slide-kicker{display:block;margin-bottom:4px}
.hero-speaker{display:flex;align-items:center;gap:16px;margin:40px 0 0 -20px;padding:12px 28px 12px 20px;border:1px solid transparent;border-radius:var(--radius-lg);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background var(--dur),border-color var(--dur)}
.hero-speaker:hover,.hero-speaker:focus-visible{background:var(--color-on-dark-hover);border-color:var(--color-on-dark-outline)}
@media (max-width:767px){.hero-speaker{margin-left:-12px;padding:10px 20px 10px 12px}}
.hero-speaker:focus-visible{outline:2px solid var(--color-navy-300);outline-offset:2px}
.hero-who{display:flex;flex-direction:column}
.hero-more{margin-top:4px;font-size:13px;font-weight:600;color:var(--color-accent)}
.profile-backdrop{z-index:100;overflow-y:auto}
.profile-dialog{position:relative;width:min(760px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:24px;gap:16px}
@media (min-width:768px){.profile-dialog{padding:40px}}
.profile-dialog > *{flex-shrink:0}
.profile-close{position:absolute;top:12px;right:12px}
.profile-head{display:flex;align-items:center;gap:16px;padding-right:40px}
.profile-avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--color-accent);flex:none}
.profile-role{font-size:14px;font-weight:600;color:var(--color-navy-strong);margin-top:4px}
.profile-loc{font-family:var(--font-mono);font-size:12px;color:var(--color-text-muted);margin-top:2px}
.profile-lead{margin:0;font-size:16px;line-height:26px;color:var(--color-text)}
.profile-contact{display:flex;flex-wrap:wrap;gap:8px}
.profile-contact .btn{text-decoration:none}
.profile-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:768px){.profile-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.profile-grid p{margin:4px 0 0;font-size:14px;line-height:22px;color:var(--color-text-muted)}
.profile-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-strong)}
.profile-table{margin:0}
.profile-tags{display:flex;flex-wrap:wrap;gap:6px}
.profile-foot{margin:0;font-size:13px;color:var(--color-text-muted)}
.nav-sticky{position:sticky;top:0;z-index:50;flex-wrap:wrap;min-height:56px;background:var(--color-bg)}
.nav-logos{display:flex;align-items:center;gap:14px;letter-spacing:0}
.nav-logo{display:block;height:24px;width:auto}
.nav-logo.logo-500{height:18px}
.nav-sep{width:1px;height:24px;background:var(--color-divider)}
@media (min-width:992px){.nav-logo{height:28px}.nav-logo.logo-500{height:22px}.nav-sep{height:24px}.nav-logos{gap:20px}}
.nav-present{display:none;margin-left:8px}
@media (min-width:992px){.nav-present{display:inline-flex}}
.nav-sticky .nav-toggle{width:44px;height:44px}
.nav-mobile{display:none;flex-basis:100%;flex-direction:column;padding:4px 0 12px;border-top:1px solid var(--color-divider)}
.nav-mobile.is-open{display:flex}
.nav-mobile a{display:block;padding:12px 4px;font-size:16px;font-weight:500;color:var(--color-text);text-decoration:none;border-bottom:1px solid var(--color-divider)}
.nav-mobile a:last-child{border-bottom:0}
.nav-mobile a:hover{color:var(--color-navy-strong)}
@media (min-width:992px){.nav-sticky{min-height:64px}.nav-mobile,.nav-mobile.is-open{display:none}}
section[id]{scroll-margin-top:80px}
.read .sec-head{max-width:72ch}
.read p.body{max-width:72ch}
.read h3.h3sec{margin:64px 0 16px}
.read h4.sub{margin:32px 0 12px;font-size:17px}
.read .table-wrap{margin:16px 0 24px}
.panel-mist .table-wrap{background:var(--color-surface-raised)}
.read .list-clean{margin:0 0 16px;max-width:76ch;line-height:26px}
.read .list-clean .list-clean{margin:8px 0 0}
.src{font-size:13px;line-height:20px;color:var(--color-text-muted)}
.prompts{display:grid;gap:12px}
.unlock .card-list{margin-top:8px;font-size:15px;line-height:24px}
.unlock.catch{border-color:var(--color-accent)}
.ex-label{font-style:italic;color:var(--color-navy-strong);margin:8px 0}
.ph-img{margin:16px 0 32px;max-width:760px;aspect-ratio:16/7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;border:1px dashed var(--color-accent);border-radius:var(--radius-lg);background:repeating-linear-gradient(135deg,var(--color-surface),var(--color-surface) 12px,var(--color-surface-raised) 12px,var(--color-surface-raised) 24px);color:var(--color-text-muted);font-size:14px}
#top .hero-band-body{padding-top:64px;padding-bottom:64px}
/* Product screenshots (from the original site's 2019 backup), framed like a browser window. */
.tbc-shot {margin: 0; display: grid; gap: var(--space-2);}
.tbc-shot-frame {position: relative; box-sizing: border-box; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: #fff; padding: 28px 12px 12px; box-shadow: 0 12px 30px -18px rgba(4, 52, 108, .35); aspect-ratio: 16 / 10; overflow: hidden;}
.tbc-shot-frame::before {content: ""; position: absolute; top: 10px; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: #d5deea; box-shadow: 14px 0 0 #d5deea, 28px 0 0 #d5deea;}
.tbc-shot-frame img {display: block; width: 100%; height: 100%; object-fit: contain;}
.tbc-shot figcaption {font-size: 13px; color: var(--color-text-muted);}
/* YouTube facade: thumbnail + play button; the iframe (youtube-nocookie) loads only on click. */
.tbc-yt {border: 0; padding: 0; width: 100%; cursor: pointer; color: inherit;}
.tbc-yt img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s;}
.tbc-yt::after {content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 52, 108, .45), rgba(4, 52, 108, 0) 55%); pointer-events: none;}
.tbc-yt .tbc-play {position: relative; z-index: 1; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45); transition: transform .2s ease;}
.tbc-yt:hover img {transform: scale(1.03);}
.tbc-yt:hover .tbc-play, .tbc-yt:focus-visible .tbc-play {transform: scale(1.08);}
.tbc-yt:focus-visible {outline: 2px solid var(--color-focus); outline-offset: 3px;}
.tbc-video iframe {display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); background: var(--color-ink-deep);}
.tbc-video-cap {font-size: 13px; color: var(--color-text-muted);}
@media (prefers-reduced-motion: reduce) { .tbc-yt img, .tbc-yt .tbc-play {transition: none;} }
/* Header over a navy hero: navy with white text while at the top; switches to the white style once it sticks (is-stuck). */
.tbc-header {transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;}
.tbc-header .tbc-wordmark-light {display: none;}
html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) {background: rgb(4, 52, 108); color: #fff; border-bottom-color: transparent;}
html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .tbc-wordmark:not(.tbc-wordmark-light) {display: none;}
html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .tbc-wordmark-light {display: block;}
html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .nav-links > a, html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .tbc-sub > summary, html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .tbc-header-login {color: #fff;}
html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .nav-toggle {color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent;}
.tbc-header.is-stuck {box-shadow: 0 6px 20px -12px rgba(4, 52, 108, .35);}
/* Glass al quedar sticky: fondo semitransparente + blur; sin soporte de backdrop-filter queda el fondo sólido.
   Con el menú móvil abierto (html.tbc-menu-open) el header se queda sólido y en estilo claro, también sobre hero navy:
   si no, la página se transparenta detrás de los links o el panel queda navy con texto oscuro. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:not(.tbc-menu-open) .tbc-header.is-stuck {background: color-mix(in srgb, var(--color-bg) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border-bottom-color: color-mix(in srgb, var(--color-divider) 60%, transparent);}
}
/* Hero with a cut-out photo (transparent background): the person stands on the bottom edge of the navy band, with a soft cyan glow behind. */
.hero-band.has-media {position: relative; overflow: hidden;}
.hero-band.has-media .hero-band-body {position: relative; z-index: 1;}
.hero-band-media {position: relative; display: flex; justify-content: center; align-items: flex-end; height: 400px; margin-top: var(--space-6);}
.hero-band-media::before {content: ""; position: absolute; left: 50%; bottom: -35%; width: 110%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(29, 201, 252, .32), rgba(29, 201, 252, .08) 60%, rgba(29, 201, 252, 0) 100%); pointer-events: none;}
.hero-band-media img {position: relative; display: block; height: 100%; width: auto; max-width: none;}
.hero-media-stat {position: absolute; z-index: 2; left: var(--gutter, 20px); top: 6%; margin: 0; display: flex; flex-direction: column; color: #fff; font-weight: 800; line-height: 1;}
.hero-media-figure {font-size: 44px; letter-spacing: -0.02em;}
.hero-media-figure .tbc-claim {font-size: .4em; vertical-align: super; color: var(--color-accent);}
.hero-media-label {font-size: 17px; font-weight: 700; margin-top: 6px; color: var(--color-accent);}
@media (min-width: 992px) { .hero-media-stat {left: 0; top: 14%;} .hero-media-figure {font-size: 80px;} .hero-media-label {font-size: 26px;} }
@media (max-width: 991px) { .hero-band.has-media .hero-band-media {justify-content: flex-end; padding-right: 4px;} .hero-band.has-media {display: flex; flex-direction: column;} .hero-band.has-media .hero-band-media {order: 2;} .hero-band.has-media .hero-band-body {padding-bottom: 0;} }
@media (min-width: 992px) {
  .hero-band.has-media {min-height: 580px;}
  .hero-band.has-media .hero-band-body {display: flex; flex-direction: column; justify-content: center; min-height: 580px; box-sizing: border-box;}
  .hero-band-media {position: absolute; top: 40px; bottom: 0; right: max(var(--gutter, 24px), calc((100% - var(--container-max)) / 2)); width: min(44%, calc(var(--container-max) * .44)); height: auto; margin: 0; justify-content: flex-end;}
  .hero-band-media::before {left: auto; right: -10%; transform: none; width: 90%; bottom: -30%;}
}

@media (min-width:992px){#top .hero-band-body{padding-top:96px;padding-bottom:96px}#top h1{max-width:16ch}}
.hero-speaker{display:flex;align-items:center;gap:16px;margin-top:40px}
.hero-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--color-accent);flex:none}
.hero-name{color:var(--color-on-dark);font-weight:700;font-size:18px;line-height:24px}
.hero-date{color:var(--color-on-dark-muted);font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;margin-top:2px}
.hero-logos{display:flex;align-items:center;flex-wrap:wrap;gap:24px;margin-top:40px;padding-top:32px;border-top:1px solid var(--color-on-dark-line);max-width:560px}
.hero-logo{display:block;height:44px;width:auto;opacity:.95}
.hero-logo.logo-500{height:36px}
.logo-sep{width:1px;height:40px;background:var(--color-on-dark-line-strong)}
@media (max-width:767px){.hero-logos{gap:16px;margin-top:28px}.hero-logo{height:30px}.hero-logo.logo-500{height:24px}.logo-sep{height:28px}}
.ex-img{margin:16px 0 32px}
.ex-cap{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--color-text)}
.ex-img img{display:block;width:100%;height:auto;border:1px solid var(--color-divider);border-radius:var(--radius-lg)}
.ph-img{position:relative}
.ph-copy{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-surface-raised);color:var(--color-accent-strong);font-family:var(--font-sans);font-size:13px;font-weight:600;cursor:pointer}
.ph-copy:hover{background:var(--color-accent-200)}
.ph-copy:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.ph-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-strong)}
.ph-desc{max-width:52ch}
.ph-note{display:flex;flex-direction:column;gap:6px;margin:16px 0 24px;max-width:72ch;padding:16px 20px;border:1px dashed var(--color-accent);border-radius:var(--radius-lg);background:var(--color-accent-200);font-size:15px;line-height:24px}
.agenda-wrap{margin-top:64px;padding-top:48px;border-top:1px solid var(--color-divider)}
.agenda-cols{display:grid;gap:32px;grid-template-columns:1fr}
@media (min-width:992px){.agenda-cols{grid-template-columns:1fr 1fr}}
.ag-part{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-navy-strong)}
.agenda{list-style:none;margin:0;padding:0}
.agenda li a{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--color-divider);text-decoration:none;color:var(--color-text-muted);font-size:15px;line-height:24px}
.agenda li a strong{color:var(--color-text)}
.agenda li a:hover strong{color:var(--color-navy-strong)}
.ag-n{font-family:var(--font-mono);font-size:13px;color:var(--color-accent);padding-top:2px}
.start-here{margin-top:32px}
.dtree{display:grid;gap:0;margin:16px 0 32px;max-width:900px}
.dt-row{display:grid;grid-template-columns:1fr;gap:8px;align-items:center}
@media (min-width:768px){.dt-row{grid-template-columns:1fr 72px 1fr}}
.dt-q{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised);font-weight:600;font-size:15px;line-height:22px}
.dt-n{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--color-ink-deep);color:var(--color-on-dark);font-family:var(--font-mono);font-size:12px}
.dt-yes{font-family:var(--font-mono);font-size:12px;color:var(--color-navy-strong);text-align:center}
.dt-a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--color-navy-100);border:1px solid var(--color-navy-200);font-size:15px;line-height:22px}
@media (max-width:767px){.dt-ar{display:inline-block;transform:rotate(90deg)}}
.dt-a span{font-size:12px;color:var(--color-navy-strong);font-family:var(--font-mono)}
.dt-no{font-family:var(--font-mono);font-size:12px;color:var(--color-text-muted);padding:6px 0 6px 20px}
.dt-end{padding:12px 16px;border:1px dashed var(--color-divider);border-radius:var(--radius-lg);font-size:15px;color:var(--color-text-muted);max-width:calc(50% - 36px)}
@media (max-width:767px){.dt-end{max-width:none}}
.imap{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;margin:24px 0}
.imap .arrow{text-align:center;transform:rotate(90deg)}
.imap-col{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised);font-size:14px;color:var(--color-text-muted)}
.imap-col strong{font-size:17px;color:var(--color-text)}
@media (min-width:768px){.imap{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}.imap .arrow{transform:none}}
code{font-family:var(--font-mono);font-size:.9em;background:var(--color-neutral-200);padding:1px 4px;border-radius:4px}
a{color:var(--color-navy-strong)}a:hover{color:var(--color-text)}

/* editorial layer (Oct 2026): quiet motion, honoring reduced-motion preferences */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* ===== TextByChoice 2027 components (promoted from the homepage) ===== */
.tbc-pending {display: flex; align-items: center; gap: var(--space-2); margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);}
.tbc-pending::before {content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-accent-2);}
.tbc-skel {display: grid; gap: 10px;}
.tbc-skel i {display: block; height: 10px; border-radius: var(--radius-full); background: var(--color-navy-100);}
.tbc-header {gap: var(--space-4);}
.tbc-header .nav-brand {display: block; letter-spacing: 0;}
.tbc-wordmark {height: 28px; width: auto; display: block;}
/* El logo blanco es más ancho (198px vs 177px): en 375px empujaba el botón del menú a otra fila (el header usa flex-wrap). */
@media (max-width: 400px) { .tbc-header { gap: var(--space-2); } .tbc-header .tbc-wordmark { height: 26px; } }
.tbc-header .nav-links {align-items: center; gap: var(--space-6);}
.tbc-header .tbc-cta-desk {display: none;}
.tbc-sub {position: relative;}
.tbc-sub summary {list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); font-size: 14px; font-weight: 500; padding-block: 6px; border-bottom: 1px solid transparent;}
.tbc-sub summary::-webkit-details-marker {display: none;}
.tbc-sub summary:hover {border-bottom-color: var(--color-navy);}
.tbc-sub[open] summary svg {transform: rotate(180deg);}
.tbc-sub-menu {position: absolute; top: calc(100% + var(--space-2)); left: calc(-1 * var(--space-4)); min-width: 260px; display: grid; padding: var(--space-2); background: var(--color-surface-raised); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 60;}
.tbc-sub-menu a {color: var(--color-text); border: 0 !important; padding: var(--space-3) !important; border-radius: var(--radius-md);}
.tbc-sub-menu a:hover {background: var(--color-navy-100);}
.nav-mobile .tbc-mobile-group {padding: var(--space-3) 4px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted);}
.nav-mobile .tbc-indent {padding-left: var(--space-4);}
/* Menú móvil abierto: scroll propio (max-height lo fija el JS al alto disponible) y la página no scrollea detrás. */
.nav-mobile.is-open {overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}
html.tbc-menu-open {overflow: hidden;}
html.tbc-menu-open .tbc-header {transition: none;}
.nav-toggle .tbc-i-close, .nav-toggle[aria-expanded="true"] .tbc-i-open {display: none;}
.nav-toggle[aria-expanded="true"] .tbc-i-close {display: block;}
@media (min-width: 992px) { .tbc-header .nav-links { display: none; } .tbc-header .nav-toggle { display: inline-flex; } .tbc-header .tbc-cta-desk { display: inline-flex; } .tbc-header .nav-mobile.is-open { display: flex !important; } .tbc-header .nav-mobile .tbc-mobile-cta { display: none; } }
@media (min-width: 1280px) { .tbc-header .nav-links { display: flex; } .tbc-header .nav-toggle { display: none; } .tbc-header .nav-mobile, .tbc-header .nav-mobile.is-open { display: none !important; } }
.btn {min-height: 48px;}
.btn-lg {min-height: 52px; padding-inline: var(--space-6); font-size: 16px;}
.tbc-pill {display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-divider); color: var(--color-text); font-size: 13px; line-height: 18px; font-weight: 600;}
.tbc-pill-dot {flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-accent-2); color: var(--color-on-accent-2);}
.tbc-device {margin: 0; display: grid; justify-items: center; gap: var(--space-3); position: relative;}
.tbc-phone {position: relative; width: 220px; aspect-ratio: 9 / 19; max-width: 100%; border-radius: var(--radius-device); background: var(--color-ink-deep); padding: 8px; box-shadow: var(--shadow-lg);}
.tbc-phone.is-sm {width: 188px;}
.tbc-screen {height: 100%; border-radius: var(--radius-screen); background: var(--color-bg); display: flex; flex-direction: column; gap: 12px; padding: 0 14px; overflow: hidden;}
.tbc-screen-bar {display: block; flex: none; height: 56px; margin: 0 -14px 4px; background: var(--color-surface); border-bottom: 1px solid var(--color-divider);}
.tbc-screen-row {display: grid; gap: 5px; max-width: 78%; padding: 9px 11px; border-radius: 14px;}
.tbc-screen-row i {display: block; height: 5px; width: 72px; border-radius: 3px;}
.tbc-screen-row i + i {width: 48px;}
.tbc-screen-row.is-in {align-self: flex-start; background: var(--color-surface); border-bottom-left-radius: 4px;}
.tbc-screen-row.is-in i {background: var(--color-navy-200);}
.tbc-screen-row.is-out {align-self: flex-end; background: var(--color-accent-2); border-bottom-right-radius: 4px;}
.tbc-screen-row.is-out i {background: var(--color-on-accent-2); opacity: .22;}
.tbc-device .tbc-pending {justify-content: center;}
.tbc-feat-list {list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid;}
.tbc-feat-list li {display: flex; align-items: center; gap: var(--space-4); min-height: 56px; border-top: 1px solid var(--color-divider); font-size: 18px; font-weight: 600; color: var(--color-text);}
.tbc-feat-list li:last-child {border-bottom: 1px solid var(--color-divider);}
.tbc-feat-list svg {color: var(--color-accent); flex: none;}
.tbc-phones {display: flex; justify-content: center; align-items: flex-end; gap: var(--space-4);}
.tbc-phones .is-side {display: none;}
@media (min-width: 768px) { .tbc-phones .is-side { display: grid; } .tbc-phones .is-side:first-child { margin-bottom: 48px; } .tbc-phones .is-side:last-child { margin-bottom: 88px; } }
.tbc-ind {display: flex; align-items: center; gap: var(--space-4); min-height: 96px; padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface-raised); color: var(--color-text); text-decoration: none; transition: border-color var(--dur) ease;}
.tbc-ind:hover {border-color: var(--color-navy); color: var(--color-text);}
.tbc-ind-icon {width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-accent);}
.tbc-ind h3 {margin: 0; font-size: 20px; line-height: 1.3;}
.tbc-ind .tbc-go {margin-left: auto; color: var(--color-navy); flex: none;}
.tbc-quote {margin: 0; gap: var(--space-6);}
.tbc-qmark {font-family: var(--font-display); font-size: 56px; line-height: 1; height: 32px; color: var(--color-accent);}
.tbc-person {display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-divider);}
.tbc-avatar {width: 48px; height: 48px; flex: none; border-radius: var(--radius-full); background: var(--color-navy-100);}
.tbc-comp-mark {width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-lg); background: var(--color-bg); color: var(--color-accent);}
.tbc-mbar {position: sticky; bottom: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--color-bg); border-top: 1px solid var(--color-divider);}
.tbc-mbar .btn {flex: 1;}
.tbc-mbar small {font-size: 12px; line-height: 16px; color: var(--color-text-muted); max-width: 15ch;}
@media (min-width: 992px) { .tbc-mbar { display: none; } }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .tbc-phones .tbc-device:nth-child(odd) { --plx-from: var(--plx-feat); --plx-to: calc(var(--plx-feat) * -1); } .tbc-phones .tbc-device:nth-child(even) { --plx-from: calc(var(--plx-feat) * -0.5); --plx-to: calc(var(--plx-feat) * 0.5); } } }
.tbc-pill {margin: 0;}
.tbc-header .nav-links {gap: 20px;}
.tbc-header .nav-links > a, .tbc-sub summary {font-size: 14px;}
@media (min-width: 1280px) and (max-width: 1365px) { .tbc-header .nav-links { gap: 16px; } }
.tbc-mobile-cta {margin-top: var(--space-4); width: 100%; border-bottom: 0 !important;}
.nav-mobile a.tbc-mobile-cta {color: var(--color-on-accent-2); justify-content: center; text-align: center; margin-bottom: env(safe-area-inset-bottom, 0px);}
.tbc-claim {font-size: 0.6em; line-height: 0; margin-left: 2px; color: var(--color-text-muted); font-weight: 600; vertical-align: super;}
.tbc-feat-list li {font-size: 16px; min-height: 52px;}
.tbc-feat-list li span {min-width: 0;}
.tbc-quotes-head {display: grid; gap: var(--space-3);}
.tbc-quotes-head h2 {margin: 0;}
.tbc-rating {display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text);}
.tbc-stars {display: inline-flex; gap: 2px; color: var(--color-navy);}
.tbc-carousel {display: grid; gap: var(--space-6);}
.tbc-quotes {display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 86%); grid-template-columns: none; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-bottom: var(--space-2); scrollbar-width: thin; overscroll-behavior-x: contain;}
.tbc-quotes > * {scroll-snap-align: start;}
.tbc-quotes:focus-visible {outline: 2px solid var(--color-focus); outline-offset: 4px;}
@media (min-width: 768px) { .tbc-quotes { grid-auto-columns: calc((100% - var(--space-4)) / 2); } }
@media (min-width: 1200px) { .tbc-quotes { grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3); } }
.tbc-carousel-nav {display: flex; gap: var(--space-3);}
.tbc-quote blockquote {margin: 0; flex: 1; font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--color-text);}
.tbc-quote blockquote p {margin: 0;}
.tbc-quote blockquote p + p {margin-top: var(--space-3);}
.tbc-person strong {display: block; font-size: 15px; line-height: 20px; color: var(--color-text);}
.tbc-person strong + span {display: block; font-size: 13px; line-height: 19px; color: var(--color-text-muted);}
.tbc-quote-feature {--tbc-avatar-size: 64px; padding: var(--space-8) var(--space-6); gap: var(--space-6);}
.tbc-quote-feature .tbc-qmark {font-size: 80px; height: 44px;}
.tbc-quote-feature blockquote {font-size: 24px; line-height: 1.45;}
.tbc-quote-feature .tbc-avatar {width: var(--tbc-avatar-size); height: var(--tbc-avatar-size);}
.tbc-quote-feature .tbc-person {gap: var(--space-4);}
.tbc-quote-feature .tbc-person strong {font-size: 18px; line-height: 24px;}
.tbc-quote-feature .tbc-person strong + span {font-size: 15px; line-height: 22px;}
@media (min-width: 768px) { .tbc-quote-feature {--tbc-avatar-size: 88px; padding: var(--space-12, 48px) var(--space-12, 48px);} .tbc-quote-feature blockquote {font-size: 30px;} }
/* Team cards: photo first, then name, role and bio. */
.grid-auto.tbc-team-grid {grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));}
.tbc-team-card {padding: 0; overflow: hidden;}
.tbc-team-photo {display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; background: var(--color-navy-100);}
.tbc-team-body {display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); flex: 1;}
.tbc-team-body > div:first-child {display: grid; gap: var(--space-1, 4px);}
.tbc-team-bio {display: flex; flex-direction: column; gap: var(--space-3); flex: 1;}
.tbc-team-bio .card-body {flex: none; font-size: 15px;}
/* Portrait testimonial card: person first (photo ~40%), then the quote, then credentials. */
.grid-auto.tbc-portrait-grid {grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));}
.tbc-quote-portrait {padding: 0; overflow: hidden; container-type: inline-size;}
.tbc-portrait-inner {display: grid; grid-template-columns: 1fr; height: 100%;}
.tbc-portrait {display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; background: var(--color-navy-100);}
.tbc-portrait-body {display: flex; flex-direction: column; gap: var(--space-5, 20px); padding: var(--space-6);}
.tbc-quote-portrait .tbc-qmark {font-size: 64px; height: 36px;}
.tbc-quote-portrait blockquote {font-size: 22px; line-height: 1.45;}
.tbc-quote-portrait .tbc-person strong {font-size: 17px; line-height: 24px;}
.tbc-quote-portrait .tbc-person strong + span {font-size: 14px; line-height: 21px;}
@container (min-width: 480px) {
  .tbc-portrait-inner {grid-template-columns: 2fr 3fr;}
  .tbc-portrait {aspect-ratio: auto; height: 100%; min-height: 340px; contain: size;}
  .tbc-portrait-body {padding: var(--space-8);}
}
@container (min-width: 720px) {
  .tbc-quote-portrait.is-lg .tbc-portrait {min-height: 400px;}
  .tbc-quote-portrait.is-lg .tbc-portrait-body {padding: var(--space-12, 48px); justify-content: center;}
  .tbc-quote-portrait.is-lg .tbc-qmark {font-size: 80px; height: 44px;}
  .tbc-quote-portrait.is-lg blockquote {flex: 0 1 auto; font-size: 28px; line-height: 1.4;}
  .tbc-quote-portrait.is-lg .tbc-person strong {font-size: 18px;}
  .tbc-quote-portrait.is-lg .tbc-person strong + span {font-size: 15px; line-height: 22px;}
}
.tbc-avatar {object-fit: cover; display: grid; place-items: center; color: var(--color-navy-800); font-size: 15px; font-weight: 600;}
.tbc-logos {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3);}
@media (min-width: 768px) { .tbc-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tbc-logo-slot, .tbc-logo-name {height: 72px; border-radius: var(--radius-lg); background: var(--color-bg); display: grid; place-items: center;}
.tbc-logo-slot img {display: block; max-width: 72%; max-height: 40px; width: auto; height: auto; object-fit: contain;}
.tbc-logo-slot i {display: block; width: 56%; height: 12px; border-radius: var(--radius-full); background: var(--color-navy-100);}
.tbc-logo-name {font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--color-text-muted);}
.tbc-video {margin: 0; display: grid; gap: var(--space-3);}
.tbc-video-frame {position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius-lg); background: var(--color-ink-deep); display: grid; place-items: center; overflow: hidden;}
.tbc-play {width: 72px; height: 72px; border-radius: var(--radius-full); background: var(--color-accent-2); color: var(--color-on-accent-2); display: grid; place-items: center; padding-left: 4px;}
.tbc-video-time {position: absolute; right: var(--space-4); bottom: var(--space-4); font-family: var(--font-mono); font-size: 12px; color: var(--color-on-dark); background: var(--color-on-dark-hover); border: 1px solid var(--color-on-dark-outline); border-radius: var(--radius-sm); padding: 2px 8px;}
.tbc-comp-mark {background: var(--color-surface);}
.tbc-carriers {list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2);}
.tbc-carriers li {padding: 6px 12px; border: 1px solid var(--color-divider); border-radius: var(--radius-full); font-size: 13px; font-weight: 600; color: var(--color-text); background: var(--color-bg);}
.tbc-foot-top {max-width: var(--container-max); margin-inline: auto; padding: var(--space-16) var(--gutter) var(--space-8); display: grid; gap: var(--space-6); border-bottom: 1px solid var(--color-on-dark-line);}
.tbc-foot-top img {height: 28px; width: auto; display: block;}
.tbc-foot-contact p {margin: 0 0 var(--space-4); color: var(--color-on-dark); font-size: 16px; line-height: 1.5; max-width: 44ch;}
.tbc-foot-actions {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);}
.tbc-foot-actions a:not(.btn) {padding: 0;}
.tbc-foot-actions .btn {display: inline-flex; padding-block: 0;}
@media (min-width: 992px) { .tbc-foot-top { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-16); } .tbc-foot-contact { justify-self: end; text-align: right; } .tbc-foot-contact p { margin-left: auto; } .tbc-foot-actions { justify-content: flex-end; } }
@media (min-width: 992px) { .tbc-foot-contact { display: contents; } .tbc-foot-actions { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; flex-wrap: nowrap; } }
.tbc-foot-grid {padding-top: var(--space-8); grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (min-width: 768px) { .tbc-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .tbc-foot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tbc-comp-body .tbc-carriers {margin-top: 0;}
.tbc-hl {font-weight: 700; background-image: linear-gradient(transparent 64%, var(--color-neutral-300) 64%, var(--color-neutral-300) 90%, transparent 90%); background-repeat: no-repeat; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.04em;}
.tbc-hero .tbc-pill {border-color: var(--color-accent-300);}
.tbc-marquee {overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);}
.tbc-marquee-track {display: flex; width: max-content; animation: tbc-marquee 28s linear infinite;}
.tbc-marquee:hover .tbc-marquee-track, .tbc-marquee:focus-within .tbc-marquee-track {animation-play-state: paused;}
.tbc-marquee .tbc-carriers {flex-wrap: nowrap; margin: 0; padding-right: var(--space-3); gap: var(--space-3);}
.tbc-marquee .tbc-carriers li {flex: none; display: grid; place-items: center; min-width: 136px; height: 64px; padding: 0 var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--color-divider); background: var(--color-bg); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-muted); white-space: nowrap;}
@keyframes tbc-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .tbc-marquee { -webkit-mask-image: none; mask-image: none; } .tbc-marquee-track { animation: none; width: auto; } .tbc-marquee .tbc-carriers { flex-wrap: wrap; padding-right: 0; } .tbc-marquee .tbc-carriers[aria-hidden="true"] { display: none; } }
.tbc-header-login {display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3); font-size: 14px; font-weight: 600; color: var(--color-navy-strong); text-decoration: none; border-radius: var(--radius-md);}
.tbc-header-login:hover {background: var(--color-navy-100); color: var(--color-navy-strong);}
/* Sobre hero navy el texto es blanco: el fondo claro del hover lo dejaba blanco sobre claro. */
html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .tbc-header-login:hover, html:not(.tbc-menu-open) .tbc-header.is-on-dark:not(.is-stuck) .tbc-header-login:focus-visible {background: rgba(255, 255, 255, .14); color: #fff;}
.tbc-header .nav-brand {margin-right: auto;}
@media (min-width: 1280px) { .tbc-header-login { padding-inline: var(--space-2); } }
.tbc-open {position: relative; overflow: hidden;}
.tbc-open-grid {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-12); align-items: center;}
.tbc-open-copy {display: grid; gap: var(--space-4); justify-items: start;}
.tbc-open .kicker {color: var(--color-accent-2); margin: 0;}
.tbc-open-figure {margin: 0; font-family: var(--font-sans); font-weight: 800; font-size: clamp(76px, 7vw + 28px, 132px); line-height: .85; letter-spacing: -0.04em; color: var(--color-accent-2); font-variant-numeric: lining-nums;}
.tbc-open-figure span {font-size: .5em; letter-spacing: 0; margin-left: .04em; vertical-align: .62em;}
.tbc-open h2 {margin: 0; color: var(--color-on-dark); max-width: 18ch; font-size: clamp(22px, 1vw + 17px, 28px); line-height: 1.25;}
.tbc-open .tbc-claim {color: var(--color-on-dark-muted);}
.tbc-open .tbc-pending {color: var(--color-on-dark-muted); max-width: 48ch;}
.tbc-open-compare {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);}
.tbc-open-card {margin: 0; display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-on-dark-hover); border: 1px solid var(--color-on-dark-line);}
.tbc-open-card figcaption {display: grid; gap: 2px;}
.tbc-open-card strong {color: var(--color-on-dark); font-size: 16px;}
.tbc-open-card span {color: var(--color-on-dark-muted); font-size: 14px; font-variant-numeric: tabular-nums;}
.tbc-dots {display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px;}
.tbc-dots i {display: block; aspect-ratio: 1; border-radius: var(--radius-full); border: 1px solid var(--color-on-dark-outline);}
.tbc-dots.is-text i.on {background: var(--color-accent-2); border-color: var(--color-accent-2);}
.tbc-dots.is-email i.on {background: var(--color-on-dark-muted); border-color: var(--color-on-dark-muted);}
@media (min-width: 768px) { .tbc-dots { gap: 7px; } .tbc-open-card { padding: var(--space-8); } }
@media (min-width: 992px) { .tbc-open-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); padding-block: var(--space-16); } }
@media (max-width: 400px) { .tbc-open-card { padding: var(--space-4); } .tbc-dots { gap: 3px; } }
@keyframes tbc-dot-in { from { transform: scale(.4); opacity: .2; } to { transform: scale(1); opacity: 1; } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .tbc-dots i.on { animation: tbc-dot-in linear both; animation-timeline: view(block); animation-range: entry calc(var(--k) * 0.8%) cover calc(30% + var(--k) * 0.4%); } } }
.tbc-sr {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.tbc-channels {margin: 0; position: relative; display: grid; gap: var(--space-3); justify-items: stretch;}
.tbc-ch-list {list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2);}
.tbc-ch {display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-divider); background: var(--color-surface);}
.tbc-ch-icon {width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-neutral-600);}
.tbc-ch-name {font-size: 16px; font-weight: 600; color: var(--color-text-muted);}
.tbc-ch-list .tbc-ch-name {text-decoration: line-through; text-decoration-color: var(--color-neutral-500); text-decoration-thickness: 1px;}
.tbc-ch-tags {margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-1);}
.tbc-ch-tags span {font-size: 12px; line-height: 18px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-neutral-200); color: var(--color-neutral-800);}
.tbc-ch-arrow {justify-self: center; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-bg); border: 1px solid var(--color-divider); color: var(--color-navy);}
.tbc-ch.is-text {position: relative; min-height: 72px; padding: var(--space-3) var(--space-4); border-color: var(--color-navy); background: var(--color-bg); box-shadow: var(--shadow-md);}
.tbc-ch.is-text .tbc-ch-icon {background: var(--color-accent-2); color: var(--color-on-accent-2);}
.tbc-ch.is-text .tbc-ch-name {color: var(--color-text); font-size: 18px;}
.tbc-ch.is-text .tbc-ch-tags span {background: var(--color-navy-100); color: var(--color-navy-800);}
.tbc-ch-ok {position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-ink-deep); color: var(--color-accent-2);}
@media (max-width: 480px) { .tbc-ch { flex-wrap: wrap; } .tbc-ch-tags { margin-left: 48px; justify-content: flex-start; width: 100%; } .tbc-ch-ok { right: -4px; } }
.tbc-vp-icon {width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: var(--space-4); border-radius: var(--radius-md); background: var(--color-ink-deep); color: var(--color-accent-2);}

/* page */
/* TextByChoice homepage: page layout only. Components (pill, device, open-rate band, channel comparison,
   testimonials carousel, logo marquee, video frame, header, footer, mobile CTA bar...) live in components/bundle.css. */
.tbc {overflow-x: clip;}
.tbc section[id] {scroll-margin-top: 88px;}
.tbc-hero {position: relative; isolation: isolate; overflow: hidden; background: var(--color-bg); border-bottom: 1px solid var(--color-divider);}
.tbc-hero-grid {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12) var(--space-16); align-items: center;}
.tbc-hero-grid > div:first-child {display: grid; justify-items: start; gap: var(--space-6);}
.tbc-hero-grid > div:first-child > * {margin: 0;}
.tbc-h1 {font-family: var(--font-sans); font-weight: var(--font-heading-weight); font-size: 38px; line-height: 1.08; letter-spacing: -0.035em; margin: 0; text-wrap: balance; color: var(--color-text);}
.tbc-h1 .marker {padding: 0 0.12em; border-radius: 4px;}
.tbc-deck {font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--color-text-muted); margin: 0; max-width: 40ch;}
.tbc-actions {display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-2);}
@media (min-width: 768px) { .tbc-h1 { font-size: 52px; max-width: 14em; } .tbc-hero-grid { padding-block: var(--space-16) var(--space-24); } }
@media (min-width: 992px) { .tbc-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); padding-block: var(--space-16); } .tbc-h1 { font-size: 56px; max-width: none; } }
@media (min-width: 1280px) { .tbc-h1 { font-size: 64px; } }
.tbc-why .sec-head h2 {max-width: 24ch;}
.tbc-after {margin: var(--space-6) 0 0;}
.tbc-feat-grid {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center;}
@media (min-width: 992px) { .tbc-feat-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); } }
.tbc-ind-grid {display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);}
@media (min-width: 768px) { .tbc-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbc-comp {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start;}
.tbc-comp-body {display: grid; gap: var(--space-6); justify-items: start; max-width: 56ch; width: 100%;}
.tbc .footer :focus-visible {outline-color: var(--color-accent-2);}
.tbc {--plx-feat: 16px;}
@media (min-width: 768px) { .tbc { --plx-feat: 28px; } }
@media (min-width: 1280px) { .tbc { --plx-feat: 40px; } }
@keyframes tbc-plx-span { from { transform: translate3d(0, var(--plx-from), 0); } to { transform: translate3d(0, var(--plx-to), 0); } }
@supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .tbc-phones .tbc-device { animation: tbc-plx-span linear both; animation-timeline: view(block); animation-range: cover 0% cover 100%; } } }
@media (prefers-reduced-motion: reduce) { .tbc *, .tbc *::before, .tbc *::after { animation: none !important; transition: none !important; } }
.tbc-ind-lead {font-size: 18px; line-height: 1.4; font-weight: 600; margin: 0 0 var(--space-4);}
@media (min-width: 992px) { .tbc-ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tbc-customers {margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); display: grid; gap: var(--space-4);}
.tbc-customers .tbc-ind-lead {margin: 0;}
.tbc-whytbc {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center;}
.tbc-whytbc h2 {font-size: clamp(24px, 1.4vw + 18px, 34px); line-height: 1.25;}
@media (min-width: 992px) { .tbc-whytbc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); } }
.tbc-comp {margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--color-divider);}
.tbc-comp-body {max-width: 64ch; gap: var(--space-4);}
.tbc-comp-body .kicker {margin: 0;}
.tbc-comp-title {font-size: clamp(22px, 1vw + 18px, 28px); line-height: 1.3; margin: 0;}
.tbc-comp-body .btn {margin-top: var(--space-2);}
.tbc-comp-lead {display: grid; gap: var(--space-4); justify-items: start;}
.tbc-comp-lead .kicker {margin: 0;}
@media (min-width: 992px) { .tbc-comp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; } }
.tbc-whytbc-line {margin: var(--space-4) 0 0; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--color-text-muted);}
.tbc-h1 {font-size: 31px;}
@media (min-width: 768px) { .tbc-h1 { font-size: 48px; max-width: none; } }
@media (min-width: 992px) { .tbc-h1 { font-size: 44px; } }
@media (min-width: 1100px) { .tbc-h1 { font-size: 48px; } }
@media (min-width: 1280px) { .tbc-h1 { font-size: 56px; } }
.tbc-why-grid {display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; margin-bottom: var(--space-12);}
.tbc-why-line {margin: var(--space-4) 0 0; font-size: 18px; line-height: 1.6; font-weight: 500; color: var(--color-text-muted); max-width: 40ch;}
@media (min-width: 992px) { .tbc-why-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); } }


:root, :root[data-theme="dark"] { color-scheme: light; }
html, body { background: var(--color-bg); }
.tbc-header.nav-sticky { top: env(safe-area-inset-top, 0px); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--color-bg); }
[data-page][hidden]{display:none}
[data-page] h1:focus{outline:none}
/* phase 3: internal pages */
[data-page] .table{min-width:0}
[data-page] .table th,[data-page] .table td{padding:10px 12px}
/* doubt-killer: the one standard line under a primary CTA */
.cta-note{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:600;color:var(--color-accent)}
.cta-note::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--color-accent-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2304346c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.hero-band .cta-note,.panel-dark .cta-note{color:var(--color-on-dark)}
.tbc-mbar .cta-note{display:block;font-size:12px;line-height:16px;font-weight:600;max-width:15ch}
.tbc-mbar .cta-note::before{display:none}
.tbc-actions .cta-note.is-row{flex-basis:100%}
.tbc-ph{aspect-ratio:auto;min-height:140px;margin:0;max-width:none}
.tbc-pstack{display:grid;gap:var(--space-3);margin-bottom:var(--space-6)}
.tbc-stats{grid-template-columns:1fr}
@media (min-width:768px){.tbc-stats{grid-template-columns:repeat(3,1fr)}}
.tbc-qgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.tbc-endcta{display:grid;gap:var(--space-3);max-width:var(--measure)}
.tbc-endcta h2,.tbc-endcta p{margin:0}
.tbc-ans{padding:var(--space-4)}.tbc-ans p{margin:0;color:var(--color-text-muted)}
[data-page] .tbc-quote{margin:0}
[data-page] .grid-auto>*{min-width:0}
.nav-mobile a[aria-current="page"]{color:var(--color-navy-strong);font-weight:600}

/* Pricing page (source of truth: textbychoice.netlify.app/pricing/) */
.tbc-pr{display:grid;gap:var(--space-8);align-items:start}
.tbc-pr-config{display:grid;gap:var(--space-4);min-width:0}
.tbc-pr-toggle{display:inline-flex;justify-self:start;padding:4px;border:1px solid var(--color-divider);border-radius:var(--radius-full);background:var(--color-surface-raised)}
.tbc-pr-toggle button{min-height:44px;padding:0 var(--space-6);border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text);font:inherit;font-weight:600;cursor:pointer}
.tbc-pr-toggle button[aria-pressed="true"]{background:var(--color-navy);color:var(--color-on-dark)}
.tbc-pr-toggle button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.tbc-pr-save{font-size:12px;font-weight:700;color:var(--color-accent-2-700)}
.tbc-pr-toggle button[aria-pressed="true"] .tbc-pr-save{color:inherit}
.tbc-pr-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-top:var(--space-4)}
.tbc-pr-volume{margin:0;display:flex;align-items:baseline;gap:var(--space-2)}
.tbc-pr-volume strong{font-family:var(--font-sans);font-size:clamp(40px,3vw + 24px,56px);font-weight:800;letter-spacing:-0.035em;line-height:1;color:var(--color-text)}
.tbc-pr-volume span{color:var(--color-text-muted)}
.tbc-pr-range{width:100%;height:44px;margin:0;accent-color:var(--color-accent-2);cursor:pointer}
.tbc-pr-ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--color-text-muted);margin-top:calc(-1 * var(--space-2))}
.tbc-pr-sub{font-size:14px;font-weight:600;margin:var(--space-6) 0 0}
.tbc-pr-tiers{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.tbc-pr-tiers li{display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:var(--space-2) var(--space-4);border:1px dashed var(--color-divider);border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.tbc-pr-tname{flex:1;min-width:0}
.tbc-pr-ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:var(--radius-full);background:var(--color-neutral-200);color:var(--color-neutral-600);transition:background-color .25s ease,color .25s ease}
.tbc-pr-ico .i-on,.tbc-pr-tiers li.is-on .tbc-pr-ico .i-off{display:none}
.tbc-pr-tiers li.is-on .tbc-pr-ico .i-on{display:block}
.tbc-pr-tiers em{flex:none;font-style:normal;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-text-muted);white-space:nowrap}
.tbc-pr-tiers li.is-on{border-style:solid;border-color:var(--color-accent-2-300);background:var(--color-accent-2-100);color:var(--color-text);font-weight:600}
.tbc-pr-tiers li.is-on .tbc-pr-ico{background:var(--color-accent-2);color:var(--color-on-accent-2)}
.tbc-pr-tiers li.is-on em{background:var(--color-navy);color:var(--color-on-dark)}
/* Slider feedback: a tier that changes state pulses, its icon pops and its pill slides in; the price eases to the new value. */
@media (prefers-reduced-motion: no-preference) {
  .tbc-pr-tiers li.is-flip {animation: tbc-tier-pulse .5s cubic-bezier(.2,.7,.3,1);}
  .tbc-pr-tiers li.is-flip .tbc-pr-ico {animation: tbc-tier-pop .5s cubic-bezier(.34,1.56,.64,1);}
  .tbc-pr-tiers li.is-flip em {animation: tbc-tier-pill .45s cubic-bezier(.2,.7,.3,1);}
  .tbc-pr-amt.is-tick, .tbc-pr-np-price.is-tick {animation: tbc-price-tick .35s cubic-bezier(.2,.7,.3,1);}
  @keyframes tbc-tier-pulse {0% {scale: .98;} 45% {scale: 1.015;} 100% {scale: 1;}}
  @keyframes tbc-tier-pop {0% {scale: .3; rotate: -45deg;} 60% {scale: 1.15; rotate: 0deg;} 100% {scale: 1;}}
  @keyframes tbc-tier-pill {from {opacity: 0; translate: 8px 0;} to {opacity: 1; translate: 0 0;}}
  @keyframes tbc-price-tick {from {opacity: .2; translate: 0 8px;} to {opacity: 1; translate: 0 0;}}
}
.tbc-pr-fees{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:var(--space-4)}
.tbc-pr-fees div{display:grid;gap:var(--space-1);padding:var(--space-4);border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface-raised)}
.tbc-pr-fees strong{font-family:var(--font-sans);font-size:28px;font-weight:800;letter-spacing:-0.03em;line-height:1.1}
.tbc-pr-fees span{font-size:14px;color:var(--color-text-muted)}
.tbc-pr-quote{gap:var(--space-3);box-shadow:var(--shadow-md);min-width:0}
.tbc-pr-plan{margin:0;font-weight:600;color:var(--color-navy-strong)}
.tbc-pr-price{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-3);font-family:var(--font-sans);font-weight:800;letter-spacing:-0.02em;font-variant-numeric:lining-nums proportional-nums;font-size:clamp(48px,3vw + 30px,64px);line-height:1;color:var(--color-text)}
/* Amount reads as $ 1,069 .20: currency sign and cents sit small at cap height so the whole number stays the focus. */
.tbc-pr-amt{display:inline-flex;align-items:flex-start}
.tbc-pr-cur,.tbc-pr-dec{font-size:.45em;font-weight:700;line-height:1;letter-spacing:0;margin-top:.14em}
.tbc-pr-cur{margin-right:.08em;color:var(--color-text-muted)}
.tbc-pr-dec{margin-left:.04em}
.tbc-pr-price small{font-family:var(--font-body);font-size:16px;font-weight:500;letter-spacing:0;color:var(--color-text-muted)}
.tbc-pr-note,.tbc-pr-rate,.tbc-pr-terms{margin:0;color:var(--color-text-muted)}
.tbc-pr-rate{font-size:14px}
.tbc-pr-terms{font-size:13px}
.tbc-pr-go{display:flex;flex-wrap:wrap;gap:var(--space-3);padding-top:var(--space-2)}
.tbc-pr-checks{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tbc-pr-checks li{display:flex;gap:var(--space-2);align-items:flex-start;font-size:14px;line-height:20px}
.tbc-pr-checks svg{flex:none;width:18px;height:18px;color:var(--color-accent)}
.tbc-pr-np{display:flex;gap:var(--space-4);align-items:flex-start;margin:var(--space-2) 0 0;padding:var(--space-4);border:1px solid var(--color-accent-2-300);border-left:4px solid var(--color-accent-2);border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-accent-2-100),var(--color-note-surface));font-size:14px}
.tbc-pr-np-badge{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-full);background:var(--color-navy);color:var(--color-accent-2);font-weight:800;font-size:16px;letter-spacing:-0.03em}
.tbc-pr-np-body{display:grid;gap:var(--space-1);min-width:0}
.tbc-pr-np-body p{margin:0;color:var(--color-text)}
.tbc-pr-np-title{font-weight:800;font-size:16px;letter-spacing:-0.01em}
.tbc-pr-np-price{font-weight:700;color:var(--color-navy-strong)}
.tbc-pr-np-link{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:var(--space-1);padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--color-navy-strong);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.tbc-pr-np-link:hover svg{translate:3px 0}
.tbc-pr-np-link svg{transition:translate .25s ease}
.tbc-pr-np-link:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.tbc-pr-table th[scope="row"]{font-weight:600;white-space:nowrap}
.tbc-pr-table td:nth-child(2),.tbc-pr-table td:nth-child(3){white-space:nowrap}
.tbc-pr-fine{font-size:14px;color:var(--color-text-muted);max-width:var(--measure)}
.tbc-pr-support .kicker{margin:0}
.tbc-pr-credits{display:grid;gap:var(--space-8)}
@media (min-width:960px){.tbc-pr-credits{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start}.tbc-pr-facts{grid-template-columns:1fr}}
.tbc-pr-facts{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.tbc-pr-credits .tbc-feat-list{margin:0}
.tbc-pr-callout{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* Pricing redesign: dark hero with phone, one calculator card, four-up fee strip. Little text, one action. */
.tbc-pp-hero{overflow:hidden;position:relative}
.tbc-pp-hero .hero-band-body.tbc-pp-body{display:grid;gap:var(--space-8);align-items:center;position:relative;padding-block:var(--space-12) var(--space-12)}
@media (min-width:992px){.tbc-pp-hero .hero-band-body.tbc-pp-body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);padding-block:var(--space-16)}}
.tbc-pp-copy h1{max-width:none;margin:0 0 var(--space-6)}
.tbc-pp-props{list-style:none;margin:0 0 var(--space-8);padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4)}
.tbc-pp-props li{display:flex;align-items:center;gap:var(--space-2);font-size:15px;line-height:1.25;font-weight:600;color:#fff;padding-right:var(--space-4);border-right:1px solid var(--color-divider)}
.tbc-pp-props li:last-child{border-right:0;padding-right:0}
.tbc-pp-props svg{flex:none;color:var(--color-accent)}
@media (max-width:767px){.tbc-pp-props{flex-direction:column}.tbc-pp-props li{border-right:0;padding-right:0}}
.tbc-pp-art{position:relative;min-height:380px;display:none}
@media (min-width:768px){.tbc-pp-art{display:block}}
.tbc-pp-ribbon{position:absolute;right:-8%;top:-18%;width:78%;height:120%;border-radius:50% 0 0 60%;background:linear-gradient(150deg,#1dc9fc 0%,#0a7fd1 60%,#04346c 100%);transform:rotate(14deg);opacity:.9}
.tbc-pp-ribbon.is-2{right:18%;top:30%;width:60%;height:80%;opacity:.45;transform:rotate(-24deg);border-radius:60% 40% 0 70%}
.tbc-pp-phone{position:absolute;left:50%;top:50%;width:min(215px,60%);aspect-ratio:9/16;transform:translate(-50%,-50%) rotate(-7deg);border:7px solid #d3d9e6;border-radius:38px;background:#eef2f9;box-shadow:0 24px 50px -16px #0008;padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:var(--space-3)}
.tbc-pp-top{display:flex;align-items:center;gap:var(--space-2);font-size:13px;color:#04346c;padding-top:var(--space-6)}
.tbc-pp-av{width:24px;height:24px;border-radius:50%;background:#c4d4ea}
.tbc-pp-b{margin:0;padding:10px 12px;border-radius:14px;font-size:13px;line-height:1.3;color:#04346c;max-width:82%;display:grid;gap:2px}
.tbc-pp-b small{font-size:10px;opacity:.55;justify-self:end}
.tbc-pp-b.is-in{background:#fff;box-shadow:0 2px 6px #04346c14}
.tbc-pp-b.is-out{background:#d6f5c4;align-self:flex-end}
@media (prefers-reduced-motion:no-preference){.tbc-pp-phone{animation:tbc-pp-float 6s ease-in-out infinite alternate}@keyframes tbc-pp-float{from{translate:0 6px}to{translate:0 -8px}}}
/* calculator card */
#plans .tbc-pr{display:grid;gap:0;align-items:stretch;background:#fff;border-radius:24px;box-shadow:var(--shadow-md);overflow:hidden}
@media (min-width:992px){#plans .tbc-pr{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.85fr)}}
#plans .tbc-pr>*{padding:var(--space-8)}
#plans .tbc-pr-quote{display:grid;gap:var(--space-3);align-content:center;border-top:1px solid var(--color-divider)}
@media (min-width:992px){#plans .tbc-pr-quote{border-top:0;border-left:1px solid var(--color-divider)}}
.tbc-pr-title{font-size:clamp(24px,1vw + 20px,32px);margin:0 0 var(--space-2)}
.tbc-pr-config{align-content:center}
.tbc-pr-plan{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tbc-pr-bill{display:grid;gap:var(--space-3);align-content:center;background:var(--color-accent-2-100);border-top:1px solid var(--color-divider)}
.tbc-pr-bill-h{margin:0;display:flex;align-items:center;gap:var(--space-2);font-weight:700;color:var(--color-navy-strong)}
.tbc-pr-bill-big{margin:0;font-family:var(--font-sans);font-weight:800;letter-spacing:-0.035em;font-size:clamp(32px,2vw + 22px,44px);line-height:1;color:var(--color-accent-2-700)}
.tbc-pr-bill .tbc-pr-note{font-size:14px}
.tbc-pr-bill .tbc-pr-np{margin:0;padding:var(--space-3) 0 0;border:0;border-top:1px solid var(--color-accent-2-300);border-radius:0;background:none;font-size:13px}
.tbc-pr-bill .tbc-pr-np-badge{display:none}
.tbc-pr-bill .tbc-pr-np-body p{font-size:13px}
.tbc-pr-bill .tbc-pr-np-title{font-weight:700}
.tbc-pp-tiers-h{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin:var(--space-8) 0 var(--space-3)}
.tbc-pp-tiers{margin-top:0}
@media (min-width:768px){.tbc-pp-tiers{grid-template-columns:repeat(4,minmax(0,1fr))}.tbc-pp-tiers li{flex-wrap:wrap;align-content:center;gap:var(--space-2) var(--space-3);padding:var(--space-4)}.tbc-pp-tiers .tbc-pr-tname{flex:1 1 calc(100% - 40px)}.tbc-pp-tiers em{margin-left:calc(26px + var(--space-3))}}
.tbc-pp-tiers li{background:#fff}.tbc-pp-tiers li.is-on{background:var(--color-accent-2-100)}
.tbc-pp-fees{list-style:none;margin:var(--space-12) 0 0;padding:0;display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tbc-pp-fees li{display:flex;align-items:center;gap:var(--space-4)}
.tbc-pp-fees svg{flex:none;color:var(--color-navy-strong)}
.tbc-pp-fees strong{display:block;font-family:var(--font-sans);font-size:20px;font-weight:800;letter-spacing:-0.02em;line-height:1.2}
.tbc-pp-fees small{font-size:15px;font-weight:600}
.tbc-pp-fees span{font-size:14px;color:var(--color-text-muted)}
/* Inner-page heroes reuse the pricing hero: title left, tilted phone with page-specific content right. */
.tbc-ha-hero .tbc-pp-copy h1{font-size:clamp(34px,6vw + 10px,48px)}
@media (min-width:992px){.tbc-ha-hero .tbc-pp-copy h1{font-size:clamp(44px,2vw + 26px,60px)}}
.tbc-ha-hero .tbc-pp-copy .hero-band-lead{margin-bottom:var(--space-6)}
.tbc-ha-hero .tbc-pp-copy .tbc-actions{margin-top:0}
.tbc-pp-phone{overflow:hidden}
.tbc-ha-chip{position:absolute;left:2%;bottom:14%;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;background:#fff;color:#04346c;font-size:13px;font-weight:700;box-shadow:0 14px 30px -12px #0009;max-width:60%}
.tbc-ha-chip svg{flex:none;width:28px;height:28px;padding:5px;border-radius:50%;background:#1dc9fc;color:#04346c}
.tbc-ha-row{margin:0;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#fff;font-size:13px;font-weight:600;color:#04346c;box-shadow:0 2px 6px #04346c14}
.tbc-ha-row>span{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#c4d4ea;font-size:11px;color:#fff}
.tbc-ha-row.is-ok>span{background:#15b26b}.tbc-ha-row.is-wait>span{background:#f5a524}.tbc-ha-row.is-bad>span{background:#e5484d}
.tbc-ha-row.is-slot{justify-content:center}
.tbc-ha-row.is-pick{background:#1dc9fc;color:#04346c}
.tbc-ha-doc{display:grid;gap:9px;padding:14px;border-radius:12px;background:#fff;box-shadow:0 2px 6px #04346c14}
.tbc-ha-doc i{display:block;height:7px;border-radius:4px;background:#dbe4f1}
.tbc-ha-doc i:nth-child(1){width:60%;height:10px;background:#04346c33}
.tbc-ha-doc i:nth-child(4n){width:72%}.tbc-ha-doc i:nth-child(5n){width:85%}
@media (prefers-reduced-motion:no-preference){.tbc-ha-chip{animation:tbc-pp-float 5s ease-in-out infinite alternate-reverse}}
/* Hero compositions other than the phone: documents with badges, people, windows, tiles, cards. */
.tbc-hx>*:not(.tbc-pp-ribbon){position:absolute}
.tbc-ha-chip.p-tr{left:auto;right:2%;top:10%;bottom:auto}
.tbc-ha-chip.p-ml{left:0;top:46%;bottom:auto}
.tbc-ha-chip.p-br{left:auto;right:4%;bottom:8%}
.tbc-ha-chip.p-bl{left:4%;bottom:10%}
.tbc-hx-doc{left:50%;top:50%;width:230px;padding:18px;border-radius:16px;background:#fff;transform:translate(-50%,-50%) rotate(-5deg);box-shadow:0 24px 50px -16px #0008}
.tbc-hx-doc-h{margin:0 0 14px;display:flex;align-items:center;gap:8px;color:#04346c;font-size:14px}
.tbc-hx-doc-h svg{color:#0a7fd1}
.tbc-hx-lines{display:grid;gap:8px}
.tbc-hx-lines i{display:block;height:7px;border-radius:4px;background:#dbe4f1}
.tbc-hx-seal{position:absolute;right:-16px;bottom:-16px;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#1dc9fc,#0a7fd1);color:#fff;box-shadow:0 10px 24px -8px #0009;border:4px solid #fff}
.tbc-hx-person{display:block;border-radius:50%;box-shadow:0 6px 16px -6px #0007}
.tbc-hx-reviews{left:50%;top:50%;transform:translate(-50%,-52%);display:grid;gap:14px;width:min(330px,92%)}
.tbc-hx-review{display:flex;gap:12px;align-items:center;padding:12px 16px 12px 12px;border-radius:20px 20px 20px 6px;background:#fff;box-shadow:0 14px 30px -14px #0009}
.tbc-hx-review>div{flex:1;display:grid;gap:6px}
.tbc-hx-review.r1{margin-left:34px;border-radius:20px 20px 6px 20px}
.tbc-hx-review.r2{margin-left:12px}
.tbc-hx-stars{display:flex;gap:2px;color:#f5a524}.tbc-hx-stars svg{fill:currentColor}
.tbc-hx-win{width:270px;border-radius:14px;background:#fff;box-shadow:0 24px 50px -16px #0008;overflow:hidden}
.tbc-hx-win.is-center{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg)}
.tbc-hx-win.is-left{left:2%;top:16%;width:200px;transform:rotate(-4deg)}
.tbc-hx-win.is-right{right:2%;bottom:14%;width:220px;transform:rotate(3deg)}
.tbc-hx-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#eef2f9;font-size:12px;color:#04346c}
.tbc-hx-bar span{width:8px;height:8px;border-radius:50%;background:#c4d4ea}
.tbc-hx-bar b{margin-left:6px}
.tbc-hx-wbody{display:grid;gap:9px;padding:14px;font-size:13px;color:#04346c}
.tbc-hx-wbody .tbc-pp-b{max-width:90%}
.tbc-hx-win.is-code{background:#0b1f3a}
.tbc-hx-win.is-code .tbc-hx-bar{background:#12305a;color:#c9d9ee}
.tbc-hx-win.is-code .tbc-hx-wbody{gap:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#e3f2fb}
.tbc-hx-win.is-code p{margin:0}.tbc-hx-win.is-code .c2{padding-left:16px}.tbc-hx-win.is-code em{font-style:normal;color:#33d4f4}.tbc-hx-win.is-code s{text-decoration:none;color:#a6e3a1}.tbc-hx-win.is-code .c3{color:#7f93ad}
.tbc-hx-link{left:50%;top:48%;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#1dc9fc;color:#04346c;transform:translate(-50%,-50%);box-shadow:0 0 0 8px #1dc9fc33}
.tbc-hx-who{display:grid;justify-items:center;gap:6px}
.tbc-hx-who b{padding:3px 10px;border-radius:999px;background:#fff;color:#04346c;font-size:11px;white-space:nowrap;box-shadow:0 6px 14px -8px #0008}
.tbc-hx-who.w1{left:0;top:6%}.tbc-hx-who.w2{right:0;top:2%}.tbc-hx-who.w3{right:8%;bottom:2%}
.tbc-hx-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tbc-hx-kpis span{display:grid;padding:8px;border-radius:10px;background:#eef2f9;font-size:11px}
.tbc-hx-kpis b{font-size:18px}
.tbc-hx-chart{display:flex;align-items:flex-end;gap:8px;height:80px}
.tbc-hx-chart i{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(#1dc9fc,#0a7fd1)}
.tbc-hx-tiles{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);display:grid;grid-template-columns:repeat(3,96px);gap:10px}
.tbc-hx-tiles span{display:grid;justify-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:#fff;color:#0a7fd1;box-shadow:0 14px 30px -14px #0009;text-align:center}
.tbc-hx-tiles span:nth-child(even){background:#e3f2fb}
.tbc-hx-tiles b{font-size:11px;color:#04346c}
.tbc-hx-cards{left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:12px;width:min(300px,92%)}
.tbc-hx-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:#fff;box-shadow:0 14px 30px -14px #0009}
.tbc-hx-card:nth-child(1){transform:translateX(-14px) rotate(-2deg)}.tbc-hx-card:nth-child(3){transform:translateX(14px) rotate(2deg)}
.tbc-hx-card>div{flex:1;display:grid;gap:6px;min-width:0}
.tbc-hx-card b{font-size:13px;color:#04346c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbc-hx-card i{display:block;height:6px;border-radius:3px;background:#dbe4f1}
.tbc-hx-thumb{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#1dc9fc,#0a7fd1);color:#fff}
.tbc-hx-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.tbc-hx-cal i{display:grid;place-items:center;height:24px;border-radius:6px;font-style:normal;font-size:11px;color:#7f93ad}
.tbc-hx-cal i.on{background:#e3f2fb;color:#04346c;font-weight:700}.tbc-hx-cal i.pick{background:#1dc9fc}
.tbc-hx-win.is-center~.tbc-hx-who.w2{right:-2%;top:auto;bottom:4%}
.tbc-hx-qa{left:50%;top:50%;transform:translate(-50%,-50%);display:grid;gap:10px;width:min(320px,92%)}
.tbc-hx-q,.tbc-hx-a{margin:0;padding:12px 14px;border-radius:16px;font-size:14px;box-shadow:0 14px 30px -14px #0009}
.tbc-hx-q{display:flex;gap:8px;align-items:center;background:#1dc9fc;color:#04346c;font-weight:700;border-bottom-left-radius:4px;margin-right:30px}
.tbc-hx-a{background:#fff;color:#04346c;border-bottom-right-radius:4px;margin-left:40px}
.tbc-hx-video{display:grid;place-items:center;height:100px;border-radius:10px;background:linear-gradient(135deg,#04346c,#0a7fd1);color:#fff}
.tbc-hx-video svg{fill:currentColor}
.tbc-hx-vs{left:50%;top:50%;transform:translate(-50%,-55%);display:grid;grid-template-columns:1fr 1fr;gap:14px;width:min(340px,94%);align-items:end}
.tbc-hx-vs>div{display:grid;gap:4px;padding:18px;border-radius:18px;box-shadow:0 14px 30px -14px #0009}
.tbc-hx-vs-a{background:#fff;color:#04346c;transform:rotate(-3deg)}
.tbc-hx-vs-a b{font-size:52px;line-height:1;font-weight:800;letter-spacing:-.04em;color:#0a7fd1}
.tbc-hx-vs-b{background:#ffffff26;color:#c9d9ee;border:1px dashed #ffffff55}
.tbc-hx-vs-b b{font-size:28px;line-height:1;color:#ffffffaa;text-decoration:line-through}
.tbc-hx-vs span{font-size:13px;font-weight:600}
.tbc-hx-pay{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);display:grid;gap:8px;width:230px;padding:22px;border-radius:18px;background:#fff;color:#04346c;box-shadow:0 24px 50px -16px #0008}
.tbc-hx-pay-h{margin:0;font-size:12px;font-weight:600;color:#7f93ad;text-transform:uppercase;letter-spacing:.1em}
.tbc-hx-pay>b{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.03em}
.tbc-hx-pay-btn{display:flex;justify-content:center;align-items:center;gap:6px;padding:10px;border-radius:999px;background:#1dc9fc;font-weight:700;font-size:14px}
@media (prefers-reduced-motion:no-preference){.tbc-hx .tbc-hx-who,.tbc-hx .tbc-hx-seal{animation:tbc-pp-float 5s ease-in-out infinite alternate}.tbc-hx .tbc-hx-who.w2{animation-delay:-2s}}
.tbc-hx-field{margin:0;display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:#eef2f9;font-size:12px;font-weight:600}
.tbc-hx-field small{font-size:10px;font-weight:600;color:#7f93ad;text-transform:uppercase;letter-spacing:.08em}
.tbc-hx-field.is-msg{font-weight:500;line-height:1.4}
.tbc-hx-send{margin:0;justify-self:end;padding:7px 16px;border-radius:999px;background:#1dc9fc;font-size:12px;font-weight:700}
.tbc-pp-more{margin-top:var(--space-8);border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.tbc-pp-more summary{cursor:pointer;font-weight:600;color:var(--color-navy-strong);min-height:44px;display:flex;align-items:center}
.tbc-pp-more[open] summary{margin-bottom:var(--space-4)}
.tbc-pr-callout>div{flex:1 1 280px}
/* Phase 2 conversion components (DAS-680, #47) */
/* trust badges: white pill, navy line icon, bold label. Reusable on dark or light backgrounds. */
.trust-badges {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3);}
.trust-badges li {margin: 0; flex: none;}
.trust-badge {position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 6px 20px 6px 6px; border-radius: var(--radius-full); background: linear-gradient(135deg, #0b5fa8 0%, #1a8bd6 100%); border: 1px solid rgba(255, 255, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -8px rgba(29, 201, 252, .6); color: #ffffff; text-decoration: none; white-space: nowrap; overflow: hidden;}
.trust-badge::after {content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none;}
.tb-seal {flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffff; color: #04346c; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28), 0 2px 6px rgba(2, 31, 66, .35);}
.tb-seal svg {width: 20px; height: 20px; color: #04346c;}
.tb-text {display: flex; flex-direction: column; line-height: 1.15; text-align: left; white-space: nowrap;}
.tb-main {font-size: 15px; font-weight: 800; letter-spacing: -0.01em;}
.tb-sub {font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .88);}
a.trust-badge:hover {background: linear-gradient(135deg, #0d6bbb 0%, #22a0ee 100%); color: #ffffff;}
a.trust-badge:focus-visible {outline: 2px solid var(--color-accent-2); outline-offset: 3px;}
.tbc-foot-actions .trust-badges {flex: 1 1 100%; min-width: 0;}
@media (min-width: 992px) { .tbc-foot-actions .trust-badges {flex: 1 1 0; margin-right: auto;} }
.footer a.trust-badge, .footer a.trust-badge:hover, .footer a.trust-badge.is-active {display: inline-flex; padding: 6px 20px 6px 6px; color: #ffffff;}
@media (prefers-reduced-motion: no-preference) { .trust-badge { transition: transform .25s ease, box-shadow .25s ease; } @media (hover: hover) { a.trust-badge:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 24px -8px rgba(29, 201, 252, .75); } } }
/* home hero: an autoplay chat on a phone (decorative, aria-hidden; the caption carries the same content as text).
   The default styles are the FINAL state of the conversation. Motion only adds the loop, so reduced motion gets the whole thread, static. No JS needed. */
.tbc-hero-how {font-size: 15px; line-height: 1.6; color: var(--color-text-muted); max-width: 52ch;}
.tbc-hero-art {position: relative; isolation: isolate; display: grid; justify-items: center; gap: var(--space-8); padding-block: var(--space-2);}
.tbc-demo {--demo-t: 18s; position: relative; width: 280px; max-width: 100%; font-family: var(--font-sans);}
.tbc-demo-halo {position: absolute; z-index: -1; left: 50%; top: 50%; width: 165%; aspect-ratio: 1; margin: -82.5% 0 0 -82.5%; border-radius: var(--radius-full); background: radial-gradient(closest-side, rgba(29, 201, 252, .36), rgba(29, 201, 252, .13) 56%, rgba(29, 201, 252, 0) 100%); pointer-events: none;}
.tbc-demo-phone {position: relative; aspect-ratio: 292 / 600; padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #0a3a75, #04346c 45%, #06182f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 34px 60px -20px rgba(4, 52, 108, .5), 0 14px 26px -14px rgba(6, 24, 47, .4);}
.tbc-demo-phone::before, .tbc-demo-phone::after {content: ""; position: absolute; width: 3px; border-radius: 2px; background: #06264d;}
.tbc-demo-phone::before {left: -3px; top: 22%; height: 9%; box-shadow: 0 64px 0 #06264d;}
.tbc-demo-phone::after {right: -3px; top: 28%; height: 13%;}
.tbc-demo-screen {position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 37px; background: #ffffff; color: #06182f; text-align: left;}
.tbc-demo-island {position: absolute; z-index: 2; top: 9px; left: 50%; width: 82px; height: 23px; margin-left: -41px; border-radius: var(--radius-full); background: #06182f;}
.tbc-demo-status {flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 4px 22px 0 26px; font-size: 12px; line-height: 16px; font-weight: 700;}
.tbc-demo-status span {display: inline-flex; align-items: center; gap: 5px;}
.tbc-demo-head {flex: none; display: flex; align-items: center; gap: 9px; padding: 6px 14px 10px 10px; border-bottom: 1px solid var(--color-divider);}
.tbc-demo-head > svg {flex: none; color: var(--color-accent-2-600);}
.tbc-demo-av {flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-ink-deep); color: var(--color-accent-2);}
.tbc-demo-who {display: grid; min-width: 0;}
.tbc-demo-who b {font-size: 13px; line-height: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tbc-demo-who small {font-size: 11px; line-height: 14px; color: var(--color-text-muted);}
/* The thread grows from the top; once it is taller than the screen it overflows upward, like a chat scrolled to the newest message. */
.tbc-demo-msgs {flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0 12px; background: #f4f8fc; -webkit-mask-image: linear-gradient(#0000, #000 14px); mask-image: linear-gradient(#0000, #000 14px);}
.tbc-demo-thread {flex: 1 0 auto; display: flex; flex-direction: column; padding-block: 10px 12px;}
.tbc-demo-day {align-self: center; font-size: 10px; line-height: 14px; font-weight: 600; color: var(--color-text-muted);}
.tbc-demo-row {display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr;}
.tbc-demo-row > span {display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 0;}
.tbc-demo-row.is-out > span {align-items: flex-end;}
.tbc-demo-row.is-typing {display: block; height: 0; opacity: 0;}
.tbc-demo-row.is-typing > span {overflow: hidden;}
.tbc-demo-bubble {max-width: 84%; margin-top: 10px; padding: 10px 13px; border-radius: 18px 18px 18px 5px; background: #ffffff; box-shadow: 0 1px 2px rgba(4, 52, 108, .1), 0 0 0 1px rgba(4, 52, 108, .05); font-size: 14px; line-height: 20px; font-weight: 500; transform-origin: 0 100%;}
.tbc-demo-row.is-out .tbc-demo-bubble {border-radius: 18px 18px 5px 18px; background: linear-gradient(160deg, #0d4a94, #04346c); box-shadow: 0 4px 10px -4px rgba(4, 52, 108, .5); color: #ffffff; font-weight: 600; transform-origin: 100% 100%;}
.tbc-demo-bubble.has-icon {display: flex; align-items: flex-start; gap: 8px;}
.tbc-demo-bubble i {flex: none; width: 22px; height: 22px; margin-top: -2px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-accent-2); color: var(--color-on-accent-2);}
.tbc-demo-dots {display: flex; align-items: center; gap: 4px; height: 20px;}
.tbc-demo-dots b {width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; opacity: .45;}
.tbc-demo-meta {display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: 10px; line-height: 14px; font-weight: 600; color: var(--color-text-muted);}
.tbc-demo-meta svg {color: var(--color-accent-2-600);}
.tbc-demo-tag {display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 3px 9px 3px 5px; border-radius: var(--radius-full); background: var(--color-accent-2-200); color: #04346c; font-size: 10px; line-height: 14px; font-weight: 700; white-space: nowrap; transform-origin: 0 100%;}
.tbc-demo-input {flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px 12px; background: #ffffff; border-top: 1px solid var(--color-divider);}
.tbc-demo-input > span {flex: 1; min-width: 0; height: 34px; padding: 0 14px; border-radius: var(--radius-full); border: 1px solid #04346c26; font-size: 12px; line-height: 32px; color: var(--color-text-muted);}
.tbc-demo-input > i {flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-accent-2); color: var(--color-on-accent-2);}
.tbc-demo-home {flex: none; width: 96px; height: 4px; margin: 3px auto 7px; border-radius: 2px; background: #06182f;}
.tbc-demo-notif {position: absolute; z-index: 3; top: 38px; left: 8px; right: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px; background: #ffffff; box-shadow: 0 14px 30px -8px rgba(6, 24, 47, .4), 0 0 0 1px rgba(4, 52, 108, .08); opacity: 0; visibility: hidden; pointer-events: none;}
.tbc-demo-notif i {flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--color-ink-deep); color: var(--color-accent-2);}
.tbc-demo-notif span {display: grid; min-width: 0;}
.tbc-demo-notif b {font-size: 12px; line-height: 16px; font-weight: 700;}
.tbc-demo-notif small {font-size: 11px; line-height: 15px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tbc-demo-chip {position: absolute; z-index: 4; pointer-events: none;}
.tbc-demo-chip > span {display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 7px; border-radius: var(--radius-full); background: #ffffff; border: 1px solid var(--color-divider); box-shadow: 0 12px 26px -10px rgba(4, 52, 108, .45), 0 2px 6px rgba(4, 52, 108, .1); color: #04346c; font-size: 13px; line-height: 18px; font-weight: 700; white-space: nowrap;}
.tbc-demo-chip i {flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--color-accent-2); color: var(--color-on-accent-2);}
.tbc-demo-chip.c1 {top: 19%; left: -34px;}
.tbc-demo-chip.c2 {bottom: -4.5%; left: -30px;}
.tbc-demo-chip.c3 {top: -3.5%; right: -30px;}
.tbc-demo-cap {margin: 0; font-size: 12px; line-height: 16px; color: var(--color-text-muted); text-align: center;}
@media (min-width: 768px) { .tbc-demo {width: 292px;} .tbc-demo-chip.c1 {left: -96px;} .tbc-demo-chip.c2 {top: 44%; bottom: auto; left: auto; right: -100px;} .tbc-demo-chip.c3 {top: auto; bottom: 10%; right: auto; left: -104px;} }
@media (min-width: 992px) and (max-width: 1199px) { .tbc-demo-chip.c1 {left: -56px;} .tbc-demo-chip.c2 {right: -44px;} .tbc-demo-chip.c3 {left: -60px;} }
.tbc-demo.is-paused, .tbc-demo.is-paused * {animation-play-state: paused !important;}
@media (prefers-reduced-motion: no-preference) {
  .tbc-demo-phone {animation: tbc-demo-float 6s ease-in-out infinite alternate;}
  .tbc-demo-halo {animation: tbc-demo-glow 5s ease-in-out infinite alternate;}
  .tbc-demo-chip > span {animation: tbc-demo-drift 5s ease-in-out infinite alternate;}
  .tbc-demo-chip.c2 > span {animation-duration: 6.4s; animation-direction: alternate-reverse;}
  .tbc-demo-chip.c3 > span {animation-duration: 5.6s; animation-delay: -2s;}
  .tbc-demo-dots b {animation: tbc-demo-dot 1.1s ease-in-out infinite;}
  .tbc-demo-dots b:nth-child(2) {animation-delay: .15s;}
  .tbc-demo-dots b:nth-child(3) {animation-delay: .3s;}
  /* Compositor only (transform, opacity). Rows keep their final layout; tbc-demo-scroll moves the thread instead of growing rows. Its real keyframes are measured and injected by the demo script. The typing bubbles are unveiled by a clip (t1c..t3c) that slides down while its content (t1b..t3b) slides back up, on a quadratic ease-in, like the grid row they replace. */
  html.js .tbc-demo-msgs {justify-content: flex-start;}
  .tbc-demo-thread {animation: tbc-demo-thread var(--demo-t) linear infinite, tbc-demo-scroll var(--demo-t) linear infinite;}
  .tbc-demo-notif {visibility: visible; animation: tbc-demo-notif var(--demo-t) linear infinite;}
  .tbc-demo .b1 {animation: tbc-demo-b1 var(--demo-t) linear infinite;}
  .tbc-demo .m1 {animation: tbc-demo-m1 var(--demo-t) linear infinite;}
  .tbc-demo .t1 {animation: tbc-demo-t1 var(--demo-t) linear infinite;}
  .tbc-demo .t1 > span {animation: tbc-demo-t1c var(--demo-t) linear infinite;}
  .tbc-demo .t1 .tbc-demo-bubble {animation: tbc-demo-t1b var(--demo-t) linear infinite;}
  .tbc-demo .b2 {animation: tbc-demo-b2 var(--demo-t) linear infinite;}
  .tbc-demo .b3 {animation: tbc-demo-b3 var(--demo-t) linear infinite;}
  .tbc-demo .t2 {animation: tbc-demo-t2 var(--demo-t) linear infinite;}
  .tbc-demo .t2 > span {animation: tbc-demo-t2c var(--demo-t) linear infinite;}
  .tbc-demo .t2 .tbc-demo-bubble {animation: tbc-demo-t2b var(--demo-t) linear infinite;}
  .tbc-demo .b4 {animation: tbc-demo-b4 var(--demo-t) linear infinite;}
  .tbc-demo .m4 {animation: tbc-demo-m4 var(--demo-t) linear infinite;}
  .tbc-demo .t3 {animation: tbc-demo-t3 var(--demo-t) linear infinite;}
  .tbc-demo .t3 > span {animation: tbc-demo-t3c var(--demo-t) linear infinite;}
  .tbc-demo .t3 .tbc-demo-bubble {animation: tbc-demo-t3b var(--demo-t) linear infinite;}
  .tbc-demo .g5 {animation: tbc-demo-g5 var(--demo-t) linear infinite;}
  .tbc-demo .b5 {animation: tbc-demo-b5 var(--demo-t) linear infinite;}
  .tbc-demo .c1 {animation: tbc-demo-c1 var(--demo-t) linear infinite;}
  .tbc-demo .c2 {animation: tbc-demo-c2 var(--demo-t) linear infinite;}
  .tbc-demo .c3 {animation: tbc-demo-c3 var(--demo-t) linear infinite;}
  @keyframes tbc-demo-float {from {transform: translateY(5px);} to {transform: translateY(-7px);}}
  @keyframes tbc-demo-glow {from {transform: scale(.94); opacity: .8;} to {transform: scale(1.06); opacity: 1;}}
  @keyframes tbc-demo-drift {from {transform: translate(0, 4px);} to {transform: translate(5px, -6px);}}
  @keyframes tbc-demo-dot {0%, 60%, 100% {transform: none; opacity: .4;} 30% {transform: translateY(-4px); opacity: 1;}}
  @keyframes tbc-demo-thread {0% {opacity: 0;} 2%, 94% {opacity: 1;} 98%, 100% {opacity: 0;}}
  @keyframes tbc-demo-scroll {from, to {transform: none;}}
  @keyframes tbc-demo-notif {0%, 31% {opacity: 0; transform: translateY(-130%); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 34.5%, 42% {opacity: 1; transform: none;} 45%, 100% {opacity: 0; transform: translateY(-130%);}}
  @keyframes tbc-demo-b1 {0%, 8% {opacity: 0; transform: translateY(12px) scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 11%, 100% {opacity: 1; transform: none;}}
  @keyframes tbc-demo-m1 {0%, 12% {opacity: 0;} 13.5%, 100% {opacity: 1;}}
  @keyframes tbc-demo-t1 {0%, 15% {opacity: 0;} 16.5%, 22.95% {opacity: 1;} 23%, 100% {opacity: 0;}}
  @keyframes tbc-demo-t1c {0%, 15% {transform: translateY(-100%); animation-timing-function: cubic-bezier(.3333, 0, .6667, .3333);} 16.5%, 22.95% {transform: none;} 23%, 100% {transform: translateY(-100%);}}
  @keyframes tbc-demo-t1b {0%, 15% {transform: translateY(calc(100% + 10px)); animation-timing-function: cubic-bezier(.3333, 0, .6667, .3333);} 16.5%, 22.95% {transform: none;} 23%, 100% {transform: translateY(calc(100% + 10px));}}
  @keyframes tbc-demo-b2 {0%, 23% {opacity: 0; transform: translateY(12px) scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 26%, 100% {opacity: 1; transform: none;}}
  @keyframes tbc-demo-b3 {0%, 37% {opacity: 0; transform: translateY(12px) scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 40%, 100% {opacity: 1; transform: none;}}
  @keyframes tbc-demo-t2 {0%, 48% {opacity: 0;} 49.5%, 55.95% {opacity: 1;} 56%, 100% {opacity: 0;}}
  @keyframes tbc-demo-t2c {0%, 48% {transform: translateY(-100%); animation-timing-function: cubic-bezier(.3333, 0, .6667, .3333);} 49.5%, 55.95% {transform: none;} 56%, 100% {transform: translateY(-100%);}}
  @keyframes tbc-demo-t2b {0%, 48% {transform: translateY(calc(100% + 10px)); animation-timing-function: cubic-bezier(.3333, 0, .6667, .3333);} 49.5%, 55.95% {transform: none;} 56%, 100% {transform: translateY(calc(100% + 10px));}}
  @keyframes tbc-demo-b4 {0%, 56% {opacity: 0; transform: translateY(12px) scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 59%, 100% {opacity: 1; transform: none;}}
  @keyframes tbc-demo-m4 {0%, 60.5% {opacity: 0;} 62.0%, 100% {opacity: 1;}}
  @keyframes tbc-demo-t3 {0%, 65% {opacity: 0;} 66.5%, 73.95% {opacity: 1;} 74%, 100% {opacity: 0;}}
  @keyframes tbc-demo-t3c {0%, 65% {transform: translateY(-100%); animation-timing-function: cubic-bezier(.3333, 0, .6667, .3333);} 66.5%, 73.95% {transform: none;} 74%, 100% {transform: translateY(-100%);}}
  @keyframes tbc-demo-t3b {0%, 65% {transform: translateY(calc(100% + 10px)); animation-timing-function: cubic-bezier(.3333, 0, .6667, .3333);} 66.5%, 73.95% {transform: none;} 74%, 100% {transform: translateY(calc(100% + 10px));}}
  @keyframes tbc-demo-g5 {0%, 74% {opacity: 0; transform: translateY(12px) scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 77%, 100% {opacity: 1; transform: none;}}
  @keyframes tbc-demo-b5 {0%, 75.5% {opacity: 0; transform: translateY(12px) scale(.7); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 78.5%, 100% {opacity: 1; transform: none;}}
  @keyframes tbc-demo-c1 {0%, 3% {opacity: 0; transform: translateY(10px) scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 5.5%, 27% {opacity: 1; transform: none;} 30%, 100% {opacity: 0; transform: translateY(-6px) scale(.9);}}
  @keyframes tbc-demo-c2 {0%, 47% {opacity: 0; transform: translateY(10px) scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 49.5%, 70% {opacity: 1; transform: none;} 73%, 100% {opacity: 0; transform: translateY(-6px) scale(.9);}}
  @keyframes tbc-demo-c3 {0%, 64.5% {opacity: 0; transform: translateY(10px) scale(.6); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);} 67.0%, 93% {opacity: 1; transform: none;} 96.5%, 100% {opacity: 0; transform: translateY(-6px) scale(.9);}}
}
/* industry tabs (home). Without JS every panel is visible and the tablist is hidden. */
.tbc-tablist {display: none; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6);}
html.js .tbc-tablist {display: flex;}
.tbc-tab {appearance: none; font: inherit; font-size: 14px; line-height: 20px; font-weight: 700; min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-border-control); background: var(--color-surface-raised); color: var(--color-text); cursor: pointer; transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;}
.tbc-tab:hover {border-color: var(--color-navy);}
.tbc-tab[aria-selected="true"] {background: var(--color-ink-deep); border-color: var(--color-ink-deep); color: #ffffff;}
.tbc-tab:focus-visible, .tbc-tabpanel:focus-visible {outline: 2px solid var(--color-focus); outline-offset: 2px;}
.tbc-tabpanel {display: grid; gap: var(--space-6); align-items: center; padding: var(--space-6); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-surface-raised);}
.tbc-tabpanel + .tbc-tabpanel {margin-top: var(--space-4);}
.tbc-tabpanel-title {margin: 0; font-size: 20px; line-height: 1.3;}
html.js .tbc-tabpanel-title {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;}
.tbc-sample {margin: 0; display: grid; gap: var(--space-2); justify-items: start;}
.tbc-sample figcaption {font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);}
.tbc-sample blockquote {margin: 0; max-width: 34ch; padding: var(--space-3) var(--space-4); border-radius: 18px; border-bottom-left-radius: 4px; background: var(--color-surface); color: var(--color-text); font-size: 16px; line-height: 1.5; font-weight: 500;}
.tbc-tabpanel-body {display: grid; gap: var(--space-4); justify-items: start;}
.tbc-tabpanel-body p {margin: 0; color: var(--color-text-muted); max-width: 44ch;}
@media (min-width: 768px) { .tbc-tabpanel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-8); } .tbc-tabpanel-title { grid-column: 1 / -1; } }
/* testimonial filters: chips reuse the tab pill. Hidden without JS, where every quote stays visible. */
.tbc-qfilter {display: none; flex-wrap: wrap; gap: var(--space-2);}
html.js .tbc-qfilter {display: flex;}
[data-page="testimonials"] .tbc-qfilter {margin-bottom: var(--space-6);}
.tbc-tab[aria-pressed="true"] {background: var(--color-ink-deep); border-color: var(--color-ink-deep); color: #ffffff;}
.tbc-count {display: inline-block; min-width: 20px; margin-left: 2px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: 12px; line-height: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;}
.tbc-count:empty {display: none;}
/* Jotform embeds (signup, account setup, PayByText). Height follows the form via postMessage. */
.tbc-jotform {padding: var(--space-2); overflow: hidden;}
.tbc-jotform iframe {display: block; width: 100%; min-width: 100%; border: 0;}
.tbc-pdf {padding: 0; overflow: hidden;}
.tbc-pdf iframe {display: block; width: 100%; height: min(80vh, 900px); border: 0;}
.tbc-vgrid {display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));}
.tbc-calendly iframe {min-width: 320px;}

/* Scroll reveal. Cards, stats and quotes fade in as they scroll into view and reverse on the way back. */
@keyframes tbc-rv {from {opacity: 0; translate: 0 32px;} to {opacity: 1; translate: 0 0;}}
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  [data-page] :is(.card, .stat, .tbc-quote):not(.tbc-pr-quote) {animation: tbc-rv linear both; animation-timeline: view(block); animation-range: entry 0% cover 40%;}
  /* home: headings, copy blocks and compare cards below the hero fade in the same way */
  [data-page="home"] :is(.sec-head, .tbc-open-copy, .tbc-open-card, .tbc-whytbc > :not(.sec-head)) {animation: tbc-rv linear both; animation-timeline: view(block); animation-range: entry 0% cover 40%;}
} }
/* home hero: the text column fades up once on load, 90ms apart */
@keyframes tbc-hero-in {from {opacity: 0; translate: 0 20px;} to {opacity: 1; translate: 0 0;}}
@media (prefers-reduced-motion: no-preference) {
  .tbc-hero-grid > div:first-child > * {animation: tbc-hero-in .6s cubic-bezier(.2, .7, .2, 1) both;}
  .tbc-hero-grid > div:first-child > :nth-child(2) {animation-delay: .09s;}
  .tbc-hero-grid > div:first-child > :nth-child(3) {animation-delay: .18s;}
  .tbc-hero-grid > div:first-child > :nth-child(4) {animation-delay: .27s;}
  .tbc-hero-grid > div:first-child > :nth-child(5) {animation-delay: .36s;}
}