/* The interview question library: page layout (.iq-*) and the practice box (.iqp-*).
   Source of /assets/iq-library.<hash>.css, written by _templates/interview_library.py.
   Never edit the copy in assets/: edit this file and rebuild. */

.iq-page { --iq-maroon: #470014; --iq-red: #AF0000; --iq-line: rgba(71, 0, 20, .14); --iq-soft: rgba(71, 0, 20, .66); color: var(--iq-maroon); }
.iq-page p { margin: 0; }

/* Breadcrumbs */
.iq-crumbs { position: relative; z-index: 1; font-size: .95rem; line-height: 1.5; }
.iq-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.iq-crumbs li { display: flex; align-items: center; gap: .5rem; color: var(--iq-soft); min-width: 0; }
.iq-crumbs li + li::before { content: "/"; opacity: .6; }
.iq-crumbs a { color: var(--iq-maroon); text-decoration: none; }
.iq-crumbs a:hover { text-decoration: underline; text-underline-offset: .2em; }
.iq-crumbs [aria-current] { overflow-wrap: anywhere; }

/* Hero (index, list and topic pages) */
.iq-hero { position: relative; z-index: 1; max-width: 52rem; margin: 2.5rem auto 0; text-align: center; }
.iq-eyebrow { justify-content: center; color: var(--iq-maroon); opacity: .7; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; margin-bottom: 1.1rem; }
.iq-h1 { margin: 0; color: var(--iq-maroon); }
.iq-bar { width: 64px; height: 3px; border-radius: 999px; background: var(--iq-red); margin: 1.5rem auto 1.6rem; }
.iq-intro { opacity: .85; }
.iq-intro + .iq-intro { margin-top: .9rem; }

/* Sections */
.iq-section { position: relative; z-index: 1; margin-top: 3.5rem; }
.iq-section-sm { position: relative; z-index: 1; margin-top: 2.75rem; }
.iq-group { scroll-margin-top: 8rem; }
.iq-wide { max-width: 72rem; margin-left: auto; margin-right: auto; }
.iq-read { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.iq-h2 { font-family: var(--font-family--heading); font-weight: 300; font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.2; color: var(--iq-maroon); margin: 0 0 1.1rem; }
.iq-page .iq-label { font-family: var(--font-family--body); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-soft); margin: 0 0 .9rem; }
.iq-prose { max-width: 46rem; }
.iq-prose p + p { margin-top: 1rem; }
.iq-card { background: #fff; border: 1px solid var(--iq-line); border-radius: 8px; padding: 1.5rem; }

/* Index: the two formats, side by side; their buttons share a line */
.iq-formats { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.iq-format { display: flex; flex-direction: column; gap: 1rem; }
.iq-format .iq-h2 { margin: 0; }
.iq-format .button { align-self: flex-start; margin-top: auto; }
.iq-format p + p { margin-top: -.25rem; }

/* Index: topic tiles. The count sits on the tile's floor so every count in a row lines up. */
.iq-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.iq-tile { display: flex; flex-direction: column; gap: .75rem; min-height: 7rem; text-decoration: none; color: var(--iq-maroon); transition: border-color .2s; }
.iq-tile:hover { border-color: var(--iq-red); }
.iq-tile-name { font-family: var(--font-family--heading); font-weight: 300; font-size: 1.375rem; line-height: 1.25; }
.iq-tile-count { margin-top: auto; font-size: .95rem; color: var(--iq-soft); }

/* Lists of questions */
.iq-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem; margin-bottom: .5rem; }
.iq-group-head .iq-h2 { margin: 0; }
.iq-more { color: var(--iq-red); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.iq-more:hover { opacity: .75; }
.iq-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--iq-line); }
.iq-list li { border-bottom: 1px solid var(--iq-line); }
.iq-row { display: flex; flex-direction: column; gap: .2rem; padding: .95rem 0; text-decoration: none; color: var(--iq-maroon); }
.iq-row-title { font-size: 1.0625rem; line-height: 1.4; }
.iq-row-kind { font-size: .9rem; color: var(--iq-soft); }
.iq-row:hover .iq-row-title { text-decoration: underline; text-underline-offset: .2em; }
.iq-jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.iq-jump a { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--iq-line); border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--iq-maroon); text-decoration: none; font-size: .9375rem; line-height: 1.4; }
.iq-jump a:hover { border-color: var(--iq-red); }

