/* =========================================================================
   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;

    /* ---- Paridade do protótipo (docs/LandPageDocs/Prototipo/src/index.css) ----
       Nomes verbatim do protótipo para que as seções portadas (Hero, Metrics,
       Journey, ky-fab, etc.) casem 1:1 com o CSS-in-JS original. Coexistem com
       os tokens --ky-* acima; não os substituem. */
    --bg:            #0B1120;
    --bg-2:          #0F1929;
    --bg-card:       #131E30;
    --bg-card-2:     #1A2740;
    --primary:       #3377FF;
    --primary-400:   #599BFF;
    --primary-600:   #1A5CE8;
    --violet:        #8B5CF6;
    --violet-400:    #A78BFA;
    --green:         #22C55E;
    --green-400:     #4ADE80;
    --amber:         #F59E0B;
    --text:          #F1F5F9;
    --muted:         #8B9AB4;
    --muted-2:       #5D6D85;
    --border:        rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.13);
    --border-blue:   rgba(51, 119, 255, 0.28);
    --radius:        10px;
    --radius-lg:     16px;
    --radius-xl:     24px;
    --nav-h:         72px;
    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================= Base ========================= */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Âncoras não ficam sob o nav fixo (REQ-006) */
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

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; }

#conteudo:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto !important; }
    /* Scroll-reveal mostra o estado final estático (REQ-004) */
    [data-reveal],
    [data-reveal-group] > * { opacity: 1 !important; transform: none !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 ========================= */
/* padding-top compensa o header fixo (.ky-lp-header, altura --nav-h) */
.site-main { flex: 1 0 auto; width: 100%; padding-top: var(--nav-h); }

/* ========================= 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); }
/* Marca em UMA linha: logo + frase à esquerda, selo de status empurrado ao canto direito. */
.site-footer__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--ky-space-4) var(--ky-space-5); flex-wrap: wrap; }
.site-footer__brand-id { display: flex; align-items: center; gap: var(--ky-space-4); flex-wrap: wrap; min-width: 0; }
.site-footer__tagline { margin: 0; max-width: 40rem; color: var(--ky-text-muted); }
.ky-brand--footer { margin-bottom: 0; flex-shrink: 0; }
.site-footer__bottom {
    margin-top: var(--ky-space-6);
    padding-top: var(--ky-space-4);
    border-top: 1px solid var(--ky-border);
    color: var(--ky-text-faint);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ky-space-3);
    text-align: center;
}
@media (min-width: 768px) {
    .site-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
.site-footer__legal { display: flex; gap: var(--ky-space-5); }
.site-footer__legal a { color: var(--ky-text-faint); }
.site-footer__legal a:hover { color: var(--ky-primary-300); }

/* Coluna de navegação de produto (linkagem interna crawlável — /compras, /docs, /contato-comercial). */
.site-footer__nav { display: flex; flex-direction: column; gap: var(--ky-space-3); }
.site-footer__nav-title {
    font-size: var(--ky-fs-xs, 0.8125rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ky-text-faint);
}
.site-footer__nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ky-space-3) var(--ky-space-5); }
.site-footer__nav-list a { color: var(--ky-text-muted); }
.site-footer__nav-list a:hover { color: var(--ky-primary-300); }

/* =========================================================================
   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;
    /* minmax(0, 1fr) (não "1fr" = minmax(auto,1fr)): permite a coluna encolher abaixo do
       min-content de um descendente largo, evitando overflow horizontal no mobile. */
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-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; }


/* ---- 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);
    /* Tokens longos sem espaço (URLs, mcp__kyroon__*, KYROON_WORKSPACE_ID) quebram em vez
       de empurrar a largura da página no mobile. */
    overflow-wrap: break-word;
}
/* No mobile o content é uma única coluna do grid. O "margin: 0 auto" faz um grid item
   dimensionar pelo max-content (linha mais longa) em vez de esticar — o que estourava a
   largura. Forçar width/max-width 100% cola o content na coluna. Desktop mantém 60rem centrado. */
@media (max-width: 991.98px) {
    .ky-docs__content { width: 100%; max-width: 100%; }
}
@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 do /docs (<details> nativo) ----
   Escopado em .ky-docs (especificidade 0,2,0) para NÃO herdar o acordeão JS do Pricing
   (.ky-faq, 0,1,0), que colapsa a resposta via `max-height: 0` — o que cortava o conteúdo
   do <details> nativo (sem JS que reajuste a altura). Aqui o próprio <details> controla
   abrir/fechar, então a resposta fica com altura automática. */
.ky-docs .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-docs .ky-faq__q {
    cursor: pointer;
    padding: var(--ky-space-4);
    font-weight: var(--ky-fw-semibold);
    color: var(--ky-text);
    display: list-item;
    list-style: revert;
}
.ky-docs .ky-faq__q:hover { background: var(--ky-glass-strong); }
.ky-docs .ky-faq__a { max-height: none; overflow: visible; padding: 0 var(--ky-space-4) var(--ky-space-4); color: var(--ky-text-muted); }
.ky-docs .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;
}

/* ---- 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__eyebrow {
    display: inline-block;
    margin-bottom: var(--ky-space-3);
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ky-primary-300);
}
.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: none; }

/* ---- Reveal em grupo: filhos entram em cascata (stagger) — REQ-003 ---- */
[data-reveal-group] > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s var(--ky-ease), transform 0.6s var(--ky-ease);
    will-change: opacity, transform;
}
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.04s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.20s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.28s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.36s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.44s; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 0.52s; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 0.60s; }

/* ---- Utilitários de hover (paridade protótipo — REQ-030..046) ---- */
.u-lift { transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease); }
.u-lift:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.u-row { transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.u-row:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-blue); }

/* ---- Nav link com sublinhado animado + estado ativo (REQ-010/011) ---- */
.nav-link { position: relative; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s var(--ease); }
.nav-link::after {
    content: '';
    position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%;
    background: var(--primary-400); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.25s var(--ease);
}
.nav-link:hover, .nav-link[aria-current="true"] { color: var(--text); text-decoration: none; }
.nav-link:hover::after, .nav-link[aria-current="true"]::after { transform: scaleX(1); }

/* ---- Landing navbar fixa (REQ-010..012) — paridade Nav.jsx ---------------- */
.ky-lp-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-h);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.ky-lp-header.is-scrolled {
    background: rgba(11, 17, 32, 0.92);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom-color: var(--border);
}
.ky-lp-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ky-space-4);
}
.ky-lp-brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.ky-lp-brand img { display: block; height: 32px; width: auto; }
.ky-lp-brand:hover { text-decoration: none; }

.ky-lp-nav { display: flex; align-items: center; gap: 36px; flex: 1; justify-content: center; }

