/* ============================================================================
   vixis.css -- shared styles for the VixisIQ / VixisTrace / integrations /
   specialties cluster (built 2026-09-18).

   Linked ONLY by: vixisiq.html, vixistrace.html, integrations/index.html,
   integrations/ehr/index.html, integrations/clearinghouses/index.html,
   specialties/index.html.

   Because nothing else links it, its ?v= can be bumped without a sitewide
   sweep, exactly the trade documented for email-security.css. If you ever link
   it from another page, accept that trade or move the rules into styles.css.

   Prefix: vx-. Every colour comes from the styles.css custom properties so the
   cluster cannot drift from the brand.

   Contrast note: every dark band here sets its own text colours rather than
   inheriting, because .section-dark overrides in styles.css do not cover
   page-local classes. Ratios were measured, not estimated.
   ========================================================================= */

/* ---------- shared page furniture ---------- */
.vx-crumb { font-size: .85rem; color: var(--gray-500); margin-bottom: 18px; }
.vx-crumb a { color: var(--gray-500); text-decoration: none; }
.vx-crumb a:hover { color: var(--blue); text-decoration: underline; }
.vx-crumb span { margin: 0 6px; }

.vx-eyebrow { display: inline-block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }

.vx-hero { padding: 150px 0 76px; background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%); }
.vx-hero .container { max-width: 940px; }
.vx-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.02em; margin-bottom: 20px; line-height: 1.12; }
.vx-hero-lede { font-size: 1.2rem; line-height: 1.7; color: var(--gray-700); max-width: 760px; margin-bottom: 30px; }
.vx-hero-lede strong { color: var(--gray-900); }

/* The wordmarks. Both ship as owner-supplied artwork converted to webp here
   (VixisIQ 2026-09-18 morning, VixisTrace 2026-09-18 evening). .vx-wordmark-type
   is the type-only fallback kept for any future mark that has no artwork yet. */
.vx-wordmark { display: block; height: 52px; width: auto; margin-bottom: 20px; }
/* The VixisTrace lockup is a 3:1 wordmark carrying its tagline, so it needs more height
   than the VixisIQ mark before "FIND. FIX. RECOVER. REPEAT." becomes legible. */
.vx-wordmark--trace { height: 88px; }
@media (max-width: 640px) { .vx-wordmark--trace { height: 67px; } }
.vx-wordmark-type { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 2rem; font-weight: 700; letter-spacing: -.01em; color: var(--dark); margin-bottom: 8px; }
.vx-wordmark-type em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vx-wordmark-type sup { font-size: .5em; font-weight: 600; -webkit-text-fill-color: var(--gray-500); color: var(--gray-500); }

.vx-cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 8px; }
.vx-cta-note { margin-top: 14px; font-size: .92rem; color: var(--gray-500); }
.vx-textlink { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vx-textlink:hover { color: var(--blue-dark); }

/* ---------- the standalone answer block ----------
   One self-contained definition per page, written so it still makes sense when
   a search engine or an assistant lifts it out of the page on its own. */
.vx-answer { border-left: 4px solid var(--blue); background: var(--gray-50); border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 30px; margin: 30px 0; }
.vx-answer h2, .vx-answer h3 { font-size: 1.25rem; margin-bottom: 12px; }
.vx-answer p { font-size: 1.05rem; line-height: 1.75; color: var(--gray-700); margin-bottom: 12px; }
.vx-answer p:last-child { margin-bottom: 0; }
.vx-answer--green { border-left-color: var(--green); }

/* ---------- THE READ LAYER (owner, 2026-09-19) ----------
   "I love the style of the homepage, short and to the point ... geared to just pertinent
   information and easy to understand and read."

   The reference sections further down are what an answer engine lifts. THIS is what a person
   reads. It mirrors the homepage rhythm on purpose, because that rhythm is what the owner
   asked for: one idea per beat, each beat 40 to 140 words, short sentences, and the point
   landing before anything has to be scrolled past.

   It is deliberately the SAME URL as the depth below it, not a second short page. Two pages
   per vendor would compete for the same query (the duplicate-content trap the RejectZero
   rename exists to prevent), would breach the 25% shared-sentence ceiling vixis.test.js
   enforces between platform pages, and would put the same facts in two files that then drift.
   One document, two registers. */
.vx-read { padding: 10px 0 0; }
.vx-read .container { max-width: 820px; }
.vx-read-beat { padding: 32px 0; border-top: 1px solid var(--gray-200); }
.vx-read-beat:first-child { border-top: 0; padding-top: 6px; }
.vx-read-beat h2 { font-size: clamp(1.45rem, 2.9vw, 1.95rem); letter-spacing: -.01em; line-height: 1.22; margin-bottom: 12px; }
.vx-read-beat p { font-size: 1.12rem; line-height: 1.68; color: var(--gray-700); margin-bottom: 12px; }
.vx-read-beat p:last-child { margin-bottom: 0; }
.vx-read-beat strong { color: var(--dark); }
.vx-read-punch { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--blue); line-height: 1.4; }

