/* ==========================================================================
   ask-hero.css — the Intelligence Layer hero: the product's Ask bar, rebuilt. Spec: docs/claims.md §A7.
   Loads after feature-v2.css and feature-v3.css. The ring's angle is a registered custom property so it can animate.
   2026-09-04 (brief-2): the hello line and the chip row are gone. Under the bar sits the answer deck: three cards
   stacked one behind the other, the two behind peeking a few pixels above and scaled down from their top edge so they
   sit entirely inside the top card. The cards share one grid cell, so they are all as tall as the tallest.
   2026-09-04 (brief-4): the answer IS the headline. .deck-ans is a list in the display face, one line of the answer per
   item (.deck-ai) with its muted support line under it (.deck-as); .deck-grp labels the Improving / Deteriorating halves
   of card 2. The old single display line (.deck-a) and its one key figure (.deck-key) are gone, as are the .deck-ev
   evidence rows and the .ask-note disclosure. The caption is the card's last line, so the card carries enough
   bottom padding for the nav row to sit under it rather than beside the quote.
   ========================================================================== */

@property --ask-ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.ask-hero { padding-bottom: 88px !important; }
/* the shader in wide mode is the aurora: centred behind the bar, soft, above the copy and under the answer */
.ask-hero .blob { left: 4%; right: 4%; top: 18%; bottom: -4%; }
.ask-hero .blob-canvas.is-loaded { opacity: .7; }
.ask-col { display: grid; justify-items: center; gap: 0; }
.ask-copy { text-align: center; }
.ask-hero h1 { max-width: 19ch; margin: 0 auto; }
.ask-hero .sub { margin-inline: auto; max-width: 56ch; }