/* Hambúrguer (só mobile) */
.ky-lp-burger {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 38px; padding: 0 10px;
    background: none; border: 1px solid var(--border-strong);
    border-radius: 8px; cursor: pointer; flex-shrink: 0;
}
.ky-lp-burger__bar { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.ky-lp-burger[aria-expanded="true"] .ky-lp-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ky-lp-burger[aria-expanded="true"] .ky-lp-burger__bar:nth-child(2) { opacity: 0; }
.ky-lp-burger[aria-expanded="true"] .ky-lp-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown mobile */
.ky-lp-mobile {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    z-index: 999;
    background: rgba(11, 17, 32, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    padding: 16px clamp(20px, 5vw, 80px) 24px;
    display: flex; flex-direction: column;
}
.ky-lp-mobile[hidden] { display: none; }
.ky-lp-mobile__link { padding: 14px 0; font-size: 16px; border-bottom: 1px solid var(--border); }
.ky-lp-mobile__link::after { display: none; } /* underline animado não faz sentido em lista vertical */
.ky-lp-mobile__link:last-child { border-bottom: none; }

@media (max-width: 767.98px) {
    .ky-lp-nav { display: none; }
    .ky-lp-burger { display: flex; }
}
@media (min-width: 768px) {
    .ky-lp-mobile { display: none !important; }
}

/* ---- Screen-reader only (a11y — REQ-002) ---- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Separador entre seções (REQ-005) — exceto logo após um divisor de capítulo ---- */
.ky-section { border-top: 1px solid var(--border); }
.chapter-divider + .ky-section { border-top: none; }

/* ---- 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; }

/* ---- 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); }
}


/* ---- 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 ---- */
/* ---- FAQ base (accordion single-column) — usado por Pricing (.ky-faq) e compat ---- */
.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); }

/* ---- FAQ por temas (REQ-044) — landing home: 2 colunas por tema, cabeçalho colorido,
   accordion acessível via atributo `hidden`. Escopado em .ky-faq--themes p/ NÃO afetar Pricing/Docs. ---- */
.ky-faq--themes {
    display: grid; grid-template-columns: 1fr;
    gap: var(--ky-space-6) var(--ky-space-8);
    max-width: 65rem; align-items: start;
}
@media (min-width: 900px) { .ky-faq--themes { grid-template-columns: 1fr 1fr; } }
.ky-faq__group-head {
    display: flex; align-items: center; gap: var(--ky-space-2);
    margin-bottom: var(--ky-space-2); padding-bottom: var(--ky-space-2);
    border-bottom: 2px solid var(--fc, var(--ky-primary-400));
}
.ky-faq__group-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fc, var(--ky-primary-400)); flex-shrink: 0; }
.ky-faq__group-title {
    margin: 0; font-size: 0.66rem; font-weight: var(--ky-fw-extrabold, 800);
    color: var(--fc, var(--ky-primary-400)); letter-spacing: 0.02em;
}
.ky-faq--themes .ky-faq__item {
    background: transparent; border: 0; border-bottom: 1px solid var(--ky-border);
    border-radius: 0; overflow: visible; transition: none;
}
.ky-faq--themes .ky-faq__q-wrap { margin: 0; }
.ky-faq--themes .ky-faq__q { padding: var(--ky-space-4) 0; line-height: 1.4; font-size: 0.8rem; }
.ky-faq--themes .ky-faq__q:hover { color: var(--ky-primary-200); }
.ky-faq--themes .ky-faq__icon {
    background: transparent; border: 1px solid var(--ky-border-strong); color: var(--ky-text-muted);
    transition: transform 0.25s var(--ky-ease), color 0.25s var(--ky-ease), border-color 0.25s var(--ky-ease);
}
.ky-faq--themes .ky-faq__q[aria-expanded="true"] .ky-faq__icon {
    transform: rotate(45deg);
    color: var(--fc, var(--ky-primary-300));
    border-color: var(--fc, var(--ky-primary-300));
}
.ky-faq--themes .ky-faq__a { max-height: none; overflow: visible; transition: none; }
.ky-faq--themes .ky-faq__a[hidden] { display: none; }
.ky-faq--themes .ky-faq__a-inner { padding: 0 0 var(--ky-space-4); font-size: 0.72rem; line-height: 1.75; }
/* Título da seção FAQ reduzido ~20% (escopo #faq — não afeta os demais títulos de seção) */
#faq .ky-section__title { font-size: 1.5rem; }

/* ---- 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; }

/* ---- Planos e Licenciamento (grade institucional de 3 planos reais) ----
   Inspirado nos cards da seção "Adoção progressiva" (.ky-ob__card): acento --sc por plano,
   borda-topo colorida, glow suave e marcadores na cor do plano. */
/* 1 coluna (empilhado) até 992px, depois 3 colunas numa única linha — evita o estágio de 2 colunas
   em que o 3º card cai sozinho na 2ª linha e desalinha os botões. */
.ky-plans-grid--3 { max-width: 68rem; grid-template-columns: 1fr; gap: var(--ky-space-6); align-items: stretch; }
@media (min-width: 992px) { .ky-plans-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.ky-plan--tier {
    --sc: var(--primary-400);
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: left;
    /* Inset de 15% da largura do card em todas as bordas (padding % é sempre relativo à largura) */
    padding: 15%;
    border-top: 3px solid var(--sc);
    box-shadow: 0 0 20px color-mix(in srgb, var(--sc) 8%, transparent);
    transition: transform var(--ky-motion-base) var(--ky-ease), box-shadow var(--ky-motion-base) var(--ky-ease), border-color var(--ky-motion-base) var(--ky-ease);
}
.ky-plan--tier:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--sc) 40%, transparent);
    border-top-color: var(--sc);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--sc) 55%, transparent);
}
.ky-plan--tier.ky-plan--featured {
    border-color: color-mix(in srgb, var(--sc) 45%, transparent);
    border-top-color: var(--sc);
    background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 12%, transparent), var(--ky-glass));
    box-shadow: 0 0 32px -6px color-mix(in srgb, var(--sc) 40%, transparent);
}

/* Bloco de cabeçalho uniforme (nome + assentos + descrição) — centralizado; mantém preço/CTA alinhados entre cards */
.ky-plan__head { margin-bottom: var(--ky-space-5); text-align: center; }
.ky-plan--tier .ky-plan__name { text-align: center; margin: 0 0 var(--ky-space-1); font-size: var(--ky-fs-h3); font-weight: var(--ky-fw-bold); }
.ky-plan__seats { font-size: 0.8rem; color: var(--ky-text-muted); margin: 0; text-align: center; }
.ky-plan--tier .ky-plan__benefit { text-align: center; color: var(--ky-text-muted); font-size: 0.9rem; line-height: 1.5; margin: var(--ky-space-3) 0 0; min-height: 2.7em; }

/* Preço (amount grande + período discreto abaixo) — centralizado */
.ky-plan--tier .ky-plan__price { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0 0 var(--ky-space-5); }
.ky-plan--tier .ky-plan__amount { font-size: var(--ky-fs-h2); font-weight: var(--ky-fw-extrabold); line-height: 1.1; color: var(--ky-text); }
.ky-plan--tier .ky-plan__period { font-size: var(--ky-fs-caption); color: var(--ky-text-muted); }

/* CTA acima da lista (padrão da referência) */
.ky-plan__cta { width: 100%; justify-content: center; margin: 0; margin-top: auto; white-space: nowrap; }
.ky-plan--tier:hover .ky-plan__cta { border-color: color-mix(in srgb, var(--sc) 55%, transparent); }

/* Divisor + rótulo + lista de recursos */
.ky-plan__features-label { font-size: 0.72rem; font-weight: var(--ky-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ky-text-faint); margin: 0 0 var(--ky-space-3); padding-top: var(--ky-space-4); border-top: 1px solid var(--ky-border); }
.ky-plan__features { list-style: none; padding: 0; margin: 0 0 var(--ky-space-6); display: flex; flex-direction: column; gap: var(--ky-space-2); }
.ky-plan__features li { display: flex; align-items: flex-start; gap: var(--ky-space-2); color: var(--ky-text-muted); font-size: 0.9rem; line-height: 1.5; }
.ky-plan__check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--sc); }

