/* ============================================================
   udg_styles.css — supplemental styles for design-review pages ONLY
   Layered on top of base_styles.css. Not part of the production design
   system — safe to delete once the real Flask templates exist.
   ============================================================ */

/* Header is no longer position:fixed (see base.html's new .site-header
   pattern), so main no longer needs top-padding compensation for it. */

.udg-section {
    padding: var(--theme-space-2xl) 0;
}

.udg-container {
    max-width: var(--theme-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.udg-eyebrow {
    display: inline-block;
    background: var(--theme-accent);
    color: var(--theme-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: var(--theme-radius-pill);
    margin-bottom: var(--theme-space-md);
}

.udg-heading {
    font-size: clamp(1.875rem, 3.3vw, 2.75rem) !important;
    font-weight: 700;
    line-height: 1.08;
    color: var(--theme-text);
    margin-bottom: var(--theme-space-sm);
    letter-spacing: -0.035em;
}

.udg-subhead {
    color: var(--theme-text-secondary);
    font-size: 1.125rem;
    max-width: 620px;
}

.udg-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Placeholder callouts for the designer ---------- */
/* Use for anything that needs a real graphic, illustration, or photo */
.ph-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        var(--theme-surface),
        var(--theme-surface) 10px,
        var(--theme-accent-light) 10px,
        var(--theme-accent-light) 20px
    );
    border: 2px dashed var(--theme-primary);
    border-radius: var(--theme-radius-lg);
    color: var(--theme-primary);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1.5rem;
    min-height: 180px;
}

.rl-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--theme-primary);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 1.5rem;
    min-height: 180px;
}

.ph-graphic small {
    font-weight: 400;
    color: var(--theme-text-secondary);
    font-size: 0.8125rem;
}

.ph-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

/* Use for a single icon-sized asset (nav, feature card, list item, etc.) */
.ph-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: var(--theme-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
    flex-shrink: 0;
}

/* ---------- Reusable content blocks ---------- */
.udg-grid {
    display: grid;
    gap: var(--theme-space-lg);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.udg-card {
    background: var(--theme-card-bg);
    color: var(--theme-card-text);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-xl);
    padding: var(--theme-space-xl);
    box-shadow: var(--theme-shadow-sm);
}

/* Card body copy sits on a white card in BOTH light and dark mode, so it
   must use the card-scoped muted token (stays dark) rather than
   --theme-text-secondary, which flips light in dark mode. !important
   overrides the inline color set on the description paragraphs. */
.udg-card p {
    color: var(--theme-card-muted) !important;
}

.step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-primary);
    color: var(--theme-on-primary);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: var(--theme-space-md);
}

.hero-udg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--theme-space-2xl);
    align-items: center;
}

@media (max-width: 900px) {
    .hero-udg { grid-template-columns: 1fr; }
}

/* ---------- Trust bar: logo strip + compliance badges ---------- */
.trust-bar {
    padding: var(--theme-space-xl) 0;
    border-top: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-surface);
}

.trust-bar-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-muted);
    margin-bottom: var(--theme-space-lg);
}

.logo-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--theme-space-xl);
    margin-bottom: var(--theme-space-lg);
}

.badge-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.compliance-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: var(--theme-primary);
    color: var(--theme-on-primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: var(--theme-radius-pill);
}

.compliance-badge i {
    font-size: 0.9375rem;
}

/* ---------- Case study / proof card ---------- */
.case-card {
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-xl);
    padding: var(--theme-space-xl);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--theme-space-lg);
    align-items: center;
}

@media (max-width: 700px) {
    .case-card { grid-template-columns: 1fr; }
}

.case-metric {
    text-align: center;
    padding: 0.75rem 1.25rem;
    border-left: 1px solid var(--theme-border);
}

@media (max-width: 700px) {
    .case-metric { border-left: none; border-top: 1px solid var(--theme-border); padding-top: 1rem; }
}

.case-metric strong {
    display: block;
    font-size: 1.75rem;
    color: var(--theme-primary);
    font-weight: 700;
}

.case-metric span {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary);
}

/* ---------- FAQ accordion (native details/summary, no JS needed) ---------- */
.faq-item {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--theme-card-bg);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1.1rem 1.4rem;
    font-weight: 600;
    color: var(--theme-card-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--theme-primary);
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-item p {
    padding: 0 1.4rem 1.25rem;
    color: var(--theme-card-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ---------- Card style option A: top-image card ---------- */
.card-top-image {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-xl);
    overflow: hidden;
    background: var(--theme-card-bg);
    box-shadow: var(--theme-shadow-sm);
}

.card-top-image .ph-graphic {
    min-height: 200px;
    border-radius: 0;
    border-width: 0 0 2px 0;
}

.card-top-image .card-top-image-body {
    padding: var(--theme-space-lg);
}

/* ---------- Card style option B: full-background scrim card ---------- */
.card-bg-scrim {
    position: relative;
    min-height: 340px;
    border-radius: var(--theme-radius-xl);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: repeating-linear-gradient(
        45deg,
        var(--theme-surface),
        var(--theme-surface) 10px,
        var(--theme-accent-light) 10px,
        var(--theme-accent-light) 20px
    );
    border: 2px dashed var(--theme-primary);
}

.card-bg-scrim .ph-label-corner {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--theme-primary);
    background: var(--theme-background);
    border: 2px dashed var(--theme-primary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: var(--theme-radius-pill);
}

.card-bg-scrim .scrim {
    position: relative;
    width: 100%;
    padding: 3rem var(--theme-space-lg) var(--theme-space-lg);
    background: linear-gradient(to top, rgba(15, 23, 42, 0.88) 0%, rgba(15, 23, 42, 0.55) 60%, transparent 100%);
    color: #fff;
}

.card-bg-scrim .scrim h3,
.card-bg-scrim .scrim p { color: #fff; }

.style-option-label {
    text-align: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--theme-text);
}

.style-option-note {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--theme-text-secondary);
    margin-top: 0.75rem;
}

/* ---------- Footer: matches other_sercurity.html / other_pricing.html pattern ---------- */
.footer {
    padding: 5rem 0 2.25rem;
    color: #fff;
    background: #070d16;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 3rem;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        gap: 1.25rem;
    }
    .footer-grid a {
        font-size: 0.8125rem;
    }
}

