/* =========================================================================
   Kyroon Web — Design Tokens & Base Layout (Dark AI/SaaS rebrand)
   Estilo moderno inspirado em crialabs.ia.br: fundo dark, orbs em gradiente,
   superfícies em glassmorphism, primária azul + acento verde vibrantes, CTAs
   com glow. Base visual compartilhada de TODAS as páginas (Landing, Docs,
   Compras, Conta, Retorno de checkout, Erro).
   Os contratos de classe `ky-*` são os mesmos — só o tema muda. WCAG 2.1 AA.
   ========================================================================= */

:root {
    /* ---- Rampa primária (azul) ---- */
    --ky-primary-300: #8EBEFF;      /* texto de marca sobre dark */
    --ky-primary-400: #599BFF;      /* início de gradiente de texto / acentos on-dark */
    --ky-primary-500: #3377FF;      /* stops de gradiente, foco */
    --ky-primary: #1A56F5;          /* preenchimento primário */
    --ky-primary-hover: #1442E1;
    --ky-primary-active: #1736B6;
    --ky-primary-contrast: #FFFFFF;

    /* ---- Secundária (violeta — variedade em gradientes/orbs) ---- */
    --ky-secondary: #8B5CF6;
    --ky-secondary-hover: #7C3AED;

    /* ---- Acento (verde — confirmação/sucesso/checks) ---- */
    --ky-accent: #22C55E;
    --ky-accent-400: #4ADE80;

    /* ---- Neutros: superfícies dark ---- */
    --ky-bg: #0B0B14;               /* fundo da página */
    --ky-bg-2: #0F0F1A;             /* hero / footer / seções profundas */
    --ky-surface: rgba(255, 255, 255, 0.03);   /* seção alternada (sutil) */
    --ky-surface-2: rgba(255, 255, 255, 0.07);
    --ky-glass: rgba(255, 255, 255, 0.04);      /* cartão de vidro padrão */
    --ky-glass-strong: rgba(255, 255, 255, 0.08);
    --ky-border: rgba(255, 255, 255, 0.10);
    --ky-border-strong: rgba(255, 255, 255, 0.20);

    /* ---- Texto sobre dark ---- */
    --ky-text: #F8FAFC;             /* títulos/corpo de alto contraste (AAA) */
    --ky-text-muted: #9CA9BD;       /* corpo secundário on-dark (~6.5:1, AA) */
    --ky-text-faint: #6B7689;       /* metadados/hints */
    --ky-text-inverse: #0F172A;     /* texto sobre superfícies claras (badges) */

    /* ---- Semânticas ---- */
    --ky-success: #22C55E;
    --ky-error: #F87171;
    --ky-warning: #FBBF24;
    --ky-info: #599BFF;

    /* ---- Tipografia ---- */
    --ky-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ky-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --ky-fs-caption: 0.8125rem;     /* 13px */
    --ky-fs-body: 1rem;             /* 16px */
    --ky-fs-lead: 1.125rem;         /* 18px */
    --ky-fs-h3: 1.375rem;           /* 22px */
    --ky-fs-h2: 1.875rem;           /* 30px */
    --ky-fs-h1: 2.5rem;             /* 40px */
    --ky-fs-display: 3.5rem;        /* 56px */
    --ky-lh-tight: 1.15;
    --ky-lh-base: 1.65;
    --ky-fw-regular: 400;
    --ky-fw-medium: 500;
    --ky-fw-semibold: 600;
    --ky-fw-bold: 700;
    --ky-fw-extrabold: 800;

    /* ---- Espaçamento (escala 4/8px) ---- */
    --ky-space-1: 0.25rem;  /* 4 */
    --ky-space-2: 0.5rem;   /* 8 */
    --ky-space-3: 0.75rem;  /* 12 */
    --ky-space-4: 1rem;     /* 16 */
    --ky-space-5: 1.5rem;   /* 24 */
    --ky-space-6: 2rem;     /* 32 */
    --ky-space-8: 3rem;     /* 48 */
    --ky-space-10: 4rem;    /* 64 */
    --ky-space-12: 6rem;    /* 96 */

    /* ---- Raio (modern, mais arredondado) ---- */
    --ky-radius-sm: 10px;
    --ky-radius-md: 14px;
    --ky-radius-lg: 20px;
    --ky-radius-xl: 28px;
    --ky-radius-pill: 999px;

    /* ---- Elevação: sombras profundas + glow ---- */
    --ky-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ky-shadow-md: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
    --ky-shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
    --ky-glow-primary: 0 12px 34px -10px rgba(51, 119, 255, 0.55);
    --ky-glow-primary-strong: 0 16px 44px -8px rgba(51, 119, 255, 0.7);

    /* ---- Gradientes ---- */
    --ky-grad-brand: linear-gradient(135deg, var(--ky-primary-500), var(--ky-secondary));
    --ky-grad-text: linear-gradient(90deg, var(--ky-primary-400), var(--ky-accent-400));
    --ky-grad-cta: linear-gradient(135deg, #3377FF 0%, #6D4BF6 100%);

    /* ---- Motion ---- */
    --ky-motion-fast: 150ms;
    --ky-motion-base: 220ms;
    --ky-motion-slow: 320ms;
    --ky-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Layout ---- */
    --ky-header-h: 68px;
}

/* ========================= Base ========================= */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: var(--ky-font-sans);
    font-size: var(--ky-fs-body);
    line-height: var(--ky-lh-base);
    color: var(--ky-text);
    background: var(--ky-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambiente dark global: gradiente profundo + orbs difusos atrás de tudo.
   Fixo e atrás de todo o conteúdo (sem markup extra; toda página herda). */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60rem 60rem at 85% -10%, rgba(51, 119, 255, 0.16), transparent 60%),
        radial-gradient(48rem 48rem at -10% 20%, rgba(139, 92, 246, 0.14), transparent 60%),
        radial-gradient(40rem 40rem at 50% 110%, rgba(34, 197, 94, 0.08), transparent 60%),
        var(--ky-bg);
}

h1, h2, h3, h4 {
    line-height: var(--ky-lh-tight);
    color: var(--ky-text);
    margin-top: 0;
    letter-spacing: -0.02em;
}

a {
    color: var(--ky-primary-300);
    text-decoration: none;
    transition: color var(--ky-motion-fast) var(--ky-ease);
}
a:hover { color: var(--ky-primary-400); text-decoration: underline; }

p { margin-top: 0; }

strong { color: var(--ky-text); }

::selection { background: rgba(51, 119, 255, 0.32); color: #fff; }

/* Helper: keyword com gradiente de texto (hero/section). */
.ky-text-grad {
    background: var(--ky-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ========================= Acessibilidade ========================= */
:focus-visible {
    outline: 3px solid var(--ky-primary-400);
    outline-offset: 2px;
    border-radius: var(--ky-radius-sm);
}

.skip-link {
    position: absolute;
    left: var(--ky-space-2);
    top: -64px;
    z-index: 1100;
    padding: var(--ky-space-2) var(--ky-space-4);
    background: var(--ky-text);
    color: var(--ky-text-inverse);
    border-radius: var(--ky-radius-sm);
    font-weight: var(--ky-fw-semibold);
    transition: top var(--ky-motion-fast) var(--ky-ease);
}
.skip-link:focus { top: var(--ky-space-2); color: var(--ky-text-inverse); text-decoration: none; }

#main-content:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ========================= Animações de entrada ========================= */
@keyframes kyFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kyFadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.ky-anim-in { animation: kyFadeIn 0.7s var(--ky-ease) both; }
.ky-anim-up { animation: kyFadeInUp 0.7s var(--ky-ease) both; }
.ky-anim-delay-1 { animation-delay: 120ms; }
.ky-anim-delay-2 { animation-delay: 240ms; }
.ky-anim-delay-3 { animation-delay: 360ms; }

/* ========================= Botões ========================= */
.ky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ky-space-2);
    padding: var(--ky-space-3) var(--ky-space-5);
    border-radius: var(--ky-radius-pill);
    font-weight: var(--ky-fw-semibold);
    font-size: var(--ky-fs-body);
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--ky-motion-fast) var(--ky-ease),
                color var(--ky-motion-fast) var(--ky-ease),
                box-shadow var(--ky-motion-base) var(--ky-ease),
                border-color var(--ky-motion-fast) var(--ky-ease),
                transform var(--ky-motion-fast) var(--ky-ease);
}
.ky-btn:hover { text-decoration: none; }
.ky-btn:active { transform: translateY(1px); }

.ky-btn--primary {
    background: var(--ky-grad-cta);
    background-size: 140% 140%;
    color: var(--ky-primary-contrast);
    box-shadow: var(--ky-glow-primary);
}
.ky-btn--primary:hover { color: var(--ky-primary-contrast); box-shadow: var(--ky-glow-primary-strong); transform: translateY(-1px); }
.ky-btn--primary:active { transform: translateY(0); }

.ky-btn--ghost {
    background: var(--ky-glass);
    color: var(--ky-text);
    border-color: var(--ky-border-strong);
    backdrop-filter: blur(8px);
}
.ky-btn--ghost:hover { background: var(--ky-glass-strong); color: #fff; border-color: var(--ky-primary-400); }

.ky-btn--lg { padding: var(--ky-space-4) var(--ky-space-8); font-size: var(--ky-fs-lead); }

/* ========================= Header / Navbar (glass) ========================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(11, 11, 20, 0.72);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--ky-border);
}

.ky-navbar { min-height: var(--ky-header-h); padding-top: var(--ky-space-2); padding-bottom: var(--ky-space-2); }

.ky-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ky-space-2);
    font-weight: var(--ky-fw-bold);
    color: var(--ky-text);
    white-space: nowrap;
}
.ky-brand:hover { color: var(--ky-text); text-decoration: none; }
/* Logo real (lockup ícone + wordmark, branco) */
.ky-brand__logo {
    display: block;
    height: 34px;
    width: auto;
    object-fit: contain;
}
.ky-brand--footer .ky-brand__logo { height: 40px; }

/* Marca sintética legada (mantida por compatibilidade caso reutilizada) */
.ky-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ky-radius-sm);
    background: var(--ky-grad-brand);
    color: #fff;
    font-weight: var(--ky-fw-extrabold);
    font-size: 1.15rem;
    box-shadow: var(--ky-glow-primary);
}
.ky-brand__name { font-size: 1.3rem; letter-spacing: -0.02em; }

.ky-nav { gap: var(--ky-space-2); }
.ky-nav .nav-link {
    color: var(--ky-text-muted);
    font-weight: var(--ky-fw-medium);
    padding: var(--ky-space-2) var(--ky-space-3);
    border-radius: var(--ky-radius-pill);
    transition: color var(--ky-motion-fast) var(--ky-ease), background-color var(--ky-motion-fast) var(--ky-ease);
}
.ky-nav .nav-link:hover { color: #fff; background: var(--ky-glass-strong); text-decoration: none; }
.ky-nav .nav-link.active { color: var(--ky-primary-300); font-weight: var(--ky-fw-semibold); }
.ky-nav__user { color: var(--ky-text-muted); }
.ky-nav__cta { margin-left: var(--ky-space-2); }

/* Toggler (mobile) — visível no tema dark */
.navbar-toggler { border-color: var(--ky-border-strong); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(89, 155, 255, 0.4); }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(248,250,252,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ========================= Main ========================= */
.site-main { flex: 1 0 auto; width: 100%; }

/* ========================= Hero (helper reaproveitável) ========================= */
.ky-hero {
    position: relative;
    padding: var(--ky-space-12) 0 var(--ky-space-10);
    text-align: center;
    overflow: hidden;
}
/* Orbs decorativos do hero (sem markup extra) */
.ky-hero::before,
.ky-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.ky-hero::before {
    top: -20%; right: -8%;
    width: 32rem; height: 32rem;
    background: radial-gradient(circle, rgba(51, 119, 255, 0.30), transparent 70%);
}
.ky-hero::after {
    bottom: -30%; left: -10%;
    width: 28rem; height: 28rem;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 70%);
}
.ky-hero > .container { position: relative; z-index: 1; }

.ky-hero__title {
    font-size: clamp(var(--ky-fs-h1), 6vw, var(--ky-fs-display));
    font-weight: var(--ky-fw-extrabold);
    letter-spacing: -0.03em;
    margin-bottom: var(--ky-space-5);
}
.ky-hero__subtitle {
    font-size: var(--ky-fs-lead);
    color: var(--ky-text-muted);
    max-width: 44rem;
    margin: 0 auto var(--ky-space-6);
}
.ky-hero__actions { display: flex; gap: var(--ky-space-3); justify-content: center; flex-wrap: wrap; }

/* Eyebrow / pill (badge sobre o hero) */
.ky-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ky-space-2);
    padding: var(--ky-space-1) var(--ky-space-4);
    margin-bottom: var(--ky-space-5);
    border-radius: var(--ky-radius-pill);
    background: rgba(51, 119, 255, 0.10);
    border: 1px solid rgba(89, 155, 255, 0.28);
    color: var(--ky-primary-300);
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-semibold);
}
.ky-eyebrow-pill__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ky-accent-400);
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}