/* ---- Matriz comparativa de planos (tabela real; classe própria p/ não colidir com .ky-compare grid) ---- */
.ky-pricing-matrix {
    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-pricing-matrix 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-pricing-matrix thead th:first-child { text-align: left; color: var(--ky-text-muted); font-weight: var(--ky-fw-medium); font-size: 0.85rem; }
.ky-pricing-matrix thead th.is-featured { color: var(--ky-primary-300); position: relative; }
.ky-pricing-matrix thead th.is-featured::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--ky-grad-text);
}
.ky-pricing-matrix tbody th,
.ky-pricing-matrix 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;
    font-weight: var(--ky-fw-regular);
}
.ky-pricing-matrix tbody tr:last-child th,
.ky-pricing-matrix tbody tr:last-child td { border-bottom: none; }
.ky-pricing-matrix tbody th[scope="row"] { text-align: left; color: var(--ky-text); font-weight: var(--ky-fw-medium); }
.ky-pricing-matrix tbody td.is-check { color: var(--ky-accent-400); }
.ky-pricing-matrix tbody td.is-x { color: var(--ky-text-faint); }
.ky-pricing-matrix 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); max-width: 64rem; margin: 0 auto; }
@media (min-width: 768px) { .ky-usecases { grid-template-columns: repeat(2, 1fr); } }
.ky-usecase {
    display: flex; gap: var(--ky-space-4);
    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: color-mix(in srgb, var(--uc, var(--ky-primary-400)) 45%, transparent); box-shadow: var(--ky-shadow-md); }
.ky-usecase__emoji { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.ky-usecase__body { min-width: 0; }
.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.7; }

/* ---- 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; }

/* ---- 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-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; }
}

/* =========================================================================
   Tela de Contato Comercial (/contato-comercial)
   ========================================================================= */

/* Layout principal */
.ky-contact__hero { padding-bottom: var(--ky-space-6); }
.ky-contact { padding-top: var(--ky-space-4); }

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

/* Formulário */
.ky-contact__form-wrap { min-width: 0; }
.ky-contact__errors { max-width: 100%; margin-bottom: var(--ky-space-5); }
.ky-contact__errors.validation-summary-valid { display: none; }
.ky-contact__errors.validation-summary-errors {
    padding: var(--ky-space-4) var(--ky-space-5);
    border-radius: var(--ky-radius);
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--ky-error);
}
.ky-contact__form { display: flex; flex-direction: column; gap: var(--ky-space-5); }

/* Honeypot: visualmente oculto, acessível */
.ky-contact__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Linhas com 2 colunas */
.ky-form-row { display: flex; flex-direction: column; gap: var(--ky-space-5); }
@media (min-width: 640px) {
    .ky-form-row--2col { flex-direction: row; }
    .ky-form-row--2col .ky-form-field { flex: 1 1 0; }
}

/* Campos */
.ky-form-field { display: flex; flex-direction: column; gap: var(--ky-space-1); }
.ky-form-label {
    font-size: var(--ky-fs-caption);
    font-weight: var(--ky-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ky-text-muted);
}
.ky-form-label-hint { font-weight: var(--ky-fw-regular); text-transform: none; color: var(--ky-text-faint); }
.ky-form-required { color: var(--ky-error); }

.ky-form-input,
.ky-form-select,
.ky-form-textarea {
    width: 100%;
    padding: var(--ky-space-3) var(--ky-space-4);
    border-radius: var(--ky-radius-sm);
    border: 1px solid var(--ky-border-strong);
    background: var(--ky-glass);
    color: var(--ky-text);
    font-family: var(--ky-font-sans);
    font-size: var(--ky-fs-body);
    line-height: var(--ky-lh-base);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.ky-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA9BD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ky-space-3) center;
    background-size: 1rem;
    padding-right: var(--ky-space-8);
    cursor: pointer;
}
.ky-form-select option { background: #1a1a2e; color: var(--ky-text); }
.ky-form-textarea { resize: vertical; min-height: 7rem; }

.ky-form-input::placeholder,
.ky-form-textarea::placeholder { color: var(--ky-text-faint); }

.ky-form-input:focus,
.ky-form-select:focus,
.ky-form-textarea:focus {
    border-color: var(--ky-primary-400);
    box-shadow: 0 0 0 3px rgba(89, 155, 255, 0.20);
}
.ky-form-input.is-invalid,
.ky-form-select.is-invalid,
.ky-form-textarea.is-invalid {
    border-color: var(--ky-error);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

.ky-form-hint { font-size: var(--ky-fs-caption); color: var(--ky-text-faint); }
.ky-form-error {
    font-size: var(--ky-fs-caption);
    color: var(--ky-error);
    font-weight: var(--ky-fw-medium);
}
.ky-form-error:empty { display: none; }

/* Submit */
.ky-contact__submit { display: flex; flex-direction: column; gap: var(--ky-space-3); align-items: flex-start; }
.ky-contact__submit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ky-space-2);
    align-self: flex-end;
}
.ky-contact__submit-btn svg { width: 1rem; height: 1rem; }
.ky-contact__submit-note {
    display: flex;
    align-items: center;
    gap: var(--ky-space-2);
    font-size: var(--ky-fs-caption);
    color: var(--ky-text-faint);
    margin: 0;
}
.ky-contact__submit-note svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; color: var(--ky-accent); }

/* Estado de confirmação */
.ky-contact__confirm {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ky-space-5);
    padding: var(--ky-space-12) var(--ky-space-6);
    grid-column: 1 / -1;
}
.ky-contact__confirm-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ky-accent);
}
.ky-contact__confirm-icon svg { width: 2rem; height: 2rem; }
.ky-contact__confirm-title { font-size: var(--ky-fs-h2); font-weight: var(--ky-fw-bold); margin: 0; }
.ky-contact__confirm-text { color: var(--ky-text-muted); max-width: 32rem; margin: 0; }

/* Painel lateral */
.ky-contact__side { display: flex; flex-direction: column; gap: var(--ky-space-5); }

.ky-contact__value-card {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius);
    padding: var(--ky-space-6);
}
.ky-contact__side-title {
    font-size: var(--ky-fs-h3);
    font-weight: var(--ky-fw-semibold);
    margin-bottom: var(--ky-space-5);
}

.ky-contact__value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ky-space-5);
}
.ky-contact__value-list li {
    display: flex;
    gap: var(--ky-space-4);
    align-items: flex-start;
}
.ky-contact__value-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--ky-radius-sm);
    background: rgba(89, 155, 255, 0.12);
    border: 1px solid rgba(89, 155, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ky-primary-400);
}
.ky-contact__value-icon svg { width: 1rem; height: 1rem; }
.ky-contact__value-list strong { display: block; font-weight: var(--ky-fw-semibold); margin-bottom: var(--ky-space-1); }
.ky-contact__value-list p { margin: 0; color: var(--ky-text-muted); font-size: var(--ky-fs-caption); }