.footer-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
}

.footer-brand .brand-mark {
    width: 22px;
    height: 27px;
    display: block;
    object-fit: contain;
}

.footer-brand .logo strong {
    font-size: 1.125rem;
    letter-spacing: 0.08em;
}

.footer-brand p {
    max-width: 34ch;
    margin: 1.125rem 0 0;
    color: #98a2b0;
    font-size: 0.90625rem;
    line-height: 1.6;
}

.footer-grid > div:not(.footer-brand) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-grid strong {
    margin-bottom: 0.375rem;
    color: #9aa4b1;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-grid a {
    width: fit-content;
    color: #ccd2da;
    font-size: 0.875rem;
    text-decoration: none;
}

.footer-grid a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-bottom {
    margin-top: 4.5rem;
    padding-top: 1.625rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.625rem;
    border-top: 1px solid #1d2632;
    color: #9aa4b1;
    font-size: 0.78125rem;
}

@media (max-width: 600px) {
    .footer {
        padding: 4rem 0 1.75rem;
    }
    .footer-bottom {
        margin-top: 3rem;
        flex-direction: column;
    }
}

.udg-table .compare-highlight {
    background: var(--theme-accent);
    font-weight: 600;
    color: var(--theme-primary);
    border-left: 2px solid var(--theme-primary);
    border-right: 2px solid var(--theme-primary);
}

.udg-table thead .compare-highlight {
    background: var(--theme-primary);
    color: var(--theme-on-primary);
    border-top: 2px solid var(--theme-primary);
}

/* ---------- Quote request modal ---------- */
.quote-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.quote-modal-overlay.is-open {
    display: flex;
}

.quote-modal {
    background: var(--theme-card-bg);
    color: var(--theme-card-text);
    border-radius: var(--theme-radius-xl);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--theme-space-xl);
    position: relative;
    box-shadow: var(--theme-shadow-md);
}

.quote-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--theme-surface);
    color: var(--theme-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-modal-close:hover {
    background: var(--theme-border);
}

.quote-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
    .quote-checkbox-grid { grid-template-columns: 1fr; }
}

.quote-checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    padding: 0.6rem 0.75rem;
}

/* ---------- Hero with background image (real site) ---------- */
.hero-bg {
    position: relative;
    background-image: linear-gradient(120deg, rgba(6, 12, 28, 0.82) 0%, rgba(8, 20, 45, 0.6) 55%, rgba(8, 20, 45, 0.35) 100%), url("/static/udg/images/hero-bg.png");
    background-size: cover;
    background-position: center;
    color: #F8FAFC;
    min-height: 90vh;
    display: flex;
    align-items: center;
    padding: 5rem 0 5.5rem;
}

.hero-bg .udg-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: #EFF6FF;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero-bg h1 {
    color: #FFFFFF;
}

.hero-bg .udg-subhead {
    color: #E2E8F0;
    max-width: 680px;
}

.hero-bg .hero-footnote {
    color: #CBD5E1;
    padding-bottom: 20px
}

.hero-bg .hero-footnote a {
    color: #93C5FD;
}

.hero-bg .hero-content {
    max-width: 820px;
}


