/* ============================================================================
 * vt-overhaul.css — readability, wayfinding and mobile layer
 * ----------------------------------------------------------------------------
 * Loaded LAST in _header.php, after css/styles.css and css/main.css, so plain
 * single-class selectors here win on source order without needing !important.
 *
 * WHY THIS FILE EXISTS SEPARATELY rather than being merged into main.css:
 * main.css is not in the working copy this was written against. Keeping the new
 * layer in its own file means nothing existing is edited blind, and reverting
 * the whole overhaul is one <link> deletion. Merge it down once it has settled.
 *
 * Sits in the site root next to custom.min.css rather than in css/, because the
 * working copy has no css/ directory — creating one holding a single file
 * invites a sync that mistakes it for the whole directory.
 *
 * TWO RULES FOR EDITING THIS FILE
 *  1. There is no !important in this file, and adding one is a bug report about
 *     the markup rather than a fix. An earlier revision carried one block of it
 *     to defeat inline font-size attributes while those were being extracted
 *     from the templates; the extraction finished on 2026-09-05 and the block
 *     went with it. If a rule here will not apply, find the inline style
 *     winning against it and move that into a class instead.
 *  2. Nothing here may hide text from a crawler. The collapsing regions ship
 *     EXPANDED from PHP and are collapsed by vt-page.js after load, so the full
 *     text is in the served HTML either way; no rule in this file may be the
 *     only thing making content reachable.
 * ========================================================================== */
/* ── 1. Type scale ──────────────────────────────────────────────────────────
   Bootstrap 4.0.0 predates responsive font sizing: .display-4 is a flat 3.5rem
   at every viewport, which is ~56px on a 375px phone. These steps are fluid
   between a phone and a large laptop. Use the tokens, not raw rem values. */
:root{
  --vt-step--1: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);   /* fine print   */
  --vt-step-0 : clamp(1rem,     0.97rem + 0.16vw, 1.0625rem); /* body         */
  --vt-step-1 : clamp(1.06rem,  1.01rem + 0.26vw, 1.1875rem); /* lede         */
  --vt-step-2 : clamp(1.2rem,   1.11rem + 0.44vw, 1.5rem);    /* card heading */
  --vt-step-3 : clamp(1.45rem,  1.24rem + 1.05vw, 2.125rem);  /* section h2   */
  --vt-step-4 : clamp(1.95rem,  1.42rem + 2.65vw, 3.5rem);    /* hero h1      */
  --vt-measure: 68ch;        /* running text                                  */
  --vt-measure-tight: 60ch;  /* leades and standfirsts                        */
}
/* ── 2. Readability baseline ────────────────────────────────────────────────
   The single highest-leverage change in the overhaul. Card body copy, FAQ
   answers and workflow steps were set at 0.85–0.9rem (13.6–14.4px), which is
   what made a 1,000-word vertical page read as a wall and is a recurring
   Search Console mobile-usability flag. 16px on phones, easing to 15px only
   above md where the line is shorter and the screen further away. */
body{
  font-size: var(--vt-step-0);
  line-height: 1.6;
}
/* Replaces inline font-size:0.85rem / 0.9rem on card and list copy. */
.vt-body-sm{
  font-size: var(--vt-step-0);
  line-height: 1.58;
}
@media (min-width: 768px){
  .vt-body-sm{ font-size: 0.9375rem; }   /* 15px */
}
/* Replaces inline font-size:0.75–0.82rem on genuinely secondary text —
   reassurance strips, timestamps, counts. Never used for a sentence. */
.vt-body-xs{
  font-size: var(--vt-step--1);
  line-height: 1.5;
}
/* Section intro paragraph. Replaces .lead + inline font-size:1.05rem. */
.vt-lede{
  font-size: var(--vt-step-1);
  line-height: 1.55;
  max-width: var(--vt-measure-tight);
}
/* Caps line length. Bootstrap containers give 100+ character lines on a
   laptop; anything past ~75 costs the reader the start of the next line. */
