.landing-body {
    margin: 0;
    background: var(--bg-content);
    color: var(--text-content);
    --landing-context-bar-height: 0px;
    /* Wash claro da trilha (navy institucional fica no hero/nav; aqui usa azul médio). */
    --landing-org-wash: #2b6cb0;
    --landing-pro-wash: var(--landing-pro-color);
}

.landing-body.has-context {
    --landing-context-bar-height: 2.5rem;
}

.landing-body *,
.landing-body *::before,
.landing-body *::after {
    box-sizing: border-box;
}

.landing-body main {
    width: 100%;
    overflow-x: clip;
}

/* --- Header (altura/tipografia alinhadas à navbar de login) --- */

.landing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px 16px;
    padding: 0 16px;
    height: var(--navbar-height);
    min-height: var(--navbar-height);
    box-sizing: border-box;
    background: rgba(15, 42, 68, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
}

.landing-brand {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.5px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.landing-brand:hover {
    color: #fff;
}

.brand-mark--landing {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.landing-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 9px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.landing-context-switch {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    z-index: 29;
    box-sizing: border-box;
    height: var(--landing-context-bar-height, 2.5rem);
    padding: 0 16px;
    display: none;
    align-items: center;
    justify-content: flex-end;
    /* background: rgba(15, 42, 68, 0.92); */
    /* backdrop-filter: blur(10px); */
    -webkit-backdrop-filter: blur(10px);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
}

.landing-context-switch:not([hidden]) {
    display: flex;
}

/*
 * Trilha segmentada: mesmo desenho do .auth-tipo-switch da tela de login
 * (trilha com padding, duas colunas iguais e pílula branca na opção atual),
 * nas cores da landing — trilha no azul da navbar, como um recorte dela, com
 * a pílula branca na opção atual e o texto na cor do contexto (navy na
 * clínica, vinho no profissional).
 */
.landing-context-switch__track {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(15, 42, 68, 0.88);
    box-shadow: inset 0 0 0 1px transparent;
}

.landing-context-switch__option {
    appearance: none;
    border: none;
    margin: 0;
    padding: 5px 14px;
    border-radius: 8px;
    background: transparent;
    color: rgba(241, 245, 249, 0.74);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.landing-context-switch__option:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.landing-context-switch__option[aria-pressed="true"] {
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.landing-context--organization .landing-context-switch__option[aria-pressed="true"] {
    color: var(--landing-org-color);
}

.landing-context--professional .landing-context-switch__option[aria-pressed="true"] {
    color: var(--landing-pro-color);
}

.landing-context-switch__option:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

.landing-nav-link {
    color: #f1f5f9;
    text-decoration: none;
    font-size: clamp(0.857rem, 2.5vw, 0.93rem);
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 8px;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.landing-nav-link:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Entrar: atalho único para /auth/login */
.landing-nav-link--entrar {
    font-weight: 700;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.16);
}

.landing-nav-link--entrar:hover,
.landing-nav-link--entrar:focus-visible {
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
    outline: none;
}

/* --- Hero --- */

.landing-hero {
    position: relative;
    min-height: min(100vh, 860px);
    display: flex;
    align-items: center;
    padding:
        calc(clamp(88px, 14vw, 120px) + var(--landing-context-bar-height))
        clamp(16px, 4vw, 32px)
        clamp(48px, 8vw, 72px);
    color: #f8fafc;
    overflow: hidden;
}

.landing-hero-atmosphere {
    position: absolute;
    inset: 0;
    background:
        url("/images/landing-hero-bg.jpg") center / cover no-repeat;
    z-index: 0;
}

/* Véu da marca: mantém contraste do texto e o degradê azul → vinho. */
.landing-hero-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 20%, rgba(56, 189, 248, 0.14), transparent 55%),
        radial-gradient(ellipse 70% 50% at 85% 70%, rgba(92, 33, 69, 0.35), transparent 50%),
        linear-gradient(115deg, #0f2a44 0%, #1a3550 42%, #5c2145 100%);
    opacity: 0.62;
    pointer-events: none;
}

.landing-hero-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* Login e cadastro: a cor do tipo, transparente sobre o claro do app logado. */
.auth-body {
    isolation: isolate;
    background: var(--bg-content);
    color: var(--text-content);
}

.auth-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--bg-content);
}

.auth-body--organization::before {
    background: color-mix(in srgb, var(--landing-org-color) 10%, var(--bg-content));
}

.auth-body--professional::before {
    background: color-mix(in srgb, var(--landing-pro-color) 10%, var(--bg-content));
}

.landing-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 6vw, 64px);
    align-items: center;
}

