/* =============================================================================
   index2.css -- page-specific styles for /index2.html (TEST PAGE, 2026-09-18)

   Built from the owner's mockup "ChatGPT Image Sep 18, 2026, 07_20_39 AM.png".
   This file is loaded ONLY by index2.html. It never touches the live homepage.
   It reuses the sitewide tokens from styles.css (--blue, --green, --dark, ...)
   and adds nothing global: every selector is namespaced under .i2- so the
   shared nav, footer and .btn styles keep their sitewide behaviour.

   Photographs: owner-supplied 2026-09-18, converted to WebP at two widths each
   (index2-hero-{900,1999}.webp, index2-results-{900,1536}.webp). Both are
   decorative -- alt="" and aria-hidden -- and neither depicts the practice owners
   named in the results band.
   ============================================================================= */

/* ---------- shared bits ---------- */

.i2-eyebrow {
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 18px;
}

/* Green RING with a green tick and a clear centre, as drawn in the mockup -- not a
   solid green disc with a white tick. */
.i2-check {
    display: inline-block;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 50%;
    border: 2px solid var(--green);
    background: transparent;
    position: relative;
    margin-top: 2px;
}
.i2-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid var(--green);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* the "A Biller" column: the same ring treatment in grey, for visual consistency */
.i2-x {
    display: inline-block;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: transparent;
    position: relative;
    margin-top: 2px;
}
.i2-x::before, .i2-x::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 7.5px;
    width: 9px;
    height: 2px;
    background: var(--gray-500);
}
.i2-x::before { transform: rotate(45deg); }
.i2-x::after  { transform: rotate(-45deg); }

/* Source notes sit beside every figure (owner rule, 2026-09-17). */
.i2-source {
    display: block;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--gray-500);
    margin-top: 10px;
}
.i2-source a { color: inherit; text-decoration: underline; }

/* ---------- 1. hero ---------- */

/* The nav is fixed and this page uses .navbar-solid (logo visible immediately,
   solid background), so the hero has to clear it rather than sit under it.

   Mockup layout (desktop): the copy sits on white in the left half; the photograph
   bleeds off the right edge of the viewport, full height of the section; the promise
   card floats over the photo's lower-right. Below 1024px this collapses to the
   stacked version further down. */
.i2-hero {
    position: relative;
    overflow: hidden;
    background: var(--white);
    padding: 132px 0 64px;
    border-bottom: 1px solid var(--gray-100);
}
.i2-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
}


.i2-hero h1 {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin-bottom: 18px;
}
.i2-hero h1 .i2-hl { color: var(--blue); }
.i2-hero-sub {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
}
.i2-hero-lead {
    font-size: 1.05rem;
    max-width: 30em;
    margin-bottom: 30px;
}
.i2-hero-cta { margin-bottom: 12px; }
/* The hero now carries a secondary text link beside the primary button (brief S11: a
   "See how we help" path for a visitor who is not ready to start). It is ABOVE THE FOLD, so
   the same two rules are mirrored in index.html's critical block: home.css loads async and a
   rule that lived only here would render unstyled until that load finished. */
.i2-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.i2-hero-second { font-size: 1rem; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.i2-hero-second:hover { color: var(--blue-dark); }
/* gray-700, not gray-500: the hero copy now sits on a faint wash of the photograph
   rather than flat white, and at gray-500 this line measured 3.87:1 against the
   darkest pixel behind it -- below AA for text this size. */
.i2-hero-micro {
    font-size: .88rem;
    color: var(--gray-700);
}

/* right-hand column: photo slot with the quote and the promise card over it */
.i2-hero-visual { position: relative; }

/* Holds the photograph plus the handwritten note overlaid on it. NOT a flex
   container: the note is absolutely positioned over the image, never beside it. */
.i2-photo {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #eaf2f8;
    aspect-ratio: 4 / 3;
}
/* Owner-supplied photographs, 2026-09-18. object-position keeps the clinician in
   frame as the box changes shape between breakpoints: the hero source is a wide
   2.5:1 crop, so plain centre-cropping would cut her out at narrow widths. */
.i2-photo img,
.i2-results-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.i2-photo img { object-position: 75% center; }
.i2-results-photo img { object-position: 28% center; }

/* Handwritten note, angled, with the underline swoosh -- as drawn in the mockup.
   Caveat is loaded alongside the sitewide faces in index2.html. */
.i2-quote-note {
    position: absolute;
    top: 18px;
    right: 18px;
    max-width: 240px;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.22;
    color: var(--dark);
    text-align: center;
    transform: rotate(-4deg);
    padding: 10px 14px 18px;
    border-radius: 14px;
    /* soft scrim: keeps the handwriting legible over any part of the photograph
       without reading as a card. Contrast measured at 1280 and 390. */
    background: radial-gradient(ellipse at center, rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 60%, rgba(255,255,255,0) 100%);
}
/* the hand-drawn underline under the last line */
.i2-quote-note::after {
    content: "";
    position: absolute;
    left: 22%;
    right: 8%;
    bottom: 2px;
    height: 8px;
    border-bottom: 3px solid var(--blue);
    border-radius: 0 0 60% 40%;
    transform: rotate(-1.5deg);
}

.i2-promise {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 22px 24px;
    margin: -56px 0 0 auto;
    max-width: 330px;
    position: relative;
    z-index: 2;
}
.i2-promise ul { list-style: none; }
.i2-promise li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: .95rem;
    color: var(--gray-700);
    padding: 9px 0;
}
.i2-promise li + li { border-top: 1px solid var(--gray-100); }
.i2-promise li strong { color: var(--dark); font-weight: 600; }
/* THE LIST ITEM IS A FLEX CONTAINER, so every text node and every inline element inside it is
   its own flex item. A <strong> around part of a line therefore gets laid out as a separate
   column and the sentence breaks apart: "One accountable | U.S.- | team / based" on 2026-09-28.
   Emphasise PART of a line only inside a single wrapper span. Emphasising the WHOLE line is
   safe, because then there is only one item beside the tick. */
