/* =========================================================
   ConceptLab styles — "Should I make this game?" module.
   POLISH PASS — 2026 premium feel.

   Visual language: Void & Mint
     #0a0a0f bg, #6ee7b7 mint, #38bdf8 data blue
     JetBrains Mono for data/eyebrows, Outfit for prose.

   Polish principles applied here:
     - Decelerating easings (expo-out curve) signal "system
       responding to you" rather than decoration.
     - The verdict block is THE moment. Everything else
       reduces visual weight so the verdict can breathe.
     - Inputs feel inset (subtle inner shadow) so they read
       as "places you put things into."
     - Stagger entrance: brief sections cascade in at 60ms
       intervals so the eye lands on each in sequence.
     - One pulse on the verdict block at reveal, then quiet.
       Continuous animation = anxiety. One-shot = punctuation.
     - prefers-reduced-motion gracefully drops all anims.

   Only CSS. No new libraries. No JS changes. No ID changes.
   ========================================================= */


/* =========================================================
   0. DESIGN TOKENS — local, fall through to globals
   ========================================================= */
:root {
    --cl-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --cl-ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --cl-dur-micro:       180ms;
    --cl-dur-base:        240ms;
    --cl-dur-slow:        420ms;
    --cl-dur-reveal:      560ms;

    --cl-shadow-card:     0 1px 0 rgba(255,255,255,.04) inset,
                          0 12px 32px -16px rgba(0,0,0,.6);
    --cl-shadow-input:    0 1px 0 rgba(0,0,0,.4) inset,
                          0 -1px 0 rgba(255,255,255,.02) inset;
    --cl-shadow-elevated: 0 1px 0 rgba(255,255,255,.06) inset,
                          0 24px 48px -20px rgba(0,0,0,.7),
                          0 4px 12px -4px rgba(0,0,0,.4);
    --cl-glow-mint:       0 0 0 1px rgba(110,231,183,.16),
                          0 8px 32px -8px rgba(110,231,183,.24);
}

/* Respect users who turn motion off — Apple/Win11 default for many. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   1. HERO + FORM — restrained, calm, focused
   ========================================================= */
