body {
    line-height: 1.55;
}


p, h1, h2, h3 {
    margin-top: 0;
}


.hero .inner {
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
}

h1 {
    font-size: 65px;
    font-size: clamp(43px, 5.8vw, 70px);
    max-width: 800px;
}

.lead {
    max-width: 780px;
}


.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
}

.metric {
    background: #fff;
    padding: 20px 20px 17px;
    min-height: 116px;
}

.metric strong {
    display: block;
    font-size: 35px;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 9px;
    color: var(--accent-dark);
}

.metric span {
    display: block;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.35;
}

.metric.wide {
    grid-column: 1 / -1;
    min-height: auto;
}

.hero-card .metric.wide {
    text-align: center;
    padding-left: 28px;
    padding-right: 28px;
}

.hero-card .metric.wide span {
    max-width: 430px;
    margin: 0 auto;
}

.hero-card .metric:not(.wide) strong {
    text-align: center;
}


.section-heading {
    max-width: 860px;
}


#report .section-heading {
    max-width: var(--max);
}

#report .section-heading h2 {
    max-width: 1100px;
}

#report .section-heading p {
    max-width: 860px;
}


.evidence-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1.05fr);
    gap: 30px;
    align-items: stretch;
}


.chart-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 24px 20px;
    box-shadow: var(--shadow);
}

.chart-title {
    display: block;
    margin-bottom: 8px;
}

.legend {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--muted);
    margin-top: 14px;
    margin-bottom: 0;
}

.legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swatch {
    width: 18px;
    height: 3px;
    border-radius: 99px;
    background: var(--accent);
    display: inline-block;
}

.swatch.red {
    background: #a94a4a;
}

svg {
    max-width: 100%;
    height: auto;
}

.chart-card > svg {
    display: block;
    margin-top: -4px;
    width: calc(100% + 16px);
    max-width: none;
    margin-left: 0;
    margin-right: -16px;
    margin-bottom: 6px;
}

.chart-label {
    font-weight: 800;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
    text-anchor: middle;
}

.axis-ticks {
    font-size: 14px;
}

.axis-title {
    font-size: 15px;
    font-weight: 700;
}

.chart-stat {
    margin-top: 6px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fbfcfd;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.45;
}

.chart-stat strong {
    color: var(--ink);
}

.chart-endpoint {
    margin-top: 18px;
    padding: 0 2px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.chart-endpoint strong {
    color: var(--muted);
    font-weight: 400;
}

.evidence-reference {
    margin-top: 18px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 5px;
    padding-left: 2px;
    padding-right: 2px;
}

.evidence-reference .reference-marker {
    color: var(--accent-dark);
    font-weight: 800;
    position: relative;
    left: -2px;
    top: 0.05em;
}

.evidence-reference span {
    display: block;
}


.report-toolbar {
    gap: 16px;
    padding: 14px 18px;
}


.contact-support-list {
    margin: 18px 0 22px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    color: var(--muted);
}

.contact-support-list li {
    position: relative;
    padding-left: 20px;
    line-height: 1.45;
}

.contact-support-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--accent);
}

.footer {
    background: var(--ink);
    color: #fff;
    padding: 42px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}


.problem-box {
    padding: 26px;
}

.problem-box strong {
    display: block;
    font-size: 21px;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}


.why-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
    gap: 48px;
    align-items: center;
}

.why-layout .section-heading {
    max-width: none;
    margin-bottom: 0;
}

#why h2 {
    font-size: 47px;
    font-size: clamp(35px, 3.35vw, 49px);
    line-height: 1.08;
    max-width: 760px;
}

#why .section-heading p {
    max-width: 700px;
}

.stacked-problem {
    display: grid;
    gap: 0;
    width: 100%;
    justify-self: stretch;
    transform: translateY(-12px);
}

.stacked-problem .problem-box {
    padding: 20px 24px;
}

.stacked-problem .problem-box p {
    margin-bottom: 0;
}

.stacked-problem .problem-box.highlight {
    background: #fff;
    border-color: rgba(47, 141, 100, 0.45);
    box-shadow: 0 14px 34px rgba(47, 141, 100, 0.08);
}

.problem-plus {
    width: 2px;
    height: 22px;
    justify-self: center;
    margin: 0;
    background: #b8d8c8;
    opacity: 0.95;
}

.workflow-flow {
    display: grid;
    gap: 18px;
}


.workflow-flow {
    display: grid;
    gap: 0;
    max-width: 1080px;
    margin: 34px auto 0;
}

.workflow-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 26px;
    box-shadow: var(--shadow);
}

.workflow-card h3 {
    margin: 0 0 8px;
    font-size: 22px;
}

.workflow-card p {
    margin: 0;
}

.workflow-branches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.workflow-branch {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 26px;
    box-shadow: 0 10px 26px rgba(23, 32, 42, 0.04);
}

.workflow-branch.alt {
    background: #fff;
}

.workflow-branch h3 {
    margin: 0 0 8px;
    font-size: 23px;
}

.workflow-branch p {
    margin: 0;
}


.peer-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px 18px;
    margin-bottom: 14px;
}

.timepoint-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 18px;
}

.timepoint-card {
    padding: 22px;
}

.timepoint-card h3 {
    margin-bottom: 8px;
}

.timepoint-card .small {
    margin: 0 0 16px;
}

.timepoint-period {
    border-top: 0;
    padding-top: 0;
    margin-top: 14px;
}