.i2-promise li > span:not(.i2-check) { flex: 1 1 auto; min-width: 0; }

/* ---------- shared section furniture ---------- */

.i2-section-h {
    font-size: clamp(1.6rem, 3.1vw, 2.45rem);
    line-height: 1.16;
    text-align: center;
    margin-bottom: 14px;
}
/* The big emphasised second line the brief calls for ("SEE IT.", "KNOW WHY.") */
.i2-shout {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

/* ---------- 2. the revenue questions ---------- */

.i2-questions { padding: 84px 0; background: var(--white); }
.i2-qlist { list-style: none; }
.i2-qlist li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 12px 0;
    font-size: 1.02rem;
    color: var(--gray-700);
}
.i2-qlist--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 44px;
    max-width: 940px;
    margin: 30px auto 0;
}

.i2-turn {
    margin: 52px auto 0;
    max-width: 720px;
    text-align: center;
    padding: 40px 32px;
    background: #f4f9fd;
    border-radius: var(--radius-lg);
}
.i2-turn h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    margin-bottom: 18px;
}
.i2-turn-list {
    font-size: 1.02rem;
    line-height: 2;
    color: var(--gray-700);
    margin-bottom: 22px;
}
.i2-turn-punch {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.5;
    color: var(--dark);
}
.i2-turn-punch strong { color: var(--blue); }

/* ---------- 3. traditional billing vs revenue management ---------- */

.i2-compare-section { padding: 84px 0; background: var(--gray-50); }
.i2-compare-fair {
    max-width: 640px;
    margin: 0 auto 34px;
    text-align: center;
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--gray-700);
}
.i2-compare-fair strong { color: var(--dark); }

.i2-compare2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 22px;
    align-items: center;
    max-width: 1000px;
    margin: 36px auto 0;
}
.i2-compare2-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 28px 28px 24px;
    height: 100%;
}
.i2-compare2-card--cvx {
    border-color: rgba(61,166,61,.4);
    box-shadow: var(--shadow-md);
}
.i2-compare2-card h3 {
    font-size: 1.08rem;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-100);
}
.i2-compare2-card--cvx h3 { color: var(--blue-dark); }
.i2-compare2-card ul { list-style: none; }
.i2-compare2-card li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: .95rem;
    line-height: 1.5;
    padding: 9px 0;
    color: var(--gray-700);
}
.i2-compare2-arrow { color: var(--gray-300); display: flex; justify-content: center; }
.i2-compare-in {
    text-align: center;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.9vw, 1.3rem);
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 10px;
}
.i2-cost-line {
    text-align: center;
    margin-top: 14px;
    font-size: 1rem;
    color: var(--gray-700);
}
.i2-cost-line a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.i2-cost-line a:hover { text-decoration: underline; }
.i2-compare-note {
    text-align: center;
    margin-top: 28px;
    font-size: 1rem;
    color: var(--gray-700);
}

/* ---------- 4. VixisIQ ---------- */

/* Subtle light-blue ground so this section reads as its own thing. */
.i2-iq {
    padding: 92px 0;
    background: linear-gradient(180deg, #eef6fc 0%, #e6f1fa 100%);
    text-align: center;
    /* NOT overflow:hidden -- the dashboard scales up on hover and would be clipped. */
}
.i2-iq-brand { margin: 0 0 20px; line-height: 0; }
.i2-iq-brand img {
    width: 340px;
    max-width: 72%;
    height: auto;
    display: inline-block;
}
.i2-iq-h {
    font-size: clamp(1.6rem, 3.1vw, 2.45rem);
    line-height: 1.16;
    margin-bottom: 0;
}

/* The dashboard figure: 68% of the container at rest, full width when expanded.
   The growth is a transform, so it never reflows the page -- it lifts above the
   content below it for as long as the pointer (or keyboard focus) is on it.
   transform-origin is the TOP, so it only ever grows downward and never rides up
   over the headline. */
.i2-iq-figure { margin: 46px 0 0; }
.i2-iq-frame {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: transparent;
    cursor: zoom-in;
    transform-origin: top center;
    transition: transform .45s cubic-bezier(.22,.8,.3,1), box-shadow .45s ease;
    will-change: transform;
}
/* The zoom existed because the frame sat at 68%. At full width there is nothing to zoom to, so
   hover now only lifts the shadow. */
.i2-iq-frame:hover,
.i2-iq-frame:focus-visible,
.i2-iq-frame.is-zoomed {
    box-shadow: 0 40px 110px rgba(10,60,110,.4);
    z-index: 20;
    outline: none;
}
.i2-iq-frame:focus-visible { box-shadow: 0 0 0 3px var(--blue), 0 40px 110px rgba(10,60,110,.4); }

.i2-iq-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(15,23,42,.78);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    transition: opacity .3s ease;
}
.i2-iq-frame:hover .i2-iq-hint,
.i2-iq-frame.is-zoomed .i2-iq-hint { opacity: 0; }

/* ---------- product slider (owner, 2026-09-21) ----------
   Five products rotate through the same frame the VixisIQ dashboard used to own. Slides are
   stacked and cross-faded rather than translated, so a slide that is taller than its neighbour
   cannot make the section jump: the list keeps the height of the tallest slide.
   HOVER AND FOCUS PAUSE IT. An auto-advancing carousel that cannot be stopped is a WCAG 2.2.2
   failure, and the frame already expands on hover, so pausing there is what a reader expects. */