/* Question page */
.iq-eyebrow-left { justify-content: flex-start; margin: 2.5rem 0 1rem; }
.iq-h1-left { font-family: var(--font-family--heading); font-weight: 300; font-size: clamp(2.1rem, 6vw, 3.25rem); line-height: 1.12; letter-spacing: -.01em; }
.iq-facts { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 1.5rem 0 0; }
.iq-facts div { display: flex; flex-direction: column; gap: .15rem; }
.iq-facts dt { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-soft); }
.iq-facts dd { margin: 0; font-size: 1.0625rem; }
.iq-facts a { color: var(--iq-maroon); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.iq-prompt { margin-top: .5rem; }
.iq-prompt p { font-size: 1.125rem; line-height: 1.65; }
.iq-prompt p + p { margin-top: .9rem; }
.iq-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.iq-chips li { padding: .4rem .9rem; border: 1px solid var(--iq-line); border-radius: 999px; background: #fff; font-size: .9375rem; line-height: 1.4; }
.iq-advisor { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.iq-advisor .iq-h2 { margin: 0; }
.iq-advisor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* The classic questions' long guide, under the approach. Only what guide_html() emits. */
.iq-page .iq-h3 { font-family: var(--font-family--heading); font-weight: 300; font-size: 1.5rem; line-height: 1.25; color: var(--iq-maroon); margin: 0 0 .75rem; }
.iq-guide { margin-top: 1rem; }
.iq-prose + .iq-guide { margin-top: 2rem; }
.iq-page .iq-guide > * + * { margin-top: 1rem; }
.iq-page .iq-guide > * + .iq-h3 { margin-top: 2rem; }
.iq-page .iq-guide > .iq-h3 + * { margin-top: 0; }
.iq-guide ul, .iq-guide ol { margin-bottom: 0; padding-left: 1.25rem; font-size: 1.12rem; line-height: 1.5; font-weight: 300; }
.iq-guide li { margin-bottom: 0; }
.iq-guide li + li { margin-top: .5rem; }
.iq-guide strong { font-weight: 600; }
.iq-guide blockquote { margin: 0; padding: 1rem 1.25rem; border-left: 3px solid var(--iq-red); background: #fff; border-radius: 0 6px 6px 0; font-size: 1rem; }

.iq-example { padding: 1.25rem 1.5rem; border-left: 3px solid var(--iq-red); background: #fff; border-radius: 0 8px 8px 0; }
.iq-example > p + p { margin-top: 1rem; }
.iq-page .iq-guide > .iq-example + * { margin-top: 2rem; }

/* FAQ: one question per block, read top to bottom. */
.iq-faq { max-width: 46rem; }
.iq-faq-item + .iq-faq-item { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--iq-line); }
.iq-faq .iq-h3 { font-size: 1.375rem; margin-bottom: .5rem; }

@media (min-width: 640px) {
  .iq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iq-row { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
  .iq-row-kind { flex: none; text-align: right; }
  .iq-card { padding: 2rem; }
}
@media (min-width: 768px) {
  /* Side by side, the two cards share their rows: title, definition, timing and button
     each start on the same line in both, whichever paragraph runs longer. */
  .iq-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 1.5rem; row-gap: 0; }
  .iq-format { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 1rem; }
  .iq-format p + p { margin-top: 0; }
}
@media (min-width: 768px) {
  /* The common questions in two columns. Each list item is a grid cell, so a row's
     two items share one height and their dividing lines stay level across columns. */
  .iq-list-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; border-top: 0; }
  .iq-list-cols li:nth-child(-n+2) { border-top: 1px solid var(--iq-line); }
  .iq-list-cols .iq-row { height: 100%; box-sizing: border-box; }
}
@media (min-width: 992px) { .iq-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
@media (max-width: 479px) { .iq-hero, .iq-eyebrow-left { margin-top: 1.75rem; } }

/* ── Practice box ─────────────────────────────────────────────────────────── */
.iqp { font-size: 1rem; line-height: 1.6; }
.iqp p { font-size: 1rem; }
.iqp [hidden] { display: none !important; }
.iqp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 2.75rem; }
.iqp-stage { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-soft); }
.iqp-clock { font-family: var(--font-family--heading); font-weight: 300; font-size: 2.25rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--iq-maroon); }
.iqp-clock.is-up { color: var(--iq-red); }
.iqp .iqp-timeup { margin-top: .4rem; color: var(--iq-red); font-weight: 500; }
.iqp .iqp-q { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.65; }
.iqp-q-label { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-soft); margin-bottom: .35rem; }
.iqp .iqp-plan { margin: 0 0 1rem; }
.iqp-modes { display: inline-flex; min-width: 0; border: 1px solid var(--iq-line); border-radius: 999px; padding: 3px; background: #faf9f3; margin: 0; }
.iqp-modes legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.iqp-modes label { position: relative; cursor: pointer; }
.iqp-modes input { position: absolute; opacity: 0; pointer-events: none; }
.iqp-modes span { display: block; padding: .45rem 1.1rem; border-radius: 999px; font-size: .9375rem; color: var(--iq-maroon); }
.iqp-modes input:checked + span { background: var(--iq-maroon); color: #fff; }
.iqp-modes input:focus-visible + span { outline: 2px solid var(--iq-red); outline-offset: 2px; }
.iqp .iqp-note { margin-top: .75rem; font-size: .9375rem; color: var(--iq-soft); }
.iqp-note.is-warn { color: var(--iq-red); }
.iqp-answer { display: block; width: 100%; min-height: 11rem; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid rgba(71, 0, 20, .25); border-radius: 6px; background: #fff; font: inherit; font-size: 1rem; line-height: 1.6; color: var(--iq-maroon); resize: vertical; box-sizing: border-box; }
.iqp-answer:focus { outline: 2px solid var(--iq-maroon); outline-offset: 1px; }
.iqp-answer[readonly] { background: #fbfaf5; }
.iqp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.iqp-actions .button { border: 0; cursor: pointer; font-family: inherit; }
.iqp-actions .button[disabled] { opacity: .45; cursor: default; }
.iqp-mic { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border: 1px solid rgba(71, 0, 20, .3); border-radius: 4px; background: #fff; color: var(--iq-maroon); font: inherit; cursor: pointer; }
.iqp-mic:hover { border-color: var(--iq-maroon); }
.iqp-mic-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(71, 0, 20, .35); flex: none; }
.iqp-mic.is-on .iqp-mic-dot { background: var(--iq-red); animation: iqp-breathe 1.6s ease-in-out infinite; }

/* scholr AI is thinking: the logo's red dot breathing, a hairline ring rippling out of it. No glow. */
.iqp-thinking { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; }
.iqp-dot-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; }
.iqp-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--iq-red); opacity: 0; animation: iqp-ripple 1.6s ease-out infinite; }
.iqp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--iq-red); animation: iqp-breathe 1.6s ease-in-out infinite; }
.iqp-thinking-text { font-size: .9375rem; color: var(--iq-soft); }
@keyframes iqp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes iqp-ripple { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .iqp-ring, .iqp-dot, .iqp-mic.is-on .iqp-mic-dot { animation: none; } }