.btn-gold {
    background: #c8a868 !important;
    color: #111729 !important;
    border-color: #c8a868 !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-gold:hover,
.btn-gold:focus {
    background: #b8965a !important;
    border-color: #b8965a !important;
    color: #111729 !important;
}

.hero-cta {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-cta:hover,
.hero-cta:focus {
    background: #c8250c !important;
    color: var(--theme-on-primary) !important;
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 2.25rem;
    color: var(--theme-primary);
    display: inline-block;
    line-height: 1;
}

#features .feature-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #FBF7EA;
    color: #7d621b;
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

/* ---------- Operations section: illustrated feature cards ---------- */
.feature-grid {
    margin-top: var(--theme-space-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.875rem;
}

@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    background: var(--theme-card-bg);
}

.feature-visual {
    height: 322px;
    display: grid;
    place-items: center;
    background: #E9EAF4;
    padding: 1.5rem;
}

.feature-copy {
    padding: 1.875rem;
}

.feature-copy h3 {
    max-width: 22ch;
    margin: 0.75rem 0 0.625rem;
    color: var(--theme-card-text);
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.feature-copy p {
    margin: 0 0 1.125rem;
    color: var(--theme-card-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* -- Card 1: patient journey checklist -- */
.journey-ui {
    width: 100%;
    max-width: 305px;
    padding: 1.375rem;
    border-radius: var(--theme-radius);
    background: #fff;
    box-shadow: 0 18px 35px rgba(39, 48, 91, 0.1);
}

.journey-top {
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #171821;
}

.journey-top b {
    color: #343EAB;
}

.journey-ui > span:not(.journey-top) {
    padding: 0.7rem 0;
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    border-bottom: 1px solid #eee;
    font-size: 0.6875rem;
    color: #171821;
}

.journey-ui i {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border: 1px solid #d5d7df;
    border-radius: 50%;
    font-style: normal;
    font-size: 0.625rem;
}

.journey-ui i.done {
    color: #fff;
    background: #4c9a82;
    border-color: #4c9a82;
}

.journey-ui em {
    color: #8b8e98;
    font-style: normal;
    font-size: 0.6875rem;
}

/* -- Card 2: AI assistant chat -- */
.assistant-ui {
    width: 100%;
    max-width: 310px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.assistant-prompt {
    align-self: flex-end;
    padding: 0.75rem 0.9rem;
    border-radius: 10px 10px 2px 10px;
    color: #fff;
    background: #343EAB;
    font-size: 0.6875rem;
}

.assistant-result {
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0.5rem;
    border-radius: 3px 11px 11px 11px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(37, 43, 98, 0.09);
}

.assistant-result i {
    font-size: 1.25rem;
    color: #343EAB;
}

.assistant-result b {
    font-size: 0.75rem;
    color: #171821;
}

.assistant-result small,
.assistant-result em {
    grid-column: 2;
}

.assistant-result small {
    color: #6e7280;
    font-size: 0.625rem;
}

.assistant-result em {
    width: fit-content;
    padding: 0.3rem 0.5rem;
    color: #5d5020;
    background: #f7eac6;
    border-radius: 3px;
    font-size: 0.5625rem;
    font-style: normal;
}

/* -- Card 3: security checklist -- */
.security-ui {
    width: 100%;
    max-width: 272px;
    padding: 1.625rem;
    text-align: center;
    border-radius: var(--theme-radius);
    color: #fff;
    background: #1c2264;
    box-shadow: 0 20px 40px rgba(28, 34, 100, 0.22);
}

.security-ui > span {
    width: 54px;
    height: 54px;
    margin: 0 auto 0.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #c8a868;
    background: rgba(255, 255, 255, 0.07);
    font-size: 1.5rem;
}

.security-ui strong,
.security-ui > b {
    display: block;
}

.security-ui strong {
    font-size: 0.75rem;
}

.security-ui > b {
    margin: 0.4rem 0 1.125rem;
    color: #b6bce3;
    font-size: 0.625rem;
    font-weight: 400;
}

.security-ui > i {
    padding: 0.55rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    color: #dde0f2;
    font-size: 0.625rem;
    font-style: normal;
    text-align: left;
}

.security-ui > i i {
    flex: 0 0 auto;
    color: #7ad9b4;
    font-size: 0.75rem;
}

/* -- Card 4: uptime / managed chart -- */
.managed-ui {
    width: 100%;
    max-width: 330px;
    padding: 1.5625rem;
    border-radius: var(--theme-radius);
    background: #fff;
    box-shadow: 0 18px 35px rgba(39, 48, 91, 0.1);
}

.managed-ui .uptime b {
    display: block;
    font-size: 1.5rem;
    color: #171821;
}

.managed-ui .uptime small {
    color: #6e7280;
    font-size: 0.6875rem;
}

.managed-chart {
    height: 110px;
    margin-top: 1.125rem;
    display: flex;
    align-items: flex-end;
    gap: 0.44rem;
    border-bottom: 1px solid #ddd;
    background: repeating-linear-gradient(to top, #eee 0 1px, transparent 1px 38px);
}

.managed-chart i {
    width: 100%;
    background: #bfc3e5;
    border-radius: 2px 2px 0 0;
}

.managed-chart i:nth-child(n+7) {
    background: #343EAB;
}

.managed-ui .healthy {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #171821;
}

.managed-ui .healthy i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4c9a82;
    flex: 0 0 auto;
}

/* ---------- Security page hero ---------- */
.security-hero {
    position: relative;
    overflow: hidden;
    padding: 6.5625rem 0;
    color: #0F172A;
    background: linear-gradient(135deg, #ffffff 0 62%, #f8f4e8 62%);
}

.security-hero::after {
    content: "";
    width: 560px;
    height: 560px;
    position: absolute;
    right: -270px;
    bottom: -360px;
    border: 1px solid rgba(217, 183, 93, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(217, 183, 93, 0.08), 0 0 0 144px rgba(217, 183, 93, 0.04);
    pointer-events: none;
}

.security-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.8fr;
    gap: 5.625rem;
    align-items: center;
}

@media (max-width: 900px) {
    .security-hero-grid {
        grid-template-columns: 1fr;
        gap: 2.875rem;
    }
}

.security-hero h1 {
    max-width: 14ch;
    margin: 1.125rem 0 1.4375rem;
    color: #0F172A;
    font-size: clamp(2.625rem, 5.1vw, 4.25rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.security-hero h1 em {
    color: #7d621b;
    font-style: normal;
}

@media (max-width: 600px) {
    .security-hero h1 {
        font-size: 2.4375rem;
    }
}

.security-hero-grid > div:first-child > p {
    max-width: 61ch;
    margin: 0;
    color: #596579;
    font-size: 1.125rem;
    line-height: 1.65;
}

@media (max-width: 600px) {
    .security-hero-grid > div:first-child > p {
        font-size: 1rem;
    }
}

.subpage-hero-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.375rem;
}

.security-hero-card {
    padding: 2.125rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    background: var(--theme-card-bg);
    box-shadow: 0 28px 65px rgba(24, 26, 49, 0.09);
}

.security-hero-card > span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #171821;
    background: #c8a868;
    font-size: 1.625rem;
}

.security-hero-card > strong {
    margin: 1.4375rem 0 0.5rem;
    display: block;
    color: var(--theme-card-text, var(--theme-text));
    font-size: 1.4375rem;
}

.security-hero-card > p {
    margin: 0;
    color: var(--theme-card-muted, var(--theme-text-secondary));
    font-size: 0.875rem;
    line-height: 1.6;
}

.security-hero-card ul {
    margin: 1.5625rem 0 0;
    padding: 1.375rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9375rem;
    border-top: 1px solid var(--theme-border);
    list-style: none;
}

@media (max-width: 600px) {
    .security-hero-card ul {
        grid-template-columns: 1fr;
    }
}

.security-hero-card li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--theme-card-muted, var(--theme-text-secondary));
    font-size: 0.78125rem;
    line-height: 1.45;
}

.security-hero-card li i {
    flex: 0 0 auto;
    color: #7d621b;
    font-size: 0.875rem;
}

/* ---------- 4-stat compliance strip ---------- */
.security-standard {
    padding: 1.875rem 0;
    background: #c8a868;
}

.standard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .standard-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 0;
    }
    .standard-grid > div:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .standard-grid {
        grid-template-columns: 1fr;
    }
    .standard-grid > div {
        padding: 0.875rem 0 !important;
        border-top: 1px solid rgba(114, 89, 20, 0.23);
        border-left: 0 !important;
    }
    .standard-grid > div:first-child {
        border-top: 0;
    }
}

.standard-grid > div {
    padding: 0.25rem 1.5625rem;
    border-left: 1px solid rgba(114, 89, 20, 0.23);
}

.standard-grid > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.standard-grid span,
.standard-grid strong {
    display: block;
}

.standard-grid span {
    color: #493909;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.standard-grid strong {
    margin-top: 0.3125rem;
    color: #171821;
    font-size: 0.875rem;
}

/* ---------- Controls: 6-item numbered grid ---------- */
.controls-section {
    padding: var(--theme-space-2xl) 0;
    background: var(--theme-surface);
}

.controls-grid {
    margin-top: 3.375rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.125rem;
}

@media (max-width: 900px) {
    .controls-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .controls-grid {
        grid-template-columns: 1fr;
        margin-top: 2.625rem;
    }
}

.controls-grid article {
    padding: 1.75rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-card-bg);
}

.controls-grid article > span {
    color: #7d621b;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.controls-grid h3 {
    margin: 1.125rem 0 0.5625rem;
    color: var(--theme-card-text, var(--theme-text));
    font-size: 1.1875rem;
    letter-spacing: -0.02em;
}

.controls-grid p {
    margin: 0;
    color: var(--theme-card-muted, var(--theme-text-secondary));
    font-size: 0.875rem;
    line-height: 1.65;
}

/* ---------- Lifecycle steps ---------- */
.security-lifecycle {
    padding: var(--theme-space-2xl) 0;
    color: var(--theme-text);
    background: var(--theme-background);
}

.lifecycle-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 6.25rem;
    align-items: center;
}

@media (max-width: 900px) {
    .lifecycle-grid {
        grid-template-columns: 1fr;
        gap: 2.875rem;
    }
}

.lifecycle-grid h2 {
    max-width: 15ch;
    margin: 1rem 0 1.125rem;
    color: var(--theme-text);
}

.lifecycle-grid > div > p {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 1rem;
    line-height: 1.65;
}

.lifecycle-grid ol {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    list-style: none;
}

.lifecycle-grid li {
    padding: 1.1875rem 0;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 0.875rem;
    border-top: 1px solid var(--theme-border);
}

.lifecycle-grid li:last-child {
    border-bottom: 1px solid var(--theme-border);
}

.lifecycle-grid li > b {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #171821;
    background: #c8a868;
    font-size: 0.75rem;
    font-style: normal;
}

.lifecycle-grid li strong {
    display: block;
    color: var(--theme-text);
    font-size: 0.9375rem;
}

.lifecycle-grid li small {
    display: block;
    margin-top: 0.25rem;
    color: var(--theme-text-secondary);
    font-size: 0.84375rem;
    line-height: 1.55;
}

/* ---------- Boundary / honest-disclaimer section ---------- */
.security-boundary {
    padding: var(--theme-space-2xl) 0;
    background: var(--theme-surface);
}

.boundary-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 5.625rem;
    align-items: start;
}

