/* =====================================================================================================================
   dashboardACE  -  Ask AI, and the branding studio

   ASK AI is always set in the site's deep ink glass, whatever the dashboard's theme: frosted over the dashboard it
   sits beside, lit by a slow indigo aurora, ringed in the indigo-to-amber edge the pricing cards use, with a light
   that follows the pointer. It docks on the right on a desktop (the dashboard stays usable beside it), widens on
   request, and becomes a full-screen sheet on a phone that follows the keyboard.

   THE BRANDING STUDIO (brand panel, heading and image editors, the image well) uses the site's own tokens, so it
   follows the light/dark switch like every other dialog.
   ===================================================================================================================== */

.ai-dock {
    --ai-ink: #F5F6FC;
    --ai-ink-2: rgba(228, 231, 247, 0.82);
    --ai-mute: rgba(186, 192, 222, 0.6);
    --ai-line: rgba(255, 255, 255, 0.09);
    --ai-line-2: rgba(255, 255, 255, 0.16);
    --ai-glass: rgba(255, 255, 255, 0.055);
    --ai-glass-2: rgba(255, 255, 255, 0.09);
    --ai-amber: #FFB224;
    --ai-grad: linear-gradient(135deg, #6A63F6 0%, #7C5CF5 55%, #9B5CF6 100%);
    --ai-w: 468px;

    position: fixed; inset: 0; z-index: 120; pointer-events: none; display: none;
    font-family: var(--font); -webkit-font-smoothing: antialiased;
}
.ai-dock.mounted { display: block; }

.ai-scrim { position: absolute; inset: 0; background: rgba(8, 10, 22, 0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.ai-dock.open.wide .ai-scrim { opacity: 1; pointer-events: auto; }


/* ---- The glass ---------------------------------------------------------------------------------------------------- */

.ai-panel {
    position: absolute; top: 14px; right: 14px; bottom: 14px; width: min(var(--ai-w), calc(100vw - 28px));
    display: flex; flex-direction: column; isolation: isolate; overflow: hidden; pointer-events: auto;
    border-radius: 28px; color: var(--ai-ink);
    background:
        radial-gradient(440px circle at var(--mx, 85%) var(--my, -10%), rgba(137, 131, 255, 0.16), transparent 60%),
        linear-gradient(165deg, rgba(36, 40, 76, 0.74) 0%, rgba(18, 21, 42, 0.8) 46%, rgba(11, 13, 28, 0.88) 100%);
    backdrop-filter: blur(34px) saturate(180%); -webkit-backdrop-filter: blur(34px) saturate(180%);
    box-shadow: 0 50px 120px -30px rgba(4, 5, 18, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateX(calc(100% + 40px)) scale(0.98); opacity: 0;
    transition: transform 0.55s cubic-bezier(.2, .9, .2, 1), opacity 0.35s ease, width 0.45s cubic-bezier(.2, .9, .2, 1);
}
.ai-dock.open .ai-panel { transform: none; opacity: 1; }
.ai-dock.wide .ai-panel { width: min(940px, calc(100vw - 28px)); }

/* The edge: indigo at the top, amber at the foot, like the pricing cards. */
.ai-panel::before {
    content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(155deg, rgba(165, 161, 255, 0.75), rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0.03) 64%, rgba(255, 178, 36, 0.5));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* The site's fine diagonal rules, at the top and the foot. */
.ai-panel::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 15px);
    -webkit-mask: linear-gradient(180deg, #000, transparent 20%, transparent 82%, #000); mask: linear-gradient(180deg, #000, transparent 20%, transparent 82%, #000);
}

.ai-aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ai-aurora i { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; transition: opacity 0.6s ease; }
.ai-aurora i:nth-child(1) { width: 360px; height: 360px; top: -140px; right: -90px; background: #6A63F6; opacity: 0.5; animation: aiDriftA 16s ease-in-out infinite alternate; }
.ai-aurora i:nth-child(2) { width: 300px; height: 300px; top: 42%; left: -170px; background: #8B5CF6; opacity: 0.28; animation: aiDriftB 19s ease-in-out infinite alternate; }
.ai-aurora i:nth-child(3) { width: 240px; height: 240px; bottom: -140px; right: 8%; background: #FFB224; opacity: 0.13; animation: aiDriftC 23s ease-in-out infinite alternate; }
.ai-dock.thinking .ai-aurora i:nth-child(1) { opacity: 0.72; animation-duration: 5s; }
.ai-dock.thinking .ai-aurora i:nth-child(3) { opacity: 0.22; }
.ai-glare { position: absolute; inset: 0 0 auto 0; height: 160px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent); }


/* ---- Header and modes -------------------------------------------------------------------------------------------- */

.ai-head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 12px 18px; }
.ai-orb, .ai-fab-orb, .ai-avatar { position: relative; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: var(--ai-amber, #FFB224);
    background: radial-gradient(circle at 30% 25%, #343A6E, #0D1020 72%); }
.ai-orb { width: 42px; height: 42px; font-size: 16px; box-shadow: 0 10px 30px -8px rgba(106, 99, 246, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.ai-orb span, .ai-fab-orb::before {
    content: ''; position: absolute; inset: -2px; border-radius: 50%; padding: 2px;
    background: conic-gradient(from 0deg, #6A63F6, #22D3EE, #8B5CF6, #FFB224, #6A63F6);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: aiSpin 6s linear infinite;
}
.ai-dock.thinking .ai-orb span { animation-duration: 1.1s; }
.ai-orb i { position: relative; }

.ai-id { flex: 1; min-width: 0; }
.ai-id h2 { margin: 0; font: 600 17px/1.2 var(--font); color: #fff; letter-spacing: -0.02em; }
.ai-id p { display: flex; align-items: center; gap: 6px; margin: 3px 0 0; font-size: 12px; line-height: 1.3; color: var(--ai-mute); white-space: nowrap; overflow: hidden; }
.ai-model { color: var(--ai-ink-2); font-weight: 600; flex-shrink: 0; }
.ai-about { overflow: hidden; text-overflow: ellipsis; }
.ai-live { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.18); }
.ai-dock.thinking .ai-live { background: var(--ai-amber); box-shadow: 0 0 0 3px rgba(255, 178, 36, 0.2); animation: aiBlink 0.9s ease-in-out infinite; }

.ai-tools { display: flex; gap: 2px; }
.ai-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ai-ink-2); font-size: 14px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.ai-icon:hover { background: var(--ai-glass-2); border-color: var(--ai-line); color: #fff; }
.ai-icon:focus-visible, .ai-modes button:focus-visible, .ai-starter:focus-visible, .ai-btn:focus-visible, .ai-offer:focus-visible, .ai-mini:focus-visible { outline: 2px solid #A5A1FF; outline-offset: 2px; }

.ai-modes { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 0 16px 4px; padding: 4px; border-radius: 15px; background: rgba(0, 0, 0, 0.24); border: 1px solid var(--ai-line); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35); }
.ai-modes button { position: relative; z-index: 1; height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; background: none; color: var(--ai-mute); font: 600 13.5px/1 var(--font); cursor: pointer; transition: color 0.25s ease; }
.ai-modes button:hover, .ai-modes button[aria-selected="true"] { color: #fff; }
.ai-mode-ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 11px;
    background: linear-gradient(135deg, rgba(106, 99, 246, 0.6), rgba(139, 92, 246, 0.42)); border: 1px solid rgba(165, 161, 255, 0.38);
    box-shadow: 0 8px 24px -10px rgba(106, 99, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22); transition: transform 0.45s cubic-bezier(.3, 1.3, .5, 1), background 0.3s ease; }
.ai-dock[data-mode="chart"] .ai-mode-ink { transform: translateX(100%); background: linear-gradient(135deg, rgba(255, 178, 36, 0.4), rgba(106, 99, 246, 0.45)); border-color: rgba(255, 208, 138, 0.35); }


/* ---- The thread ---------------------------------------------------------------------------------------------------- */

.ai-thread {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 18px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent); mask: linear-gradient(180deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent);
}
.ai-thread::-webkit-scrollbar { width: 6px; }
.ai-thread::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 6px; }

/* The empty state: an orb, a greeting, four ways in. */
.ai-hello { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 4px 4px; animation: aiRise 0.6s cubic-bezier(.2, .8, .2, 1) both; }
.ai-hello-orb { position: relative; width: 92px; height: 92px; margin: 8px 0 22px; }
.ai-hello-orb .core { position: absolute; inset: 8px; display: grid; place-items: center; border-radius: 50%; font-size: 27px; color: var(--ai-amber);
    background: radial-gradient(circle at 30% 25%, #3A4078, #0D1020 72%); box-shadow: 0 24px 60px -14px rgba(106, 99, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.24); }
.ai-hello-orb .core::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 2px;
    background: conic-gradient(from 90deg, #6A63F6, #22D3EE, #8B5CF6, #FFB224, #6A63F6);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: aiSpin 7s linear infinite; }
.ai-hello-orb .ring { position: absolute; inset: 2px; border-radius: 50%; border: 1.5px solid rgba(137, 131, 255, 0.45); animation: aiRing 2.8s ease-out infinite; }
.ai-hello-orb .ring.r2 { animation-delay: 1.4s; }
.ai-hello h3 { margin: 0 0 8px; font: 600 22px/1.2 var(--font); letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.ai-hello p { max-width: 370px; margin: 0 auto 22px; font-size: 14px; line-height: 1.55; color: var(--ai-ink-2); text-wrap: pretty; }
.ai-hello p strong { color: #fff; font-weight: 600; }

.ai-starters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ai-starter {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 96px; padding: 14px; text-align: left;
    border-radius: 18px; border: 1px solid var(--ai-line); background: var(--ai-glass); color: var(--ai-ink); font: 500 13.5px/1.4 var(--font); cursor: pointer;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.35s cubic-bezier(.3, 1.3, .5, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
    animation: aiRise 0.6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 140ms);
}
.ai-starter i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; font-size: 13px; color: #C8C5FF; background: rgba(106, 99, 246, 0.22); border: 1px solid rgba(165, 161, 255, 0.26); }
.ai-starter:hover { transform: translateY(-3px); background: var(--ai-glass-2); border-color: rgba(165, 161, 255, 0.42); box-shadow: 0 18px 40px -18px rgba(106, 99, 246, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.ai-dock[data-mode="chart"] .ai-starter i { color: #FFD08A; background: rgba(255, 178, 36, 0.14); border-color: rgba(255, 178, 36, 0.3); }
.ai-dock[data-mode="chart"] .ai-starter:hover { border-color: rgba(255, 178, 36, 0.45); box-shadow: 0 18px 40px -18px rgba(255, 178, 36, 0.55); }

/* Messages. */
.ai-msg { display: flex; gap: 10px; margin: 0 0 18px; }
.ai-msg.fresh { animation: aiRise 0.45s cubic-bezier(.2, .8, .2, 1) both; }
.ai-msg.user { justify-content: flex-end; }
.ai-bubble { max-width: 86%; padding: 11px 15px; border-radius: 20px 20px 6px 20px; background: var(--ai-grad); color: #fff; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere;
    box-shadow: 0 14px 34px -14px rgba(106, 99, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.28); }
.ai-tag { display: inline-flex; align-items: center; gap: 5px; margin-right: 8px; padding: 4px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font: 700 10px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px; }

.ai-avatar { width: 30px; height: 30px; margin-top: 2px; font-size: 12px; border: 1px solid rgba(165, 161, 255, 0.3); box-shadow: 0 6px 18px -6px rgba(106, 99, 246, 0.85); }
.ai-body { flex: 1; min-width: 0; }
.ai-card { border-radius: 6px 20px 20px 20px; background: var(--ai-glass); border: 1px solid var(--ai-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -26px rgba(0, 0, 0, 0.85); }
.ai-answer { padding: 12px 15px; }

/* The answer's text: a strict markdown subset (chat.js). */
.ai-md { font-size: 14.5px; line-height: 1.62; color: var(--ai-ink-2); overflow-wrap: anywhere; }
.ai-md > * + * { margin-top: 9px; }
.ai-md p { margin: 0; color: inherit; }
.ai-md strong { color: #fff; font-weight: 650; }
.ai-md em { color: #E4E2FF; }
.ai-md code { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #E4E2FF; font: 500 12.5px/1.4 var(--mono); }
.ai-md pre { margin: 0; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ai-line); overflow-x: auto; }
.ai-md pre code { padding: 0; background: none; }
.ai-md ul, .ai-md ol { margin: 0; padding-left: 20px; }
.ai-md li + li { margin-top: 4px; }
.ai-md li::marker { color: #A5A1FF; }
.ai-md h4 { margin: 0; font: 650 15.5px/1.3 var(--font); color: #fff; letter-spacing: -0.01em; }
.ai-md h5 { margin: 0; font: 700 11.5px/1.3 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: #A5A1FF; }
.ai-md blockquote { margin: 0; padding-left: 12px; border-left: 2px solid #8983FF; }
.ai-md hr { border: 0; height: 1px; background: var(--ai-line); }
.ai-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--ai-line); background: rgba(0, 0, 0, 0.18); }
.ai-md table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ai-md th { padding: 9px 12px; text-align: left; white-space: nowrap; font: 700 10.5px/1.2 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ai-mute); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--ai-line); }
.ai-md td { padding: 8px 12px; color: var(--ai-ink); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ai-md td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-md tr:last-child td { border-bottom: 0; }
.ai-lead { margin: 2px 0 10px; }

/* The cursor while an answer streams, at the end of whatever block is being written. */
.ai-md.streaming > :last-child:not(ul):not(ol):not(.ai-table-wrap):not(pre)::after,
.ai-md.streaming > ul:last-child > li:last-child::after,
.ai-md.streaming > ol:last-child > li:last-child::after {
    content: ''; display: inline-block; width: 8px; height: 1.05em; margin-left: 3px; vertical-align: -2px; border-radius: 2px;
    background: linear-gradient(180deg, #C8C5FF, #6A63F6); box-shadow: 0 0 12px rgba(137, 131, 255, 0.9); animation: aiCaret 0.9s steps(2) infinite;
}

.ai-typing { display: flex; align-items: center; gap: 5px; height: 23px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #C8C5FF, #6A63F6); animation: aiBounce 1.2s ease-in-out infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
.ai-typing em { margin-left: 8px; font-style: normal; font-size: 13px; color: transparent;
    background: linear-gradient(90deg, rgba(200, 197, 255, 0.45), #fff, rgba(200, 197, 255, 0.45)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: aiShimmer 1.6s linear infinite; }

/* Charts the model offers, as buttons. */
.ai-offers { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ai-offers:empty { display: none; }
.ai-offer { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; text-align: left; cursor: pointer;
    border-radius: 16px; border: 1px solid rgba(255, 178, 36, 0.28); background: linear-gradient(120deg, rgba(255, 178, 36, 0.12), rgba(106, 99, 246, 0.13)); color: #fff; font: 500 13.5px/1.35 var(--font);
    transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(.3, 1.3, .5, 1); animation: aiRise 0.45s cubic-bezier(.2, .8, .2, 1) both; }
.ai-offer em { display: block; margin-bottom: 4px; font: 700 10.5px/1 var(--font); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #FFD08A; }
.ai-offer-ico { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 178, 36, 0.18); color: #FFB224; }
.ai-offer > i { margin-left: auto; color: rgba(255, 255, 255, 0.5); transition: transform 0.25s ease, color 0.25s ease; }
.ai-offer:hover { border-color: rgba(255, 178, 36, 0.55); box-shadow: 0 14px 34px -16px rgba(255, 178, 36, 0.6); transform: translateY(-1px); }
.ai-offer:hover > i { transform: translateX(3px); color: #fff; }

.ai-actions { display: flex; align-items: center; gap: 2px; min-height: 30px; margin-top: 4px; opacity: 0; transition: opacity 0.2s ease; }
.ai-actions:empty { min-height: 0; margin: 0; }
.ai-msg:hover .ai-actions, .ai-msg:focus-within .ai-actions, .ai-msg:last-child .ai-actions { opacity: 1; }
.ai-mini { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 0; border-radius: 9px; background: none; color: var(--ai-mute); font: 600 12px/1 var(--font); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ai-mini:hover { background: var(--ai-glass-2); color: #fff; }
.ai-note { margin-left: 6px; font-size: 11.5px; color: var(--ai-mute); }

.ai-err { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; font-size: 14px; color: #FFDADA;
    border-color: rgba(255, 107, 107, 0.35); background: linear-gradient(120deg, rgba(255, 107, 107, 0.13), rgba(255, 255, 255, 0.03)); }
.ai-err > i { color: #FF8A8A; }
.ai-err > span { flex: 1; min-width: 160px; }
.ai-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 12.5px/1 var(--font); cursor: pointer; }
.ai-chip:hover { background: rgba(255, 255, 255, 0.16); }

/* A chart being designed, then the chart. */
.ai-building { padding: 14px 15px 16px; }
.ai-steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--ai-mute); }
.ai-steps span { display: inline-flex; align-items: center; gap: 6px; transition: color 0.4s ease; }
.ai-steps span.on { color: #fff; }
.ai-steps span.on i { color: #FFB224; }
.ai-skel { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; border-bottom: 1px solid var(--ai-line); }
.ai-skel b { flex: 1; border-radius: 6px 6px 2px 2px; transform-origin: bottom; background: linear-gradient(180deg, rgba(137, 131, 255, 0.5), rgba(106, 99, 246, 0.06)); animation: aiGrow 1.3s ease-in-out infinite alternate; }
.ai-skel b:nth-child(2n) { animation-delay: 0.2s; }
.ai-skel b:nth-child(3n) { animation-delay: 0.4s; }

.ai-chart-card { padding: 10px; }
.ai-chart-card .dash.dash-inset { padding: 6px; border-radius: 14px; }
.ai-chart-card .dash .w { box-shadow: none; }
.ai-chart-card .w-chart { height: 250px; }
.ai-dock.wide .ai-chart-card .w-chart { height: 340px; }
.ai-chart-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ai-chart-actions .ai-btn.icon:first-of-type { margin-left: auto; }
.ai-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--ai-line-2); background: var(--ai-glass-2); color: #fff; font: 600 13px/1 var(--font); cursor: pointer;
    transition: background 0.2s ease, transform 0.25s cubic-bezier(.3, 1.3, .5, 1), box-shadow 0.25s ease; }
.ai-btn:hover { background: rgba(255, 255, 255, 0.15); }
.ai-btn:active { transform: scale(0.97); }
.ai-btn.primary { border-color: transparent; background: var(--ai-grad); box-shadow: 0 12px 28px -12px rgba(106, 99, 246, 1), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.ai-btn.primary:hover { box-shadow: 0 16px 34px -12px rgba(106, 99, 246, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.ai-btn.primary:disabled { cursor: default; background: rgba(61, 220, 151, 0.16); border-color: rgba(61, 220, 151, 0.35); color: #3DDC97; box-shadow: none; }
.ai-btn.icon { width: 36px; padding: 0; justify-content: center; }

.ai-jump { position: absolute; left: 50%; bottom: 128px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ai-line-2);
    background: rgba(22, 25, 50, 0.82); color: #fff; cursor: pointer; opacity: 0; pointer-events: none; transform: translate(-50%, 10px);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8); transition: opacity 0.25s ease, transform 0.3s ease; }
.ai-dock.scrolled-up .ai-jump { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }


/* ---- The composer ------------------------------------------------------------------------------------------------ */

.ai-composer { position: relative; padding: 10px 14px 12px; }
.ai-field { display: flex; align-items: flex-end; gap: 8px; padding: 7px 7px 7px 17px; border-radius: 24px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--ai-line-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -24px rgba(0, 0, 0, 0.9); transition: border-color 0.25s ease, box-shadow 0.3s ease, background 0.25s ease; }
.ai-field:focus-within { border-color: rgba(165, 161, 255, 0.62); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 4px rgba(106, 99, 246, 0.2), 0 20px 50px -20px rgba(106, 99, 246, 0.85); }
.ai-dock[data-mode="chart"] .ai-field:focus-within { border-color: rgba(255, 208, 138, 0.55); box-shadow: 0 0 0 4px rgba(255, 178, 36, 0.14), 0 20px 50px -20px rgba(255, 178, 36, 0.5); }
.ai-field textarea { flex: 1; min-width: 0; min-height: 24px; max-height: 180px; padding: 8px 0; resize: none; border: 0; outline: 0; background: none; color: #fff; font: 400 15px/1.5 var(--font); }
.ai-field textarea::placeholder { color: var(--ai-mute); }
.ai-field textarea:focus, .ai-field textarea:focus-visible { outline: none; box-shadow: none; }
.ai-send { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font-size: 15px; background: rgba(255, 255, 255, 0.12);
    transition: transform 0.3s cubic-bezier(.3, 1.4, .5, 1), background 0.25s ease, box-shadow 0.25s ease; }
.ai-dock.has-text .ai-send, .ai-dock.busy .ai-send { background: var(--ai-grad); box-shadow: 0 10px 24px -8px rgba(106, 99, 246, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.ai-send:hover { transform: scale(1.07); }
.ai-send:active { transform: scale(0.94); }
.ai-dock.busy .ai-send { animation: aiPulse 1.6s ease-out infinite; }
.ai-fine { margin: 8px 6px 0; font-size: 11.5px; line-height: 1.4; color: var(--ai-mute); text-align: center; }
.ai-fine kbd { padding: 2px 5px; border-radius: 5px; border: 1px solid var(--ai-line-2); background: rgba(255, 255, 255, 0.06); color: var(--ai-ink-2); font: 600 10.5px/1 var(--font); }


/* ---- The floating button on a dashboard ------------------------------------------------------------------------------ */

.ai-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 45; display: inline-flex; align-items: center; gap: 11px; height: 56px; padding: 0 22px 0 8px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; color: #fff; font: 600 15px/1 var(--font, system-ui);
    background: linear-gradient(160deg, rgba(36, 40, 76, 0.84), rgba(13, 16, 32, 0.92)); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 24px 50px -16px rgba(13, 16, 32, 0.75), 0 0 44px -12px rgba(106, 99, 246, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.4s cubic-bezier(.3, 1.4, .5, 1), opacity 0.3s ease, box-shadow 0.3s ease;
}
.ai-fab:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -18px rgba(13, 16, 32, 0.8), 0 0 60px -10px rgba(106, 99, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.ai-fab-orb { width: 40px; height: 40px; font-size: 15px; }
.ai-fab-orb i { position: relative; }
html.ai-open .ai-fab { opacity: 0; transform: translateY(14px) scale(0.9); pointer-events: none; }
.dash[data-editing="true"] .ai-fab { display: none; }


/* ---- Phones: a full-screen sheet that follows the keyboard ------------------------------------------------------------- */

@media (max-width: 700px) {
    .ai-panel { top: var(--ai-vvt, 0px); right: 0; left: 0; bottom: auto; width: 100%; height: var(--ai-vvh, 100dvh); border-radius: 0; transform: translateY(48px); }
    .ai-dock.open .ai-panel { transform: none; }
    .ai-dock.wide .ai-panel { width: 100%; }
    .ai-panel::before { display: none; }
    .ai-head { padding: calc(10px + env(safe-area-inset-top)) 8px 8px 14px; }
    .ai-orb { width: 38px; height: 38px; }
    .ai-desk { display: none !important; }
    .ai-modes { margin: 0 12px 2px; }
    .ai-thread { padding: 14px 12px 16px; }
    .ai-hello h3 { font-size: 20px; }
    .ai-starters { grid-template-columns: 1fr; gap: 8px; }
    .ai-starter { flex-direction: row; align-items: center; min-height: 0; padding: 12px; }
    .ai-starter i { flex-shrink: 0; }
    .ai-bubble { max-width: 90%; }
    .ai-avatar { display: none; }
    .ai-card { border-radius: 18px; }
    .ai-chart-card .w-chart { height: 220px; }
    .ai-composer { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
    .ai-field textarea { font-size: 16px; }
    .ai-fine { font-size: 11px; margin-top: 6px; }
    .ai-jump { bottom: 110px; }
    .ai-actions { opacity: 1; }
    html.ai-open, html.ai-open body { overflow: hidden; }

    .ai-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 56px; padding: 0; justify-content: center; }
    .ai-fab-text { display: none; }
}

@media (hover: none) { .ai-actions { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .ai-aurora i, .ai-orb span, .ai-fab-orb::before, .ai-hello-orb .ring, .ai-hello-orb .core::before, .ai-skel b, .ai-dock.busy .ai-send { animation: none !important; }
    .ai-panel, .ai-msg.fresh, .ai-starter, .ai-hello, .ai-offer { transition: none; animation: none; }
}

@media print { .ai-dock { display: none !important; } }


@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiDriftA { to { transform: translate(-120px, 90px) scale(1.15); } }
@keyframes aiDriftB { to { transform: translate(110px, -80px) scale(0.9); } }
@keyframes aiDriftC { to { transform: translate(-90px, -60px) scale(1.2); } }
@keyframes aiRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes aiRing { from { transform: scale(0.9); opacity: 1; } to { transform: scale(1.55); opacity: 0; } }
@keyframes aiBlink { 50% { opacity: 0.35; } }
@keyframes aiBounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.55; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes aiShimmer { to { background-position: -200% 0; } }
@keyframes aiCaret { 50% { opacity: 0; } }
@keyframes aiGrow { from { transform: scaleY(0.55); opacity: 0.6; } to { transform: scaleY(1); opacity: 1; } }
@keyframes aiPulse { 0% { box-shadow: 0 0 0 0 rgba(106, 99, 246, 0.7), 0 10px 24px -8px rgba(106, 99, 246, 1); } 100% { box-shadow: 0 0 0 14px rgba(106, 99, 246, 0), 0 10px 24px -8px rgba(106, 99, 246, 1); } }


/* =====================================================================================================================
   THE BRANDING STUDIO  -  brand panel, heading and image editors (js/brand.js), in the site's own tokens
   ===================================================================================================================== */

.modal.brand-modal { max-width: 1080px; }
.brand-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.bs-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bs-form .field { margin-bottom: 12px; }
.bs-sec + .bs-sec { padding-top: 20px; border-top: 1px dashed var(--line-2); }
.bs-sec h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 15.5px/1.2 var(--font); color: var(--ink); letter-spacing: -0.01em; }
.bs-sec h4 i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; color: var(--accent); background: var(--accent-soft); }
.bs-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.bs-row > label { font: 600 13.5px/1 var(--font); color: var(--ink-2); }

.bs-preview { position: sticky; top: 0; min-width: 0; }
.bs-preview-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font: 700 11px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 4px rgba(61, 220, 151, 0.18); animation: aiBlink 2s ease-in-out infinite; }
.bs-preview-box { overflow: hidden; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bs-dash.dash { min-height: 0; padding: 18px; border-radius: 0; }
.bs-dash .dash-header { margin-bottom: 14px; }
.bs-dash .dash-title { font-size: min(var(--d-title-size), 24px); }
.bs-dash .dash-header.has-cover { min-height: 170px; padding: 20px; }
.bs-dash .dash-grid { gap: 10px; }
.bs-ghost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bs-ghost b { height: 56px; border-radius: var(--d-radius); background: var(--d-card); border: 1px solid var(--d-card-border); box-shadow: var(--d-card-shadow); }
.bs-ghost b.wide { grid-column: span 2; height: 110px; }
.bs-ghost b.wide2 { height: 110px; }
.bs-ghost-card { min-height: 64px; border-radius: var(--d-radius); border: 1px dashed var(--d-card-border); }
.bs-tip { margin-top: 12px; }
.bs-tip i { color: var(--accent); margin-right: 4px; }

/* Segmented controls. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--input); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; min-width: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font: 600 13px/1 var(--font); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 2px rgba(15, 18, 34, 0.08), 0 4px 12px -6px rgba(15, 18, 34, 0.3); }
[data-theme="dark"] .seg button.on { background: var(--bg-3); color: #fff; }

/* The image well: tap, drop or paste; the library to reuse what was uploaded before. */
.img-well { display: block; border-radius: 16px; outline: none; }
.iw-stage { position: relative; display: grid; place-items: center; height: 132px; overflow: hidden; cursor: pointer; border-radius: 16px; border: 1.5px dashed var(--line-2); background: var(--input);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.img-well[data-kind="cover"] .iw-stage { height: 150px; }
.img-well[data-kind="image"] .iw-stage { height: 170px; }
.iw-stage:hover, .img-well:focus-visible .iw-stage { border-color: var(--accent); background: var(--accent-soft); }
.img-well.over .iw-stage { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.iw-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; object-fit: contain; }
.img-well[data-kind="cover"] .iw-img { padding: 0; object-fit: cover; }
.img-well.has-image .iw-img { display: block; }
.img-well.has-image .iw-stage { border-style: solid; border-color: var(--line); background: repeating-conic-gradient(var(--bg-2) 0 25%, var(--card) 0 50%) 0 0 / 16px 16px; }
.img-well.has-image .iw-empty { display: none; }
.iw-empty { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.iw-empty strong { font: 600 14.5px/1.3 var(--font); color: var(--ink); }
.iw-ico { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 12px; background: var(--card); color: var(--accent); box-shadow: var(--shadow-sm); }
.iw-busy, .iw-drop { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px; font: 600 14px var(--font); color: var(--ink);
    background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.iw-busy .spinner { width: 24px; height: 24px; border-width: 2px; }
.img-well.busy .iw-busy { display: flex; }
.img-well.over .iw-drop { display: flex; color: var(--accent); }
.iw-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.iw-bar button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink-2); font: 600 12.5px/1 var(--font); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.iw-bar button:hover { border-color: var(--ink); color: var(--ink); }
.iw-bar .iw-remove { display: none; }
.img-well.has-image .iw-bar .iw-remove { display: inline-flex; }
.iw-library { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--input); border: 1px solid var(--line); }
.iw-library[hidden] { display: none; }
.iw-lib-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 13.5px; color: var(--ink); }
.iw-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; }
.iw-lib-item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; border: 2px solid transparent; background: repeating-conic-gradient(var(--bg-2) 0 25%, var(--card) 0 50%) 0 0 / 12px 12px; }
.iw-lib-item.on { border-color: var(--accent); }
.iw-use { position: absolute; inset: 0; padding: 6px; border: 0; background: none; cursor: pointer; }
.iw-use img { width: 100%; height: 100%; object-fit: contain; }
.iw-del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(13, 16, 32, 0.74); color: #fff; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; }
.iw-lib-item:hover .iw-del, .iw-del:focus-visible { opacity: 1; }
@media (hover: none) { .iw-del { opacity: 1; } }

/* Heading styles, each shown in the dashboard's own theme. */
.el-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.el-style { display: flex; flex-direction: column; gap: 6px; padding: 6px; text-align: left; cursor: pointer; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.el-style:hover { border-color: var(--line-2); }
.el-style.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.el-style em { padding: 2px 4px 4px; font: 600 12px/1 var(--font); font-style: normal; color: var(--ink-2); }
.dash.dash-inset.es-sample { display: flex; align-items: center; min-height: 72px; padding: 10px; border-radius: 10px; overflow: hidden; pointer-events: none; }
.es-sample .el-label { width: 100%; padding: 2px; }
.es-sample .el-label[data-style="section"] { padding: 2px 2px 6px; }
.es-sample .el-label[data-style="callout"], .es-sample .el-label[data-style="banner"] { padding: 9px 11px; }
.es-sample .el-text { font-size: 13.5px !important; }
.es-sample .el-label[data-style="eyebrow"] .el-text { font-size: 10px !important; padding: 6px 9px; }
.es-sample .el-label[data-style="section"] .el-words::before { margin-bottom: 6px; width: 22px; }

@media (max-width: 860px) {
    .brand-studio { grid-template-columns: 1fr; gap: 20px; }
    .bs-preview { position: static; order: -1; }
    .bs-dash .dash-header.has-cover { min-height: 140px; }
    .bs-ghost { display: none; }
}

@media (max-width: 560px) {
    .bs-row { flex-direction: column; align-items: stretch; }
    .seg { width: 100%; }
    .seg button { flex: 1; padding: 0 8px; }
    .el-styles { grid-template-columns: 1fr 1fr; }
}


/* =====================================================================================================================
   ASK AI ON THE HOME PAGE AND PRICING
   The hero's final act (heroanim.js askAct), the "Talk to your data" section and its live chat (heroanim.js mock),
   and the Ask AI highlight on every price card. The conversation is a compact version of the real panel above:
   the same ink glass, orb, gradient bubbles and amber chart offer. State classes go on the host (the hero stage or
   #AskMock): s-ask, s-asked, s-typing, s-answer, s-offer, s-press, s-chart, s-ask-out.
   ===================================================================================================================== */

.ha-ask {
    position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 8; width: min(372px, calc(100% - 24px));
    display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border-radius: 22px; color: #F5F6FC; font-family: var(--font); text-align: left;
    background: radial-gradient(360px circle at 85% -10%, rgba(137, 131, 255, 0.3), transparent 60%), linear-gradient(165deg, rgba(36, 40, 76, 0.86), rgba(13, 16, 32, 0.93));
    backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: 0 40px 90px -30px rgba(4, 5, 18, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transform: translateX(calc(100% + 30px)); opacity: 0; transition: transform 0.6s cubic-bezier(.2, .9, .2, 1), opacity 0.4s ease;
}
.ha-ask::before {
    content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(155deg, rgba(165, 161, 255, 0.8), rgba(255, 255, 255, 0.06) 40%, rgba(255, 178, 36, 0.55));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.s-ask > .ha-ask { transform: none; opacity: 1; }
.s-ask-out > .ha-ask { transform: translateX(calc(100% + 30px)); opacity: 0; }
.ha-stage #HeroDemo { transition: opacity 0.4s ease, filter 0.5s ease; }
.ha-stage.s-ask:not(.s-ask-out) #HeroDemo { filter: brightness(0.78) saturate(0.85); }

.hq-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.hq-orb, .hq-av { flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #FFB224; background: radial-gradient(circle at 30% 25%, #343A6E, #0D1020 72%); }
.hq-orb { width: 34px; height: 34px; font-size: 13px; box-shadow: 0 0 0 2px rgba(137, 131, 255, 0.55), 0 8px 22px -6px rgba(106, 99, 246, 0.9); }
.hq-head b { display: block; font: 600 14.5px/1.2 var(--font); color: #fff; }
.hq-head small { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; color: rgba(186, 192, 222, 0.75); }
.hq-live { width: 6px; height: 6px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.18); }

.hq-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 8px 14px; overflow: hidden; }
.hq-user { align-self: flex-end; max-width: 88%; padding: 9px 13px; border-radius: 16px 16px 5px 16px; background: linear-gradient(135deg, #6A63F6, #9B5CF6); color: #fff; font-size: 13px; line-height: 1.45;
    box-shadow: 0 12px 28px -12px rgba(106, 99, 246, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25); opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.2, .8, .2, 1); }
.s-asked .hq-user { opacity: 1; transform: none; }
.hq-ai { display: flex; align-items: flex-start; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.2, .8, .2, 1); }
.s-typing .hq-ai { opacity: 1; transform: none; }
.hq-av { width: 24px; height: 24px; font-size: 10px; border: 1px solid rgba(165, 161, 255, 0.35); }
.hq-card { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 5px 16px 16px 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 12.5px; line-height: 1.55; color: rgba(228, 231, 247, 0.86); }
.hq-md p { margin: 0; color: inherit; font-size: inherit; }
.hq-md ul { margin: 6px 0 0; padding-left: 16px; }
.hq-md li + li { margin-top: 2px; }
.hq-md li::marker { color: #A5A1FF; }
.hq-md b { color: #fff; font-weight: 650; }
.hq-typing { display: flex; gap: 4px; padding: 5px 0; }
.hq-typing i { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #C8C5FF, #6A63F6); animation: aiBounce 1.2s ease-in-out infinite; }
.hq-typing i:nth-child(2) { animation-delay: 0.15s; }
.hq-typing i:nth-child(3) { animation-delay: 0.3s; }
.s-answer .hq-typing { display: none; }

.hq-offer { display: flex; align-items: center; gap: 10px; margin-left: 32px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid rgba(255, 178, 36, 0.3);
    background: linear-gradient(120deg, rgba(255, 178, 36, 0.13), rgba(106, 99, 246, 0.14)); color: #fff; font-size: 12.5px; line-height: 1.3;
    opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.35s cubic-bezier(.3, 1.3, .5, 1), box-shadow 0.3s ease; }
.hq-offer em { display: block; margin-bottom: 3px; font: 700 9.5px/1 var(--font); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #FFD08A; }
.hq-offer-ico { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 178, 36, 0.18); color: #FFB224; }
.hq-offer > i { margin-left: auto; color: rgba(255, 255, 255, 0.5); }
.s-offer .hq-offer { opacity: 1; transform: none; }
.s-press .hq-offer { transform: scale(0.96); box-shadow: 0 0 0 3px rgba(255, 178, 36, 0.35), 0 14px 30px -12px rgba(255, 178, 36, 0.7); }
.s-chart .hq-offer { display: none; }

.hq-chart { display: none; margin-left: 32px; padding: 11px 12px 12px; border-radius: 14px; background: #fff; color: #0F172A; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.85); }
.s-chart .hq-chart { display: block; animation: hqIn 0.5s cubic-bezier(.2, .8, .2, 1) both; }
.hq-chart-title { margin-bottom: 8px; font: 600 12px/1.3 var(--font); color: #0F172A; }
.hq-chart-title i { color: #4F46E5; margin-right: 4px; }
.hq-bar { display: grid; grid-template-columns: minmax(0, 78px) minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; color: #475569; }
.hq-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq-bar b { height: 9px; border-radius: 5px; background: #EEF2F7; overflow: hidden; }
.hq-bar b i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #4F46E5, #8B5CF6); transform-origin: left; animation: hqGrow 0.9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
.hq-bar em { min-width: 44px; text-align: right; font-style: normal; font-weight: 600; color: #0F172A; }

.hq-composer { display: flex; align-items: center; gap: 8px; margin: 6px 12px 12px; padding: 5px 5px 5px 13px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); }
.hq-input { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: #fff; }
.hq-placeholder { color: rgba(186, 192, 222, 0.62); }
.hq-typed:not(:empty)::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #A5A1FF; animation: aiCaret 0.9s steps(2) infinite; }
.hq-send { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; background: linear-gradient(135deg, #6A63F6, #9B5CF6); box-shadow: 0 8px 18px -6px rgba(106, 99, 246, 1); }

@keyframes hqIn { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes hqGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }


/* ---- The hero copy, the feature card, the price cards -------------------------------------------------------------- */

.hero-proof li.proof-ai i { color: #FFB224; background: rgba(255, 178, 36, 0.18); }
.hero-proof li.proof-ai { font-weight: 600; }

.feature.feature-ai { background: linear-gradient(160deg, #1A1F3D, #0D1020); color: var(--panel-mute); }
.feature.feature-ai h3 { color: #fff; }
.feature.feature-ai p { color: var(--panel-mute); }
.feature.feature-ai i { color: #FFB224; background: radial-gradient(circle at 30% 25%, #3A4078, #0D1020 72%); box-shadow: 0 0 0 2px rgba(137, 131, 255, 0.5), 0 18px 40px -14px rgba(106, 99, 246, 0.9); }

.pc-ai { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; padding: 12px 14px; border-radius: 14px; color: #fff;
    background: linear-gradient(120deg, rgba(255, 178, 36, 0.15), rgba(106, 99, 246, 0.22)); border: 1px solid rgba(255, 208, 138, 0.3); }
.pc-ai-orb { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 13px; color: #FFB224;
    background: radial-gradient(circle at 30% 25%, #3A4078, #0D1020 72%); box-shadow: 0 0 0 2px rgba(137, 131, 255, 0.5); }
.pc-ai strong { display: block; font: 600 14.5px/1.2 var(--font); color: #fff; }
.pc-ai span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }

.value-strip .vs-ai { background: linear-gradient(160deg, #1A1F3D, #0D1020); }
.value-strip .vs-ai strong { color: #fff; }
.value-strip .vs-ai span { color: var(--panel-mute); }
.value-strip .vs-ai i { color: #FFB224; background: radial-gradient(circle at 30% 25%, #3A4078, #0D1020 72%); box-shadow: 0 0 0 2px rgba(137, 131, 255, 0.45); }


/* ---- "Talk to your data": the home page section ----------------------------------------------------------------------- */

.ask-section { position: relative; isolation: isolate; margin: 0 15px; overflow: hidden; border-radius: 22px; background: var(--panel-bg); color: var(--panel-mute); padding: 130px 0; }
.ask-section::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: var(--panel-rules);
    -webkit-mask: linear-gradient(90deg, #000, transparent 16%, transparent 84%, #000); mask: linear-gradient(90deg, #000, transparent 16%, transparent 84%, #000);
}
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.ask-copy .eyebrow { color: var(--accent-light); }
.ask-copy .eyebrow i { color: #FFB224; }
.ask-copy h2 { margin: 18px 0 22px; color: #fff; }
.ask-copy h2 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #C8C5FF, #A5A1FF 40%, #FFB224); -webkit-background-clip: text; background-clip: text; }
.ask-lede { font-size: 17.5px; line-height: 1.65; color: rgba(226, 229, 245, 0.8); max-width: 580px; }
.ask-points { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin: 36px 0 34px; }
.ask-points li { display: flex; gap: 14px; align-items: flex-start; }
.ap-ico { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; font-size: 15px; color: #C8C5FF;
    background: rgba(106, 99, 246, 0.2); border: 1px solid rgba(165, 161, 255, 0.28); box-shadow: 0 12px 26px -14px rgba(106, 99, 246, 0.9); }
.ask-points li:nth-child(4) .ap-ico { color: #FFD08A; background: rgba(255, 178, 36, 0.14); border-color: rgba(255, 178, 36, 0.3); }
.ask-points strong { display: block; margin-bottom: 4px; font: 600 16px/1.3 var(--font); color: #fff; letter-spacing: -0.01em; }
.ask-points p { font-size: 14.5px; line-height: 1.55; color: var(--panel-mute); }
.ask-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ask-chips span { padding: 8px 13px; border-radius: 999px; font-size: 13.5px; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

.ask-visual { position: relative; padding: 30px 0; }
.ask-glow { position: absolute; inset: 8% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(106, 99, 246, 0.55), transparent), radial-gradient(closest-side at 70% 80%, rgba(255, 178, 36, 0.25), transparent); filter: blur(40px); }
.ask-mock { position: relative; height: 540px; max-width: 460px; margin: 0 auto; }
.ask-mock .ha-ask { inset: 0; width: 100%; transform: translateY(16px); border-radius: 26px; }
.ask-mock.s-ask > .ha-ask { transform: none; }
.ask-mock.s-ask-out > .ha-ask { transform: translateY(10px); opacity: 0; }
.ask-mock .hq-head { padding: 18px 20px 12px; }
.ask-mock .hq-thread { padding: 10px 18px; gap: 12px; }
.ask-mock .hq-user, .ask-mock .hq-card, .ask-mock .hq-offer { font-size: 14px; }
.ask-mock .hq-bar { font-size: 12px; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; }
.ask-mock .hq-composer { margin: 8px 16px 16px; }
.ask-mock .hq-input { font-size: 13.5px; }

.ask-float { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font: 600 13px/1 var(--font); color: #fff;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7); animation: askFloat 6s ease-in-out infinite; }
.ask-float i { color: #FFB224; }
.ask-float.f1 { top: -22px; left: 0; }
.ask-float.f2 { bottom: -22px; right: 0; animation-delay: -3s; }
.ask-float.f2 i { color: #3DDC97; }
@keyframes askFloat { 50% { transform: translateY(-10px); } }

@media (max-width: 1100px) {
    .ask-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .ask-section { padding: 100px 0; }
}

@media (max-width: 720px) {
    .ask-section { margin: 0 8px; padding: 70px 0; }
    .ask-points { grid-template-columns: minmax(0, 1fr); margin: 28px 0; }
    .ask-lede { font-size: 16px; }
    .ask-mock { height: 500px; }
    .ask-float { display: none; }
    .ha-ask { top: 8px; right: 8px; bottom: 8px; width: calc(100% - 16px); }
    .value-strip { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) and (min-width: 721px) {
    .value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .ask-float, .hq-bar b i, .hq-typing i { animation: none !important; }
}


/* ---- Export to Power BI (render.js openPowerBI) ---------------------------------------------------------------- */

.pbi-lead { font-size: 15.5px; line-height: 1.6; margin-bottom: 16px; }
.pbi-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pbi-facts span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--input); border: 1px solid var(--line); font: 600 13px/1 var(--font); color: var(--ink-2); }
.pbi-facts i { color: var(--accent); }
.pbi-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pbi-opt { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--card); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pbi-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pbi-opt.on { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.pbi-ico { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; font-size: 18px; color: #F2C811; background: #1F1F1F; }
.pbi-txt strong { display: block; margin-bottom: 4px; font: 600 15.5px/1.3 var(--font); color: var(--ink); }
.pbi-txt span { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.pbi-fine { margin-top: 16px; }
.pbi-fine i { color: var(--accent); margin-right: 4px; }
@media (max-width: 640px) { .pbi-opts { grid-template-columns: 1fr; } }
.pbi-big { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; }