.timepoint-period:first-of-type {
    margin-top: 0;
}

.timepoint-period h4 {
    margin: 0 0 10px;
    font-size: 17px;
    letter-spacing: -0.01em;
}

.timepoint-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.timepoint-value {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 12px 10px;
    background: #fbfcfd;
    min-height: 76px;
}

.timepoint-value strong {
    display: block;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 7px;
    text-align: center;
}

.timepoint-value.low {
    background: #fff;
    border-color: rgba(47, 141, 100, 0.45);
}

.timepoint-value.notlow {
    background: #fbf5f5;
    border-color: #e6c6c6;
}

.timepoint-value.overall {
    background: #fbfcfd;
    border-color: #e4e9ef;
}

.timepoint-value.overall strong {
    color: #9aa5af;
}

.timepoint-value.low strong {
    color: var(--accent-dark);
}

.timepoint-value.notlow strong {
    color: #8c3b3b;
}

.timepoint-value span {
    display: block;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--muted);
    text-align: center;
}

.swatch.gray {
    background: #6f7c87;
}

.access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.mini-form {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.mini-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.mini-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mini-form .form-row label {
    min-width: 0;
}

.mini-form input, .mini-form textarea, .mini-form select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 13px;
    font: inherit;
    background: #fff;
    color: var(--ink);
}

.mini-form.was-submitted input:invalid, .mini-form.was-submitted textarea:invalid, .mini-form.was-submitted select:invalid {
    border-color: #d7a6a6;
}

.mini-form textarea {
    min-height: 104px;
    resize: vertical;
}

.mini-form input:focus, .mini-form textarea:focus, .mini-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47, 141, 100, 0.10);
}

.checkbox-label {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 10px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.checkbox-label input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    padding: 0;
}

.form-status {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 14px;
}

.form-status:empty {
    display: none;
}

#contact .mini-form .hero-actions {
    justify-content: center;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

#contact .mini-form .hero-actions .button {
    min-width: 210px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 16px;
    cursor: pointer;
}

#contact .card {
    padding-bottom: 28px;
}

button.button {
    cursor: pointer;
}

.footer {
    font-size: 13px;
    line-height: 1.45;
}

.footer-grid {
    grid-template-columns: 0.8fr 1.2fr;
}

.footer .fineprint {
    display: grid;
    gap: 9px;
}


/* Access v83: center the CTA within the site-onboarding card. */
#access .access-card:first-child .access-actions {
    justify-content: center;
}


/* Workflow v18: split/merge flow with curved arrows */
#workflow .inner {
    max-width: var(--max);
}

#workflow .workflow-heading {
    max-width: var(--max);
    margin-left: 0;
    margin-right: 0;
}

.workflow-flow-v18 {
    max-width: 780px;
    margin: 32px auto 0;
    display: grid;
    gap: 0;
}

.workflow-flow-v18 .workflow-card,
.workflow-flow-v18 .workflow-branch {
    border-radius: var(--radius);
    padding: 22px 26px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(23, 32, 42, 0.055);
}

.workflow-flow-v18 .workflow-step-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.workflow-flow-v18 .workflow-step-label {
    justify-content: center;
    padding: 7px 11px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.workflow-flow-v18 h3 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
}

.workflow-flow-v18 p {
    margin: 0;
}

.workflow-branches-v18 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.workflow-branches-v18 .workflow-branch {
    min-height: 174px;
    background: #fff;
}

.workflow-branches-v18 .workflow-branch:nth-child(2) {
    background: #fff;
    border-color: var(--line);
}

.workflow-branches-v18 .workflow-step-label {
    margin-bottom: 14px;
}

.workflow-curve {
    display: block;
    width: 100%;
    overflow: visible;
}

.workflow-curve path {
    fill: none;
    stroke: #74b99a;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workflow-curve marker path {
    fill: #74b99a;
    stroke: none;
}

.workflow-curve-split {
    height: 48px;
    margin: 0;
}

.workflow-curve-merge {
    height: 54px;
    margin: 0;
}

.workflow-curve-down {
    height: 34px;
    margin: 0;
}


/* Workflow v22: keep common steps white; highlight only the physical slide-shipment alternative. */
.workflow-flow-v18 .workflow-card {
    background: #fff;
}

.workflow-branches-v18 .workflow-branch {
    background: #fff;
}



/* Workflow v26: orthogonal split/merge arrows with subtly rounded 90-degree corners. */
.workflow-curve-right-angle {
    height: 62px;
}

.workflow-curve-right-angle path {
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Workflow v35: onboarding preamble block before per-patient workflow. */
.workflow-onboarding {
    max-width: 780px;
    margin: 28px auto 0;
    padding: 22px 26px;
    border: 1px solid #cfdde8;
    border-radius: var(--radius);
    background: #f7fbfd;
    box-shadow: 0 12px 28px rgba(23, 32, 42, 0.045);
}

.workflow-onboarding .workflow-step-label {
    margin-bottom: 12px;
}

.workflow-onboarding h3 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
}

.workflow-onboarding p {
    margin: 0;
}


/* Sample report annotated layout */

#report .section-heading h2 {
    max-width: none;
}

#report .section-heading p {
    max-width: 980px;
}


.report-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}


#report .report-cta-row {
    margin-top: 18px;
}

@media (max-width: 920px) {


    .hero-card {
        transform: none;

    }

    .grid-3, .grid-2, .spec-list {
        grid-template-columns: 1fr;
    }

    .evidence-layout {
        gap: 22px;
    }


    .stacked-problem {
        width: 100%;
        justify-self: stretch;
    }

}

