/**
 * Landing pública del producto (Soft UI Evolution, tokens de marca).
 */

html {
    scroll-behavior: smooth;
}

.mkt-body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    color: var(--color-foreground);
    background:
        radial-gradient(ellipse 70% 45% at 8% -8%, rgba(61, 79, 99, 0.16), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 0%, rgba(248, 241, 225, 0.7), transparent 48%),
        var(--color-background);
    color-scheme: light;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 0.75rem 1rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-md);
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

.mkt-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
    background: color-mix(in srgb, var(--color-card) 88%, transparent);
    border-bottom: 1px solid var(--color-border-subtle);
    backdrop-filter: blur(12px);
}

.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: var(--touch-min);
    color: var(--color-foreground);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.mkt-brand img {
    display: block;
    border-radius: 0.55rem;
}

.mkt-brand:hover,
.mkt-brand:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.mkt-brand:focus-visible {
    box-shadow: var(--shadow-focus);
}

.mkt-nav {
    display: none;
    align-items: center;
    gap: 0.25rem 1.25rem;
    margin-left: auto;
}

.mkt-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    color: var(--color-muted-foreground);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.mkt-nav a:hover,
.mkt-nav a:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.mkt-top-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.mkt-top-actions .mkt-btn-ghost {
    display: none;
}

.mkt-nav + .mkt-top-actions {
    margin-left: 0;
}

.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--touch-min);
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background-color var(--duration-normal) var(--ease-out),
        color var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

.mkt-btn-lg {
    min-height: 3rem;
    padding: 0.75rem 1.35rem;
    font-size: var(--font-size-base);
}

.mkt-btn-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-sm);
}

.mkt-btn-primary:hover,
.mkt-btn-primary:focus-visible {
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-md);
    outline: none;
}

.mkt-btn-secondary,
.mkt-btn-ghost {
    background: transparent;
    color: var(--color-primary);
}

.mkt-btn-secondary {
    border-color: var(--color-border-subtle);
    background: var(--color-card);
}

.mkt-btn-secondary:hover,
.mkt-btn-secondary:focus-visible,
.mkt-btn-ghost:hover,
.mkt-btn-ghost:focus-visible {
    background: var(--color-muted);
    outline: none;
}

.mkt-btn-on-dark {
    background: var(--color-on-primary);
    color: var(--color-primary);
}

.mkt-btn-on-dark:hover,
.mkt-btn-on-dark:focus-visible {
    background: color-mix(in srgb, var(--color-on-primary) 88%, #fff);
    color: var(--color-primary);
    outline: none;
}

.mkt-btn-on-dark-ghost {
    background: transparent;
    color: var(--color-on-primary);
    border-color: color-mix(in srgb, var(--color-on-primary) 45%, transparent);
}

.mkt-btn-on-dark-ghost:hover,
.mkt-btn-on-dark-ghost:focus-visible {
    background: color-mix(in srgb, var(--color-on-primary) 12%, transparent);
    outline: none;
}

#producto,
#funciones,
#capturas,
#como-funciona,
#pacientes,
#contacto {
    scroll-margin-top: 5.25rem;
}

.mkt-hero {
    display: grid;
    gap: 2.5rem;
    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.mkt-kicker {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.mkt-kicker-on-dark {
    color: var(--color-on-primary);
    opacity: 0.85;
}

.mkt-hero h1,
.mkt-section h2,
.mkt-cta h2,
.mkt-feature h3,
.mkt-steps h3,
.mkt-split-card h3 {
    font-family: var(--font-heading);
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--header-text-color, #1a1f26);
}

.mkt-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4.4vw, 3.35rem);
    line-height: 1.12;
    max-width: 18ch;
}

.mkt-lead,
.mkt-section-lead {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--mkt-copy, #3a424c);
    max-width: 40rem;
}

.mkt-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.mkt-hero-note {
    margin: 1.25rem 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-muted-foreground);
    max-width: 36rem;
}

.mkt-shot {
    margin: 0;
}

