/* ============================================================================
   vixistrace-funnel.css -- the VixisTrace(TM) conversion funnel components.

   Linked ONLY by: vixistrace.html, vixistrace-start.html.

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

   Prefix: vt-. Every colour comes from the styles.css custom properties so the
   funnel cannot drift from the brand. The page also loads vixis.css, so the
   vx- furniture (sections, heads, cards, bands, Q&A) is reused as-is and is
   NOT duplicated here. These rules only cover what the funnel added:

     .vt-arc        the SEE IT -> WORK IT -> WE HANDLE IT progression strip
     .vt-tiers      the three-column tier comparison
     .vt-feat       tier feature lists, with the view-only / locked state
     .vt-steps      the numbered account + BAA flow
     .vt-modal      the "You found it. How do you want to fix it?" dialog

   CONTRAST: measured, not estimated (see the ratios noted at each rule).
   ========================================================================= */

/* ---------- the progression strip ----------
   The brief's one non-negotiable: a visitor should read the business model in
   about ten seconds. It is plain text in document order, so it still reads
   correctly with no CSS at all, and the arrows are decorative only. */
.vt-arc { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vt-arc li { position: relative; text-align: center; padding: 20px 14px; background: var(--gray-50); border: 1px solid var(--gray-300); border-radius: var(--radius); }
.vt-arc .vt-arc-step { display: block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 1.02rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-dark); }
.vt-arc .vt-arc-note { display: block; margin-top: 6px; font-size: .94rem; line-height: 1.55; color: var(--gray-700); }
/* The chevron between cards. Decorative: aria-hidden is not needed because it is
   a CSS pseudo-element and never enters the accessibility tree. */