@media (max-width: 560px) {

    .metric-grid, .evidence-metrics {
        grid-template-columns: 1fr;
    }

    .mini-form .form-row {
        grid-template-columns: 1fr;
    }


}


/* Workflow v35: onboarding preamble block before per-patient workflow. */





/* Sample report annotated layout */







@media (max-width: 920px) {
    .workflow-flow-v18 {
        max-width: 100%;
    }

    .workflow-flow-v18 .workflow-step-card {
        grid-template-columns: 1fr;
    }

    .workflow-branches-v18 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .workflow-curve-split,
    .workflow-curve-merge {
        display: none;
    }

    .workflow-curve-down {
        height: 28px;
    }

    .workflow-flow-v18 .workflow-card,
    .workflow-flow-v18 .workflow-branch {
        padding: 22px;
    }
}


/* Sample report v59: report-left, explainer-right layout */

#report .section-heading h2 {
    max-width: 1120px;
}


#report .report-explainer-layout {
    grid-template-columns: minmax(520px, 0.64fr) minmax(300px, 0.36fr);
    margin-top: 34px;
}

#report .report-document-card .report-toolbar {
    padding: 12px 16px;
}

#report .report-explainer-panel {
    gap: 12px;
    align-self: start;
}

#report .report-explainer-card {
    padding: 15px 16px 15px 44px;
    font-size: 16px;
}

#report .report-explainer-card.highlight {
    background: #f3fbf7;
    border-color: #bfe3d0;
}

#report .report-explainer-card h3 {
    margin-bottom: 5px;
    font-size: 19px;
    letter-spacing: -0.02em;
}

#report .report-explainer-card p {
    color: var(--muted);
}

#report .report-explainer-card .callout-num {
    top: 15px;
    width: 22px;
    height: 22px;
}

#report .report-interpretation-note-inline {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

#report .report-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}


/* Sample report v60: report-left with numbered pins restored */
#report .report-document-card {
    position: relative;
}

@media (max-width: 920px) {
    #report .report-explainer-layout {
        grid-template-columns: 1fr;

    }

    #report .report-explainer-panel {
        padding-top: 0;

    }

}


/* Footer v65: single-column fine print using full document content width. */
.footer-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
    max-width: var(--max);
}

.footer .fineprint {
    max-width: none;
}


#report .report-explainer-card .callout-num {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 10px rgba(47, 141, 100, 0.22);
}


/* Evidence v99: widen heading block so the evidence headline and lead copy read in fewer lines. */
#evidence .section-heading {
    max-width: 1040px;
}

#evidence .section-heading h2 {
    max-width: 1040px;
}

#evidence .section-heading p {
    max-width: 1000px;
}


.reveal-on-scroll.is-visible.motion-card:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .motion-card,
  .motion-card:hover,
  .reveal-on-scroll,
  .reveal-on-scroll.is-visible {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

.hero-stat-heading {
  margin: 0 0 18px;
  font-size: 25px;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 650;
  color: var(--ink);
}

/* Mobile readability fixes: stack desktop grids that otherwise squeeze copy. */
@media (max-width: 820px) {
  .why-layout,
  .evidence-layout,
  .evidence-reference {
    grid-template-columns: 1fr !important;
  }

  .peer-card,
  .timepoint-card,
  .evidence-reference {
    min-width: 0;
  }

  .timepoint-values {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* Mobile workflow connectors: preserve the ordering flow when cards stack. */
@media (max-width: 820px) {
  #workflow .workflow-onboarding,
  #workflow .workflow-flow-v18 .workflow-card,
  #workflow .workflow-flow-v18 .workflow-branch {
    position: relative;
  }

  #workflow .workflow-onboarding:not(:last-child),
  #workflow .workflow-flow-v18 .workflow-card:not(:last-child),
  #workflow .workflow-flow-v18 .workflow-branch:not(:last-child) {
    margin-bottom: 34px;
  }

  #workflow .workflow-onboarding:not(:last-child)::after,
  #workflow .workflow-flow-v18 .workflow-card:not(:last-child)::after,
  #workflow .workflow-flow-v18 .workflow-branch:not(:last-child)::after {
    content: "↓";
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 15px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 0 0 6px #fff;
    z-index: 2;
  }
}

/* Mobile workflow refinement: represent Step 2A/2B as alternatives, then continue the vertical flow. */
@media (max-width: 820px) {
  #workflow .workflow-curve {
    display: none !important;
  }

  #workflow .workflow-flow-v18 {
    gap: 0;
    margin-top: 28px;
  }

  #workflow .workflow-onboarding,
  #workflow .workflow-flow-v18 > .workflow-card,
  #workflow .workflow-branches-v18 {
    position: relative;
    margin-bottom: 34px;
  }

  #workflow .workflow-flow-v18 > .workflow-card:last-child {
    margin-bottom: 0;
  }

  #workflow .workflow-branches-v18 {
    gap: 28px;
  }

  #workflow .workflow-flow-v18 .workflow-branch,
  #workflow .workflow-flow-v18 .workflow-branch:not(:last-child) {
    margin-bottom: 0;
    position: relative;
  }

  #workflow .workflow-flow-v18 .workflow-branch::after,
  #workflow .workflow-flow-v18 .workflow-branch:not(:last-child)::after {
    content: none !important;
    display: none !important;
  }

  #workflow .workflow-branches-v18 .workflow-branch + .workflow-branch::before {
    content: "or";
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 6px #fff;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    z-index: 3;
  }

  #workflow .workflow-branches-v18::after {
    content: "↓";
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 15px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 0 0 6px #fff;
    z-index: 2;
  }
}