.landing-hero-inner--escolha {
    grid-template-columns: 1fr;
    max-width: 720px;
}

.landing-hero--escolha {
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    padding-top: calc(clamp(72px, 10vw, 96px) + var(--landing-context-bar-height));
    padding-bottom: clamp(32px, 6vw, 48px);
}

.landing-hero--escolha .landing-brand-hero {
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    margin-bottom: 16px;
}

.landing-hero--escolha .brand-mark--hero {
    width: clamp(1.75rem, 5vw, 2.5rem);
    height: clamp(1.75rem, 5vw, 2.5rem);
}

.landing-hero--escolha .landing-hero-lead {
    color: #cbd5e1;
    max-width: 40ch;
}

.landing-escolha-card {
    font-family: inherit;
}

body:not(.landing-context--organization) .landing-for-org {
    display: none;
}

body:not(.landing-context--professional) .landing-for-pro {
    display: none;
}

.landing-quiz {
    display: none;
}

.landing-context--organization .landing-quiz.landing-for-org,
.landing-context--professional .landing-quiz.landing-for-pro {
    display: grid;
    gap: 20px;
}

/* Escolha obrigatória */

.landing-escolha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 8px 0 20px;
    animation: landing-fade-up 0.7s ease 0.24s both;
}

.landing-escolha[hidden],
#landing-papel-step[hidden] {
    display: none;
}

.landing-hero-brand-block:has(.landing-papel-back:not([hidden])) .landing-brand-hero {
    margin-bottom: 10px;
}

.landing-papel-back {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    text-align: left;
}

.landing-papel-back[hidden] {
    display: none;
}

.landing-papel-back:hover,
.landing-papel-back:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}

a.landing-escolha-card,
a.landing-escolha-card:hover,
a.landing-escolha-card:focus,
a.landing-escolha-card:focus-visible,
a.landing-escolha-card:visited,
a.landing-escolha-card strong,
a.landing-escolha-card span {
    text-decoration: none;
}

a.landing-escolha-card {
    color: inherit;
}

.landing-escolha-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    padding: 22px 22px 24px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(15, 23, 42, 0.28);
    color: #e2e8f0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.landing-escolha-card:hover,
.landing-escolha-card:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.landing-escolha-card strong {
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}

.landing-escolha-card > span:last-child,
.landing-escolha-card__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #cbd5e1;
}

.landing-escolha-card__icon {
    font-size: 40px;
    line-height: 1;
    color: #fff;
}

.landing-escolha-card--login,
.landing-escolha-card--discover {
    padding: 40px 32px;
    gap: 12px;
    min-height: 200px;
}

.landing-escolha-card--org,
.landing-escolha-card--pro {
    padding: 28px 24px 32px;
    gap: 12px;
    min-height: 180px;
}

.landing-escolha-card--login {
    background: linear-gradient(160deg, rgba(15, 42, 68, 0.96) 0%, rgba(30, 64, 110, 0.92) 100%);
    border-color: rgba(255, 255, 255, 0.48);
}

.landing-escolha-card--login:hover,
.landing-escolha-card--login:focus-visible {
    box-shadow: 0 12px 32px rgba(15, 42, 68, 0.45);
    border-color: rgba(255, 255, 255, 0.72);
}

.landing-escolha-card--discover {
    background: linear-gradient(
        135deg,
        var(--landing-pro-color) 0%,
        var(--landing-org-color) 100%
    );
    border-color: rgba(255, 255, 255, 0.36);
}

.landing-escolha-card--discover:hover,
.landing-escolha-card--discover:focus-visible {
    background: linear-gradient(
        135deg,
        var(--landing-pro-color-hover) 0%,
        var(--landing-org-color-hover) 100%
    );
    box-shadow: 0 12px 32px rgba(15, 42, 68, 0.4);
    border-color: rgba(255, 255, 255, 0.55);
}

.landing-escolha-card--org {
    background: linear-gradient(160deg, rgba(15, 42, 68, 0.92) 0%, rgba(22, 58, 92, 0.88) 100%);
    border-color: rgba(56, 189, 248, 0.28);
}

