/* /research-questions-to-ask: its own sheet, loaded after site.css.
   The page is a list a patient carries into a call. One idea runs it: a
   sheet of twelve boxes, ticked. The hero draws that sheet, every question
   has its box, and the tray at the foot of the window counts the same twelve.
   Script: scripts/research-questions-to-ask.js. With that script absent every
   part is visible, every link still jumps, every box still ticks, and a
   printout still holds only the ticked questions. */

html:has(body.rqa) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  --rq-tray-h: 64px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
/* and above the tray, once it is up */
html:has(body.rq-has-tray) { scroll-padding-bottom: calc(var(--rq-tray-h) + 16px); }
.rqa {
  --rq-ease: cubic-bezier(.16, 1, .3, 1);
  --rq-gut: clamp(20px, 4vw, 56px);
}

/* ============ GROUND RULES ============ */
.rq-wrap { max-width: calc(1240px + 2 * var(--rq-gut)); margin-inline: auto; padding-inline: var(--rq-gut); }
/* text fills its column; the column sets the measure */
.rqa main p { max-width: none; margin: 0; }
.rqa main a:not(.btn) { border-bottom: 0; }
.rqa main :is(ol, ul, dl, dd, figure) { margin: 0; padding: 0; list-style: none; }
.rqa main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.rqa main :is(a, .btn, summary, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.rqa .rq-end :is(a, .btn):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.rqa main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }
.rqa .btn:active { transform: translateY(1px) scale(.985); }
.rqa:not(.rq-on) .rq-jsonly { display: none; }

/* the onward link: the arrow leans the way it points */
.rq-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.rq-go span { display: inline-block; transition: transform 360ms var(--rq-ease); }
.rq-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.rq-go:hover span { transform: translateX(6px); }