/* ========================= Grid de módulos (helper reaproveitável) ========================= */
.ky-module-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ky-space-5);
}
@media (min-width: 576px) { .ky-module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ky-module-grid { grid-template-columns: repeat(3, 1fr); } }

.ky-card {
    position: relative;
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-6);
    box-shadow: var(--ky-shadow-sm);
    backdrop-filter: blur(10px);
    transition: box-shadow var(--ky-motion-base) var(--ky-ease), transform var(--ky-motion-base) var(--ky-ease), border-color var(--ky-motion-base) var(--ky-ease);
    overflow: hidden;
}
/* Barra de acento revelada no hover (topo do card) */
.ky-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--ky-grad-text);
    opacity: 0;
    transition: opacity var(--ky-motion-base) var(--ky-ease);
}
.ky-card:hover { box-shadow: var(--ky-shadow-md); transform: translateY(-4px); border-color: var(--ky-border-strong); }
.ky-card:hover::before { opacity: 1; }
.ky-card__title { font-size: var(--ky-fs-h3); margin-bottom: var(--ky-space-2); }
.ky-card__text { color: var(--ky-text-muted); margin: 0; }

/* Seção genérica */
.ky-section { position: relative; padding: var(--ky-space-10) 0; }
.ky-section--alt { background: var(--ky-surface); border-top: 1px solid var(--ky-border); border-bottom: 1px solid var(--ky-border); }
.ky-section__title { font-size: var(--ky-fs-h2); font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-8); text-align: center; }

/* ========================= Footer ========================= */
.site-footer {
    flex-shrink: 0;
    background: var(--ky-bg-2);
    border-top: 1px solid var(--ky-border);
    padding: var(--ky-space-8) 0 var(--ky-space-5);
    color: var(--ky-text-muted);
    margin-top: var(--ky-space-10);
}
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--ky-space-6); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer__tagline { margin-top: var(--ky-space-3); max-width: 28rem; color: var(--ky-text-muted); }
.ky-brand--footer { margin-bottom: var(--ky-space-2); }
.site-footer__title {
    font-size: var(--ky-fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ky-text);
    margin-bottom: var(--ky-space-3);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: var(--ky-space-2); }
.site-footer__col a { color: var(--ky-text-muted); }
.site-footer__col a:hover { color: var(--ky-primary-300); }
.site-footer__bottom {
    margin-top: var(--ky-space-6);
    padding-top: var(--ky-space-4);
    border-top: 1px solid var(--ky-border);
    text-align: center;
    color: var(--ky-text-faint);
}

/* =========================================================================
   Landing Page — Vantagens, Prova social e Faixa de planos
   ========================================================================= */
.ky-feature-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--ky-space-5);
}
@media (min-width: 768px) { .ky-feature-grid { grid-template-columns: repeat(2, 1fr); } }
.ky-feature {
    display: flex; gap: var(--ky-space-4); align-items: flex-start;
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-5);
    transition: border-color var(--ky-motion-base) var(--ky-ease), transform var(--ky-motion-base) var(--ky-ease);
}
.ky-feature:hover { border-color: var(--ky-border-strong); transform: translateY(-2px); }
.ky-feature__mark {
    flex: 0 0 auto;
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--ky-radius-md);
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: var(--ky-accent-400);
    font-weight: var(--ky-fw-bold);
    font-size: 1.05rem;
    line-height: 1;
}
.ky-feature__title { font-size: var(--ky-fs-h3); margin-bottom: var(--ky-space-1); }
.ky-feature__text { color: var(--ky-text-muted); margin: 0; }

/* ----- Prova social ----- */
.ky-proof-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--ky-space-5);
}
@media (min-width: 768px) { .ky-proof-grid { grid-template-columns: repeat(3, 1fr); } }
.ky-proof {
    position: relative;
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-6);
    box-shadow: var(--ky-shadow-sm);
    backdrop-filter: blur(10px);
}
.ky-proof__quote { font-size: var(--ky-fs-lead); color: var(--ky-text); margin-bottom: var(--ky-space-3); }
.ky-proof__author { font-size: var(--ky-fs-caption); color: var(--ky-text-muted); margin: 0; font-weight: var(--ky-fw-medium); }

/* ----- Faixa de planos resumida ----- */
.ky-plans__lead {
    text-align: center; color: var(--ky-text-muted);
    font-size: var(--ky-fs-lead); max-width: 42rem;
    margin: calc(-1 * var(--ky-space-4)) auto var(--ky-space-8);
}
.ky-plans-grid {
    display: grid; grid-template-columns: 1fr; gap: var(--ky-space-5);
    max-width: 48rem; margin: 0 auto;
}
@media (min-width: 576px) { .ky-plans-grid { grid-template-columns: repeat(2, 1fr); } }
.ky-plan {
    position: relative;
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-6) var(--ky-space-5);
    box-shadow: var(--ky-shadow-sm);
    backdrop-filter: blur(10px);
    text-align: center;
    transition: transform var(--ky-motion-base) var(--ky-ease), box-shadow var(--ky-motion-base) var(--ky-ease);
}
.ky-plan:hover { transform: translateY(-3px); }
.ky-plan--featured {
    border-color: rgba(89, 155, 255, 0.5);
    box-shadow: var(--ky-glow-primary);
    background: linear-gradient(180deg, rgba(51, 119, 255, 0.10), var(--ky-glass));
}
.ky-plan__badge {
    position: absolute;
    top: calc(-1 * var(--ky-space-3));
    left: 50%;
    transform: translateX(-50%);
    background: var(--ky-grad-cta);
    color: var(--ky-primary-contrast);
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-semibold);
    padding: var(--ky-space-1) var(--ky-space-4);
    border-radius: var(--ky-radius-pill);
    white-space: nowrap;
    box-shadow: var(--ky-glow-primary);
}
.ky-plan__name { font-size: var(--ky-fs-h3); margin-bottom: var(--ky-space-3); }
.ky-plan__price { margin: 0 0 var(--ky-space-3); }
.ky-plan__amount { font-size: var(--ky-fs-h1); font-weight: var(--ky-fw-extrabold); color: var(--ky-text); }
.ky-plan__period { color: var(--ky-text-muted); font-size: var(--ky-fs-body); }
.ky-plan__benefit { color: var(--ky-text-muted); margin: 0; }
.ky-plans__cta { display: flex; justify-content: center; margin-top: var(--ky-space-8); }

/* =========================================================================
   Documentação — sidebar de seções + conteúdo com âncoras
   ========================================================================= */
/* Layout full-screen: sidebar fixa à esquerda + conteúdo rolável (página). */
.ky-docs {
    --ky-docs-sidebar-w: 304px;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    align-items: start;
}
@media (min-width: 992px) {
    .ky-docs { grid-template-columns: var(--ky-docs-sidebar-w) minmax(0, 1fr); }
}

/* ---- Sidebar ---- */
.ky-docs__sidebar {
    min-width: 0;
    border-bottom: 1px solid var(--ky-border);
    background: rgba(255, 255, 255, 0.015);
    padding: var(--ky-space-4) var(--ky-space-4) var(--ky-space-5);
}
@media (min-width: 992px) {
    .ky-docs__sidebar {
        position: sticky;
        top: var(--ky-header-h);
        height: calc(100vh - var(--ky-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-bottom: none;
        border-right: 1px solid var(--ky-border);
        padding: var(--ky-space-6) var(--ky-space-5);
        scrollbar-width: thin;
    }
}
.ky-docs__sidebar-title {
    font-size: var(--ky-fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ky-text-faint);
    font-weight: var(--ky-fw-semibold);
    margin: 0 0 var(--ky-space-3);
}

/* ---- Busca ---- */
.ky-docs__search { position: relative; margin-bottom: var(--ky-space-4); }
.ky-docs__search-icon {
    position: absolute;
    left: var(--ky-space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ky-text-faint);
    pointer-events: none;
    line-height: 0;
}
.ky-docs__search-input {
    width: 100%;
    padding: var(--ky-space-2) var(--ky-space-3) var(--ky-space-2) var(--ky-space-8);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-pill);
    color: var(--ky-text);
    font-size: 0.95rem;
}
.ky-docs__search-input::placeholder { color: var(--ky-text-faint); }
.ky-docs__search-input:focus {
    outline: none;
    border-color: var(--ky-primary-400);
    box-shadow: 0 0 0 3px rgba(89, 155, 255, 0.22);
}

/* Botão de conteúdo (mobile) */
.ky-docs__mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ky-space-2);
    width: 100%;
    padding: var(--ky-space-2) var(--ky-space-4);
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-md);
    color: var(--ky-text);
    font: inherit;
    font-weight: var(--ky-fw-semibold);
    cursor: pointer;
}
.ky-docs__mobile-toggle[aria-expanded="true"] .ky-docs__mobile-toggle-chevron { transform: rotate(180deg); }
.ky-docs__mobile-toggle-chevron { transition: transform var(--ky-motion-fast) var(--ky-ease); line-height: 0; }

/* ---- Nav ---- */
.ky-docs__nav { margin-top: var(--ky-space-3); }
@media (max-width: 991.98px) {
    .ky-docs__nav { display: none; margin-top: var(--ky-space-3); }
    .ky-docs__nav.is-open { display: block; }
}
@media (min-width: 992px) {
    .ky-docs__mobile-toggle { display: none; }
    .ky-docs__nav { display: block; }
}
.ky-docs__nav ul { list-style: none; margin: 0; padding: 0; }
.ky-docs__nav-group { margin-bottom: var(--ky-space-4); }
.ky-docs__nav-group:last-child { margin-bottom: 0; }
.ky-docs__nav-sub { margin: var(--ky-space-1) 0 0 !important; padding-left: var(--ky-space-3) !important; border-left: 1px solid var(--ky-border); }
.ky-docs__nav li { margin: 2px 0; }
.ky-docs__nav-link {
    display: block;
    padding: var(--ky-space-2) var(--ky-space-3);
    border-radius: var(--ky-radius-sm);
    color: var(--ky-text-muted);
    font-weight: var(--ky-fw-medium);
    border-left: 2px solid transparent;
    transition: color var(--ky-motion-fast) var(--ky-ease), background-color var(--ky-motion-fast) var(--ky-ease);
}
.ky-docs__nav-link--top { font-weight: var(--ky-fw-semibold); color: var(--ky-text); }
.ky-docs__nav-link--sub { font-size: 0.9rem; }
.ky-docs__nav-link:hover { background: var(--ky-glass-strong); color: var(--ky-text); text-decoration: none; }
.ky-docs__nav-link.is-active {
    color: var(--ky-primary-300);
    border-left-color: var(--ky-primary-400);
    font-weight: var(--ky-fw-semibold);
    background: rgba(51, 119, 255, 0.08);
}
.ky-docs__nav-link.is-hidden, .ky-docs__nav-group.is-hidden { display: none; }
.ky-docs__noresults { color: var(--ky-text-faint); font-size: 0.9rem; padding: var(--ky-space-2) var(--ky-space-3); margin: 0; }

/* Rodapé da sidebar */
.ky-docs__sidebar-help {
    margin-top: var(--ky-space-6);
    padding-top: var(--ky-space-4);
    border-top: 1px solid var(--ky-border);
    font-size: var(--ky-fs-caption);
    color: var(--ky-text-faint);
}
.ky-docs__sidebar-help a { font-weight: var(--ky-fw-semibold); }

/* ---- Conteúdo (rola com a página; medida de leitura confortável) ---- */
.ky-docs__content {
    min-width: 0;
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--ky-space-8) var(--ky-space-5) var(--ky-space-10);
}
@media (min-width: 992px) { .ky-docs__content { padding: var(--ky-space-10) var(--ky-space-8) var(--ky-space-12); } }
/* Âncoras de subseção (h3 com id) compensam o header sticky */
.ky-docs__content h3[id] { scroll-margin-top: calc(var(--ky-header-h) + var(--ky-space-5)); }
.ky-docs__header { margin-bottom: var(--ky-space-8); }
.ky-docs__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-semibold);
    color: var(--ky-primary-300);
    margin-bottom: var(--ky-space-2);
}
.ky-docs__title { font-size: var(--ky-fs-h1); font-weight: var(--ky-fw-extrabold); margin-bottom: var(--ky-space-3); }
.ky-docs__lead { font-size: var(--ky-fs-lead); color: var(--ky-text-muted); max-width: 46rem; }

.ky-docs__section {
    padding-top: var(--ky-space-6);
    margin-top: var(--ky-space-6);
    border-top: 1px solid var(--ky-border);
    scroll-margin-top: calc(var(--ky-header-h) + var(--ky-space-5));
}
.ky-docs__section:first-of-type { border-top: none; margin-top: 0; }
.ky-docs__section-title { font-size: var(--ky-fs-h2); font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-4); position: relative; }
.ky-docs__section h3 { font-size: var(--ky-fs-h3); margin: var(--ky-space-6) 0 var(--ky-space-3); }
.ky-docs__section p { margin-bottom: var(--ky-space-4); color: var(--ky-text-muted); }
.ky-docs__section li { color: var(--ky-text-muted); }