/* Feedback. Every rating row has the same three lines in the same places. */
.iqp-fb-block + .iqp-fb-block { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--iq-line); }
.iqp-said + .iqp-said { margin-top: 1.1rem; }
.iqp-said-label { font-weight: 600; }
.iqp .iqp-said-q { margin-top: .2rem; color: var(--iq-soft); font-size: .9375rem; }
.iqp .iqp-said-a { margin-top: .4rem; white-space: pre-wrap; }
.iqp-ratings { list-style: none; margin: 0; padding: 0; }
.iqp-ratings li + li { margin-top: 1.25rem; }
.iqp-rating-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.iqp-rating-name { font-weight: 600; }
.iqp-rating-level { font-variant-numeric: tabular-nums; color: var(--iq-soft); font-size: .9375rem; }
.iqp-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: .45rem; }
.iqp-bar span { height: 6px; border-radius: 999px; background: rgba(71, 0, 20, .12); }
.iqp-bar span.is-on { background: var(--iq-red); }
.iqp .iqp-evidence { margin-top: .45rem; color: var(--iq-soft); font-size: .9375rem; }
.iqp .iqp-sub { font-weight: 600; margin: 0 0 .4rem; }
.iqp .iqp-sub-lg { font-family: var(--font-family--heading); font-weight: 300; font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem; }
.iqp-bullets { margin: 0; padding-left: 1.2rem; }
.iqp-bullets li + li { margin-top: .35rem; }
.iqp .iqp-sample { margin: 0 0 1.25rem; padding: .75rem 1rem; border-radius: 6px; background: #faf6e8; border: 1px dashed rgba(71, 0, 20, .3); font-size: .9375rem; }
.iqp-left { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--iq-line); }
.iqp-error { color: var(--iq-red); }