.vt-measure{ max-width: var(--vt-measure); }
.vt-measure-tight{ max-width: var(--vt-measure-tight); }
.mx-auto.vt-measure,
.mx-auto.vt-measure-tight{ margin-left: auto; margin-right: auto; }
/* Headings: fluid, and allowed to break sensibly rather than leaving one word
   stranded on the last line. */
.display-4{
  font-size: var(--vt-step-4);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.section-title{ text-wrap: balance; }
h1, h2, h3{ text-wrap: balance; }
/* Bootstrap .lead is 1.25rem/300-weight; at 300 on a phone it is thin and
   grey-looking. Slightly heavier and fluid. */
.lead{
  font-size: var(--vt-step-1);
  font-weight: 400;
  line-height: 1.55;
}
/* ── 3. Section rhythm ──────────────────────────────────────────────────────
   Nearly every section carried py-5, so a 3-card section and a 24-bullet
   section got identical breathing room and the page read as one undifferen-
   tiated column. .vt-section-dense earns more air; .vt-section-light less. */
.vt-section-dense{ padding-top: 4.5rem; padding-bottom: 4.5rem; }
.vt-section-light{ padding-top: 2.75rem; padding-bottom: 2.75rem; }
@media (max-width: 767.98px){
  .vt-section-dense{ padding-top: 3rem; padding-bottom: 3rem; }
  .vt-section-light{ padding-top: 2rem; padding-bottom: 2rem; }
}
/* ── 4. Breadcrumbs ─────────────────────────────────────────────────────────
   Paired with BreadcrumbList JSON-LD in includes/breadcrumbs.php. Visible
   trail orients a visitor arriving cold from a SERP; the schema is what makes
   Google draw the labelled path instead of the raw /customer/... URL. */
.vt-crumbs{
  font-size: var(--vt-step--1);
  /* Sits above the hero, on the page ground, so it needs its own clearance
     from the fixed navbar rather than borrowing the hero's padding. */
  margin: 1.35rem 0 0.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.vt-crumbs li{ display: inline-flex; align-items: center; gap: 0.5rem; }
.vt-crumbs li + li::before{
  content: "/";
  color: var(--v-text, #6c757d);
  opacity: 0.45;
}
.vt-crumbs a{ color: var(--v-primary, #499ACA); text-decoration: none; }
.vt-crumbs a:hover{ text-decoration: underline; }
.vt-crumbs [aria-current="page"]{ color: #6c757d; }
/* ── 5. Sticky section nav ──────────────────────────────────────────────────
   The cure for "overwhelming" that costs no words: a ten-screen scroll becomes
   a menu. Sits under the fixed navbar. Scrolls horizontally on a phone rather
   than wrapping to three rows and eating the viewport. */
.vt-secnav{
  position: sticky;
  top: 56px;                       /* height of .navbar.fixed-top */
  z-index: 1020;                   /* below the navbar's 1030 */
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(1.6) blur(8px);
  -webkit-backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.vt-secnav-inner{
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0;
}
.vt-secnav-inner::-webkit-scrollbar{ display: none; }
.vt-secnav a{
  flex: 0 0 auto;
  padding: 0.4rem 0.85rem;
  border-radius: 50px;
  font-size: var(--vt-step--1);
  font-weight: 600;
  color: #55606b;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.vt-secnav a:hover{ color: var(--v-primary, #499ACA); background: rgba(73,154,202,0.08); }
.vt-secnav a:focus-visible{ outline: 2px solid var(--v-primary, #499ACA); outline-offset: 2px; }
.vt-secnav a.is-current{
  color: var(--v-primary, #499ACA);
  background: rgba(73,154,202,0.10);
  border-color: rgba(73,154,202,0.25);
}
/* Anchored sections must clear both the navbar and the section nav. */
.vt-anchor{ scroll-margin-top: 108px; }
/* ── 6. Sticky mobile CTA ───────────────────────────────────────────────────
   On a ten-screen page the only conversion paths were the hero and the footer.
   Revealed once the hero leaves the viewport (toggled by vt-page.js), phones
   only — desktop keeps the nav CTA in view at all times already. */
.vt-mobile-cta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1035;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 -2px 14px rgba(0,0,0,0.07);
  transform: translateY(100%);
  transition: transform 0.22s ease;
}
.vt-mobile-cta.is-visible{ transform: translateY(0); }
.vt-mobile-cta .vt-mobile-cta-t{
  font-size: var(--vt-step--1);
  line-height: 1.25;
  color: #55606b;
  margin: 0;
}
.vt-mobile-cta .vt-mobile-cta-t b{ display: block; color: #1d2b36; font-size: 0.95rem; }
.vt-mobile-cta .btn-cta{ flex: 0 0 auto; }
@media (max-width: 767.98px){
  .vt-mobile-cta{ display: flex; }
  /* Keep the footer clear of the bar so the last links stay tappable. */
  body.has-vt-mobile-cta{ padding-bottom: 4.25rem; }
}
@media (prefers-reduced-motion: reduce){
  .vt-mobile-cta{ transition: none; }
}
/* ── 7. FAQ accordion ───────────────────────────────────────────────────────
   The landing and vertical templates rendered every Q&A expanded — seven open
   answers, ~700 words, immediately before the closing CTA. Collapsed here via
   Bootstrap's own collapse plugin, which is a CSS/height toggle: the full
   answer text ships in the initial HTML and is indexed normally. Nothing is
   fetched on click, which is the distinction that matters for SEO. */
.vt-faq-item{ border-bottom: 1px solid rgba(0,0,0,0.09); }
.vt-faq-item:first-child{ border-top: 1px solid rgba(0,0,0,0.09); }
.vt-faq-q{
  display: flex;
  width: 100%;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1d2b36;
  cursor: pointer;
}
.vt-faq-q:hover{ color: var(--v-primary, #499ACA); }
.vt-faq-q:focus-visible{ outline: 2px solid var(--v-primary, #499ACA); outline-offset: 2px; }
.vt-faq-q .vt-faq-mark{
  flex: 0 0 auto;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.28rem;
  position: relative;
}
.vt-faq-q .vt-faq-mark::before,
.vt-faq-q .vt-faq-mark::after{
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.vt-faq-q .vt-faq-mark::before{ top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.vt-faq-q .vt-faq-mark::after { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.vt-faq-q[aria-expanded="true"] .vt-faq-mark::after{ transform: scaleY(0); opacity: 0; }
.vt-faq-a{ padding: 0 0 1.3rem; }
.vt-faq-a p{ margin: 0; max-width: var(--vt-measure); }
@media (prefers-reduced-motion: reduce){
  .vt-faq-q .vt-faq-mark::before,
  .vt-faq-q .vt-faq-mark::after{ transition: none; }
}
/* ── 8. Capability card disclosure ──────────────────────────────────────────
   Six cards of four bullets is 24 checkmarked lines in one section. The first
   two show; the rest are collapsed behind a toggle. Same rule as the FAQ — the
   bullets are in the HTML, the toggle only changes their height. */
.vt-cap-rest{ margin: 0; padding: 0; list-style: none; }
.vt-cap-more{
  background: none;
  border: 0;
  padding: 0.35rem 0 0;
  font: inherit;
  font-size: var(--vt-step--1);
  font-weight: 600;
  color: var(--v-primary, #499ACA);
  cursor: pointer;
}
.vt-cap-more:focus-visible{ outline: 2px solid var(--v-primary, #499ACA); outline-offset: 2px; }
/* Both collapsing regions above ship EXPANDED in the HTML and are collapsed by
   vt-page.js on load. That ordering is deliberate: with no JavaScript the page
   behaves exactly as it does today rather than losing its content, and a
   crawler that does not run scripts still sees every answer and bullet. The
   toggle buttons themselves are injected by the same script, so a no-JS visitor
   is never shown a control that cannot work. */
/* ── 9. Comparison tables on a phone ────────────────────────────────────────
   .table-responsive scrolls the whole table sideways, taking the row label —
   the only thing that gives a checkmark meaning — off screen with it. Pin the
   label column so the reader always knows what they are reading. */
.vt-table-pin th[scope="row"],
.vt-table-pin tbody th{
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 rgba(0,0,0,0.08);
}
.vt-table-pin.table-striped tbody tr:nth-of-type(odd) th[scope="row"]{
  background: #f6f7f9;    /* match the striping, or the pin looks detached */
}
@media (max-width: 575.98px){
  .vt-table-pin th[scope="row"],
  .vt-table-pin tbody th{
    max-width: 11rem;
    font-size: var(--vt-step--1);
  }
}
/* ── 10. Assorted ───────────────────────────────────────────────────────────*/
/* ── Button box model ───────────────────────────────────────────────────────
   BUG FIX, found on /compare at 375px: .btn-cta and .btn-ghost compute to
   `display:inline`. An inline box cannot contain its own padding and border
   across a line break, so as soon as a label wraps — "See All Features" is the
   one that does — the text spills outside the pill and the border draws through
   it. Bootstrap's own .btn is inline-block for exactly this reason.
   Fixed here rather than in css/main.css because that file was not in the
   working copy; fold it down when the two are merged. text-align:center matters
   for the wrapped case: without it the second line sits left inside a centred
   pill. */
.btn-cta,
.btn-ghost,
.btn-cta-invert,
.btn-ghost-invert{
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}
/* The sticky bar lays its button out with flex, so it opts back out. */
.vt-mobile-cta .btn-cta{ display: inline-flex; align-items: center; }
/* Replaces inline background:#fff on alternating sections. */
.vt-surface{ background: #fff; }
/* Was inline `opacity:0.8` paired with a font-size, mostly on copy sitting on a
   coloured band. Kept as opacity rather than a fixed grey so it still works on
   whichever background it lands on. */
.vt-dim{ opacity: 0.8; }
/* The numbered circle in the workflow walkthrough. Was a five-property inline
   style repeated on every step; it is layout, not copy, so it never belonged
   in the markup. */
.vt-step-badge{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
/* Images added in the screenshot phase: reserve the box so adding them cannot
   move the text under the reader's thumb (CLS). Every <img> still needs its
   own width/height attributes — this only handles the scaling. */
.vt-shot{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--v-radius-lg, 12px);
  border: 1px solid rgba(0,0,0,0.08);
}
/* The hero art was in a .nomobile column, so phones — most of the traffic —
   got a text-only hero. Shown again, but capped so it cannot push the CTA
   below the fold on a small screen. */
@media (max-width: 991.98px){
  .vt-hero-media{ max-height: 44vw; object-fit: cover; object-position: top center; }
}
/* ── 11. Micro-labels ───────────────────────────────────────────────────────
   The uppercase category/eyebrow labels that were inline at 0.75rem, 0.78rem
   and 0.8rem with their own letter-spacing, on four different pages, at three
   different sizes for the same job.
   Uppercase text tolerates being small in a way sentence text does not — it has
   no descenders and a flat rhythm — so this stays below the body baseline
   deliberately. But 12px was under it far enough to fail a squint test on a
   phone, so the floor is 13px and the tracking is what does the work.        */
.vt-label{
  font-size: 0.8125rem;              /* 13px */
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
/* The "View full feature comparison" disclosure on the pricing table. It is a
   control, not prose, so it keeps a smaller size — but it was also the only
   thing on that page suppressing its own underline inline. */
.vt-link-quiet{ text-decoration: none; }
.vt-link-quiet:hover{ text-decoration: underline; }
/* ── The temporary !important block that lived here is gone ─────────────────
   It existed to beat inline font-size declarations on copy inside .feature-box
   and .vt-faq-a while the extraction was in progress. Removed 2026-09-05: no
   <p> or <li> anywhere in customer/ still carries an inline style that sets a
   size, so it had stopped matching anything. Re-check before reintroducing one:
     grep -rn '<p [^>]*style=\|<li [^>]*style=' --include=*.php customer/
   The inline styles that remain are icon glyph sizes and one rich-text
   container — none of them body copy, none of them a readability problem. */