.i2-iq-slider { position: relative; }
/* align-items: start is load-bearing. Grid stretches every item to the row height by default,
   so each slide reported the SAME scrollHeight and the height-follows-active-slide logic in
   index.html silently did nothing: the short slides kept sitting in dead space. */
.i2-iq-slides { list-style: none; display: grid; align-items: start; margin: 0; padding: 0;
    overflow: hidden; transition: height .45s ease; }
@media (prefers-reduced-motion: reduce) { .i2-iq-slides { transition: none; } }
/* THE WHOLE IMAGE, TOP TO BOTTOM (owner, 2026-09-21: "do not cut the height either. You can make
   the images smaller and enlarge if the user clicks on them").
   The slides now carry the FULL exports rather than the safety crops, so a 1311x1200 dashboard at
   full container width would be ~1050px tall and swamp the section. max-height scales the whole
   thing down instead -- nothing is cropped, it is simply smaller -- and a click opens it at full
   size in the lightbox. max-width/max-height with auto on both axes is what preserves the aspect;
   object-fit is deliberately NOT used here, because cover would crop and contain would letterbox. */
.i2-iq-frame img {
    display: block;
    max-width: 100%;
    max-height: 560px;
    width: auto;
    height: auto;
    margin: 0 auto;
    cursor: zoom-in;
}
@media (max-width: 768px) { .i2-iq-frame img { max-height: 340px; } }

/* Lightbox: the full-size image, scrollable when it is taller than the viewport. */
.i2-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px;
    overflow: auto;
    background: rgba(15, 23, 42, .82);
}
.i2-lightbox[hidden] { display: none; }
.i2-lightbox img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
    background: #fff;
}
.i2-lightbox-close {
    position: fixed;
    top: 16px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--dark);
}
.i2-lightbox-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.i2-lightbox-cap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 18px;
    background: rgba(15, 23, 42, .9);
    color: #e6edf5;
    font-size: .82rem;
    text-align: center;
}
html.i2-lightbox-open { overflow: hidden; }
.i2-iq-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s ease;
}
.i2-iq-slide.is-active { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .i2-iq-slide { transition: none; } }

/* Each slide carries ITS OWN lockup (owner, 2026-09-21), so a VixisCare chart is never shown
   under VixisIQ branding. The five lockups are not the same shape -- VixisIQ is 3.48:1 and the
   other four are 3:1 -- so height is fixed and width left to follow, which keeps the cap height
   consistent as the slides change. Anything else makes the header jump. */
.i2-iq-slide-brand {
    text-align: center;
    margin-bottom: 18px;
    min-height: 92px;
}
.i2-iq-slide-brand img {
    height: 92px;
    width: auto;
    max-width: 100%;
    display: inline-block;
}
@media (max-width: 900px) { .i2-iq-slide-brand img { height: 68px; } .i2-iq-slide-brand { min-height: 68px; } }
@media (max-width: 640px) { .i2-iq-slide-brand img { height: 52px; } .i2-iq-slide-brand { min-height: 52px; } }
.i2-iq-slide-line {
    text-align: center;
    color: var(--gray-700);
    font-size: 1rem;
    margin-top: 16px;
}
/* .i2-iq-frame-bar span styles the three window dots at 11x11 with a border-radius, and this tag
   is also a span in that bar, so it was rendered as an 11px grey circle with "Sample data"
   spilling out of it -- on screen it read "SAM". These resets have to come after that rule. */
.i2-iq-zoomhint {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--blue);
}
/* The pause half of the hint is only true where a pointer can hover, so it is hidden on touch
   rather than telling a phone user to do something they cannot do (owner, 2026-09-22: the
   enlarge hint "should also have mouse over to stop scroll"). Same hover/pointer test the exit
   survey uses to stay desktop-only. */
.i2-iq-pausehint { display: none; }
@media (hover: hover) and (pointer: fine) {
    .i2-iq-pausehint { display: inline; }
}
.i2-iq-frame-bar .i2-iq-frame-tag {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    white-space: nowrap;
    margin-left: auto;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.i2-iq-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.i2-iq-arrow {
    width: 34px;
    height: 34px;
    border: 1px solid var(--gray-300);
    background: var(--white);
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--gray-700);
    cursor: pointer;
}
.i2-iq-arrow:hover, .i2-iq-arrow:focus-visible { border-color: var(--blue); color: var(--blue); }
/* THE SLIDER NAV IS THE PRODUCT LOGOS (owner, 2026-09-22: "it would be nice if the scroll bar
   was actually the logos of the products"). Dots told a visitor there were five things; the
   lockups tell them WHICH ones, and make the control a second impression of the brand rather
   than punctuation. The buttons keep their .i2-iq-dot class and data-go index so the existing
   slider JS drives them unchanged.
   Inactive logos are greyed and dimmed so the current one is unmistakable; the <img> carries
   alt="" and aria-hidden because the BUTTON already has the accessible name. Heights step down
   at narrow widths because a row of 3:1 lockups is the widest thing in this section. */
