/* ═══════════════════════════════════════════════════════════════════════
   TheConnector — Design System "Blueprint paper"
   Chargé APRÈS site.min.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root {
    --bg:         #f6f5f1;
    --paper:      #fbfaf7;
    --ink:        #0e1b1f;
    --ink-2:      #33474d;
    --muted:      #6b7a7f;
    --rule:       #d9d3c4;
    --rule-soft:  #e7e2d3;
    --brand:      #1f4a54;
    --brand-ink:  #0a1f24;
    --accent:     #1f4a54;
    --accent-ink: #ffffff;
    --ok:         #17825a;
    --warn:       #b45309;
    --bad:        #b42318;

    /* Alias de compatibilité */
    --ink-soft:       #33474d;
    --ink-muted:      #6b7a7f;
    --line:           #d9d3c4;
    --line-strong:    #c5bfb0;
    --accent-soft:    color-mix(in srgb, #1f4a54 10%, transparent);
    --accent-strong:  #143540;
    --surface:        #fbfaf7;
    --surface-strong: #fbfaf7;
    --surface-muted:  color-mix(in srgb, #0e1b1f 5%, transparent);
    --danger:         #b42318;
    --success:        #17825a;
    --warning:        #b45309;
    --warm:           #b45309;
    --warm-soft:      color-mix(in srgb, #b45309 12%, transparent);
    --gold:           #9e7a31;
    --paper-strong:   #fbfaf7;
    --paper-alt:      #f6f5f1;

    /* Typographie */
    --font-sans:    "Geist", ui-sans-serif, system-ui, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, monospace;
    --font-display: "Geist", ui-sans-serif, sans-serif;

    /* Rayons */
    --radius-xl: 4px;
    --radius-lg: 4px;
    --radius-md: 4px;
    --radius-sm: 3px;

    /* Ombres */
    --shadow-lg: none;
    --shadow-sm: none;
}

[data-theme="dark"] {
    --bg:        #0b1519;
    --paper:     #0f1b1f;
    --ink:       #eef3f1;
    --ink-2:     #b6c4c7;
    --muted:     #7e8f93;
    --rule:      #1f3036;
    --rule-soft: #172529;
    --brand:     #7bd3c4;
    --brand-ink: #a8ece0;
    --accent-ink:#0b1519;
    --ink-soft:  #b6c4c7;
    --ink-muted: #7e8f93;
    --line:      #1f3036;
    --surface:   #0f1b1f;
}

/* ── 2. BASE ─────────────────────────────────────────────────────────── */
html, body {
    font-family: var(--font-sans);
}
body {
    background: var(--bg);
}

/* ── 3. SHELL — pleine largeur ───────────────────────────────────────── */
/* Le shell hérite de site.css max-width 1260px centré.
   On le rend pleine largeur pour que les héros soient edge-to-edge. */
.shell {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow-x: clip;
}

/* Grille blueprint sur le fond de page */
.page-backdrop {
    background:
        linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: none;
    opacity: 1;
}

/* ── 4. HEADER ───────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-radius: 0;
    background: var(--paper);
    border: none;
    border-bottom: 1px solid var(--rule);
    box-shadow: none;
    backdrop-filter: none;
    padding: 14px clamp(20px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
}

.site-header__bar {
    margin-right: auto;
}

.site-header__panel {
    display: flex;
    align-items: center;
    gap: 16px;
    grid-template-columns: none;
}

.site-header,
.hero-shell,
.page-hero,
.cta-strip,
.auth-panel {
    backdrop-filter: none;
}

.brandmark {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.main-nav a {
    border-radius: 3px;
    font-weight: 500;
    color: var(--ink-2);
    padding: 7px 10px;
}
.main-nav a:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

.nav-toggle {
    border-color: var(--rule);
    background: transparent;
    border-radius: 3px;
}

.header-link {
    color: var(--ink-2);
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 3px;
}
.header-link:hover {
    background: color-mix(in srgb, var(--ink) 6%, transparent);
}

.header-register-cta {
    font-weight: 600;
}

.language-select {
    border-radius: 3px;
    background: transparent;
    border-color: var(--rule);
    color: var(--ink-2);
}

.identity-chip {
    border-radius: 3px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
}

/* ── 5. WORKSPACE NAV ────────────────────────────────────────────────── */
.workspace-nav {
    border-radius: 0;
    background: var(--paper);
    backdrop-filter: none;
    border-bottom: 1px solid var(--rule);
    padding: 10px clamp(20px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
}

.workspace-link {
    border-radius: 3px;
    font-weight: 500;
}
.workspace-link--active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
}

/* ── 6. HÉROS — pleine largeur ───────────────────────────────────────── */
.hero-shell,
.page-hero,
.cta-strip {
    color: var(--accent-ink);
    background: var(--brand-ink);
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

/* Grille blueprint dans les héros */
.hero-shell::before,
.page-hero::before,
.cta-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 0;
}

/* Corner ticks */
.hero-shell::after,
.page-hero::after {
    content: "";
    position: absolute;
    top: 10px; left: 10px;
    width: 10px; height: 10px;
    border-top: 1px solid rgba(255,255,255,0.25);
    border-left: 1px solid rgba(255,255,255,0.25);
    pointer-events: none;
    z-index: 1;
}

/* Positionnement relatif du contenu par rapport au pseudo-élément */
.hero-shell > *,
.page-hero > *,
.cta-strip > * {
    position: relative;
    z-index: 1;
}

/* Padding et max-width des héros */
.hero-shell,
.page-hero {
    padding-top: 80px;
    padding-bottom: 72px;
    padding-left: clamp(24px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
    padding-right: clamp(24px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
    gap: 40px;
    align-items: start;
}

.cta-strip {
    padding: 80px clamp(24px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
}

.auth-panel {
    background: var(--brand-ink);
    border-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ── 7. PAGE CONTENT — section spacing ───────────────────────────────── */
.page-content {
    display: block;
    gap: 0;
}

/* Chaque section pleine largeur avec border-bottom et padding */
.page-content > section,
.page-content > article,
.page-content > div.section-block,
.page-content > div.panel-grid,
.page-content > div.home-v2 {
    border-bottom: 1px solid var(--rule-soft);
    padding-top: 72px;
    padding-bottom: 72px;
    padding-left: clamp(24px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
    padding-right: clamp(24px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
    margin: 0;
    border-radius: 0;
}

/* Héros : pas de padding latéral supplémentaire ici (déjà géré) */
.page-content > .hero-shell,
.page-content > .page-hero {
    padding-top: 80px;
    padding-bottom: 72px;
}

/* Suppression des gaps de grille hérités */
.contact-layout,
.docs-layout,
.auth-layout,
.panel-grid,
.section-block {
    padding: 0;
    border-bottom: none;
}

/* ── 8. SECTION HEAD (eyebrow gauche / contenu droite) ───────────────── */
.section-head {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 48px;
    align-items: start;
    justify-content: start;
    margin-bottom: 40px;
}

.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 12px;
    text-wrap: balance;
}

.section-head p {
    color: var(--ink-2);
    font-size: 17px;
    max-width: 640px;
    margin: 0;
}

/* ── 9. TYPOGRAPHIE ──────────────────────────────────────────────────── */
.hero-copy h1,
.page-hero h1,
.auth-panel h1 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.02;
    text-wrap: balance;
}

.section-head h2,
.surface-card h2,
.cta-strip h2 {
    font-family: var(--font-display);
    font-weight: 600;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Eyebrow dans les zones sombres */
.hero-shell .eyebrow,
.page-hero .eyebrow,
.cta-strip .eyebrow,
.auth-panel .eyebrow,
.hero-panel__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.order-card__ticket {
    font-family: var(--font-mono);
}

/* ── 10. BOUTONS ─────────────────────────────────────────────────────── */
.btn {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    font-weight: 600;
    border-radius: 999px;
    transition: transform 0.08s ease, background-color 0.15s ease;
}
.btn:hover {
    box-shadow: none;
    background: var(--accent-strong);
    transform: translateY(-1px);
}
.btn-quiet {
    background: transparent;
    border-color: var(--rule);
    color: var(--ink);
    box-shadow: none;
}
.btn-quiet:hover {
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    box-shadow: none;
    transform: none;
}
.hero-shell .btn-quiet,
.page-hero .btn-quiet,
.cta-strip .btn-quiet,
.auth-panel .btn-quiet {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    color: #eef3f1;
}
.hero-shell .btn-quiet:hover,
.page-hero .btn-quiet:hover,
.cta-strip .btn-quiet:hover,
.auth-panel .btn-quiet:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* ── 11. CARTES ──────────────────────────────────────────────────────── */
.feature-card,
.pricing-card,
.surface-card,
.auth-card {
    background: var(--paper);
    border-color: var(--rule);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.metric-chip,
.mini-metric {
    background: var(--paper);
    border-color: var(--rule);
    border-radius: var(--radius-md);
}
.metric-ribbon {
    background: var(--paper);
    border-radius: var(--radius-md);
}
.status-row,
.stack-item,
.doc-row,
.thread-entry {
    background: var(--paper);
    border-color: var(--rule);
    border-radius: var(--radius-md);
}
.asset-card {
    background: var(--paper);
    border-color: var(--rule);
    border-radius: var(--radius-md);
}

/* Cartes sombres */
.surface-card--contrast,
.section-block--contrast .pricing-card {
    background: var(--brand-ink);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}
.home-v2-window {
    background: var(--brand-ink);
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: none;
}

/* ── 12. GRILLES DE CARTES — bordures partagées ──────────────────────── */
/* Feature / pricing grids sans gap, juste des bordures qui se touchent */
.feature-grid,
.pricing-grid {
    gap: 0;
    border: 1px solid var(--rule);
    background: var(--paper);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.feature-grid .feature-card,
.pricing-grid .pricing-card {
    border: none;
    border-right: 1px solid var(--rule);
    border-radius: 0;
}
.feature-grid .feature-card:last-child,
.pricing-grid .pricing-card:last-child {
    border-right: none;
}

/* ── 13. STATUS PILLS ────────────────────────────────────────────────── */
.status-pill {
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: var(--ink);
    font-weight: 600;
    border-radius: 999px;
}
.status-pill--healthy {
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok);
}
.status-pill--degraded,
.status-pill--warning,
.status-pill--standby,
.status-pill--protected {
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    color: var(--warn);
}
.status-pill--connected,
.status-pill--live,
.status-pill--new,
.status-pill--info {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    color: var(--brand);
}
.status-pill--neutral,
.status-pill--unknown {
    background: var(--rule-soft);
    color: var(--muted);
}

/* ── 14. FOOTER ──────────────────────────────────────────────────────── */
.site-footer {
    border-radius: 0;
    background: var(--paper);
    border: none;
    border-top: 1px solid var(--rule);
    box-shadow: none;
    padding: 32px clamp(24px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
}

/* ── 15. ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes tc-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
@keyframes tc-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
@keyframes tc-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}
@keyframes tc-wire {
    to { stroke-dashoffset: -40; }
}

.rise           { animation: tc-rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
.pulse-dot      { display: inline-block; animation: tc-pulse 1.4s ease-in-out infinite; }
.blink          { display: inline-block; animation: tc-blink 1s step-end infinite; }
.marquee-track  { animation: tc-marquee 40s linear infinite; }
.wire           { animation: tc-wire 1.5s linear infinite; }

/* ── 16. CLASSES UTILITAIRES ─────────────────────────────────────────── */
/* Container centré max 1240px */
.tc-inner {
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
}

/* Grille blueprint (zones d'emphase) */
.grid-bg {
    background-image:
        linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
}
.grid-bg-fine {
    background-image:
        linear-gradient(color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* Chip / badge — pill mono */
.tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
    color: var(--ink);
}
.tc-chip--ok {
    background: color-mix(in srgb, var(--ok) 10%, transparent);
    border-color: color-mix(in srgb, var(--ok) 22%, transparent);
    color: var(--ok);
}
.tc-chip--warn {
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    border-color: color-mix(in srgb, var(--warn) 22%, transparent);
    color: var(--warn);
}
.tc-chip--brand {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    border-color: color-mix(in srgb, var(--brand) 22%, transparent);
    color: var(--brand);
}

/* FlowStatus inline (Received ▸ Routing ▸ ACK ▸ Delivered) */
.flow-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
}
.flow-status__step {
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--rule-soft);
    color: var(--muted);
    border: 1px solid var(--rule);
}
.flow-status__step--done {
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.flow-status__arrow { color: var(--muted); font-size: 8px; }
.flow-status__arrow--done { color: var(--ok); }

/* Code blocks */
code, pre, .order-card__ticket { font-family: var(--font-mono); }

/* Inputs */
input:not([type="radio"]):not([type="checkbox"]),
select, textarea {
    font-family: var(--font-sans);
    border-radius: var(--radius-md);
    border-color: var(--rule);
    background: var(--paper);
}

/* Bandeau info/warning */
.notice-banner {
    border-radius: 0;
    margin: 0;
}

/* Notice hors main */
.notice-banner--spaced { margin-bottom: 0; }

/* ── 17. LANDING — section "comment ça marche" ───────────────────────── */
/* Les 3 cartes d'étapes : grille sans gap */
.home-landing .feature-grid,
.home-landing .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Hero de la landing : fond sombre full-bleed */
.home-redesign-hero,
.hero-shell {
    display: grid;
    grid-template-columns: 1fr;
}

/* Bandeau plateformes */
.home-platforms-strip {
    border-bottom: 1px solid var(--rule-soft);
    padding: 16px clamp(24px, calc((100vw - 1240px) / 2 + 32px), calc((100vw - 1240px) / 2 + 32px));
    overflow: hidden;
    background: var(--paper);
}

/* Séparateur de section — shorthand pour ajouter sur des éléments inline */
.tc-section-sep {
    border-bottom: 1px solid var(--rule-soft);
}

/* ── 18. SECTION BLOCK CONTRAST (override) ───────────────────────────── */
.section-block--contrast {
    background: var(--brand-ink);
    color: var(--accent-ink);
    padding-top: 80px;
    padding-bottom: 80px;
}
.section-block--contrast .eyebrow { color: rgba(255,255,255,0.5); }
.section-block--contrast .section-head h2 { color: #fbfaf7; }
.section-block--contrast p { color: rgba(255,255,255,0.7); }

/* ── 19. PRICING PAGE ─────────────────────────────────────────────────── */
.pricing-page__accent {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
}

.pricing-page__hero-card {
    display: grid;
    gap: 14px;
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.26);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}

.pricing-page__hero-list,
.pricing-page__feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pricing-page__hero-list {
    display: grid;
    gap: 10px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.86);
}

.pricing-page__hero-list li,
.pricing-page__feature-list li {
    position: relative;
    padding-left: 18px;
}

.pricing-page__hero-list li::before,
.pricing-page__feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 11px;
}

.pricing-page__section-copy {
    display: grid;
    gap: 14px;
    max-width: 820px;
}

.pricing-page__plans .pricing-card {
    position: relative;
    padding: 28px 24px;
}

.pricing-page__featured-badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px 12px;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pricing-page__plans .home-plan-card__intro h3 {
    margin: 0;
}

.pricing-page__plans .home-plan-card__intro p {
    margin: 0;
}

.pricing-page__plans .metric-grid--compact strong {
    font-size: 1.05rem;
}

.pricing-page__feature-list {
    display: grid;
    gap: 10px;
    font-size: 0.95rem;
}

.pricing-page__plan-actions {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.pricing-page__plan-actions .btn {
    width: 100%;
    justify-content: center;
}

.pricing-page__compare {
    padding: 0;
    overflow: hidden;
}

.pricing-page__compare-scroll {
    overflow-x: auto;
}

.pricing-page__compare-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.pricing-page__compare-table thead th {
    padding: 18px 20px;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    text-align: left;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.pricing-page__compare-table thead th + th {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-transform: none;
}

.pricing-page__compare-table tbody th,
.pricing-page__compare-table tbody td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
    text-align: left;
}

.pricing-page__compare-table tbody th {
    width: 30%;
    font-weight: 600;
    color: var(--ink);
}

.pricing-page__compare-table tbody tr:last-child th,
.pricing-page__compare-table tbody tr:last-child td {
    border-bottom: none;
}

.pricing-page__compare-value {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink-2);
}

.pricing-page__compare-value--yes {
    color: var(--ok);
}

.pricing-page__compare-value--no {
    color: var(--muted);
}

.pricing-page__enterprise {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
    gap: 28px;
    align-items: start;
}

.pricing-page__enterprise-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pricing-page__faq-list {
    padding: 0;
    gap: 0;
}

.pricing-page__faq-list .home-faq-item + .home-faq-item {
    border-top: 1px solid var(--rule);
}

.pricing-page__faq-list .home-faq-item p {
    margin: 0;
}

@media (max-width: 980px) {
    .pricing-page__enterprise {
        grid-template-columns: 1fr;
    }

    .pricing-page__enterprise-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .pricing-page__plans .pricing-card {
        padding: 22px 18px;
    }

    .pricing-page__featured-badge {
        position: static;
        width: fit-content;
        margin-bottom: 2px;
    }

    .pricing-page__enterprise-metrics {
        grid-template-columns: 1fr;
    }

    .pricing-page__compare-table {
        min-width: 640px;
    }
}