/* ==========================================================================
   Ask — the v6 language on the v5 page (pages/ask.css).
   Loaded after theme.css; the v5 page CSS sits in the lower layer (v5), so plain rules here win.
   Sections, top to bottom: #hero (the credits line carries id="stats") · #scenarios · (#film is out of the v6 page: the
   walkthrough film's burned-in captions say "synthetic records"; its rules below stay for a re-cut film) ·
   #showcase (two actual captures) · #reads (three items) · #limits (blue panel) · #faq ·
   #closing (full-bleed blue into the footer).
   ========================================================================== */

/* ---------------------------------------------------------------- shared on this page */
html body .ask-page {
  --v6-on-blue: rgba(236, 244, 252, .86);
  --v6-on-blue-2: rgba(226, 238, 250, .78);
  --v6-card-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .05), 0 16px 40px -24px rgba(16, 45, 73, .32);
  --v6-blue-panel: rgba(191, 227, 255, .07);
  --v6-blue-line: rgba(191, 227, 255, .2);
}
/* section labels: the eyebrow spec (12.5px, .15em, 600) */
html body .ask-page .ask-section-label { font: 600 12.5px/1.5 var(--font-sans); letter-spacing: .15em; color: #006bcb; }
html body .ask-page .ask-section-label a { font: 600 13px/1.5 var(--font-sans); letter-spacing: 0; color: #006bcb; }
/* the pull-quote stroke: flat blue, not a gradient */
html body .ask-page .kd-quote::before { background: #006bcb; }
/* primary actions: the one orange pill with white text (v5's .btn-ember had navy text) */
html body .ask-page .btn-ember,
html body .ask-page #closing .btn-onblue {
  color: #fff; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #ff8f45 0%, #ff6a30 55%, #ff5528 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(160,40,10,.25), 0 1px 2px rgba(120,30,0,.25), 0 8px 22px -6px rgba(255,90,40,.55);
}
html body .ask-page .btn-ember:hover,
html body .ask-page #closing .btn-onblue:hover { background: linear-gradient(180deg, #ff9a55 0%, #ff7036 55%, #ff5a2c 100%); color: #fff; }
/* small utility buttons: pills with a hairline */
html body .ask-page .ask-pause {
  border: 0; border-radius: 999px; background: #fff; color: #102d49; padding: 10px 18px;
  box-shadow: inset 0 0 0 1.5px #dfe6ee;
}
html body .ask-page .ask-pause:hover { box-shadow: inset 0 0 0 1.5px #006bcb; }
/* hidden stand-ins for the old capture controls that scripts/pages/ask.js still looks up */
html body .ask-page .ask-script-stubs { display: none !important; }
html body .ask-page .ask-nw { white-space: nowrap; }
/* section labels: eyebrow left, link right; on a phone the link sits under the eyebrow */
@media (max-width: 700px) {
  html body .ask-page .ask-section-label { flex-direction: column; align-items: flex-start; gap: 2px; }
  html body .ask-page .ask-section-label a { max-width: none; min-height: 36px; text-align: left; font-size: 13px; }
}

/* list bullets: the logo's slanted stroke in blue — markers are blue; the orange stays for the action,
   the H1 rule, the chapter slashes and the seal (theme.css paints every .kd-marks bullet orange) */
html body .ask-page ul.kd-marks > li::before {
  top: 5px; width: 3px; height: 14px; border-radius: 2px; background: #006bcb; transform: skewX(-14deg) rotate(-8deg);
}

/* ---------------------------------------------------------------- 1. #hero — the blue opening */
html body .ask-page > #hero.ask-hero {
  padding: 168px 0 48px !important; text-align: left; color: #fff;
  /* the mark as a flat poster, as on .hero-cu — sized to this tall single-column opening so its strokes stay
     on the right rather than crossing the whole headline; the ease into the pale ground lives in #stats below,
     so the nav (site.js measures this box) turns light exactly where the ground turns pale */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' stroke-linecap='round' stroke-width='6.5'%3E%3Cpath d='M13 14V50' stroke='%23004e99' stroke-opacity='.16'/%3E%3Cpath d='M25 9V55' stroke='%23004e99' stroke-opacity='.22'/%3E%3Cpath d='M37 13V51' stroke='%23004e99' stroke-opacity='.13'/%3E%3Cpath d='M49 18V46' stroke='%23004e99' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") right -6vw top 24px / auto calc(100% - 48px) no-repeat,
    #2a64a0;
}
html body .ask-page .ask-hero .eyebrow {
  display: flex; align-items: center; margin: 0 0 24px; color: #d6eeff;
  font: 600 12.5px/1 var(--font-sans); letter-spacing: .15em; text-transform: uppercase;
}
html body .ask-page .ask-hero .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) translateY(1px);
}
html body .ask-page .ask-hero h1 {
  margin: 0; font: 650 clamp(46px, 6vw, 86px)/.98 var(--font-display); letter-spacing: -.038em; color: #fff;
}
html body .ask-page .ask-hero h1 .text-sky { color: #a9dcff; }
html body .ask-page .ask-hero .kd-rule { margin: 18px 0 20px; background: #ff762b; }
html body .ask-page .ask-hero .ask-intro {
  margin: 24px 0 0; max-width: 34ch;
  font: 400 clamp(19px, 1.8vw, 24px)/1.45 var(--font-sans); letter-spacing: -.012em; color: var(--v6-on-blue);
}
html body .ask-page .ask-hero .ask-actions { justify-content: flex-start; margin: 34px 0 0; }
/* the credits line under the actions (id="stats": other pages link to it for AI credits) */
html body .ask-page .ask-hero .ask-hero-note { margin: 18px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--v6-on-blue); scroll-margin-top: 120px; }
html body .ask-page .ask-hero .ask-hero-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* the diagram: the question as a blue panel, the cited source as white paper */
html body .ask-page .ask-hero .ask-diagram { margin: 64px 0 0; max-width: 1000px; }
html body .ask-page .ask-wires { stroke: rgba(191, 227, 255, .6); }
html body .ask-page .ask-question {
  background: #336ca6; border: 0; border-radius: 20px;   /* the blue panel tone, opaque: the wire runs behind it */
  box-shadow: inset 0 0 0 1px var(--v6-blue-line);
}
html body .ask-page .ask-question .ask-mini-label { color: #d6eeff; letter-spacing: .12em; }
html body .ask-page .ask-question p { font-weight: 650; color: #fff; }
html body .ask-page .ask-question small { color: var(--v6-on-blue-2); }
html body .ask-page .ask-hub small { color: #d6eeff; }
/* the hub mark: the logo as the nav draws it on the blue (white strokes, the orange stroke), flat, not v5's gradient mark */
html body .ask-page .ask-hub .kd-mark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 72'%3E%3Cg transform='translate(40 36) rotate(-8) skewX(-14) translate(-31 -32)' fill='none' stroke-width='6.5' stroke-linecap='round'%3E%3Cpath d='M13 14V50' stroke='%23fff'/%3E%3Cpath d='M25 9V55' stroke='%23ff762b'/%3E%3Cpath d='M37 13V51' stroke='%23fff'/%3E%3Cpath d='M49 18V46' stroke='%23fff'/%3E%3C/g%3E%3C/svg%3E");
  --kd-mark-size: 64px;
}
html body .ask-page .ask-paper {
  background: #fff; color: #102d49; border: 0; border-radius: 20px;
  box-shadow: 0 2px 4px rgba(6, 22, 42, .08), 0 24px 60px -24px rgba(6, 22, 42, .45);
}
html body .ask-page .ask-paper-top > span { color: #56697f; }
html body .ask-page .ask-paper-top b { color: #102d49; }
html body .ask-page .ask-paper p { color: #102d49; font-weight: 600; }
html body .ask-page .ask-paper mark { color: #102d49; background: #e3f2ff; box-shadow: 3px 0 #e3f2ff, -3px 0 #e3f2ff; }
html body .ask-page .ask-paper small { color: #56697f; }
html body .ask-page .ask-diagram figcaption { text-align: left; }
html body .ask-page .ask-hero .chip-proof { color: var(--v6-on-blue); border-left-color: rgba(191, 227, 255, .55); }

/* ---------------------------------------------------------------- 2. #scenarios — the preset answers */
/* the opening eases into the ground at the top of this section */
html body .ask-page > #hero + #scenarios {
  padding-top: 168px;
  background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, 0) 150px);
}
html body .ask-page .ask-tab { border-left-color: rgba(16, 45, 73, .1); }
html body .ask-page .ask-tab.is-active { background: #fff; color: #102d49; border-radius: 0 14px 14px 0; box-shadow: 0 10px 28px -20px rgba(16, 45, 73, .35); }
html body .ask-page .ask-tab.is-active b { color: #004e99; }
html body .ask-page .ask-progress { background: #006bcb; }
html body .ask-page .ask-stage.mock.kd {
  background: #fff; border: 0; border-radius: 22px; box-shadow: var(--v6-card-shadow);
}
html body .ask-page .ask-scope { border-bottom-color: rgba(16, 45, 73, .08); }
html body .ask-page .ask-stage .kd-ask-sources { border-top-color: rgba(16, 45, 73, .08); }
html body .ask-page .ask-stage .kd-page { background: #e3f2ff; color: #004e99; border-radius: 8px; }
html body .ask-page .ask-user { background: #e3f2ff; color: #004e99; }
/* the cited passage: the landing's clause treatment — sky tint, blue rule */
html body .ask-page .ask-stage blockquote { border-left: 3px solid #006bcb; border-radius: 0 12px 12px 0; background: #eef6ff; }
html body .ask-page .ask-source-toggle { color: #006bcb; }

/* ---------------------------------------------------------------- 4 + 7. #film and #limits — flat blue panels, not bands */
html body .ask-page > .ask-chapter.surface-dawn {
  width: calc(100% - 48px); max-width: 1224px; margin: 24px auto; border-radius: 28px; padding: 88px 0;
}
html body .ask-page .surface-dawn .ask-section-label,
html body .ask-page .surface-dawn .ask-section-label a { color: #d6eeff; }
html body .ask-page .surface-dawn h2 { color: #fff; }
html body .ask-page .surface-dawn h2 > span { color: #a9dcff; }
html body .ask-page .surface-dawn .fence { color: var(--v6-on-blue); }
html body .ask-page .surface-dawn .fence::before { background: rgba(191, 227, 255, .55); }
/* #film */
html body .ask-page .ask-heading-row > p { max-width: 36ch; color: var(--v6-on-blue); }
html body .ask-page .ask-film.panel {
  background: var(--v6-blue-panel); border: 0; border-radius: 22px; padding: 12px;
  box-shadow: inset 0 0 0 1px var(--v6-blue-line);
}
html body .ask-page .ask-video-wrap video { border-radius: 14px; background: #1f5890; }
html body .ask-page .ask-film .chip-proof { color: var(--v6-on-blue); background: transparent; }
html body .ask-page .ask-transcript { border-bottom-color: var(--v6-blue-line); }
/* theme.css paints every details as a white card; on the blue panel the transcript is a blue card with white text */
html body .ask-page details.ask-transcript { background: var(--v6-blue-panel); box-shadow: inset 0 0 0 1px var(--v6-blue-line); }
html body .ask-page details.ask-transcript[open] { box-shadow: inset 0 0 0 1px rgba(191, 227, 255, .4); }
html body .ask-page .ask-transcript summary { color: #fff; }
html body .ask-page .ask-transcript summary span { color: #d6eeff; }
html body .ask-page .ask-transcript p { color: var(--v6-on-blue); }
/* #limits */
html body .ask-page .ask-limit-sub { color: var(--v6-on-blue); }
html body .ask-page #limits .ask-boundary-card {
  background: var(--v6-blue-panel); border: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--v6-blue-line);
}
html body .ask-page #limits h3 { color: #fff; }
html body .ask-page .ask-limit-grid .ask-boundary-card > p:not(.fence) { color: var(--v6-on-blue); }
html body .ask-page .ask-limit-visual { background: #2a64a0; border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--v6-blue-line); }
html body .ask-page .consent-line { border-bottom-color: var(--v6-blue-line); color: var(--v6-on-blue); }
html body .ask-page .consent-line:last-child { border-bottom: 0; }
html body .ask-page .ask-key span, html body .ask-page .ask-failure small, html body .ask-page .ask-failure span { color: var(--v6-on-blue); }
/* the failure message as plain words (no status code) */
html body .ask-page .ask-failure { align-items: flex-start; padding: 22px; }
html body .ask-page .ask-failure strong { font: 600 16px/1.4 var(--font-sans); color: #fff; }
html body .ask-page .ask-failure small { font-size: 13px; }
html body .ask-page #limits .ask-mini-caption { color: var(--v6-on-blue-2); }
html body .ask-page .ask-limit-grid .ask-text-link { color: #d6eeff; }

/* ---------------------------------------------------------------- 5. #showcase — the two actual captures, side by side */
html body .ask-page .ask-shots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 40px; flex-wrap: wrap; }
html body .ask-page .ask-shots-head .ask-section-label { margin: 0; }
html body .ask-page .ask-shots-lead { margin: 0; max-width: 46ch; font: 400 19px/1.5 var(--font-sans); letter-spacing: -.01em; color: #102d49; }
html body .ask-page .ask-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
html body .ask-page .ask-shot { margin: 0; min-width: 0; }
html body .ask-page .ask-shot > a {
  display: block; overflow: hidden; border-radius: 16px; background: #f5f8fb;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 2px 4px rgba(6, 22, 42, .06), 0 24px 60px -28px rgba(6, 22, 42, .38);
}
html body .ask-page .ask-shot img { display: block; width: 100%; height: auto; }
html body .ask-page .ask-shot figcaption { margin-top: 12px; font: 600 14px/1.4 var(--font-sans); color: #102d49; }
html body .ask-page #showcase .capture-caption { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 18px 0 0; font-size: 12px; color: #56697f; }

/* ---------------------------------------------------------------- 6. #reads — three plain items */
html body .ask-page .ask-reads { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; }
html body .ask-page .ask-reads > li { margin: 0; padding: 24px 0 0; border-top: 1px solid rgba(16, 45, 73, .1); }
html body .ask-page .ask-reads-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #e3f2ff; color: #006bcb; }
html body .ask-page .ask-reads-icon .icon { width: 24px; height: 24px; }
html body .ask-page .ask-reads h3 { margin: 18px 0 8px; font: 650 20px/1.3 var(--font-display); letter-spacing: -.02em; color: #102d49; }
html body .ask-page .ask-reads p { margin: 0; font-size: 15px; line-height: 1.6; color: #3f5470; }

/* ---------------------------------------------------------------- 9. #faq — white cards, as the other pages' accordions (theme.css) */
html body .ask-page .ask-faq-list { border-top: 0; }
html body .ask-page .ask-faq {
  margin-bottom: 10px; padding: 0 24px; border: 0; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 1px 2px rgba(16, 45, 73, .04);
}
html body .ask-page .ask-faq summary { padding: 18px 0; }
html body .ask-page .ask-faq[open] summary { color: #004e99; }
html body .ask-page .ask-faq-answer { padding: 0 8px 22px 0; }
/* a link inside a card's sentence reads as a link */
html body .ask-page .ask-reads p a { color: #006bcb; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* the plus is drawn, not written, so the question text (and the FAQPage built from it) is only the question */
html body .ask-page .ask-faq summary .ask-plus::before { content: "+"; }

/* ---------------------------------------------------------------- 10. #closing — full-bleed blue, straight into the footer */
html body .ask-page > #closing.ask-closing { background: #2a64a0; padding: 112px 0 96px !important; }
html body .ask-page > #closing.ask-closing > .ask-container { max-width: 1160px; }
html body .ask-page #closing .cta-gradient { padding: 0 !important; background: transparent; box-shadow: none; grid-template-columns: minmax(0, 1fr); }
/* the v5 corner mark is already blank in v6 (theme.css); drop its empty 240px column so the copy gets the width */
html body .ask-page #closing .cta-gradient::after { content: none; }
/* theme.css centres the inner box with margin auto; inside v5's grid that shrinks it to its text — keep it full width */
html body .ask-page #closing .cta-gradient-inner { max-width: none; margin: 0; }
html body .ask-page #closing .eyebrow { display: flex; align-items: center; margin-bottom: 22px; color: #d6eeff; }
html body .ask-page #closing .eyebrow::before {
  content: ""; flex: none; width: 3px; height: 13px; margin-right: 10px; border-radius: 2px;
  background: #ff762b; transform: skewX(-14deg) translateY(1px);
}
html body .ask-page #closing h2.kd-h2 { padding-left: 0; }
html body .ask-page #closing h2.kd-h2::before { content: none; }
html body .ask-page #closing .fence::before { background: rgba(191, 227, 255, .55); }

/* ---------------------------------------------------------------- desktop only */
@media (min-width: 701px) {
  html body .ask-page .ask-question, html body .ask-page .ask-paper { padding: 24px 26px; }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 900px) {
  html body .ask-page > .ask-chapter.surface-dawn { padding: 60px 0; }
  html body .ask-page .ask-tab.is-active { border-radius: 12px 12px 0 0; }
}
@media (max-width: 700px) {
  html body .ask-page > #hero.ask-hero { padding: 124px 0 36px !important; }
  html body .ask-page > #hero + #scenarios { padding-top: 132px; background: linear-gradient(180deg, #2a64a0 0, rgba(42, 100, 160, 0) 120px); }
  html body .ask-page .ask-hero .ask-hero-note { order: 6; font-size: 13px; }
  html body .ask-page .ask-shots { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  html body .ask-page .ask-shots-lead { font-size: 17px; }
  html body .ask-page .ask-reads { grid-template-columns: 1fr; margin-top: 28px; gap: 8px; }
  html body .ask-page .ask-reads h3 { font-size: 19px; margin-top: 14px; }
  html body .ask-page .ask-hero h1 { font-size: clamp(40px, 11vw, 46px); }
  html body .ask-page .ask-hero .kd-rule { width: 88px; margin: 14px 0 16px; }
  html body .ask-page .ask-hero .ask-intro { font-size: 18px; margin-top: 18px; }
  html body .ask-page .ask-hero .ask-actions { margin-top: 24px; }
  html body .ask-page .ask-hero .ask-diagram { margin: 32px 0 0; }
  html body .ask-page .ask-section-label { font-size: 11.5px; letter-spacing: .12em; }
  /* v5 stacks the question on the source as one piece on phones */
  html body .ask-page .ask-question { border-radius: 18px 18px 0 0; }
  html body .ask-page .ask-paper { border-radius: 0 0 18px 18px; }
  html body .ask-page > .ask-chapter.surface-dawn { width: calc(100% - 20px); margin: 16px auto; border-radius: 22px; padding: 52px 0; }
  html body .ask-page > #closing.ask-closing { padding: 88px 0 72px !important; }
  html body .ask-page .ask-faq { padding: 0 18px; }
  html body .ask-page .ask-faq summary { padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body .ask-page :is(.ask-pause, .btn-ember) { transition: none; }
}

/* review (27 Sep 2026): the two in-app pictures are drawn as the product (the captures showed old app labels) */
html body .ask-page .ask-shot-frame {
  overflow: hidden; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 45, 73, .07), 0 2px 4px rgba(6, 22, 42, .06), 0 24px 60px -28px rgba(6, 22, 42, .38);
}
html body .ask-page .ask-shots { align-items: start; }
html body .ask-page .ask-shot .kda { font-size: 13px; }

/* kda · the app panel: shared, in theme.css */
html body .ask-page .ask-scope b .icon { width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; color: #006bcb; }