.mkt-shot-window {
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.9rem;
    background: var(--color-card);
    box-shadow: var(--shadow-lg);
    transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}

.mkt-shot-chrome {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.7rem;
    background: color-mix(in srgb, var(--color-muted) 70%, var(--color-card));
    border-bottom: 1px solid var(--color-border-subtle);
}

.mkt-shot-traffic {
    display: flex;
    gap: 0.28rem;
}

.mkt-shot-traffic i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #c5ced9;
}

.mkt-shot-traffic i:first-child { background: #c74f6d; }
.mkt-shot-traffic i:nth-child(2) { background: #e0b15a; }
.mkt-shot-traffic i:nth-child(3) { background: #7eb77e; }

.mkt-shot-url {
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-card);
    color: var(--color-muted-foreground);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-shot-screen {
    overflow: hidden;
    max-height: 22rem;
    background: var(--color-background);
}

.mkt-shot-caption {
    margin: 0.7rem 0 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--mkt-copy, #3a424c);
    line-height: 1.4;
}

.mkt-hero-shot .mkt-shot-screen {
    max-height: 24rem;
}

.mkt-ui {
    font-size: 0.72rem;
    color: var(--color-foreground);
    pointer-events: none;
    user-select: none;
}

.mkt-ui-nav {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    background: var(--color-card);
    border-bottom: 1px solid var(--color-border-subtle);
}

.mkt-ui-brand {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

.mkt-ui-links {
    flex: 1;
    min-width: 0;
    color: var(--color-muted-foreground);
    font-weight: 600;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-ui-links b {
    color: var(--color-primary);
}

.mkt-ui-avatar {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--color-muted);
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}

.mkt-ui-body {
    padding: 0.7rem 0.75rem 0.85rem;
}

.mkt-ui-kicker {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
}

.mkt-ui-title {
    margin: 0.15rem 0 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}

.mkt-ui-lead {
    margin: 0.2rem 0 0.7rem;
    color: var(--color-muted-foreground);
}

.mkt-ui-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.mkt-ui-stats div {
    padding: 0.4rem 0.45rem;
    border-radius: 0.45rem;
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
}

.mkt-ui-stats small {
    display: block;
    color: var(--color-muted-foreground);
    font-size: 0.58rem;
    font-weight: 700;
}

.mkt-ui-stats strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.95rem;
}

.mkt-ui-panel {
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.55rem;
    background: var(--color-card);
    overflow: hidden;
}

.mkt-ui-panel-h {
    padding: 0.4rem 0.55rem;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border-subtle);
}

.mkt-ui-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mkt-ui-panel li {
    display: grid;
    grid-template-columns: 2.6rem 1fr auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.38rem 0.55rem;
    border-top: 1px solid var(--color-border-subtle);
}

.mkt-ui-panel li:first-child {
    border-top: 0;
}

.mkt-ui-panel time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-muted-foreground);
}

.mkt-ui-panel em {
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    background: var(--color-muted);
    color: var(--color-primary);
}

.mkt-ui-panel li.is-now {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
}

.mkt-ui-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.mkt-ui-toggle,
.mkt-ui-search {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--color-muted);
    color: var(--color-muted-foreground);
    font-weight: 700;
}

.mkt-ui-toggle b {
    color: var(--color-on-primary);
    background: var(--color-primary);
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}

.mkt-ui-week {
    display: grid;
    grid-template-columns: 2.6rem repeat(4, minmax(0, 1fr));
    gap: 0.22rem;
    font-size: 0.62rem;
    font-weight: 700;
}

.mkt-ui-week > span {
    min-height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--color-muted) 55%, var(--color-card));
    color: var(--color-muted-foreground);
}

.mkt-ui-week > span:nth-child(-n + 5) {
    background: transparent;
    min-height: 1.2rem;
}

.mkt-ui-week > span.is-today {
    color: var(--color-primary);
}