.landing-escolha-card--org:hover,
.landing-escolha-card--org.is-selected {
    box-shadow: 0 12px 32px rgba(15, 42, 68, 0.45);
    border-color: rgba(125, 211, 252, 0.55);
}

.landing-escolha-card--pro {
    background: linear-gradient(160deg, rgba(92, 33, 69, 0.75) 0%, rgba(112, 48, 82, 0.7) 100%);
}

.landing-escolha-card--pro:hover,
.landing-escolha-card--pro.is-selected {
    box-shadow: 0 12px 32px rgba(92, 33, 69, 0.4);
    border-color: rgba(249, 168, 212, 0.45);
}

.landing-escolha-card.is-selected {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

/* Diagnóstico (perguntas visíveis) */

.landing-section--quiz {
    background: #fff;
}

.landing-quiz-item {
    padding: 20px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: var(--bg-content);
}

.landing-context--organization .landing-quiz-item {
    background: color-mix(in srgb, var(--landing-org-wash) 9%, #fff);
    border-color: color-mix(in srgb, var(--landing-org-wash) 28%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--landing-org-wash) 12%, transparent);
}

.landing-context--professional .landing-quiz-item {
    background: color-mix(in srgb, var(--landing-pro-wash) 9%, #fff);
    border-color: color-mix(in srgb, var(--landing-pro-wash) 28%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--landing-pro-wash) 12%, transparent);
}

.landing-quiz-question {
    margin: 0 0 8px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--primary-navy);
    letter-spacing: -0.015em;
    line-height: 1.45;
}

.landing-quiz-question + .landing-quiz-ack {
    margin-top: 4px;
}

.landing-quiz-situations {
    margin: 0 0 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #64748b;
}

.landing-quiz-ack {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #475569;
}

.landing-plan--single {
    max-width: 32rem;
    margin-inline: auto;
}

.landing-brand-hero {
    margin: 0 0 20px;
    font-size: clamp(2.5rem, 8vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    color: #fff;
    animation: landing-fade-up 0.7s ease both;
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.brand-mark--hero {
    width: clamp(2.5rem, 8vw, 3.5rem);
    height: clamp(2.5rem, 8vw, 3.5rem);
    border-radius: 0.55em;
}

.landing-hero-title {
    font-size: clamp(1.25rem, 3.2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    max-width: 38ch;
    color: #e2e8f0;
    animation: landing-fade-up 0.7s ease 0.08s both;
}

.landing-hero-lead {
    font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
    line-height: 1.65;
    color: #94a3b8;
    max-width: 42ch;
    margin: 0 0 28px;
    animation: landing-fade-up 0.7s ease 0.16s both;
}

.landing-hero-note {
    margin: 16px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #94a3b8;
    animation: landing-fade-up 0.7s ease 0.3s both;
}

.landing-hero-actions,
.landing-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: landing-fade-up 0.7s ease 0.24s both;
}

.landing-cta-actions {
    justify-content: center;
    animation: none;
}

.landing-hero-visual {
    animation: landing-fade-up 0.8s ease 0.2s both;
}

/* Sync mock */

.landing-sync-mock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 16px);
    padding: clamp(16px, 3vw, 24px);
}

.landing-sync-panel {
    flex: 1 1 0;
    min-width: 0;
    max-width: 180px;
    padding: 16px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(8px);
}

.landing-sync-panel--pro {
    border-color: rgba(92, 33, 69, 0.5);
    box-shadow: 0 0 0 1px rgba(92, 33, 69, 0.25) inset;
}

.landing-sync-panel--org {
    border-color: rgba(56, 189, 248, 0.25);
    box-shadow: 0 0 0 1px rgba(15, 42, 68, 0.4) inset;
}

.landing-sync-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 12px;
}

.landing-sync-slots {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.landing-sync-slot {
    display: block;
    height: 10px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.25);
}

.landing-sync-slot.is-mine {
    background: rgba(92, 33, 69, 0.85);
    width: 88%;
}

.landing-sync-slot.is-shared {
    background: linear-gradient(90deg, rgba(92, 33, 69, 0.9), rgba(56, 189, 248, 0.75));
    width: 100%;
}