@media (max-width: 900px) {
    .boundary-grid {
        grid-template-columns: 1fr;
        gap: 2.875rem;
    }
}

.boundary-grid > div:first-child > span {
    width: 54px;
    height: 54px;
    margin-bottom: 1.375rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #171821;
    background: #c8a868;
    font-size: 1.5rem;
}

.boundary-grid h2 {
    max-width: 12ch;
    margin: 0;
    color: var(--theme-text);
}

@media (max-width: 900px) {
    .boundary-grid h2 {
        max-width: 18ch;
    }
}

.boundary-grid > div:last-child > p {
    margin: 0 0 1.0625rem;
    color: var(--theme-text-secondary);
    font-size: 0.96875rem;
    line-height: 1.7;
}

.boundary-grid .text-link {
    margin-top: 0.375rem;
}

/* ---------- Subpage CTA (cream, centered) ---------- */
.subpage-cta {
    padding: var(--theme-space-2xl) 0;
    text-align: center;
    background: #f8f4e8;
}

.subpage-cta h2 {
    max-width: 19ch;
    margin: 0.9375rem auto 1.0625rem;
    color: #0F172A;
}

.subpage-cta p {
    max-width: 54ch;
    margin: 0 auto;
    color: #596579;
    font-size: 1rem;
    line-height: 1.65;
}

.subpage-cta .nav-signup-btn {
    margin-top: 1.75rem;
}

/* ---------- Pricing hero ---------- */
.pricing-hero {
    position: relative;
    overflow: hidden;
    padding: 6.5625rem 0 5rem;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0 62%, #f8f4e8 62%);
}

.pricing-hero::after {
    content: "";
    width: 500px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: -320px;
    transform: translateX(-50%);
    border: 1px solid rgba(217, 183, 93, 0.35);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(217, 183, 93, 0.06), 0 0 0 144px rgba(217, 183, 93, 0.03);
    pointer-events: none;
}