/* ── Library index: the features of the practice tool ─────────────────────── */
.iq-hero-cta { display: flex; justify-content: center; margin-top: 1.75rem; }
.iq-features-h { max-width: 44rem; margin: 0 auto; text-align: center; }

/* The row of three practice features. No boxes: an icon in the brand's circle, with
   the logo's red dot on it, then the title and the text. */
.iq-feat-row { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.iq-feat { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.iq-feat-icon { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #fff; border: 1px solid var(--iq-line); color: var(--iq-maroon); transition: border-color .3s, transform .3s; }
.iq-feat-icon::after { content: ""; position: absolute; top: .35rem; right: .35rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--iq-red); }
.iq-feat-icon svg { width: 1.6rem; height: 1.6rem; }
.iq-feat:hover .iq-feat-icon { border-color: var(--iq-red); transform: translateY(-2px); }
.iq-page .iq-feat .iq-h3 { font-size: 1.375rem; margin: 0; }
.iq-feat p { max-width: 22rem; opacity: .85; }
@media (min-width: 768px) {
  /* Side by side, the three share their rows: every icon, title and paragraph starts on
     one line, whichever title wraps. */
  .iq-feat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0; }
  .iq-feat { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; align-items: start; row-gap: .9rem; padding: 0 1.5rem; }
  .iq-feat + .iq-feat { border-left: 1px solid var(--iq-line); }
}

/* How scholr AI scores you: a maroon panel, the edge-grid's circles faint in its corner,
   and a sample of the feedback beside it. */
.iq-score { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 4rem; padding: 2.25rem 1.5rem; border-radius: 12px; background: var(--iq-maroon); color: #E9E7D6; }
.iq-score::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(233, 231, 214, .2) 1.6px, transparent 2.1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(110% 80% at 0% 0%, #000 0%, transparent 55%); mask-image: radial-gradient(110% 80% at 0% 0%, #000 0%, transparent 55%); }
.iq-page .iq-score-eyebrow { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(233, 231, 214, .75); }
.iq-score-dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: #E9E7D6; }
.iq-score-h { margin: 1rem 0 0; font-family: var(--font-family--heading); font-weight: 300; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.15; color: #fff; }
.iq-page .iq-score-lead { margin-top: 1rem; font-size: 1.125rem; line-height: 1.6; color: rgba(233, 231, 214, .9); }
.iq-page .iq-score-label { margin-top: 1.75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 231, 214, .65); }
.iq-score-chips { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.iq-score-chips li { margin: 0; padding: .35rem .8rem; border: 1px solid rgba(233, 231, 214, .3); border-radius: 999px; font-size: .875rem; line-height: 1.4; color: #E9E7D6; }
.iq-score-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; }
.iq-score-point { padding-top: 1.25rem; border-top: 1px solid rgba(233, 231, 214, .2); }
.iq-score-point-h { margin: 0 0 .5rem; font-family: var(--font-family--heading); font-weight: 300; font-size: 1.375rem; line-height: 1.25; color: #fff; }
.iq-score-point p { color: rgba(233, 231, 214, .85); }
@media (min-width: 640px) {
  /* The two points share their rows, so both paragraphs start on one line. */
  .iq-score-points { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 2rem; row-gap: 0; }
  .iq-score-point { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: .5rem; }
  .iq-score-point-h { margin: 0; }
}
@media (min-width: 992px) {
  .iq-score { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 3.5rem; padding: 3.5rem; }
}

/* The sample feedback, drawn the way the practice box draws the real thing. */
.iq-sample { margin: 0; padding: 1.5rem; border-radius: 10px; background: #fff; color: var(--iq-maroon); box-shadow: 0 24px 60px rgba(20, 0, 6, .35); }
.iq-sample-label { text-align: left; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-red); }
.iq-sample-q { display: block; margin-top: .5rem; font-family: var(--font-family--heading); font-weight: 300; font-size: 1.375rem; line-height: 1.25; color: var(--iq-maroon); text-decoration: none; }
.iq-sample-q:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.iq-sample-fmt { display: block; margin-bottom: .2rem; font-family: var(--font-family--body); font-size: .875rem; color: var(--iq-soft); }
.iq-page .iq-sample-sub { margin-top: 1.25rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-soft); }
.iq-sample-ratings { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--iq-line); }
.iq-sample-ratings li { margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--iq-line); }
.iq-sample-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .9375rem; font-weight: 500; }
.iq-sample-level { flex: none; font-weight: 400; color: var(--iq-soft); font-variant-numeric: tabular-nums; }
.iq-sample-bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: .55rem; }
.iq-sample-bar span { position: relative; overflow: hidden; height: 6px; border-radius: 999px; background: rgba(71, 0, 20, .1); }
.iq-sample-bar .is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--iq-red); transform-origin: left center; }
.iq-page .iq-sample-evidence { margin-top: .65rem; padding-left: .75rem; border-left: 2px solid var(--iq-red); font-size: .9375rem; line-height: 1.5; color: var(--iq-soft); }
.iq-page .iq-sample-work { margin-top: .35rem; font-size: .9375rem; line-height: 1.5; }
/* The five rating levels, named the way the feedback names them. */
.iq-scale-names { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.iq-scale-names li { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--iq-soft); white-space: nowrap; }
.iq-scale-n { font-weight: 600; color: var(--iq-maroon); font-variant-numeric: tabular-nums; }
.iq-sample .iq-scale { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--iq-line); }
.iq-sample .iq-scale-names { margin: 0; justify-content: space-between; gap: .2rem .6rem; }
.iq-sample .iq-scale-names li { font-size: .8125rem; }