.ky-docs__anchor {
    color: var(--ky-primary-400);
    margin-right: var(--ky-space-2);
    font-weight: var(--ky-fw-regular);
    opacity: 0;
    transition: opacity var(--ky-motion-fast) var(--ky-ease);
}
.ky-docs__section-title:hover .ky-docs__anchor,
.ky-docs__anchor:focus-visible { opacity: 1; }

.ky-docs__checklist { padding-left: var(--ky-space-5); margin-bottom: var(--ky-space-4); }
.ky-docs__checklist li { margin-bottom: var(--ky-space-2); }
.ky-docs__hint { font-size: var(--ky-fs-caption); color: var(--ky-text-faint); }

/* ---- Blocos de código copiáveis ---- */
.ky-code {
    margin: 0 0 var(--ky-space-5);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-md);
    background: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    box-shadow: var(--ky-shadow-sm);
}
.ky-code__caption {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ky-space-3);
    padding: var(--ky-space-2) var(--ky-space-3);
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--ky-border);
}
.ky-code__lang {
    font-family: var(--ky-font-mono);
    font-size: var(--ky-fs-caption);
    color: var(--ky-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ky-code__copy {
    border: 1px solid var(--ky-border-strong);
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-semibold);
    padding: var(--ky-space-1) var(--ky-space-3);
    border-radius: var(--ky-radius-sm);
    cursor: pointer;
    transition: background-color var(--ky-motion-fast) var(--ky-ease);
}
.ky-code__copy:hover { background: rgba(255, 255, 255, 0.14); }
.ky-code__copy.is-copied { background: var(--ky-success); border-color: var(--ky-success); color: #04240f; }
.ky-code__pre {
    margin: 0;
    padding: var(--ky-space-4);
    overflow-x: auto;
    color: #E2E8F0;
    font-family: var(--ky-font-mono);
    font-size: 0.9rem;
    line-height: 1.7;
}
.ky-code__pre code { font-family: inherit; white-space: pre; }

/* código inline */
.ky-docs__content code {
    font-family: var(--ky-font-mono);
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.12em 0.4em;
    border-radius: 6px;
    color: var(--ky-primary-300);
}
.ky-code__pre code, .ky-callout code { background: transparent; padding: 0; color: inherit; }

/* ---- Callouts ---- */
.ky-callout {
    display: flex;
    gap: var(--ky-space-3);
    padding: var(--ky-space-4);
    border-radius: var(--ky-radius-md);
    border: 1px solid var(--ky-border);
    background: var(--ky-glass);
    margin: var(--ky-space-5) 0;
}
.ky-callout__icon { flex: 0 0 auto; font-size: 1.25rem; line-height: 1.4; }
.ky-callout__body { min-width: 0; color: var(--ky-text-muted); }
.ky-callout__body p { color: var(--ky-text-muted); }
.ky-callout__body p:last-child { margin-bottom: 0; }
.ky-callout__title { font-weight: var(--ky-fw-semibold); margin-bottom: var(--ky-space-1); color: var(--ky-text); }
.ky-callout--warning { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.32); }
.ky-callout--warning .ky-callout__title { color: var(--ky-warning); }
.ky-callout--info { background: rgba(89, 155, 255, 0.10); border-color: rgba(89, 155, 255, 0.32); }
.ky-callout--info .ky-callout__title { color: var(--ky-info); }

/* ---- Tabelas ---- */
.ky-table-wrap { overflow-x: auto; margin: 0 0 var(--ky-space-5); }
.ky-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-md);
    overflow: hidden;
}
.ky-table th, .ky-table td {
    text-align: left;
    padding: var(--ky-space-3);
    border-bottom: 1px solid var(--ky-border);
    vertical-align: top;
    color: var(--ky-text-muted);
}
.ky-table thead th { background: rgba(255, 255, 255, 0.05); color: var(--ky-text); font-weight: var(--ky-fw-semibold); }
.ky-table tbody tr:last-child td { border-bottom: none; }
.ky-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* ---- FAQ accordion ---- */
.ky-faq__item {
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-md);
    margin-bottom: var(--ky-space-3);
    background: var(--ky-glass);
    overflow: hidden;
}
.ky-faq__q {
    cursor: pointer;
    padding: var(--ky-space-4);
    font-weight: var(--ky-fw-semibold);
    color: var(--ky-text);
    list-style: revert;
}
.ky-faq__q:hover { background: var(--ky-glass-strong); }
.ky-faq__a { padding: 0 var(--ky-space-4) var(--ky-space-4); color: var(--ky-text-muted); }
.ky-faq__a p:last-child { margin-bottom: 0; }

/* =========================================================================
   Compras / Planos — toggle ciclo, cards de plano, resumo
   ========================================================================= */
.ky-pricing__hero { padding-bottom: var(--ky-space-6); }
.ky-pricing { padding-top: var(--ky-space-4); }
.ky-pricing__notice { max-width: 56rem; margin: 0 auto var(--ky-space-6); }

.ky-pricing__errors { max-width: 56rem; margin: 0 auto var(--ky-space-5); }
.ky-pricing__errors.validation-summary-valid { display: none; }
.ky-pricing__errors.validation-summary-errors {
    border: 1px solid rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.1);
    border-radius: var(--ky-radius-md);
    padding: var(--ky-space-4) var(--ky-space-5);
    color: var(--ky-error);
}
.ky-pricing__errors ul { margin: 0; padding-left: var(--ky-space-5); }
.ky-pricing__errors li { font-weight: var(--ky-fw-medium); }

.ky-pricing__layout {
    display: grid; grid-template-columns: 1fr; gap: var(--ky-space-8);
    align-items: start;
}
@media (min-width: 992px) { .ky-pricing__layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--ky-space-10); } }
.ky-pricing__main { min-width: 0; }

.ky-pricing__layout[data-cycle="monthly"] [data-cycle-only="yearly"] { display: none; }
.ky-pricing__layout[data-cycle="yearly"] [data-cycle-only="monthly"] { display: none; }

/* ---- Toggle de ciclo ---- */
.ky-toggle { border: none; margin: 0 0 var(--ky-space-6); padding: 0; }
.ky-toggle__legend { font-size: var(--ky-fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ky-text-muted); margin-bottom: var(--ky-space-2); padding: 0; }
.ky-toggle__track {
    display: inline-flex;
    align-items: center;
    gap: var(--ky-space-1);
    padding: var(--ky-space-1);
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-pill);
}
.ky-toggle__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ky-toggle__option {
    display: inline-flex; align-items: center; gap: var(--ky-space-2);
    padding: var(--ky-space-2) var(--ky-space-5);
    border-radius: var(--ky-radius-pill);
    font-weight: var(--ky-fw-semibold);
    color: var(--ky-text-muted);
    cursor: pointer;
    transition: background-color var(--ky-motion-fast) var(--ky-ease), color var(--ky-motion-fast) var(--ky-ease);
}
.ky-toggle__input:checked + .ky-toggle__option { background: var(--ky-grad-cta); color: var(--ky-primary-contrast); box-shadow: var(--ky-glow-primary); }
.ky-toggle__input:focus-visible + .ky-toggle__option { outline: 3px solid var(--ky-primary-400); outline-offset: 2px; }
.ky-toggle__badge {
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-bold);
    background: var(--ky-accent);
    color: #04240f;
    padding: 0 var(--ky-space-2);
    border-radius: var(--ky-radius-pill);
    line-height: 1.5;
}
.ky-toggle__input:checked + .ky-toggle__option .ky-toggle__badge { background: #fff; color: var(--ky-success); }
.ky-toggle__hint { font-size: var(--ky-fs-caption); color: var(--ky-text-faint); margin: var(--ky-space-2) 0 0; }

/* ---- Cards de plano ---- */
.ky-plancards { border: none; margin: 0; padding: 0; }
.ky-plancards__legend { font-size: var(--ky-fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ky-text-muted); margin-bottom: var(--ky-space-3); padding: 0; }
.ky-plancards__grid { display: grid; grid-template-columns: 1fr; gap: var(--ky-space-4); }
@media (min-width: 576px) { .ky-plancards__grid { grid-template-columns: repeat(2, 1fr); } }
.ky-plancard { position: relative; }
.ky-plancard__radio { position: absolute; top: var(--ky-space-4); left: var(--ky-space-4); width: 1px; height: 1px; opacity: 0; }
.ky-plancard__body {
    display: flex; flex-direction: column; gap: var(--ky-space-2); height: 100%;
    background: var(--ky-glass);
    border: 1.5px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-5);
    padding-left: calc(var(--ky-space-5) + var(--ky-space-5));
    box-shadow: var(--ky-shadow-sm);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: border-color var(--ky-motion-base) var(--ky-ease), box-shadow var(--ky-motion-base) var(--ky-ease), transform var(--ky-motion-base) var(--ky-ease);
}
.ky-plancard__body:hover { box-shadow: var(--ky-shadow-md); transform: translateY(-3px); border-color: var(--ky-border-strong); }
.ky-plancard__check {
    position: absolute;
    top: var(--ky-space-5);
    left: var(--ky-space-5);
    width: 20px; height: 20px;
    border: 2px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-pill);
    background: transparent;
    transition: border-color var(--ky-motion-fast) var(--ky-ease), background-color var(--ky-motion-fast) var(--ky-ease);
}
.ky-plancard__radio:checked + .ky-plancard__body { border-color: var(--ky-primary-400); box-shadow: var(--ky-glow-primary); }
.ky-plancard__radio:checked + .ky-plancard__body .ky-plancard__check {
    border-color: var(--ky-primary-400);
    background: var(--ky-primary) radial-gradient(circle, #fff 32%, transparent 36%);
}
.ky-plancard__radio:focus-visible + .ky-plancard__body { outline: 3px solid var(--ky-primary-400); outline-offset: 2px; }
.ky-plancard.is-disabled .ky-plancard__body { opacity: 0.55; cursor: not-allowed; }
.ky-plancard.is-disabled .ky-plancard__body:hover { transform: none; box-shadow: var(--ky-shadow-sm); border-color: var(--ky-border); }
.ky-plancard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ky-space-2); flex-wrap: wrap; }
.ky-plancard__name { font-size: var(--ky-fs-h3); font-weight: var(--ky-fw-semibold); color: var(--ky-text); }
.ky-plancard__save { font-size: var(--ky-fs-caption); font-weight: var(--ky-fw-semibold); color: var(--ky-accent-400); }
.ky-plancard__price { margin-top: var(--ky-space-1); }
.ky-plancard__amount { font-size: var(--ky-fs-h2); font-weight: var(--ky-fw-extrabold); color: var(--ky-text); }
.ky-plancard__per { font-size: var(--ky-fs-body); font-weight: var(--ky-fw-regular); color: var(--ky-text-muted); }
.ky-plancard__desc { color: var(--ky-text-muted); font-size: 0.95rem; }
.ky-plancard__unavailable { font-size: var(--ky-fs-caption); font-weight: var(--ky-fw-semibold); color: var(--ky-warning); }

/* ---- Resumo do pedido ---- */
.ky-summary { min-width: 0; }
@media (min-width: 992px) { .ky-summary { position: sticky; top: calc(var(--ky-header-h) + var(--ky-space-4)); } }
.ky-summary__card {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-6);
    box-shadow: var(--ky-shadow-md);
    backdrop-filter: blur(12px);
}
.ky-summary__title { font-size: var(--ky-fs-h3); margin-bottom: var(--ky-space-4); }
.ky-summary__list { margin: 0 0 var(--ky-space-4); }
.ky-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ky-space-3); padding: var(--ky-space-2) 0; }
.ky-summary__row dt { color: var(--ky-text-muted); margin: 0; }
.ky-summary__row dd { margin: 0; font-weight: var(--ky-fw-semibold); color: var(--ky-text); text-align: right; }
.ky-summary__row--total {
    border-top: 1px solid var(--ky-border);
    margin-top: var(--ky-space-2);
    padding-top: var(--ky-space-3);
}
.ky-summary__row--total dt { color: var(--ky-text); font-weight: var(--ky-fw-semibold); }
.ky-summary__row--total dd { font-size: var(--ky-fs-h3); }
.ky-summary__per { font-size: var(--ky-fs-body); font-weight: var(--ky-fw-regular); color: var(--ky-text-muted); }
.ky-summary__empty { color: var(--ky-text-muted); font-size: 0.95rem; margin: 0 0 var(--ky-space-4); }
.ky-summary__cta { width: 100%; }
.ky-summary__note { font-size: var(--ky-fs-caption); color: var(--ky-text-faint); margin: var(--ky-space-3) 0 0; text-align: center; }

/* ============================================================
   Gate de autenticação/cadastro
   ============================================================ */
