/* ============================================================
   ASK AI ABOUT US — shared styles
   Strategic Community Ltd
   ------------------------------------------------------------
   Self-contained by design: every colour falls back to a literal
   so this drops onto pages that don't define the full variable
   set (ContactUs / Privacy / Terms only declare --primary-color).
   Layout classes are namespaced too — no reliance on .wrap or
   .cta-banner__* existing on the host page.
   ============================================================ */

.ask-ai{
  --aa-accent:  var(--accent,  #78befa);
  --aa-accent2: var(--accent-2,#a2d6ff);
  --aa-text:    var(--text,    #f1f5f9);
  --aa-surface: var(--surface, #0b0f14);
  --aa-ring: rgba(122,191,255,.30);

  box-sizing:border-box;
  padding: 2.4rem 5%;
  font-family:"all-round-gothic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(100% 140% at 50% 0%, rgba(122,191,255,.16), rgba(8,12,18,0)),
    linear-gradient(180deg, rgba(122,191,255,.10), rgba(122,191,255,.03));
  border-top:1px solid var(--aa-ring);
  border-bottom:1px solid var(--aa-ring);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ask-ai *, .ask-ai *::before, .ask-ai *::after{ box-sizing:border-box; }

.ask-ai__wrap{
  max-width:1200px; margin:0 auto;
  display:grid; gap:22px; align-items:start;
  grid-template-columns:.85fr 1.15fr;
}

/* Lead column ------------------------------------------------ */
.ask-ai .ask-ai__kicker{
  color:#cfe0ff; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; font-size:.9rem; margin:0 0 .25rem;
}
.ask-ai .ask-ai__hed{
  font-weight:500; line-height:1.12; letter-spacing:.01em;
  margin:.2rem 0 .5rem; color:#fff; text-transform:none;
  font-size:clamp(1.9rem, 3.6vw, 3.1rem);
}
.ask-ai .ask-ai__hed em{ font-style:normal; color:var(--aa-accent); }
.ask-ai .ask-ai__sub{ margin:.25rem 0 0; color:var(--muted,#b0c4de); line-height:1.6; }
.ask-ai .ask-ai__note{ margin:.7rem 0 0; color:#a9bddc; font-size:.85rem; line-height:1.5; }

/* Panel ------------------------------------------------------ */
.ask-ai__panel{
  background:rgba(13,19,29,.80);
  border:1px solid rgba(122,191,255,.22);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  padding:16px;
}
.ask-ai .ask-ai__step{
  display:block; color:#cfe0ff; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; font-size:.72rem; margin:0 0 .55rem;
}
.ask-ai .ask-ai__step + .ask-ai__step{ margin-top:1rem; }
.ask-ai .ask-ai__step label{ color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer; }

/* Step 1 — prompt intent chips ------------------------------- */
.ask-ai .ai-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.ask-ai .ai-chip{
  font-family:inherit; font-size:.9rem; font-weight:500; letter-spacing:.02em;
  display:inline-flex; align-items:center; padding:.42rem .85rem;
  border-radius:999px; cursor:pointer; background:transparent;
  border:1px solid rgba(122,191,255,.35); color:#cfe0ff;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ask-ai .ai-chip:hover, .ask-ai .ai-chip:focus-visible{
  outline:none; border-color:var(--aa-accent); color:#fff;
}
.ask-ai .ai-chip[aria-selected="true"]{
  color:#041220; border-color:transparent;
  background:linear-gradient(180deg, var(--aa-accent), var(--aa-accent2));
  box-shadow:0 6px 18px rgba(120,190,250,.35);
}

/* Step 2 — editable prompt ----------------------------------- */
.ask-ai .ai-prompt{
  display:block; width:100%; margin:0; resize:vertical;
  min-height:118px; max-height:340px; overflow-y:auto;
  font-family:inherit; font-size:.95rem; line-height:1.55; letter-spacing:normal;
  color:var(--aa-text); background:rgba(6,10,16,.75);
  border:1px solid rgba(122,191,255,.22); border-radius:12px; padding:.75rem .85rem;
}
.ask-ai .ai-prompt:focus{
  outline:none; border-color:var(--aa-accent);
  box-shadow:0 0 0 3px rgba(120,190,250,.18);
}
.ask-ai .ai-prompt-row{ display:flex; justify-content:flex-end; margin-top:.45rem; }
.ask-ai .ai-copy{
  font-family:inherit; font-size:.82rem; font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem;
  border-radius:999px; background:transparent;
  border:1px solid rgba(122,191,255,.35); color:var(--aa-accent);
}
.ask-ai .ai-copy:hover, .ask-ai .ai-copy:focus-visible{
  outline:none; border-color:var(--aa-accent); color:#fff;
}

/* Step 3 — provider buttons ---------------------------------- */
.ask-ai .ai-providers{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.6rem; }
.ask-ai .ai-btn{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem;
  border-radius:12px; text-decoration:none;
  border:1px solid rgba(122,191,255,.28);
  background:linear-gradient(180deg, rgba(120,190,250,.08), rgba(6,10,16,.55));
  color:#e6f0ff; font-weight:500; letter-spacing:.01em; font-size:.92rem;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ask-ai .ai-btn:hover, .ask-ai .ai-btn:focus-visible{
  outline:none; transform:translateY(-2px);
  border-color:var(--aa-accent); color:#fff; text-decoration:none;
  background:linear-gradient(180deg, rgba(120,190,250,.18), rgba(6,10,16,.6));
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.ask-ai .ai-btn__icon{ width:22px; height:22px; flex:0 0 22px; display:block; }
.ask-ai .ai-btn__label{ line-height:1.15; }
.ask-ai .ai-btn__hint{
  display:block; font-size:.68rem; font-weight:400; color:#8fa6c4; letter-spacing:.02em;
}
.ask-ai .ai-foot{
  margin:.7rem 0 0; color:#8fa6c4; font-size:.76rem; line-height:1.5;
}

/* Toast (appended to <body>, so not nested under .ask-ai) ----- */
.ai-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 14px);
  z-index:5000; pointer-events:none; opacity:0;
  font-family:"all-round-gothic",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:.7rem 1.1rem; border-radius:999px;
  background:rgba(13,19,29,.96); border:1px solid rgba(122,191,255,.35);
  color:#e6f0ff; font-size:.9rem; box-shadow:0 18px 40px rgba(0,0,0,.5);
  transition:opacity .22s ease, transform .22s ease;
}
.ai-toast.show{ opacity:1; transform:translate(-50%, 0); }

/* Responsive ------------------------------------------------- */
@media (max-width:980px){
  .ask-ai{ padding:2rem 5%; }
  .ask-ai__wrap{ grid-template-columns:1fr; }
  .ask-ai__lead{ text-align:center; }
  .ask-ai .ask-ai__hed{ font-size:clamp(2.1rem, 9.2vw, 2.8rem); }
  .ask-ai .ai-chips{ justify-content:center; }
  .ask-ai .ai-providers{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:340px){
  .ask-ai .ai-providers{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .ask-ai .ai-btn, .ai-toast{ transition:none; }
  .ask-ai .ai-btn:hover{ transform:none; }
}

/* ============================================================
   Crawlable answer block (used on UseCases.html)
   ============================================================ */
.aio-faq{ padding:3rem 5%; }
.aio-faq__inner{ max-width:1200px; margin:0 auto; }
.aio-faq h2{
  font-size:clamp(1.5rem, 3vw, 2.1rem); color:#fff;
  margin:0 0 .4rem; font-weight:500; letter-spacing:.01em; text-transform:none;
}
.aio-faq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:1.4rem; }
.aio-faq__item{
  background:var(--surface,#0b0f14); border:1px solid rgba(122,191,255,.12);
  border-radius:var(--radius,18px); padding:18px;
  box-shadow:var(--shadow, 0 10px 30px rgba(0,0,0,.35));
}
.aio-faq__item h3{
  margin:0 0 .45rem; font-size:1.05rem;
  color:var(--accent,#78befa); text-transform:none; letter-spacing:.01em;
}
.aio-faq__item p{ margin:0; color:#d7e1ea; line-height:1.6; font-size:.95rem; }
@media (max-width:980px){ .aio-faq__grid{ grid-template-columns:1fr; } }