.i2-iq-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.i2-iq-dot {
    width: auto;
    height: auto;
    padding: 5px 7px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    opacity: .45;
    filter: grayscale(1);
    transition: opacity .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.i2-iq-dot img {
    height: 19px;
    width: auto;
    display: block;
}
.i2-iq-dot:hover,
.i2-iq-dot:focus-visible {
    opacity: .8;
    filter: grayscale(.35);
}
.i2-iq-dot.is-active {
    opacity: 1;
    filter: none;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 1px 5px rgba(15, 23, 42, .1);
    transform: none;
}
/* Narrow widths. These MUST sit after the base rules above: same specificity, so the later
   declaration wins and an earlier media query would silently do nothing. */
@media (max-width: 900px) {
    .i2-iq-dot img { height: 16px; }
    .i2-iq-dot { padding: 4px 5px; }
    .i2-iq-dots { gap: 4px; }
}
@media (max-width: 560px) {
    /* Measured, not guessed: the arrows take about 80px of the nav row, leaving roughly 248px
       for the lockups at 390px. Five are 3:1 and the VixisIQ one is wider, so the row needs
       about 18.5x the logo height plus padding and gaps.
       SIX lockups since VixisChiro was added 2026-09-28. At the old 12px/3px/3px the row came
       to 273px and wrapped, leaving one orphan lockup on a second line; these values land near
       231px. If a SEVENTH product is ever added, re-measure here rather than assuming it fits:
       this row is the widest thing in the section on a phone. */
    .i2-iq-dot img { height: 10px; }
    .i2-iq-dot { padding: 3px 3px; border-radius: 7px; }
    .i2-iq-dots { gap: 2px; }
}
@media (max-width: 430px) {
    /* 360px is a real phone width and the arrows leave only about 222px there. SEVEN lockups
       since VixisEOB was added 2026-09-28: at 10px they need 247px and wrapped at 360 and 390.
       At 8px with a 1px gap they need about 220px, which fits both. Measured in Chromium at
       360, 390, 430, 500 and 560.
       At this size the row is an INDICATOR, not a legible set of wordmarks, and that is an
       accepted trade: the active product's full lockup sits directly above the screenshot.
       AN EIGHTH PRODUCT DOES NOT FIT HERE. Before adding one, either re-measure with a
       smaller step or make this row scroll horizontally; do not let it wrap. */
    .i2-iq-dot img { height: 8px; }
    .i2-iq-dot { padding: 3px 2px; }
    .i2-iq-dots { gap: 1px; }
}



.i2-iq-dot:focus-visible, .i2-iq-arrow:focus-visible { outline: 3px solid rgba(10,110,180,.35); outline-offset: 3px; }

.i2-iq-caption {
    margin-top: 16px;
    font-size: .76rem;
    color: var(--gray-500);
}
/* The browser-chrome bar is gone with the white card (owner, 2026-09-21: transparent
   background). The SAMPLE DATA badge it used to hold now floats over the image itself, so the
   persistent marker the brief requires survives the change. */
.i2-iq-frame-bar {
    /* ABOVE the screenshot, not over it. Floated on top-right it covered the dashboard's own
       header chip. The badge has to stay visible -- it is the persistent sample-data marker --
       but it must not hide the product it is labelling. */
    position: static;
    display: block;
    text-align: right;
    background: none;
    border: 0;
    padding: 0 2px 6px;
}
.i2-iq-frame-bar span:not(.i2-iq-frame-tag) { display: none; }
.i2-iq-frame-bar--old {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    background: #f2f5f8;
    border-bottom: 1px solid var(--gray-100);
}
.i2-iq-frame-bar span {
    width: 11px; height: 11px; border-radius: 50%;
    background: #d6dce2;
}
/* Superseded 2026-09-21: this forced width:100%, which with the full exports stretched a
   1.09:1 dashboard to 2.5:1. The sizing now lives in the .i2-iq-frame img rule above, which
   uses max-width/max-height with auto on both axes so the aspect is preserved. */

.i2-iq-strap {
    margin: 38px auto 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: clamp(.95rem, 1.6vw, 1.15rem);
    color: var(--blue-dark);
}
.i2-iq-features {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px auto 0;
    max-width: 800px;
}
.i2-iq-features li {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(10,110,180,.2);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--blue-dark);
}
.i2-iq-bridge {
    max-width: 640px;
    margin: 30px auto 0;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--gray-700);
}


/* ---------- scroll reveal ---------- */

.i2-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}
.i2-reveal.is-in { opacity: 1; transform: none; }
/* staggered, so the RCA cards arrive one after another */

/* ---------- 4. results band ---------- */

/* The brief's transition into the proof. Sits on the band's navy, above the grid. */
.i2-results-bridge {
    text-align: center;
    padding: 46px 24px 0;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(1.1rem, 2.1vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255,255,255,.92);
}
.i2-results-bridge + .i2-results-grid { margin-top: 34px; }

/* Two-tone, as sampled from the mockup: the photograph and the story sit on a dark
   slate navy, the three stats on a brighter blue. The tone change is applied to the
   ELEMENTS rather than to a fixed percentage of the section background, so the
   boundary always lands exactly where the story column ends, at any viewport width. */
.i2-results {
    position: relative;
    /* .i2-stats::after carries the brighter blue out to the right edge with a 100vw
       block; without this the document scrolls sideways (measured 2520px at 1280). */
    overflow: hidden;
    background: #27425a;
    color: #fff;
}
/* The band's BACKGROUND stays full-bleed, but its content is capped and centred on
   the same 1200px column as every other section, so the page reads as one measure
   at any width. Without this the stats spread to 1467px on a 2560px screen while
   the rest of the page stayed at 1200. */
.i2-results-grid {
    position: relative;
    display: grid;
    grid-template-columns: 25% 1fr;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}
/* The photograph is not a hard-edged box cut into the band: its right-hand side
   dissolves into the band's blue so the background reads straight through it,
   the same treatment as the hero. No text sits over it, so there is no contrast
   cost -- the story column starts where the fade has finished. */
.i2-results-photo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;            /* the photo column (25%) plus the story column (25%) */
    background: #27425a;
    overflow: hidden;
}
/* Same treatment as the hero: the photograph reads clearly on its own half, then a
   navy scrim ramps up across the story so the copy sits on a wash of the photograph
   instead of a flat panel. Contrast is measured in bin/tests/jsdom/index2.test.js. */
.i2-results-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
        rgba(39,66,90,0)   0%,
        rgba(39,66,90,.10) 34%,
        rgba(39,66,90,.70) 48%,
        rgba(39,66,90,.88) 60%,
        rgba(39,66,90,.93) 100%);
}