.vt-arc li + li::before { content: ""; position: absolute; left: -12px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--gray-500); border-bottom: 2px solid var(--gray-500); transform: translate(50%, -50%) rotate(-45deg); }
.vt-arc li:last-child { border-color: var(--green); background: #f3faf3; }
.vt-arc li:last-child .vt-arc-step { color: var(--green-dark); }

/* ---------- tiers ---------- */
.vt-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.vt-tier { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 28px 24px; }
/* The accent rail. 4px so it reads as deliberate structure rather than a hairline. */
.vt-tier { border-top: 4px solid var(--gray-300); }
.vt-tier--free { border-top-color: var(--gray-500); }
.vt-tier--pro  { border-top-color: var(--blue); border-color: var(--blue); box-shadow: var(--shadow-md); }
.vt-tier--rcm  { border-top-color: var(--green); border-color: var(--green); }

.vt-tier-step { display: inline-block; align-self: flex-start; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-bottom: 14px; }
/* Measured: #374151 on #f3f4f6 = 9.31:1. #064a7a on #e8f1f8 = 8.31:1. #2d7d2d on #e8f5e9 = 4.71:1. */
.vt-tier--free .vt-tier-step { background: var(--gray-100); color: var(--gray-700); }
.vt-tier--pro  .vt-tier-step { background: #e8f1f8; color: var(--blue-dark); }
.vt-tier--rcm  .vt-tier-step { background: #e8f5e9; color: var(--green-dark); }

.vt-tier h3 { font-size: 1.22rem; margin-bottom: 6px; }
.vt-tier-pos { font-size: .96rem; line-height: 1.6; color: var(--gray-700); margin: 0 0 16px; }
.vt-tier-price { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--dark); margin: 0; }
.vt-tier-price span { font-size: .95rem; font-weight: 600; color: var(--gray-700); }
/* The RCM tier has no single number: it is the pricing ladder, which lives in
   pricing-config.js and is stated as text here because JSON-LD and crawlers
   cannot read JavaScript. Never hard-code a different rate. */
.vt-tier-price--ladder { font-size: 1.5rem; line-height: 1.25; }
.vt-tier-sub { font-size: .88rem; color: var(--gray-500); margin: 8px 0 0; line-height: 1.5; }

.vt-feat { list-style: none; margin: 20px 0 24px; padding: 0; flex: 1 1 auto; }
.vt-feat li { position: relative; padding-left: 28px; font-size: .95rem; line-height: 1.6; color: var(--gray-700); margin-bottom: 10px; }
/* Included: a CSS checkmark, so no icon font and no extra request. */
.vt-feat li::before { content: ""; position: absolute; left: 4px; top: .36em; width: 6px; height: 11px; border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(45deg); }
/* View-only / locked: a square outline instead of a tick. The state is also
   carried in text by .vt-lock below, so it is never colour-or-shape alone. */
.vt-feat li.is-locked { color: var(--gray-500); }
.vt-feat li.is-locked::before { top: .3em; left: 2px; width: 11px; height: 11px; border: 2px solid var(--gray-300); border-radius: 3px; transform: none; }
.vt-lock { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--blue-dark); margin-top: 2px; }

.vt-tier .btn { width: 100%; text-align: center; }
.vt-tier-alt { display: block; margin-top: 10px; text-align: center; font-size: .9rem; }

/* ---------- the numbered account + BAA flow ---------- */
.vt-steps { counter-reset: vts; list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.vt-steps > li { counter-increment: vts; position: relative; padding: 16px 20px 16px 62px; background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); }
.vt-steps > li::before { content: counter(vts); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: var(--gradient); color: var(--white); font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.vt-steps h3 { font-size: 1.02rem; margin: 0 0 4px; }
.vt-steps p { font-size: .95rem; line-height: 1.6; color: var(--gray-700); margin: 0; }
/* The gate. Everything above it is setup; nothing below it happens until the
   BAA is executed. It is a real visible boundary because the brief forbids any
   copy that implies PHI can move before signature. */
.vt-steps > li.is-gate { border-color: var(--blue); border-width: 2px; background: #f4f9fd; }
.vt-gate-tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-dark); background: #e8f1f8; border-radius: 20px; padding: 3px 9px; margin-bottom: 6px; }

/* ---------- the upgrade decision dialog ----------
   This is the single most important conversion moment in the product, so it is
   built as a real dialog: focus is moved in, Escape closes, focus is restored,
   and the two choices are given equal visual weight. Pro is NOT pre-selected
   and RCM is NOT styled as the escape hatch -- the brief is explicit that Pro
   is a legitimate standalone outcome, not a pressure step toward RCM. */
.vt-modal[hidden] { display: none; }
.vt-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .62); }
.vt-modal-box { position: relative; width: 100%; max-width: 660px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 34px 32px 30px; }
.vt-modal-eyebrow { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.vt-modal-box h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.25; margin: 0 0 10px; }
.vt-modal-lede { font-size: 1rem; line-height: 1.65; color: var(--gray-700); margin: 0 0 22px; }
/* The context line the app fills in from the practice's own data. It carries no
   figure of its own: whatever appears here is the visitor's number, never ours. */
.vt-modal-ctx { font-size: .95rem; line-height: 1.6; color: var(--gray-700); background: var(--gray-50); border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 0 0 22px; }
.vt-modal-ctx[hidden] { display: none; }
.vt-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vt-choice { display: flex; flex-direction: column; border: 1px solid var(--gray-300); border-radius: var(--radius); padding: 20px; }
.vt-choice--pro { border-color: var(--blue); }
.vt-choice--rcm { border-color: var(--green); }
.vt-choice h3 { font-size: 1.05rem; margin: 0 0 6px; }
.vt-choice p { font-size: .92rem; line-height: 1.6; color: var(--gray-700); margin: 0 0 16px; flex: 1 1 auto; }
.vt-choice .btn { width: 100%; text-align: center; }
.vt-choice-price { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; color: var(--dark); }
.vt-modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--gray-500); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.vt-modal-close:hover { background: var(--gray-100); color: var(--gray-900); }
.vt-modal-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vt-modal-foot { margin: 20px 0 0; font-size: .88rem; color: var(--gray-500); line-height: 1.55; }

/* A control that exists in Free but needs Pro to use. Shown, never hidden: the
   brief requires the capability be visible and honestly labelled. */