/* Align the hero citation with the validation card rather than the left hero copy. */
.hero .hero-reference {
  grid-column: 2;
  justify-self: stretch;
  margin: 10px 0 0;
  padding: 0 26px;
}

@media (max-width: 820px) {
  .hero .hero-reference {
    grid-column: 1;
    padding: 0;
  }
}

/* Hero citation compact placement. */
.hero .hero-reference {
  margin-top: 6px;
  padding: 0 26px;
  font-size: 12px;
  line-height: 1.35;
}


/* Keep the professional hero validation reference attached to the card column. */
.hero-validation-column {
  display: grid;
  gap: 6px;
  align-self: center;
}

.hero-validation-column .hero-reference {
  margin: 0;
  padding: 0 26px;
  font-size: 12px;
  line-height: 1.35;
}

/* Final hero citation spacing: keep the reference nearly attached to the card. */
.hero-validation-column {
  gap: 1px;
}

.hero-validation-column .hero-reference {
  margin-top: 0;
}

/* Fix hero citation wrapper: prevent inherited grid placement from squeezing the card. */
.hero .hero-validation-column {
  grid-column: 2;
  width: 100%;
  display: block;
  align-self: center;
}

.hero-validation-column .hero-card {
  width: 100%;
}

.hero .hero-validation-column .hero-reference {
  grid-column: auto !important;
  justify-self: auto !important;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 2px 0 0;
  padding: 0 26px;
  font-size: 11.5px;
  line-height: 1.25;
}

@media (max-width: 1080px) {
  .hero .hero-validation-column {
    grid-column: 1;
  }
}

/* Pull the hero reference tight enough to remain visible with the card crop. */
.hero .hero-validation-column .hero-reference {
  margin: -1px 0 0;
  padding: 0 26px;
}