.mkt-ui-ev {
    background: color-mix(in srgb, var(--color-primary) 16%, var(--color-card)) !important;
    color: var(--header-text-color, #1a1f26) !important;
    border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
    font-size: 0.58rem !important;
    padding: 0 0.2rem;
}

.mkt-ui-ev.is-web {
    background: color-mix(in srgb, var(--color-success, #7eb77e) 22%, var(--color-card)) !important;
}

.mkt-ui-ev.is-now {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

.mkt-ui-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.mkt-ui-people li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
}

.mkt-ui-people li.is-now {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border-subtle));
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-card));
}

.mkt-ui-dot {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--color-muted);
}

.mkt-ui-people b {
    display: block;
    font-size: 0.78rem;
}

.mkt-ui-people small {
    color: var(--color-muted-foreground);
}

.mkt-ui-people time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--color-muted-foreground);
}

.mkt-ui-guest {
    padding: 1.1rem 1rem 1.2rem;
    text-align: center;
}

.mkt-ui-photo {
    display: block;
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 0.55rem;
    border-radius: 50%;
    background:
        linear-gradient(160deg, var(--color-muted), var(--color-primary));
}

.mkt-ui-guest-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
}

.mkt-ui-guest-meta {
    margin: 0.15rem 0 0.85rem;
    color: var(--color-muted-foreground);
}

.mkt-ui-guest-days,
.mkt-ui-guest-slots {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.mkt-ui-guest-days span,
.mkt-ui-guest-slots span {
    min-width: 2.2rem;
    min-height: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    background: var(--color-muted);
    font-weight: 700;
    font-size: 0.65rem;
}

.mkt-ui-guest-days span.is-on,
.mkt-ui-guest-slots span.is-on {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.mkt-ui-guest-slots {
    margin-top: 0.35rem;
}

.mkt-ui-guest-cta {
    margin-top: 0.85rem;
    padding: 0.55rem;
    border-radius: 0.55rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
}

.mkt-shots {
    display: grid;
    gap: 1.25rem;
}

.mkt-hero-shot,
.mkt-shots .mkt-shot {
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
}

.mkt-hero-shot:hover .mkt-shot-window,
.mkt-shots .mkt-shot:hover .mkt-shot-window {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.mkt-preview {
    position: relative;
    min-height: 22rem;
}

.mkt-preview-card {
    width: min(100%, 22.5rem);
    margin-left: auto;
    padding: 1.75rem 1.4rem 1.5rem;
    text-align: center;
    background: color-mix(in srgb, var(--color-card) 82%, transparent);
    border: 1px solid var(--mkt-preview-border, rgba(255, 255, 255, 0.7));
    border-radius: 1.35rem;
    box-shadow: var(--shadow-lg);
}

.mkt-preview-avatar {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 0.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-muted);
    color: var(--color-primary);
    font-size: 2.75rem;
}

.mkt-preview-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
}

.mkt-preview-meta {
    margin: 0.2rem 0 1.1rem;
    color: var(--color-muted-foreground);
    font-size: var(--font-size-sm);
}

.mkt-preview-days,
.mkt-preview-slots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mkt-preview-days span,
.mkt-preview-slots span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 2.25rem;
    padding: 0 0.45rem;
    border-radius: 0.55rem;
    background: var(--color-muted);
    color: var(--header-text-color, #1a1f26);
    font-size: 0.75rem;
    font-weight: 700;
}

.mkt-preview-days span.is-on,
.mkt-preview-slots span.is-on,
.mkt-preview-float li.is-on {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.mkt-preview-slots {
    margin-top: 0.55rem;
}

.mkt-preview-cta {
    margin-top: 1.15rem;
    padding: 0.7rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-weight: 700;
}

.mkt-preview-float {
    position: absolute;
    left: 0;
    bottom: 1.2rem;
    width: min(15.5rem, 72%);
    padding: 0.95rem 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.mkt-preview-float-label {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted-foreground);
}

.mkt-preview-float ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.mkt-preview-float li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.35rem 0.45rem;
    border-radius: 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.mkt-preview-float time {
    font-variant-numeric: tabular-nums;
    color: var(--color-muted-foreground);
    font-weight: 700;
}

.mkt-strip {
    border-block: 1px solid var(--color-border-subtle);
    background: color-mix(in srgb, var(--color-card) 70%, transparent);
}

.mkt-strip ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem 1.5rem;
    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 0.9rem 0;
    list-style: none;
}

.mkt-strip li {
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.mkt-section {
    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}

.mkt-section-muted {
    width: 100%;
    padding-inline: max(1rem, calc((100% - 72rem) / 2));
    background: color-mix(in srgb, var(--color-muted) 55%, var(--color-card));
    border-block: 1px solid var(--color-border-subtle);
}

.mkt-section-head {
    max-width: 40rem;
    margin-bottom: 2rem;
}

.mkt-section h2 {
    margin: 0 0 0.7rem;
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    line-height: 1.2;
}

.mkt-features {
    display: grid;
    gap: 1rem;
}

.mkt-feature {
    padding: 1.35rem 1.25rem;
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.mkt-feature-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.85rem;
    border-radius: 0.8rem;
    background: var(--color-muted);
    color: var(--color-primary);
    font-size: 1.25rem;
    transition: transform var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}

.mkt-feature h3,
.mkt-steps h3,
.mkt-split-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1.15rem;
}

.mkt-feature p,
.mkt-steps p,
.mkt-split-card > p:not(.mkt-split-label) {
    margin: 0;
    line-height: 1.55;
    color: var(--mkt-copy, #3a424c);
}

.mkt-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}

.mkt-steps li {
    display: grid;
    gap: 0.55rem;
}

.mkt-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-heading);
    font-weight: 700;
}