.cl-hero {
    text-align: center;
    padding: 56px 0 36px;
    border-bottom: 1px solid var(--bd, rgba(255,255,255,.06));
    margin-bottom: 36px;
    animation: clHeroIn var(--cl-dur-reveal) var(--cl-ease-out) both;
}
.cl-hero-eyebrow {
    color: var(--mint, #6ee7b7);
    font-size: 11px;
    letter-spacing: .18em;
    margin-bottom: 14px;
    text-shadow: 0 0 24px rgba(110,231,183,.4);
}
.cl-hero-title {
    font-size: 38px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--txt, #fff);
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cl-hero-lead {
    color: var(--txt-muted, rgba(255,255,255,.7));
    font-size: 16px;
    line-height: 1.55;
    max-width: 540px;
    margin: 0 auto;
}

.cl-form {
    max-width: 640px;
    margin: 0 auto 56px;
    animation: clFadeIn var(--cl-dur-reveal) var(--cl-ease-out) 80ms both;
}
.cl-field { margin-bottom: 32px; }
.cl-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--txt, #fff);
    letter-spacing: -0.005em;
}
.cl-label-hint {
    color: var(--txt-muted, rgba(255,255,255,.45));
    font-weight: 400;
    margin-left: 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.cl-help {
    color: var(--txt-muted, rgba(255,255,255,.5));
    font-size: 11px;
    margin-top: 8px;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

.cl-input,
.cl-textarea {
    width: 100%;
    padding: 13px 15px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--bd, rgba(255,255,255,.08));
    border-radius: 10px;
    color: var(--txt, #fff);
    font-size: 14px;
    font-family: inherit;
    box-shadow: var(--cl-shadow-input);
    transition:
        border-color var(--cl-dur-micro) var(--cl-ease-out),
        background   var(--cl-dur-micro) var(--cl-ease-out),
        box-shadow   var(--cl-dur-base)  var(--cl-ease-out);
}
.cl-input::placeholder,
.cl-textarea::placeholder {
    color: rgba(255,255,255,.28);
}
.cl-input:hover,
.cl-textarea:hover {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.035);
}
.cl-input:focus,
.cl-textarea:focus {
    outline: none;
    border-color: var(--mint, #6ee7b7);
    background: rgba(110,231,183,.04);
    box-shadow:
        var(--cl-shadow-input),
        0 0 0 4px rgba(110,231,183,.08);
}
.cl-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }


/* =========================================================
   2. TAG PICKER — chips with real entrance/exit feel
   ========================================================= */
.cl-tag-picker { position: relative; }
.cl-tag-suggestions {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(20, 20, 28, 0.92);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter:         blur(16px) saturate(1.4);
    border: 1px solid var(--bd, rgba(255,255,255,.1));
    border-radius: 10px;
    box-shadow: var(--cl-shadow-elevated);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
    transform-origin: top center;
    animation: clDropdownIn 220ms var(--cl-ease-out);
}
.cl-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    color: var(--txt, #fff);
    font-size: 13px;
    cursor: pointer;
    transition:
        background var(--cl-dur-micro) var(--cl-ease-out),
        color      var(--cl-dur-micro) var(--cl-ease-out),
        padding-left var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-suggest-item:hover,
.cl-suggest-item:focus {
    background: rgba(110,231,183,.08);
    color: var(--mint, #6ee7b7);
    padding-left: 18px;
    outline: none;
}
.cl-suggest-item:last-child { border-bottom: 0; }

.cl-selected-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}
.cl-selected-empty {
    color: var(--txt-muted, rgba(255,255,255,.35));
    font-size: 11px;
    padding: 8px 0;
    letter-spacing: 0.02em;
}
.cl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    background: rgba(110,231,183,.08);
    border: 1px solid rgba(110,231,183,.22);
    border-radius: 7px;
    color: var(--mint, #6ee7b7);
    font-size: 12px;
    cursor: pointer;
    animation: clChipIn 220ms var(--cl-ease-out);
    transition:
        background var(--cl-dur-micro) var(--cl-ease-out),
        border-color var(--cl-dur-micro) var(--cl-ease-out),
        transform var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-chip:hover {
    background: rgba(110,231,183,.16);
    border-color: rgba(110,231,183,.45);
    transform: translateY(-1px);
}
.cl-chip:active { transform: translateY(0) scale(0.97); }
.cl-chip svg { width: 12px; height: 12px; opacity: .65; transition: opacity var(--cl-dur-micro); }
.cl-chip:hover svg { opacity: 1; }


/* =========================================================
   3. PRICE INPUT + PRESETS — segmented control feel
   ========================================================= */
.cl-price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.cl-price-input-wrap {
    position: relative;
    flex: 0 0 140px;
}
.cl-price-prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--txt-muted, rgba(255,255,255,.45));
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    pointer-events: none;
    transition: color var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-price-input-wrap:focus-within .cl-price-prefix {
    color: var(--mint, #6ee7b7);
}
.cl-price-input { padding-left: 28px; }
.cl-price-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-preset {
    padding: 7px 12px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--bd, rgba(255,255,255,.08));
    border-radius: 7px;
    color: var(--txt-muted, rgba(255,255,255,.7));
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition:
        background var(--cl-dur-micro) var(--cl-ease-out),
        border-color var(--cl-dur-micro) var(--cl-ease-out),
        color var(--cl-dur-micro) var(--cl-ease-out),
        transform var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-preset:hover {
    background: rgba(110,231,183,.06);
    border-color: rgba(110,231,183,.28);
    color: var(--mint, #6ee7b7);
    transform: translateY(-1px);
}
.cl-preset:active { transform: translateY(0); }
.cl-preset-active {
    background: rgba(110,231,183,.12);
    border-color: var(--mint, #6ee7b7);
    color: var(--mint, #6ee7b7);
    box-shadow: 0 0 0 1px rgba(110,231,183,.24);
}


/* =========================================================
   4. CTA — tactile, with real press feedback + sheen sweep
   ========================================================= */
.cl-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}
.cl-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: linear-gradient(180deg, #7df1c4 0%, #6ee7b7 100%);
    color: #06120e;
    border: 0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,.4) inset,
        0 -1px 0 rgba(0,0,0,.1) inset,
        0 4px 12px -2px rgba(110,231,183,.32),
        0 8px 24px -8px rgba(110,231,183,.4);
    transition:
        transform var(--cl-dur-micro) var(--cl-ease-out),
        box-shadow var(--cl-dur-base) var(--cl-ease-out),
        opacity var(--cl-dur-micro);
}
.cl-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,
        rgba(255,255,255,.32) 50%,
        transparent 65%,
        transparent 100%
    );
    transform: translateX(-100%);
    transition: transform 600ms var(--cl-ease-out);
    pointer-events: none;
}
.cl-cta:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 -1px 0 rgba(0,0,0,.1) inset,
        0 6px 16px -2px rgba(110,231,183,.4),
        0 12px 32px -8px rgba(110,231,183,.5);
}
.cl-cta:hover:not(:disabled)::before {
    transform: translateX(100%);
}
.cl-cta:active:not(:disabled) {
    transform: translateY(0);
    transition-duration: 80ms;
}
.cl-cta:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
    background: linear-gradient(180deg, #5dc59c 0%, #4eb98b 100%);
}
.cl-cta svg { width: 16px; height: 16px; transition: transform var(--cl-dur-micro) var(--cl-ease-out); }
.cl-cta:hover:not(:disabled) svg { transform: translateX(2px); }

.cl-cta-secondary {
    padding: 10px 18px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--bd, rgba(255,255,255,.1));
    border-radius: 7px;
    color: var(--txt, #fff);
    font-size: 13px;
    cursor: pointer;
    transition:
        background var(--cl-dur-micro) var(--cl-ease-out),
        border-color var(--cl-dur-micro) var(--cl-ease-out),
        transform var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-cta-secondary:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
}
.cl-cta-hint {
    color: var(--txt-muted, rgba(255,255,255,.45));
    font-size: 11px;
    letter-spacing: 0.02em;
    transition: color var(--cl-dur-base) var(--cl-ease-out);
}


/* =========================================================
   5. FAQ — quieter, polished accordion
   ========================================================= */
.cl-faq {
    max-width: 640px;
    margin: 0 auto 64px;
    animation: clFadeIn var(--cl-dur-reveal) var(--cl-ease-out) 160ms both;
}
.cl-faq-item {
    border-bottom: 1px solid rgba(255,255,255,.05);
    padding: 16px 0;
    transition: padding var(--cl-dur-base) var(--cl-ease-out);
}
.cl-faq-item[open] { padding-bottom: 20px; }
.cl-faq-item summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--txt, #fff);
    font-weight: 500;
    list-style: none;
    position: relative;
    padding-right: 28px;
    transition: color var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-faq-item summary::-webkit-details-marker { display: none; }
.cl-faq-item summary::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid rgba(255,255,255,.5);
    border-bottom: 1.5px solid rgba(255,255,255,.5);
    transform: translateY(-70%) rotate(45deg);
    transition:
        transform var(--cl-dur-base) var(--cl-ease-out),
        border-color var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-faq-item[open] summary::after {
    transform: translateY(-30%) rotate(-135deg);
    border-color: var(--mint, #6ee7b7);
}
.cl-faq-item summary:hover { color: var(--mint, #6ee7b7); }
.cl-faq-item summary:hover::after { border-color: var(--mint, #6ee7b7); }
.cl-faq-item p {
    color: var(--txt-muted, rgba(255,255,255,.65));
    font-size: 13px;
    line-height: 1.6;
    margin: 12px 0 0;
    animation: clFadeIn var(--cl-dur-base) var(--cl-ease-out);
}


/* =========================================================
   6. LOADING / ERROR / INSUFFICIENT STATES
   ========================================================= */
.cl-loading {
    text-align: center;
    padding: 96px 20px;
    color: var(--txt-muted, rgba(255,255,255,.6));
    animation: clFadeIn var(--cl-dur-base) var(--cl-ease-out);
}
.cl-loading p {
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0.04em;
    animation: clPulseLoading 2s var(--cl-ease-in-out) infinite;
}
.cl-error {
    text-align: center;
    padding: 64px 20px;
    color: var(--txt, #fff);
    animation: clFadeIn var(--cl-dur-base) var(--cl-ease-out);
}
.cl-error p { margin-bottom: 20px; }
.cl-insufficient {
    max-width: 540px;
    margin: 32px auto 0;
    text-align: center;
    padding: 36px 28px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    box-shadow: var(--cl-shadow-card);
    animation: clCardIn var(--cl-dur-reveal) var(--cl-ease-out);
}
.cl-insufficient-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    color: var(--txt-muted, rgba(255,255,255,.4));
    animation: clFloat 4s var(--cl-ease-in-out) infinite;
}
.cl-insufficient-icon svg { width: 100%; height: 100%; }
.cl-insufficient-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--txt, #fff);
    letter-spacing: -0.01em;
}
.cl-insufficient-text {
    color: var(--txt-muted, rgba(255,255,255,.7));
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
}
.cl-link {
    color: var(--mint, #6ee7b7);
    text-decoration: none;
    border-bottom: 1px solid rgba(110,231,183,.4);
    transition: border-color var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-link:hover { border-color: var(--mint, #6ee7b7); }


/* =========================================================
   7. BRIEF — the layout that holds the verdict moment
   ========================================================= */
.cl-brief {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 64px;
}
.cl-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px 8px 6px;
    background: transparent;
    border: 0;
    color: var(--txt-muted, rgba(255,255,255,.55));
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 18px;
    border-radius: 6px;
    transition:
        color var(--cl-dur-micro) var(--cl-ease-out),
        background var(--cl-dur-micro) var(--cl-ease-out),
        transform var(--cl-dur-micro) var(--cl-ease-out);
    animation: clFadeIn var(--cl-dur-base) var(--cl-ease-out) both;
}
.cl-back:hover {
    color: var(--mint, #6ee7b7);
    background: rgba(110,231,183,.04);
}
.cl-back:hover svg { transform: translateX(-2px); }
.cl-back svg {
    width: 16px;
    height: 16px;
    transition: transform var(--cl-dur-micro) var(--cl-ease-out);
}

.cl-brief-head {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    animation: clStaggerIn var(--cl-dur-reveal) var(--cl-ease-out) 60ms both;
}
.cl-brief-eyebrow {
    color: var(--data-blue, #38bdf8);
    font-size: 11px;
    letter-spacing: .18em;
    margin-bottom: 12px;
    text-shadow: 0 0 24px rgba(56,189,248,.32);
}
.cl-brief-title {
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--txt, #fff);
    letter-spacing: -0.02em;
    line-height: 1.15;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cl-brief-meta {
    color: var(--txt-muted, rgba(255,255,255,.5));
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    letter-spacing: 0.02em;
}
.cl-brief-meta-sep { opacity: .35; }
.cl-brief-meta-desc {
    font-style: italic;
    max-width: 480px;
    color: rgba(255,255,255,.62);
}


/* =========================================================
   8. MATCH DISCLOSURE BANNER
   ========================================================= */
.cl-match-banner {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(56,189,248,.06);
    border: 1px solid rgba(56,189,248,.22);
    border-radius: 12px;
    margin-bottom: 28px;
    box-shadow:
        0 1px 0 rgba(56,189,248,.08) inset,
        0 8px 24px -12px rgba(56,189,248,.2);
    animation: clStaggerIn var(--cl-dur-reveal) var(--cl-ease-out) 120ms both;
}
.cl-match-banner-icon {
    flex: 0 0 22px;
    color: var(--data-blue, #38bdf8);
}
.cl-match-banner-icon svg { width: 22px; height: 22px; }
.cl-match-banner-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--data-blue, #38bdf8);
    margin-bottom: 4px;
    letter-spacing: -0.005em;
}
.cl-match-banner-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--txt-muted, rgba(255,255,255,.78));
}
.cl-match-banner-text strong { color: var(--txt, #fff); }


/* =========================================================
   9. VERDICT BLOCK — THE moment of the page
   This is the one place the polish goes loud.
   ========================================================= */
.cl-verdict {
    position: relative;
    padding: 32px 28px;
    border-radius: 16px;
    margin-bottom: 36px;
    border: 1px solid;
    overflow: hidden;
    /* Default (green / gray) entrance — tone variants override below */
    animation:
        clVerdictIn var(--cl-dur-reveal) var(--cl-ease-out) 180ms both,
        clVerdictPulse 2400ms var(--cl-ease-out) 740ms 1;
}

.cl-verdict-tone-green  { background: linear-gradient(180deg, rgba(110,231,183,.08), rgba(110,231,183,.03)); border-color: rgba(110,231,183,.28); }
.cl-verdict-tone-blue   { background: linear-gradient(180deg, rgba(56,189,248,.08),  rgba(56,189,248,.03));  border-color: rgba(56,189,248,.28); }
.cl-verdict-tone-yellow { background: linear-gradient(180deg, rgba(251,191,36,.08),  rgba(251,191,36,.03));  border-color: rgba(251,191,36,.28); }
.cl-verdict-tone-red    { background: linear-gradient(180deg, rgba(248,113,113,.08), rgba(248,113,113,.03)); border-color: rgba(248,113,113,.28); }
.cl-verdict-tone-gray   { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }

/* Soft radial glow ATTACHED to the verdict, color follows tone */
.cl-verdict::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        var(--cl-verdict-glow, rgba(110,231,183,.12)) 0%,
        transparent 60%
    );
    pointer-events: none;
    opacity: 0;
    animation: clVerdictGlowIn var(--cl-dur-slow) var(--cl-ease-out) 480ms both;
}
.cl-verdict-tone-green  { --cl-verdict-glow: rgba(110,231,183,.18); }
.cl-verdict-tone-blue   { --cl-verdict-glow: rgba(56,189,248,.18); }
.cl-verdict-tone-yellow { --cl-verdict-glow: rgba(251,191,36,.16); }
.cl-verdict-tone-red    { --cl-verdict-glow: rgba(248,113,113,.16); }
.cl-verdict-tone-gray   { --cl-verdict-glow: rgba(255,255,255,.08); }

/* Subtle grid texture — only on verdict, very faint */
.cl-verdict::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    opacity: .6;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.cl-verdict-label {
    position: relative;
    z-index: 1;
    font-size: 11px;
    letter-spacing: .16em;
    margin-bottom: 14px;
    opacity: .85;
}
.cl-verdict-tone-green  .cl-verdict-label { color: #6ee7b7; }
.cl-verdict-tone-blue   .cl-verdict-label { color: #38bdf8; }
.cl-verdict-tone-yellow .cl-verdict-label { color: #fbbf24; }
.cl-verdict-tone-red    .cl-verdict-label { color: #f87171; }
.cl-verdict-tone-gray   .cl-verdict-label { color: rgba(255,255,255,.6); }

.cl-verdict-headline {
    position: relative;
    z-index: 1;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--txt, #fff);
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.cl-verdict-tone-green  .cl-verdict-headline { color: #6ee7b7; text-shadow: 0 0 32px rgba(110,231,183,.35); }
.cl-verdict-tone-blue   .cl-verdict-headline { color: #38bdf8; text-shadow: 0 0 32px rgba(56,189,248,.35); }
.cl-verdict-tone-yellow .cl-verdict-headline { color: #fbbf24; text-shadow: 0 0 32px rgba(251,191,36,.3); }
.cl-verdict-tone-red    .cl-verdict-headline { color: #f87171; text-shadow: 0 0 32px rgba(248,113,113,.3); }

.cl-verdict-body {
    position: relative;
    z-index: 1;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.92);
    margin: 0 0 22px;
}
.cl-verdict-stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.cl-verdict-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-stat-label {
    font-size: 10px;
    letter-spacing: .14em;
    opacity: .55;
}
.cl-stat-val {
    font-size: 20px;
    font-weight: 600;
    color: var(--txt, #fff);
    letter-spacing: -0.01em;
}

/* Tone-specific pulse override animations.
   The base .cl-verdict animation lists clVerdictPulse (mint).
   These override for blue/yellow/red so each tone glows in its own color. */
.cl-verdict.cl-verdict-tone-blue {
    animation:
        clVerdictIn var(--cl-dur-reveal) var(--cl-ease-out) 180ms both,
        clVerdictPulseBlue 2400ms var(--cl-ease-out) 740ms 1;
}
.cl-verdict.cl-verdict-tone-yellow {
    animation:
        clVerdictIn var(--cl-dur-reveal) var(--cl-ease-out) 180ms both,
        clVerdictPulseYellow 2400ms var(--cl-ease-out) 740ms 1;
}
.cl-verdict.cl-verdict-tone-red {
    animation:
        clVerdictIn var(--cl-dur-reveal) var(--cl-ease-out) 180ms both,
        clVerdictPulseRed 2400ms var(--cl-ease-out) 740ms 1;
}


/* =========================================================
   10. SECTIONS — supporting cast, staggered entrance
   ========================================================= */
.cl-section {
    margin-bottom: 32px;
    padding: 26px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 14px;
    box-shadow: var(--cl-shadow-card);
    transition:
        border-color var(--cl-dur-base) var(--cl-ease-out),
        background var(--cl-dur-base) var(--cl-ease-out);
    animation: clStaggerIn var(--cl-dur-reveal) var(--cl-ease-out) both;
}
.cl-section:hover {
    border-color: rgba(255,255,255,.08);
    background: rgba(255,255,255,.028);
}

/* Stagger sections after verdict (180ms) — eye lands sequentially */
.cl-brief .cl-section:nth-of-type(1) { animation-delay: 320ms; }
.cl-brief .cl-section:nth-of-type(2) { animation-delay: 400ms; }
.cl-brief .cl-section:nth-of-type(3) { animation-delay: 480ms; }
.cl-brief .cl-section:nth-of-type(4) { animation-delay: 560ms; }
.cl-brief .cl-section:nth-of-type(5) { animation-delay: 640ms; }
.cl-brief .cl-section:nth-of-type(6) { animation-delay: 720ms; }

.cl-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.cl-section-title {
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    color: var(--txt, #fff);
    letter-spacing: -0.015em;
}
.cl-section-sub {
    font-size: 11px;
    color: var(--txt-muted, rgba(255,255,255,.4));
    letter-spacing: 0.04em;
}
.cl-section-lead {
    font-size: 13px;
    line-height: 1.6;
    color: var(--txt-muted, rgba(255,255,255,.7));
    margin: 0 0 22px;
}
.cl-section-lead em {
    color: var(--mint, #6ee7b7);
    font-style: normal;
    font-weight: 500;
}

.cl-empty {
    padding: 28px;
    text-align: center;
    color: var(--txt-muted, rgba(255,255,255,.5));
    font-size: 13px;
    line-height: 1.55;
    background: rgba(255,255,255,.02);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 10px;
}


/* =========================================================
   11. PROJECTION ROWS — percentile bars
   ========================================================= */
.cl-proj-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cl-proj-row {
    display: flex;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.022);
    border-left: 3px solid;
    transition:
        background var(--cl-dur-base) var(--cl-ease-out),
        border-left-width var(--cl-dur-base) var(--cl-ease-out),
        padding-left var(--cl-dur-base) var(--cl-ease-out);
}
.cl-proj-row:hover {
    background: rgba(255,255,255,.04);
    border-left-width: 4px;
    padding-left: 17px;
}
.cl-proj-bad   { border-left-color: #f87171; }
.cl-proj-mid   { border-left-color: #fbbf24; }
.cl-proj-good  { border-left-color: #6ee7b7; }
.cl-proj-pct {
    flex: 0 0 48px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.cl-proj-bad   .cl-proj-pct { color: #f87171; }
.cl-proj-mid   .cl-proj-pct { color: #fbbf24; }
.cl-proj-good  .cl-proj-pct { color: #6ee7b7; }
.cl-proj-body {
    flex: 1;
    min-width: 0;
}
.cl-proj-val {
    font-size: 12px;
    opacity: .6;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.cl-proj-ref {
    font-size: 14px;
    color: var(--txt, #fff);
    margin-bottom: 8px;
    line-height: 1.4;
}
.cl-proj-ref strong { font-weight: 600; }
.cl-proj-explain {
    font-size: 12px;
    color: var(--txt-muted, rgba(255,255,255,.6));
    line-height: 1.5;
}


/* =========================================================
   12. WINNERS — game cards with depth + image zoom
   ========================================================= */
.cl-winner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.cl-winner-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--cl-shadow-card);
    transition:
        transform var(--cl-dur-base) var(--cl-ease-out),
        border-color var(--cl-dur-base) var(--cl-ease-out),
        box-shadow var(--cl-dur-base) var(--cl-ease-out);
}
.cl-winner-card:hover {
    transform: translateY(-3px);
    border-color: rgba(110,231,183,.32);
    box-shadow: var(--cl-shadow-elevated);
}
.cl-winner-img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
    transition: transform var(--cl-dur-slow) var(--cl-ease-out);
}
.cl-winner-card:hover .cl-winner-img {
    transform: scale(1.04);
}
.cl-winner-body { padding: 14px 16px; }
.cl-winner-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt, #fff);
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.cl-winner-meta {
    font-size: 11px;
    color: var(--txt-muted, rgba(255,255,255,.55));
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.cl-winner-why {
    font-size: 12px;
    line-height: 1.45;
    color: var(--txt-muted, rgba(255,255,255,.72));
}


/* =========================================================
   13. FIRST MOVE — actionable card
   ========================================================= */
.cl-firstmove {
    padding: 24px;
    border-radius: 12px;
    border: 1px solid;
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 12px 32px -16px rgba(0,0,0,.6);
}
.cl-firstmove-tone-green,
.cl-firstmove-tone-blue   { background: linear-gradient(180deg, rgba(110,231,183,.05), rgba(110,231,183,.02)); border-color: rgba(110,231,183,.22); }
.cl-firstmove-tone-yellow { background: linear-gradient(180deg, rgba(251,191,36,.05), rgba(251,191,36,.02)); border-color: rgba(251,191,36,.24); }
.cl-firstmove-tone-red    { background: linear-gradient(180deg, rgba(248,113,113,.05), rgba(248,113,113,.02)); border-color: rgba(248,113,113,.24); }

.cl-firstmove-head { margin-bottom: 14px; }
.cl-firstmove-kicker {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--mint, #6ee7b7);
}
.cl-firstmove-tone-yellow .cl-firstmove-kicker { color: #fbbf24; }
.cl-firstmove-tone-red    .cl-firstmove-kicker { color: #f87171; }

.cl-firstmove-action {
    font-size: 15px;
    line-height: 1.6;
    color: var(--txt, #fff);
    margin: 0 0 14px;
}
.cl-firstmove-action strong {
    color: var(--mint, #6ee7b7);
    font-weight: 600;
}
.cl-firstmove-tone-yellow .cl-firstmove-action strong { color: #fbbf24; }
.cl-firstmove-tone-red    .cl-firstmove-action strong { color: #f87171; }
.cl-firstmove-why {
    font-size: 12px;
    line-height: 1.55;
    color: var(--txt-muted, rgba(255,255,255,.65));
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}


/* =========================================================
   14. FALLBACK CARDS — soft-landing options
   ========================================================= */
.cl-fallback-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.cl-fallback-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255,255,255,.022);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition:
        background var(--cl-dur-base) var(--cl-ease-out),
        border-color var(--cl-dur-base) var(--cl-ease-out),
        transform var(--cl-dur-base) var(--cl-ease-out),
        box-shadow var(--cl-dur-base) var(--cl-ease-out);
}
.cl-fallback-card:hover {
    background: rgba(56,189,248,.05);
    border-color: rgba(56,189,248,.28);
    transform: translateX(4px);
    box-shadow:
        0 1px 0 rgba(56,189,248,.08) inset,
        0 12px 32px -16px rgba(56,189,248,.32);
}
.cl-fallback-card:hover .cl-fallback-arrow {
    transform: translateX(4px);
    color: var(--data-blue, #38bdf8);
    opacity: 1;
}
.cl-fallback-body { flex: 1; min-width: 0; }
.cl-fallback-combo {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt, #fff);
    margin-bottom: 5px;
    letter-spacing: -0.005em;
}
.cl-fallback-meta {
    font-size: 11px;
    color: var(--txt-muted, rgba(255,255,255,.5));
    margin-bottom: 7px;
    letter-spacing: 0.02em;
}
.cl-fallback-why {
    font-size: 12px;
    line-height: 1.5;
    color: var(--txt-muted, rgba(255,255,255,.72));
}
.cl-fallback-arrow {
    flex: 0 0 20px;
    color: var(--data-blue, #38bdf8);
    font-size: 18px;
    opacity: .55;
    transition:
        transform var(--cl-dur-base) var(--cl-ease-out),
        opacity var(--cl-dur-base) var(--cl-ease-out),
        color var(--cl-dur-base) var(--cl-ease-out);
}


/* =========================================================
   15. CAVEATS — quiet, intentional honesty
   ========================================================= */
.cl-caveats { background: rgba(255,255,255,.014); }
.cl-caveat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cl-caveat-list li {
    position: relative;
    padding: 8px 0 8px 20px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--txt-muted, rgba(255,255,255,.62));
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: color var(--cl-dur-micro) var(--cl-ease-out);
}
.cl-caveat-list li:hover { color: rgba(255,255,255,.78); }
.cl-caveat-list li:last-child { border-bottom: 0; }
.cl-caveat-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mint, #6ee7b7);
    opacity: .6;
}
.cl-caveat-list strong { color: var(--txt, #fff); }
.cl-caveat-list em {
    color: var(--mint, #6ee7b7);
    font-style: normal;
}


/* =========================================================
   16. KEYFRAMES — motion vocabulary
   All on expo-out easings — that "decelerating into place"
   feel that signals system response, not decoration.
   ========================================================= */

@keyframes clFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes clStaggerIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes clHeroIn {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes clCardIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes clVerdictIn {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.985);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes clVerdictGlowIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* One-shot pulse: punctuates the verdict reveal, then quiet */
@keyframes clVerdictPulse {
    0%, 100% {
        box-shadow: var(--cl-shadow-card);
    }
    35% {
        box-shadow:
            var(--cl-shadow-card),
            0 0 0 4px rgba(110,231,183,.06),
            0 0 60px -10px rgba(110,231,183,.4);
    }
}
@keyframes clVerdictPulseBlue {
    0%, 100% { box-shadow: var(--cl-shadow-card); }
    35% { box-shadow: var(--cl-shadow-card), 0 0 0 4px rgba(56,189,248,.06), 0 0 60px -10px rgba(56,189,248,.4); }
}
@keyframes clVerdictPulseYellow {
    0%, 100% { box-shadow: var(--cl-shadow-card); }
    35% { box-shadow: var(--cl-shadow-card), 0 0 0 4px rgba(251,191,36,.05), 0 0 60px -10px rgba(251,191,36,.32); }
}
@keyframes clVerdictPulseRed {
    0%, 100% { box-shadow: var(--cl-shadow-card); }
    35% { box-shadow: var(--cl-shadow-card), 0 0 0 4px rgba(248,113,113,.05), 0 0 60px -10px rgba(248,113,113,.32); }
}

@keyframes clDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes clChipIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes clPulseLoading {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@keyframes clFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}


/* =========================================================
   17. MOBILE — keep polish, scale gracefully
   ========================================================= */
@media (max-width: 640px) {
    .cl-hero { padding: 40px 0 28px; }
    .cl-hero-title { font-size: 28px; }
    .cl-form { margin-bottom: 40px; }

    .cl-verdict { padding: 26px 22px; border-radius: 14px; }
    .cl-verdict-headline { font-size: 24px; }
    .cl-verdict-stats { gap: 18px; }
    .cl-stat-val { font-size: 17px; }

    .cl-section { padding: 20px; border-radius: 12px; }
    .cl-section-title { font-size: 17px; }

    .cl-winner-grid { grid-template-columns: 1fr; }

    .cl-cta-row { flex-direction: column; align-items: stretch; }
    .cl-cta { justify-content: center; padding: 14px 22px; }
    .cl-cta-hint { text-align: center; }

    .cl-brief-title { font-size: 24px; }
    .cl-brief-meta-desc { max-width: 100%; }

    /* Snappier stagger on mobile */
    .cl-brief .cl-section:nth-of-type(1) { animation-delay: 240ms; }
    .cl-brief .cl-section:nth-of-type(2) { animation-delay: 300ms; }
    .cl-brief .cl-section:nth-of-type(3) { animation-delay: 360ms; }
    .cl-brief .cl-section:nth-of-type(4) { animation-delay: 420ms; }
    .cl-brief .cl-section:nth-of-type(5) { animation-delay: 480ms; }
    .cl-brief .cl-section:nth-of-type(6) { animation-delay: 540ms; }
}