/* Hero validation citation as a compact card footer. */
.hero-card .hero-reference {
  display: block;
  margin: 0;
  padding: 6px 26px 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.hero-card .hero-reference em {
  font-style: italic;
}


/* Hero validation citation below the card with a fixed 10px gap. */
.hero .hero-validation-column > .hero-reference {
  display: block;
  width: 100%;
  box-sizing: border-box;
  grid-column: auto !important;
  justify-self: auto !important;
  margin: 10px 0 0 !important;
  padding: 0 26px !important;
  border: 0 !important;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

/* Increase readable separation for the hero validation citation below the card. */
.hero .hero-validation-column > .hero-reference {
  margin-top: 18px !important;
}


/* Final professional hero validation-card layout. */
.hero-card .metric-grid {
  grid-template-columns: 1fr;
}

.hero-card .metric.wide {
  grid-column: 1 / -1;
  text-align: center;
}

.hero-card .metric strong {
  font-size: 51px;
}

.hero .hero-validation-column > .hero-reference {
  margin-top: 25px !important;
}


/* Mobile tolerance for the professional hero validation card. */
.metric-caption-compact {
  display: none !important;
}

@media (max-width: 520px) {
  .hero-stat-heading {
    font-size: 22px;
    line-height: 1.24;
    margin-bottom: 14px;
  }

  .hero-card .card-head {
    padding: 22px 24px 16px;
  }

  .hero-card .metric {
    padding-left: 16px;
    padding-right: 16px;
  }

  .metric-caption-full {
    display: none !important;
  }

  .metric-caption-compact {
    display: block !important;
  }
}

/* Cross-browser tolerance for hero validation metric captions. */
.hero-card .metric.wide {
  padding-left: 20px;
  padding-right: 20px;
}

.hero-card .metric span {
  font-size: 14.5px;
}

@media (max-width: 520px) {
  .hero-card .metric {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero-card .metric span {
    font-size: 13.5px;
  }
}

/* Extra tolerance for narrow Safari/WebKit phone widths. */
@media (max-width: 380px) {
  .hero-card .metric {
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero-card .metric span {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* Phone density polish: preserve the desktop layout while giving stacked cards more text width. */
@media (max-width: 520px) {
  #why h2,
  #evidence .section-heading h2,
  #how .section-heading h2 {
    font-size: 30px;
    font-size: clamp(28px, 7.4vw, 31px);
    line-height: 1.08;
  }

  .problem-box,
  .workflow-onboarding,
  .workflow-flow-v18 .workflow-card,
  .workflow-flow-v18 .workflow-branch,
  .workflow-card,
  .workflow-branch,
  .peer-card,
  .timepoint-card,
  .chart-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .workflow-card p,
  .workflow-branch p,
  .workflow-flow-v18 p,
  .peer-card p,
  .chart-card p {
    font-size: 16px;
    line-height: 1.42;
  }

  #report .report-explainer-card {
    padding-left: 42px;
    padding-right: 14px;
  }
}

@media (max-width: 380px) {
  #why h2,
  #evidence .section-heading h2,
  #how .section-heading h2 {
    font-size: 28px;
  }
}

/* Narrow-phone workflow containment fixes. */
@media (max-width: 380px) {
  #workflow .workflow-flow-v18,
  #workflow .workflow-flow-v18 > .workflow-card,
  #workflow .workflow-branches-v18,
  #workflow .workflow-flow-v18 .workflow-branch {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #workflow .workflow-flow-v18 .workflow-card,
  #workflow .workflow-flow-v18 .workflow-branch {
    padding-left: 18px;
    padding-right: 18px;
  }

  #workflow .workflow-flow-v18 .workflow-step-label {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
}

/* Tablet hero validation containment fixes. */
@media (max-width: 1080px) {
  .hero .inner {
    grid-template-columns: 1fr;
  }

  .hero .hero-validation-column {
    grid-column: 1;
    width: 100%;
    max-width: 620px;
    justify-self: center;
  }
}

/* Narrow-phone access-card containment fixes. */
@media (max-width: 380px) {
  #access .grid-2,
  #access .grid-2 > *,
  #access .access-card {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #access .access-actions .button {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* Narrow-phone professional-page guardrails for WebKit/Safari text wrapping. */
@media (max-width: 420px) {
  #evidence .section-heading h2 {
    font-size: 27px;
    line-height: 1.1;
  }
}

@media (max-width: 380px) {
  #evidence .section-heading h2 {
    font-size: 25px;
  }

  .hero-card .card-head {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-card .card-head .muted {
    font-size: 16px;
    line-height: 1.38;
  }
}

/* Phone-only validation-card heading tightening: avoids a 3-line title on narrow devices. */
@media (max-width: 520px) {
  .hero-stat-heading {
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.025em;
  }
}

@media (max-width: 380px) {
  .hero-stat-heading {
    font-size: 19px;
  }
}

/* Ultra-narrow phone copy variant for the validation-card heading. */
.hero-stat-heading-short {
  display: none;
}

@media (max-width: 340px) {
  .hero-stat-heading-full {
    display: none;
  }

  .hero-stat-heading-short {
    display: inline;
  }
}

/* Ultra-narrow phone copy variant for the validation-card heading. */

@media (max-width: 340px) {
  
  }

/* Phone-wide validation-card copy variant for Safari/text-scale tolerance. */
@media (max-width: 430px) {
  .hero-stat-heading-full {
    display: none;
  }

  .hero-stat-heading-short {
    display: inline;
  }
}

/* Strong text scaling: let the hero metric caption use the full card width before wrapping. */
.hero-card .metric.wide span.metric-caption-full {
    max-width: 560px;
}

@media (max-width: 340px) {
    .section-heading h2 {
        font-size: 22px !important;
        line-height: 1.1;
    }
}

/* Mobile/touch usability: make the consent checkbox label a real tap target. */
.checkbox-label {
    min-height: 32px;
    align-items: center;
}

/* Compact-phone stress: prefer the short hero-stat heading and avoid three-line fragmentation. */
@media (max-width: 300px) {
    .hero-stat-heading {
        font-size: 17px;
        line-height: 1.18;
    }

    .hero-stat-heading-full {
        display: none;
    }

    .hero-stat-heading-short {
        display: inline;
    }
}

/* 280px-class text scaling: keep provider hero/evidence/report controls usable. */
@media (max-width: 300px) {
    .hero-stat-heading {
        font-size: 16px !important;
        line-height: 1.16;
    }

    .section-heading h2 {
        font-size: 21px !important;
        line-height: 1.1;
    }

    .report-document-card .button,
    .report-sample-toolbar .button {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
        white-space: normal;
        text-align: center;
        font-size: 14px !important;
    }
}

/* 280px-class 125% scaling: constrain the standalone report PDF CTA and longest evidence heading. */
@media (max-width: 300px) {
    a.button[href$=".pdf"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
        white-space: normal;
        text-align: center;
        font-size: 13px !important;
    }

    #evidence .section-heading h2 {
        font-size: 19px !important;
        line-height: 1.08;
    }
}

/* Chart legend refinement: center legend and keep the overall cohort visually secondary. */
.chart-card .legend {
    justify-content: center;
    text-align: center;
    width: 100%;
}

.chart-card .swatch.gray {
    background: #b8c2cc;
}




/* How myStage Dx works: explicit three-step workflow. */
#how .how-heading {
    max-width: 960px;
}

.how-workflow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
    margin-top: 36px;
}

.how-step-card {
    position: relative;
    padding: 27px 28px 28px;
    min-height: 230px;
    display: flex;
    flex-direction: column;
}