.pricing-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.pricing-hero h1 {
    margin: 1.125rem 0 1.25rem;
    color: #0F172A;
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.pricing-hero h1 em {
    color: #7d621b;
    font-style: normal;
}

.pricing-hero > .pricing-hero-inner > p {
    max-width: 54ch;
    margin: 0 auto;
    color: #596579;
    font-size: 1.125rem;
    line-height: 1.65;
}

.subpage-text-link {
    color: #7d621b;
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
}

.subpage-text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Pricing plans grid ---------- */
.pricing-plans {
    padding: var(--theme-space-2xl) 0;
    background: var(--theme-surface);
}

.pricing-page-grid {
    margin-top: 3.625rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

@media (max-width: 900px) {
    .pricing-page-grid {
        grid-template-columns: 1fr;
        margin-top: 2.625rem;
    }
}

.pricing-plan {
    padding: 2.125rem 1.75rem 1.875rem;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    background: var(--theme-card-bg);
}

.pricing-plan.featured {
    border-color: #c8a868;
    box-shadow: 0 24px 56px rgba(24, 26, 49, 0.09);
}

.tier-flag {
    position: absolute;
    top: -12px;
    left: 1.75rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 20px;
    color: #171821;
    background: #c8a868;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pricing-plan h3 {
    margin: 0;
    color: var(--theme-card-text, var(--theme-text));
    font-size: 1.375rem;
    letter-spacing: -0.025em;
}

.plan-copy {
    margin: 0.625rem 0 0;
    color: var(--theme-card-muted, var(--theme-text-secondary));
    font-size: 0.9375rem;
    line-height: 1.5;
}

.plan-cost {
    margin-top: 1.375rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
}

.plan-cost > span {
    padding: 1.125rem 0.625rem 1.125rem 0;
    display: flex;
    flex-direction: column;
}

.plan-cost > span + span {
    padding-left: 1.125rem;
    border-left: 1px solid var(--theme-border);
}

.plan-cost small {
    color: var(--theme-card-muted, var(--theme-text-secondary));
    font-size: 0.6875rem;
    font-weight: 700;
}

.plan-cost strong {
    margin-top: 0.3125rem;
    color: var(--theme-card-text, var(--theme-text));
    font-size: 1.3125rem;
    letter-spacing: -0.03em;
}

.pricing-plan ul {
    margin: 1.5625rem 0 1.75rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
}

.pricing-plan li {
    display: flex;
    gap: 0.5625rem;
    align-items: flex-start;
    color: var(--theme-card-muted, var(--theme-text-secondary));
    font-size: 0.84375rem;
    line-height: 1.45;
}

.pricing-plan li i {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #171821;
    background: #c8a868;
    font-size: 0.625rem;
}

.pricing-plan > a {
    width: 100%;
    margin-top: auto;
}

.outline-button {
    min-height: 46px;
    padding: 0 1.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    border: 1px solid var(--theme-text);
    border-radius: 6px;
    color: var(--theme-text);
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.outline-button:hover {
    color: var(--theme-background);
    background: var(--theme-text);
}

.pricing-disclaimer {
    max-width: 820px;
    margin: 2.125rem auto 0;
    text-align: center;
    color: var(--theme-text-muted);
    font-size: 0.78125rem;
    line-height: 1.65;
}

/* ---------- Included after launch ---------- */
.included-section {
    padding: var(--theme-space-2xl) 0;
    background: var(--theme-background);
}

.included-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.625rem;
    align-items: center;
}

@media (max-width: 900px) {
    .included-grid {
        grid-template-columns: 1fr;
        gap: 2.875rem;
    }
}

.included-grid h2 {
    max-width: 17ch;
    margin: 1rem 0 1.125rem;
    color: var(--theme-text);
}

.included-grid > div > p {
    max-width: 56ch;
    margin: 0 0 1.625rem;
    color: var(--theme-text-secondary);
    font-size: 1rem;
    line-height: 1.65;
}

.included-grid ul {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    list-style: none;
}

@media (max-width: 600px) {
    .included-grid ul {
        grid-template-columns: 1fr;
    }
}

.included-grid li {
    min-height: 86px;
    padding: 1.125rem;
    display: flex;
    gap: 0.6875rem;
    align-items: flex-start;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
    color: var(--theme-text);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.45;
}

.included-grid li i {
    flex: 0 0 auto;
    color: #7d621b;
    font-size: 1rem;
}

/* ---------- Sticky top group: announcement bar + header ----------
   Wrapping both in one sticky container (rather than fixed-positioning
   each separately) means the browser reserves their combined space in
   normal flow automatically -- no manual main-padding math needed, and
   if the announcement text ever wraps to two lines on a narrow phone,
   the whole group just grows to fit instead of covering page content. */
.site-header-sticky-wrap {
    position: sticky;
    top: 0;
    z-index: 200;
}

/* ---------- Announcement bar ---------- */
.announcement {
    min-height: 38px;
    padding: 0.5rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.625rem;
    text-align: center;
    color: #fff;
    background: #101322;
    font-size: 0.8125rem;
}

.announcement a {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    color: #c8a868;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Site header (logo / desktop nav / actions) ---------- */
.site-header {
    height: 72px;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 3rem;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-background);
    position: relative;
}

@media (max-width: 1180px) {
    .site-header {
        gap: 1.5rem;
        padding: 0 1.5rem;
    }
}

@media (max-width: 900px) {
    .site-header {
        height: 66px;
        padding: 0 1.25rem;
        gap: 0.75rem;
        grid-template-columns: auto 1fr auto;
    }
}

.site-header .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text);
    text-decoration: none;
}

.site-header .brand-mark {
    width: 22px;
    height: 27px;
    display: block;
    object-fit: contain;
}