/* drawings share one pen */
.rq-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.rq-d { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rq-d--thin { stroke: var(--border-strong); stroke-width: 1.4; }
.rq-d--accent { stroke: var(--accent-blue); stroke-width: 2.2; }
.rq-paper { fill: #fff; }
.rq-cell { fill: var(--accent-blue); transform-box: fill-box; transform-origin: center; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (rq-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.rq-js [data-r] { transition: opacity 560ms ease, transform 780ms var(--rq-ease); }
.rq-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.rq-js [data-r="row"]:not(.is-in) { transform: translateX(28px); }
.rq-js [data-r="fig"]:not(.is-in), .rq-js [data-r="clock"]:not(.is-in) { opacity: 1; transform: none; }
.rq-js .rq-list > li:nth-child(2) { transition-delay: 70ms; }
.rq-js .rq-list > li:nth-child(3) { transition-delay: 140ms; }
.rq-js .rq-list > li:nth-child(4) { transition-delay: 210ms; }
.rq-js .rq-route > li:nth-child(2) { transition-delay: 90ms; }
.rq-js .rq-route > li:nth-child(3) { transition-delay: 180ms; }
/* the room's questions arrive from the side its drawing sits on */
.rq-js .rq-part--room .rq-q:not(.is-in) { transform: translateX(-24px); }
/* the year above the last four is what moves there; the rows only fade */
.rq-js .rq-part--after .rq-q:not(.is-in) { transform: none; }

@keyframes rq-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes rq-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rq-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } }
@keyframes rq-stamp { from { transform: scale(1.7) rotate(-14deg); opacity: 0; } 60% { transform: scale(.94) rotate(0deg); opacity: 1; } }
@keyframes rq-swing { from { transform: rotate(-11deg); opacity: 0; } 55% { transform: rotate(4deg); opacity: 1; } 80% { transform: rotate(-1.5deg); } }
@keyframes rq-ring { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes rq-sweep { from { stroke-dashoffset: 50; } }
@keyframes rq-hand { from { transform: rotate(0deg); } }
@keyframes rq-unfold { from { opacity: 0; transform: translateY(-6px); } }
@keyframes rq-done { from { stroke-dashoffset: 1; } }
@keyframes rq-nudge { 0%, 100% { transform: none; } 40% { transform: translateY(-3px); } }

/* ============ HERO ============ */
.rq-hero { padding-block: clamp(20px, 3vw, 36px) clamp(48px, 6vw, 88px); }
.rq-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.rqa main :is(h1, h2) > :is(.h-lead, em) { display: inline-block; }
.rq-hero__h1 > em { color: var(--accent-blue); }
.rq-hero__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.rq-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); }
.rq-hero__use { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin-top: 18px !important; }
.rq-hero__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.rq-hero__go .btn span { display: inline-block; margin-left: 6px; transition: transform 360ms var(--rq-ease); }
.rq-hero__go .btn:hover span { transform: translateY(4px); }
.rq-hero__hint { font-size: 15px; line-height: 1.5; color: var(--ink-muted); margin-top: 16px !important; }
.rq-hero__fig { margin: 0; }

/* the sheet */
.rq-s { display: block; width: 100%; height: auto; overflow: visible; }
.rq-s :is(path, rect) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rq-s .rq-s__paper { fill: #fff; }
.rq-s .rq-s__box { fill: #fff; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.rq-s .rq-s__line { stroke: var(--border-strong); stroke-width: 1.4; }
.rq-s .rq-s__tick { stroke: var(--accent-blue); stroke-width: 2; }
.rq-s .rq-s__phone path { stroke-width: .21; }
.rq-s .rq-s__phone .rq-s__wave { stroke: var(--accent-blue); stroke-width: .24; }

/* first paint: the sheet, its twelve lines, then a tick on each, then the call */
.rq-js .rq-hero__h1 > * { animation: rq-up 900ms var(--rq-ease) both; }
.rq-js .rq-hero__h1 > em { animation-delay: 110ms; }
.rq-js .rq-hero__text > * { animation: rq-up 900ms var(--rq-ease) 240ms both; }
.rq-js .rq-hero__text > .rq-hero__use { animation-delay: 320ms; }
.rq-js .rq-hero__text > .rq-hero__go { animation-delay: 400ms; }
.rq-js .rq-hero__text > .rq-hero__hint { animation-delay: 480ms; }
.rq-js .rq-s :is(.rq-s__paper, .rq-s__line, .rq-s__tick, .rq-s__set, .rq-s__wave) { stroke-dasharray: 1; animation: rq-draw 700ms var(--rq-ease) both; }
.rq-js .rq-s .rq-s__paper { animation-duration: 1100ms; animation-delay: 150ms; }
.rq-js .rq-s .rq-s__box { animation: rq-pop 380ms var(--rq-ease) calc(650ms + var(--i) * 55ms) both; }
.rq-js .rq-s .rq-s__line { animation-duration: 520ms; animation-delay: calc(700ms + var(--i) * 55ms); }
.rq-js .rq-s .rq-s__tick { animation-duration: 300ms; animation-delay: calc(1650ms + var(--i) * 120ms); }
.rq-js .rq-s .rq-s__set { animation-duration: 1000ms; animation-delay: 3150ms; }
.rq-js .rq-s .rq-s__wave { animation-duration: 360ms; animation-delay: calc(4000ms + var(--w) * 220ms); }
/* the call stays live only while the drawing is on screen */
.rq-js .rq-hero__fig.is-live .rq-s__wave { stroke-dasharray: none; animation: rq-ring 2200ms ease-in-out calc(var(--w) * 320ms) infinite; }

/* once the reader has a list, the sheet shows theirs: a tick for each box ticked below */
.rq-s.is-mine .rq-s__tick { animation: none !important; opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 320ms var(--rq-ease); }
.rq-s.is-mine .rq-s__row.is-on .rq-s__tick { stroke-dashoffset: 0; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.rqa .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--rq-ease), visibility 0s 360ms;
}
.rqa .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--rq-ease); }
body.rqa.nav-open :is(.hc-bar, .rq-tray) { opacity: 0; visibility: hidden; }
.rqa .hc-bar__track {
  max-width: calc(1240px + 2 * var(--rq-gut)); margin: 0 auto; padding: 0 var(--rq-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
  /* an edge fade wherever the track can run past the window */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rq-gut), #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--rq-gut), #000 calc(100% - 36px), transparent 100%);
}
.rqa .hc-bar__track::-webkit-scrollbar { display: none; }
.rqa .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.rqa .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--rq-ease);
}
.rqa .hc-bar__track a:hover, .rqa .hc-bar__track a[aria-current] { color: var(--ink); }
.rqa .hc-bar__track a:hover::after { transform: scaleX(.35); }
.rqa .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.rqa .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.rqa .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ THE THREE GROUPS ============ */
.rq-part { padding-block: clamp(52px, 6.5vw, 100px); border-top: 1px solid var(--border); }
.rq-part--room { background: var(--accent-wash); border-top: 0; }
.rq-part--after { border-top: 0; }
.rq-part__head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 21vw, 270px); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.rq-part--room .rq-part__head { grid-template-columns: clamp(190px, 21vw, 270px) minmax(0, 1fr); }
.rq-part__head h2 { padding-bottom: 6px; }