.ky-auth__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--ky-space-6);
    align-items: start;
}
.ky-auth__panel {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-6);
    box-shadow: var(--ky-shadow-md);
    backdrop-filter: blur(12px);
}
.ky-auth__tabs {
    display: flex;
    gap: var(--ky-space-2);
    border-bottom: 1px solid var(--ky-border);
    margin-bottom: var(--ky-space-5);
}
.ky-auth__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--ky-space-3) var(--ky-space-4);
    font: inherit;
    font-weight: 600;
    color: var(--ky-text-muted);
    cursor: pointer;
}
.ky-auth__tab.is-active { color: var(--ky-primary-300); border-bottom-color: var(--ky-primary-400); }
.ky-auth__tab:focus-visible { outline: 2px solid var(--ky-primary-400); outline-offset: 2px; }

.ky-auth__pane { display: block; margin-bottom: var(--ky-space-6); }
.js-tabs .ky-auth__pane { display: none; margin-bottom: 0; }
.js-tabs .ky-auth__pane.is-active { display: block; }

.ky-auth__form { display: flex; flex-direction: column; gap: var(--ky-space-4); }

.ky-field { display: flex; flex-direction: column; gap: var(--ky-space-2); }
.ky-field__label { font-weight: 600; color: var(--ky-text); }
.ky-field__optional { font-weight: 400; color: var(--ky-text-muted); }
.ky-field__error { color: var(--ky-error); font-size: 0.875rem; }

.ky-field--check { gap: var(--ky-space-1); }
.ky-check {
    display: flex; align-items: flex-start; gap: var(--ky-space-3);
    color: var(--ky-text-muted); font-size: 0.9375rem; line-height: 1.45; cursor: pointer;
}
.ky-check input[type="checkbox"] { margin-top: 0.2rem; flex: 0 0 auto; }

.ky-auth__submit { align-self: flex-start; margin-top: var(--ky-space-2); }
.ky-auth__aside { position: sticky; top: var(--ky-space-6); }

@media (max-width: 860px) {
    .ky-auth__layout { grid-template-columns: 1fr; }
    .ky-auth__aside { position: static; }
}

/* ---- Inputs (Bootstrap .form-control) no tema dark ---- */
.form-control {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-md);
    color: var(--ky-text);
    padding: var(--ky-space-3) var(--ky-space-4);
    font-size: var(--ky-fs-body);
    transition: border-color var(--ky-motion-fast) var(--ky-ease), box-shadow var(--ky-motion-fast) var(--ky-ease), background-color var(--ky-motion-fast) var(--ky-ease);
}
.form-control::placeholder { color: var(--ky-text-faint); }
.form-control:hover { border-color: rgba(255, 255, 255, 0.32); }
.form-control:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ky-primary-400);
    box-shadow: 0 0 0 3px rgba(89, 155, 255, 0.25);
    outline: none;
    color: var(--ky-text);
}
.form-control.input-validation-error { border-color: var(--ky-error); }
/* Autofill: mantém texto legível no tema dark */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ky-text);
    -webkit-box-shadow: 0 0 0 1000px rgba(26, 26, 46, 0.9) inset;
    caret-color: var(--ky-text);
    transition: background-color 9999s ease-out 0s;
}
.field-validation-error { color: var(--ky-error); font-size: 0.875rem; }

/* ---- Páginas de retorno do checkout (Sucesso / Cancelado) ---- */
.ky-callout--success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.32); }
.ky-callout--success .ky-callout__title { color: var(--ky-success); }

.ky-return__hero { text-align: center; }
.ky-return__badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px;
    margin: 0 auto var(--ky-space-4);
    border-radius: 50%;
    font-size: 1.85rem; line-height: 1;
    border: 1px solid var(--ky-border);
}
.ky-return__badge--ok { background: rgba(34, 197, 94, 0.16); color: var(--ky-accent-400); border-color: rgba(74, 222, 128, 0.4); box-shadow: 0 0 32px -6px rgba(34, 197, 94, 0.5); }
.ky-return__badge--processing { background: rgba(89, 155, 255, 0.16); color: var(--ky-primary-300); border-color: rgba(89, 155, 255, 0.4); }
.ky-return__badge--neutral { background: var(--ky-glass-strong); color: var(--ky-text); }

.ky-return__grid { max-width: 760px; }
.ky-return__main { display: flex; flex-direction: column; gap: var(--ky-space-5); }
.ky-return__summary { margin: 0; }

.ky-return__steps {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-6);
    backdrop-filter: blur(10px);
}
.ky-return__steps-title { font-size: var(--ky-fs-h3); margin-bottom: var(--ky-space-4); }
.ky-return__steplist { margin: 0 0 var(--ky-space-5); padding-left: var(--ky-space-5); color: var(--ky-text-muted); }
.ky-return__steplist li { margin-bottom: var(--ky-space-3); }
.ky-return__steplist li:last-child { margin-bottom: 0; }

.ky-return__actions { display: flex; flex-wrap: wrap; gap: var(--ky-space-3); }
.ky-return__hint { color: var(--ky-text-muted); font-size: 0.95rem; margin: 0; }

/* =========================================================================
   Páginas de prosa (Privacidade) e Erro — padrão branded
   ========================================================================= */
.ky-prose {
    max-width: 52rem;
    margin: 0 auto;
    padding-top: var(--ky-space-8);
    padding-bottom: var(--ky-space-8);
}
.ky-prose h1 { font-size: var(--ky-fs-h1); font-weight: var(--ky-fw-extrabold); margin-bottom: var(--ky-space-3); }
.ky-prose h2 { font-size: var(--ky-fs-h2); margin: var(--ky-space-8) 0 var(--ky-space-3); }
.ky-prose p, .ky-prose li { color: var(--ky-text-muted); }
.ky-prose ul { padding-left: var(--ky-space-5); margin-bottom: var(--ky-space-4); }
.ky-prose li { margin-bottom: var(--ky-space-2); }
.ky-prose__updated { font-size: var(--ky-fs-caption); color: var(--ky-text-faint); margin-bottom: var(--ky-space-6); }

/* ---- Página de erro ---- */
.ky-error__code {
    font-size: clamp(3rem, 12vw, 6rem);
    font-weight: var(--ky-fw-extrabold);
    line-height: 1;
    margin-bottom: var(--ky-space-3);
}
.ky-error__reqid { font-size: var(--ky-fs-caption); color: var(--ky-text-faint); }
.ky-error__reqid code { color: var(--ky-primary-300); }

/* =========================================================================
   Landing Page (Home/Index) — componentes futuristas adicionados ao rebrand.
   Mantém contrato ky-*; reaproveita tokens e animações já definidos.
   ========================================================================= */

/* ---- Cabeçalho de seção com eyebrow ---- */
.ky-section__header {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto var(--ky-space-8);
}
.ky-section__eyebrow {
    display: inline-block;
    padding: 0.3rem var(--ky-space-3);
    border-radius: var(--ky-radius-pill);
    background: rgba(51, 119, 255, 0.10);
    border: 1px solid rgba(89, 155, 255, 0.28);
    color: var(--ky-primary-300);
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--ky-space-3);
}
.ky-section__lead {
    color: var(--ky-text-muted);
    font-size: var(--ky-fs-lead);
    margin: var(--ky-space-3) auto 0;
    max-width: 42rem;
    line-height: 1.6;
}

/* ---- Visual SVG do hero (command center / orquestração) ---- */
.ky-hero__visual {
    margin: var(--ky-space-8) auto 0;
    max-width: 780px;
    position: relative;
}
.ky-hero__visual::before,
.ky-hero__visual::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    opacity: 0.6;
}
.ky-hero__visual::before {
    top: 20%; left: -10%;
    width: 18rem; height: 18rem;
    background: radial-gradient(circle, rgba(51, 119, 255, 0.45), transparent 70%);
}
.ky-hero__visual::after {
    bottom: 0; right: -8%;
    width: 16rem; height: 16rem;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.4), transparent 70%);
}
.ky-hero__visual-frame {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-2);
    box-shadow: var(--ky-shadow-lg);
    overflow: hidden;
    backdrop-filter: blur(10px);
}
/* Borda gradiente revelada (mask trick) */
.ky-hero__visual-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(89, 155, 255, 0.55), transparent 45%, rgba(167, 139, 250, 0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.ky-hero__visual-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ky-radius-lg);
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(51, 119, 255, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(11, 11, 20, 0.55), rgba(11, 11, 20, 0.85));
}
/* Animações do visual SVG (CSS-driven; respeitam prefers-reduced-motion global) */
@keyframes kyOrbit { to { transform: rotate(360deg); } }
@keyframes kyPulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.25); }
}
@keyframes kyDashFlow { to { stroke-dashoffset: -32; } }
.ky-hero__visual-svg .kv-orbit {
    transform-origin: 360px 200px;
    animation: kyOrbit 80s linear infinite;
}
.ky-hero__visual-svg .kv-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: kyPulseDot 2.4s ease-in-out infinite;
}
.ky-hero__visual-svg .kv-pulse--b { animation-duration: 2.8s; animation-delay: -0.4s; }
.ky-hero__visual-svg .kv-pulse--c { animation-duration: 3.2s; animation-delay: -0.9s; }
.ky-hero__visual-svg .kv-flow { stroke-dasharray: 4 4; animation: kyDashFlow 4s linear infinite; }

/* ---- Faixa de métricas sob o hero ---- */
.ky-hero__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ky-space-4);
    margin: var(--ky-space-8) auto 0;
    padding: var(--ky-space-5) var(--ky-space-3);
    max-width: 780px;
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-xl);
    backdrop-filter: blur(10px);
}
@media (min-width: 768px) {
    .ky-hero__metrics { grid-template-columns: repeat(4, 1fr); padding: var(--ky-space-5); }
}
.ky-metric { text-align: center; position: relative; padding: 0 var(--ky-space-2); }
.ky-metric:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--ky-space-2));
    top: 22%;
    height: 56%;
    width: 1px;
    background: var(--ky-border);
}
.ky-metric__value {
    display: block;
    font-size: clamp(1.5rem, 3.6vw, 2.25rem);
    font-weight: var(--ky-fw-extrabold);
    background: var(--ky-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: var(--ky-space-2);
    letter-spacing: -0.02em;
}
.ky-metric__label {
    font-size: var(--ky-fs-caption);
    color: var(--ky-text-muted);
    font-weight: var(--ky-fw-medium);
    line-height: 1.35;
}

/* ---- Card de módulo: ícone + link animado no hover ---- */
.ky-card__icon {
    display: inline-grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--ky-radius-md);
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.20), rgba(139, 92, 246, 0.20));
    border: 1px solid rgba(89, 155, 255, 0.32);
    color: var(--ky-primary-300);
    margin-bottom: var(--ky-space-4);
    position: relative;
    overflow: hidden;
    transition: transform var(--ky-motion-base) var(--ky-ease), box-shadow var(--ky-motion-base) var(--ky-ease);
}
.ky-card__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.20), transparent 60%);
    pointer-events: none;
}
.ky-card__icon svg { width: 24px; height: 24px; position: relative; z-index: 1; }
.ky-card:hover .ky-card__icon { transform: scale(1.05); box-shadow: var(--ky-glow-primary); }
.ky-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ky-space-1);
    margin-top: var(--ky-space-4);
    color: var(--ky-primary-300);
    font-weight: var(--ky-fw-semibold);
    font-size: var(--ky-fs-caption);
    transition: gap var(--ky-motion-base) var(--ky-ease), color var(--ky-motion-fast) var(--ky-ease);
}
.ky-card:hover .ky-card__link { gap: var(--ky-space-3); color: var(--ky-primary-400); }
.ky-card__link svg { width: 14px; height: 14px; }

/* ---- Pipeline "Como funciona" ---- */
.ky-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ky-space-4);
    position: relative;
}
@media (min-width: 768px) {
    .ky-flow { grid-template-columns: repeat(3, 1fr); gap: var(--ky-space-5); }
}
.ky-flow__step {
    position: relative;
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-6);
    overflow: hidden;
    transition: transform var(--ky-motion-base) var(--ky-ease), border-color var(--ky-motion-base) var(--ky-ease), box-shadow var(--ky-motion-base) var(--ky-ease);
}
.ky-flow__step:hover {
    transform: translateY(-4px);
    border-color: rgba(89, 155, 255, 0.4);
    box-shadow: var(--ky-shadow-md);
}
/* Linha conectora entre passos no desktop */
@media (min-width: 768px) {
    .ky-flow__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%; right: calc(-1 * var(--ky-space-5));
        width: var(--ky-space-5);
        height: 1px;
        background: linear-gradient(90deg, rgba(89, 155, 255, 0.5), transparent);
        pointer-events: none;
    }
}
.ky-flow__step::before {
    content: attr(data-step);
    position: absolute;
    top: var(--ky-space-4);
    right: var(--ky-space-5);
    font-size: 2.5rem;
    font-weight: var(--ky-fw-extrabold);
    background: var(--ky-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0.4;
    line-height: 1;
    pointer-events: none;
    letter-spacing: -0.04em;
}
.ky-flow__icon {
    display: inline-grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--ky-radius-lg);
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.20), rgba(139, 92, 246, 0.20));
    border: 1px solid rgba(89, 155, 255, 0.32);
    color: var(--ky-primary-300);
    margin-bottom: var(--ky-space-4);
    position: relative;
    overflow: hidden;
}
.ky-flow__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%);
    pointer-events: none;
}
.ky-flow__icon svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.ky-flow__title { font-size: var(--ky-fs-h3); margin-bottom: var(--ky-space-2); }
.ky-flow__text { color: var(--ky-text-muted); margin: 0; line-height: 1.6; }