/* Coming into view: the three features rise in turn and the sample's bars fill, row by
   row. practice.js arms this only where the browser can watch for it and motion is
   allowed, so without it everything is simply drawn in place. */
[data-iq-reveal].is-armed .iq-feat { opacity: 0; transform: translateY(14px); }
[data-iq-reveal].is-armed.is-in .iq-feat { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }
[data-iq-reveal].is-armed.is-in .iq-feat:nth-child(2) { transition-delay: .12s; }
[data-iq-reveal].is-armed.is-in .iq-feat:nth-child(3) { transition-delay: .24s; }
[data-iq-sample].is-armed .is-on::after { transform: scaleX(0); }
[data-iq-sample].is-armed.is-in .is-on::after { transform: scaleX(1); transition: transform .4s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--row, 0) * 220ms + var(--i, 1) * 90ms); }

/* ── Question page: practice first, guidance after ─────────────────────────── */
.iq-page .iq-invite { margin: -.35rem 0 1rem; color: var(--iq-soft); }
.iq-after { margin-top: 1.25rem; border-top: 1px solid var(--iq-line); border-bottom: 1px solid var(--iq-line); }
.iq-after summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 500; color: var(--iq-maroon); }
.iq-after summary::-webkit-details-marker { display: none; }
.iq-after summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.iq-after[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.iq-after summary:focus-visible { outline: 2px solid var(--iq-red); outline-offset: 2px; }
.iq-after-body { padding: .25rem 0 1.5rem; }
.iq-page .iq-after-body .iq-h3 { font-size: 1.375rem; margin: 0 0 .75rem; }
.iq-page .iq-after-body * + .iq-h3 { margin-top: 1.75rem; }

/* ── Practice box: settings, progress and the free limit ──────────────────── */
.iqp-settings { margin-top: 1rem; }
.iqp-settings summary { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; color: var(--iq-maroon); font-weight: 500; list-style: none; border-bottom: 1px solid currentColor; }
.iqp-settings summary::-webkit-details-marker { display: none; }
.iqp-settings summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.iqp-settings[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.iqp-settings .iqp-timing { margin-top: 1rem; }
/* The fields share rows: every label on one line, every select on the next. */
.iqp-fields { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.iqp-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.iqp-field label { font-size: .875rem; font-weight: 600; color: var(--iq-maroon); }
.iqp-field select { width: 100%; height: 2.75rem; padding: 0 2.5rem 0 .75rem; border: 1px solid rgba(71, 0, 20, .25); border-radius: 6px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23470014' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; font: inherit; font-size: 1rem; color: var(--iq-maroon); box-sizing: border-box; margin: 0; }
.iqp-field select:focus { outline: 2px solid var(--iq-maroon); outline-offset: 1px; }
.iqp-field.is-off { opacity: .45; }
.iqp-check { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; cursor: pointer; font-size: 1rem; color: var(--iq-maroon); }
.iqp-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--iq-maroon); }
@media (min-width: 480px) {
  .iqp-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
.iqp .iqp-progress { margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--iq-line); font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-red); }
.iqp-actions.iqp-actions-flush { margin-top: 0; }
.iqp-limit { padding: 1.25rem 1.5rem; border-radius: 8px; background: #faf6e8; border: 1px solid rgba(71, 0, 20, .14); }
.iqp-limit .iqp-limit-text { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.55; }
.iqp-limit-top { margin-bottom: 1.75rem; }
.iqp-left-limit { margin-top: 1.75rem; }

/* ── The set builder and the set summary ───────────────────────────────────── */
.iq-set-wrap .iq-h2 { margin-bottom: 1rem; }
.iqs-step + .iqs-step { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--iq-line); }
.iqp .iqs-label { margin: 0 0 .75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--iq-soft); }
.iqs-fields { margin-top: 1rem; }
.iqp .iqs-count { margin-top: 1rem; font-size: .9375rem; color: var(--iq-soft); }
.iqp .iqs-free { margin-top: .75rem; }
.iqs-timing + .iqp-plan { margin: 1rem 0 0; color: var(--iq-soft); font-size: .9375rem; }
.iqs-summary { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--iq-line); counter-reset: iqs; }
.iqs-summary > li { counter-increment: iqs; position: relative; padding: 1rem 0 1rem 2.25rem; border-bottom: 1px solid var(--iq-line); }
.iqs-summary > li::before { content: counter(iqs); position: absolute; left: 0; top: 1rem; width: 1.6rem; font-family: var(--font-family--heading); font-size: 1.25rem; line-height: 1.4; color: var(--iq-red); }
.iqs-title { display: inline-block; font-size: 1.0625rem; line-height: 1.4; color: var(--iq-maroon); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.iqs-ratings { list-style: none; margin: .5rem 0 0; padding: 0; }
.iqs-ratings li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; font-size: .9375rem; padding: .2rem 0; }
.iqs-level { color: var(--iq-soft); font-variant-numeric: tabular-nums; }
.iqp .iqs-none { margin-top: .4rem; font-size: .9375rem; color: var(--iq-soft); }
.iqp-limit .button.is-secondary { background: #fff; box-shadow: inset 0 0 0 1px rgba(71, 0, 20, .18); }

/* ── The article: five applicants' accounts ───────────────────────────────── */
.iqa-h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
.iq-page .iqa-byline { margin-top: 1.25rem; color: var(--iq-soft); font-size: 1rem; line-height: 1.6; }
.iqa-person { color: var(--iq-maroon); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.iqa-byline .iqa-person { color: inherit; }
.iqa-toc { margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--iq-line); border-radius: 8px; }
.iqa-toc ol { margin: 0; padding-left: 1.25rem; }
.iqa-toc li { margin: 0; padding: .2rem 0; line-height: 1.45; }
.iqa-toc a { color: var(--iq-maroon); text-decoration: none; }
.iqa-toc a:hover { text-decoration: underline; text-underline-offset: .2em; }
.iqa-body { max-width: none; }
.iq-page .iqa-body > * + * { margin-top: 1rem; }
.iq-page .iqa-body > .iqa-h2 { margin: 3rem 0 1rem; scroll-margin-top: 7rem; }
.iq-page .iqa-body > .iqa-h3 { margin: 2.25rem 0 .75rem; font-size: 1.5rem; }
.iq-page .iqa-body > .iqa-h4 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; }
.iq-page .iqa-body > .iqa-h2:first-child { margin-top: 0; }
.iq-page .iqa-body > h2 + *, .iq-page .iqa-body > h3 + * { margin-top: 0; }
.iqa-body ul { margin: 1rem 0 0; padding-left: 1.25rem; font-size: 1.12rem; line-height: 1.5; font-weight: 300; }
.iqa-body li { margin: 0; }
.iqa-body li + li { margin-top: .45rem; }
.iqa-body a:not(.iq-more):not(.iqa-person) { color: var(--iq-maroon); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.iqa-quote { margin: 0; padding: 1rem 1.25rem; border-left: 3px solid var(--iq-red); background: #fff; border-radius: 0 8px 8px 0; font-size: inherit; line-height: inherit; }
.iq-page .iqa-quote p + p { margin-top: .9rem; }
.iq-page .iqa-tip { padding: 1rem 1.25rem; border-radius: 8px; background: #faf6e8; border: 1px solid rgba(71, 0, 20, .12); }
.iq-page .iqa-cta { margin-top: 1.5rem; }
.iq-section .iqa-cta, .iq-section-sm .iqa-cta { margin-top: 1.25rem; }
.iqa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.iqa-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--iq-line); border-radius: 8px; font-size: 1rem; }
.iqa-table th, .iqa-table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--iq-line); vertical-align: baseline; }
.iqa-table th { font-weight: 600; color: var(--iq-maroon); }
.iqa-table td + td, .iqa-table th + th { text-align: right; font-variant-numeric: tabular-nums; }
.iqa-table td + td { white-space: nowrap; }
@media (max-width: 479px) { .iqa-table th, .iqa-table td { padding: .6rem .75rem; } }
.iqa-table tr:last-child td { border-bottom: 0; }
.iqa-said { margin: 0; }
.iqa-said figcaption { margin-top: .75rem; padding-left: calc(1.25rem + 3px); text-align: left; font-weight: 500; }