.landing-sync-slot.is-private {
    background: repeating-linear-gradient(
        -45deg,
        rgba(92, 33, 69, 0.55),
        rgba(92, 33, 69, 0.55) 4px,
        rgba(15, 23, 42, 0.5) 4px,
        rgba(15, 23, 42, 0.5) 8px
    );
    width: 72%;
}

.landing-sync-slot.is-empty {
    background: rgba(148, 163, 184, 0.15);
    width: 70%;
}

.landing-sync-slot.is-blocked {
    background: rgba(148, 163, 184, 0.12);
    width: 40%;
    opacity: 0.5;
}

.landing-sync-caption {
    font-size: 0.75rem;
    color: #cbd5e1;
}

.landing-sync-bridge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--accent-blue);
}

.landing-sync-bridge .material-icons-round {
    font-size: 28px;
    position: relative;
    z-index: 1;
}

.landing-sync-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(56, 189, 248, 0.45);
    animation: landing-sync-pulse 2.4s ease-out infinite;
}

/* --- Buttons --- */

.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
    text-align: center;
}

.landing-btn:hover {
    transform: translateY(-1px);
}

.landing-btn-primary {
    background: var(--landing-pro-color);
    color: #fff;
}

.landing-btn-primary:hover {
    background: var(--landing-pro-color-hover);
    box-shadow: 0 8px 24px rgba(92, 33, 69, 0.35);
}

.landing-btn-secondary {
    background: var(--landing-org-color);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.landing-btn-secondary:hover {
    background: var(--landing-org-color-hover);
    box-shadow: 0 8px 24px rgba(15, 42, 68, 0.35);
}

.landing-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.landing-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.landing-btn-outline-pro {
    background: transparent;
    color: var(--landing-pro-color);
    border: 1px solid var(--landing-pro-color-soft);
}

.landing-btn-outline-pro:hover {
    background: var(--landing-pro-color-soft);
    box-shadow: none;
}

.landing-btn-outline-org {
    background: transparent;
    color: var(--landing-org-color);
    border: 1px solid var(--landing-org-color-soft);
}

.landing-btn-outline-org:hover {
    background: var(--landing-org-color-soft);
    box-shadow: none;
}

/* --- Sections --- */

.landing-section {
    padding: clamp(48px, 10vw, 88px) clamp(16px, 4vw, 32px);
    scroll-margin-top: calc(var(--navbar-height) + var(--landing-context-bar-height) + 12px);
}

.landing-trail {
    scroll-margin-top: calc(var(--navbar-height) + var(--landing-context-bar-height) + 12px);
}

.landing-section-inner {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

.landing-section-inner--flush {
    max-width: 1080px;
}

.landing-section-header {
    margin-bottom: clamp(28px, 5vw, 44px);
    max-width: 560px;
}

.landing-section-header--centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.landing-section-header h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--primary-navy);
    margin: 0 0 12px;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
}

.landing-section-header p {
    margin: 0;
    line-height: 1.65;
    color: #64748b;
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
}

/* Problem */

.landing-section--problem {
    background: #fff;
}

.landing-problem-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-radius: 0;
    overflow: hidden;
}

.landing-problem-side {
    padding: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 32px);
    min-width: 0;
}

.landing-problem-side--org {
    background: linear-gradient(160deg, #0f2a44 0%, #163a5c 100%);
    color: #e2e8f0;
}

.landing-problem-side--pro {
    background: linear-gradient(160deg, #5c2145 0%, #703052 100%);
    color: #e2e8f0;
}

.landing-problem-side h3 {
    margin: 0 0 12px;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.landing-problem-side p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #cbd5e1;
}

/* Model steps — atmosfera da sala de espera atrás do “como funciona”. */

.landing-section--model {
    position: relative;
    isolation: isolate;
    background:
        url("/images/landing-trail-bg.jpg") center / cover no-repeat;
}

.landing-section--model::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        color-mix(in srgb, var(--bg-content) 86%, transparent);
    pointer-events: none;
}

.landing-section--model > .landing-section-inner {
    position: relative;
    z-index: 1;
}

/* Lead sobre a foto: cinza slate (#64748b) não lê bem — escurece só nesta seção. */
.landing-section--model .landing-section-header p {
    color: #334155;
}

.landing-model-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    counter-reset: none;
    position: relative;
}

/* Linha do timeline atrás dos círculos (sem sobrepor o card). */
.landing-model-steps::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 36px;
    width: 2px;
    background: #e2e8f0;
    z-index: 0;
    pointer-events: none;
}