/* ---- Diferenciais: ícone no lugar do checkmark ---- */
.ky-feature__icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--ky-radius-md);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(89, 155, 255, 0.15));
    border: 1px solid rgba(74, 222, 128, 0.32);
    color: var(--ky-accent-400);
}
.ky-feature__icon svg { width: 22px; height: 22px; }

/* ---- Depoimentos: avatar circular + cabeçalho ---- */
.ky-testimonial__head {
    display: flex;
    align-items: center;
    gap: var(--ky-space-3);
    margin-bottom: var(--ky-space-4);
}
.ky-avatar {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-weight: var(--ky-fw-bold);
    font-size: 0.9rem;
    color: #fff;
    background: var(--ky-grad-brand);
    border: 1px solid var(--ky-border-strong);
    flex: 0 0 auto;
    box-shadow: 0 0 0 4px rgba(89, 155, 255, 0.08);
    letter-spacing: 0.02em;
}
.ky-avatar--violet { background: linear-gradient(135deg, #8B5CF6, #4ADE80); }
.ky-avatar--blue { background: linear-gradient(135deg, #3377FF, #22C55E); }
.ky-avatar--mixed { background: linear-gradient(135deg, #1A56F5, #8B5CF6); }
.ky-testimonial__person {
    font-size: 0.95rem;
    font-weight: var(--ky-fw-semibold);
    color: var(--ky-text);
    margin: 0;
    line-height: 1.3;
}
.ky-testimonial__role {
    font-size: var(--ky-fs-caption);
    color: var(--ky-text-muted);
    margin: 0;
}
.ky-testimonial__quote {
    font-size: 1.05rem;
    color: var(--ky-text);
    margin: 0 0 var(--ky-space-4);
    line-height: 1.6;
}
.ky-testimonial__quote::before {
    content: "“";
    display: block;
    font-size: 2.2rem;
    line-height: 0.5;
    color: var(--ky-primary-400);
    margin-bottom: var(--ky-space-2);
    font-family: Georgia, serif;
}

/* ---- CTA Banner final ---- */
.ky-cta-banner {
    position: relative;
    padding: var(--ky-space-10) var(--ky-space-5);
    border-radius: var(--ky-radius-xl);
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.18), rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(89, 155, 255, 0.4);
    box-shadow: var(--ky-glow-primary-strong);
    overflow: hidden;
    text-align: center;
}
.ky-cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 25%, rgba(51, 119, 255, 0.30), transparent 50%),
        radial-gradient(circle at 82% 75%, rgba(139, 92, 246, 0.30), transparent 50%);
    pointer-events: none;
}
/* Anel sutil que orbita o banner */
.ky-cta-banner::after {
    content: "";
    position: absolute;
    top: -50%; right: -10%;
    width: 32rem; height: 32rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(89, 155, 255, 0.18), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}
.ky-cta-banner > * { position: relative; z-index: 1; }
.ky-cta-banner__title {
    font-size: clamp(var(--ky-fs-h2), 4.2vw, var(--ky-fs-h1));
    font-weight: var(--ky-fw-extrabold);
    margin: 0 0 var(--ky-space-3);
    background: linear-gradient(90deg, #fff 0%, var(--ky-primary-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
    line-height: var(--ky-lh-tight);
}
.ky-cta-banner__text {
    color: var(--ky-text-muted);
    font-size: var(--ky-fs-lead);
    max-width: 40rem;
    margin: 0 auto var(--ky-space-6);
    line-height: 1.55;
}
.ky-cta-banner__actions {
    display: flex;
    gap: var(--ky-space-3);
    justify-content: center;
    flex-wrap: wrap;
}
.ky-cta-banner__hint {
    margin-top: var(--ky-space-5);
    font-size: var(--ky-fs-caption);
    color: var(--ky-text-faint);
}
.ky-cta-banner__hint svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--ky-accent-400); }

/* ---- Faixa de logos / "confiança" (decorativa, sem assets externos) ---- */
.ky-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ky-space-3) var(--ky-space-6);
    justify-content: center;
    align-items: center;
    margin-top: var(--ky-space-8);
    padding: var(--ky-space-4) 0;
    border-top: 1px solid var(--ky-border);
    border-bottom: 1px solid var(--ky-border);
}
.ky-trust__label {
    flex: 0 0 100%;
    text-align: center;
    font-size: var(--ky-fs-caption);
    color: var(--ky-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--ky-space-2);
    font-weight: var(--ky-fw-semibold);
}
@media (min-width: 768px) { .ky-trust__label { flex: 0 0 auto; margin-bottom: 0; margin-right: var(--ky-space-4); } }
.ky-trust__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--ky-space-2);
    color: var(--ky-text-muted);
    font-weight: var(--ky-fw-semibold);
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    opacity: 0.7;
    transition: opacity var(--ky-motion-fast) var(--ky-ease), color var(--ky-motion-fast) var(--ky-ease);
}
.ky-trust__logo:hover { opacity: 1; color: var(--ky-text); }
.ky-trust__logo-mark {
    display: inline-grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: var(--ky-glass-strong);
    border: 1px solid var(--ky-border);
    font-size: 0.7rem;
    font-weight: var(--ky-fw-bold);
    color: var(--ky-primary-300);
}

/* =========================================================================
   Páginas internas — refinamento visual mantendo contratos CSS/JS.
   Chip de ícones SVG em callouts/badges, ícones em abas/sidebar, polish.
   ========================================================================= */

/* ---- Callout: ícone vira chip 32×32 com SVG; emoji legado some ---- */
.ky-callout__icon {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--ky-radius-sm);
    background: rgba(89, 155, 255, 0.14);
    border: 1px solid rgba(89, 155, 255, 0.28);
    color: var(--ky-info);
    line-height: 0;
    font-size: 0;
}
.ky-callout__icon svg { width: 18px; height: 18px; }
.ky-callout--warning .ky-callout__icon {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.32);
    color: var(--ky-warning);
}
.ky-callout--success .ky-callout__icon {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.32);
    color: var(--ky-success);
}
/* Variante "texto" para o callout (fallback) */
.ky-callout__icon--text {
    background: transparent;
    border: 0;
    font-size: 1.15rem;
}

/* ---- Return badge: passa a aceitar SVG ---- */
.ky-return__badge svg { width: 32px; height: 32px; }
.ky-return__badge--ok svg { color: var(--ky-accent-400); }
.ky-return__badge--processing svg { color: var(--ky-primary-300); }
.ky-return__badge--neutral svg { color: var(--ky-text); }

/* Spinner sutil para o badge em estado "processando" */
@keyframes kyBadgeSpin {
    to { transform: rotate(360deg); }
}
.ky-return__badge--processing svg.kv-spin {
    animation: kyBadgeSpin 1.6s linear infinite;
    transform-origin: center;
}

/* ---- Auth tabs com ícone ---- */
.ky-auth__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--ky-space-2);
}
.ky-auth__tab svg { width: 16px; height: 16px; }

/* ---- Auth panel: brilho sutil de borda no topo ---- */
.ky-auth__panel { position: relative; }
.ky-auth__panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--ky-grad-text);
    opacity: 0.7;
    border-top-left-radius: var(--ky-radius-xl);
    border-top-right-radius: var(--ky-radius-xl);
    pointer-events: none;
}

/* ---- Resumo / cards: brilho sutil no topo ---- */
.ky-summary__card { position: relative; }
.ky-summary__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--ky-grad-text);
    opacity: 0.55;
    border-top-left-radius: var(--ky-radius-xl);
    border-top-right-radius: var(--ky-radius-xl);
    pointer-events: none;
}

/* ---- Docs sidebar: título com ícone ---- */
.ky-docs__sidebar-title {
    display: flex;
    align-items: center;
    gap: var(--ky-space-2);
}
.ky-docs__sidebar-title svg { width: 14px; height: 14px; opacity: 0.75; }

/* ---- Docs search: ícone com cor reforçada ---- */
.ky-docs__search-icon { color: var(--ky-primary-300); }
.ky-docs__search-icon svg { width: 16px; height: 16px; }

/* ---- Docs mobile toggle: ícone do chevron já é SVG, garantir tamanho ---- */
.ky-docs__mobile-toggle-chevron svg { width: 18px; height: 18px; }

/* ---- Toggle de ciclo (Pricing): seta no hint ---- */
.ky-toggle__hint::before {
    content: "↗";
    color: var(--ky-accent-400);
    margin-right: 4px;
    font-weight: var(--ky-fw-bold);
}

/* ---- Plan card: brilho sutil no topo do body ---- */
.ky-plancard__body { position: relative; overflow: hidden; }
.ky-plancard__body::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--ky-grad-text);
    opacity: 0;
    transition: opacity var(--ky-motion-base) var(--ky-ease);
    pointer-events: none;
}
.ky-plancard__radio:checked + .ky-plancard__body::before,
.ky-plancard__body:hover::before { opacity: 0.6; }

/* ---- Site header: linha gradiente sutil abaixo ---- */
.site-header { position: sticky; }
.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ky-primary-400) 50%, transparent);
    opacity: 0.45;
    pointer-events: none;
}

/* ---- Footer: linha gradiente sutil acima ---- */
.site-footer { position: relative; }
.site-footer::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ky-primary-400) 50%, transparent);
    opacity: 0.4;
    pointer-events: none;
}

/* ---- Steps list (Subscription/Success): bullets customizados ---- */
.ky-return__steplist {
    list-style: none;
    padding-left: 0 !important;
    counter-reset: ky-step;
}
.ky-return__steplist li {
    counter-increment: ky-step;
    position: relative;
    padding-left: calc(28px + var(--ky-space-3));
    margin-bottom: var(--ky-space-4);
}
.ky-return__steplist li:last-child { margin-bottom: 0; }
.ky-return__steplist li::before {
    content: counter(ky-step, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0;
    width: 28px; height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--ky-radius-sm);
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.20), rgba(139, 92, 246, 0.20));
    border: 1px solid rgba(89, 155, 255, 0.32);
    color: var(--ky-primary-300);
    font-weight: var(--ky-fw-bold);
    font-size: 0.75rem;
    font-family: var(--ky-font-mono);
    line-height: 1;
}

/* ---- Pricing hero: usa ky-section__header (mantém ky-pricing__hero) ---- */
.ky-pricing__hero .ky-section__header { margin-bottom: var(--ky-space-4); }
.ky-pricing__hero .ky-section__header .ky-section__eyebrow { margin-bottom: var(--ky-space-3); }

/* ---- Auth hero: alinhamento com eyebrow ---- */
.ky-auth__hero .ky-section__header { margin-bottom: var(--ky-space-2); }

/* ---- Return hero: espaçamento consistente ---- */
.ky-return__hero { padding-bottom: var(--ky-space-4); }

/* =========================================================================
   EVOLUÇÕES FUTURISTAS — Cookie banner, command palette, sticky CTA, toast,
   mega menu, bottom nav, animações on-scroll, FAQ, comparison table,
   trust badges, savings calculator, password strength, social login,
   welcome checklist, exit survey, templates showcase, use cases,
   before/after, syntax highlight, TOC, animated counters, confetti.
   ========================================================================= */

/* ---- Reveal on scroll (data-reveal) ---- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ky-ease), transform 0.7s var(--ky-ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---- Animated gradient text ---- */
@keyframes kyGradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ky-text-grad--animated {
    background: linear-gradient(90deg, var(--ky-primary-400), var(--ky-accent-400), var(--ky-secondary), var(--ky-primary-400));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: kyGradShift 8s ease-in-out infinite;
}