/* The photograph is absolutely positioned (it spans the photo column AND the story
   column), so it is out of flow and the content must be placed in column 2 explicitly
   -- otherwise it collapses back into the empty first column. */
.i2-results-inner {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: 0;
}
.i2-story {
    position: relative;
    z-index: 1;
    padding: 34px 32px;
}
.i2-story h2 {
    color: #fff;
    font-family: 'Inter', -apple-system, sans-serif;   /* the mockup uses the body face here */
    font-size: clamp(1.05rem, 1.55vw, 1.32rem);
    font-weight: 700;
    line-height: 1.34;
    margin-bottom: 12px;
}
.i2-story p {
    color: rgba(255,255,255,.9);
    font-size: .9rem;
    line-height: 1.55;
}
.i2-story-who {
    margin-top: 14px;
    font-size: .78rem;
    line-height: 1.5;
    color: rgba(255,255,255,.75);
}

.i2-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: linear-gradient(to right, #1a527d 0%, #0d4e85 100%);
}
/* carry the brighter blue out to the right edge of the viewport */
.i2-stats::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    width: 100vw;
    background: #0d4e85;
    pointer-events: none;
}
.i2-stat {
    padding: 34px 20px;
    text-align: center;
}
.i2-stat { position: relative; }
.i2-stat + .i2-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 1px;
    background: rgba(255,255,255,.22);
}
.i2-stat svg { color: #4aa3e8; margin-bottom: 12px; }
.i2-stat-figure {
    font-family: 'Inter', -apple-system, sans-serif;   /* matches the mockup */
    font-size: clamp(1.45rem, 2.1vw, 1.95rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
    white-space: nowrap;      /* "3 months" must not break across two lines */
}
.i2-stat-label {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}
.i2-stat p {
    font-size: .84rem;
    line-height: 1.5;
    color: rgba(255,255,255,.85);
}
.i2-stat .i2-source { color: rgba(255,255,255,.62); }
.i2-stat .i2-source a { color: rgba(255,255,255,.82); }

/* ---------- 5. final CTA ---------- */

.i2-final {
    background: #eef6fc;
    padding: 64px 0;
}
.i2-final { text-align: center; }
.i2-final-h {
    font-size: clamp(1.55rem, 3.1vw, 2.35rem);
    line-height: 1.16;
    margin-bottom: 16px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.i2-final-lead {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 28px;
}
.i2-final-action { text-align: center; }
.i2-final-action .i2-hero-micro { margin-top: 12px; }
/* the line the brief puts under the hero CTA, above the free/2-minutes microcopy */
.i2-hero-sub-cta {
    font-size: .95rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

/* ---------- 6. trust bar ---------- */

.i2-trust {
    background: var(--white);
    padding: 26px 0;
    border-top: 1px solid var(--gray-100);
}
.i2-trust-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.i2-trust-label {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.i2-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--gray-700);
}
.i2-trust-item svg { color: var(--blue); flex: 0 0 auto; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
    .i2-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .i2-promise { margin: -40px auto 0; }
    .i2-qlist--two { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
    .i2-compare2 { grid-template-columns: 1fr; gap: 16px; }
    .i2-compare2-arrow { transform: rotate(90deg); }
    .i2-iq-frame {
        max-width: 100%;
        cursor: default;
        transform: none !important;   /* already full width: nothing to expand into */
    }
    .i2-iq-hint { display: none; }
    .i2-results-grid { grid-template-columns: 1fr; }
    /* stacked: the photograph returns to the flow above the story, at full width,
       and its scrim is switched off (nothing sits on top of it here) */
    .i2-results-photo {
        position: static;
        width: auto;
        min-height: 220px;
        height: 240px;
    }
    .i2-results-photo::after { background: none; }
    .i2-results-inner { grid-column: auto; }
    .i2-stats::after { display: none; }
    .i2-results-inner { grid-template-columns: 1fr; }
    .i2-story { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
}

@media (max-width: 640px) {
    /* Must stay clear of the fixed .navbar-solid header (72px tall). */
    .i2-hero { padding-top: 96px; padding-bottom: 44px; }
    .i2-questions, .i2-compare-section { padding: 56px 0; }
    .i2-iq { padding: 60px 0; }
    .i2-iq-brand img { width: 240px; }
    .i2-turn { padding: 30px 20px; }
    .i2-compare2-card { padding: 22px 20px; }
    .i2-iq-features { gap: 8px; }
    .i2-stats { grid-template-columns: 1fr; }
    .i2-stat + .i2-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
    .i2-story { padding: 32px 22px; }
    .i2-stat { padding: 32px 22px; }
    /* The note stays overlaid on the photograph, just smaller and tucked in.
       It must SCALE WITH THE VIEWPORT, not sit at a fixed width: the photo is object-fit:cover,
       so as the phone narrows the crop zooms IN and the clinician's head grows as a share of the
       width, while a fixed 165px note grows as a share too (46% of a 360px screen). At 360px that
       put the note's left edge over her hair. Measured 2026-09-20 at 320/360/390/430/640.
       Keep the left edge right of ~62% of the viewport at every width. */
    .i2-quote-note { top: 10px; right: 10px; max-width: min(150px, 40%); font-size: clamp(.8rem, 3.1vw, 1.15rem); padding: 4px 6px 9px; }
    .i2-promise { margin-top: 18px; max-width: none; }
    .i2-trust-row { justify-content: flex-start; }
}

@media (min-width: 1025px) {
    .i2-hero { min-height: 600px; }
    .i2-hero-grid { display: block; }
    .i2-hero-copy {
        width: 48%;
        padding-right: 36px;
        position: relative;
        z-index: 2;
    }
    /* The photograph spans the WHOLE hero, not just the right half, and a white
       scrim is laid over it. The copy therefore sits on a faint wash of the
       photograph rather than a hard white box with a straight edge down the
       middle -- which is how the mockup reads. Contrast is measured in
       bin/tests/jsdom/index2.test.js; the scrim must stay dense enough on the
       left for body text to clear WCAG AA. */
    .i2-hero-visual {
        position: absolute;
        inset: 0;
        width: 100%;
    }
    .i2-hero-visual .i2-photo {
        position: absolute;
        inset: 0;
        border-radius: 0;
        aspect-ratio: auto;
    }
    .i2-hero-visual .i2-photo img { object-position: 34% center; }
    .i2-hero-visual .i2-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        /* Owner, 2026-09-21: "you need to let the background bleed through a little more on
           the left side", then again: "can we have it bleed through a little more?" Lightened
           from .955/.945/.88 through .88/.86/.78 and .78/.75/.68 to the current .66/.63/.57
           over three passes, each one measured. The limit here
           is WCAG AA on the hero copy, which is measured against the RENDERED pixels behind each
           text element by bin/tests/jsdom/hero-contrast.js, not estimated. At these values the
           smallest text still clears AA with room to spare; do not lighten further without
           re-running that script at 1280, 1440 and 1600. */
        background: linear-gradient(to right,
            rgba(255,255,255,.66) 0%,
            rgba(255,255,255,.63) 30%,
            rgba(255,255,255,.57) 44%,
            rgba(255,255,255,.34) 54%,
            rgba(255,255,255,0)   64%);
    }
    /* the handwritten note must sit above the scrim */
    .i2-hero-visual .i2-quote-note { z-index: 2; }
    /* The promise card sits over the lower-right of the photograph, as in the mockup.
       Right-anchored on purpose: left-anchoring put it over the hero copy.

       THE RIGHT GUTTER MUST MATCH THE LEFT ONE (owner, 2026-09-21: the hero "does not seem
       balanced, the left side has padding/margin while the right side does not").
       .i2-hero-visual is `position:absolute; inset:0`, so it spans the whole VIEWPORT, while the
       hero copy sits inside .container (max-width 1200px, 24px padding). Anchoring these to the
       viewport gave 64px of gutter on the left against 32px on the right at 1280px, and 144px
       against 32px at 1440px: the wider the screen, the more lopsided it looked.
       --i2-gutter reproduces the container's own maths, so both sides now match exactly at
       every width. If .container's max-width or padding changes, change this with it. */
    .i2-hero-visual {
        --i2-gutter: calc(max(0px, (100vw - 1200px) / 2) + 24px);
    }
    .i2-hero-visual .i2-promise {
        position: absolute;
        left: auto;
        right: var(--i2-gutter);
        bottom: 40px;
        margin: 0;
        width: 340px;
        max-width: none;
    }
    /* THE NOTE HAS NOW BEEN MOVED THREE TIMES AND EVERY TOP-ANCHORED POSITION FAILED.
       History: viewport-anchored at right:38px; moved into the gutter on 2026-09-21 for
       symmetry with the copy; nudged 20px right on 2026-09-22 to clear her face. The owner
       reported it covering her head AGAIN on 2026-09-28 (heroIssues.png), and the measurements
       say why: the photograph is object-fit:cover with object-position 34% center, so the
       clinician's head moves and RESIZES with the viewport while a top-right note does not.
       There is no top-right offset that clears her at 1280 and at 1920 both.
       So the note is no longer anchored to the top at all. It sits at the BOTTOM of the photo,
       against the copy column's own 48% edge, which is layout-derived and therefore stable:
       her head is always in the upper half, her coat is always in the lower half. Verified by
       screenshot at 1200, 1280, 1440, 1600, 1800 and 1920.
       It overlaps the promise card's left edge by 11 to 17px at every width. That is deliberate
       and invisible: the scrim is a radial gradient that is fully transparent at its edges.
       DO NOT move this back to the top. If the photograph is ever replaced, re-measure. */
    .i2-hero-visual .i2-quote-note {
        top: auto;
        bottom: 56px;
        left: 51%;
        right: auto;
        max-width: 230px;
    }
}

/* Between 1025 and 1199 the overlay layout is on but there is not room for the note AND the
   promise card: at 1025 the card clipped the note's last two words. The note is decoration and
   the card is the promise, so the note is the one that goes. Measured, not assumed. */
@media (min-width: 1025px) and (max-width: 1199px) {
    .i2-hero-visual .i2-quote-note { display: none; }
}

/* THE NOTE GOES BACK TO THE TOP-RIGHT CORNER WHERE IT FITS (owner asked on 2026-09-28 why it
   could not simply be padded off the right edge, then asked for 30px more).
   It can, but only on a wide window, and the reason is worth keeping: the photograph is
   object-fit: cover, so a narrower viewport is a TIGHTER CROP of the same image. She fills
   more of the frame and her hair reaches the right edge.
   THE PADDING AND THE BREAKPOINT MOVE TOGETHER. More padding pushes the note INWARD, which is
   toward her, so raising 38px to 68px cost 100px of breakpoint: at 1500 the extra 30px put the
   scrim's edge back across her hair, which is the original complaint. Rendered and inspected
   at 1500, 1600, 1800 and 1920: 68px is her hair at 1500 and clear greenery from 1600 up.
   If the padding is raised again, re-render and raise this breakpoint with it. The bottom
   position above covers everything below 1600. Re-measure both if the photograph changes. */
@media (min-width: 1600px) {
    .i2-hero-visual .i2-quote-note {
        top: 84px;
        bottom: auto;
        right: 68px;
        left: auto;
        max-width: 240px;
    }
}

/* Owner, 2026-09-28: "we can move it over 90px". Inward, so 68px becomes 158px, and again the
   breakpoint has to move with it: rendered at 1600, 1700, 1800 and 1920, the 90px move puts the
   scrim across her forehead at 1600 and clips her hair at 1700. It is clean from 1800 up.
   So the move applies from 1800 and 1600 to 1799 keeps the 68px offset, which is already
   verified clean there. Four states on this element now, every one of them measured:
     >= 1800   top-right, 158px in   |   1600-1799  top-right, 68px in
     1200-1599 bottom of the photo   |   1025-1199  hidden
   Raise the offset again and this breakpoint goes up again. Re-measure all four if the
   photograph is replaced. */
@media (min-width: 1800px) {
    .i2-hero-visual .i2-quote-note { right: 158px; }
}

@media (prefers-reduced-motion: reduce) {
    .i2-hero *, .i2-results * { transition: none !important; animation: none !important; }
    /* the scroll reveal must never hide content for someone who opted out of motion */
    .i2-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* The dashboard used to expand from 68% on hover. It is full width from 2026-09-21, so there
       is nothing to expand to and this override would have scaled it past the container. */
    .i2-iq-frame { transition: none !important; }
}

/* ============================================================
   90-DAY GUARANTEE BAND (owner, PR #5, 2026-09-23)
   The PR shipped the markup with NO CSS rule anywhere in the repository -- the
   same defect PR #2 shipped with its cv-* bands, where the band measured
   padding-top: 0px in a browser. Without this rule the card butts against the
   hero above and the VixisIQ band below.
   White ground, so the band separates the white hero from the blue .i2-iq
   gradient that follows. .i2-turn supplies the card; its 52px top margin is
   zeroed here because in this section it is the first child, not a follow-on.
   The media query sits BELOW the base rules on purpose: at equal specificity
   the later declaration wins, and a media query placed above the rule it
   overrides is a silent no-op (learned the hard way 2026-09-22).
   ============================================================ */
.i2-guarantee-offer {
    padding: 92px 0;
    background: #fff;
}
.i2-guarantee-offer .i2-turn { margin-top: 0; }
.i2-guarantee-offer h2 {
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    margin: 0 0 18px;
}
.i2-guarantee-offer p { margin: 0 0 16px; }
.i2-guarantee-offer p:last-child { margin-bottom: 0; }
.i2-guarantee-offer .btn { margin-top: 8px; }
.i2-guarantee-offer .i2-hero-micro { margin: 14px 0 0; }

@media (max-width: 640px) {
    .i2-guarantee-offer { padding: 56px 0; }
    .i2-guarantee-offer .i2-turn { padding: 28px 20px; }
}


/* ---------- THE SIX PROBLEMS (owner's proven-solutions brief, 2026-09-28) ----------
   The homepage's organizing principle: problem first, then the route to the solution. Each
   card is a single <a> wrapping a heading and a paragraph, which is valid flow content and
   makes the WHOLE card the target rather than a "learn more" link nobody aims at.
   Three columns at desktop, two at tablet, one on a phone: six 3:1-ish cards in one row would
   put each heading on four lines. Media queries sit BELOW the base rules on purpose. */
.i2-problems { padding: 84px 0; background: var(--white); }
.i2-problems .i2-eyebrow { text-align: center; }
.i2-problems-sub { max-width: 640px; margin: 0 auto 38px; text-align: center; font-size: 1.05rem; color: var(--gray-700); }
.i2-problems-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; }
.i2-problem { display: flex; }
.i2-problem > a {
    display: flex; flex-direction: column; width: 100%;
    padding: 26px 26px 22px; border: 1px solid var(--gray-300); border-radius: var(--radius);
    background: var(--white); text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.i2-problem > a:hover, .i2-problem > a:focus-visible { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.i2-problem h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 10px; color: var(--dark); }
.i2-problem p { font-size: .95rem; line-height: 1.6; color: var(--gray-700); margin: 0 0 16px; flex: 1 1 auto; }
/* The cue is the last line of the card, so it reads as the next step rather than a label. */
.i2-problem-go { font-size: .9rem; font-weight: 600; color: var(--blue); }
.i2-problem-go::after { content: " \2192"; }
.i2-problems-foot { margin: 34px auto 0; max-width: 680px; text-align: center; font-size: 1rem; color: var(--gray-700); }
.i2-problems-foot a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) {
    .i2-problems-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .i2-problems { padding: 56px 0; }
    .i2-problems-grid { grid-template-columns: 1fr; gap: 14px; }
    .i2-problem > a { padding: 22px 20px 18px; }
}

/* ---------- WHERE THE TECHNOLOGY CAME FROM (owner, 2026-09-28) ----------
   The brief's product philosophy, closing the slider: problem first, technology third. The
   first line is the owner's own sentence, used verbatim. It sits AFTER the products have been
   shown on purpose, so it reads as the reason they exist rather than as a boast. */
.i2-iq-origin { max-width: 720px; margin: 22px auto 0; text-align: center; font-size: 1.12rem; line-height: 1.55; color: var(--dark); }
@media (max-width: 640px) {
    .i2-iq-origin { font-size: 1.04rem; margin-top: 18px; }
}
/* ---------- TECHNICAL SUPPORT and CUSTOM DEVELOPMENT (owner, 2026-09-28) ----------
   Both answer the same objection: CareVixis is not only an RCM company. Support is the loud
   one, so it gets the tinted band and the big "Call us."; custom development is the quiet,
   reasoned one and sits on white in a single measured column. Neither carries a rate, on the
   owner's instruction: the scope is defined with the practice before anything is built. */
.i2-support { padding: 78px 0; background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%); text-align: center; }
.i2-support .i2-eyebrow { text-align: center; }
.i2-support-lead { max-width: 620px; margin: 0 auto 26px; font-size: 1.08rem; color: var(--gray-700); }
.i2-support-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 24px; padding: 0; max-width: 840px; }
.i2-support-list li { background: var(--white); border: 1px solid var(--gray-300); border-radius: 999px; padding: 9px 18px; font-size: .95rem; color: var(--dark); font-weight: 500; }
.i2-support-punch { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700; color: var(--blue); margin: 0 0 20px; }
.i2-support-body { max-width: 680px; margin: 0 auto; font-size: 1.02rem; line-height: 1.7; color: var(--gray-700); }

.i2-build { padding: 78px 0; background: var(--white); }
.i2-build-inner { max-width: 720px; margin: 0 auto; }
.i2-build .i2-eyebrow, .i2-build .i2-section-h { text-align: center; }
.i2-build p { font-size: 1.05rem; line-height: 1.72; color: var(--gray-700); margin: 0 0 16px; }
.i2-build-punch { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 1.22rem; font-weight: 700; color: var(--dark); line-height: 1.45; margin: 24px 0 28px !important; }
.i2-build-h3 { font-size: 1.25rem; margin: 34px 0 12px; padding-top: 28px; border-top: 1px solid var(--gray-100); }
.i2-build strong { color: var(--dark); }

/* The closing message before the CTA: the clearest statement of the positioning, so it is
   the last thing read before the button. */
.i2-final-punch { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 700; color: var(--blue); margin: 18px auto 26px; max-width: 640px; }

@media (max-width: 640px) {
    .i2-support, .i2-build { padding: 54px 0; }
    .i2-support-list { gap: 8px; }
    .i2-support-list li { padding: 8px 14px; font-size: .9rem; }
    .i2-build-punch { font-size: 1.1rem; }
}

/* ---------- PRIOR EXPERIENCE (owner substantiated 2026-09-28) ----------
   Deliberately NOT inside the dark .i2-stats band above it. Brief section 5: a founder or team
   result from a previous engagement must never read as a CareVixis client result, and putting
   these beside the $13,000 client figure in the same band is exactly how that blurs. Separate
   section, light background, and every card states what it is in its own words. */
.i2-prior { padding: 78px 0; background: var(--gray-50); }
.i2-prior .i2-eyebrow, .i2-prior .i2-section-h { text-align: center; }
.i2-prior-lead { max-width: 680px; margin: 0 auto 38px; text-align: center; font-size: 1.05rem; line-height: 1.7; color: var(--gray-700); }
.i2-prior-lead strong { color: var(--dark); }
.i2-prior-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.i2-prior-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 30px 28px 24px; }
/* The figure is big, but section 32 says a big number never stands without what it represents,
   so the unit rides with it and the heading under it names the measure. */