/* The hand-over to the reference material. A real, visible boundary on purpose: a reader who
   already has what they came for should be able to SEE that everything below is optional
   depth, and stop reading without wondering whether they missed something. */
.vx-detail { border-top: 2px solid var(--gray-200); margin-top: 8px; padding: 42px 0 0; }
.vx-detail .container { max-width: 820px; }
.vx-detail-label { display: inline-block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gray-500); margin-bottom: 10px; }
.vx-detail h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: 10px; }
.vx-detail p { font-size: 1.04rem; line-height: 1.7; color: var(--gray-600); margin: 0; }

/* ---------- sections ---------- */
.vx-section { padding: 76px 0; }
/* The hero already carries 76px of bottom padding, so a following section's own 76px left
   about 200px of dead space under the CTA at 1280. Halve the join. */
.vx-hero + .vx-section { padding-top: 40px; }
.vx-section .container { max-width: 1060px; }
.vx-section--tight .container { max-width: 860px; }
.vx-section--gray { background: var(--gray-50); }
.vx-head { max-width: 760px; margin-bottom: 38px; }
.vx-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.01em; margin-bottom: 14px; }
.vx-head p { font-size: 1.08rem; line-height: 1.7; color: var(--gray-700); }
.vx-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.vx-prose p { font-size: 1.05rem; line-height: 1.75; color: var(--gray-700); margin-bottom: 16px; }
.vx-prose h3 { font-size: 1.3rem; margin: 32px 0 12px; }
.vx-prose ul { margin: 0 0 18px 20px; }
.vx-prose li { font-size: 1.03rem; line-height: 1.7; color: var(--gray-700); margin-bottom: 8px; }

/* ---------- cards ---------- */
.vx-grid { display: grid; gap: 20px; }
.vx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.vx-card { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 24px; }
.vx-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.vx-card p { font-size: .96rem; line-height: 1.65; color: var(--gray-700); margin: 0; }
.vx-card--flat { background: var(--gray-50); border-color: transparent; }
.vx-card-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }

/* numbered criteria, the "how to choose" framework */
.vx-criteria { counter-reset: vxc; display: grid; gap: 18px; }
.vx-criteria > li { counter-increment: vxc; list-style: none; position: relative; padding-left: 52px; }
.vx-criteria > li::before { content: counter(vxc); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--gradient); color: var(--white); font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; }
.vx-criteria h3 { font-size: 1.05rem; margin-bottom: 6px; }
.vx-criteria p { font-size: .98rem; line-height: 1.7; color: var(--gray-700); margin: 0; }

/* ---------- tables ----------
   Real HTML tables, never images: the facts have to be extractable. */
.vx-table-wrap { overflow-x: auto; margin: 26px 0; border: 1px solid var(--gray-300); border-radius: var(--radius); }
.vx-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 620px; }
.vx-table caption { text-align: left; font-size: .88rem; color: var(--gray-500); padding: 14px 18px; border-bottom: 1px solid var(--gray-300); }
.vx-table th, .vx-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--gray-100); vertical-align: top; line-height: 1.55; }
.vx-table thead th { background: var(--gray-50); font-size: .8rem; letter-spacing: .6px; text-transform: uppercase; color: var(--gray-700); border-bottom: 1px solid var(--gray-300); }
.vx-table tbody tr:last-child td { border-bottom: none; }
.vx-table code { font-size: .88em; background: var(--gray-100); padding: 1px 6px; border-radius: 4px; }

/* ---------- the conceptual flow ----------
   Plain text in the document order, so it reads correctly with no CSS at all. */
