/* Shared marketing typography and layout for all supported locales. */
:root {
    --brand: #245edb;
    --brand-dark: #16324f;
    --ink: #16324f;
    --muted: #526479;
    --line: #dce4ee;
    --surface: #f4f7fb;
    --accent: #187350;
    --bs-primary-rgb: 36, 94, 219;
    --bs-body-color: var(--ink);
    --bs-secondary-color: var(--muted);
    --bs-light-rgb: 244, 247, 251;
    --bs-link-color: #245edb;
    --bs-link-hover-color: #1848ac;
}

body {
    background: #fff;
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
    hyphens: auto;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h5 {
    color: inherit;
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 3.6vw + .5rem, 3.5rem) !important; letter-spacing: -.045em; }
h2.h1, .related-guides h2 { font-size: clamp(1.75rem, 2.2vw + .5rem, 2.5rem); letter-spacing: -.035em; }
h3.h5 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.015em; }
p { text-wrap: pretty; }
.lead { font-size: 1.125rem; font-weight: 400; line-height: 1.75; color: var(--muted); max-width: 65ch; }
.text-muted2, .text-muted { color: var(--muted) !important; }

.navbar { box-shadow: 0 2px 16px rgba(22, 50, 79, .04); }
.navbar-brand { font-size: 1.05rem; letter-spacing: -.025em; }
.navbar .nav-link { font-size: .9rem; font-weight: 500; color: var(--muted); padding-inline: .65rem; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--brand); }
.navbar .btn { font-size: .875rem; white-space: nowrap; }
.navbar .dropdown-menu { max-width: calc(100vw - 2rem); }