.landing-model-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 0 0 clamp(28px, 5vw, 36px);
    position: relative;
    min-width: 0;
}

.landing-model-step:last-child {
    padding-bottom: 0;
}

.landing-model-step-num {
    position: relative;
    z-index: 1;
    top: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    background-image: linear-gradient(var(--landing-pro-color-soft), var(--landing-pro-color-soft));
    color: var(--landing-pro-color);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--bg-content) 92%, #fff);
}

.landing-model-step:nth-child(2) .landing-model-step-num {
    background-image: linear-gradient(135deg, var(--landing-org-color-soft), var(--landing-pro-color-soft));
    color: var(--primary-navy);
}

.landing-model-step:nth-child(3) .landing-model-step-num {
    background-image: linear-gradient(var(--landing-org-color-soft), var(--landing-org-color-soft));
    color: var(--landing-org-color);
}

.landing-context--organization .landing-model-step-num,
.landing-context--organization .landing-model-step:nth-child(2) .landing-model-step-num,
.landing-context--organization .landing-model-step:nth-child(3) .landing-model-step-num {
    background-color: var(--landing-org-color);
    background-image: none;
    color: #fff;
}

.landing-context--professional .landing-model-step-num,
.landing-context--professional .landing-model-step:nth-child(2) .landing-model-step-num,
.landing-context--professional .landing-model-step:nth-child(3) .landing-model-step-num {
    background-color: var(--landing-pro-color);
    background-image: none;
    color: #fff;
}

.landing-model-step div {
    background: #fff;
    padding: 20px 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.05);
    flex: 1;
    min-width: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}

.landing-model-step div:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.landing-model-step strong {
    display: block;
    color: var(--primary-navy);
    font-size: 1.125rem;
    margin-bottom: 6px;
    letter-spacing: -0.015em;
}

.landing-model-step div span {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #475569;
}

/* Paths */

.landing-section--paths {
    padding-bottom: clamp(40px, 8vw, 64px);
}

.landing-paths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}

.landing-path {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 36px);
    text-decoration: none;
    color: #f1f5f9;
    min-height: 240px;
    transition: filter 0.2s ease;
    min-width: 0;
}

.landing-path:hover {
    filter: brightness(1.06);
}

.landing-path--org {
    background: linear-gradient(145deg, var(--landing-org-color) 0%, var(--landing-org-color-hover) 100%);
}

.landing-path--pro {
    background: linear-gradient(145deg, var(--landing-pro-color) 0%, var(--landing-pro-color-hover) 100%);
}

.landing-path h3 {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.landing-path p {
    margin: 0;
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #cbd5e1;
}

.landing-path-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
}

.landing-path-cta .material-icons-round {
    font-size: 18px;
    transition: transform 0.15s ease;
}

.landing-path:hover .landing-path-cta .material-icons-round {
    transform: translateX(4px);
}

/* Pillars */

.landing-section--pillars {
    background: #fff;
}

.landing-pillars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: clamp(28px, 5vw, 40px);
}

.landing-pillar {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    max-width: 640px;
    min-width: 0;
}

.landing-pillar .material-icons-round {
    font-size: 28px;
    color: var(--landing-org-color);
    margin-top: 2px;
}

.landing-pillar:nth-child(2) .material-icons-round {
    color: var(--landing-pro-color);
}

.landing-pillar:nth-child(3) .material-icons-round {
    color: var(--form-submit-green);
}

.landing-pillar strong {
    display: block;
    font-size: 1.125rem;
    color: var(--primary-navy);
    margin-bottom: 6px;
    letter-spacing: -0.015em;
}

.landing-pillar span {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #64748b;
}

/* Features */