/* ---- Animated counters (data-counter) ---- */
.ky-counter__value { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- Cookie consent banner ---- */
.ky-cookie {
    position: fixed;
    left: var(--ky-space-4); right: var(--ky-space-4);
    bottom: var(--ky-space-4);
    z-index: 1080;
    max-width: 720px;
    margin: 0 auto;
    background: rgba(15, 15, 26, 0.92);
    border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-xl);
    box-shadow: var(--ky-shadow-lg);
    backdrop-filter: blur(20px) saturate(160%);
    padding: var(--ky-space-5);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.4s var(--ky-ease), opacity 0.4s var(--ky-ease);
}
.ky-cookie.is-visible { transform: translateY(0); opacity: 1; }
.ky-cookie__title { font-size: 1.05rem; font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-2); display: flex; align-items: center; gap: var(--ky-space-2); }
.ky-cookie__title svg { width: 18px; height: 18px; color: var(--ky-primary-300); }
.ky-cookie__text { color: var(--ky-text-muted); font-size: 0.92rem; margin-bottom: var(--ky-space-4); line-height: 1.55; }
.ky-cookie__actions { display: flex; gap: var(--ky-space-2); flex-wrap: wrap; }
.ky-cookie__prefs { display: none; margin-bottom: var(--ky-space-4); padding: var(--ky-space-3); background: rgba(255,255,255,0.03); border: 1px solid var(--ky-border); border-radius: var(--ky-radius-md); }
.ky-cookie.is-expanded .ky-cookie__prefs { display: block; }
.ky-cookie__pref { display: flex; align-items: center; justify-content: space-between; padding: var(--ky-space-2) 0; }
.ky-cookie__pref:not(:last-child) { border-bottom: 1px solid var(--ky-border); }
.ky-cookie__pref-label { font-size: 0.9rem; }
.ky-cookie__pref-desc { color: var(--ky-text-faint); font-size: 0.8rem; }

/* ---- Sticky CTA flutuante (após scroll) ---- */
.ky-sticky-cta {
    position: fixed;
    right: var(--ky-space-4);
    bottom: var(--ky-space-4);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    gap: var(--ky-space-2);
    transform: translateY(120%);
    opacity: 0;
    transition: transform 0.4s var(--ky-ease), opacity 0.4s var(--ky-ease);
    pointer-events: none;
}
.ky-sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ky-sticky-cta__btn {
    display: inline-flex; align-items: center; gap: var(--ky-space-2);
    padding: var(--ky-space-3) var(--ky-space-5);
    background: var(--ky-grad-cta);
    color: var(--ky-primary-contrast);
    border-radius: var(--ky-radius-pill);
    box-shadow: var(--ky-glow-primary-strong);
    font-weight: var(--ky-fw-semibold);
    font-size: 0.95rem;
    border: 0;
    text-decoration: none;
}
.ky-sticky-cta__btn:hover { color: var(--ky-primary-contrast); text-decoration: none; transform: translateY(-2px); box-shadow: var(--ky-glow-primary-strong); }
.ky-sticky-cta__btn svg { width: 16px; height: 16px; }
@media (max-width: 575.98px) {
    .ky-sticky-cta__btn span { display: none; }
    .ky-sticky-cta__btn { padding: var(--ky-space-3); }
}

/* ---- Bottom-to-top ---- */
.ky-totop {
    position: fixed;
    right: var(--ky-space-4);
    bottom: calc(var(--ky-space-4) + 64px);
    z-index: 1060;
    width: 44px; height: 44px;
    display: inline-grid; place-items: center;
    background: var(--ky-glass-strong);
    border: 1px solid var(--ky-border-strong);
    border-radius: 50%;
    color: var(--ky-text);
    backdrop-filter: blur(10px);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--ky-ease), transform 0.3s var(--ky-ease), border-color 0.2s var(--ky-ease), color 0.2s var(--ky-ease);
    pointer-events: none;
}
.ky-totop.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ky-totop:hover { border-color: var(--ky-primary-400); color: var(--ky-primary-300); }
.ky-totop svg { width: 18px; height: 18px; }

/* ---- Toast notifications ---- */
.ky-toast-stack {
    position: fixed;
    top: calc(var(--ky-header-h) + var(--ky-space-4));
    right: var(--ky-space-4);
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: var(--ky-space-2);
    max-width: 360px;
    pointer-events: none;
}
.ky-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--ky-space-3);
    padding: var(--ky-space-4);
    background: rgba(15, 15, 26, 0.95);
    border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-md);
    box-shadow: var(--ky-shadow-md);
    backdrop-filter: blur(20px);
    color: var(--ky-text);
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.35s var(--ky-ease), opacity 0.35s var(--ky-ease);
}
.ky-toast.is-visible { transform: translateX(0); opacity: 1; }
.ky-toast__icon {
    flex: 0 0 auto;
    display: inline-grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: var(--ky-radius-sm);
    background: rgba(89, 155, 255, 0.14);
    border: 1px solid rgba(89, 155, 255, 0.28);
    color: var(--ky-primary-300);
}
.ky-toast__icon svg { width: 16px; height: 16px; }
.ky-toast--success .ky-toast__icon { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.32); color: var(--ky-accent-400); }
.ky-toast--warning .ky-toast__icon { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.32); color: var(--ky-warning); }
.ky-toast--error .ky-toast__icon { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.32); color: var(--ky-error); }
.ky-toast__body { flex: 1; min-width: 0; }
.ky-toast__title { font-weight: var(--ky-fw-semibold); font-size: 0.95rem; margin: 0 0 2px; }
.ky-toast__text { font-size: 0.85rem; color: var(--ky-text-muted); margin: 0; line-height: 1.5; }
.ky-toast__close {
    flex: 0 0 auto;
    background: transparent; border: 0;
    color: var(--ky-text-faint);
    cursor: pointer; padding: 0;
    width: 24px; height: 24px;
    display: inline-grid; place-items: center;
    border-radius: var(--ky-radius-sm);
}
.ky-toast__close:hover { color: var(--ky-text); background: rgba(255,255,255,0.05); }
.ky-toast__close svg { width: 14px; height: 14px; }

/* ---- Mega menu (header) ---- */
.ky-mega { position: relative; }
.ky-mega__trigger {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: 0;
    color: var(--ky-text-muted);
    font-weight: var(--ky-fw-medium);
    padding: var(--ky-space-2) var(--ky-space-3);
    border-radius: var(--ky-radius-pill);
    cursor: pointer;
    font: inherit;
}
.ky-mega__trigger:hover, .ky-mega.is-open .ky-mega__trigger {
    color: #fff;
    background: var(--ky-glass-strong);
    text-decoration: none;
}
.ky-mega__trigger svg { width: 14px; height: 14px; transition: transform var(--ky-motion-fast) var(--ky-ease); }
.ky-mega.is-open .ky-mega__trigger svg { transform: rotate(180deg); }
.ky-mega__panel {
    position: absolute;
    top: calc(100% + var(--ky-space-2));
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    opacity: 0;
    visibility: hidden;
    width: min(880px, 92vw);
    background: rgba(15, 15, 26, 0.96);
    border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-xl);
    box-shadow: var(--ky-shadow-lg);
    backdrop-filter: blur(20px) saturate(160%);
    padding: var(--ky-space-6);
    transition: opacity 0.25s var(--ky-ease), transform 0.25s var(--ky-ease), visibility 0.25s;
    z-index: 1050;
}
.ky-mega.is-open .ky-mega__panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ky-mega__grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--ky-space-5); }
.ky-mega__col h3 { font-size: var(--ky-fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ky-text-faint); margin-bottom: var(--ky-space-3); }
.ky-mega__link {
    display: flex; align-items: flex-start; gap: var(--ky-space-3);
    padding: var(--ky-space-3);
    margin: 0 calc(-1 * var(--ky-space-3));
    border-radius: var(--ky-radius-md);
    color: var(--ky-text-muted);
    text-decoration: none;
    transition: background var(--ky-motion-fast) var(--ky-ease), color var(--ky-motion-fast) var(--ky-ease);
}
.ky-mega__link:hover { background: var(--ky-glass-strong); color: var(--ky-text); text-decoration: none; }
.ky-mega__link-icon { flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ky-radius-sm); background: linear-gradient(135deg, rgba(51, 119, 255, 0.18), rgba(139, 92, 246, 0.18)); border: 1px solid rgba(89, 155, 255, 0.32); color: var(--ky-primary-300); }
.ky-mega__link-icon svg { width: 16px; height: 16px; }
.ky-mega__link-text { font-weight: var(--ky-fw-semibold); color: var(--ky-text); font-size: 0.95rem; line-height: 1.3; }
.ky-mega__link-desc { font-size: 0.8rem; color: var(--ky-text-faint); line-height: 1.4; margin-top: 2px; }
.ky-mega__featured {
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(89, 155, 255, 0.32);
    border-radius: var(--ky-radius-md);
    padding: var(--ky-space-4);
    position: relative; overflow: hidden;
}
.ky-mega__featured-tag {
    display: inline-block;
    background: var(--ky-accent);
    color: #04240f;
    padding: 2px var(--ky-space-2);
    border-radius: var(--ky-radius-pill);
    font-size: 0.7rem;
    font-weight: var(--ky-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ky-space-2);
}
.ky-mega__featured h4 { font-size: 1rem; margin-bottom: var(--ky-space-2); }
.ky-mega__featured p { font-size: 0.85rem; color: var(--ky-text-muted); margin-bottom: var(--ky-space-3); line-height: 1.5; }
.ky-mega__featured-cta { font-weight: var(--ky-fw-semibold); color: var(--ky-primary-300); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 4px; }
.ky-mega__featured-cta::after { content: "→"; transition: transform 0.2s var(--ky-ease); }
.ky-mega__featured:hover .ky-mega__featured-cta::after { transform: translateX(4px); }
@media (max-width: 767.98px) {
    .ky-mega__panel { width: 92vw; padding: var(--ky-space-4); }
    .ky-mega__grid { grid-template-columns: 1fr; gap: var(--ky-space-3); }
}

/* ---- Mobile bottom nav ---- */
.ky-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1050;
    background: rgba(11, 11, 20, 0.92);
    border-top: 1px solid var(--ky-border);
    backdrop-filter: blur(16px) saturate(160%);
    padding: var(--ky-space-2) var(--ky-space-2) calc(env(safe-area-inset-bottom, 0) + var(--ky-space-2));
    justify-content: space-around;
}
@media (max-width: 767.98px) {
    .ky-bottom-nav { display: flex; }
    body { padding-bottom: 64px; }
}
.ky-bottom-nav__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--ky-space-2) 4px;
    color: var(--ky-text-faint);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: var(--ky-fw-medium);
    border-radius: var(--ky-radius-md);
    transition: color 0.2s var(--ky-ease);
}
.ky-bottom-nav__item:hover, .ky-bottom-nav__item.is-active { color: var(--ky-primary-300); text-decoration: none; }
.ky-bottom-nav__item svg { width: 22px; height: 22px; }

/* ---- Command palette (Cmd+K) ---- */
.ky-cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    padding-left: var(--ky-space-4);
    padding-right: var(--ky-space-4);
}
.ky-cmdk-backdrop.is-open { display: flex; }
.ky-cmdk {
    width: min(640px, 100%);
    background: rgba(15, 15, 26, 0.98);
    border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-xl);
    box-shadow: var(--ky-shadow-lg);
    backdrop-filter: blur(20px) saturate(160%);
    overflow: hidden;
    transform: scale(0.96);
    opacity: 0;
    transition: transform 0.2s var(--ky-ease), opacity 0.2s var(--ky-ease);
}
.ky-cmdk-backdrop.is-open .ky-cmdk { transform: scale(1); opacity: 1; }
.ky-cmdk__search {
    display: flex; align-items: center; gap: var(--ky-space-3);
    padding: var(--ky-space-4) var(--ky-space-5);
    border-bottom: 1px solid var(--ky-border);
}
.ky-cmdk__search svg { width: 18px; height: 18px; color: var(--ky-text-faint); flex: 0 0 auto; }
.ky-cmdk__input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: none;
    color: var(--ky-text); font-size: 1rem; font: inherit;
}
.ky-cmdk__input::placeholder { color: var(--ky-text-faint); }
.ky-cmdk__kbd {
    display: inline-flex; align-items: center;
    padding: 2px var(--ky-space-2);
    background: var(--ky-glass-strong);
    border: 1px solid var(--ky-border);
    border-radius: 4px;
    font-family: var(--ky-font-mono);
    font-size: 0.7rem;
    color: var(--ky-text-muted);
}
.ky-cmdk__list { max-height: 50vh; overflow-y: auto; padding: var(--ky-space-2); }
.ky-cmdk__group-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ky-text-faint);
    padding: var(--ky-space-2) var(--ky-space-3);
    margin-top: var(--ky-space-2);
}
.ky-cmdk__group-label:first-child { margin-top: 0; }
.ky-cmdk__item {
    display: flex; align-items: center; gap: var(--ky-space-3);
    padding: var(--ky-space-3);
    border-radius: var(--ky-radius-md);
    color: var(--ky-text-muted);
    cursor: pointer;
    transition: background var(--ky-motion-fast) var(--ky-ease), color var(--ky-motion-fast) var(--ky-ease);
    text-decoration: none;
}
.ky-cmdk__item:hover, .ky-cmdk__item.is-selected { background: var(--ky-glass-strong); color: var(--ky-text); text-decoration: none; }
.ky-cmdk__item-icon { flex: 0 0 auto; width: 28px; height: 28px; display: inline-grid; place-items: center; color: var(--ky-primary-300); }
.ky-cmdk__item-icon svg { width: 16px; height: 16px; }
.ky-cmdk__item-text { flex: 1; min-width: 0; font-size: 0.95rem; }
.ky-cmdk__item-text small { display: block; color: var(--ky-text-faint); font-size: 0.78rem; margin-top: 2px; }
.ky-cmdk__item-kbd { font-family: var(--ky-font-mono); font-size: 0.75rem; color: var(--ky-text-faint); }
.ky-cmdk__empty { padding: var(--ky-space-6); text-align: center; color: var(--ky-text-faint); font-size: 0.9rem; }
.ky-cmdk__footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--ky-space-3) var(--ky-space-4);
    border-top: 1px solid var(--ky-border);
    font-size: 0.75rem;
    color: var(--ky-text-faint);
    background: rgba(255,255,255,0.02);
}
.ky-cmdk__footer-keys { display: flex; gap: var(--ky-space-3); }
.ky-cmdk__footer-keys span { display: inline-flex; align-items: center; gap: 4px; }
.ky-cmdk__footer-keys kbd { display: inline-block; padding: 2px 6px; background: var(--ky-glass-strong); border: 1px solid var(--ky-border); border-radius: 4px; font-family: var(--ky-font-mono); font-size: 0.7rem; }