/* Canais alternativos */
.ky-contact__alt-channels {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius);
    padding: var(--ky-space-5);
}
.ky-contact__alt-title {
    font-size: var(--ky-fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ky-text-muted);
    margin-bottom: var(--ky-space-4);
}
.ky-contact__alt-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ky-space-4);
}
.ky-contact__alt-list li { display: flex; gap: var(--ky-space-3); align-items: center; }
.ky-contact__alt-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--ky-radius-sm);
    background: var(--ky-glass-strong);
    border: 1px solid var(--ky-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ky-text-muted);
}
.ky-contact__alt-icon svg { width: 0.875rem; height: 0.875rem; }
.ky-contact__alt-label { display: block; font-size: var(--ky-fs-caption); color: var(--ky-text-faint); }
.ky-contact__alt-list a { font-size: var(--ky-fs-body); }

/* Prova social */
.ky-contact__proof {
    background: var(--ky-glass);
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius);
    padding: var(--ky-space-5);
}
.ky-contact__proof-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ky-space-2);
    margin-bottom: var(--ky-space-3);
}
.ky-contact__proof-stat { text-align: center; }
.ky-contact__proof-value {
    display: block;
    font-size: var(--ky-fs-h3);
    font-weight: var(--ky-fw-extrabold);
    background: linear-gradient(135deg, var(--ky-primary-400), var(--ky-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ky-contact__proof-label { font-size: 0.7rem; color: var(--ky-text-faint); }
.ky-contact__proof-note { font-size: var(--ky-fs-caption); color: var(--ky-text-faint); text-align: center; margin: 0; }

/* ============================================================
   ky-cm — Contact modal (REQ-050 / DATA-001)
   ============================================================ */
body.ky-cm-lock { overflow: hidden; }

.ky-cm {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(16px, 6vh, 80px) 16px;
    overflow-y: auto;
}
.ky-cm[hidden] { display: none; }

.ky-cm__overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 10, 20, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ky-cm__dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: auto;
    background: var(--bg);
    border: 1px solid rgba(51, 119, 255, 0.3);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.ky-cm.is-open .ky-cm__dialog {
    animation: kyFadeInUp 0.35s var(--ease) both;
}

.ky-cm__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-strong);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--ease);
}
.ky-cm__close:hover { background: rgba(255, 255, 255, 0.12); }
.ky-cm__close svg { width: 18px; height: 18px; }

.ky-cm__eyebrow { margin-bottom: 12px; }
.ky-cm__title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin: 0 0 10px; }
.ky-cm__lead { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin: 0 0 24px; }
.ky-cm__lead strong { color: var(--text); }

.ky-cm__error { margin-bottom: 16px; }

.ky-cm__form { display: flex; flex-direction: column; gap: 0.875rem; }
.ky-cm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem; }
@media (max-width: 520px) { .ky-cm__row { grid-template-columns: 1fr; } }

/* Honeypot: fora da tela mas acessível (não display:none) */
.ky-cm__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Campos de formulário (usados pelo _ContactModal global e pela página de contato).
   Movido do <style> inline da Home para cá para que o modal fique estilizado em TODAS as páginas. */
.ky-form__group { display: flex; flex-direction: column; gap: .3rem; }
.ky-form__label { font-size: .78rem; font-weight: 700; color: #9CA9BD; }
.ky-form__req { color: #F87171; margin-left: .15rem; }
.ky-form__input, .ky-form__select, .ky-form__textarea {
    width: 100%; padding: .65rem .875rem;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: .5rem; color: #F8FAFC; font-size: .875rem; font-family: inherit;
    box-sizing: border-box;
}
.ky-form__input:focus, .ky-form__select:focus, .ky-form__textarea:focus { outline: 2px solid #3377FF; border-color: transparent; }
.ky-form__select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA9BD' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .875rem center; }
.ky-form__select option { background: #1a1f2e; color: #F8FAFC; }
.ky-form__textarea { resize: vertical; min-height: 100px; }
.ky-form__optional { color: var(--muted); font-weight: 400; }
.ky-form__hint { display: block; margin-top: 0.3rem; font-size: 0.78rem; color: var(--muted); }

/* ===== Seletor de país/DDI + telefone (form comercial) ===== */
.ky-phone { position: relative; display: flex; align-items: stretch;
    border: 1px solid var(--ky-border); border-radius: var(--ky-radius-sm);
    background: var(--ky-glass); transition: border-color var(--ky-motion-fast) ease, box-shadow var(--ky-motion-fast) ease; }
.ky-phone:focus-within { border-color: var(--ky-primary); box-shadow: 0 0 0 3px rgba(26, 86, 245, 0.25); }
.ky-phone.is-invalid,
.ky-phone:has(.ky-phone__number.is-invalid) { border-color: var(--ky-error); }

.ky-phone__country { display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.6rem; background: transparent; border: 0;
    border-right: 1px solid var(--ky-border); border-radius: var(--ky-radius-sm) 0 0 var(--ky-radius-sm);
    color: var(--ky-text); cursor: pointer; font: inherit; white-space: nowrap;
    transition: background var(--ky-motion-fast) ease; }
.ky-phone__country:hover { background: var(--ky-glass-strong); }
.ky-phone__flag.fi { width: 1.25rem; height: 0.9rem; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); flex: 0 0 auto; }
.ky-phone__dial { font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--ky-text); }
.ky-phone__caret { width: 1rem; height: 1rem; color: var(--ky-text-faint); flex: 0 0 auto; }
.ky-phone__country[aria-expanded="true"] .ky-phone__caret { transform: rotate(180deg); }

.ky-phone__number { flex: 1 1 auto; min-width: 0; background: transparent; border: 0;
    padding: 0.6rem 0.75rem; color: var(--ky-text); font: inherit; outline: none; }
.ky-phone__number::placeholder { color: var(--ky-text-faint); }

.ky-phone__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    display: flex; flex-direction: column; max-height: 288px; padding: 0.5rem;
    background: var(--ky-bg); border: 1px solid var(--ky-border-strong);
    border-radius: var(--ky-radius-md); box-shadow: var(--ky-shadow-lg); }
.ky-phone__panel[hidden] { display: none; }
.ky-phone__search-wrap { padding-bottom: 0.4rem; }
.ky-phone__search { width: 100%; padding: 0.5rem 0.6rem; background: var(--ky-glass);
    border: 1px solid var(--ky-border); border-radius: var(--ky-radius-sm);
    color: var(--ky-text); font: inherit; outline: none; }
.ky-phone__search:focus { border-color: var(--ky-primary); }
.ky-phone__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.ky-phone__opt { display: flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.55rem; border-radius: 8px; cursor: pointer; color: var(--ky-text); }
.ky-phone__opt:hover, .ky-phone__opt.is-active { background: var(--ky-glass-strong); }
.ky-phone__opt-name { flex: 1 1 auto; font-size: 0.9rem; }
.ky-phone__opt-dial { color: var(--ky-text-faint); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.ky-phone__empty { margin: 0; padding: 0.5rem 0.55rem; color: var(--ky-text-faint); font-size: 0.85rem; }

.ky-cm__submit { width: 100%; justify-content: center; margin-top: 0.25rem; }
.ky-cm__submit[disabled] { opacity: 0.7; cursor: progress; }

.ky-cm__note {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    margin: 0.25rem 0 0;
}
.ky-cm__note svg { width: 0.9rem; height: 0.9rem; color: #22C55E; flex-shrink: 0; }

/* Estado de sucesso */
.ky-cm__success { text-align: center; padding: 24px 12px; }
.ky-cm__success[hidden] { display: none; }
.ky-cm__success-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.14);
    color: #22C55E;
    margin-bottom: 16px;
}
.ky-cm__success-icon svg { width: 30px; height: 30px; }
.ky-cm__success-title { font-size: 1.35rem; margin: 0 0 8px; }
.ky-cm__success-text { color: var(--muted); font-size: 0.9rem; line-height: 1.7; margin: 0 0 24px; }

@media (prefers-reduced-motion: reduce) {
    .ky-cm.is-open .ky-cm__dialog { animation: none; }
}

/* ─── Floating Agent (mascote Kyroon) — REQ-051 ─── */
/* Fonte: docs/LandPageDocs/Prototipo/src/index.css (.ky-fab*) */
.ky-fab {
    position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px);
    z-index: 250; width: 94px; height: 94px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    text-decoration: none; cursor: pointer;
    transition: transform .25s var(--ease-spring);
}
.ky-fab:hover { transform: translateY(-4px) scale(1.08); }
/* Wrapper que flutua (só o robô, fundo transparente) */
.ky-fab__bot { position: relative; width: 100%; height: 100%; animation: fabFloat 3.4s ease-in-out infinite; }
.ky-fab:hover .ky-fab__bot { animation-duration: 1.8s; }
@keyframes fabFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
.ky-fab__img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
/* Conversa no hover — dois balões em sequência */
.ky-fab__chat {
    position: absolute; bottom: calc(100% + 12px); right: 4px; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    pointer-events: none;
}
.ky-fab__msg {
    background: var(--bg-card-2); color: var(--text); border: 1px solid var(--border-blue);
    padding: 9px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 18px rgba(51, 119, 255, .25);
    opacity: 0; transform: translateY(8px) scale(.96);
    transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.ky-fab__msg--2 { border-bottom-right-radius: 4px; position: relative; }
.ky-fab__msg--2::after {
    content: ''; position: absolute; right: 20px; bottom: -7px;
    width: 12px; height: 12px; background: var(--bg-card-2);
    border-right: 1px solid var(--border-blue); border-bottom: 1px solid var(--border-blue);
    transform: rotate(45deg);
}
.ky-fab:hover .ky-fab__msg, .ky-fab:focus-visible .ky-fab__msg { opacity: 1; transform: translateY(0) scale(1); }
.ky-fab:hover .ky-fab__msg--1, .ky-fab:focus-visible .ky-fab__msg--1 { transition-delay: .05s; }
.ky-fab:hover .ky-fab__msg--2, .ky-fab:focus-visible .ky-fab__msg--2 { transition-delay: .55s; }
/* Esconde o balão idle enquanto o mouse está sobre o robô */
.ky-fab:hover .ky-fab__say, .ky-fab:focus-visible .ky-fab__say { animation: none; opacity: 0; }
/* Balão de fala idle — some e aparece em loop */
.ky-fab__say {
    position: absolute; bottom: calc(100% + 12px); right: 4px;
    background: var(--bg-card-2); color: var(--text);
    border: 1px solid var(--border-blue);
    padding: 9px 14px; border-radius: 14px; border-bottom-right-radius: 4px;
    font-size: 13px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .45), 0 0 18px rgba(51, 119, 255, .25);
    pointer-events: none;
    animation: fabSay 8s ease-in-out infinite;
}
.ky-fab__say::after {
    content: ''; position: absolute; right: 20px; bottom: -7px;
    width: 12px; height: 12px; background: var(--bg-card-2);
    border-right: 1px solid var(--border-blue); border-bottom: 1px solid var(--border-blue);
    transform: rotate(45deg);
}
@keyframes fabSay {
    0%, 30% { opacity: 1; transform: translateY(0) scale(1); }
    40%, 80% { opacity: 0; transform: translateY(8px) scale(.94); }
    90%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
    .ky-fab { width: 76px; height: 76px; }
    .ky-fab__say { display: none; }
    .ky-fab__chat { display: none; }
}
/* Reduced-motion: robô estático, sem flutuação nem loop do balão */
@media (prefers-reduced-motion: reduce) {
    .ky-fab, .ky-fab__bot, .ky-fab__say, .ky-fab__msg { animation: none !important; transition: none !important; }
    .ky-fab:hover { transform: none; }
}