.landing-section--features {
    background: #fff;
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

.landing-feature {
    padding: clamp(28px, 5vw, 40px) clamp(24px, 4vw, 36px);
    min-width: 0;
}

.landing-feature--pro {
    background: linear-gradient(160deg, #5c2145 0%, #703052 100%);
    color: #e2e8f0;
}

.landing-feature--org {
    background: linear-gradient(160deg, #0f2a44 0%, #163a5c 100%);
    color: #e2e8f0;
}

.landing-feature h3 {
    margin: 0 0 18px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.landing-feature ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.landing-feature li {
    position: relative;
    padding-left: 1.35rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.landing-feature li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-blue);
}

.landing-feature--pro li::before {
    background: #f9a8d4;
}

/* Exclusions — faixa branca para contrastar com “como funciona” (#F8FAFC). */

.landing-section--exclusions {
    background: #fff;
}

.landing-exclusions {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.landing-exclusions li {
    padding: 14px 18px;
    background: var(--bg-content);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #475569;
}

.landing-context--organization .landing-exclusions li {
    background: color-mix(in srgb, var(--landing-org-wash) 6%, #fff);
    border-color: color-mix(in srgb, var(--landing-org-wash) 18%, transparent);
}

.landing-context--professional .landing-exclusions li {
    background: color-mix(in srgb, var(--landing-pro-wash) 6%, #fff);
    border-color: color-mix(in srgb, var(--landing-pro-wash) 18%, transparent);
}

/* Plans — volta ao slate para alternar com exclusões (branco). */

.landing-section--plans {
    background: var(--bg-content);
}

.landing-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.landing-plans--pro {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Trilha clínica: painel da clínica ao lado do plano Gestão de Salas (comparação). */
.landing-plans--compare {
    max-width: 50rem;
    margin-inline: auto;
}

.landing-plans-compare {
    margin: 10px 0 0;
    font-size: 0.9375rem;
    color: #475569;
}

.landing-plans--single {
    max-width: 32rem;
    margin-inline: auto;
    grid-template-columns: 1fr;
}

.landing-plan {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 4vw, 32px);
    border-radius: 16px;
    background: #fff;
    min-width: 0;
}

.landing-plan--pro {
    background: color-mix(in srgb, var(--landing-pro-wash) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--landing-pro-wash) 22%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--landing-pro-wash) 10%, transparent);
}

.landing-plan--org {
    background: color-mix(in srgb, var(--landing-org-wash) 9%, #fff);
    border: 1px solid color-mix(in srgb, var(--landing-org-wash) 22%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--landing-org-wash) 10%, transparent);
}

.landing-plan-kicker {
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-plan--pro .landing-plan-kicker {
    color: var(--landing-pro-color);
}

.landing-plan--org .landing-plan-kicker {
    color: var(--landing-org-color);
}

.landing-plan h3 {
    margin: 0 0 16px;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--primary-navy);
    letter-spacing: -0.02em;
}

.landing-plan-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 0 0 20px;
}

.landing-plan-currency {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-navy);
}

.landing-plan-amount {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--primary-navy);
    line-height: 1;
}

.landing-plan-amount--consult {
    font-size: clamp(1.5rem, 4vw, 1.875rem);
}

.landing-plan-period {
    font-size: 1rem;
    color: #64748b;
    font-weight: 500;
}

.landing-plan ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    flex: 1;
}

.landing-plan li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #475569;
}

.landing-plan li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--landing-org-color);
}

.landing-plan--pro li::before {
    background: var(--landing-pro-color);
}

.landing-plan-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.landing-plan-actions .landing-btn {
    width: 100%;
}

.landing-plan-login {
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    text-decoration: none;
    padding: 4px 0;
}

.landing-plan-login:hover {
    color: var(--primary-navy);
    text-decoration: underline;
}

/* Contact */

.landing-section--contact {
    background:
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(56, 189, 248, 0.08), transparent 60%),
        var(--bg-content);
}

.landing-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    max-width: 640px;
    margin: 0 auto 20px;
}

.landing-contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    color: var(--primary-navy);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.landing-context--organization .landing-contact-card {
    background: color-mix(in srgb, var(--landing-org-wash) 8%, #fff);
    border-color: color-mix(in srgb, var(--landing-org-wash) 22%, transparent);
}

.landing-context--professional .landing-contact-card,
.landing-contact-card--pro {
    background: color-mix(in srgb, var(--landing-pro-wash) 8%, #fff);
    border-color: color-mix(in srgb, var(--landing-pro-wash) 22%, transparent);
}

.landing-contact-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.landing-context--organization .landing-contact-card:hover {
    border-color: color-mix(in srgb, var(--landing-org-wash) 36%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--landing-org-wash) 12%, transparent);
}

.landing-context--professional .landing-contact-card:hover,
.landing-contact-card--pro:hover {
    border-color: color-mix(in srgb, var(--landing-pro-wash) 36%, transparent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--landing-pro-wash) 12%, transparent);
}