/* ---- FAQ accordion ---- */
.ky-faq {
    display: flex; flex-direction: column; gap: var(--ky-space-3);
    max-width: 56rem;
    margin: 0 auto;
}
.ky-faq__item {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-md);
    overflow: hidden;
    transition: border-color 0.2s var(--ky-ease);
}
.ky-faq__item:hover { border-color: var(--ky-border-strong); }
.ky-faq__item.is-open { border-color: rgba(89, 155, 255, 0.4); }
.ky-faq__q {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: var(--ky-space-3);
    padding: var(--ky-space-4) var(--ky-space-5);
    background: transparent;
    border: 0;
    color: var(--ky-text);
    font: inherit;
    font-weight: var(--ky-fw-semibold);
    text-align: left;
    cursor: pointer;
}
.ky-faq__icon {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-grid; place-items: center;
    border-radius: 50%;
    background: rgba(89, 155, 255, 0.14);
    color: var(--ky-primary-300);
    transition: transform 0.3s var(--ky-ease);
}
.ky-faq__item.is-open .ky-faq__icon { transform: rotate(45deg); }
.ky-faq__icon svg { width: 12px; height: 12px; }
.ky-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ky-ease);
}
.ky-faq__a-inner { padding: 0 var(--ky-space-5) var(--ky-space-5); color: var(--ky-text-muted); line-height: 1.65; }
.ky-faq__a-inner p { margin: 0; }
.ky-faq__a-inner p + p { margin-top: var(--ky-space-2); }

/* ---- Comparison table ---- */
.ky-compare {
    width: 100%;
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.ky-compare thead th {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    color: var(--ky-text);
    padding: var(--ky-space-4) var(--ky-space-3);
    font-weight: var(--ky-fw-bold);
    text-align: center;
    border-bottom: 1px solid var(--ky-border);
    font-size: 0.95rem;
}
.ky-compare thead th:first-child { text-align: left; color: var(--ky-text-muted); font-weight: var(--ky-fw-medium); font-size: 0.85rem; }
.ky-compare thead th.is-featured { color: var(--ky-primary-300); position: relative; }
.ky-compare thead th.is-featured::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--ky-grad-text);
}
.ky-compare tbody td {
    padding: var(--ky-space-3);
    text-align: center;
    border-bottom: 1px solid var(--ky-border);
    color: var(--ky-text-muted);
    font-size: 0.92rem;
}
.ky-compare tbody tr:last-child td { border-bottom: none; }
.ky-compare tbody td:first-child { text-align: left; color: var(--ky-text); font-weight: var(--ky-fw-medium); }
.ky-compare tbody td.is-check { color: var(--ky-accent-400); }
.ky-compare tbody td.is-x { color: var(--ky-text-faint); }
.ky-compare tbody td svg { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }

/* ---- Trust badges row ---- */
.ky-trust-badges {
    display: flex; flex-wrap: wrap; gap: var(--ky-space-3);
    justify-content: center;
    align-items: center;
    margin: var(--ky-space-6) 0;
}
.ky-trust-badge {
    display: inline-flex; align-items: center; gap: var(--ky-space-2);
    padding: var(--ky-space-2) var(--ky-space-3);
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-pill);
    color: var(--ky-text-muted);
    font-size: 0.8rem;
    font-weight: var(--ky-fw-semibold);
    transition: border-color 0.2s var(--ky-ease), color 0.2s var(--ky-ease);
}
.ky-trust-badge:hover { border-color: var(--ky-border-strong); color: var(--ky-text); }
.ky-trust-badge svg { width: 14px; height: 14px; color: var(--ky-accent-400); }

/* ---- Savings calculator ---- */
.ky-calc {
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.10), rgba(139, 92, 246, 0.10));
    border: 1px solid rgba(89, 155, 255, 0.32);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-6);
    margin: var(--ky-space-6) 0;
}
.ky-calc__title { font-size: 1.1rem; font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-2); display: flex; align-items: center; gap: var(--ky-space-2); }
.ky-calc__title svg { width: 20px; height: 20px; color: var(--ky-accent-400); }
.ky-calc__lead { color: var(--ky-text-muted); font-size: 0.9rem; margin-bottom: var(--ky-space-5); }
.ky-calc__grid { display: grid; grid-template-columns: 1fr; gap: var(--ky-space-5); }
@media (min-width: 768px) { .ky-calc__grid { grid-template-columns: 1fr 1fr; align-items: end; } }
.ky-calc__field label { display: block; font-size: 0.85rem; color: var(--ky-text-muted); margin-bottom: var(--ky-space-2); font-weight: var(--ky-fw-medium); }
.ky-calc__slider-wrap { display: flex; align-items: center; gap: var(--ky-space-3); }
.ky-calc__slider {
    flex: 1; min-width: 0;
    -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px;
    background: linear-gradient(90deg, var(--ky-primary-400) 0%, var(--ky-primary-400) var(--ky-calc-progress, 50%), rgba(255,255,255,0.10) var(--ky-calc-progress, 50%), rgba(255,255,255,0.10) 100%);
    outline: none;
}
.ky-calc__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ky-primary-400); cursor: pointer; box-shadow: var(--ky-glow-primary); }
.ky-calc__slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--ky-primary-400); cursor: pointer; }
.ky-calc__value { min-width: 80px; text-align: right; font-weight: var(--ky-fw-bold); font-variant-numeric: tabular-nums; color: var(--ky-text); }
.ky-calc__result { background: rgba(0,0,0,0.25); border: 1px solid var(--ky-border); border-radius: var(--ky-radius-md); padding: var(--ky-space-4); }
.ky-calc__result-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--ky-space-2) 0; }
.ky-calc__result-row:not(:last-child) { border-bottom: 1px solid var(--ky-border); margin-bottom: var(--ky-space-2); }
.ky-calc__result-row dt { color: var(--ky-text-muted); font-size: 0.85rem; margin: 0; }
.ky-calc__result-row dd { font-weight: var(--ky-fw-bold); margin: 0; font-size: 1.05rem; }
.ky-calc__savings { font-size: 1.5rem; color: var(--ky-accent-400); font-weight: var(--ky-fw-extrabold); }

/* ---- Password strength ---- */
.ky-password { position: relative; }
.ky-password__toggle {
    position: absolute;
    right: var(--ky-space-3);
    top: 50%;
    transform: translateY(-50%);
    background: transparent; border: 0;
    color: var(--ky-text-faint);
    cursor: pointer; padding: 4px;
    display: inline-grid; place-items: center;
    border-radius: var(--ky-radius-sm);
}
.ky-password__toggle:hover { color: var(--ky-primary-300); background: rgba(255,255,255,0.05); }
.ky-password__toggle svg { width: 16px; height: 16px; }
.ky-pwmeter {
    display: flex; align-items: center; gap: var(--ky-space-2);
    margin-top: var(--ky-space-1);
    font-size: 0.78rem;
}
.ky-pwmeter__bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.10);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.ky-pwmeter__bar::after {
    content: "";
    position: absolute; inset: 0;
    width: var(--ky-pw-strength, 0%);
    background: var(--ky-pw-color, var(--ky-error));
    transition: width 0.3s var(--ky-ease), background 0.3s var(--ky-ease);
}
.ky-pwmeter__label { color: var(--ky-pw-color, var(--ky-text-faint)); font-weight: var(--ky-fw-medium); min-width: 70px; text-align: right; }
.ky-pwreq { font-size: 0.78rem; color: var(--ky-text-faint); margin-top: var(--ky-space-1); }
.ky-pwreq li { display: flex; align-items: center; gap: 4px; }
.ky-pwreq li::before { content: "○"; color: var(--ky-text-faint); }
.ky-pwreq li.is-met { color: var(--ky-accent-400); }
.ky-pwreq li.is-met::before { content: "✓"; }

/* ---- Social login buttons ---- */
.ky-social {
    display: flex; flex-direction: column; gap: var(--ky-space-2);
    margin-bottom: var(--ky-space-4);
}
.ky-social__btn {
    display: flex; align-items: center; justify-content: center; gap: var(--ky-space-2);
    width: 100%;
    padding: var(--ky-space-3) var(--ky-space-4);
    background: var(--ky-glass);
    border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-md);
    color: var(--ky-text);
    font: inherit;
    font-weight: var(--ky-fw-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s var(--ky-ease), border-color 0.2s var(--ky-ease);
}
.ky-social__btn:hover { background: var(--ky-glass-strong); border-color: var(--ky-primary-400); color: var(--ky-text); text-decoration: none; }
.ky-social__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ky-social__divider {
    display: flex; align-items: center; gap: var(--ky-space-3);
    margin: var(--ky-space-4) 0;
    color: var(--ky-text-faint);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.ky-social__divider::before, .ky-social__divider::after {
    content: ""; flex: 1; height: 1px; background: var(--ky-border);
}

/* ---- Welcome checklist (Success) ---- */
.ky-checklist {
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(89, 155, 255, 0.32);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-5) var(--ky-space-6);
    margin-bottom: var(--ky-space-5);
}
.ky-checklist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ky-space-3); margin-bottom: var(--ky-space-4); flex-wrap: wrap; }
.ky-checklist__title { font-size: 1.05rem; font-weight: var(--ky-fw-bold); margin: 0; display: flex; align-items: center; gap: var(--ky-space-2); }
.ky-checklist__title svg { width: 20px; height: 20px; color: var(--ky-accent-400); }
.ky-checklist__progress { display: flex; align-items: center; gap: var(--ky-space-2); font-size: 0.85rem; color: var(--ky-text-muted); }
.ky-checklist__progress-bar { width: 100px; height: 6px; background: rgba(255,255,255,0.10); border-radius: 3px; overflow: hidden; }
.ky-checklist__progress-fill { display: block; height: 100%; background: var(--ky-grad-text); transition: width 0.5s var(--ky-ease); }
.ky-checklist__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ky-space-2); }
.ky-checklist__item {
    display: flex; align-items: flex-start; gap: var(--ky-space-3);
    padding: var(--ky-space-3);
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-md);
    transition: border-color 0.2s var(--ky-ease), opacity 0.2s var(--ky-ease);
}
.ky-checklist__item.is-done { opacity: 0.65; }
.ky-checklist__item.is-done .ky-checklist__item-title { text-decoration: line-through; }
.ky-checklist__check {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-grid; place-items: center;
    border: 2px solid var(--ky-border-strong);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s var(--ky-ease), border-color 0.2s var(--ky-ease);
}
.ky-checklist__item.is-done .ky-checklist__check { background: var(--ky-accent); border-color: var(--ky-accent); color: #04240f; }
.ky-checklist__check svg { width: 12px; height: 12px; opacity: 0; transition: opacity 0.2s var(--ky-ease); }
.ky-checklist__item.is-done .ky-checklist__check svg { opacity: 1; }
.ky-checklist__item-body { flex: 1; min-width: 0; }
.ky-checklist__item-title { font-weight: var(--ky-fw-semibold); font-size: 0.95rem; margin: 0 0 2px; }
.ky-checklist__item-desc { font-size: 0.82rem; color: var(--ky-text-muted); margin: 0; }
.ky-checklist__item-cta { color: var(--ky-primary-300); font-size: 0.82rem; font-weight: var(--ky-fw-semibold); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.ky-checklist__item-cta:hover { color: var(--ky-primary-400); }

/* ---- Exit survey ---- */
.ky-survey {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-6);
    margin-bottom: var(--ky-space-5);
}
.ky-survey__title { font-size: 1.1rem; font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-2); }
.ky-survey__lead { color: var(--ky-text-muted); font-size: 0.92rem; margin-bottom: var(--ky-space-4); }
.ky-survey__options { display: grid; grid-template-columns: 1fr; gap: var(--ky-space-2); margin-bottom: var(--ky-space-4); }
@media (min-width: 600px) { .ky-survey__options { grid-template-columns: 1fr 1fr; } }
.ky-survey__option {
    display: flex; align-items: center; gap: var(--ky-space-3);
    padding: var(--ky-space-3) var(--ky-space-4);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-md);
    cursor: pointer;
    transition: border-color 0.2s var(--ky-ease), background 0.2s var(--ky-ease);
}
.ky-survey__option:hover { border-color: var(--ky-border-strong); background: rgba(255,255,255,0.04); }
.ky-survey__option input { accent-color: var(--ky-primary-400); }
.ky-survey__option span { font-size: 0.92rem; }