.vx-flow { list-style: none; margin: 26px 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.vx-flow li { background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 16px 20px; }
.vx-flow li + li { margin-top: 30px; position: relative; }
.vx-flow li + li::before { content: ""; position: absolute; left: 50%; top: -30px; width: 2px; height: 30px; background: var(--gray-300); }
.vx-flow li + li::after { content: ""; position: absolute; left: 50%; top: -9px; width: 9px; height: 9px; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: translateX(-50%) rotate(45deg); }
.vx-flow .vx-flow-label { display: block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 1rem; color: var(--dark); }
.vx-flow .vx-flow-note { display: block; font-size: .92rem; color: var(--gray-700); margin-top: 4px; line-height: 1.6; }
.vx-flow li.vx-flow--ours { border-color: var(--blue); border-width: 2px; background: #f4f9fd; }
.vx-flow li.vx-flow--ours .vx-flow-label { color: var(--blue-dark); }

/* ---------- two-column compare ---------- */
.vx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0; }
.vx-compare > div { border-radius: var(--radius); padding: 24px; border: 1px solid var(--gray-300); }
.vx-compare h3 { font-size: 1.05rem; margin-bottom: 12px; }
.vx-compare ul { margin: 0 0 0 18px; }
.vx-compare li { font-size: .96rem; line-height: 1.65; color: var(--gray-700); margin-bottom: 7px; }
.vx-compare .vx-compare-a { background: var(--gray-50); }
.vx-compare .vx-compare-b { background: #f4f9fd; border-color: var(--blue); }

/* ---------- dark band ---------- */
/* CONTRAST, measured not estimated (2026-09-18). --gradient-dark ends at #2d7d2d, and on
   that green end the band's body text #e6edf5 computed to 4.36:1, under the 4.5:1 AA floor,
   with the green punch line at 3.35:1. The global token is used by other pages, so it is NOT
   changed: this band gets its own darker green end instead.
   Measured on #1f5c1f: white 7.94:1, body #e6edf5 6.72:1, punch #7ee787 5.17:1.
   Measured on the #064a7a blue end: white 9.26:1. Never lighten this gradient. */
.vx-band { background: linear-gradient(135deg, #064a7a 0%, #1f5c1f 100%); color: var(--white); padding: 70px 0; }
.vx-band .container { max-width: 900px; }
.vx-band h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 16px; }
.vx-band p { color: #e6edf5; font-size: 1.08rem; line-height: 1.75; margin-bottom: 14px; }
.vx-band p:last-child { margin-bottom: 0; }
.vx-band strong { color: var(--white); }
.vx-band .vx-band-punch { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 1.3rem; font-weight: 700; color: #7ee787; margin-top: 22px; }
/* A .btn-ghost inside a page-local dark box is invisible without this: the class
   is var(--dark) on dark elsewhere. Same fix /pricing needed on 2026-09-14. */
.vx-band .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.6); }
.vx-band .btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }
.vx-band a:not(.btn-primary):not(.btn-ghost) { color: #9fd4ff; }

/* ---------- question and answer ----------
   Deliberately NOT an accordion. The answers are the reason the page exists, so
   they are visible HTML, in the document, with no JavaScript in the way. */
.vx-qa { display: grid; gap: 26px; }
.vx-qa h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--dark); }
.vx-qa p { font-size: 1.02rem; line-height: 1.75; color: var(--gray-700); margin-bottom: 10px; }
.vx-qa p:last-child { margin-bottom: 0; }
.vx-qa > div { padding-bottom: 22px; border-bottom: 1px solid var(--gray-100); }
.vx-qa > div:last-child { border-bottom: none; padding-bottom: 0; }

/* ---------- source list, matching the /practice-cost-calculator convention ---------- */
.vx-sources { background: var(--gray-50); border-radius: var(--radius); padding: 28px 30px; }
.vx-sources h2 { font-size: 1.2rem; margin-bottom: 14px; }
.vx-sources ol { margin: 0 0 12px 20px; }
.vx-sources li { font-size: .92rem; line-height: 1.7; color: var(--gray-700); margin-bottom: 12px; }
.vx-sources a { color: var(--blue); }
.vx-sources p { font-size: .92rem; color: var(--gray-500); margin: 0; }

/* ---------- trademark and scope notices ---------- */
.vx-notice { border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 20px 24px; background: var(--white); margin: 26px 0; }
.vx-notice h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .8px; color: var(--gray-500); margin-bottom: 10px; }
.vx-notice p { font-size: .92rem; line-height: 1.7; color: var(--gray-700); margin-bottom: 8px; }
.vx-notice p:last-child { margin-bottom: 0; }

/* ---------- directory listings (EHR, clearinghouse, specialty hubs) ---------- */
.vx-dir { display: grid; gap: 14px; }
.vx-dir-group h3 { font-size: 1.05rem; margin-bottom: 4px; }
.vx-dir-group > p { font-size: .94rem; color: var(--gray-500); margin-bottom: 14px; line-height: 1.6; }
.vx-status { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.vx-status--live { background: #e8f5e9; color: var(--green-dark); }
.vx-status--soon { background: var(--gray-100); color: var(--gray-500); }

/* ---------- dashboard figures ----------
   Product illustrations. The caption is REQUIRED and is asserted by vixis.test.js: every
   figure inside these images is invented sample data (owner instruction 2026-09-18: publish
   them with a disclaimer that all data is sample data for representational purposes only).
   Filenames are stable -lg / -sm on purpose: the owner re-exports these and their pixel
   dimensions drift, so size-suffixed names would orphan a file on production each time. */
.vx-dash { margin: 32px 0 0; }
.vx-dash-frame { border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-md); }
.vx-dash-bar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; background: var(--gray-100); border-bottom: 1px solid var(--gray-300); }
/* Scope the window dots to the decorative spans ONLY. `.vx-dash-bar span` also matched
   .vx-dash-tag, and at (0,1,1) it beat the (0,1,0) class, squashing the pill to 10px and
   clipping its text. Same family of bug as the media block placed above its base rule. */