.btn { border-radius: .65rem; padding: .65rem 1.1rem; font-weight: 600; line-height: 1.5; }
.btn-lg { font-size: 1rem; padding: .85rem 1.4rem; }
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: #1848ac;
    --bs-btn-hover-border-color: #1848ac;
    --bs-btn-active-bg: #1848ac;
    --bs-btn-active-border-color: #1848ac;
}
.btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--line); --bs-btn-hover-bg: #edf3ff; --bs-btn-hover-border-color: #b5c9ec; color: var(--brand-dark); }
.btn-link { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #245edb; outline-offset: 4px; }
.skip-link { position: fixed; top: -6rem; left: 1rem; z-index: 1200; padding: .75rem 1rem; background: #fff; border-radius: .5rem; color: var(--brand); }
.skip-link:focus { top: 1rem; }

.hero {
    min-height: auto;
    background: linear-gradient(135deg, #f2f6fd 0%, #fff 75%);
    color: var(--ink);
    padding: clamp(2.5rem, 5vw, 5rem) 0;
    border-bottom: 1px solid var(--line);
}
.hero h1 { max-width: 21ch; margin-bottom: 1.4rem; }
.hero .lead { color: var(--muted); }
.hero .eyebrow, .eyebrow { color: var(--brand); font-size: .75rem; font-weight: 700; letter-spacing: .09em; }
.badge-soft { color: #1848ac; background: #e5edfd; font-size: .75rem; padding: .65rem .9rem; line-height: 1.5; white-space: normal; }
.trial-note { font-size: .875rem; color: var(--muted); margin: 1rem 0 0; }
.hero .breadcrumb { font-size: .8rem; }
.hero .breadcrumb .text-white, .hero .breadcrumb .text-white-50 { color: var(--muted) !important; }
.hero .breadcrumb-item + .breadcrumb-item::before { color: #718298; }
.hero .breadcrumb a { text-decoration: underline; text-underline-offset: .2em; }
.mock-frame { border-width: 6px; border-radius: .8rem; box-shadow: 0 18px 48px rgba(22, 50, 79, .14); }
.mock-frame img { height: auto; }
.app-preview { border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 18px 48px rgba(22, 50, 79, .12); }
.screens-demo { padding: 1.5rem; background: #eaf0fa; border: 1px solid var(--line); border-radius: 1.25rem; }
.screen-hub { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid #adc2e6; border-radius: .75rem; background: #fff; font-weight: 600; }
.screen-examples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem; margin-bottom: 1.5rem; }
.screen-example { display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding: 1rem; background: var(--brand-dark); color: #fff; border: 5px solid #0e2033; border-radius: .7rem; text-align: center; }
.screen-example strong { font-size: .8rem; }
.screen-example span { font-size: .9rem; font-weight: 600; }
.screen-portrait { grid-row: span 2; min-height: 17rem; }
.shadow-lg-soft { box-shadow: 0 12px 36px rgba(22, 50, 79, .08); }

.section, main > section.py-5 { padding-block: clamp(3rem, 5vw, 5rem) !important; }
.section-soft { background: var(--surface); }
.problem-card, .benefit-card, .step-card, .scenario-card, .pricing-card {
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 4px 18px rgba(22, 50, 79, .025);
}
.problem-card, .benefit-card { border-top: 3px solid #adc2e6; }
.benefit-card { border-top-color: #8cbeac; }
.card-body { padding: 1.5rem; }
.feature-icon { color: var(--brand); background: #eaf0fc; border-radius: .75rem; flex: 0 0 44px; width: 44px; height: 44px; }
#features .row.g-4 > div > .d-flex { height: 100%; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; }
#features .row.g-4 p { color: var(--muted); font-size: .95rem; }
li { margin-bottom: .4rem; }
.navbar li, .dropdown-menu li { margin-bottom: 0; }
.platforms-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; padding-inline: 1rem; font-size: .9rem; color: var(--muted); }
.platforms-inline .dot { display: none; }
.text-color-free { color: #526479; }
.text-color-standard { color: var(--brand); }
.text-color-premium { color: #89600d; }
.pricing-card .display-5 { font-variant-numeric: tabular-nums; letter-spacing: -.04em; }

.comparison-table { font-size: .95rem; line-height: 1.65; }
.comparison-table th { white-space: normal; min-width: 8rem; }
.comparison-table td { min-width: 13rem; }
.comparison-table th, .comparison-table td { padding: 1rem; border-color: var(--line); }
.comparison-table tbody td:last-child { background: #f2f6ff; }
.table-responsive { border-radius: .75rem; }
.table-hint { font-size: .875rem; color: var(--muted); }
.accordion { max-width: 58rem; }
.accordion-item { border-color: var(--line); }
.accordion-button { padding: 1.3rem; font-size: 1rem; font-weight: 600; line-height: 1.55; color: var(--ink); }
.accordion-button:not(.collapsed) { background: #edf3fd; color: #1848ac; }
.accordion-body { padding: 1.3rem; color: var(--muted); }
.accordion iframe { max-width: 100%; }
.accordion img { height: auto; }
.cta-band, .gradient { background: var(--brand-dark); color: #fff; }
.cta-band .text-white-50 { color: #dbe6f3 !important; }
.gradient p { color: #dbe6f3; }

.related-guides { border-top: 1px solid var(--line); }
.guide-card { position: relative; border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem; height: 100%; display: flex; flex-direction: column; }
.guide-card h3 { font-size: 1.05rem; font-weight: 650; line-height: 1.4; }
.guide-card h3 a { color: var(--ink); text-decoration: none; }
.guide-card h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-card:hover { border-color: #8caeea; background: #f8faff; }
.guide-card p { font-size: .9rem; color: var(--muted); }
.guide-label { margin-top: auto; font-size: .85rem; font-weight: 600; color: var(--brand); }
footer { background: var(--surface) !important; border-top: 1px solid var(--line); }
footer h5 { font-size: 1.1rem; font-weight: 700; }
footer h6 { font-size: .9rem; font-weight: 650; }
footer a { text-underline-offset: .2em; }
.cookieConsentPopup { max-width: min(26rem, calc(100vw - 2rem)); }

@media (max-width: 1199.98px) {
    .navbar-collapse .dropdown-menu { left: 0; right: auto; }
}

@media (max-width: 767.98px) {
    .hero { padding-top: 2.25rem; }
    .hero .row, .section .row { --bs-gutter-x: 1.5rem; }
    .hero .row { --bs-gutter-y: 2rem; }
    .hero .btn-lg { width: 100%; text-align: center; }
    .hero .d-flex.flex-wrap { width: 100%; }
    .hero .btn-link { width: 100%; text-align: center; padding: .75rem; }
    .hero .breadcrumb { margin-bottom: 1rem !important; }
    .scenario-card .col-7, .scenario-card .col-5 { width: 100%; }
    .scenario-card .col-5 { margin-top: 1.5rem; }
    .navbar-collapse { padding: 1rem 0; }
    .navbar-collapse > .d-flex { flex-wrap: wrap; }
    .navbar .nav-link { padding-block: .65rem; }
    .cta-band .btn, .gradient .btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
    .scenario-card:hover { transform: none; }
}

.selection-path { list-style: none; padding: 0; margin-bottom: 1.5rem; }
.selection-path li { display: flex; align-items: center; gap: 1rem; padding-block: .65rem; font-weight: 600; }
.selection-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--brand); color: #fff; }
.guide-callout { background: #edf3ff; border: 1px solid #c7d8f5; border-radius: 1rem; padding: clamp(1.25rem, 3vw, 2rem); }
.guide-checklist { padding-left: 1.5rem; margin-bottom: 0; }
.guide-checklist li { padding-left: .5rem; margin-bottom: .85rem; }
.guide-checklist li:last-child { margin-bottom: 0; }