/* ---- Retention offer ---- */
.ky-retain {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(89, 155, 255, 0.12));
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--ky-radius-xl);
    padding: var(--ky-space-6);
    margin-bottom: var(--ky-space-5);
    position: relative;
    overflow: hidden;
}
.ky-retain::before {
    content: "";
    position: absolute;
    top: -50%; right: -10%;
    width: 24rem; height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.25), transparent 65%);
    filter: blur(40px);
    pointer-events: none;
}
.ky-retain > * { position: relative; z-index: 1; }
.ky-retain__badge {
    display: inline-block;
    background: var(--ky-accent);
    color: #04240f;
    padding: 4px var(--ky-space-3);
    border-radius: var(--ky-radius-pill);
    font-size: 0.75rem;
    font-weight: var(--ky-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ky-space-3);
}
.ky-retain__title { font-size: 1.25rem; font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-2); }
.ky-retain__text { color: var(--ky-text-muted); margin-bottom: var(--ky-space-4); line-height: 1.55; }
.ky-retain__actions { display: flex; gap: var(--ky-space-2); flex-wrap: wrap; }

/* ---- Use cases (segmentos) ---- */
.ky-usecases { display: grid; grid-template-columns: 1fr; gap: var(--ky-space-4); }
@media (min-width: 768px) { .ky-usecases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ky-usecases { grid-template-columns: repeat(4, 1fr); } }
.ky-usecase {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-5);
    transition: transform 0.3s var(--ky-ease), border-color 0.3s var(--ky-ease), box-shadow 0.3s var(--ky-ease);
}
.ky-usecase:hover { transform: translateY(-4px); border-color: rgba(89, 155, 255, 0.4); box-shadow: var(--ky-shadow-md); }
.ky-usecase__icon {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--ky-radius-md);
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.20), rgba(139, 92, 246, 0.20));
    border: 1px solid rgba(89, 155, 255, 0.32);
    color: var(--ky-primary-300);
    margin-bottom: var(--ky-space-3);
}
.ky-usecase__icon svg { width: 22px; height: 22px; }
.ky-usecase__title { font-size: 1.05rem; font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-2); }
.ky-usecase__text { color: var(--ky-text-muted); font-size: 0.92rem; margin: 0; line-height: 1.55; }

/* ---- Before/After comparison ---- */
.ky-ba {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ky-space-4);
    margin: var(--ky-space-6) 0;
}
@media (min-width: 768px) { .ky-ba { grid-template-columns: 1fr 1fr; } }
.ky-ba__col {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-5);
    position: relative;
    overflow: hidden;
}
.ky-ba__col--before { border-color: rgba(248, 113, 113, 0.32); }
.ky-ba__col--after { border-color: rgba(34, 197, 94, 0.4); background: linear-gradient(180deg, rgba(34, 197, 94, 0.05), rgba(0,0,0,0.20)); }
.ky-ba__tag {
    display: inline-block;
    padding: 4px var(--ky-space-3);
    border-radius: var(--ky-radius-pill);
    font-size: 0.7rem;
    font-weight: var(--ky-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--ky-space-3);
}
.ky-ba__col--before .ky-ba__tag { background: rgba(248, 113, 113, 0.14); color: var(--ky-error); }
.ky-ba__col--after .ky-ba__tag { background: rgba(34, 197, 94, 0.18); color: var(--ky-accent-400); }
.ky-ba__title { font-size: 1.1rem; font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-3); }
.ky-ba__list { list-style: none; padding: 0; margin: 0; }
.ky-ba__list li { padding: var(--ky-space-2) 0; padding-left: var(--ky-space-5); position: relative; color: var(--ky-text-muted); font-size: 0.92rem; }
.ky-ba__list li::before {
    position: absolute;
    left: 0; top: 50%; transform: translateY(-50%);
    font-weight: var(--ky-fw-bold);
}
.ky-ba__col--before .ky-ba__list li::before { content: "✗"; color: var(--ky-error); }
.ky-ba__col--after .ky-ba__list li::before { content: "✓"; color: var(--ky-accent-400); }

/* ---- Templates showcase ---- */
.ky-templates { display: grid; grid-template-columns: 1fr; gap: var(--ky-space-4); }
@media (min-width: 600px) { .ky-templates { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ky-templates { grid-template-columns: repeat(3, 1fr); } }
.ky-template {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    overflow: hidden;
    transition: transform 0.3s var(--ky-ease), border-color 0.3s var(--ky-ease);
}
.ky-template:hover { transform: translateY(-4px); border-color: rgba(89, 155, 255, 0.4); }
.ky-template__preview {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.12), rgba(139, 92, 246, 0.12));
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--ky-border);
    position: relative;
    overflow: hidden;
}
.ky-template__preview svg { width: 48px; height: 48px; color: var(--ky-primary-300); }
.ky-template__body { padding: var(--ky-space-4); }
.ky-template__cat { font-size: 0.7rem; color: var(--ky-accent-400); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--ky-fw-semibold); }
.ky-template__title { font-size: 1.05rem; font-weight: var(--ky-fw-bold); margin: 4px 0 var(--ky-space-2); }
.ky-template__desc { font-size: 0.85rem; color: var(--ky-text-muted); margin: 0 0 var(--ky-space-3); line-height: 1.5; }
.ky-template__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--ky-space-2); padding-top: var(--ky-space-3); border-top: 1px solid var(--ky-border); }
.ky-template__author { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ky-text-muted); }
.ky-template__avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--ky-grad-brand); display: inline-grid; place-items: center; font-size: 0.65rem; font-weight: var(--ky-fw-bold); color: #fff; }
.ky-template__install { padding: 4px var(--ky-space-3); background: rgba(89, 155, 255, 0.14); border: 1px solid rgba(89, 155, 255, 0.32); border-radius: var(--ky-radius-pill); font-size: 0.78rem; font-weight: var(--ky-fw-semibold); color: var(--ky-primary-300); cursor: pointer; transition: background 0.2s var(--ky-ease); }
.ky-template__install:hover { background: rgba(89, 155, 255, 0.24); }

/* ---- Blog/Changelog teaser ---- */
.ky-news { display: grid; grid-template-columns: 1fr; gap: var(--ky-space-4); }
@media (min-width: 768px) { .ky-news { grid-template-columns: repeat(3, 1fr); } }
.ky-news__card {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-5);
    text-decoration: none;
    color: var(--ky-text);
    display: flex; flex-direction: column; gap: var(--ky-space-3);
    transition: transform 0.3s var(--ky-ease), border-color 0.3s var(--ky-ease);
}
.ky-news__card:hover { transform: translateY(-3px); border-color: rgba(89, 155, 255, 0.4); text-decoration: none; color: var(--ky-text); }
.ky-news__cat { font-size: 0.7rem; color: var(--ky-primary-300); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--ky-fw-semibold); }
.ky-news__title { font-size: 1.05rem; font-weight: var(--ky-fw-bold); margin: 0; line-height: 1.35; }
.ky-news__excerpt { font-size: 0.88rem; color: var(--ky-text-muted); margin: 0; line-height: 1.55; }
.ky-news__meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--ky-text-faint); margin-top: auto; padding-top: var(--ky-space-3); border-top: 1px solid var(--ky-border); }

/* ---- Testimonials per-tier (pricing) ---- */
.ky-tier-quote {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-5);
    text-align: center;
}
.ky-tier-quote__tier { font-size: 0.75rem; color: var(--ky-primary-300); text-transform: uppercase; letter-spacing: 0.1em; font-weight: var(--ky-fw-bold); margin-bottom: var(--ky-space-2); }
.ky-tier-quote__text { color: var(--ky-text); font-size: 1rem; margin-bottom: var(--ky-space-3); line-height: 1.55; font-style: italic; }
.ky-tier-quote__author { display: inline-flex; align-items: center; gap: var(--ky-space-2); }
.ky-tier-quote__author-name { font-weight: var(--ky-fw-semibold); font-size: 0.92rem; }
.ky-tier-quote__author-role { color: var(--ky-text-muted); font-size: 0.82rem; }

/* ---- Syntax highlight (override para Prism-like themes) ---- */
pre[class*="language-"], code[class*="language-"] {
    font-family: var(--ky-font-mono);
    font-size: 0.88rem;
    line-height: 1.65;
    text-shadow: none;
    background: transparent;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6B7689; font-style: italic; }
.token.punctuation { color: #9CA9BD; }
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #A78BFA; }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #4ADE80; }
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #599BFF; }
.token.atrule, .token.attr-value, .token.keyword { color: #F472B6; }
.token.function, .token.class-name { color: #FBBF24; }
.token.regex, .token.important, .token.variable { color: #FBBF24; }

/* ---- Docs TOC (sidebar direita) ---- */
.ky-docs__toc {
    display: none;
}
@media (min-width: 1200px) {
    .ky-docs__toc {
        display: block;
        position: fixed;
        top: calc(var(--ky-header-h) + var(--ky-space-6));
        right: var(--ky-space-5);
        width: 200px;
        max-height: calc(100vh - var(--ky-header-h) - var(--ky-space-10));
        overflow-y: auto;
        font-size: 0.82rem;
    }
}
.ky-docs__toc-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ky-text-faint);
    font-weight: var(--ky-fw-bold);
    margin-bottom: var(--ky-space-2);
}
.ky-docs__toc ul { list-style: none; padding: 0; margin: 0; }
.ky-docs__toc a {
    display: block;
    padding: 4px 0;
    color: var(--ky-text-muted);
    border-left: 2px solid transparent;
    padding-left: var(--ky-space-3);
    margin-left: -2px;
    transition: color 0.2s var(--ky-ease), border-color 0.2s var(--ky-ease);
    font-size: 0.82rem;
    line-height: 1.4;
}
.ky-docs__toc a:hover { color: var(--ky-text); text-decoration: none; }
.ky-docs__toc a.is-active { color: var(--ky-primary-300); border-left-color: var(--ky-primary-400); font-weight: var(--ky-fw-semibold); }

/* ---- Confetti canvas (full-screen, não bloqueia) ---- */
.ky-confetti-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1200;
}

/* ---- Recommended plan badge (pricing) ---- */
.ky-plan__rec {
    position: absolute;
    top: calc(-1 * var(--ky-space-3) - 4px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--ky-accent), var(--ky-primary-400));
    color: #04240f;
    padding: 4px var(--ky-space-4);
    border-radius: var(--ky-radius-pill);
    font-size: 0.7rem;
    font-weight: var(--ky-fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    box-shadow: var(--ky-glow-primary);
    z-index: 1;
}

/* ---- Status badge (footer) ---- */
.ky-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px var(--ky-space-3);
    background: rgba(34, 197, 94, 0.10);
    border: 1px solid rgba(34, 197, 94, 0.32);
    border-radius: var(--ky-radius-pill);
    color: var(--ky-accent-400);
    font-size: 0.8rem;
    font-weight: var(--ky-fw-semibold);
    text-decoration: none;
}
.ky-status:hover { background: rgba(34, 197, 94, 0.18); color: var(--ky-accent-400); text-decoration: none; }
.ky-status__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ky-accent-400);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    animation: kyStatusPulse 2s ease-in-out infinite;
}
@keyframes kyStatusPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---- Breadcrumbs ---- */
.ky-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ky-space-2);
    font-size: 0.85rem;
    color: var(--ky-text-muted);
    padding: var(--ky-space-3) 0;
}
.ky-crumbs a { color: var(--ky-text-muted); text-decoration: none; }
.ky-crumbs a:hover { color: var(--ky-primary-300); }
.ky-crumbs__sep { color: var(--ky-text-faint); }
.ky-crumbs__current { color: var(--ky-text); font-weight: var(--ky-fw-medium); }

/* ---- Changelog link in docs sections ---- */
.ky-docs__edit {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem;
    color: var(--ky-text-faint);
    margin-top: var(--ky-space-4);
    text-decoration: none;
}
.ky-docs__edit:hover { color: var(--ky-primary-300); text-decoration: none; }
.ky-docs__edit svg { width: 12px; height: 12px; }

/* ---- Reduced motion respeito global ---- */
@media (prefers-reduced-motion: reduce) {
    .ky-cookie, .ky-sticky-cta, .ky-totop, .ky-toast { transition: none; }
    .ky-mega__panel, .ky-mega__trigger svg { transition: none; }
    .ky-faq__a, .ky-faq__icon, .ky-cmdk, .ky-cmdk-backdrop { transition: none; }
    [data-reveal] { transition: none; }
}