/* SCOPED AS p.i2-prior-figure ON PURPOSE. `.i2-prior-card p` below is (0,1,1) and this class
   alone is (0,1,0), so the descendant selector wins and the figure rendered at body size.
   Same cascade defeat as `.vx-dash-bar span` beating `.vx-dash-tag`. Specificity, not
   !important: the note below still uses !important and should be tightened the same way. */
.i2-prior-card p.i2-prior-figure { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 700; line-height: 1; color: var(--blue); margin: 0 0 8px; }
.i2-prior-card p.i2-prior-figure span { display: inline-block; margin-left: 10px; font-size: .95rem; font-weight: 600; color: var(--gray-500); vertical-align: middle; }
.i2-prior-card h3 { font-size: 1.05rem; margin: 0 0 10px; }
.i2-prior-card p { font-size: .98rem; line-height: 1.65; color: var(--gray-700); margin: 0 0 14px; }
.i2-prior-card p.i2-prior-note { font-size: .84rem; line-height: 1.55; color: var(--gray-500); margin: 0; padding-top: 12px; border-top: 1px solid var(--gray-100); }
.i2-prior-foot { max-width: 720px; margin: 30px auto 0; text-align: center; font-size: 1rem; color: var(--gray-700); }
@media (max-width: 860px) {
    .i2-prior { padding: 54px 0; }
    .i2-prior-grid { grid-template-columns: 1fr; gap: 14px; }
}
/* "It stays your practice" is core positioning pillar 4, and it belongs next to the list of
   what CareVixis builds: an EHR and a patient portal are exactly the places a vendor's brand
   would otherwise show up in front of the patient. */