.landing-contact-card .material-icons-round {
    font-size: 28px;
    color: var(--landing-org-wash);
}

.landing-context--professional .landing-contact-card .material-icons-round,
.landing-contact-card--pro .material-icons-round {
    color: var(--landing-pro-wash);
}

.landing-contact-card strong {
    font-size: 1rem;
}

.landing-contact-card span:last-child {
    font-size: 0.875rem;
    color: #64748b;
    word-break: break-word;
}

.landing-contact-hours {
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 28px;
}

.landing-contact-logins {
    animation: none;
}

/* CTA */

.landing-cta {
    padding: clamp(48px, 10vw, 80px) clamp(16px, 4vw, 32px);
    text-align: center;
    background:
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(56, 189, 248, 0.08), transparent 60%),
        var(--bg-content);
}

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

.landing-cta-inner h2 {
    margin: 0 0 12px;
    font-size: clamp(1.375rem, 4vw, 1.75rem);
    color: var(--primary-navy);
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
}

.landing-cta-inner p {
    margin: 0 0 28px;
    color: #64748b;
    line-height: 1.65;
}

/* Footer */

.landing-footer {
    padding: clamp(24px, 4vw, 36px) clamp(16px, 4vw, 32px);
    font-size: 0.8125rem;
    color: #94a3b8;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    overflow-wrap: break-word;
}

.landing-footer__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
}

.landing-footer__copy {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    line-height: 1.5;
    text-align: center;
}

.landing-footer__brand {
    color: #64748b;
    font-weight: 600;
}

.landing-footer__tagline {
    color: #94a3b8;
    max-width: 36rem;
    margin-inline: auto;
}

/* --- Motion --- */

@keyframes landing-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes landing-sync-pulse {
    0% {
        transform: scale(0.7);
        opacity: 0.7;
    }
    70% {
        transform: scale(1.45);
        opacity: 0;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

/* --- Responsive --- */

@media (max-width: 860px) {
    .landing-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .landing-hero-title {
        max-width: none;
    }

    .landing-hero-lead {
        max-width: none;
    }

    .landing-hero-visual {
        order: -1;
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }

    .landing-sync-mock {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .landing-escolha {
        grid-template-columns: 1fr;
    }

    .landing-header {
        position: fixed;
    }

    .landing-nav {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
    }

    .landing-nav-link {
        flex: 0 0 auto;
        text-align: center;
        white-space: normal;
        line-height: 1.3;
    }

    .landing-problem-split,
    .landing-paths,
    .landing-features,
    .landing-plans {
        grid-template-columns: 1fr;
    }

    .landing-features,
    .landing-paths {
        border-radius: 12px;
    }

    .landing-path {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .landing-hero-actions,
    .landing-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .landing-btn {
        width: 100%;
    }

    .landing-sync-panel {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-brand-hero,
    .landing-hero-title,
    .landing-hero-lead,
    .landing-hero-actions,
    .landing-cta-actions,
    .landing-hero-note,
    .landing-hero-visual,
    .landing-escolha {
        animation: none;
    }

    .landing-escolha-card:hover,
    .landing-escolha-card:focus-visible {
        transform: none;
    }

    .landing-sync-pulse {
        animation: none;
        opacity: 0.4;
    }

    .landing-btn:hover,
    .landing-path:hover .landing-path-cta .material-icons-round {
        transform: none;
    }
}

/* --- Aviso de cookies (apenas essenciais) --- */

.cookie-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    padding: 14px 20px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
    border: 1px dashed var(--primary-navy);
    background: #fff;
    color: var(--text-content);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--primary-navy) 14%, transparent);
}

.cookie-notice[hidden] {
    display: none;
}

.cookie-notice__inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px 20px;
}

.cookie-notice__title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-navy);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.cookie-notice__title > span[aria-hidden="true"] {
    letter-spacing: 0;
    margin-right: 0.4em;
    text-transform: none;
}