/* the bar */
.ask { width: 100%; max-width: 820px; margin-top: 44px; display: grid; justify-items: center; }
.ask-glow { position: relative; width: 100%; max-width: 660px; padding: 2px; border-radius: 18px; isolation: isolate; }
/* the ring: the same conic gradient twice, ::after crisp and ::before blurred underneath for the bloom */
.ask-glow::before, .ask-glow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--ask-ga), #003DFF, #7A5AF8, #FF416A, #003DFF);
}
.ask-glow::before { filter: blur(6px); opacity: .55; }
.ask-bar { position: relative; display: flex; align-items: stretch; gap: 0; margin: 0; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px -18px rgba(0, 61, 255, .35); overflow: hidden; }
.ask-icon { display: grid; place-items: center; padding-left: 18px; font-size: 19px; line-height: 1; color: var(--blue); }
.ask-bar input { flex: 1 1 auto; min-width: 0; padding: 19px 14px; border: 0; background: transparent; font: 400 15.5px/1.4 var(--font-body); color: var(--ink); outline: none; }
.ask-bar input::placeholder { color: #667085; }
.ask-bar input:focus-visible { outline: none; }
.ask-glow:focus-within { box-shadow: 0 0 0 3px rgba(0, 61, 255, .25); }
.ask-btn { flex: 0 0 auto; padding: 0 26px; border: 0; background: var(--blue); color: #fff; font: 700 14px/1 var(--font-display); cursor: pointer; transition: background-color .2s; }
.ask-btn:hover { background: #0030cc; }

/* ---------- the deck ---------- */
/* 34px of clear space under the bar, plus room above the stage for the two cards that peek out of the top */
.ask-deck { position: relative; display: grid; width: 100%; max-width: 820px; margin-top: 34px; padding-top: 30px; }
.ask-deck:focus { outline: none; }
.ask-deck:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; border-radius: 24px; }
.deck-stage { grid-area: 1 / 1; display: grid; }
.deck-card {
  grid-area: 1 / 1; display: flex; flex-direction: column;
  padding: 24px 28px 56px; border-radius: 20px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px var(--v2-line), 0 30px 70px -40px rgba(15, 13, 25, .35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  text-align: left;
  transform-origin: 50% 0;
  transform: translateY(calc(var(--d) * -13px)) scale(calc(1 - var(--d) * .045));
  z-index: calc(10 - var(--d));
  cursor: default;
}
.deck-card:not(.is-top) { cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .deck-card { transition: transform .45s var(--ease-out); }
}
/* brief-4: the answer is the headline. Order inside the card: label, answer list (one or two labelled groups), quote,
   caption. Gaps are set per element rather than by one grid gap, because the support line has to sit tight under the
   line it supports while consecutive answers need air between them. */
.deck-q { margin: 0 0 8px; font: 500 13px/1.4 var(--font-display); letter-spacing: .01em; color: #6b7088; }
/* the Improving / Deteriorating halves of card 2, in the display face so they read as part of the answer */
.deck-grp { margin: 15px 0 0; font: 500 15px/1.3 var(--font-serif); letter-spacing: -.005em; color: var(--ink); }
.deck-grp.is-good { color: #0d7a58; }
.deck-grp.is-bad { color: #c9184a; }
.deck-ans { display: grid; gap: 11px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: dk; }
.deck-grp + .deck-ans { margin-top: 7px; }
.deck-ans li { display: grid; gap: 3px; }
/* the numbered answer (card 1): the figure sits in its own column so the five lines align on their first word */
.deck-ans.is-num li { grid-template-columns: 1.45em 1fr; }
.deck-ans.is-num li::before {
  counter-increment: dk; content: counter(dk); grid-column: 1; grid-row: 1;
  font: 500 clamp(19px, 1.6vw, 22px)/1.3 var(--font-serif); color: var(--blue); font-variant-numeric: tabular-nums;
}
.deck-ans.is-num .deck-ai { grid-column: 2; grid-row: 1; }
.deck-ans.is-num .deck-as { grid-column: 2; grid-row: 2; }
/* one line of the answer, in the display face: this is the card's headline */
.deck-ai { font: 500 clamp(19px, 1.6vw, 22px)/1.3 var(--font-serif); letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
/* its support: the count, its denominator and where it clusters */
.deck-as { font: 400 13.5px/1.45 var(--font-body); color: #6b7088; font-variant-numeric: tabular-nums; }
/* the quote and the caption are the card's footer and sit on its bottom edge, so the shortest card in the shared grid
   cell puts its slack between the answer and the quote rather than under the caption */
.deck-foot { margin-top: auto; padding-top: 18px; }
.deck-quote { margin: 0; padding-left: 12px; border-left: 2px solid rgba(0, 61, 255, .45); font: 400 14px/1.55 var(--font-body); color: #4a4860; }
.deck-quote cite { display: block; margin-top: 4px; font: 400 13px/1.4 var(--font-body); font-style: normal; color: #6b7088; }
/* the caption is the last line of the card; the nav row sits under it, inside the card's bottom padding */
.deck-cap { margin: 14px 0 0; padding-right: 130px; font: 500 13px/1.4 var(--font-display); color: #6b7088; }

/* the counter and the arrows, sitting on the bottom right of the top card */
.deck-nav { grid-area: 1 / 1; align-self: end; justify-self: end; z-index: 20; display: flex; align-items: center; gap: 4px; margin: 0 22px 17px 0; }
.deck-nav span { min-width: 34px; text-align: center; font: 500 13px/1 var(--font-display); color: #6b7088; font-variant-numeric: tabular-nums; }
.deck-nav button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 13, 25, .06); color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s; }
.deck-nav button:hover { background: var(--ink); color: #fff; }
.deck-nav button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* The dark tokens for the card. il.css loads AFTER this file and still colours the pre-brief-3 hierarchy, and neither
   brief-3 nor brief-4 opened il.css, so these rules carry one extra class of specificity to win. il.css also still
   carries dead .deck-a / .deck-ev rules from before brief-4; harmless, but fold this block in and delete them the next
   time that file is open. */
html.il-dark .deck-card .deck-q { color: #A9ADC4; }
html.il-dark .deck-card .deck-grp { color: #F2F5FF; }
html.il-dark .deck-card .deck-grp.is-good { color: #5FD6A4; }
html.il-dark .deck-card .deck-grp.is-bad { color: #FF8AA4; }
html.il-dark .deck-card .deck-ai { color: #F2F5FF; }
html.il-dark .deck-card .deck-ans.is-num li::before { color: #5B86FF; }
html.il-dark .deck-card .deck-as { color: #A9ADC4; }
html.il-dark .deck-card .deck-cap { color: #A9ADC4; }
html.il-dark .deck-card .deck-quote cite { color: #A9ADC4; }

/* the door */
.ask-cta { display: grid; justify-items: center; gap: 12px; margin-top: 34px; text-align: center; }
.ask-cta .fine { margin: 0; }

/* motion, all of it optional */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .ask-glow::before, html:not(.no-motion) .ask-glow::after { animation: ask-spin 6s linear infinite; }
  html:not(.no-motion) .ask-icon { animation: ask-pulse 2.6s ease-in-out infinite; }
}
@keyframes ask-spin { to { --ask-ga: 360deg; } }
@keyframes ask-pulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.18); } }

@media (max-width: 767px) {
  .ask-hero .blob { left: -10%; right: -10%; top: 30%; }
  .ask { margin-top: 32px; }
  .ask-bar input { padding: 16px 10px; font-size: 15px; }
  .ask-btn { padding: 0 18px; }
  /* the nav drops under the deck: there is no room for it beside the caption at 390 */
  .ask-deck { display: block; margin-top: 26px; padding-top: 18px; }
  .deck-card { padding: 20px 18px 18px; }
  .deck-ai, .deck-ans.is-num li::before { font-size: 19px; }
  /* the nav is under the deck at 390, so the caption gets its full width back */
  .deck-cap { padding-right: 0; }
  .deck-nav { display: flex; justify-content: center; margin: 14px 0 0; }
}