.how-step-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -31px;
    z-index: 2;
    width: 32px;
    height: 18px;
    transform: translateY(-50%);
    background:
        linear-gradient(#74b99a, #74b99a) left 50% / 24px 2px no-repeat,
        linear-gradient(45deg, transparent 46%, #74b99a 47% 56%, transparent 57%) right 50% / 11px 11px no-repeat,
        linear-gradient(-45deg, transparent 46%, #74b99a 47% 56%, transparent 57%) right 50% / 11px 11px no-repeat;
}

.step-label {
    align-self: flex-start;
    display: inline-flex;
    margin-bottom: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e8f5ee;
    color: var(--accent-dark);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.how-step-card h3 {
    margin: 0 0 12px;
    font-size: 23px;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.how-step-card p,
.how-step-list {
    margin: 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.5;
}

.how-step-list {
    padding-left: 19px;
}

.how-step-list li + li {
    margin-top: 8px;
}

@media (max-width: 920px) {
    .how-workflow {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .how-step-card {
        min-height: 0;
    }

    .how-step-card:not(:last-child)::after {
        content: "";
        top: auto;
        right: 50%;
        bottom: -27px;
        width: 18px;
        height: 28px;
        transform: translateX(50%);
        background:
            linear-gradient(#74b99a, #74b99a) 50% top / 2px 20px no-repeat,
            linear-gradient(135deg, transparent 46%, #74b99a 47% 56%, transparent 57%) 50% bottom / 11px 11px no-repeat,
            linear-gradient(45deg, transparent 46%, #74b99a 47% 56%, transparent 57%) 50% bottom / 11px 11px no-repeat;
    }
}

@media (max-width: 560px) {
    .how-workflow {
        margin-top: 26px;
    }

    .how-step-card {
        padding: 22px 20px;
    }

    .how-step-card h3 {
        font-size: 22px;
    }

    .how-step-card p,
    .how-step-list {
        font-size: 16px;
        line-height: 1.46;
    }
}


/* How workflow v2: use SVG connectors matching the ordering workflow visual language. */
.how-workflow {
    grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr) 52px minmax(0, 1fr);
    gap: 6px;
}

.how-step-card:not(:last-child)::after {
    content: none !important;
}

.how-connector {
    align-self: center;
    justify-self: center;
    width: 44px;
    height: 28px;
    overflow: visible;
}

.how-connector path {
    fill: none;
    stroke: #74b99a;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.how-connector polygon {
    fill: #74b99a;
}

@media (max-width: 920px) {
    .how-workflow {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .how-connector {
        width: 42px;
        height: 26px;
        margin: -2px 0;
        transform: rotate(90deg);
    }
}


/* How workflow v3: reuse the ordering-workflow marker-based arrow system. */
.how-connector.workflow-curve {
    width: 58px;
    height: 38px;
}

.how-connector.workflow-curve path {
    stroke-width: 2.8;
}

.how-connector.workflow-curve marker path {
    fill: #74b99a;
    stroke: none;
}

@media (max-width: 920px) {
    .how-connector.workflow-curve {
        width: 56px;
        height: 38px;
    }
}


/* How workflow v4: tighten row width and rhythm. */
#how .how-workflow {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

#how .how-step-card {
    min-height: 218px;
}

#why .stacked-problem {
    padding-top: 10px;
}

#contact .card,
#contact .card:hover {
    transform: none;
}

#contact-form {
    scroll-margin-top: 96px;
}


/* Contact form consent row visual refinement. */
#contact .checkbox-label {
    align-items: start;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42;
}

#contact .checkbox-label input {
    margin-top: 1px;
}

#contact .checkbox-label span {
    font-weight: 500;
}

.workflow-onboarding .workflow-step-label.onboarding-label {
    padding: 8px 13px;
    font-size: 13px;
    line-height: 1.1;
}

.hero .hero-validation-column {
    transform: translateY(10px);
}

/* Compact production footer. */
.footer {
    padding: 28px 0;
    font-size: 13px;
    line-height: 1.38;
}

.footer-grid {
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    gap: 32px;
    align-items: start;
}

.footer h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.footer .fineprint {
    display: grid;
    gap: 6px;
}

.footer p {
    margin: 0;
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    color: rgba(255, 255, 255, 0.78);
}

.footer a {
    color: rgba(255, 255, 255, 0.88);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 820px) {
    .footer {
        padding: 26px 0;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

#contact .form-status {
    min-height: 1.4em;
    margin: 10px 0 0;
    font-weight: 650;
}

#contact .form-status.is-sending {
    color: var(--muted);
}

#contact .form-status.is-success {
    color: var(--accent-dark);
}

#contact .form-status.is-error {
    color: #9a2f2f;
}

#contact button[disabled] {
    cursor: progress;
    opacity: 0.72;
}

/* Cross-device typography guardrails after Source Sans 3 calibration. */
@media (max-width: 520px) {
    #evidence .section-heading h2 {
        font-size: clamp(24px, 6.1vw, 27px);
        line-height: 1.08;
        max-width: 100%;
    }

    #workflow .workflow-heading h2,
    #access .section-heading h2 {
        font-size: clamp(25px, 6.6vw, 28px);
        line-height: 1.1;
    }

    .button.primary,
    a.button.primary,
    button.button.primary {
        white-space: nowrap;
    }
}

@media (max-width: 380px) {
    #evidence .section-heading h2 {
        font-size: 23px;
    }

    #workflow .workflow-heading h2,
    #access .section-heading h2 {
        font-size: 25px;
    }
}

/* Evidence/access rhythm refinements after cross-viewport layout scan. */
#evidence .section-heading,
#evidence .section-heading h2 {
    max-width: 1120px;
}

#evidence .section-heading h2 {
    font-size: clamp(32px, 3.2vw, 47px);
    line-height: 1.05;
}

#access .access-actions .button.primary {
    min-width: 282px;
    white-space: nowrap;
}

@media (max-width: 520px) {
    #evidence .section-heading h2 {
        font-size: clamp(23px, 6vw, 26px);
        line-height: 1.1;
    }

    #access .access-actions .button.primary {
        min-width: 0;
        width: 100%;
    }
}

/* Text-scaling accessibility guardrails: prevent provider access/contact overflow on phones. */
@media (max-width: 640px) {
    #access .grid-2,
    #contact .grid-2 {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #access .grid-2 > *,
    #contact .grid-2 > *,
    #access .access-card,
    #contact .card,
    #contact .section-heading,
    #contact .lead,
    #contact .contact-support-list,
    #contact .muted {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #access .access-actions,
    #access .access-actions .button.primary,
    #contact .button.primary {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #access .access-actions .button.primary,
    #contact .button.primary {
        white-space: normal;
        text-align: center;
    }
}