.vt-prodemo { display: inline-flex; align-items: center; gap: 8px; }
.vt-tag-pro { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--blue-dark); background: #e8f1f8; border: 1px solid #bcd9ed; border-radius: 20px; padding: 2px 8px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vt-tiers { grid-template-columns: 1fr; }
  /* With one column the tiers stack, so the rail reads top-to-bottom already
     and the arc should follow the same axis rather than squeezing to thirds. */
  .vt-arc { grid-template-columns: 1fr; gap: 26px; }
  .vt-arc li + li::before { left: 50%; top: -18px; transform: translate(-50%, 0) rotate(45deg); }
}
@media (max-width: 640px) {
  .vt-choices { grid-template-columns: 1fr; }
  .vt-modal { padding: 12px; align-items: flex-start; }
  .vt-modal-box { padding: 28px 20px 24px; max-height: calc(100vh - 24px); }
  .vt-tier { padding: 24px 20px; }
  .vt-steps > li { padding: 14px 16px 14px 56px; }
  .vt-steps > li::before { left: 14px; }
}

/* ---------- hero microcopy ----------
   What the visitor does NOT have to change. The BAA is deliberately absent: it is a
   requirement, not a thing they are spared, and the brief forbids implying otherwise. */
.vt-micro { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.vt-micro li { position: relative; padding-left: 20px; font-size: .95rem; font-weight: 600; color: var(--gray-700); }
.vt-micro li::before { content: ""; position: absolute; left: 2px; top: .34em; width: 5px; height: 10px; border-right: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(45deg); }

/* ---------- the value reveal ----------
   Invented figures live ONLY inside this figure, and the "Sample data" pill sits level with
   them rather than under them, for the same reason the dashboard artwork carries one: a
   caption below a tall block is read after the numbers, which is too late. */
.vt-reveal { margin: 0; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-md); overflow: hidden; }
.vt-reveal-head { display: flex; justify-content: flex-end; padding: 10px 14px; background: var(--gray-100); border-bottom: 1px solid var(--gray-300); }
.vt-stats { list-style: none; margin: 0; padding: 26px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vt-stats li { text-align: center; }
.vt-stat-n { display: block; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; line-height: 1.05; color: var(--blue-dark); }
.vt-stat-l { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.45; color: var(--gray-700); }
.vt-reveal figcaption { padding: 0 24px 22px; font-size: .92rem; line-height: 1.6; color: var(--gray-700); }
.vt-reveal figcaption strong { color: var(--gray-900); }

.vt-imagine { margin: 26px 0 18px; text-align: center; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 700; color: var(--dark); }
.vt-cta-center { justify-content: center; }

/* ---------- the gated-control demo ----------
   The real component, on the marketing page, so a visitor can see the upgrade moment before
   committing to anything. Nothing is submitted and no account is involved. */
.vt-demo { margin-top: 30px; padding: 24px; border: 1px dashed var(--gray-300); border-radius: var(--radius); background: var(--white); text-align: center; }
.vt-demo-lede { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; color: var(--gray-700); }
.vt-demo-note { margin: 12px 0 0; font-size: .86rem; color: var(--gray-500); }

/* ---------- the two paths ----------
   Equal columns, equal weight. Neither is styled as the recommended one: the brief is
   explicit that Pro is a legitimate standalone outcome, not a step toward the service. */
.vt-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vt-path { display: flex; flex-direction: column; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); padding: 26px 24px; background: var(--white); }
.vt-path--diy { border-top: 4px solid var(--blue); }
.vt-path--dfy { border-top: 4px solid var(--green); }
.vt-path-tag { margin: 0 0 8px; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--gray-500); }
.vt-path h3 { font-size: 1.25rem; margin: 0 0 6px; }
.vt-path-price { margin: 0 0 12px; font-weight: 700; color: var(--dark); }
.vt-path p { font-size: .98rem; line-height: 1.65; color: var(--gray-700); }
.vt-path > p:last-of-type { flex: 1 1 auto; margin-bottom: 18px; }
.vt-path .btn { width: 100%; text-align: center; }
.vt-paths-foot { margin: 20px 0 0; text-align: center; font-size: .95rem; color: var(--gray-700); }

@media (max-width: 900px) {
  .vt-stats { grid-template-columns: repeat(2, 1fr); }
  .vt-paths { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .vt-stats { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
  .vt-micro { gap: 6px 16px; }
  .vt-reveal figcaption { padding: 0 18px 20px; }
}