/* ── Public website (hub) ───────────────────────────────────────────────
   Loaded after app.css on the marketing pages only. Unlayered on purpose:
   it must win over the app's component layer. Light theme fixed. */
.site-body { background: #fff; color: var(--c-text); }
.site-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.site-header { position: sticky; top: 0; z-index: var(--z-topbar); background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); }
.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.site-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: var(--fs-18); color: var(--c-text); text-decoration: none; }
.site-nav { display: flex; gap: 22px; font-size: var(--fs-15); }
.site-nav a { color: var(--c-text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--c-link); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; color: var(--c-text); align-items: center; justify-content: center; cursor: pointer; }
.site-lang-btn { flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.site-lang-btn:hover { border-color: var(--c-text); }
.lang-modal { max-width: 380px; }
.info-modal__body .lang-modal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.info-modal__body .lang-modal__list li { margin: 0; }
.lang-modal__option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: #fff; color: var(--c-text); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.lang-modal__option:hover { border-color: var(--c-text); text-decoration: none; }
.lang-modal__option[aria-current] { border-color: var(--c-text); background: #c9f24c; color: #1b2733; }
.btn--dark { background: var(--c-text); color: #fff; }
.btn--dark:hover { background: #0f1923; color: #fff; text-decoration: none; }
.btn--light { background: #fff; color: var(--c-text); }

.site-section { padding: 88px 0; }
.site-section--alt { background: var(--c-bg); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.site-section--dark { background: var(--c-text); color: #fff; }
.site-eyebrow { font-size: var(--fs-13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-link); margin: 0 0 12px; }
.site-section--dark .site-eyebrow { color: var(--c-primary); }
.site-h2 { font-size: 36px; line-height: 1.15; font-weight: 800; margin: 0 0 12px; letter-spacing: -.01em; }
.site-lead { font-size: var(--fs-18); line-height: 1.6; color: var(--c-muted); margin: 0; }
.site-section--dark .site-lead { color: #c6d0da; }
.site-intro { max-width: 720px; margin-bottom: 40px; }

.site-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.site-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 48px; align-items: center; padding: 88px 24px 72px; }
.site-hero__copy { display: flex; flex-direction: column; gap: 22px; }
.site-hero h1 { margin: 0; font-size: 54px; line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
.site-hero h1 mark { background: linear-gradient(transparent 60%, var(--c-primary) 60%); color: inherit; }
.site-hero__lead { font-size: var(--fs-18); line-height: 1.6; color: var(--c-muted); margin: 0; max-width: 560px; }
.site-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.site-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-pill); background: #eef9d0; color: var(--c-text); font-size: var(--fs-13); font-weight: 600; align-self: flex-start; }

.site-mock { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.site-mock__bar { height: 36px; background: #fff; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: var(--fs-12); color: var(--c-muted); }
.site-mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-border); }
.site-mock__body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.site-mock__row { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); font-size: var(--fs-13); }
.site-mock__row mark { background: #d8f3dc; color: inherit; }
.site-mock__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: var(--fs-12); }
.site-mock__kpis div { padding: 8px 10px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); }

.site-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 28px 24px; }
.site-facts strong { display: block; font-size: 26px; }
.site-facts span { color: var(--c-muted); font-size: var(--fs-14); }

.site-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.site-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.site-step b { display: flex; width: 48px; height: 48px; border-radius: 50%; background: var(--c-text); color: var(--c-primary); align-items: center; justify-content: center; font-weight: 800; font-size: var(--fs-18); }
.site-step h3 { margin: 0 0 4px; font-size: var(--fs-18); }
.site-step p { margin: 0; color: var(--c-muted); line-height: 1.55; }

.site-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.site-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.site-card { background: #fff; border: 1px solid var(--c-border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.site-card h3 { margin: 4px 0 0; font-size: var(--fs-18); }
.site-card p { margin: 0; color: var(--c-muted); line-height: 1.55; font-size: var(--fs-15); }
.site-card__icon { width: 40px; height: 40px; border-radius: var(--r-lg); background: #eef9d0; display: flex; align-items: center; justify-content: center; color: var(--c-text); }
.site-card--highlight { border-color: var(--c-text); box-shadow: 0 8px 24px rgba(27,39,51,.08); }
.site-price { font-size: 34px; font-weight: 800; }
.site-card ul { margin: 0; padding: 0 0 0 18px; color: var(--c-muted); font-size: var(--fs-14); line-height: 1.7; }
.site-card .btn { margin-top: auto; }
/* Features → "Tools for every researcher"; article analysis highlighted. */
.site-tools { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; }
.site-tools__title { margin: 0; font-size: 22px; }
.site-tools__lead { margin: 0 0 12px; color: var(--c-muted); }
.site-card--star { border: 2px solid #c9f24c; box-shadow: 0 8px 24px rgba(27,39,51,.08); }
.site-card__more { margin-top: auto; font-weight: 600; font-size: var(--fs-14); }
/* "Article analysis": the differentiating feature, with an illustrative critical-report card. */
.site-articles { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; margin-bottom: 32px; }
.site-articles__copy .site-lead { margin-bottom: 22px; }
.site-articles__badge { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #c9f24c; color: #1b2733; font-size: 11px; letter-spacing: .04em; vertical-align: 1px; }
.site-articles__panel { background: #1b2733; color: #fff; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 16px 40px rgba(27,39,51,.18); }
.site-articles__panel > strong { font-size: 18px; margin-bottom: 4px; }
.site-articles__axis { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 2.2em; gap: 12px; align-items: center; font-size: 14px; color: #cdd6df; }
.site-articles__axis b { color: #fff; text-align: right; }
.site-articles__bar { height: 8px; border-radius: 999px; background: #2c3b4a; overflow: hidden; }
.site-articles__bar span { display: block; height: 100%; background: #c9f24c; border-radius: 999px; }
@media (max-width: 900px) { .site-articles { grid-template-columns: 1fr; gap: 28px; } }

/* Pricing → "Support included in every edition". */
.site-support { margin-top: 48px; display: flex; flex-direction: column; gap: 20px; }
.site-support__head { display: flex; gap: 16px; align-items: flex-start; max-width: 820px; }
.site-support__head .site-card__icon { flex: 0 0 40px; }
.site-support__title { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.site-support__lead { margin: 0; color: var(--c-muted); line-height: 1.55; }
.site-support__more { margin: 0; font-weight: 600; }

.site-ai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.site-ai ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: #e6edf3; font-size: var(--fs-15); }
.site-ai li { display: flex; gap: 10px; }
.site-ai li::before { content: "✓"; color: var(--c-primary); font-weight: 700; }
.site-panel { background: #243140; border: 1px solid #34475a; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-14); }
.site-panel__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.site-panel__kpis div { background: var(--c-text); border-radius: var(--r-lg); padding: 12px; }
.site-panel__kpis small { display: block; font-size: var(--fs-12); color: #94a4b6; }
.site-panel__kpis strong { font-size: 22px; }
.site-panel__row { display: flex; justify-content: space-between; border-bottom: 1px solid #34475a; padding: 8px 0; }
.site-panel__row:last-of-type { border-bottom: 0; }
.site-panel__row span:last-child { color: #94a4b6; }


.site-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
.site-faq details { border-bottom: 1px solid var(--c-border); }
.site-faq summary { cursor: pointer; font-weight: 600; font-size: var(--fs-16); padding: 16px 0; }
.site-faq p { margin: 0 0 16px; color: var(--c-muted); line-height: 1.6; }

.site-cta { background: var(--c-primary); padding: 72px 0; }
.site-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.site-cta h2 { margin: 0 0 6px; font-size: 30px; font-weight: 800; }
.site-cta p { margin: 0; font-size: var(--fs-16); }

.site-footer { background: #0f1923; color: #94a4b6; padding: 56px 0 32px; font-size: var(--fs-14); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.site-footer__grid > div { display: flex; flex-direction: column; gap: 8px; }
.site-footer strong { color: #fff; }
.site-footer__brand { font-size: var(--fs-18); }
.site-footer a { color: #94a4b6; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid #243140; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.site-footer a.site-footer__author { color: #c9f24c; }
.site-footer a.site-footer__author:hover { color: #fff; text-decoration: underline; }
.site-footer__lang { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.site-footer__lang label { display: inline-flex; color: #94a4b6; }
.site-footer__lang select { height: 36px; padding: 0 32px 0 12px; border: 1px solid #243140; border-radius: var(--r-md); background: #16222e; color: #fff; font: inherit; cursor: pointer; }
.site-footer__lang select:focus-visible { outline: 2px solid #c9f24c; outline-offset: 2px; }

/* Download pages */
.site-form { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; }
.site-form .section-card { background: #fff; }
.site-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.site-form__grid .field--full { grid-column: 1 / -1; }
.site-key { display: inline-block; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 26px; letter-spacing: .06em; padding: 12px 18px; background: #eef9d0; border: 1px dashed var(--c-ok-strong); border-radius: var(--r-lg); color: var(--c-text); }
.site-steps-list { padding-left: 20px; line-height: 1.7; color: var(--c-muted); }
.site-steps-list code { background: var(--c-bg); padding: 1px 6px; border-radius: var(--r-xs); }

/* Mobile app section: copy + phone mock-up */
.site-section--app { background: linear-gradient(180deg, #fff 0%, #f6fbe6 100%); }
.site-app { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; }
.site-app .site-lead { margin-bottom: 20px; }
.site-app__points { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: var(--fs-15); line-height: 1.5; }
.site-app__points li { display: flex; gap: 10px; }
.site-app__points li::before { content: "✓"; color: var(--c-link); font-weight: 700; }
.site-app__data { margin: 0 0 14px; color: var(--c-muted); font-size: var(--fs-14); line-height: 1.5; }
.site-app__soon { display: inline-block; margin: 0 0 22px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-border); font-size: var(--fs-14); }
.site-app__stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.site-phone { justify-self: center; width: 100%; max-width: 280px; aspect-ratio: 9 / 17; background: var(--c-text); border-radius: 38px; padding: 12px; box-shadow: 0 24px 48px rgba(27,39,51,.18); }
.site-phone__screen { height: 100%; background: #f4f6f8; border-radius: 28px; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.site-phone__bar { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); }
.site-phone__bar span { margin-left: auto; color: var(--c-muted); font-size: var(--fs-12); }
.site-phone__progress { height: 6px; background: #dfe4e8; border-radius: 99px; overflow: hidden; }
.site-phone__progress span { display: block; height: 100%; background: var(--c-primary); }
.site-phone__card { flex: 1; background: #fff; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 8px rgba(27,39,51,.06); }
.site-phone__card small { color: var(--c-muted); font-size: var(--fs-12); }
.site-phone__card strong { font-size: var(--fs-14); line-height: 1.35; }
.site-phone__line { height: 7px; border-radius: 4px; background: #e6eaee; }
.site-phone__line--short { width: 60%; }
.site-phone__ai { margin-top: auto; align-self: flex-start; background: #eef9d0; border-radius: 99px; padding: 4px 10px; font-size: var(--fs-12); font-weight: 600; }
.site-phone__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.site-phone__actions span { text-align: center; padding: 10px 0; border-radius: 12px; font-size: var(--fs-12); font-weight: 700; color: #fff; }
.site-phone__actions .is-exc { background: #b0271a; }
.site-phone__actions .is-maybe { background: #8a6d00; }
.site-phone__actions .is-inc { background: #1f7a3a; }

/* Trial sign-up (/prova) */
.trial-signup { max-width: 1080px; margin: 0 auto; padding: 56px 24px 88px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: start; }
.trial-signup .site-h2 mark { background: var(--c-primary); color: var(--c-on-primary); padding: 0 6px; border-radius: 6px; }
.trial-signup__points { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; font-size: var(--fs-16); }
.trial-signup__points li::before { content: "✓"; color: var(--c-link); font-weight: 700; margin-right: 10px; }
.trial-signup__fine { font-size: var(--fs-13); max-width: 52ch; }
.trial-signup__form .section-card { background: #fff; }
.trial-signup__accept { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-14); }
.trial-signup__accept input { margin-top: 3px; flex: 0 0 auto; }
.trial-signup__note { margin: 0; font-size: var(--fs-12); text-align: center; }
.trial-signup__login { text-align: center; font-size: var(--fs-14); margin-top: 14px; }
.site-trial-line { text-align: center; margin: 22px 0 0; font-size: var(--fs-15); }
/* Trial banner under the pricing cards: lime, with a dark call to action. */
.trial-banner { margin-top: 28px; border: 0; background: #c9f24c; color: #1b2733; border-radius: 20px; padding: 36px 40px; display: flex; flex-direction: column; gap: 26px; }
.trial-banner__head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.trial-banner__copy { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.trial-banner__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3d5200; }
.trial-banner__title { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: #1b2733; }
.trial-banner__lead { margin: 0; font-size: 16px; line-height: 1.5; color: #2b3a12; }
.trial-banner__cta {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px;
    border-radius: 999px; background: #1b2733; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none;
    white-space: nowrap; /* one line: Safari otherwise wraps the label inside the button */
}
.trial-banner__cta:hover { background: #0f1923; color: #fff; text-decoration: none; }
.trial-banner__cta:focus-visible { outline: 3px solid #1b2733; outline-offset: 3px; }
.trial-banner__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.trial-banner__fact { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.55); border-radius: 14px; padding: 14px 16px; }
.trial-banner__icon { width: 44px; height: 44px; border-radius: 12px; background: #1b2733; color: #c9f24c; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trial-banner__fact-text { font-size: 14px; line-height: 1.3; }
.trial-banner__fact-text strong { display: block; font-size: 15px; }
@media (max-width: 900px) {
    .trial-banner { padding: 24px 20px; gap: 18px; }
    .trial-banner__head { flex-direction: column; align-items: stretch; gap: 18px; }
    .trial-banner__title { font-size: 26px; }
    .trial-banner__cta { justify-content: center; }
    .trial-banner__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .trial-banner__fact { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
}
@media (max-width: 860px) {
    .trial-signup { grid-template-columns: 1fr; gap: 28px; padding: 36px 16px 64px; }
}

/* Licence portal (/licenses) */
.lp-note { margin: 14px 0 0; font-size: var(--fs-13); }
.lp-sent { text-align: center; }
.lp-sent .btn { margin-top: 6px; }
.lp-sent__icon { color: var(--c-link); margin-bottom: 6px; }
/* Confetti over the trial sign-up's "check your e-mail" card (app.js). */
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
.lp-sent__icon--warn { color: var(--c-alert-warn-fg); }
.lp-wrap { max-width: 960px; margin: 0 auto; padding: 48px 24px 88px; }
.lp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.lp-head .site-h2 { margin-bottom: 6px; }
.lp-head p { margin: 0; overflow-wrap: anywhere; }
.lp-license { background: #fff; margin-bottom: 18px; }
.lp-license.is-inactive { opacity: .75; }
.lp-license__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-license__key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.lp-license__key code { font-size: var(--fs-16); font-weight: 700; letter-spacing: .02em; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 6px 10px; overflow-wrap: anywhere; }
.lp-label { display: block; width: 100%; font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.lp-status--active { background: var(--c-tag-active-bg); color: var(--c-tag-active-fg); }
.lp-status--expired { background: var(--c-alert-warn-bg); color: var(--c-alert-warn-fg); }
.lp-status--revoked { background: var(--c-fail-bg); color: var(--c-fail); }
.lp-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.lp-facts div { background: var(--c-bg); border-radius: var(--r-md); padding: 10px 12px; }
.lp-facts dt { font-size: var(--fs-12); color: var(--c-muted); }
.lp-facts dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-14); }
.lp-empty { margin: 0 0 12px; font-size: var(--fs-14); }
.lp-domains { margin-bottom: 14px; }
.lp-download { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--c-border); }
.lp-download .btn { display: inline-flex; align-items: center; gap: 8px; }
.lp-download .muted { font-size: var(--fs-13); }
.lp-help { text-align: center; font-size: var(--fs-14); }
@media (max-width: 760px) {
    .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-wrap { padding: 32px 16px 64px; }
}

/* Login modal */
.login-modal__inner { max-width: 440px; }
.login-modal__hint { font-size: var(--fs-13); text-align: center; margin: 10px 0 0; }
.login-modal__links { display: flex; justify-content: space-between; font-size: var(--fs-14); margin: 12px 0 0; }

/* The full link row needs ~1,000 px; below that it folds into the menu. */
@media (max-width: 1040px) {
    .site-nav { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--c-border); padding: 8px 24px 16px; }
    .site-nav.is-open { display: flex; }
    .site-nav__download { display: block; }
    .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--c-border); }
    .site-menu-btn { display: inline-flex; }
    .site-lang-btn { width: 44px; height: 44px; }
}

@media (max-width: 960px) {
    .site-header__inner { gap: 12px; }
    .site-wrap { padding: 0 16px; }
    .site-hero__grid { grid-template-columns: 1fr; padding: 48px 24px 40px; }
    .site-hero h1 { font-size: 36px; }
    .site-h2 { font-size: 28px; }
    .site-facts, .site-steps, .site-cards, .site-cards--4, .site-cards--2, .site-ai, .site-app, .site-faq, .site-footer__grid, .site-form__grid { grid-template-columns: 1fr; }
    .site-section { padding: 56px 0; }
    .site-app { gap: 36px; }
    .site-phone { max-width: 240px; }
}

/* Helpers the app stylesheet does not define */
.btn--lg { padding: 13px 22px; font-size: var(--fs-16); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--c-border); border-top-color: var(--c-text); border-radius: 50%; vertical-align: -3px; animation: site-spin .8s linear infinite; }
@keyframes site-spin { to { transform: rotate(360deg); } }
.site-form .section-card p { overflow-wrap: anywhere; }

/* ── Guide (/guia) ──────────────────────────────────────────────────── */
.g-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding: 56px 24px; }
.g-hero__title { margin: 0; font-size: 46px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.g-hero__title mark { background: linear-gradient(transparent 62%, var(--c-primary) 62%); color: inherit; }
.g-hero__note { margin: 0; font-size: var(--fs-13); }
.g-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.g-quick a { text-decoration: none; color: var(--c-text); background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.g-quick a:hover { border-color: var(--c-text); }
.g-quick strong { font-size: var(--fs-15); }
.g-quick span { font-size: var(--fs-13); color: var(--c-muted); }
.g-layout { display: flex; gap: 48px; align-items: flex-start; padding: 40px 24px 64px; }
.g-side { position: sticky; top: 84px; width: 280px; flex: 0 0 280px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 100px); overflow-y: auto; }
.g-main { flex: 1 1 560px; min-width: 0; }
.g-toc { display: flex; flex-direction: column; gap: 2px; }
.g-toc__label { font-size: var(--fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); padding: 0 10px 8px; }
.g-toc a { color: var(--c-text); text-decoration: none; display: flex; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: var(--fs-14); line-height: 1.35; }
.g-toc a:hover { background: var(--c-bg); }
.g-toc a.is-active { background: #eef9d0; font-weight: 600; }
.g-toc__n { color: var(--c-muted); font-variant-numeric: tabular-nums; min-width: 20px; }
.g-toc__about { margin: 14px 10px 0; padding: 12px; border: 1px solid var(--c-border); border-radius: 10px; font-size: var(--fs-13); line-height: 1.5; color: var(--c-muted); }
.g-toc__about strong { color: var(--c-text); }
.g-back { display: block; padding: 7px 10px; font-size: var(--fs-14); text-decoration: none; color: var(--c-text); font-weight: 600; margin-bottom: 8px; border-bottom: 1px solid var(--c-border); }
.g-chapter { padding: 36px 0; border-bottom: 1px solid var(--c-border); scroll-margin-top: 84px; }
.g-chapter:first-child { padding-top: 0; }
.g-h1 { margin: 6px 0; font-size: 36px; font-weight: 800; letter-spacing: -.015em; }
.g-h2 { margin: 6px 0; font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
.g-h3 { margin: 28px 0 8px; font-size: var(--fs-18); font-weight: 700; scroll-margin-top: 84px; }
.g-bar { width: 56px; height: 5px; background: var(--c-primary); border-radius: 3px; margin: 0 0 18px; }
.g-summary { font-size: var(--fs-18); color: var(--c-muted); line-height: 1.6; margin: 0 0 16px; }
.g-main p { line-height: 1.65; margin: 0 0 14px; }
.g-main code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 5px; padding: 1px 6px; }
.g-code { background: #0f1923; color: #e6edf3; border-radius: 10px; padding: 14px 16px; font-size: 13px; overflow-x: auto; margin: 0 0 16px; }
.g-code code { background: none; border: 0; padding: 0; color: inherit; }
.g-list { margin: 0 0 14px; padding-left: 22px; line-height: 1.65; }
.g-list li { margin-bottom: 5px; }
.g-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0 20px; }
.g-step { display: flex; gap: 12px; background: var(--c-bg); border-radius: 12px; padding: 16px; }
.g-step__n { flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--c-text); color: var(--c-primary); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.g-step p { margin: 4px 0 0; font-size: var(--fs-14); color: var(--c-muted); line-height: 1.5; }
.g-callout { display: flex; gap: 12px; border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; font-size: var(--fs-14); line-height: 1.55; }
.g-callout svg { flex: 0 0 22px; margin-top: 2px; }
.g-callout--tip { border: 1px solid #cfe7d8; background: #eef9f1; color: #1b2733; }
.g-callout--tip svg { color: var(--c-ok-strong); }
.g-callout--warn { border: 1px solid #f3d9b1; background: #fff6e8; color: #1b2733; }
.g-callout--warn svg { color: #9c5a00; }
.g-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: 12px; margin: 0 0 20px; background: #fff; }
.g-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); min-width: 520px; }
.g-table th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--c-border); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); background: var(--c-bg); }
.g-table td { padding: 10px 14px; border-bottom: 1px solid var(--c-border); vertical-align: top; color: var(--c-muted); }
.g-table tr:last-child td { border-bottom: 0; }
.g-table__first { font-weight: 600; color: var(--c-text); }
.g-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.g-card { border: 1px solid var(--c-border); border-radius: 12px; padding: 14px; background: #fff; }
.g-card strong { font-size: var(--fs-14); }
.g-card p { margin: 6px 0 0; font-size: var(--fs-13); color: var(--c-muted); line-height: 1.5; }
.g-faq details { border-bottom: 1px solid var(--c-border); padding: 12px 0; }
.g-faq summary { cursor: pointer; font-weight: 600; font-size: var(--fs-16); }
.g-faq__a { margin-top: 8px; color: var(--c-muted); line-height: 1.6; }
.g-permalink { font-size: var(--fs-13); margin: 8px 0 0; }
.g-crumbs { font-size: var(--fs-13); color: var(--c-muted); display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.g-crumbs a { color: var(--c-muted); text-decoration: none; }
.g-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--c-border); }
.g-pager a { text-decoration: none; color: var(--c-text); border: 1px solid var(--c-border); border-radius: 12px; padding: 14px 16px; flex: 1 1 0; }
.g-pager a:hover { border-color: var(--c-text); }
.g-pager a span { display: block; font-size: var(--fs-12); color: var(--c-muted); }
.g-pager__next { text-align: right; }
.g-feedback { font-size: var(--fs-13); margin: 18px 0 0; }
@media (max-width: 960px) {
    .g-hero__grid, .g-quick, .g-steps, .g-cards { grid-template-columns: 1fr; }
    .g-hero__title { font-size: 34px; }
    /* Column layout: stretch both columns to the screen width (with the
       desktop flex-start + 560px basis the chapter column kept its
       max-content width and pushed the page sideways). */
    .g-layout { flex-direction: column; align-items: stretch; gap: 24px; padding: 28px 16px 48px; }
    .g-side { position: static; width: auto; flex: none; max-height: none; }
    .g-main { flex: none; width: 100%; }
    .g-pager { flex-direction: column; }
    .g-pager__next { text-align: left; }
    .g-h2 { font-size: 26px; }
    .g-h1 { font-size: 30px; }
}

/* Contact: thank-you page with confetti */
.site-thanks { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 72px 24px; overflow: hidden; }
.site-thanks__card { position: relative; z-index: 1; max-width: 560px; background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: 40px 32px; box-shadow: 0 12px 32px rgba(27,39,51,.08); }
.site-thanks__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; animation: site-pop .5s cubic-bezier(.2,.9,.3,1.4) both; }
.site-thanks h1 { margin: 0 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
.site-thanks p { margin: 0 0 22px; font-size: var(--fs-18); color: var(--c-muted); line-height: 1.5; }
.site-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes site-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-confetti { display: none; } .site-thanks__icon { animation: none; } }

/* Phones: the header keeps brand · Sign in · menu; Download moves into the
   menu (and stays in the hero), so the bar never exceeds the screen. */
.site-nav__download { display: none; }
@media (max-width: 480px) {
    .site-header__download { display: none; }
    .site-brand span { font-size: var(--fs-16); }
}

/* Home → "Real screens": tabbed tour of the platform (option A). */
.site-tour .site-intro { margin-bottom: 36px; }
.site-tour__body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.site-tour__tabs { display: flex; flex-direction: column; gap: 10px; }
.site-tour__tab { display: flex; gap: 14px; align-items: flex-start; width: 100%; padding: 16px; border-radius: 14px; border: 1px solid #344555; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.site-tour__tab strong { display: block; font-size: 16px; margin-bottom: 4px; }
.site-tour__tab span span { font-size: 14px; line-height: 1.45; color: #cdd6df; }
.site-tour__tab:hover { border-color: #c9f24c; }
.site-tour__tab:focus-visible { outline: 3px solid #c9f24c; outline-offset: 2px; }
.site-tour__tab[aria-selected="true"] { background: #c9f24c; border-color: #c9f24c; color: #1b2733; }
.site-tour__tab[aria-selected="true"] span span { color: #2b3a12; }
.site-tour__n { flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: #c9f24c; color: #1b2733; }
.site-tour__tab[aria-selected="true"] .site-tour__n { background: #1b2733; color: #c9f24c; }
.site-tour__panels { min-width: 0; }
.site-tour__panel { margin: 0 0 24px; }
.site-tour__panel:focus-visible { outline: 3px solid #c9f24c; outline-offset: 4px; border-radius: 14px; }
.site-tour__frame { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.site-tour__bar { height: 34px; background: #eef1f4; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.site-tour__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ef6f6c; }
.site-tour__bar i:nth-child(2) { background: #f5b700; }
.site-tour__bar i:nth-child(3) { background: #5cc06b; }
.site-tour__bar span { margin-left: 12px; flex: 1; max-width: 360px; height: 22px; border-radius: 6px; background: #fff; color: #5b6b7b; font-size: 12px; display: inline-flex; align-items: center; padding: 0 10px; overflow: hidden; white-space: nowrap; }
.site-tour__frame img { display: block; width: 100%; height: auto; }
.site-tour figcaption { margin-top: 12px; font-size: 14px; color: #cdd6df; }
@media (max-width: 900px) {
    .site-tour__body { grid-template-columns: 1fr; }
    .site-tour__tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .site-tour__tab { flex: 0 0 240px; }
}

/* Comparison: home section (#comparativa) and /comparativa/{rayyan|covidence}. */
.cmp-adv { margin-bottom: 28px; }
.cmp-adv__card { flex-direction: row; gap: 14px; align-items: flex-start; }
.cmp-adv__card h3 { margin: 0 0 4px; }
.cmp-adv__icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: #1b2733; color: #c9f24c; display: inline-flex; align-items: center; justify-content: center; }
.cmp-table-box { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; overflow: hidden; }
.cmp-table-scroll { overflow-x: auto; position: relative; } /* keeps the .sr-only labels inside the scroll box */
.cmp-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.cmp-table caption { text-align: left; padding: 18px 22px 0; font-size: 13px; color: var(--c-muted); }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: 13px 18px; border-top: 1px solid #eef1f4; }
.cmp-table thead th { border-top: 0; font-size: 16px; font-weight: 700; }
.cmp-table thead th:first-child { font-size: 13px; font-weight: 600; color: var(--c-muted); }
.cmp-table tbody th { font-weight: 600; padding-left: 22px; }
.cmp-table td { color: #44515e; }
.cmp-table--three th:first-child { width: 25%; }
.cmp-table--two th:first-child { width: 26%; }
.cmp-table thead .cmp-col-us { background: #1b2733; color: #fff; font-weight: 800; }
.cmp-table td.cmp-col-us { background: #f3fbd9; color: var(--c-text); border-top-color: #e3efbf; }
.cmp-badge { margin-left: 8px; background: #c9f24c; color: #1b2733; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.cmp-mark { display: inline-block; vertical-align: -2px; margin-right: 6px; flex: 0 0 auto; }
.cmp-mark--yes { color: #2f6b00; }
.cmp-mark--part { color: #8a5a00; }
.cmp-mark--no { color: #8a2a12; }
.cmp-group th { padding-top: 22px !important; font-size: 13px; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; color: #3d5200; border-top: 1px solid var(--c-border) !important; }
.cmp-legend { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-muted); max-width: 640px; }
.cmp-home__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.cmp-home__foot .cmp-legend { margin: 0; max-width: 520px; }
.cmp-home__links { display: flex; flex-wrap: wrap; gap: 12px; }
.cmp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cmp-btn:hover { text-decoration: none; }
.cmp-btn--dark { background: #1b2733; color: #fff; }
.cmp-btn--dark:hover { background: #0f1923; color: #fff; }
.cmp-btn--outline { background: #fff; border: 1px solid #1b2733; color: #1b2733; }
.cmp-btn--lime { background: #c9f24c; color: #1b2733; }
.cmp-btn--lime:hover { background: #b9e33c; color: #1b2733; }
.cmp-hero { background: #f4f6f8; }
.cmp-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 56px; }
.cmp-hero__copy { display: flex; flex-direction: column; gap: 16px; }
.cmp-hero__copy .site-eyebrow, .cmp-hero__copy .site-lead { margin: 0; }
.cmp-hero__title { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.015em; }
.cmp-crumbs { font-size: 14px; color: var(--c-muted); }
.cmp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cmp-summary { background: #fff; border: 1px solid var(--c-border); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.cmp-summary h2 { margin: 0; font-size: 18px; }
.cmp-summary p { margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.site-section--tight { padding-top: 24px; padding-bottom: 24px; }
.cmp-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.cmp-better, .cmp-migrate { border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.cmp-better { background: #f4f6f8; color: #44515e; }
.cmp-better h2, .cmp-migrate h2 { margin: 0; font-size: 22px; color: inherit; }
.cmp-better h2 { color: var(--c-text); }
.cmp-better p, .cmp-better ul { margin: 0; font-size: 15px; line-height: 1.6; }
.cmp-better ul { padding-left: 20px; }
.cmp-migrate { background: #1b2733; color: #fff; }
.cmp-migrate ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cmp-migrate li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.cmp-migrate__n { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #c9f24c; color: #1b2733; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.cmp-faq { display: flex; flex-direction: column; gap: 12px; }
.cmp-faq h2 { margin: 0 0 6px; font-size: 26px; }
.cmp-faq details { border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 20px; background: #fff; }
.cmp-faq summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.cmp-faq details p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: #44515e; }
.cmp-band { background: #c9f24c; margin-top: 40px; }
.cmp-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 44px; padding-bottom: 44px; }
.cmp-band h2 { margin: 0 0 6px; font-size: 28px; color: #1b2733; }
.cmp-band p { margin: 0; color: #2b3a12; }
.cmp-sources { padding-top: 28px; padding-bottom: 48px; font-size: 12px; line-height: 1.6; color: var(--c-muted); }
.cmp-sources p { margin: 0 0 8px; }
.cmp-sources a { font-weight: 600; }
@media (max-width: 900px) { .cmp-hero__title { font-size: 32px; } .cmp-adv__card { flex-direction: column; } }