/* css/ask.css -- the question tab ("Have a question?"; first built as "Ask Marlmont", a name dropped as too close to McKinsey's) on the right edge of every page and the conversation it opens (js/ask.js).
   2026-10-12, the client, with McKinsey's "Ask" tab as the reference: a rounded tile joined to the right edge about three
   quarters of the way down, the speech bubbles standing proud of its top edge; scrolling folds it to the bubbles alone.
   The shapes depart from the site's square rule on purpose (he asked for that reference and likes the opened panel).
   COLOUR, later the same day: "make this more on brand ... just the colors need to be different". The Navy-to-royal gradient
   is gone. Everything here is now the site's own palette and nothing else: Navy #062543 on the standard wash (as every Navy
   tile), Blue-deep #174A75 for hover and focus, Blue #3E97D6 for the small marks, grey #F3F2F0, hairline #D9DEE4. No shadows. */
.ask, .ask * { box-sizing: border-box; }
.ask { --ask-navy: #062543; --ask-deep: #174A75; --ask-blue: #3E97D6; --ask-ink: #062543; --ask-sub: #5B6B78; --ask-rule: #D9DEE4; --ask-bot: #EEF2F6;
  --ask-surface: linear-gradient(150deg, #0D3559 0%, #062543 70%);   /* 2026-10-13: a clean Navy in place of the wash, which read as mottled at this size */
  --ask-lift: 0 16px 44px rgba(6, 37, 67, .18), 0 2px 6px rgba(6, 37, 67, .08);   /* the one soft shadow on the site: he did not want an outline on the card, and a white card needs something to stand off a white page */
  font-family: var(--font-sans, "Inter", system-ui, sans-serif); font-size: 15px; line-height: 22px; color: var(--ask-ink); }

/* ---- the launcher (2026-10-13) -------------------------------------------------------------------------------------------
   A small card of the conversation in the bottom right corner (Navy head, one line from us, a line to type on; no outline)
   that folds to a round Navy disc once the page has moved and opens again when the pointer rests on the disc or the
   keyboard reaches it. The whole thing is one button and opens the panel. Phones show the disc only.
   HOW IT MOVES. The card never changes size or position: it is CUT to a disc at its own corner (clip-path) and the cut
   widens to the whole card, while a Navy cover over it clears. Two properties, one duration, one easing, no delays, so every
   part moves together. (Earlier builds faded a card in over the disc, "just looks like an overlay", then resized the box
   and its background separately, "things are moving at different speeds ... some weird white bar". Do not animate width,
   height or backgrounds here again.) The cut area takes no pointer, so only the disc is the hover target when folded.
   The earlier edge tab is in tmp/snapshots/pre-ask-card-1013. */
.ask { --ask-t: .5s cubic-bezier(.4, 0, .2, 1); }
.ask__tab { position: fixed; z-index: 96; right: 24px; bottom: 24px; display: block; width: 300px; margin: 0; padding: 0; border: 0; border-radius: 16px; background: none; color: var(--ask-ink); cursor: pointer; text-align: left;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; pointer-events: none; filter: drop-shadow(0 10px 20px rgba(6, 37, 67, .2));   /* the shadow follows whatever shape the cut leaves */
  transition: none; }   /* it is shown and hidden in one step: the panel covers the hand-over both ways (a fade here made the disc flicker after closing; frame audit, 2026-10-13) */
.ask__tab:focus-visible { outline: 3px solid var(--ask-blue); outline-offset: 4px; }
.ask__card { position: relative; display: block; background: linear-gradient(#0C3256 0 40px, #fff 40px); pointer-events: auto;   /* Navy behind the Navy head, so the rounded cut leaves no pale arc at the top corners */
  clip-path: inset(0 0 0 0 round 16px); }
.ask__card-h { position: relative; display: grid; gap: 2px; padding: 17px 62px 16px 20px; background: var(--ask-surface); color: #fff; }
.ask__card-h b { font-family: var(--font-serif, Georgia, serif); font-weight: var(--serif-weight, 400); font-size: 22px; line-height: 27px; }
.ask__card-h small { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .76); }
.ask__card-icon { position: absolute; top: 22px; right: 20px; width: 28px; height: 28px; pointer-events: none; }
.ask__card-b { display: block; padding: 16px 20px 14px; }
.ask__card-m { display: inline-block; padding: 10px 14px 11px; border-radius: 14px 14px 14px 4px; background: var(--ask-bot); font-size: 14.5px; line-height: 21px; }
.ask__card-in { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px 11px 20px; border-top: 1px solid #E6EBF0; color: #6A7A88; font-size: 14.5px; line-height: 20px; }
/* the type-in line waits: the words and three dots are typed out, held, cleared and typed again (2026-10-13; a blinking cursor, then
   dots alone, came first). Over this line the pointer is a text cursor, as over a real field. */
.ask__card-in { cursor: text; } .ask__card-in i { cursor: pointer; }   /* the send button keeps the clicking hand */
.ask__card-q { white-space: pre; }   /* written out letter by letter by js/ask.js */
.ask__card-q .is-at { box-shadow: 2px 0 0 -0.25px var(--ask-navy); }   /* the text cursor, just after the last letter typed; it takes no room, so nothing shifts */
.ask__card-q.is-done .is-at { animation: ask-caret 1s steps(1, end) infinite; }   /* the cursor keeps blinking once the line is typed: the one ongoing animation he wants (2026-10-18) */
@keyframes ask-caret { 0%, 50% { box-shadow: 2px 0 0 -0.25px var(--ask-navy); } 51%, 100% { box-shadow: none; } }
.ask__card-in i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ask-navy); }   /* Navy, the site's own button colour (2026-10-13: the light blue was off brand) */
.ask__card-in i::after { content: ""; position: absolute; left: 11px; top: 12.5px; width: 8px; height: 8px; border: solid #fff; border-width: 1.5px 1.5px 0 0; rotate: 45deg; }
.ask__cover { position: absolute; inset: 0; background: #08294A; opacity: 0; pointer-events: none; }   /* the disc's face: Navy, with the line bubble at the corner */
.ask__tab-icon { position: absolute; right: 15px; bottom: 15px; width: 28px; height: 28px; }
/* ---- how it opens and shuts (2026-10-13: "like an actual animation, where the things move ... popping open, but then shutting down") ----
   OPENING, about half a second: the disc's bubble spins away as the card bursts out of the corner on a springy curve and
   gives one small bounce; then its parts arrive in order: the heading rises, the head's bubble turns in, the message pops
   out of its corner, the type-in line rises and the send button springs in last.
   SHUTTING: the parts drop out together at once, the card snaps back into the corner on an accelerating curve, and the
   disc gives one squash as its bubble springs back.
   Everything is a transform, an opacity or the one cut (clip-path): no sizes or backgrounds change, so nothing can tear. */
.ask__card { transform-origin: calc(100% - 29px) calc(100% - 29px); transition: clip-path .5s cubic-bezier(.2, .9, .25, 1); }
.ask.is-compact .ask__tab:is(:hover, :focus-visible) .ask__card, .ask.is-in .ask__card { animation: ask-pop .56s cubic-bezier(.3, .7, .3, 1) both; }
.ask__cover { transition: opacity .24s ease; }
.ask__tab-icon { scale: .3; rotate: -90deg; transition: scale .22s ease-in, rotate .22s ease-in; }
:is(.ask__card-h b, .ask__card-h small, .ask__card-in) { transition: opacity .3s ease, translate .44s cubic-bezier(.2, .9, .3, 1); }
.ask__card-h b { transition-delay: .12s; } .ask__card-h small { transition-delay: .17s; } .ask__card-in { transition-delay: .3s; }
.ask__card-icon { transition: opacity .25s ease .2s, scale .46s cubic-bezier(.3, 1.7, .5, 1) .2s, rotate .46s cubic-bezier(.3, 1.7, .5, 1) .2s; }
.ask__card-m { transform-origin: 0 100%; transition: opacity .25s ease .22s, scale .46s cubic-bezier(.3, 1.5, .5, 1) .22s; }
.ask__card-in i { transition: scale .42s cubic-bezier(.3, 1.9, .5, 1) .38s; }
@keyframes ask-pop { 0% { scale: .9; } 55% { scale: 1.035; } 100% { scale: 1; } }
@keyframes ask-settle { 0%, 62% { scale: 1; } 80% { scale: .88; } 100% { scale: 1; } }
/* folded */
.ask.is-compact .ask__tab:not(:hover):not(:focus-visible) .ask__card { clip-path: inset(calc(100% - 58px) 0 0 calc(100% - 58px) round 29px); transition: clip-path .22s cubic-bezier(.55, 0, .7, .3) .05s; animation: ask-settle .4s ease both; }
.ask.is-compact .ask__tab:not(:hover):not(:focus-visible) .ask__cover { opacity: 1; transition: opacity .16s ease .07s; }
.ask.is-compact .ask__tab:not(:hover):not(:focus-visible) .ask__tab-icon { scale: 1; rotate: none; transition: scale .28s cubic-bezier(.3, 1.6, .5, 1) .2s, rotate .28s cubic-bezier(.3, 1.6, .5, 1) .2s; }
.ask.is-compact .ask__tab:not(:hover):not(:focus-visible) :is(.ask__card-h b, .ask__card-h small, .ask__card-in) { opacity: 0; translate: 0 10px; transition: opacity .09s ease, translate .1s ease-in; }
.ask.is-compact .ask__tab:not(:hover):not(:focus-visible) .ask__card-icon { opacity: 0; scale: .3; rotate: 40deg; transition: opacity .09s ease, scale .1s ease-in, rotate .1s ease-in; }
.ask.is-compact .ask__tab:not(:hover):not(:focus-visible) .ask__card-m { opacity: 0; scale: .7; transition: opacity .09s ease, scale .1s ease-in; }
.ask.is-compact .ask__tab:not(:hover):not(:focus-visible) .ask__card-in i { scale: 0; transition: scale .09s ease-in; }
.ask.is-open .ask__tab { opacity: 0; visibility: hidden; } .ask.is-open .ask__card { pointer-events: none; }
@media (hover: none) {   /* no pointer to rest: a tap opens the panel */
.ask.is-compact .ask__tab .ask__card { clip-path: inset(calc(100% - 58px) 0 0 calc(100% - 58px) round 29px); }
.ask.is-compact .ask__tab .ask__cover { opacity: 1; }
.ask.is-compact .ask__tab .ask__tab-icon { scale: 1; rotate: none; }
.ask.is-compact .ask__tab :is(.ask__card-h b, .ask__card-h small, .ask__card-in) { opacity: 0; translate: 0 10px; }
.ask.is-compact .ask__tab .ask__card-icon { opacity: 0; scale: .3; rotate: 40deg; }
.ask.is-compact .ask__tab .ask__card-m { opacity: 0; scale: .7; }
.ask.is-compact .ask__tab .ask__card-in i { scale: 0; }
}

/* ---- the panel -------------------------------------------------------------------------------------------------------- */
.ask__panel { position: fixed; z-index: 150; right: 24px; bottom: 24px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 408px; max-width: calc(100vw - 32px);   /* above the site header (140): on a phone the panel fills the screen and the header showed through it (2026-10-21) */
  height: min(680px, calc(100vh - 48px)); height: min(680px, calc(100dvh - 48px)); overflow: hidden; background: linear-gradient(#0D3559 0 32px, #fff 32px); border: 0; border-radius: 16px; box-shadow: var(--ask-lift); color: var(--ask-ink);   /* as the launcher: no outline */
  /* It opens out of the launcher and closes back into it, by the same means: the panel is cut to the launcher's shape at
     their shared corner (the card when the pointer is on it, otherwise the disc) and the cut widens. One duration, one easing.
     The open cut is wider than the panel so that its shadow shows. */
  opacity: 0; visibility: hidden; clip-path: inset(calc(100% - var(--ask-card-h, 230px)) 0 0 calc(100% - 300px) round 16px); transform-origin: calc(100% - 29px) calc(100% - 29px);
  transition: none; }   /* shutting is played by the .is-closing animation below; when that class comes off, the panel is simply gone */
.ask__panel::after { content: ""; position: absolute; z-index: 5; inset: 0; background: #08294A; opacity: 1; pointer-events: none; }   /* a Navy face over the shut panel: it clears as the panel opens (as the card's does), so the launcher's Navy grows into the panel with no sudden white box */
.ask.is-open .ask__panel::after { opacity: 0; transition: opacity .3s ease .05s; }
.ask.is-compact:not(.is-open) .ask__tab:not(:hover):not(:focus-visible) ~ .ask__panel { clip-path: inset(calc(100% - 58px) 0 0 calc(100% - 58px) round 29px); }
.ask.is-open .ask__panel:not(.x):not(.y) { opacity: 1; visibility: visible; clip-path: inset(-60px -60px -60px -60px round 16px); transition: clip-path var(--ask-t);   /* solid from its first frame, over the launcher's own shape: no cross-fade, which showed as a grey ghost */ animation: ask-pop-panel .6s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes ask-pop-panel { 0% { scale: .94; } 55% { scale: 1.012; } 100% { scale: 1; } }
/* SHUTTING THE PANEL (2026-10-13: a fade, then a plain slide into the corner, were both "not good ... more creative").
   Three beats in about two thirds of a second, played while js/ask.js holds .is-closing on the root:
     1  the conversation and the head drop away and the panel comes down like a blind, to the bar you type on;
     2  the bar darkens to Navy and zips along to the corner, rounding into the disc;
     3  the disc gives one squash as it lands.
   It ALWAYS ends on the disc. The launcher itself is kept out of sight until then and takes over as the disc on the same
   spot; at the top of the page js/ask.js then pops the card open out of it, as on first load. (A version that ended on the
   card's shape left an empty white box on screen for a moment: audited frame by frame with scripts/kit/ask-frames.mjs.) */
.ask.is-closing .ask__panel { visibility: visible; opacity: 1; transition: none; animation: ask-shut .66s both; }
.ask.is-closing .ask__panel::after { transition: none; animation: ask-shut-navy .66s both; }
.ask.is-closing :is(.ask__log, .ask__head) { opacity: 0; translate: 0 22px; transition: opacity .16s ease, translate .22s ease-in; }
.ask.is-closing .ask__tab { opacity: 0; transition: none; } .ask.is-closing .ask__tab * { transition: none !important; animation: none !important; }
@keyframes ask-shut {
  0% { clip-path: inset(-60px -60px -60px -60px round 16px); scale: 1; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  42%, 48% { clip-path: inset(calc(100% - 70px) 0px 0px 0px round 22px); scale: 1; animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  82% { clip-path: inset(calc(100% - 58px) 0px 0px calc(100% - 58px) round 29px); scale: 1; }
  90% { clip-path: inset(calc(100% - 58px) 0px 0px calc(100% - 58px) round 29px); scale: .86; }
  100% { clip-path: inset(calc(100% - 58px) 0px 0px calc(100% - 58px) round 29px); scale: 1; }
}
@keyframes ask-shut-navy { 0%, 44% { opacity: 0; } 70%, 100% { opacity: 1; } }
.ask__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 18px 14px 18px 20px; background: var(--ask-surface); color: #fff; }
.ask__head-icon { width: 40px; height: 35px; flex: none; }
.ask__title { margin: 0; font-family: var(--font-serif, Georgia, serif); font-weight: var(--serif-weight, 400); font-size: 21px; line-height: 26px; color: #fff; }
/* The wordmark is a picture, not type: it has no space of its own above or below, while the line under it carries its own
   leading. So the gap is set by eye (2026-10-13: "custom padding below it"): 5px, with the line's leading trimmed to 16px,
   which leaves about 7px between the foot of the letters and the top of the small ones. The two together are then 37px tall,
   close to the height of the figures beside them (34px), so the head reads as one block. */
.ask__logo { display: block; width: 78px; height: 13px; color: #fff; -webkit-mask-position: left center; mask-position: left center; }
.ask__team { display: flex; } .ask__team i { display: block; width: 34px; height: 34px; margin-left: -12px; border-radius: 50%; overflow: hidden; background: #1B4F7C; box-shadow: 0 0 0 2px #0A2E50; } .ask__team i:first-child { margin-left: 0; background: #3E97D6; } .ask__team i:nth-child(2) { background: #2A6A9F; }
.ask__team svg { display: block; width: 34px; height: 34px; }
.ask__sub2 { margin: 1px 0 0; white-space: nowrap; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, .6); }
.ask__sub { margin: 5px 0 0; font-size: 13px; line-height: 16px; color: rgba(255, 255, 255, .88); }
.ask__hbtn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.ask__hbtn svg { width: 15px; height: 15px; }
.ask__hbtn:hover { background: rgba(255, 255, 255, .28); }
.ask__hbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ask__log { overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scroll-behavior: smooth; }
.ask__log:focus-visible { outline: 2px solid var(--ask-deep); outline-offset: -2px; }
.ask__row { display: flex; align-items: flex-start; gap: 8px; }
.ask__row--you { justify-content: flex-end; margin-top: 6px; }
.ask__row--us + .ask__row--you, .ask__row--you + .ask__row--us, .ask__chips + .ask__row { margin-top: 6px; }
.ask__av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ask-surface); color: #fff; font-family: var(--font-serif, Georgia, serif); font-size: 14px; line-height: 1; }
.ask__av { overflow: hidden; } .ask__av svg { display: block; width: 28px; height: 28px; }
.ask__row--us + .ask__row--us .ask__av { visibility: hidden; }
.ask__b { max-width: 84%; margin: 0; padding: 10px 14px 11px; overflow-wrap: anywhere; }
.ask__row--us .ask__b { background: var(--ask-bot); border-radius: 4px 16px 16px 16px; }
.ask__row--us + .ask__row--us .ask__b { border-radius: 16px; }
.ask__row--you .ask__b { background: var(--ask-navy); color: #fff; border-radius: 16px 16px 4px 16px; }
.ask__b p { margin: 0; } .ask__b p + p { margin-top: 8px; }
.ask__b ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ask__b li { position: relative; padding-left: 16px; }
.ask__b li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; border-radius: 1px; background: var(--ask-blue); }
.ask__b ol { margin: 8px 0 0; padding: 0 0 0 20px; display: grid; gap: 4px; }
.ask__b strong { font-weight: 600; }
.ask__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 12px; border: 1px solid var(--ask-rule); border-radius: 10px; background: #fff; color: var(--ask-ink); font-weight: 500; text-decoration: none; }
.ask__link svg { flex: none; width: 14px; height: 14px; color: var(--ask-deep); }
.ask__link:hover { border-color: var(--ask-navy); }
.ask__sum { display: grid; gap: 8px; margin: 8px 0 0; }
.ask__sum > div { display: grid; gap: 1px; }
.ask__sum dt { font-size: 12px; line-height: 16px; color: var(--ask-sub); }
.ask__sum dd { margin: 0; font-weight: 500; }
.ask__fine { margin: 2px 0 2px 36px; font-size: 12.5px; line-height: 18px; color: var(--ask-sub); }
.ask__fine a { color: inherit; }
.ask__in { animation: ask-in .22s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes ask-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: none; } }
/* someone is "typing" */
.ask__typing { display: inline-flex; align-items: center; gap: 5px; height: 22px; }
.ask__typing i { width: 6px; height: 6px; border-radius: 50%; background: #7C8CA0; animation: ask-type 1s ease-in-out infinite; }
.ask__typing i:nth-child(2) { animation-delay: .15s; } .ask__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ask-type { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }

/* the replies offered under an answer */
.ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; padding: 0 0 0 36px; list-style: none; }
.ask__chip { min-height: 38px; padding: 7px 14px; border: 1px solid var(--ask-navy); border-radius: 19px; background: #fff; color: var(--ask-ink); font: 500 14px/20px var(--font-sans, "Inter", system-ui, sans-serif); text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.ask__chip:hover { background: var(--ask-navy); color: #fff; }
.ask__chip--main { background: var(--ask-navy); color: #fff; }
.ask__chip--main:hover { background: var(--ask-deep); border-color: var(--ask-deep); }
.ask__chip--quiet { border-color: var(--ask-rule); font-weight: 400; }
.ask__chip--quiet:hover { background: var(--ask-bot); color: var(--ask-ink); border-color: #9AA7B4; }
.ask__chip:focus-visible, .ask__link:focus-visible, .ask__send:focus-visible { outline: 2px solid var(--ask-deep); outline-offset: 2px; }

/* the line you type on */
.ask__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px 14px; border-top: 1px solid #E6EBF0; background: #fff; }
.ask__q { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 18px; border: 1px solid #DCE3EA; border-radius: 23px; background: #F6F8FA; color: var(--ask-ink); font: 400 15px/22px var(--font-sans, "Inter", system-ui, sans-serif); }
.ask__q::placeholder { color: #6B7A8B; opacity: 1; }
.ask__q:focus { outline: 2px solid var(--ask-navy); outline-offset: 0; border-color: var(--ask-navy); }
.ask__q[aria-invalid="true"] { border-color: #A4262C; }
.ask__send { flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--ask-navy); color: #fff; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.ask__send svg { width: 17px; height: 17px; }
.ask__send:hover { background: var(--ask-deep); }
.ask__send[disabled] { opacity: .4; cursor: default; }
.ask__vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 639px) {
  .ask__tab { right: 14px; bottom: 14px; }   /* phones: the disc only, at every scroll position */
.ask.ask.ask .ask__tab.ask__tab.ask__tab .ask__card { clip-path: inset(calc(100% - 54px) 0 0 calc(100% - 54px) round 27px); animation: none; }   /* one 54px disc in every state: the desktop fold rules (58px) used to win when it was not hovered, so the disc, its bubble and its ring disagreed (2026-10-21) */
.ask .ask__tab.ask__tab .ask__cover { opacity: 1; }
.ask .ask__tab.ask__tab .ask__tab-icon { scale: 1; rotate: none; }
.ask .ask__tab.ask__tab :is(.ask__card-h b, .ask__card-h small, .ask__card-in) { opacity: 0; translate: 0 10px; }
.ask .ask__tab.ask__tab .ask__card-icon { opacity: 0; scale: .3; rotate: 40deg; }
.ask .ask__tab.ask__tab .ask__card-m { opacity: 0; scale: .7; }
.ask .ask__tab.ask__tab .ask__card-in i { scale: 0; }
  .ask__tab-icon { right: 14px; bottom: 14px; width: 26px; height: 26px; }
  /* no ring round the disc: a fine white ring was tried (2026-10-21) and he asked for it to go ("fix this white circle") */
  .ask.ask.ask .ask__tab.ask__tab.ask__tab .ask__card { background: #08294A; }   /* the card under the disc is Navy too, so its rounded edge leaves no pale rim over a Navy page */
  .ask .ask__tab { transition: opacity .3s ease, visibility 0s; }
  .ask.is-closing .ask__panel, .ask.is-closing .ask__panel::after { animation: none; opacity: 0; visibility: hidden; }
  .ask .ask__panel:not(.x):not(.y):not(.z) { clip-path: none; transition: opacity .2s ease, visibility 0s linear .2s; } .ask.is-open .ask__panel:not(.x):not(.y):not(.z) { transition: opacity .2s ease; }
  .ask__panel { inset: 0; right: 0; bottom: 0; width: auto; max-width: none; height: auto; border: 0; border-radius: 0; box-shadow: none; }
  .ask__q { font-size: 16px; }   /* no zoom on focus in iOS */
  html.ask-open, html.ask-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .ask *, .ask__card, .ask__panel, .ask.is-open .ask__panel:not(.x):not(.y) { animation: none !important; } .ask__card *, .ask__cover { transition: none !important; }
  .ask__tab, .ask__card, .ask__cover, .ask__panel, .ask.is-open .ask__panel:not(.x):not(.y), .ask__chip, .ask__send { transition: none; }
  .ask__tab:hover { translate: none; } .ask__in { animation: none; } .ask__typing i { animation: none; opacity: .7; } .ask__log { scroll-behavior: auto; }
}
@media print { .ask { display: none; } }

/* PHONE AND TABLET PASS (2026-10-21) */
/* ===== for css/ask.css (the question widget; the phone disc's show and hide are left alone) ===== */
@media (max-width: 1023.98px) {
  .ask .ask__q { font-size: 16px; }   /* no zoom on focus in iOS on a tablet either (phones already had it) */
  .ask .ask__hbtn, .ask .ask__chip { position: relative; }
  .ask .ask__hbtn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* the restart and close buttons stay 36px, their touch area 44px */
  .ask .ask__chip::after { content: ""; position: absolute; inset: -3px 0; }   /* the replies stay 38px, their touch area 44px (the 8px gaps keep them apart) */
}