/* Shared presentation layer for the public marketing pages. */
:root {
    --primary: #1e40af;
    --primary-dark: #1e3a8a;
    --secondary: #172d40;
    --accent: #f97316;
    --accent-dark: #c2410c;
    --gray: #526372;
    --light: #f3f6f8;
    --border: #d8e1e7;
    --shadow: none;
    --shadow-soft: none;
}
body { color: #344858; }
h1, h2, h3, h4 { letter-spacing: -.025em; }
.navbar, .navbar.scrolled { background: #fff; box-shadow: none; backdrop-filter: none; }
/* Dark blue brand palette with the existing orange accent. */
.navbar .navbar-brand { color: var(--primary) !important; }
.navbar .navbar-brand span { color: #f97316; }
.navbar .di-icon { display: none; }
/* Keep action buttons and descriptive labels free of decorative pictograms. */
.btn i, .btn .fa, .btn .fas, .btn .far, .btn .fab,
label i, .industry-eyebrow i, .hero-eyebrow i, .section-eyebrow i,
.badge i, .badge-item i, .agent-tag i, .stage-tag i {
    display: none !important;
}
#backToTop { width: auto; min-width: 50px; padding: .65rem 1rem; }
.navbar .dropdown-item { padding: .65rem .9rem; }
.btn, .dropdown-menu { border-radius: 4px; }
.btn:hover, .footer-links a:hover { transform: none; box-shadow: none; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.hero, .page-hero, .hero-about, .hero-industry,
.hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc,
.value-prop-section, .trust-section, .cta-section { background: var(--light); color: var(--secondary); }
.hero, .page-hero, .hero-about, .hero-industry,
.hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc { background: var(--light); color: var(--secondary); }
:is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc, .value-prop-section, .trust-section, .cta-section) :is(h1, h2, h3, h4) { color: var(--secondary) !important; }
:is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc, .value-prop-section, .trust-section, .cta-section) p { color: var(--gray); opacity: 1; }
:is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc, .value-prop-section, .cta-section) .btn-outline-light { color: var(--primary); border-color: #b5c7da; background: #fff; }
:is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc, .value-prop-section, .cta-section) .btn-outline-light:hover { background: #e8f0f8; border-color: var(--primary); }
.page-hero:after, .hero-industry:after { display: none; }
.breadcrumbs, .breadcrumbs a { color: var(--gray); }
.hero-industry .industry-eyebrow {
    color: var(--primary);
    background: #e8f0f8;
    border-color: #b5c7da;
}
.hero-industry .btn-outline-white {
    color: var(--primary);
    background: #fff;
    border-color: var(--primary);
}
.hero-industry .btn-outline-white:hover,
.hero-industry .btn-outline-white:focus-visible,
.hero-industry .btn-outline-white:active {
    color: #fff;
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
.hero-stats .stat-item, .hero-stats-bar { background: transparent; border-color: var(--border); }
.hero-stats .stat-number, .hero-stat-num { color: var(--primary); }
.hero-stats .stat-label, .hero-stat-label { color: var(--gray); }
.trust-section .badge-item { border-color: var(--border); }
.value-prop-section .section-eyebrow { color: var(--primary); }
.value-prop-section .lead { color: var(--gray); }
.value-prop-section .btn-primary { background: var(--primary); border-color: var(--primary); }
.subscription, .cta-band, .metric-strip, .section-dark { background: var(--secondary); }
footer .footer-links i, footer .text-accent { color: #a8ccef !important; }
.hero:after, .hero:before, .section-title h2:after, .footer-heading:after { display: none; }
.hero { min-height: 0; }
.hero-content { max-width: 960px; padding-top: 10rem; padding-bottom: 5rem; }
.hero .row { justify-content: flex-start !important; }
.hero .hero-content { text-align: left !important; }
.hero h1 { max-width: 850px; font-size: clamp(2.5rem, 4.8vw, 4.4rem); line-height: 1.08; font-weight: 600; }
.hero p { max-width: 700px; margin-left: 0; margin-right: 0; font-size: 1.13rem; line-height: 1.75; }
.hero .hero-cta { justify-content: flex-start; }
.hero-eyebrow, .section-eyebrow, .agent-tag {
    background: transparent !important; border: 0; border-radius: 0;
    padding: 0; letter-spacing: .1em; font-size: .75rem;
    text-transform: uppercase; box-shadow: none; backdrop-filter: none;
}
.section-eyebrow, .agent-tag { color: var(--primary); }
.hero-eyebrow { color: #506477; }
.section-title { text-align: left; margin-bottom: 2.75rem; }
.section-title h2 { display: block; padding-bottom: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 600; }
.section-title p { margin: 1rem 0 0; }
.section { padding: 4.5rem 0; }
.feature-card, .agent-card, .capability-item, .industry-card, .card-soft,
.benefit-card, .stat-item, .vp-layer {
    border-radius: 3px; box-shadow: none; transition: border-color .2s;
}
.feature-card:hover, .agent-card:hover, .capability-item:hover,
.industry-card:hover, .card-soft:hover, .benefit-card:hover, .vp-layer:hover {
    transform: none; box-shadow: none; border-color: #aab9c2;
}
.agent-card { border-width: 1px 0 0; padding: 1.75rem 0; background: transparent; }
.agent-card-header { margin-bottom: 1rem; }
.segment-card, .audience-card { border-radius: 3px; box-shadow: none; }
.segment-card:hover, .audience-card:hover { transform: none; box-shadow: none; }
.seg-list i { display: none; }
.feature-item { border-bottom: 1px solid var(--border); padding-bottom: .85rem; }
.capability-item { border-width: 1px 0 0; padding: 1.25rem 0; background: transparent; }
.feature-card .card-body { padding-top: 1.75rem; }
.agent-features li { gap: 0; }
.agent-features li i, .badge-item > i, .hero-eyebrow > i,
.section-eyebrow > i, .visual-panel > i { display: none; }
.compliance-badges { gap: 2rem; }
.badge-item { background: transparent; border-radius: 0; padding: .5rem 0; }
.product-image { border-radius: 4px; box-shadow: none; background: var(--base-gradient) !important; }
.vp-layer, .vp-layer-final { background: #fff; border-color: var(--border); backdrop-filter: none; }
.trust-section { padding: 3rem 0; }
.fade-in { opacity: 1; transform: none; transition: none; }
.integration-strip { background: #fff; border-bottom: 1px solid var(--border); padding: 2.75rem 0; }
.integration-layout { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 3rem; }
.integration-eyebrow { display: block; text-transform: uppercase; font-size: .7rem; letter-spacing: .13em; color: var(--gray); margin-bottom: .65rem; }
.integration-copy h2 { font-size: 1.45rem; font-weight: 600; margin-bottom: .65rem; }
.integration-copy p { color: var(--gray); font-size: .92rem; margin-bottom: .65rem; }
.integration-copy a { color: var(--primary); font-size: .88rem; font-weight: 600; text-underline-offset: 4px; }
.integration-logos { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.integration-logos li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.integration-logos img { display: block; max-width: 100%; height: auto; object-fit: contain; }
a:focus-visible, button:focus-visible { outline: 3px solid #739eb8; outline-offset: 4px; }
.roi-section { background: #fff; border-block: 1px solid var(--border); scroll-margin-top: 100px; }
.impact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.impact-column { border-top: 3px solid var(--accent); padding-top: 1.5rem; }
.impact-column h3 { font-size: 1.2rem; min-height: 3rem; margin-bottom: 1rem; }
.impact-column p { font-size: .92rem; color: var(--gray); line-height: 1.65; }
.impact-column .impact-kind { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; margin-bottom: .6rem; }
.impact-column .impact-number { font-size: clamp(2.7rem, 4.6vw, 4rem); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; color: var(--primary); margin-bottom: .75rem; }
.impact-column .impact-label { font-size: 1.05rem; font-weight: 600; color: var(--secondary); min-height: 3.5rem; }
.impact-detail { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1.25rem; }
.impact-detail strong { font-size: .9rem; color: var(--secondary); }
.impact-detail p { margin-top: .5rem; }
.impact-column .impact-pilot { font-size: .82rem; }
.impact-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.impact-footer p { margin: 0; color: var(--gray); }
@media (max-width: 767px) {
    .impact-grid { grid-template-columns: 1fr; gap: 2rem; }
    .impact-column h3, .impact-column .impact-label { min-height: 0; }
}
@media (max-width: 991px) {
    .integration-layout { grid-template-columns: 1fr; gap: 2rem; }
    .integration-logos { justify-content: flex-start; gap: 2.5rem; }
}
@media (max-width: 575px) {
    .hero-content { padding-top: 8rem; padding-bottom: 3rem; }
    .section { padding: 3rem 0; }
    .integration-strip { padding: 2rem 0; }
    .integration-logos { flex-wrap: wrap; gap: 1.75rem 2rem; }
    .integration-cerner { width: 190px; }
    .integration-nphies { width: 125px; }
    .hero .hero-cta { display: flex; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared colour states also cover legacy page styles and Bootstrap defaults. */
:root {
    --primary-soft: #eaf0f4;
    --accent-soft: #e8f0f8;
    --success: #1e40af;
    --bs-primary-rgb: 30, 64, 175;
    --bs-link-color-rgb: 30, 64, 175;
    --bs-link-hover-color-rgb: 30, 58, 138;
    --bs-link-color: #1e40af;
    --bs-link-hover-color: #1e3a8a;
}
a:hover { color: var(--primary-dark); }
.navbar { border-bottom-color: var(--border); }
.nav-link:hover, .nav-link.active, .dropdown-item:hover, .dropdown-item:focus {
    background: var(--primary-soft);
    color: var(--primary) !important;
}
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: 30, 64, 175;
    background-color: var(--primary);
    border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}
.btn-primary:focus-visible, .btn-primary:active {
    background: var(--primary-dark); border-color: var(--primary-dark); color: #fff;
}
.btn-accent:focus-visible, .btn-accent:active {
    background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
}
.btn-outline-primary {
    color: var(--primary); border-color: var(--primary);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
}
.btn-outline-primary:hover, .btn-outline-primary:focus-visible {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.card-icon, .stage-tag { background: var(--primary-soft); color: var(--primary); }
.feature-figure { background: var(--primary-soft); }
.info-panel { background: var(--secondary); }
.seg-link { color: var(--accent) !important; }
.form-control:focus, .form-select:focus, .subscription .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(30, 64, 175, .18);
}
:is(.section-dark, .cta-band, .subscription, .metric-strip, footer) .text-accent {
    color: #a8ccef !important;
}
.value-prop-section .btn-primary:hover {
    background: var(--primary-dark); border-color: var(--primary-dark);
}

/* Brand colours, readable actions and content-led solution page heights. */
:root { --ind-color: #1e40af; --ind-dark: #1e3a8a; --ind-light: #eff6ff; }
html { scroll-padding-top: 110px; }
.hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc, .hero-about {
    height: auto; min-height: 0; padding: 9rem 0 4rem;
}
:is(.hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc, .hero-about) h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.8rem); text-shadow: none;
}
.hero-stats .stat-number {
    background: none; -webkit-text-fill-color: var(--primary); color: var(--primary);
}
.btn-accent, .btn-accent:visited { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover, .btn-accent:focus-visible, .btn-accent:active {
    background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
}
.seg-link { color: var(--primary) !important; }
.challenge-card::before { background: linear-gradient(90deg, #1e40af 0%, #1e40af 78%, #f97316 78%); }
.compliance-section .badge-item > i { display: block !important; color: var(--primary); font-size: 2rem; margin-bottom: 1rem; }
.challenge-icon, .feature-card .icon, .feature-item .icon { color: var(--primary); background: #eff6ff; }
.navbar .icon-sm { display: none; }
.fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
@media (max-width: 767px) {
    .hero-api, .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc, .hero-about { padding-top: 8rem; }
}

/* One type scale and alignment system for every public page. Keep this after
   the legacy page styles; Bootstrap alignment utilities are overridden only
   inside these shared content components. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}
/* Use the same Bootstrap container edges, including older narrow heroes. */
:root { --site-container: 100%; }
body .container.container { max-width: var(--site-container); }
@media (min-width: 576px) { :root { --site-container: 540px; } }
@media (min-width: 768px) { :root { --site-container: 720px; } }
@media (min-width: 992px) { :root { --site-container: 960px; } }
@media (min-width: 1200px) { :root { --site-container: 1140px; } }
@media (min-width: 1400px) { :root { --site-container: 1320px; } }
body :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    line-height: 1.25;
}
body section h2:not(.h4) { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 600; line-height: 1.25; }
body section h3 { font-size: 1.4rem; }
body section h4 { font-size: 1.15rem; }
body .lead { font-size: 1.1rem; font-weight: 400; line-height: 1.7; }

body :is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api,
         .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc) {
    height: auto;
    min-height: 0;
    padding: 9rem 0 4rem;
    margin-bottom: 0;
    text-align: left;
}
body :is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api,
         .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc) :is(.container, .hero-content) {
    text-align: left !important;
}
body .hero-content { max-width: none; padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5); }
body :is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api,
         .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc) h1 {
    max-width: 900px;
    margin: 0 0 1.25rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-shadow: none;
}
body :is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api,
         .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc) p {
    max-width: 760px;
    margin: 0 0 1.75rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
}
body :is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api,
         .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc) .justify-content-center {
    justify-content: flex-start !important;
}
body .hero-stats, body .hero-stats-bar { justify-content: flex-start; margin-top: 2.5rem; gap: 2rem; }
body .hero-stats .stat-item, body .hero-stat-item { text-align: left; }
body .hero-stats .stat-number, body .hero-stat-num { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
body .hero-stats .stat-label, body .hero-stat-label { font-size: .875rem; font-weight: 400; text-transform: none; letter-spacing: 0; }

body .section-title { max-width: none; text-align: left; margin: 0 0 2.75rem; }
body .section-title h2 { margin: 0 0 1rem; padding: 0; font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 600; }
body .section-title p { max-width: 760px; margin: 0; font-size: 1rem; font-weight: 400; line-height: 1.7; }
body :is(.feature-card, .agent-card, .card-soft, .benefit-card, .value-card,
         .challenge-card, .persona-card, .denial-card, .usecase-card, .audience-card) {
    text-align: left !important;
}
body :is(.feature-card, .agent-card, .card-soft, .benefit-card, .value-card,
         .challenge-card, .persona-card, .denial-card, .usecase-card, .audience-card) :is(h3, h4) {
    font-size: 1.25rem; font-weight: 600; line-height: 1.3;
}
body :is(.feature-card, .agent-card, .card-soft, .benefit-card, .value-card,
         .challenge-card, .persona-card, .denial-card, .usecase-card, .audience-card) p {
    font-size: 1rem; font-weight: 400; line-height: 1.7;
}
body .benefit-item { text-align: left; }
body .benefit-item h3 { font-size: 1.25rem; font-weight: 600; }
body .benefit-item p { font-size: 1rem; line-height: 1.7; }
body :is(.cta-section, .cta-band) { text-align: left; }
body :is(.cta-section, .cta-band) p { max-width: 760px; margin: 0 0 1.75rem; font-size: 1.1rem; font-weight: 400; }
body :is(.cta-section, .cta-band) :is(.cta-actions, .justify-content-center) { justify-content: flex-start !important; }

body .navbar, body .navbar.scrolled { padding: .85rem 0; }
body .navbar .navbar-brand { font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; }
body .navbar .nav-link { font-size: .9rem; font-weight: 500; margin: 0; padding: .5rem .6rem !important; }
body .navbar .dropdown-menu { padding: .5rem; border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 8px 24px rgba(15,23,42,.08); }
body .navbar .dropdown-item { font-size: .9rem; font-weight: 500; padding: .65rem .9rem; border-radius: 3px; }
body .navbar .dropdown-item.active { color: var(--primary); background: var(--primary-soft); }
body .btn { font-size: 1rem; font-weight: 600; padding: .78rem 1.35rem; border-radius: 4px; box-shadow: none; }
/* Hover lift comes from deepmed-effects.css; no page-level button shadows. */
body .btn:hover { box-shadow: none; }
body .navbar .btn { font-size: .875rem; padding: .65rem .85rem; white-space: nowrap; }
body footer .footer-heading { font-size: 1.05rem; font-weight: 600; margin-bottom: 1.2rem; padding-bottom: 0; }
body footer .footer-links { list-style: none; padding: 0; margin: 0; }
body footer .footer-links li { margin: 0; }
body footer .footer-links a { display: block; font-size: .94rem; font-weight: 400; line-height: 1.7; padding: .3rem 0; }

/* Match the navy-to-blue gradient in the homepage demo panel. */
:root {
    --base-background: #0f172a;
    --base-gradient: linear-gradient(120deg, #0f172a 0%, var(--primary) 100%);
    --base-text: #fff;
}
body :is(.metric-strip, .info-panel, .vis-box) { background: var(--base-gradient) !important; }
body :is(footer, .cta-band, .cta-section, .subscription) {
    background: var(--base-background);
    background-image: var(--base-gradient);
    color: var(--base-text);
}
body :is(footer, .cta-band, .cta-section, .subscription)::before,
body :is(footer, .cta-band, .cta-section, .subscription)::after { display: none; }
body :is(footer, .cta-band, .cta-section, .subscription) :is(h2, h3, h4, .footer-heading) {
    color: #fff !important;
}
body :is(footer, .cta-band, .cta-section, .subscription) p,
body footer :is(.footer-links a, .copyright, .copyright a) { color: var(--base-text); opacity: 1; }
body footer .footer-links a:hover, body footer .copyright a:hover { color: #fff; }
body :is(.cta-band, .cta-section, .subscription) :is(.btn-outline-light, .btn-outline-white) {
    color: #fff; border-color: #a8ccef; background: transparent;
}
body :is(.cta-band, .cta-section, .subscription) :is(.btn-outline-light, .btn-outline-white):is(:hover, :focus-visible, :active) {
    color: var(--base-background); border-color: #fff; background: #fff;
}
@media (max-width: 1199.98px) {
    body .navbar-collapse { max-height: calc(100dvh - 80px); overflow-y: auto; }
    body .navbar-nav { padding-top: 1rem; gap: .25rem; align-items: stretch; }
    body .navbar .btn { display: block; margin-top: .5rem; }
}
@media (max-width: 767.98px) {
    body :is(.hero, .page-hero, .hero-about, .hero-industry, .hero-api,
             .hero-codedoc, .hero-mcp, .hero-claims, .hero-teledoc) { padding: 7.5rem 0 3rem; }
    body .hero-content { padding-top: 0; padding-bottom: 0; }
    body .section { padding: 3rem 0; }
    body .section-title { margin-bottom: 2rem; }
}

/* The clinical documentation lifecycle (Lifecycle.ascx). One rail of six steps, the same on every page
   that shows it; brackets above it name the product that covers each step, and the page's own steps carry
   the accent. A bracket echoes the [+] of the brand and the [ ] of the Dictate icon. */
.lifecycle-section { background: #fff; border-bottom: 1px solid var(--border); scroll-margin-top: 100px; }
.lifecycle { list-style: none; margin: 0; padding: 0; }
.lifecycle-step { position: relative; }
.lifecycle-node {
    position: relative; z-index: 1; display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--primary);
    color: var(--primary); font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: .8rem; line-height: 1;
}
.lifecycle-step.is-current { background: #fff7ed; }
.lifecycle-step.is-current .lifecycle-node { background: var(--accent); border-color: var(--accent); color: #fff; }
body .lifecycle-step h3 { font-size: 1.05rem; line-height: 1.35; margin: .2rem 0 .35rem; }
body .lifecycle-step p { font-size: .875rem; color: var(--gray); line-height: 1.55; margin: 0; }
body .lifecycle-title a { color: var(--secondary); text-decoration: none; }
.lifecycle-title a::after { content: ""; position: absolute; inset: 0; }
body .lifecycle-step:hover .lifecycle-title a, body .lifecycle-title a:focus-visible {
    color: var(--primary); text-decoration: underline; text-underline-offset: 4px;
}
.lifecycle-step .lifecycle-title a:focus-visible { outline: 0; }
/* The step outlines only for keyboard focus (the link's own ring is off; its ::after covers the step). */
.lifecycle-step:has(.lifecycle-title a:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
@supports not selector(:has(*)) { .lifecycle-step:focus-within { outline: 3px solid var(--primary); outline-offset: 2px; } }
.lifecycle-section .section-title p { text-wrap: pretty; }
.lifecycle-module { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gray); }
.lifecycle-here {
    display: inline-block; margin-left: .5rem; font-size: .75rem; font-weight: 600; line-height: 1.5;
    letter-spacing: 0; text-transform: none; color: #fff; background: var(--accent); border-radius: 2px; padding: .05rem .4rem;
}
.lifecycle-handoff { position: relative; z-index: 1; font-size: .75rem; color: var(--gray); text-wrap: balance; }
/* Connectors paint above the next step's tint (steps make no stacking context), nodes above the connectors. */
.lifecycle-step:not(:last-child)::before { z-index: 1; }
.lifecycle-step .lifecycle-node { z-index: 2; }
.lifecycle-footer {
    margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
.lifecycle-footer p { margin: 0; color: var(--gray); max-width: 760px; }
.lifecycle-footer a { color: var(--primary); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 992px) {
    .lifecycle-groups, .lifecycle { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lc-span-dictate { grid-column: 1 / 2; }
    .lc-span-platform { grid-column: 2 / 7; }
    .lifecycle-group {
        padding: 0 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
        color: var(--primary); line-height: 1.6;
    }
    .lifecycle-group::after {
        content: ""; display: block; height: 8px; margin-top: .4rem;
        border: 2px solid #b5c7da; border-bottom: 0; border-radius: 2px 2px 0 0;
    }
    .lifecycle-groups { align-items: end; }
    .lifecycle-group.is-current { color: var(--accent); }
    .lifecycle-group.is-current::after { border-color: var(--accent); }
    .lifecycle { margin-top: .5rem; }
    .lifecycle-step { padding: 1rem 1rem 1.25rem; }
    .lifecycle-step:not(:last-child)::before {
        content: ""; position: absolute; top: calc(1rem + 17px); left: calc(1rem + 40px); right: -1rem;
        border-top: 2px solid #b5c7da;
    }
    .lifecycle-step.is-handoff::before { border-top: 2px dashed var(--primary); }
    .lifecycle-handoff { position: absolute; top: calc(1rem + 22px); left: calc(1rem + 44px); right: 0; line-height: 1.3; }
    .lifecycle-product {
        position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
        overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
    }
    .lifecycle-module { display: block; margin-top: .9rem; height: 1.1rem; line-height: 1.1rem; overflow: hidden; }
    .has-group-current .lifecycle-step .lifecycle-here { display: none; }
    .lifecycle-step > .lifecycle-here { position: absolute; top: calc(1rem + 24px); left: calc(1rem + 44px); margin: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Narrow columns: the hand-off note runs to three lines, so every title starts a little lower. */
    .lifecycle-module { margin-top: 1.5rem; }
}
@media (max-width: 991.98px) {
    .lifecycle-groups { display: none; }
    .lifecycle { max-width: 40rem; }
    .lifecycle-step {
        display: grid; grid-template-columns: 36px auto minmax(0, 1fr); column-gap: 1rem;
        padding: .75rem .75rem .9rem;
    }
    .lifecycle-node { grid-column: 1; grid-row: 1 / span 6; }
    .lifecycle-step > :not(.lifecycle-node) { grid-column: 2 / -1; }
    .lifecycle-step > .lifecycle-product { grid-column: 2; grid-row: 1; align-self: center; }
    .lifecycle-step > .lifecycle-here { grid-column: 3; grid-row: 1; justify-self: start; align-self: center; margin-left: .5rem; }
    .lifecycle-step:not(.is-group-start) > .lifecycle-here { grid-column: 2 / -1; margin-left: 0; }
    .lifecycle-step:not(:last-child)::before {
        content: ""; position: absolute; top: calc(.75rem + 36px); bottom: -.75rem; left: calc(.75rem + 17px);
        border-left: 2px solid #b5c7da;
    }
    .lifecycle-step.is-handoff::before { border-left: 2px dashed var(--primary); }
    .lifecycle-handoff { position: static; margin-top: .35rem; font-size: .8125rem; }
    .lifecycle-product { display: none; }
    .lifecycle-step.is-group-start > .lifecycle-product {
        display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
        color: var(--primary); line-height: 1.5;
    }
    .lifecycle-step.is-group-start.is-current > .lifecycle-product { color: var(--accent); }
    .lifecycle-module { display: inline; margin-right: .5rem; }
    .lifecycle-module:empty { display: none; }
}

/* App store badges (StoreBadges.ascx): the official artwork, unaltered (sources in images/stores/SOURCES.md).
   The Google Play PNG carries 41px of transparent padding around its 564x168 badge; a wrapper crops it so both
   black shapes render at exactly --badge-h. A store without a link shows the badge with no link, never faded. */
.store-badges { --badge-h: 44px; }
.store-badges--sm { --badge-h: 40px; }
.store-badges-list { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--badge-h) * .3); list-style: none; margin: 0; padding: 0; }
.store-badges-list > li { margin: 0; padding: 0; }
.store-badge { display: block; line-height: 0; text-decoration: none; }
.store-badge img { display: block; max-width: none; }
.store-badge--apple img { height: var(--badge-h); width: auto; }
.store-badge-crop { display: block; overflow: hidden; height: var(--badge-h); width: calc(var(--badge-h) * 564 / 168); }
.store-badge--play img { height: calc(var(--badge-h) * 250 / 168); width: auto; margin: calc(var(--badge-h) * -41 / 168); }
a.store-badge:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.store-badges-note { margin: .6rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--gray); }
.store-badges-note--only { margin: 0; }

/* Footer: the store trademark line, and room for the fixed "Top" button on phones. */
footer .legal-note { font-size: .8125rem; color: #dbe7f5; margin: .5rem 0 0; }
@media (max-width: 575.98px) { footer .copyright { padding-bottom: 4.5rem; } }