/* a question: its box, the words to say, and the two answers you may hear */
.rq-q { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: clamp(10px, 1.6vw, 22px); padding-block: clamp(20px, 2.4vw, 30px); border-top: 1px solid var(--border-strong); }
.rq-list > .rq-q:last-child { border-bottom: 1px solid var(--border-strong); }
.rq-q__tick { position: relative; grid-row: 1 / span 2; width: 44px; height: 44px; margin-top: -5px; }
.rq-q__tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rq-q__tick svg { position: absolute; inset: 8px; width: 28px; height: 28px; pointer-events: none; overflow: visible; transition: transform 240ms var(--rq-ease); }
.rq-q__tick rect { fill: #fff; stroke: var(--ink-muted); stroke-width: 1.5; transition: fill 200ms, stroke 200ms; }
.rq-q__tick path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 300ms var(--rq-ease) 60ms; }
.rq-q__tick input:hover + svg { transform: scale(1.08); }
.rq-q__tick input:hover + svg rect { stroke: var(--accent-blue); }
.rq-q__tick input:active + svg { transform: scale(.92); }
.rq-q__tick input:checked + svg rect { fill: var(--accent-blue); stroke: var(--accent-blue); }
.rq-q__tick input:checked + svg path { stroke-dashoffset: 0; }
.rq-q__tick input:focus-visible + svg { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 8px; }
.rqa main .rq-q__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.85vw, 1.6rem); line-height: 1.3; letter-spacing: 0; color: var(--ink); margin: 0; max-width: none; text-wrap: wrap; }
.rq-q__h label { cursor: pointer; display: inline-block; padding-block: 2px; transition: color 200ms; }
.rq-q__h label:hover { color: var(--accent-blue-hover); }
.rq-q__ans { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px clamp(24px, 4vw, 64px); margin-top: 14px !important; }
.rq-a dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--accent-blue-hover); margin-bottom: 4px; }
.rq-a dt::before { content: ""; flex: none; width: 16px; height: 16px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A4B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.6'/%3E%3C/svg%3E"); }
.rq-a--thin dt { color: var(--ink-muted); }
.rq-a--thin dt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234A6480' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 8c1.5-2.4 3-2.4 4.5 0s3 2.4 4.5 0 2.2-1.6 3-.6'/%3E%3C/svg%3E"); }
.rq-a dd { font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.rq-a--thin dd { color: var(--ink-muted); }

/* the vial and its paperwork */
.rq-js .rq-vial:not(.is-in) :is(.rq-d, .rq-seal path) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rq-js .rq-vial:not(.is-in) :is(.rq-cell, .rq-seal) { opacity: 0; }
.rq-js .rq-vial.is-in .rq-d { stroke-dasharray: 1; animation: rq-draw 760ms var(--rq-ease) both; }
.rq-js .rq-vial.is-in .rq-d:nth-of-type(2) { animation-delay: 160ms; }
.rq-js .rq-vial.is-in .rq-d:nth-of-type(3) { animation-delay: 420ms; }
.rq-js .rq-vial.is-in .rq-cell { animation: rq-pop 380ms var(--rq-ease) calc(560ms + var(--i) * 80ms) both; }
.rq-js .rq-vial.is-in .rq-paper { animation-delay: 900ms; }
.rq-js .rq-vial.is-in .rq-paper + .rq-d { animation-delay: 1300ms; }
.rq-seal { transform-box: fill-box; transform-origin: center; }
.rq-seal circle { fill: var(--accent-blue); }
.rq-seal path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rq-js .rq-vial.is-in .rq-seal { animation: rq-stamp 520ms var(--rq-ease) 1900ms both; }

/* the badge and the hospital */
.rq-badge { transform-box: fill-box; transform-origin: 50% 0; }
.rq-cross { transform-box: fill-box; transform-origin: center; }
.rq-js .rq-room:not(.is-in) .rq-d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rq-js .rq-room.is-in .rq-hosp .rq-d { stroke-dasharray: 1; animation: rq-draw 800ms var(--rq-ease) both; }
.rq-js .rq-room.is-in .rq-hosp .rq-d:nth-child(2) { animation-delay: 150ms; }
.rq-js .rq-room.is-in .rq-hosp .rq-d:nth-child(3) { animation-delay: 420ms; }
.rq-js .rq-room.is-in .rq-hosp .rq-d:nth-child(5) { animation-delay: 620ms; }
.rq-js .rq-room.is-in .rq-hosp .rq-d:nth-child(6) { animation-delay: 760ms; }
.rq-js .rq-room.is-in .rq-hosp .rq-cross { stroke-dasharray: none; animation: rq-pop 460ms var(--rq-ease) 1050ms both; }
.rq-js .rq-room.is-in .rq-badge { animation: rq-swing 1300ms var(--rq-ease) 900ms both; }

/* the year after: twelve months, a visit marked at 6 and at 12 */
.rq-year { margin: clamp(28px, 4vw, 48px) 0 clamp(30px, 4vw, 48px); padding: 96px 34px 8px 6px; }
.rq-year__track { position: relative; height: 2px; background: var(--border-strong); }
.rq-year__fill { position: absolute; inset: 0; background: var(--accent-blue); transform-origin: left; transform: scaleX(var(--rq-y, 1)); }
.rq-year__ticks { position: absolute; left: 0; right: 0; top: -5px; display: flex; justify-content: space-between; }
.rq-year__ticks i { width: 2px; height: 12px; margin-inline: -1px; background: var(--ink); border-radius: 1px; }
.rq-year__pin { position: absolute; bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateX(-50%); transition: opacity 320ms, transform 620ms var(--rq-ease); }
.rq-year__pin--6 { left: 50%; }
.rq-year__pin--12 { left: 100%; }
.rq-year__pin b { order: -1; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.rq-year__badge { width: 52px; height: 52px; border-radius: 50%; border: 1.7px solid var(--ink); background: #fff; display: grid; place-items: center; }
.rq-year__badge svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rq-year__badge .rq-year__mark { stroke: var(--accent-blue); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 360ms var(--rq-ease) 160ms; }
.rq-js .rq-year.is-led .rq-year__pin:not(.is-hit) { opacity: .38; transform: translate(-50%, -10px); }
.rq-js .rq-year.is-led .rq-year__pin:not(.is-hit) .rq-year__mark { stroke-dashoffset: 1; }

/* ============ WILL A CLINIC ANSWER ============ */
.rq-faq { padding-block: clamp(52px, 6.5vw, 100px); }
.rqa main .rq-faq h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.rq-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.rq-faq__lead { display: grid; grid-template-columns: clamp(96px, 11vw, 148px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: center; }
.rq-faq__pull { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.3; color: var(--ink); }
.rq-clock svg :is(circle, path) { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.rq-clock .rq-clock__sweep { stroke: var(--accent-wash); stroke-width: 78; stroke-linecap: butt; stroke-dasharray: 50 100; transform: rotate(-90deg); transform-origin: 100px 100px; }
.rq-clock .rq-clock__marks { stroke-width: 1.8; }
.rq-clock .rq-clock__hand { stroke: var(--accent-blue); stroke-width: 3.4; transform: rotate(180deg); transform-origin: 100px 100px; }
.rq-clock .rq-clock__hub { fill: var(--accent-blue); stroke: none; }
.rq-js [data-r="clock"]:not(.is-in) .rq-clock__sweep { stroke-dashoffset: 50; }
.rq-js [data-r="clock"]:not(.is-in) .rq-clock__hand { transform: rotate(0deg); }
.rq-js [data-r="clock"].is-in .rq-clock__sweep { animation: rq-sweep 1500ms cubic-bezier(.45, 0, .2, 1) 200ms both; }
.rq-js [data-r="clock"].is-in .rq-clock__hand { animation: rq-hand 1500ms cubic-bezier(.45, 0, .2, 1) 200ms both; }

.rq-faq__q { border-top: 1px solid var(--border-strong); }
.rq-faq__q:last-child { border-bottom: 1px solid var(--border-strong); }
.rq-faq__q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding-block: 14px; cursor: pointer; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 500; line-height: 1.4; color: var(--ink); transition: color 200ms; }
.rq-faq__q summary::-webkit-details-marker { display: none; }
.rq-faq__q summary:hover { color: var(--accent-blue-hover); }
.rq-faq__ic { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-strong); transition: transform 420ms var(--rq-ease), border-color 200ms, background 200ms; }
.rq-faq__ic::before, .rq-faq__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: currentColor; border-radius: 1px; transition: transform 420ms var(--rq-ease); }
.rq-faq__ic::after { transform: rotate(90deg); }
.rq-faq__q summary:hover .rq-faq__ic { border-color: var(--accent-blue); transform: rotate(90deg); }
.rq-faq__q[open] .rq-faq__ic { transform: rotate(180deg); background: var(--accent-wash); border-color: transparent; }
.rq-faq__q[open] .rq-faq__ic::after { transform: rotate(0deg); }
.rq-faq__a { padding: 0 52px 22px 0; }
.rq-faq__a p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.rq-faq__q[open] .rq-faq__a { animation: rq-unfold 420ms var(--rq-ease) both; }

/* ============ WHAT TO DO WITH THE ANSWERS ============ */
.rq-next { padding-block: clamp(52px, 6.5vw, 100px); border-top: 1px solid var(--border); }
.rqa main .rq-next h2 { margin-bottom: clamp(24px, 3.4vw, 44px); }
.rq-next__grid { display: grid; grid-template-columns: clamp(200px, 24vw, 320px) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.rq-two :is(rect, path) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rq-two .rq-two__sheet { fill: #fff; }
.rq-two .rq-two__box { stroke-width: 1.3; }
.rq-two .rq-two__line { stroke: var(--border-strong); stroke-width: 1.4; }
.rq-two .rq-two__line--gap { stroke-dasharray: 2 6; }
.rq-two .rq-two__tick { stroke: var(--accent-blue); stroke-width: 1.9; }
.rq-js .rq-two:not(.is-in) .rq-two__tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.rq-js .rq-two.is-in .rq-two__tick { stroke-dasharray: 1; animation: rq-done 300ms var(--rq-ease) calc(200ms + var(--i) * 130ms) both; }

.rq-route > li { border-top: 1px solid var(--border-strong); }
.rq-route > li:last-child { border-bottom: 1px solid var(--border-strong); }
.rq-route a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 28px; gap: 6px clamp(18px, 3vw, 40px); align-items: center; min-height: 92px; padding-block: 20px; color: var(--ink); }
.rq-route__t { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.25; transition: color 200ms; }
.rq-route__d { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.rq-route__go { font-size: 20px; color: var(--accent-blue); justify-self: end; transition: transform 360ms var(--rq-ease); }
.rq-route a:hover .rq-route__t { color: var(--accent-blue-hover); }
.rq-route a:hover .rq-route__go { transform: translateX(7px); }
.rq-route a:active .rq-route__go { transform: translateX(11px); }
.rq-next__back { margin-top: 12px !important; text-align: right; line-height: 44px; }

/* ============ CLOSE ============ */
.rqa main .rq-end h2 { color: #fff; font-size: clamp(2.2rem, 4vw, 3.5rem); margin: 0 0 20px; }
.rqa main .rq-end h2 em { color: var(--accent-ice); }
.rqa main .rq-end p { color: rgba(255, 255, 255, .82); margin: 0 0 36px; }

/* ============ THE TRAY: the reader's list ============ */
.rq-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border-strong); box-shadow: 0 -10px 30px rgba(11, 29, 58, .07);
  transform: translateY(105%); visibility: hidden;
  transition: transform 460ms var(--rq-ease), visibility 0s 460ms;
}
.rq-tray.is-on { transform: none; visibility: visible; transition: transform 460ms var(--rq-ease); }
.rq-tray__in { max-width: calc(1240px + 2 * var(--rq-gut)); margin: 0 auto; padding: 0 var(--rq-gut); height: var(--rq-tray-h); display: flex; align-items: center; gap: 16px; }
.rq-tray__meter { display: flex; gap: 9px; }
.rq-tray__meter span { display: flex; gap: 3px; }
.rq-tray__meter i { width: 11px; height: 11px; border-radius: 3px; border: 1.4px solid var(--ink-muted); background: #fff; transition: background 220ms, border-color 220ms, transform 320ms var(--rq-ease); }
.rq-tray__meter i.is-on { background: var(--accent-blue); border-color: var(--accent-blue); }
.rq-tray__meter i.is-new { animation: rq-pop 380ms var(--rq-ease) both; }
/* the count gives way, never the buttons: a long status line wraps inside its own space */
.rqa main .rq-tray__count { flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.rq-tray__count.is-bump span { display: inline-block; animation: rq-nudge 360ms var(--rq-ease); }
.rq-tray__acts { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rq-tray__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; font: 500 15px/1 var(--font-body); color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; transition: border-color 200ms, color 200ms, background 200ms, transform 240ms var(--rq-ease); }
.rq-tray__btn[hidden] { display: none; }
.rq-tray__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rq-tray__btn:hover { border-color: var(--accent-blue); color: var(--accent-blue-hover); transform: translateY(-2px); }
.rq-tray__btn:active { transform: translateY(0) scale(.97); }
.rq-tray__btn[data-rq-copy] { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; min-width: 118px; }
.rq-tray__btn[data-rq-copy]:hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); color: #fff; }
.rq-tray__btn--clear { border-color: transparent; background: none; color: var(--ink-muted); padding: 0 10px; text-decoration: underline; text-underline-offset: 4px; }
.rq-tray__btn--clear:hover { border-color: transparent; color: var(--ink); }
.rq-tray__btn .rq-ic-done { stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.rq-tray__btn.is-done .rq-ic-copy { opacity: 0; }
.rq-tray__btn.is-done .rq-ic-done { opacity: 1; stroke-dashoffset: 0; animation: rq-done 320ms var(--rq-ease) both; }

/* ============ NARROWER ============ */
@media (max-width: 900px) {
  .rq-hero__row { grid-template-columns: minmax(0, 1fr); }
  .rq-hero__fig { max-width: 420px; }
  .rq-faq__grid, .rq-next__grid { grid-template-columns: minmax(0, 1fr); }
  .rq-two { max-width: 260px; }
  .rq-next__back { text-align: left; }
}
@media (max-width: 760px) {
  .rq-part__head, .rq-part--room .rq-part__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rq-part__head .rq-fig { order: 2; max-width: 210px; }
  .rq-q__ans { grid-template-columns: minmax(0, 1fr); }
  .rq-q { column-gap: 6px; }
  .rq-year { padding: 92px 36px 8px 4px; }
  .rq-route a { grid-template-columns: minmax(0, 1fr) 28px; }
  .rq-route__d { grid-column: 1; grid-row: 2; }
  .rq-route__go { grid-row: 1 / span 2; }
  .rq-faq__a { padding-right: 0; }
}
@media (max-width: 620px) {
  html:has(body.rqa) { --rq-tray-h: 60px; }
  .rq-tray__in { gap: 10px; }
  /* the twelve boxes become a strip along the tray's top edge */
  .rq-tray__meter { position: absolute; left: 0; right: 0; top: -1px; gap: 6px; }
  .rq-tray__meter span { flex: 1; gap: 2px; }
  .rq-tray__meter i { flex: 1; width: auto; height: 3px; border: 0; border-radius: 0; background: var(--border-strong); }
  .rq-tray__btn { padding: 0 12px; }
  .rq-tray__btn[data-rq-copy] { min-width: 110px; }
  .rq-tray__btn--clear { padding: 0 6px; }
  .rqa main .rq-tray__count { font-size: 14px; }
}
/* the narrowest phones: Print keeps its icon and its name for a screen reader, and Copy takes only the room it needs */
@media (max-width: 360px) {
  .rq-tray__btn[data-rq-copy] { min-width: 0; }
  .rq-tray__btn[data-rq-print] { width: 44px; padding: 0; }
  .rq-tray__btn[data-rq-print] span { display: none; }
  .rqa main .rq-tray__count { font-size: 13px; }
}

/* Parts waiting to slide in sit a little to one side; without this the page
   could be scrolled sideways until they arrive. clip keeps sticky working. */
.rqa main { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  .rqa main *, .rqa main *::before, .rqa main *::after { animation: none !important; transition: none !important; }
  .rq-js [data-r]:not(.is-in) { opacity: 1 !important; transform: none !important; }
  .rq-js .rq-s :is(.rq-s__paper, .rq-s__line, .rq-s__tick, .rq-s__set, .rq-s__wave),
  .rq-js :is(.rq-vial, .rq-room, .rq-two) :is(.rq-d, .rq-seal path, .rq-two__tick) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .rq-js .rq-vial:not(.is-in) :is(.rq-cell, .rq-seal) { opacity: 1; }
  .rq-js [data-r="clock"]:not(.is-in) .rq-clock__sweep { stroke-dashoffset: 0; }
  .rq-js [data-r="clock"]:not(.is-in) .rq-clock__hand { transform: rotate(180deg); }
  .rq-tray__btn.is-done .rq-ic-done { stroke-dasharray: none; }
  .rq-go:hover span, .rq-route a:hover .rq-route__go, .rq-hero__go .btn:hover span, .rq-tray__btn:hover, .rq-q__tick input:hover + svg { transform: none; }
}

/* ============ PAPER ============
   Taken the instant the print dialog opens: nothing may still be fading,
   drawing or sliding in, every fold is open, and the page's own chrome is gone. */
@media print {
  @page { margin: 14mm 15mm; }
  .rqa .hc-bar, .rq-tray { display: none !important; }
  .rqa main *, .rqa main *::before, .rqa main *::after { animation: none !important; transition: none !important; }
  .rq-js [data-r] { opacity: 1 !important; transform: none !important; }
  .rq-js .rq-hero__h1 > *, .rq-js .rq-hero__text > * { opacity: 1 !important; transform: none !important; }
  .rq-js .rq-s *, .rq-js .rq-fig *, .rq-q__tick path { stroke-dasharray: none !important; opacity: 1 !important; }
  .rq-s.is-mine .rq-s__row:not(.is-on) .rq-s__tick { stroke: transparent !important; }
  .rq-js .rq-s *, .rq-js :is(.rq-vial, .rq-room, .rq-two) * { stroke-dashoffset: 0 !important; transform: none !important; }
  .rq-clock .rq-clock__sweep { stroke-dasharray: 50 100 !important; stroke-dashoffset: 0 !important; }
  .rq-clock .rq-clock__hand { transform: rotate(180deg) !important; }
  .rq-q__tick input:not(:checked) + svg path { stroke: transparent; }
  .rq-year__fill { transform: none !important; }
  .rq-year__pin { opacity: 1 !important; transform: translateX(-50%) !important; }
  .rq-year__mark { stroke-dashoffset: 0 !important; }
  .rq-part--room { background: #fff; }
  .rq-faq__ic { display: none; }
  .rq-end { background: #fff !important; }
  .rq-end .ctaband__pattern { display: none; }
  .rqa .rq-end :is(h2, h2 em, p) { color: var(--ink) !important; }
  .rq-q, .rq-faq__q, .rq-route > li { break-inside: avoid; }

  /* THE SHEET. With any box ticked (or when the tray's Print asked for all
     twelve) the printout is the list alone: the heading, the questions and
     the two answers to listen for. No script needed for the ticked case. */
  html:is(.rq-sheet, :has(.rq-list input:checked)) :is(body > :not(main), .rq-hero__row, .rq-part__head, .rq-part > .rq-wrap > h2, .rq-year, .rq-faq, .rq-next, .rq-end) { display: none !important; }
  html:has(.rq-list input:checked) .rq-q:not(:has(input:checked)) { display: none !important; }
  html:has(.rq-list input:checked) .rq-part:not(:has(input:checked)) { display: none !important; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-hero { padding: 0 0 7pt; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-hero__h1 { font-size: 19pt; margin: 0; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-hero__h1 > em { color: var(--ink); }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-part { padding: 0; border: 0; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-wrap { padding-inline: 0; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-q { padding-block: 4.5pt; grid-template-columns: 22pt minmax(0, 1fr); border-color: #9aa5b5; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-list > .rq-q:last-child { border-bottom: 0; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-q__tick { width: 16pt; height: 16pt; margin-top: 1pt; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-q__tick svg { inset: 0; width: 13pt; height: 13pt; }
  /* on paper the box is empty again: it is ticked by hand, on the call */
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-q__tick rect { fill: #fff !important; stroke: var(--ink) !important; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-q__tick path { stroke: transparent !important; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-q__h { font-size: 12pt; line-height: 1.25; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-q__ans { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2pt !important; gap: 2pt 18pt; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-a dt { display: inline; font-size: 9pt; margin: 0; color: var(--ink); }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-a dt::after { content: ": "; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-a dt::before { display: none; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-a { font-size: 9.5pt; line-height: 1.35; }
  html:is(.rq-sheet, :has(.rq-list input:checked)) .rq-a dd { display: inline; font-size: 9.5pt; line-height: 1.35; color: var(--ink); }
  html:is(.rq-sheet, :has(.rq-list input:checked)) main::after { content: "celva.com/research-questions-to-ask"; display: block; margin-top: 5pt; font-size: 9pt; color: #4A6480; }
}