.site-header .logo strong {
    font-size: 1.125rem;
    letter-spacing: 0.08em;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (max-width: 1180px) {
    .desktop-nav {
        gap: 1.25rem;
    }
}

.desktop-nav a {
    color: var(--theme-text);
    text-decoration: none;
}

.desktop-nav a:hover {
    color: #7d621b;
}

.desktop-nav a.active {
    color: #7d621b;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (max-width: 1180px) {
    .header-actions {
        gap: 1rem;
    }
}

.header-actions a:not(.header-button) {
    color: var(--theme-text);
    text-decoration: none;
}

.header-button {
    min-height: 42px;
    padding: 0 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    color: #171821;
    background: #c8a868;
    font-size: 0.90625rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.header-button:hover {
    transform: translateY(-1px);
    background: #b8965a;
}

/* ---------- Mobile menu: native <details>, no JS required ---------- */
.mobile-nav-menu {
    display: none;
    justify-self: end;
}

.mobile-nav-menu summary {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    background: var(--theme-primary);
    list-style: none;
    cursor: pointer;
}

.mobile-nav-menu summary::-webkit-details-marker {
    display: none;
}

.mobile-nav-menu summary span {
    width: 18px;
    height: 2px;
    background: var(--theme-background);
}

.mobile-nav-menu nav {
    position: absolute;
    z-index: 20;
    top: 74px;
    right: 14px;
    left: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-card-bg);
    box-shadow: 0 15px 40px rgba(25, 28, 58, 0.13);
}

.mobile-nav-menu nav a:not(.header-button) {
    padding: 0.8125rem;
    color: var(--theme-card-text, var(--theme-text));
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
}

.mobile-nav-menu nav a.header-button {
    justify-content: center;
    margin-top: 0.25rem;
}

/* Persistent "Get Started" CTA shown next to the hamburger on mobile
   (desktop already has "Book a Consultation" in .header-actions) */
.mobile-cta {
    display: none;
    min-height: 40px;
    padding: 0 0.9rem;
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Responsive nav toggle — must come after the base .desktop-nav /
   .header-actions / .mobile-nav-menu rules above so it actually wins
   the cascade at matching specificity (placing this earlier, before
   those base rules, let the later unconditional declarations silently
   override it and break the mobile menu). */
@media (max-width: 900px) {
    .desktop-nav,
    .header-actions {
        display: none;
    }
    /* Hamburger moves to the first grid column (left of the logo);
       logo stays left-aligned in the middle column; CTA takes the
       last column on the right. */
    .mobile-nav-menu {
        display: block;
        order: -1;
        justify-self: start;
    }
    .site-header .logo {
        justify-self: start;
    }
    .mobile-cta {
        display: inline-flex;
        justify-self: end;
    }
}

/* ---------- Integrations hero (same visual pattern as pricing-hero) ---------- */
.integrations-hero {
    position: relative;
    overflow: hidden;
    padding: 6.5625rem 0 5rem;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0 62%, #f8f4e8 62%);
}

.integrations-hero::after {
    content: "";
    width: 500px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: -320px;
    transform: translateX(-50%);
    border: 1px solid rgba(217, 183, 93, 0.35);
    border-radius: 50%;
    box-shadow: 0 0 0 72px rgba(217, 183, 93, 0.06), 0 0 0 144px rgba(217, 183, 93, 0.03);
    pointer-events: none;
}

.integrations-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.integrations-hero h1 {
    margin: 1.125rem 0 1.25rem;
    color: #0F172A;
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.integrations-hero > .integrations-hero-inner > p {
    max-width: 54ch;
    margin: 0 auto;
    color: #596579;
    font-size: 1.125rem;
    line-height: 1.65;
}

/* ---------- Integration category groups ---------- */
.integration-category-label {
    margin-bottom: 0.5rem;
    display: block;
    color: #7d621b;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.integration-logo {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-background);
    padding: 0.625rem;
}

.integration-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Page-review banner so nobody mistakes this for the live site */
.review-banner {
    background: var(--theme-text);
    color: var(--theme-background);
    text-align: center;
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
    position: relative;
    z-index: 200;
}

.review-banner a { color: inherit; text-decoration: underline; }

@media (max-width: 900px) {
    .hero-bg {
        min-height: auto;
        padding: 4rem 0 3rem;
    }
}

/* ---------- Split page layout (form + marketing panel) ---------- */
.split-page {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 80vh;
}

@media (max-width: 900px) {
    .split-page {
        grid-template-columns: 1fr;
    }
    .split-marketing-panel {
        order: -1;
    }
}

.split-form-panel {
    padding: 3rem 2rem;
    background: var(--theme-background);
    display: flex;
    align-items: center;
}

.split-form-inner {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

.split-marketing-panel {
    background: var(--theme-surface);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
}

.split-marketing-panel .udg-heading {
    color: var(--theme-primary);
}

.avatar-chip {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid var(--theme-background);
    box-shadow: var(--theme-shadow-md);
}

.split-form-inner .quote-checkbox-grid {
    margin-bottom: 1.25rem;
}

/* ---------- Table: horizontal scroll on mobile ---------- */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.table-scroll-wrapper .udg-table {
    width: max-content;
    min-width: 640px;
}

.table-scroll-hint {
    display: none;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--theme-text-muted);
    margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
    .table-scroll-hint {
        display: block;
    }
}

/* ---------- Icon + text cards: stack on narrow screens ---------- */
@media (max-width: 480px) {
    .stack-mobile {
        flex-direction: column;
        text-align: center;
    }
}

/* ---------- Choice / comparison section (grid-row style, not a <table>) ---------- */
.choice-table {
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    background: var(--theme-card-bg);
    box-shadow: var(--theme-shadow-sm);
}

.choice-row {
    min-height: 72px;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1.15fr;
    align-items: stretch;
    border-top: 1px solid var(--theme-border);
    font-size: 0.9rem;
}

.choice-row:first-child {
    border-top: none;
}

.choice-row > * {
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
}

.choice-row > strong {
    color: var(--theme-card-text);
    font-size: 0.9rem;
}

.choice-row > span {
    color: var(--theme-card-muted);
}

.choice-row .udg-column {
    gap: 0.6rem;
    color: var(--theme-card-text);
    background: var(--theme-accent-light);
    font-weight: 700;
}

.choice-row .udg-column i {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 0.75rem;
    color: #171821;
    background: #c8a868;
}

.choice-head {
    min-height: 52px;
    border-top: 0;
    background: var(--theme-surface);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.choice-head > strong {
    font-size: 0.7rem;
}

.choice-head > span {
    color: var(--theme-text-muted);
}

.choice-head .udg-column {
    color: #171821;
    background: #c8a868;
    font-size: 0.75rem;
}

.choice-head .udg-column i {
    display: none;
}

/* Below 768px the grid-row table is hard to scan (too many columns to
   scroll through) and the old sticky-left/sticky-right approach broke:
   pinning the 2nd-of-4 columns to the right edge made it overlap and
   clip the columns after it. Simpler + more reliable: hide the table
   and show one full-width card per option instead (see .choice-cards). */
@media (max-width: 768px) {
    .choice-table {
        display: none;
    }
}

/* ---------- Choice / comparison section: mobile card view ---------- */
.choice-cards {
    display: none;
}

@media (max-width: 768px) {
    .choice-cards {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

.choice-card {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-lg);
    background: var(--theme-card-bg);
    box-shadow: var(--theme-shadow-sm);
    overflow: hidden;
}

.choice-card-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--theme-border);
}

.choice-card-head h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--theme-card-text);
}

.choice-card-badge {
    padding: 0.2rem 0.6rem;
    border-radius: var(--theme-radius-pill);
    color: #171821;
    background: #c8a868;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.choice-card-featured {
    border-color: #c8a868;
    box-shadow: 0 0 0 1px #c8a868, var(--theme-shadow-sm);
}

.choice-card-featured .choice-card-head {
    background: var(--theme-accent-light);
}

.choice-card dl {
    margin: 0;
    padding: 0.25rem 1.25rem 0.5rem;
}

.choice-card dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--theme-border);
}

.choice-card dl > div:first-child {
    border-top: none;
}

.choice-card dt {
    flex: 0 0 auto;
    max-width: 42%;
    color: var(--theme-card-muted);
    font-size: 0.8125rem;
}

.choice-card dd {
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    text-align: right;
    color: var(--theme-card-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.choice-card dd i {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.625rem;
    color: #171821;
    background: #c8a868;
}

/* ---------- Import / already-building section ---------- */
.import-section {
    padding: var(--theme-space-2xl) 0;
    color: #F8FAFC;
    background: #0F172A;
}

.import-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--theme-space-2xl);
    align-items: center;
}

@media (max-width: 900px) {
    .import-grid {
        grid-template-columns: 1fr;
    }
}

.import-section .udg-eyebrow {
    background: rgba(200, 168, 104, 0.15);
    color: #c8a868;
    border: 1px solid rgba(200, 168, 104, 0.35);
}