.vx-dash-bar span[aria-hidden] { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); flex: 0 0 auto; }
/* The figcaption sits below an image roughly 900px tall, so on a real screen the invented
   figures are read long before the disclaimer under them. This pill rides in the window bar
   so the words "Sample data" are on screen WITH the numbers. Do not remove it. */
.vx-dash-tag { width: auto; height: auto; margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-300); border-radius: 20px; padding: 2px 10px; }
.vx-dash-frame img { display: block; width: 100%; height: auto; }
.vx-dash figcaption { margin-top: 14px; font-size: .92rem; line-height: 1.6; color: var(--gray-700); }
.vx-dash figcaption strong { color: var(--gray-900); }
.vx-dash-fine { display: block; margin-top: 6px; font-size: .85rem; color: var(--gray-500); }

/* ---------- final CTA ---------- */
.vx-final { padding: 80px 0; text-align: center; background: var(--white); border-top: 3px solid transparent; border-image: var(--gradient) 1; }
.vx-final h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.vx-final p { font-size: 1.08rem; color: var(--gray-700); max-width: 640px; margin: 0 auto 28px; line-height: 1.7; }
.vx-final .vx-cta-row { justify-content: center; }
.vx-final-micro { margin-top: 16px; font-size: .92rem; color: var(--gray-500); }

/* ---------- the specialty hero media (VixisChiro™, 2026-09-28) ----------
   Owner: the VixisChiro lockup and the chiropractic screen must appear in the hero of every
   chiropractic page. Every other .vx-hero is one stacked column, so the hero's container
   becomes a two-column grid with the copy wrapped in .vx-hero-copy and the figure beside it.
   The wrapper is needed: WITHOUT it the figure has to span every implicit row, and a spanning
   item that is taller than the copy pushes the leftover height into the first row, which at
   1280 left the crumb alone at the top and dropped the h1 about 570px down the page. Two grid
   items, no row spanning, no leftover to distribute.
   Below 1024px it is one column again and the figure sits under the CTA note, which is also
   what a page with no CSS at all does. */
.vx-hero--media .container { max-width: 1200px; }
.vx-hero-media { margin: 36px 0 0; }
.vx-hero-media-brand { margin: 0 0 16px; }
.vx-hero-media-brand img { display: block; width: auto; height: 56px; }
.vx-hero-media-frame { border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); box-shadow: var(--shadow-md); }
.vx-hero-media-bar { display: flex; gap: 6px; align-items: center; padding: 9px 13px; background: var(--gray-100); border-bottom: 1px solid var(--gray-300); }
/* Scope the window dots to the decorative spans ONLY, exactly as .vx-dash-bar has to: a bare
   descendant selector also matches .vx-hero-media-tag and, at (0,1,1) against the class's
   (0,1,0), squashes the pill to 10px and clips its text. */
.vx-hero-media-bar span[aria-hidden] { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); flex: 0 0 auto; }
/* The pill rides in the window bar so the words "Sample data" are on screen WITH the screen,
   not only in the caption below it. Do not remove it. */
.vx-hero-media-tag { width: auto; height: auto; margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-300); border-radius: 20px; padding: 2px 10px; }
.vx-hero-media-frame img { display: block; width: 100%; height: auto; }
.vx-hero-media figcaption { margin-top: 12px; font-size: .84rem; line-height: 1.6; color: var(--gray-600); }

/* This media query MUST stay below the rules above: same specificity, so an earlier one would
   silently do nothing. */
@media (min-width: 1024px) {
  .vx-hero--media .container { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); column-gap: 46px; align-items: center; }
  .vx-hero--media .vx-hero-media { margin-top: 0; }
  .vx-hero--media .vx-hero-lede { max-width: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vx-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .vx-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* 96px of hero padding clears the 72px fixed nav. 48px overlapped it by 24px
     on phones when the homepage was built; do not lower this. */
  .vx-hero { padding: 116px 0 56px; }
  .vx-section { padding: 56px 0; }
  .vx-grid--2, .vx-grid--3, .vx-grid--4 { grid-template-columns: 1fr; }
  .vx-compare { grid-template-columns: 1fr; }
  .vx-answer { padding: 22px 20px; }
  .vx-sources { padding: 22px 20px; }
  .vx-hero-lede { font-size: 1.08rem; }
  .vx-cta-row { flex-direction: column; align-items: stretch; }
  .vx-cta-row .btn-primary, .vx-cta-row .btn-ghost { text-align: center; }
}