.mkt-split {
    display: grid;
    gap: 1rem;
}

.mkt-split-card {
    padding: 1.6rem 1.4rem;
    background: var(--color-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: 1.15rem;
    box-shadow: var(--shadow-sm);
}

.mkt-split-label {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.mkt-split-card h3 {
    margin-bottom: 0.65rem;
}

.mkt-checks {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.mkt-checks li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    line-height: 1.4;
    color: var(--mkt-copy, #3a424c);
}

.mkt-checks .icon {
    margin-top: 0.1rem;
    color: var(--color-primary);
    flex: 0 0 auto;
}

.mkt-cta {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.mkt-cta-inner {
    width: min(44rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(2.75rem, 7vw, 4.5rem) 0;
}

.mkt-cta h2 {
    margin: 0 0 0.75rem;
    color: var(--color-on-primary);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
}

.mkt-cta p {
    margin: 0;
    line-height: 1.55;
    color: color-mix(in srgb, var(--color-on-primary) 88%, #ffffff);
}

.mkt-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 1.6rem;
    border-top: 2px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-muted) 58%, var(--color-card));
}

.mkt-brand-foot span {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.mkt-brand-foot strong {
    font-size: var(--font-size-sm);
}

.mkt-brand-foot small {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-muted-foreground);
}

.mkt-foot nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.15rem;
}

.mkt-foot nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    color: var(--color-muted-foreground);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.mkt-foot nav a:hover,
.mkt-foot nav a:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.mkt-copy {
    margin: 0;
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-muted-foreground);
}

@media (min-width: 720px) {
    .mkt-nav {
        display: flex;
    }

    .mkt-top-actions {
        margin-left: 0;
    }

    .mkt-top-actions .mkt-btn-ghost {
        display: inline-flex;
    }

    .mkt-hero {
        grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
        align-items: center;
    }

    .mkt-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mkt-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .mkt-split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mkt-copy {
        width: auto;
        margin-left: auto;
    }
}

@media (min-width: 1024px) {
    .mkt-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mkt-shots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}

.mkt-card,
.mkt-preview-card,
.mkt-preview-float {
    transition:
        transform var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out),
        border-color var(--duration-slow) var(--ease-out),
        opacity var(--duration-slow) var(--ease-out);
}