.import-section h2 {
    color: #F8FAFC;
    max-width: 16ch;
    font-size: clamp(1.75rem, 3.1vw, 2.5rem);
    line-height: 1.1;
    margin: 1rem 0 1.1rem;
}

.import-section p {
    max-width: 52ch;
    color: #AEB6C2;
    font-size: 1.03rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}

.import-steps {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
}

.import-steps li {
    padding: 1.1rem 1.25rem;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    border: 1px solid #1D2632;
    border-radius: var(--theme-radius);
    background: #0D151F;
}

.import-steps b {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #171821;
    background: #c8a868;
    font-size: 0.875rem;
    font-style: normal;
}

.import-steps strong {
    display: block;
    color: #F8FAFC;
    font-size: 1rem;
}

.import-steps small {
    margin-top: 0.3rem;
    display: block;
    color: #98A2B0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ---------- Solutions section ---------- */
.solutions-grid {
    margin-top: var(--theme-space-2xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--theme-space-lg);
}

@media (max-width: 900px) {
    .solutions-grid {
        grid-template-columns: 1fr;
    }
}

.solution-image {
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: var(--theme-radius-lg);
}

.solution-image b {
    position: absolute;
    z-index: 2;
    top: 0.9rem;
    left: 0.9rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(11, 18, 32, 0.8);
    font-size: 0.75rem;
    font-weight: 800;
}

.solutions-grid h3 {
    margin: 1.25rem 0 0.5rem;
    color: var(--theme-text);
    font-size: 1.125rem;
}

.solutions-grid p {
    min-height: 52px;
    margin: 0 0 0.9rem;
    color: var(--theme-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--theme-primary);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

.text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.text-link i {
    transition: transform 0.2s;
}

.text-link:hover i {
    transform: translateX(3px);
}

/* ---------- Typography override ----------
   base_styles.css's --theme-font-family is tied to a runtime theme-switcher
   elsewhere in the platform (per its own comment) -- overriding it here,
   scoped to these marketing pages only, rather than editing that file
   directly.

   Poppins is self-hosted (not Google Fonts CDN) -- same reasoning as
   other_index.html's styles.css: no third-party request, nothing to
   block on. Only the 4 weights actually used here are declared; each
   has a latin + latin-ext subset so latin-ext only downloads for
   visitors whose text actually needs those characters.

   Place the 8 .woff2 files at: static/udg/fonts/poppins-*.woff2 */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/static/udg/fonts/poppins-400-latin.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/static/udg/fonts/poppins-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/static/udg/fonts/poppins-600-latin.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(/static/udg/fonts/poppins-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/static/udg/fonts/poppins-700-latin.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(/static/udg/fonts/poppins-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(/static/udg/fonts/poppins-800-latin.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(/static/udg/fonts/poppins-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root {
    --theme-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --theme-line-height: 1.5;
}

/* ---------- Product section: 5-card illustrated grid ---------- */
.product-grid {
    margin-top: var(--theme-space-2xl);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

@media (max-width: 1180px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.product-grid article {
    min-height: 340px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
}

.product-card-copy {
    padding: 1.5rem 1.375rem;
}

.product-card-copy h3 {
    margin: 0;
    color: var(--theme-card-text, var(--theme-text));
    font-size: 1.125rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.product-card-copy p {
    margin: 0.625rem 0 0;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.product-art {
    height: 150px;
    margin-top: auto;
    position: relative;
    padding: 1.125rem;
    background: #e4e5ef;
}

.product-icon {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1c2264;
    background: #fff;
    box-shadow: 0 4px 12px rgba(40, 45, 107, 0.09);
    font-size: 1rem;
}

/* -- Card 1: portal -- */
.portal-sidebar {
    width: 30px;
    position: absolute;
    top: 38px;
    bottom: 18px;
    left: 1rem;
    background: #2d347e;
    border-radius: 5px 0 0 0;
}

.portal-card {
    position: absolute;
    top: 38px;
    right: 17px;
    bottom: 18px;
    left: 46px;
    background: #fff;
    border-radius: 0 5px 5px 0;
}

.portal-line {
    width: 75px;
    height: 7px;
    position: absolute;
    top: 58px;
    left: 60px;
    background: #c8a868;
    border-radius: 4px;
    box-shadow: 0 19px 0 #e7e8ed, 0 38px 0 #e7e8ed;
}

/* -- Card 2: AI patient comms -- */
.ai {
    padding-top: 50px;
    background: #eceaf5;
}

.ai-bubble,
.ai-answer {
    display: block;
    padding: 0.5625rem;
    border-radius: 7px;
    background: #fff;
    font-size: 0.5rem;
    box-shadow: 0 5px 15px rgba(32, 39, 83, 0.06);
}

.ai-bubble {
    width: 118px;
    margin-left: auto;
    color: #727584;
}

.ai-answer {
    width: 132px;
    margin-top: 0.5625rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #1c2264;
    font-weight: 700;
}

.ai-answer i {
    font-size: 0.75rem;
}

/* -- Card 3: schedule / RLS -- */
.schedule.product-art {
    padding: 47px 1.25rem 0.875rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3125rem;
    background: #e9eaf4;
}

.cal-title {
    position: absolute;
    top: 0.9375rem;
    left: 1.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    color: #171821;
}

.schedule.product-art i {
    height: 16px;
    display: grid;
    place-items: center;
    color: #838692;
    background: #fff;
    border-radius: 3px;
    font-size: 0.4375rem;
    font-style: normal;
}

.schedule.product-art i.selected {
    color: #fff;
    background: #343EAB;
}

/* -- Card 4: payments -- */
.payments {
    padding-top: 56px;
    background: #edeef5;
}

.pay-row {
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 5px;
    font-size: 0.5rem;
    color: #171821;
}

.pay-row b {
    font-size: 0.625rem;
}

.payments button {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5625rem;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #343EAB;
    font-size: 0.5rem;
    font-family: inherit;
    cursor: default;
}

/* -- Card 5: analytics -- */
.analytics {
    background: #eceef6;
}

.area-chart{height:90px;margin-top:30px;overflow:hidden;position:relative;border-bottom:1px solid #bfc4dc;background:repeating-linear-gradient(to top,#d8dae7 0 1px,transparent 1px 28px)}
.area-chart span{position:absolute;inset:20px 0 0;background:linear-gradient(#414cb37a,#414cb30b);clip-path:polygon(0 80%,15% 67%,31% 75%,47% 35%,64% 50%,80% 5%,100% 20%,100% 100%,0 100%)}

.analytics > b {
    position: absolute;
    top: 50px;
    right: 1.25rem;
    color: #343EAB;
    font-size: 0.8125rem;
}

/* ---------- Consultation-style contact hero ---------- */
.consultation-hero {
    position: relative;
    overflow: hidden;
    padding: 5.625rem 0 6rem;
    background: linear-gradient(135deg, #ffffff 0 54%, #f7f3e8 54% 100%);
}

.consultation-hero::after {
    content: "";
    width: 430px;
    height: 430px;
    position: absolute;
    right: -180px;
    bottom: -220px;
    border: 1px solid rgba(217, 183, 93, 0.4);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(217, 183, 93, 0.07), 0 0 0 120px rgba(217, 183, 93, 0.04);
    pointer-events: none;
}

.consultation-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(480px, 1.1fr);
    gap: 4.875rem;
    align-items: start;
}

@media (max-width: 900px) {
    .consultation-hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .consultation-hero-grid {
        grid-template-columns: 1fr;
    }
}

.consultation-copy {
    padding-top: 2.125rem;
}

@media (max-width: 900px) {
    .consultation-copy {
        padding-top: 0;
    }
}

.consultation-copy h1 {
    max-width: 12ch;
    margin: 1.0625rem 0 1.375rem;
    color: #0F172A;
    font-size: clamp(2rem, 4.4vw, 3.75rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

@media (max-width: 600px) {
    .consultation-copy h1 {
        max-width: 15ch;
        font-size: 2.375rem;
    }
}

.consultation-copy > p {
    max-width: 50ch;
    margin: 0;
    color: #596579;
    font-size: 1.125rem;
    line-height: 1.65;
}

@media (max-width: 600px) {
    .consultation-copy > p {
        font-size: 1rem;
    }
}

.consultation-copy > ul {
    margin: 2.125rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    list-style: none;
}

.consultation-copy > ul li {
    display: flex;
    gap: 0.875rem;
    align-items: flex-start;
}

.consultation-copy > ul i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #171821;
    background: #c8a868;
    font-size: 0.9375rem;
    font-style: normal;
}

.consultation-copy > ul strong {
    display: block;
    color: #0F172A;
    font-size: 0.9375rem;
}

.consultation-copy > ul small {
    display: block;
    max-width: 46ch;
    margin-top: 0.25rem;
    color: #596579;
    font-size: 0.84375rem;
    line-height: 1.55;
}

.consultation-response {
    width: fit-content;
    margin-top: 2.25rem;
    padding-top: 1.125rem;
    display: flex;
    gap: 0.875rem;
    align-items: center;
    border-top: 1px solid #E2E8F0;
}

.consultation-response span {
    padding: 0.4375rem 0.625rem;
    border-radius: 4px;
    color: #171821;
    background: #c8a868;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.consultation-response p {
    margin: 0;
    color: #596579;
    font-size: 0.8125rem;
}

.consultation-form-shell {
    overflow: hidden;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius-xl);
    background: var(--theme-card-bg);
    box-shadow: 0 30px 70px rgba(24, 26, 49, 0.12);
}

.consultation-form-inner {
    padding: 2.625rem;
}

@media (max-width: 600px) {
    .consultation-form-inner {
        padding: 1.75rem;
    }
}

.form-heading {
    margin-bottom: 1.875rem;
}

.form-heading h2 {
    margin: 0.625rem 0 0.375rem;
    color: var(--theme-card-text, var(--theme-text));
    font-size: 2rem;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.form-heading p {
    margin: 0;
    color: var(--theme-card-muted, var(--theme-text-secondary));
    font-size: 0.90625rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1rem;
}

@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.form-grid > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-wide {
    grid-column: 1 / -1;
}

.consultation-submit {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.consultation-submit i {
    font-size: 1.125rem;
    transition: transform 0.2s;
}

.consultation-submit:hover i {
    transform: translateX(3px);
}

.consultation-privacy {
    margin: 0.8125rem 0 0;
    text-align: center;
    color: var(--theme-text-muted);
    font-size: 0.71875rem;
}

/* ---------- Process steps ---------- */
.consultation-process {
    padding: var(--theme-space-2xl) 0;
    background: var(--theme-surface);
}

.consultation-process ol {
    margin: 3.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.125rem;
    list-style: none;
}

@media (max-width: 900px) {
    .consultation-process ol {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-top: 2.5rem;
    }
}

.consultation-process li {
    padding-top: 1.4375rem;
    border-top: 2px solid var(--theme-border);
}

.consultation-process li > span {
    color: #7d621b;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.consultation-process h3 {
    margin: 0.9375rem 0 0.5rem;
    color: var(--theme-text);
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.consultation-process li p {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 0.90625rem;
    line-height: 1.65;
}

/* ---------- Security assurance ---------- */
.consultation-assurance {
    padding: var(--theme-space-2xl) 0;
    color: var(--theme-text);
    background: var(--theme-background);
}

.assurance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.625rem;
    align-items: center;
}

@media (max-width: 900px) {
    .assurance-grid {
        grid-template-columns: 1fr;
        gap: 2.875rem;
    }
}

.assurance-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #171821;
    background: #c8a868;
    font-size: 1.375rem;
}

.consultation-assurance h2 {
    max-width: 15ch;
    margin: 0.875rem 0 1.0625rem;
    color: var(--theme-text);
}

.consultation-assurance > div > p {
    max-width: 53ch;
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 1rem;
    line-height: 1.65;
}

.consultation-assurance ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
}

.consultation-assurance li {
    padding: 1.1875rem 1.25rem;
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 0.8125rem;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    background: var(--theme-surface);
}

.consultation-assurance li > i {
    margin-top: 0.125rem;
    color: #7d621b;
    font-size: 1.125rem;
}

.consultation-assurance li strong {
    display: block;
    color: var(--theme-text);
    font-size: 0.9375rem;
}

.consultation-assurance li small {
    display: block;
    margin-top: 0.3125rem;
    color: var(--theme-text-secondary);
    font-size: 0.84375rem;
    line-height: 1.5;
}