.i2-build-brand { font-size: 1.02rem !important; color: var(--gray-700); border-left: 3px solid var(--green); padding-left: 16px; }
.i2-build-brand strong { color: var(--dark); }

/* The section's lead (owner copy, 2026-09-28). It sets the whole beat up BEFORE any product
   appears, which is what lets the technology sit directly under the hero without leading with
   a catalogue. The payoff line at the foot of the section is the owner's own sentence and
   stays; the old sub-line under it said the same thing as this lead, so it went. */
.i2-iq-lead { max-width: 760px; margin: 16px auto 32px; text-align: center; font-size: 1.08rem; line-height: 1.7; color: var(--gray-700); }
@media (max-width: 640px) { .i2-iq-lead { font-size: 1rem; margin-bottom: 22px; } }

/* ---------- THE USE CASE ON EACH SLIDE, and VixisEOB (owner, 2026-09-28) ----------
   Owner: "these are solutions that we created for our practices to address a need. Create use
   cases for each." So every slide now states the need BEFORE the product does anything, which
   is also what lets this section sit directly under the hero without leading with a catalogue. */
.i2-iq-why { max-width: 720px; margin: 0 auto 6px; text-align: center; font-size: .97rem; line-height: 1.6; color: var(--gray-700); font-style: italic; }

@media (max-width: 640px) {
    .i2-iq-why { font-size: .93rem; }
}