.mkt-feature:hover .mkt-feature-icon,
.mkt-feature:focus-within .mkt-feature-icon {
    transform: translateY(-2px) scale(1.06);
}

.mkt-feature:hover,
.mkt-split-card:hover,
.mkt-preview-card:hover,
.mkt-preview-float:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border-subtle));
}

html.js-mkt .mkt-card:not(.is-in) {
    opacity: 0;
    transform: translateY(16px);
}

html.js-mkt .mkt-card.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.52s var(--ease-out) var(--mkt-delay, 0ms),
        transform 0.52s var(--ease-out) var(--mkt-delay, 0ms),
        box-shadow var(--duration-slow) var(--ease-out),
        border-color var(--duration-slow) var(--ease-out);
}

html.js-mkt .mkt-feature.is-in:hover,
html.js-mkt .mkt-split-card.is-in:hover {
    transform: translateY(-6px);
    transition-delay: 0ms;
}

@keyframes mkt-float {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-8px);
    }
}

@media (prefers-color-scheme: dark) {
    :root,
    .mkt-body {
        color-scheme: dark;
        --color-primary: #9eb0c2;
        --color-primary-hover: #7a8fa3;
        --color-on-primary: #1a1f26;
        --color-secondary: #1a1f26;
        --color-on-secondary: #e8edf2;
        --color-accent: #9eb0c2;
        --color-accent-hover: #7a8fa3;
        --color-on-accent: #1a1f26;
        --color-background: #1a1f26;
        --color-foreground: #e8edf2;
        --color-muted: #2a323c;
        --color-muted-foreground: #c5ced8;
        --color-card: #232a33;
        --color-card-foreground: #e8edf2;
        --color-border: #3a4450;
        --color-border-subtle: #3a4450;
        --color-ring: #9eb0c2;
        --header-text-color: #e8edf2;
        --mkt-copy: #c5ced8;
        --mkt-preview-border: rgba(255, 255, 255, 0.1);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.48);
        --shadow-focus: 0 0 0 3px rgba(158, 176, 194, 0.35);
    }

    .mkt-body {
        background:
            radial-gradient(ellipse 70% 45% at 8% -8%, rgba(158, 176, 194, 0.16), transparent 55%),
            radial-gradient(ellipse 50% 40% at 100% 0%, rgba(42, 50, 60, 0.95), transparent 48%),
            var(--color-background);
    }

    .mkt-top {
        background: color-mix(in srgb, var(--color-card) 82%, transparent);
        border-bottom-color: var(--color-border-subtle);
    }

    .mkt-cta {
        background: var(--color-muted);
        color: var(--color-foreground);
    }

    .mkt-cta h2,
    .mkt-kicker-on-dark {
        color: var(--color-foreground);
    }

    .mkt-cta p {
        color: var(--color-muted-foreground);
    }

    .mkt-btn-on-dark {
        background: var(--color-primary);
        color: var(--color-on-primary);
    }

    .mkt-btn-on-dark:hover,
    .mkt-btn-on-dark:focus-visible {
        background: var(--color-primary-hover);
        color: var(--color-on-primary);
    }

    .mkt-btn-on-dark-ghost {
        color: var(--color-foreground);
        border-color: color-mix(in srgb, var(--color-foreground) 28%, transparent);
    }

    .mkt-btn-on-dark-ghost:hover,
    .mkt-btn-on-dark-ghost:focus-visible {
        background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .mkt-preview-float {
        animation: mkt-float 4.8s ease-in-out infinite alternate;
    }

    .mkt-preview-float:hover {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.js-mkt .mkt-card:not(.is-in),
    html.js-mkt .mkt-card.is-in {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }

    .mkt-shot-window,
    .mkt-card,
    .mkt-preview-card,
    .mkt-preview-float,
    .mkt-feature-icon,
    .mkt-btn,
    .mkt-brand,
    .mkt-nav a {
        transition: none;
        animation: none;
        transform: none;
    }
}

@media (max-width: 719px) {
    .mkt-ui-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}