/* Resumed responsive QA: provider mobile/tablet polish without desktop copy variants. */
.hero-stat-heading-short,
.metric-caption-compact {
    display: none !important;
}

.hero-stat-heading-full {
    display: inline !important;
}

@media (min-width: 921px) {
    #access .grid-2 {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 820px) {
    .hero-stat-heading {
        font-size: 21px;
        line-height: 1.18;
    }

    .chart-label {
        font-size: 20px;
        stroke-width: 5px;
    }

    .evidence-reference {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }

    .evidence-reference .reference-marker,
    .evidence-reference span {
        display: inline;
    }

    .evidence-reference .reference-marker {
        position: static;
        margin-right: 4px;
    }

    #workflow .workflow-flow-v18 {
        gap: 0;
        margin-top: 26px;
    }

    #workflow .workflow-curve,
    #workflow .workflow-curve-split,
    #workflow .workflow-curve-merge,
    #workflow .workflow-curve-down,
    #workflow .workflow-curve-right-angle {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #workflow .workflow-onboarding,
    #workflow .workflow-flow-v18 > .workflow-card,
    #workflow .workflow-branches-v18 {
        position: relative;
    }

    #workflow .workflow-onboarding {
        margin-bottom: 38px;
    }

    #workflow .workflow-flow-v18 > .workflow-card:not(:last-child) {
        margin-bottom: 38px;
    }

    #workflow .workflow-onboarding::after,
    #workflow .workflow-flow-v18 > .workflow-card:not(:last-child)::after,
    #workflow .workflow-branches-v18::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        left: 50%;
        bottom: -35px;
        width: 34px;
        height: 34px;
        transform: translateX(-50%);
        border: 0 !important;
        background: #74b99a;
        clip-path: polygon(45% 0, 55% 0, 55% 70%, 100% 70%, 50% 100%, 0 70%, 45% 70%);
        box-shadow: none !important;
        z-index: 2;
    }

    #workflow .workflow-branches-v18 {
        gap: 42px;
        margin-bottom: 38px;
    }

    #workflow .workflow-flow-v18 .workflow-branch::after,
    #workflow .workflow-flow-v18 .workflow-branch:not(:last-child)::after {
        display: none !important;
    }

    #workflow .workflow-branches-v18 .workflow-branch + .workflow-branch::before {
        content: "OR" !important;
        position: absolute;
        top: -31px;
        left: 50%;
        transform: translateX(-50%);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto;
        height: auto;
        min-width: 34px;
        padding: 5px 9px;
        border: 1px solid #d4e2dc !important;
        border-radius: 999px;
        background: #fff;
        color: var(--accent-dark);
        font-size: 12px;
        font-weight: 850;
        letter-spacing: 0.06em;
        box-shadow: 0 8px 18px rgba(23, 32, 42, 0.07);
        z-index: 3;
    }
}

@media (max-width: 520px) {
    .chart-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .chart-card > svg {
        width: calc(100% + 22px);
        margin-left: -4px;
        margin-right: -18px;
    }
}

/* Final mobile visual polish: tighter explanatory gaps, centered buttons, cleaner workflow arrows. */
@media (max-width: 640px) {
    #why .grid-2 {
        gap: 18px;
    }

    #why .stacked-problem {
        padding-top: 0;
        transform: none;
    }

    #workflow .workflow-onboarding,
    #workflow .workflow-flow-v18 > .workflow-card,
    #workflow .workflow-branches-v18,
    #workflow .workflow-flow-v18 .workflow-branch {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-left: auto;
        margin-right: auto;
    }

    #workflow .workflow-onboarding::after,
    #workflow .workflow-flow-v18 > .workflow-card:not(:last-child)::after,
    #workflow .workflow-branches-v18::after {
        width: 28px;
        height: 34px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34' viewBox='0 0 28 34'%3E%3Cpath d='M14 1V25' stroke='%2374b99a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M7 22l7 8 7-8' fill='none' stroke='%2374b99a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px 34px no-repeat !important;
        clip-path: none;
    }

    #workflow .workflow-branches-v18 {
        gap: 40px;
    }

    #workflow .workflow-branches-v18 .workflow-branch + .workflow-branch::before {
        top: -36px;
    }

    #contact .button.primary,
    #access .access-actions .button.primary,
    .hero .button.primary {
        display: flex;
        width: min(100%, 340px);
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 640px) {
    #why .section-heading {
        margin-bottom: 0;
    }
}

@media (max-width: 640px) {
    #why .section-heading p {
        margin-bottom: 0;
    }

    #why .inner,
    #why .split-section,
    #why .guide-grid,
    #why .grid,
    #why .grid-2 {
        gap: 16px;
        row-gap: 16px;
    }
}

/* Final responsive QA: provider mobile/tablet hierarchy, arrow consistency, and compact tablets. */
@media (max-width: 640px) {
    body.providers-page .hero .eyebrow {
        display: none;
    }
}

@media (max-width: 920px) {
    body.providers-page .hero-actions {
        justify-content: center;
    }
}

@media (min-width: 700px) and (max-width: 920px) {
    #access .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    #access .access-card {
        min-width: 0;
    }

    .hero-card .metric strong {
        font-size: clamp(39px, 7vw, 48px);
    }

    .hero-card .metric span {
        font-size: 13.5px;
    }
}