/* ============================================================
   TASK 5 — Hero 2-col (copy + mockup "Board in time") + Approval
   Gate interativo + faixa Metrics ao vivo (REQ-030 / REQ-031).
   Fonte: docs/LandPageDocs/Prototipo/src/components/Hero.jsx e Metrics.jsx
   ============================================================ */

/* ---- Hero split: copy à esquerda, mockup à direita ---- */
.ky-hero--split { text-align: left; }
.ky-hero--split::before { top: -20%; right: 4%; }
.ky-hero__grid-lines {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 45%, #000 30%, transparent 100%);
}
.ky-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ky-space-8);
    align-items: center;
}
@media (min-width: 992px) {
    .ky-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--ky-space-6); }
}
.ky-hero__copy { text-align: left; }
.ky-hero__copy .ky-hero__title { margin-bottom: var(--ky-space-5); }
/* h1 ~-20% vs o hero centralizado antigo */
.ky-hero--split .ky-hero__title { font-size: clamp(2.08rem, 4.4vw, 3.52rem); }
.ky-hero__copy .ky-hero__subtitle { max-width: 36rem; margin-left: 0; margin-right: 0; }
.ky-hero__copy .ky-hero__actions { justify-content: flex-start; }

/* ---- Dot verde "ao vivo" (badge do board + selo Metrics) ---- */
.ky-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ky-accent); flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
    animation: kyLivePulse 2s ease-in-out infinite;
}
.ky-live-dot--lg { width: 9px; height: 9px; }
@keyframes kyLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* ---- Mockup "Board in time" ---- */
.ky-hero__mockup { position: relative; z-index: 1; padding-bottom: var(--ky-space-6); }
.ky-board {
    position: relative; z-index: 1;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid var(--ky-border);
    border-radius: var(--ky-radius-lg);
    padding: var(--ky-space-5);
    box-shadow: var(--ky-shadow-lg);
    backdrop-filter: blur(10px);
}
.ky-board__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--ky-space-5); }
.ky-board__eyebrow { display: block; font-family: var(--ky-font-mono); font-size: 10px; color: var(--ky-text-faint); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.ky-board__title { font-weight: var(--ky-fw-extrabold); font-size: 1.125rem; color: var(--ky-text); }
.ky-board__badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.22);
    border-radius: var(--ky-radius-pill); padding: 5px 12px;
    font-size: 10px; color: var(--ky-accent-400); font-weight: var(--ky-fw-bold); letter-spacing: .1em;
}
.ky-board__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: var(--ky-space-5); }
.ky-board__stat { background: rgba(255,255,255,.04); border-radius: var(--ky-radius-sm); padding: 12px 10px; text-align: center; }
.ky-board__stat-val { display: block; font-family: var(--ky-font-mono); font-size: 1.375rem; font-weight: var(--ky-fw-extrabold); line-height: 1; }
.ky-board__stat-lbl { display: block; font-size: 11px; color: var(--ky-text-faint); margin-top: 5px; }