.cookie-notice__title-label {
    background: linear-gradient(90deg, var(--landing-org-color) 0%, var(--landing-pro-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cookie-notice__text {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-content);
}

.cookie-notice__text strong {
    color: var(--primary-navy);
    font-weight: 600;
}

.cookie-notice__text a {
    color: var(--landing-org-color);
    text-underline-offset: 2px;
}

.cookie-notice__text a:hover {
    color: var(--landing-pro-color);
}

.cookie-notice__ack {
    flex-shrink: 0;
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--accent-blue);
    color: var(--primary-navy);
}

.cookie-notice__ack:hover,
.cookie-notice__ack:focus-visible {
    filter: brightness(1.06);
    outline: 2px solid color-mix(in srgb, var(--accent-blue) 70%, var(--primary-navy));
    outline-offset: 2px;
}

.landing-body.has-cookie-notice,
.legal-body.has-cookie-notice,
.auth-body.has-cookie-notice {
    padding-bottom: 9rem;
}

@media (max-width: 720px) {
    .cookie-notice {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .cookie-notice__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cookie-notice__ack {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Páginas legais (/termos-de-uso, /politica-de-privacidade)
   --------------------------------------------------------------------------- */

.legal-body {
    margin: 0;
    background: var(--bg-content);
    color: var(--text-content);
    padding-top: var(--navbar-height);
}

.legal-body .legal-navbar {
    display: flex;
}

.legal-navbar .brand-name {
    cursor: default;
    pointer-events: none;
}

.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    color: var(--text-content);
    line-height: 1.7;
}

.legal-page__header h1 {
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    color: var(--primary-navy);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.legal-page__description {
    font-size: 1.05rem;
    color: #475569;
    margin: 0 0 1rem;
}

.legal-page__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.legal-page__switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem;
}

.legal-page__switch a {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #475569;
    background: #f1f5f9;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.legal-page__switch a:hover {
    background: #e2e8f0;
}

.legal-page__switch a[aria-current="page"] {
    background: var(--primary-navy);
    color: #f8fafc;
}

.legal-page__content h2 {
    font-size: 1.35rem;
    color: var(--primary-navy);
    margin: 2.5rem 0 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.legal-page__content h3 {
    font-size: 1.1rem;
    color: #1e293b;
    margin: 1.75rem 0 0.5rem;
}

.legal-page__content p,
.legal-page__content li {
    margin: 0 0 0.85rem;
}

.legal-page__content ul,
.legal-page__content ol {
    padding-left: 1.5rem;
    margin: 0 0 1rem;
}

.legal-page__content a {
    color: #0369a1;
}

.legal-page__content strong {
    color: #1e293b;
}

.legal-page__content blockquote {
    margin: 1.25rem 0;
    padding: 0.85rem 1.15rem;
    border-left: 4px solid var(--accent-blue);
    background: #f0f9ff;
    border-radius: 0 8px 8px 0;
}

.legal-page__content blockquote p:last-child {
    margin-bottom: 0;
}

.legal-page__content hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 2rem 0;
}

.legal-page__content code {
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.legal-page__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.925rem;
    display: block;
    overflow-x: auto;
}

.legal-page__content th,
.legal-page__content td {
    border: 1px solid #e2e8f0;
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.legal-page__content th {
    background: #f8fafc;
    color: var(--primary-navy);
    font-weight: 600;
}

.legal-page__footer {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
    font-size: 0.925rem;
    color: #64748b;
}

@media (max-width: 640px) {
    .legal-page {
        padding: 2rem 1.1rem 3rem;
    }
}

.landing-footer__legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    text-align: center;
}

.landing-footer__legal a,
.landing-footer__install {
    color: #64748b;
    text-decoration: none;
    line-height: 1.4;
}

.landing-footer__legal a:hover,
.landing-footer__install:hover {
    color: #334155;
    text-decoration: underline;
}

.landing-footer__install {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    justify-self: center;
}

.landing-footer__install[hidden] {
    display: none !important;
}

@media (min-width: 768px) {
    .landing-footer__inner {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
    }

    .landing-footer__copy {
        text-align: left;
        flex: 1 1 16rem;
        min-width: 0;
    }

    .landing-footer__tagline {
        margin-inline: 0;
    }

    .landing-footer__legal {
        flex: 0 1 28rem;
        grid-template-columns: repeat(3, minmax(0, auto));
        justify-content: end;
        justify-items: start;
        text-align: left;
        column-gap: 1.5rem;
        row-gap: 0.65rem;
    }

    .landing-footer__install {
        justify-self: start;
    }
}

@media (max-width: 380px) {
    .landing-footer__legal {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}