@media (max-width: 820px) {
    
    #workflow .workflow-onboarding,
    #workflow .workflow-flow-v18 > .workflow-card,
    #workflow .workflow-flow-v18 .workflow-branch,
    #workflow .workflow-branches-v18 {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    #workflow .workflow-onboarding,
    #workflow .workflow-flow-v18 > .workflow-card:not(:last-child),
    #workflow .workflow-branches-v18 {
        margin-bottom: 38px;
    }

    #workflow .workflow-onboarding::after,
    #workflow .workflow-flow-v18 > .workflow-card:not(:last-child)::after,
    #workflow .workflow-branches-v18::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        left: 50%;
        bottom: -38px;
        width: 30px;
        height: 38px;
        transform: translateX(-50%);
        border: 0 !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='38' viewBox='0 0 30 38'%3E%3Cdefs%3E%3Cmarker id='a' markerWidth='4.8' markerHeight='4.8' orient='auto' refX='7' refY='4' viewBox='0 0 8 8'%3E%3Cpath fill='%2374b99a' d='M0 0 L8 4 L0 8 z'/%3E%3C/marker%3E%3C/defs%3E%3Cpath d='M15 0 V31' fill='none' stroke='%2374b99a' stroke-width='2.8' stroke-linecap='round' marker-end='url(%23a)'/%3E%3C/svg%3E") center / 30px 38px no-repeat !important;
        clip-path: none !important;
        box-shadow: none !important;
        z-index: 2;
    }

    #workflow .workflow-branches-v18 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 38px;
        position: relative;
    }

    
    #workflow .workflow-branches-v18 .workflow-branch + .workflow-branch::before {
        top: -31px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (min-width: 821px) and (max-width: 1100px) {
    #report .report-explainer-layout {
        grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
        align-items: start;
        gap: 24px;
    }

    #contact .grid-2 {
        grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
        align-items: start;
        gap: 24px;
    }
}

/* Final connector unification: reuse one marker-style workflow arrow across mobile/tablet. */
@media (max-width: 820px) {
    #workflow .workflow-onboarding,
    #workflow .workflow-flow-v18 > .workflow-card:not(:last-child),
    #workflow .workflow-branches-v18 {
        margin-bottom: 34px !important;
    }

    #workflow .workflow-onboarding::after,
    #workflow .workflow-flow-v18 > .workflow-card:not(:last-child)::after,
    #workflow .workflow-branches-v18::after {
        bottom: -34px !important;
        width: 30px !important;
        height: 34px !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34' viewBox='0 0 30 34'%3E%3Cdefs%3E%3Cmarker id='a' markerWidth='4.8' markerHeight='4.8' orient='auto' refX='7' refY='4' viewBox='0 0 8 8'%3E%3Cpath fill='%2374b99a' d='M0 0 L8 4 L0 8 z'/%3E%3C/marker%3E%3C/defs%3E%3Cpath d='M15 0 V29' fill='none' stroke='%2374b99a' stroke-width='2.8' stroke-linecap='round' marker-end='url(%23a)'/%3E%3C/svg%3E") center / 30px 34px no-repeat !important;
    }

    #workflow .workflow-branches-v18 {
        gap: 34px !important;
    }

    #workflow .workflow-branches-v18 .workflow-branch + .workflow-branch::before {
        top: -29px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* User review QA: provider tablet evidence/workflow refinements. */
@media (max-width: 820px) {
    #workflow .workflow-branches-v18 .workflow-branch + .workflow-branch::before {
        top: -17px !important;
        transform: translate(-50%, -50%) !important;
    }
}

@media (min-width: 641px) and (max-width: 820px) {
    .timepoint-card {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 16px !important;
        align-items: start !important;
    }

    .timepoint-card h3,
    .timepoint-card .small {
        grid-column: 1 / -1 !important;
    }

    .timepoint-period,
    .timepoint-period:first-of-type {
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid var(--line) !important;
    }

    .timepoint-values {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .chart-label {
        font-size: 11px !important;
    }

    #how .how-step-card {
        min-height: 0 !important;
        padding: 20px 26px !important;
    }
}

/* Final report-callout active state: make marker-linked cards visibly selected. */
#report .report-explainer-card.report-sample-callout.is-highlighted {
    background: #f3fbf7 !important;
    border-color: #8dcfac !important;
    box-shadow: 0 18px 38px rgba(47, 141, 100, .12) !important;
    transform: none !important;
    transition-property: background-color, border-color, box-shadow !important;
    transition-duration: 120ms !important;
    transition-timing-function: ease !important;
}

/* Real report marker hover uses is-linked on callout cards. Match definition-card active colors. */
#report .report-explainer-card.report-sample-callout.is-linked,
#report .report-explainer-card.report-sample-callout.is-highlighted {
    background: #f3fbf7 !important;
    border-color: #8dcfac !important;
    box-shadow: 0 18px 38px rgba(47, 141, 100, .12) !important;
    transform: none !important;
    transition-property: background-color, border-color, box-shadow !important;
    transition-duration: 120ms !important;
    transition-timing-function: ease !important;
}

/* Static myStage Dx emphasis: same white + 2px green-border treatment as patient page. */
.stacked-problem .problem-box.highlight {
    background: #fff !important;
    border: 2px solid rgba(47, 141, 100, 0.55) !important;
    box-shadow: 0 16px 34px rgba(47, 141, 100, 0.10) !important;
}