/* ---- Task list com barras animadas em loop ---- */
.ky-board__tasks { display: flex; flex-direction: column; gap: 8px; }
.ky-task {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-left: 3px solid #F59E0B;
    border-radius: 8px; padding: 11px 14px;
}
.ky-task__row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.ky-task__meta { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ky-task__id { font-family: var(--ky-font-mono); font-size: 10px; font-weight: var(--ky-fw-bold); color: #F59E0B; }
.ky-task__label { font-size: 13px; color: var(--ky-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ky-task__status { font-size: 11px; font-weight: var(--ky-fw-semibold); color: #F59E0B; white-space: nowrap; }
.ky-task__bar { height: 3px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.ky-task__bar-fill { display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, rgba(245,158,11,.5), #F59E0B); }
@media (prefers-reduced-motion: no-preference) {
    .ky-task__bar-fill { transition: width .2s linear, background .3s; }
    .ky-task__status { transition: color .3s; }
    .ky-task { transition: border-color .3s; }
}

/* ---- Approval Gate flutuante ---- */
.ky-gate {
    position: absolute; right: -8px; bottom: 0; z-index: 3;
    min-width: 236px; max-width: 260px;
    background: linear-gradient(180deg, rgba(20,22,34,.92), rgba(15,15,26,.92));
    border: 1px solid rgba(245,158,11,.32);
    border-radius: var(--ky-radius-md);
    padding: 16px 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,.5);
    backdrop-filter: blur(12px);
    animation: kyFloatCard 5s ease-in-out infinite;
}
.ky-gate.is-approved { border-color: rgba(34,197,94,.4); }
@media (max-width: 991px) {
    .ky-gate { position: relative; right: auto; bottom: auto; margin: var(--ky-space-5) auto 0; }
}
.ky-gate__label { font-size: 10px; color: #FCD34D; font-weight: var(--ky-fw-bold); letter-spacing: .08em; margin-bottom: 8px; }
.ky-gate__q { font-size: 13px; color: var(--ky-text); font-weight: var(--ky-fw-semibold); margin-bottom: 14px; line-height: 1.45; }
.ky-gate__actions { display: flex; gap: 8px; }
.ky-gate__btn { flex: 1; border: none; border-radius: 7px; padding: 8px 0; font-size: 12px; font-weight: var(--ky-fw-bold); font-family: inherit; cursor: pointer; }
.ky-gate__btn--approve { background: var(--ky-accent); color: #fff; }
.ky-gate__btn--review { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--ky-text); font-weight: var(--ky-fw-medium); }
.ky-gate__done-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ky-gate__check { width: 18px; height: 18px; border-radius: 50%; background: var(--ky-accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: var(--ky-fw-extrabold); flex-shrink: 0; }
.ky-gate__done-title { font-size: 11px; color: var(--ky-accent-400); font-weight: var(--ky-fw-extrabold); letter-spacing: .06em; }
.ky-gate__done-text { font-size: 12px; color: var(--ky-text); font-weight: var(--ky-fw-semibold); margin-bottom: 10px; line-height: 1.4; }
.ky-gate__prog { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; position: relative; }
.ky-gate__prog-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--ky-accent), var(--ky-accent-400), transparent); animation: kyGateIndeterminate 1.4s linear infinite; }
.ky-gate__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-family: var(--ky-font-mono); font-size: 10px; color: var(--ky-text-muted); }
.ky-gate__foot > span { display: inline-flex; align-items: center; gap: 6px; }
.ky-gate__back { background: none; border: none; color: var(--ky-text-muted); font-size: 10px; cursor: pointer; text-decoration: underline; font-family: inherit; }

@keyframes kyFloatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kyGateIndeterminate { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }

/* ---- Faixa Metrics ao vivo (REQ-031) ---- */
.ky-metrics-live {
    background: linear-gradient(90deg, rgba(51,119,255,.06) 0%, rgba(139,92,246,.05) 50%, rgba(34,197,94,.04) 100%);
    border-top: 1px solid var(--ky-border);
    border-bottom: 1px solid var(--ky-border);
}
.ky-metrics-live__badge { display: flex; justify-content: center; align-items: center; gap: 10px; padding: var(--ky-space-6) 0 var(--ky-space-5); font-family: var(--ky-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.ky-metrics-live__on { color: var(--ky-accent-400); font-weight: var(--ky-fw-bold); }
.ky-metrics-live__sep { color: var(--ky-text-muted); }
.ky-metrics-live__grid { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
.ky-metrics-live__item {
    flex: 1 1 180px;
    padding: 8px clamp(16px, 3vw, 36px) var(--ky-space-8);
    text-align: center; position: relative;
    border-right: 1px solid var(--ky-border);
}
.ky-metrics-live__item:last-child { border-right: none; }
@media (max-width: 720px) { .ky-metrics-live__item { flex-basis: 45%; } }
.ky-metrics-live__accent { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; border-radius: 1px; }
.ky-metrics-live__val { font-family: var(--ky-font-mono); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: var(--ky-fw-extrabold); line-height: 1; margin-bottom: 10px; letter-spacing: -.02em; }
.ky-metrics-live__body { margin: 0; }
.ky-metrics-live__label { display: block; font-weight: var(--ky-fw-bold); font-size: 14px; margin-bottom: 5px; color: var(--ky-text); }
.ky-metrics-live__ctx { display: block; color: var(--ky-text-muted); font-size: 13px; line-height: 1.5; }

/* Reduced-motion: mockup e faixa estáticos (barras cheias, sem loop) */
@media (prefers-reduced-motion: reduce) {
    .ky-live-dot, .ky-gate, .ky-gate__prog-bar, .ky-task__bar-fill { animation: none !important; transition: none !important; }
    .ky-gate__prog-bar { width: 100%; }
}

/* ==========================================================================
   S3 Problem (REQ-032) — 3 cards que piscam em loop na cor da borda;
   hover destaca só o card e pausa o loop. Porta components/Problem.jsx.
   ========================================================================== */
.ky-problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: var(--ky-space-8);
}
.ky-problem-card {
    --pc: var(--primary);
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--ky-radius-lg);
    padding: 32px;
    transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.25s var(--ease);
}
.ky-problem-card:hover { transform: translateY(-4px); }
.ky-problem-card.is-active {
    border-color: var(--pc);
    box-shadow: 0 0 30px color-mix(in srgb, var(--pc) 25%, transparent);
}
.ky-problem-card__num {
    position: absolute;
    top: -16px;
    right: 16px;
    font-family: var(--ky-font-mono);
    font-size: 7rem;
    font-weight: 900;
    color: var(--pc);
    opacity: 0.06;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
.ky-problem-card__accent {
    width: 36px;
    height: 3px;
    background: var(--pc);
    border-radius: 2px;
    margin-bottom: 24px;
}
.ky-problem-card__kicker {
    font-family: var(--ky-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--pc);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ky-problem-card__title { font-size: 1.05rem; margin-bottom: 14px; line-height: 1.4; }
.ky-problem-card__text { color: var(--muted); font-size: 14px; line-height: 1.75; margin-bottom: 24px; }
.ky-problem-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ky-problem-card__tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--ky-radius-pill);
    border: 1px solid color-mix(in srgb, var(--pc) 19%, transparent);
    background: color-mix(in srgb, var(--pc) 5%, transparent);
    color: var(--pc);
}
@media (max-width: 900px) { .ky-problem-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   NotACopilot / Posicionamento (REQ-033) — comparativo 3 colunas
   (Copiloto / Stack fragmentado / Kyroon). Porta components/NotACopilot.jsx.
   ========================================================================== */
.ky-notacopilot {
    padding: 108px 0;
    background:
        linear-gradient(180deg, var(--bg) 0%, #0a1020 50%, var(--bg) 100%),
        radial-gradient(ellipse 60% 60% at 50% 50%, rgba(51, 119, 255, 0.05) 0%, transparent 70%);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.ky-compare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}
.ky-compare__col {
    --cc: var(--primary);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: color-mix(in srgb, var(--cc) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent);
    border-top: 3px solid var(--cc);
    border-radius: var(--ky-radius-lg);
    padding: 28px 24px;
}
.ky-compare__col--featured {
    background: linear-gradient(145deg, rgba(51, 119, 255, 0.10), rgba(139, 92, 246, 0.07));
    border-color: rgba(51, 119, 255, 0.45);
}
.ky-compare__badge {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 16px;
    border-radius: 0 0 8px 8px;
}
.ky-compare__type {
    font-family: var(--ky-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--cc);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ky-compare__desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }
.ky-compare__group-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ky-compare__group-label--covers { color: var(--green-400); }
.ky-compare__group-label--not { color: #F87171; }
.ky-compare__list { display: flex; flex-direction: column; gap: 7px; }
.ky-compare__item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.ky-compare__item-mark { flex-shrink: 0; margin-top: 1px; font-size: 12px; }
.ky-compare__item--covers .ky-compare__item-mark { color: var(--green-400); }
.ky-compare__item--not { color: var(--muted); }
.ky-compare__item--not .ky-compare__item-mark { color: #F87171; }
.ky-compare__verdict {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--cc) 30%, transparent);
}
.ky-compare__verdict-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.ky-compare__verdict-value { font-weight: 800; font-size: 15px; color: var(--cc); }
@media (max-width: 900px) {
    .ky-notacopilot { padding: 72px 0; }
    .ky-compare { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HarnessEngineer (REQ-034) — papel + responsabilidades + "um dia com o
   Kyroon". Porta components/HarnessEngineer.jsx.
   ========================================================================== */
.ky-harness__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.ky-harness__output {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(51, 119, 255, 0.10), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(51, 119, 255, 0.25);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 32px;
}
.ky-harness__output-mult {
    font-family: var(--ky-font-mono);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary-400);
    line-height: 1;
    flex-shrink: 0;
}
.ky-harness__output-title { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.ky-harness__output-sub { font-size: 13px; color: var(--muted); }
.ky-harness__resp { display: flex; flex-direction: column; gap: 14px; }
.ky-harness__resp-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.ky-harness__resp-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    flex-shrink: 0;
    background: rgba(51, 119, 255, 0.10);
    border: 1px solid rgba(51, 119, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ky-harness__resp-label { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.ky-harness__resp-desc { font-size: 12px; color: var(--muted); line-height: 1.55; }
.ky-harness__day {
    font-family: var(--ky-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.ky-harness__timeline { position: relative; }
.ky-harness__timeline::before {
    content: "";
    position: absolute;
    left: 44px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}
.ky-harness__event { --tc: var(--primary); display: flex; align-items: flex-start; margin-bottom: 24px; }
.ky-harness__event:last-child { margin-bottom: 0; }
.ky-harness__time {
    font-family: var(--ky-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--tc);
    width: 44px;
    flex-shrink: 0;
    padding-top: 2px;
}
.ky-harness__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tc);
    flex-shrink: 0;
    margin-top: 4px;
    margin-right: 16px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 13%, transparent);
    position: relative;
    z-index: 1;
}
.ky-harness__action {
    flex: 1;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
    border-left: 2px solid var(--tc);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .ky-harness__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* Reduced-motion: Problem estático (sem loop de blink, sem lift) */
@media (prefers-reduced-motion: reduce) {
    .ky-problem-card { transition: none !important; }
    .ky-problem-card:hover { transform: none !important; }
}

/* ==========================================================================
   Maturidade N0→N3 (REQ-037) — 4 cards que acendem em loop (JS: initMaturityLoop)
   + trilha de progresso que assume a cor da etapa. Porta components/Maturity.jsx.
   ========================================================================== */
.ky-maturity__track {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-bottom: 28px;
    overflow: hidden;
}
.ky-maturity__track-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--primary);
    transition: width .6s var(--ease), background .6s var(--ease), box-shadow .6s var(--ease);
}
.ky-maturity {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ky-maturity__card {
    --mc: var(--primary);
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--mc);
    border-radius: var(--ky-radius-lg);
    padding: 24px 22px;
    opacity: .5;
    transform: translateY(6px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.ky-maturity__card.is-done {
    opacity: 1;
    transform: none;
    border-color: color-mix(in srgb, var(--mc) 33%, transparent);
    border-top-color: var(--mc);
    box-shadow: 0 0 20px color-mix(in srgb, var(--mc) 9%, transparent);
}
.ky-maturity__card--max.is-done {
    box-shadow: 0 0 34px color-mix(in srgb, var(--mc) 20%, transparent);
}
.ky-maturity__check {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-strong);
    transform: scale(.4);
    opacity: 0;
    transition: transform .4s var(--ease-spring), opacity .3s var(--ease), background .4s var(--ease);
}
.ky-maturity__card.is-done .ky-maturity__check {
    background: var(--mc);
    border-color: var(--mc);
    transform: scale(1);
    opacity: 1;
}
.ky-maturity__num {
    display: block;
    font-family: var(--ky-font-mono);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--mc);
    margin-bottom: 8px;
    transform: scale(.92);
    transform-origin: left center;
    transition: transform .4s var(--ease-spring);
}
.ky-maturity__card.is-done .ky-maturity__num { transform: scale(1); }
.ky-maturity__name { font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.ky-maturity__essence { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
.ky-maturity__kyroon {
    border-top: 1px solid var(--border);
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.6;
}
.ky-maturity__kyroon-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mc);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ky-maturity__seal {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mc);
    background: color-mix(in srgb, var(--mc) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mc) 25%, transparent);
    border-radius: var(--ky-radius-pill);
    padding: 4px 10px;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .4s var(--ease) .15s, transform .4s var(--ease-spring) .15s;
}
.ky-maturity__card.is-done .ky-maturity__seal { opacity: 1; transform: scale(1); }
@media (max-width: 900px) {
    .ky-maturity { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ky-maturity { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Onboarding (REQ-043) — checkpoints Hora 1/Semana 1/Semana 2 + 3 cards de
   mesma altura em loop (JS: initOnboardingLoop). Porta components/Onboarding.jsx.
   ========================================================================== */
.ky-ob__checkpoints {
    display: flex;
    align-items: flex-start;
    margin-bottom: 36px;
    padding: 0 4px;
}
.ky-ob__node {
    --sc: var(--primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 96px;
}
.ky-ob__node-dot {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ky-font-mono);
    font-weight: 800;
    font-size: 14px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-strong);
    transform: scale(.9);
    transition: background .4s var(--ease-spring), border-color .4s var(--ease-spring), box-shadow .4s var(--ease-spring), transform .4s var(--ease-spring), color .3s var(--ease);
}
.ky-ob__node-check { display: none; }
.ky-ob__node.is-done .ky-ob__node-dot {
    background: var(--sc);
    border-color: var(--sc);
    color: #fff;
    transform: scale(1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 13%, transparent);
}
.ky-ob__node.is-done .ky-ob__node-num { display: none; }
.ky-ob__node.is-done .ky-ob__node-check { display: inline; }
.ky-ob__node-label {
    font-family: var(--ky-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    transition: color .3s var(--ease);
}
.ky-ob__node.is-done .ky-ob__node-label { color: var(--sc); }
.ky-ob__connector {
    --sc: var(--primary);
    flex: 1;
    height: 3px;
    background: var(--border);
    margin: 18px 4px 0;
    border-radius: 2px;
    overflow: hidden;
}
.ky-ob__connector-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--sc);
    transition: width .5s var(--ease);
}
.ky-ob__connector.is-filled .ky-ob__connector-fill { width: 100%; }
.ky-ob__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}
.ky-ob__card {
    --sc: var(--primary);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--sc);
    border-radius: 18px;
    padding: 28px 24px;
    opacity: .5;
    transform: translateY(6px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.ky-ob__card.is-done {
    opacity: 1;
    transform: none;
    border-color: color-mix(in srgb, var(--sc) 33%, transparent);
    border-top-color: var(--sc);
    box-shadow: 0 0 20px color-mix(in srgb, var(--sc) 9%, transparent);
}
.ky-ob__card-check {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-strong);
    transform: scale(.4);
    opacity: 0;
    transition: transform .4s var(--ease-spring), opacity .3s var(--ease), background .4s var(--ease);
}
.ky-ob__card.is-done .ky-ob__card-check {
    background: var(--sc);
    border-color: var(--sc);
    transform: scale(1);
    opacity: 1;
}
.ky-ob__card-time { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.ky-ob__card-time-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--sc) 8%, transparent);
    border: 2px solid var(--sc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    color: var(--sc);
    flex-shrink: 0;
}
.ky-ob__card-time-label {
    font-family: var(--ky-font-mono);
    font-size: 11px;
    font-weight: 800;
    color: var(--sc);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.ky-ob__card-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 10px; }
.ky-ob__card-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 20px; }
.ky-ob__items { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ky-ob__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
}
.ky-ob__item--code {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.08);
}
.ky-ob__item-code { font-family: var(--ky-font-mono); font-size: 12px; color: var(--sc); }
.ky-ob__item-mark { color: var(--sc); font-size: 12px; flex-shrink: 0; }
.ky-ob__item-text { font-size: 13px; }
@media (max-width: 900px) {
    .ky-ob__grid { grid-template-columns: 1fr; }
    .ky-ob__checkpoints { max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* Reduced-motion: Maturidade e Onboarding estáticos (estado final, sem loop) */
@media (prefers-reduced-motion: reduce) {
    .ky-maturity__track-fill,
    .ky-maturity__card,
    .ky-maturity__check,
    .ky-maturity__num,
    .ky-maturity__seal,
    .ky-ob__node-dot,
    .ky-ob__node-label,
    .ky-ob__connector-fill,
    .ky-ob__card,
    .ky-ob__card-check { transition: none !important; }
}

/* ============================================================
   Convite público — /invite   (spec 03774)
   Reusa .ky-auth__*, .ky-summary__*, .ky-callout e os tokens --ky-*.
   Só o que é específico da página mora aqui.
   ============================================================ */

/* Duas colunas: CONTEXTO à esquerda, AÇÃO à direita.
   O .ky-auth__layout padrão é 1.4fr | 1fr (conteúdo grande + aside estreito).
   Aqui a proporção se inverte: o resumo é curto e o formulário é quem precisa
   de largura, então a coluna da direita é a maior. */
.ky-invite__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

/* O resumo acompanha a rolagem: em telas curtas o convidado preenche a senha
   sem enxergar mais para QUAL workspace está entrando se o card sair da tela. */
.ky-invite__aside {
    position: sticky;
    top: calc(var(--ky-header-h) + var(--ky-space-4));
    min-width: 0;
}

.ky-invite__summary {
    margin: 0;
}

.ky-invite__summary-list {
    margin-bottom: 0;
}

/* Empilha rótulo e valor: e-mail e nome de workspace são longos e, no layout
   lado a lado herdado do checkout, quebrariam feio numa coluna estreita. */
.ky-invite__summary-list .ky-summary__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ky-space-1);
    padding: var(--ky-space-3) 0;
    border-bottom: 1px solid var(--ky-border);
}
.ky-invite__summary-list .ky-summary__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.ky-invite__summary-list .ky-summary__row dt {
    font-size: var(--ky-fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ky-invite__summary-list .ky-summary__row dd {
    text-align: left;
}

/* E-mail longo não pode estourar a coluna nem forçar scroll horizontal. */
.ky-invite__summary-email {
    overflow-wrap: anywhere;
}

.ky-invite__summary-note {
    text-align: left;
    margin-top: var(--ky-space-4);
    padding-top: var(--ky-space-4);
    border-top: 1px solid var(--ky-border);
}

/* Validade em segundo plano: informativo, não compete com a ação primária. */
.ky-invite__countdown {
    color: var(--ky-text-faint);
    font-size: var(--ky-fs-caption);
    white-space: nowrap;
}

.ky-invite__panel {
    display: flex;
    flex-direction: column;
    gap: var(--ky-space-4);
    min-width: 0;
}

.ky-invite__panel-title {
    font-size: var(--ky-fs-h3);
    margin: 0;
}

.ky-invite__panel-lead {
    color: var(--ky-text-muted);
    margin: calc(var(--ky-space-2) * -1) 0 0;
}

/* Estado "vinculando…" do Ramo A. */
.ky-invite__progress {
    margin: 0;
}

.ky-invite__panel .ky-auth__form {
    margin-top: var(--ky-space-2);
}

/* Formulário do Ramo B em duas colunas: os 5 campos pedidos cabem em 3 linhas
   (nome / e-mail + telefone / senha + confirmar) em vez de uma coluna longa. */
.ky-invite__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ky-space-4) var(--ky-space-5);
    align-items: start;
}

.ky-invite__field--full {
    grid-column: 1 / -1;
}

/* .ky-auth__submit é align-self: flex-start — dentro do grid isso encolheria a
   linha inteira, então o botão mora num wrapper próprio. */
.ky-invite__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ky-space-3);
    margin-top: var(--ky-space-2);
}
.ky-invite__actions .ky-auth__submit {
    margin-top: 0;
}

/* Âncora do botão "Mostrar": .ky-password__toggle é absolute/top:50%, e o
   ancestral posicionado passa a ser ESTE wrapper em vez do campo inteiro — sem
   ele o 50% conta label + input + mensagem de erro e o botão sobe para cima do
   input assim que a validação aparece. Escopo local de propósito: o
   Views/Account usa a marcação antiga (toggle em ícone) e não deve mudar. */
.ky-password__control {
    position: relative;
    display: block;
}
.ky-password__control .form-control {
    width: 100%;
    /* Espaço para o rótulo "Mostrar"/"Ocultar" — sem isto a senha digitada
       passa por baixo do botão. */
    padding-right: 5.25rem;
}

/* O e-mail é exibição, não entrada — a UI precisa deixar isso óbvio. */
.ky-invite__panel input[readonly] {
    opacity: 0.75;
    cursor: not-allowed;
}

@media (max-width: 960px) {
    .ky-invite__layout {
        grid-template-columns: 1fr;
    }
    .ky-invite__aside {
        position: static;
    }
}

@media (max-width: 640px) {
    .ky-invite__panel {
        gap: var(--ky-space-3);
    }
    .ky-invite__form {
        grid-template-columns: 1fr;
    }
}