@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/red-hat-display-latin-900-normal.d8fc457b3c.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/red-hat-text-latin-400-normal.65129f7169.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:600 700;font-display:swap;src:url('/assets/fonts/red-hat-text-latin-600-normal.572fee3b7f.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Overqual website. build_site.py prepends the @font-face rules (self-hosted Red Hat Display and Red Hat Text).
   The visual rules this file follows (colours, type roles, corners, spacing, levels, motion, pinned elements) are
   written once, in products/oq/site/SCHEMA.md "Visual rules"; check_site.py reads this file for the --fs-* type
   tokens, the @keyframes, the scroll-timeline entrances and the position:sticky selectors, and lints it: no literal
   colour, and no literal px in a padding, margin, gap, font-size, border, outline or custom property, outside the
   :root token blocks (44px, a tap target, and borders of 1-5px excepted).
   Breakpoints: four widths, and no media query on the width at any other (check_site.py stray_breakpoint; the list:
   checks/css.py BREAKPOINTS): 380 (small phones under it: max-width:379px), 720 (phones under it), 980 (the inline
   nav from it: min-width:980px) and 1200 (the exam page's two columns and pinned bundle card from it).
   Order: tokens, base, type roles, colour areas, the shared chrome (header, the exam strip and tabs, footer), shared
   components (the level header among them), each page's components and responsive rules (scoped by the body class:
   p-home, p-hub (the exam page: exam facts and the study bundle), p-questions, p-go, p-vendor, p-compare, p-how,
   p-not_found, p-about), then the corner rules of grids and rows, the colour fills and motion.
   Templates carry no inline styles except custom properties that hold a data value (--w, a weight; --stack, the
   legend's stacking width; --d, a tile's delay; --a and --b, a swapping tile's colours). */

/* ---------------------------------------------------------------- tokens */
:root{
/* colours */
--white:#FFFFFF;--ink:#1D2A8F;--night:#171C3A;--tan:#FF7A2F;--pink:#F2559A;--lem:#FFE04A;--sky:#6EC6FF;--tint:#EAF6FF;
/* text colours by role: headings and interface (--c-head), reading text (--c-text), focus ring (--c-ring); an Ink
   area turns them White, White and Lemon */
--c-head:var(--ink);--c-text:var(--night);--c-ring:var(--ink);
/* spacing scale */
--sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-48:48px;--sp-64:64px;--sp-96:96px;
/* page column, gutter, section padding (large and regular), hero top, panel and art panel padding, hero gaps */
--page:1200px;--gutter:var(--sp-32);--sec-l:var(--sp-96);--sec:var(--sp-64);--hero-top:var(--sp-48);
--pad-panel:var(--sp-32);--pad-art:var(--sp-48);--gap-hero:var(--sp-48);
/* a mark's height (a chip or badge, R4); the vertical padding that gives a link in running text its 44px hit area
   (13px above and below an 18px line); the level header's tile (the seal slot, .oq-lv) */
--h-mark:28px;--pad-tap:13px;--S:clamp(104px,11vw,140px);
/* corner radii: marks and rows, the radio button's leaf, buttons/controls/tiles, cards/panels, art panels; the
   signature keeps the top right corner square */
--r-8:8px;--r-10:10px;--r-16:16px;--r-28:28px;--r-40:40px;
--sig-8:var(--r-8) 0 var(--r-8) var(--r-8);--sig-10:var(--r-10) 0 var(--r-10) var(--r-10);
--sig-16:var(--r-16) 0 var(--r-16) var(--r-16);
--sig-28:var(--r-28) 0 var(--r-28) var(--r-28);--sig-40:var(--r-40) 0 var(--r-40) var(--r-40);
/* type roles: size (and line height where it changes on phones) */
--fs-display:56px;--lh-display:1.05;--fs-display-s:48px;--lh-display-s:1.08;--fs-outline:96px;--fs-h2:36px;--fs-h3:24px;
--fs-lead:20px;--fs-body:17px;--fs-label:15px;--fs-caption:15px;--fs-eyebrow:13px;--fs-numeral:40px;
/* the sizes that are no role: the header and footer wordmarks (drawn type) */
--fs-word:19px;--fs-fword:20px;
}
/* the Outline size (also the exam code's in the exam level header): 96px, 72px under 980px, 40px on phones and 36px
   under 380px */
@media (max-width:979px){:root{--fs-outline:72px}}
@media (max-width:719px){:root{
--gutter:var(--sp-16);--sec-l:56px;--sec:40px;--hero-top:var(--sp-24);--pad-panel:var(--sp-24);--pad-art:var(--sp-16);
--gap-hero:var(--sp-32);
--fs-display:36px;--lh-display:1.1;--fs-display-s:30px;--lh-display-s:1.15;--fs-outline:40px;--fs-h2:28px;--fs-h3:21px;
--fs-lead:19px;--fs-label:16px;--fs-caption:16px;--fs-numeral:32px}}
@media (max-width:379px){:root{--fs-outline:36px}}

/* ---------------------------------------------------------------- base */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:var(--sp-24)}
body{margin:0;background:var(--white);color:var(--c-text);font-family:'Red Hat Text',sans-serif;font-size:var(--fs-body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3,h4{color:var(--c-head)}
/* links are Ink (White on Ink) and underlined in text; buttons, tabs and nav drop the underline */
a{color:var(--c-head);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--c-ring);outline-offset:3px}
/* a long word or link never runs out of its box (it breaks only when nothing else fits) */
main{overflow-wrap:break-word}
.nw{white-space:nowrap}
/* touch widths: a link inside running text gets a 44px tall hit area without moving the layout (inline padding) */
@media (max-width:979px){main :is(p,li,dd,td,th,span)>a:not([class]):not([style]){padding-top:var(--pad-tap);padding-bottom:var(--pad-tap)}}
.oq-skip{position:absolute;left:var(--sp-16);top:-80px;z-index:10;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-16);border-radius:var(--sig-16);background:var(--lem);color:var(--ink)}
.oq-skip:focus{top:var(--sp-8)}
/* links that leave the site (build_site.mark_offsite): the new-tab icon, outline only in the text colour, after the
   label's last word; on a button it sits where an on-site button shows its arrow. Hidden in print. */
.oq-xi{display:inline-block;width:0.8em;height:0.8em;margin-left:0.25em;vertical-align:-0.05em}
.oq-btn .oq-xi{width:18px;height:18px;margin-left:var(--sp-8);vertical-align:-3px}
@media print{.oq-xi{display:none}}

/* ---------------------------------------------------------------- type roles (plan 2.1): Red Hat Display (RHD) and
   Red Hat Text (RHT). Each role lists the component classes that use it. */
/* Display: RHD 900, the one h1; sentence h1s at the smaller size (the home page's among them) */
.t-display,.lv-h1,.lv-code-s{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-0.015em;color:var(--c-head)}
.t-display-s,.hub-h1-title,.lv-codename,.oq-lv-home .lv-h1{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-display-s);line-height:var(--lh-display-s);letter-spacing:-0.015em;color:var(--c-head)}
/* Display at the Outline size: the exam code in the exam level header, the one heading set larger than Display */
.lv-code{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-outline);line-height:1;letter-spacing:-0.015em;color:var(--c-head)}
/* Outline: RHD 900 caps (the size also sets the exam code, above); no page sets the class (owner decision 18 of
   2026-10-22: the site loads RHD 900 only) */
.t-outline{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-outline);line-height:1;letter-spacing:0.02em}
/* H2: RHD 900, the section question */
.t-h2,.home-h2,.home-dname,.hub-h2,.qp-more-title,.g-h2{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-0.01em;color:var(--c-head)}
/* H3: RHD 900, cards and their titles, and the section headings of About and How it works (owner decision 16 of
   2026-10-22); 800 until owner decision 18 of 2026-10-22: one Display file */
.t-h3,:is(.p-about,.p-how) .ab-sec h2,.oq-ftag,.oq-exam-code,.lv-page,.lv-name,.home-dnum,.vn-card-title,.vn-stat-n,.hub-h1-name,.hub-h3,.hub-legend-weight,.hub-disagree-title,.xb-card-title,.qp-qtitle,.g-faq-q{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-h3);line-height:1.25;letter-spacing:0;color:var(--c-head)}
/* Lead: RHT 400, at most one per section */
.t-lead,.lv-lede,.oq-lede,.hub-short-p,.hub-sa-text,.hub-lead,.qp-lede,.qp-stem,.qp-ask,.qp-more-text,.g-intro{font-family:'Red Hat Text',sans-serif;font-weight:400;font-size:var(--fs-lead);line-height:1.5;color:var(--c-text)}
/* Body: RHT 400, running text (also the default of every element) */
.t-body,.oq-trust,.oq-glance-val,.oq-citem,.oq-ctable-cell,.hub-val,.hub-oos-text,.home-tile-name,.hub-ledger-value,.hub-log-text,.xb-list,.qp-how,.qp-opt,.qp-product-text,.g-fp-cell,.g-faq-a{font-family:'Red Hat Text',sans-serif;font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--c-text)}
/* Label: RHT 700, buttons, tabs, nav, table headers, terms, badge and chip text, and the small headings and labels that
   were eyebrows until owner decision 17 of 2026-10-22 (sentence case, no tracking) */
.t-label,.oq-kick,.vn-level,.hub-short-title,.hub-sa-title,.hub-label,.hub-ledger-fact,.hub-svc-title,.hub-oos-label,.qp-jump-title,.qp-why-title,.hw-step-title,.oq-skip,.oq-nav,.oq-mmenu>summary,.oq-panel a,.oq-preview,.oq-crumbs>a,.oq-cm>summary,.oq-cm-link,.oq-strip-all,.oq-extabs a,.oq-button,.xb-bar-label,.hub-jump-link,.home-vchip,.hub-fold>summary,.oq-xchip,.oq-xname,.lv-badge,.home-more-text,.home-rule-n,.oq-glance-term,.oq-exam-name,.oq-exam-links,.oq-ccode,.oq-ctable-th,.oq-ctable-code,.oq-ctable-fact,.hub-sa-badge,.hub-log-mark,.hub-fcard-badge,.hub-term,.hub-term-date,.hub-fail,.hub-pass,.hub-legend-tag,.hub-domain-n,.hub-dmeta,.hub-svc-name,.hub-chips-item,.hub-disagree-badge,.qp-tile,.qp-type,.qp-draft,.qp-choose,.qp-letter,.qp-correct,.qp-yours,.qp-answer>summary,.qp-ans,.qp-score-chip,.qp-wn-letters,.g-chapter-n,.g-chapter-title,.g-fp-th,.g-fp-item{font-family:'Red Hat Text',sans-serif;font-weight:700;font-size:var(--fs-label);line-height:1.3;letter-spacing:0;text-transform:none;color:var(--c-head)}
/* Caption: RHT 400, sources, meta lines, dates, legal; links in it are Ink (500 until owner decision 18 of
   2026-10-22: three font files) */
.t-caption,.oq-checkout,.oq-status,.oq-fblurb,.oq-fcol,.oq-legal,.oq-crumbs,.lv-note,.lv-num-label,.home-vchip-n,.home-dcount,.home-soon,.vn-stat-label,.vn-chg-date,.oq-ctable-cap,.oq-exam-meta,.hub-about,.qp-facts,.qp-q-label,.qp-pfacts,.hub-src,.hub-legend-name,.hub-task-n,.hub-link,.hub-svc-text,.hub-note,.hub-ledger-source,.hub-log-date,.hub-foot,.xb-edition,.qp-src,.b-pdf-meta,.g-chapter-meta,.g-chapter-page,.g-look-caption{font-family:'Red Hat Text',sans-serif;font-weight:400;font-size:var(--fs-caption);line-height:1.5;color:var(--c-text)}
/* Eyebrow: RHT 700 caps, 0.12em tracking; labels only, never sentences, and in three places only (owner decision 17
   of 2026-10-22; check_site.py eyebrow, checks/css.py EYEBROWS): the exam level header's eyebrow, the bundle card's
   kicker and the footer's column heads */
.t-eyebrow,.lv-eyebrow,.xb-kicker,.oq-fcol>span{font-family:'Red Hat Text',sans-serif;font-weight:700;font-size:var(--fs-eyebrow);line-height:1.2;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-head)}
/* Numeral: RHD 900 tabular, stats and the price */
.t-numeral,.lv-num,.home-more-n,.hub-price-value,.xb-price,.qp-price-n,.qp-ref-price{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-numeral);line-height:1;font-variant-numeric:tabular-nums;color:var(--c-head)}

/* a link set in a reading role stays Ink (White on Ink) */
a:is(.t-lead,.t-body,.t-caption,.hub-link){color:var(--c-head)}

/* ---------------------------------------------------------------- colour areas
   An Ink area turns text White and the focus ring Lemon; a light surface inside one turns them back. */
.oq-footer,.oq-buybar,.oq-lv-exam .oq-lv-card,.oq-xchip,.hub-short,.hub-oos,.g-contents,.qp-panel,.qp-product-ink,.oq-ctable-th,.oq-bg-ink{--c-head:var(--white);--c-text:var(--white);--c-ring:var(--lem);color:var(--c-text)}
.lv-badge,.b-pdf,.qp-ans,.qp-wn-letters{--c-head:var(--ink);--c-text:var(--night);--c-ring:var(--ink)}

/* ---------------------------------------------------------------- header */
.oq-header{position:relative;background:var(--white)}
.oq-hbar{max-width:var(--page);margin:0 auto;min-height:44px;padding:var(--sp-12) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}
.oq-logo{display:inline-flex;align-items:center;gap:var(--sp-12);flex:none;min-height:44px;color:var(--ink);text-decoration:none}
.oq-logo:hover{color:var(--ink)}
/* the logo wordmarks (header --fs-word, footer --fs-fword) are drawn type, not a type role */
.oq-word{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-word);line-height:1;letter-spacing:0.12em}
.oq-nav{display:flex;align-items:center;gap:var(--sp-4) var(--sp-24)}
.oq-nav a{text-decoration:none;padding:var(--sp-8) var(--sp-4);white-space:nowrap}
.oq-nav a:hover{text-decoration:underline;text-decoration-thickness:2px}
.oq-nav a[aria-current="page"]{padding:var(--sp-8) var(--sp-12);border-radius:var(--r-8);background:var(--lem)}
.oq-nav a.oq-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-16);border-radius:var(--sig-16);background:var(--ink);color:var(--white)}
.oq-nav a.oq-cta:hover{text-decoration:none}
/* phone menu: a <details>, so it opens without JavaScript; its tiles are rows you tap (R3b) */
.oq-mmenu{display:none}
.oq-mmenu>summary{position:absolute;top:var(--sp-12);right:var(--gutter);list-style:none;display:inline-flex;align-items:center;gap:var(--sp-8);min-height:44px;box-sizing:border-box;padding:0 var(--sp-16) 0 var(--sp-12);border:2px solid var(--ink);border-radius:var(--sig-16);background:var(--white);cursor:pointer;user-select:none}
.oq-mmenu>summary::-webkit-details-marker{display:none}
.oq-mmenu>summary::marker{content:''}
.oq-mmenu>summary svg{display:block;flex:none}
.oq-mmenu .oq-when-open{display:none}
.oq-mmenu[open] .oq-when-open{display:inline}
.oq-mmenu[open] .oq-when-closed{display:none}
.oq-panel{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-4) var(--gutter) var(--sp-24)}
.oq-panel a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);min-height:54px;box-sizing:border-box;padding:0 var(--sp-16);border-radius:var(--r-16);background:var(--tint);text-decoration:none}
.oq-panel a[aria-current="page"]{background:var(--lem)}
.oq-panel a.oq-cta{min-height:56px;background:var(--ink);color:var(--white)}
/* the arrow of a menu link is a block at its right end; the new-tab icon of the checkout link (svg.oq-xi, inside the
   label's last word) stays inline */
.oq-panel a>svg{display:block;flex:none}
/* a vendor's pages: up to 6 of its exam codes, two a row */
.oq-mcodes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
@media (max-width:979px){.oq-nav{display:none}.oq-mmenu{display:block}}

/* ---------------------------------------------------------------- preview bar (build_site.py --drafts only) */
.oq-preview{margin:0;padding:var(--sp-8) var(--gutter);background:var(--tan);color:var(--ink);text-align:center}

/* ---------------------------------------------------------------- an exam's tab pages: the Sky Tint strip under the
   header (the breadcrumb, then the link to the vendor page; on phones the menu has that link), and the tabs (one bar,
   R5, right under the level header: the current tab Lemon, the other Sky Tint, 4px apart; on phones each tab's short
   label, the bar 48px tall). Not sticky. Their links get 44px hit areas; the strip's 4px padding frames the 44px
   chips of the breadcrumb menus. */
.oq-strip{background:var(--tint)}
.oq-strip-wrap{max-width:var(--page);margin:0 auto;padding:var(--sp-4) var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:var(--sp-24)}
.oq-crumbs{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-8)}
.oq-crumbs>a,.oq-strip-all{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-8);margin:0 calc(-1 * var(--sp-8))}
.oq-exnav{display:block}
.oq-extabs{list-style:none;margin:0;padding:0;display:flex;gap:var(--sp-4);border-radius:var(--sig-16);overflow:hidden}
.oq-extabs li{flex:1 1 0;min-width:0;display:flex}
.oq-extabs a{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:52px;box-sizing:border-box;padding:0 var(--sp-12);background:var(--tint);text-align:center;text-decoration:none}
.oq-extabs a[aria-current="page"]{background:var(--lem)}
/* the bar clips its tabs, so a tab's focus ring is drawn inside it */
.oq-extabs a:focus-visible{outline-offset:-4px}
.oq-exshort{display:none}
/* breadcrumb menus (macros.breadcrumbs: the vendor crumb, and the exam crumb on an exam's tab pages): the summary is a
   chip, 44px tall (Sky Tint on White, White on the strip) with the crumb's text and a chevron that turns when it opens;
   the panel is a White standalone card (the signature, an equal 2px Sky border, no shadow) of rows you tap (R3b:
   Sky Tint, evenly rounded, 8px apart; the current one Lemon), scrolling inside its max height. It rises in when it
   opens. On phones it spans the trail's width (the strip's minus the gutters). */
.oq-cm{position:relative;display:inline-block;vertical-align:middle}
.oq-cm>summary{list-style:none;display:inline-flex;align-items:center;gap:var(--sp-8);min-height:44px;box-sizing:border-box;padding:var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-12);border-radius:var(--r-16);background:var(--tint);color:var(--ink);cursor:pointer;user-select:none}
.oq-cm>summary::-webkit-details-marker{display:none}
.oq-cm>summary::marker{content:''}
.oq-strip .oq-cm>summary{background:var(--white)}
.oq-cm-chev{display:block;flex:none}
.oq-cm[open] .oq-cm-chev{transform:rotate(180deg)}
.oq-cm-panel{position:absolute;z-index:10;left:0;top:calc(100% + var(--sp-8));width:360px;max-height:min(480px,calc(100vh - 160px));overflow-y:auto;box-sizing:border-box;padding:var(--sp-8);border:2px solid var(--sky);border-radius:var(--sig-28);background:var(--white)}
.oq-cm[open]>.oq-cm-panel{animation:oq-rise 0.25s cubic-bezier(.2,.8,.2,1) both}
.oq-cm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.oq-cm-link{display:flex;align-items:center;gap:var(--sp-12);min-height:44px;box-sizing:border-box;padding:var(--sp-8) var(--sp-12);border-radius:var(--r-16);background:var(--tint);text-decoration:none}
.oq-cm-link:hover{text-decoration:underline;text-decoration-thickness:2px}
.oq-cm-link[aria-current]{background:var(--lem)}
.oq-cm-name{min-width:0}
@media (max-width:719px){
.oq-cm{position:static}
nav:has(>.oq-cm){position:relative;align-self:stretch}
.oq-strip .oq-crumbs{flex:1 1 100%}
.oq-cm-panel{right:0;width:auto}
.oq-strip-all{display:none}
/* the sample questions page: the trail stops at the exam (the tabs and the h1 name the page) */
.p-questions .oq-crumbs>:is([aria-current],.oq-crumb-sep:nth-last-child(2)){display:none}
.oq-exlong{display:none}
.oq-exshort{display:inline}
.oq-extabs a{height:48px;min-height:0;padding:0 var(--sp-8);white-space:nowrap}
}


/* ---------------------------------------------------------------- footer (an Ink area) */
.oq-footer{background:var(--ink)}
.oq-fwrap{max-width:var(--page);margin:0 auto;padding:var(--sp-64) var(--gutter) var(--sp-48);display:flex;flex-direction:column;gap:var(--sp-32)}
.oq-frow{display:flex;flex-wrap:wrap;gap:var(--sp-32);justify-content:space-between}
.oq-fbrand{flex:1 1 280px;display:flex;flex-direction:column;gap:var(--sp-16)}
.oq-fmark{display:inline-flex;align-items:center;gap:var(--sp-12)}
.oq-fword{font-family:'Red Hat Display',sans-serif;font-weight:900;font-size:var(--fs-fword);line-height:1;letter-spacing:0.12em}
.oq-fblurb{max-width:340px}
.oq-fcol{flex:0 1 200px;display:flex;flex-direction:column;gap:var(--sp-8)}
/* a vendor's pages: the "<Vendor> exams" column lists its exams, its links running down as many 140px columns as fit
   (four at most) */
.oq-fexams{flex:2 1 360px;display:block;columns:4 120px;column-gap:var(--sp-24)}
.oq-fexams>span{display:block;column-span:all;margin-bottom:var(--sp-8)}
.oq-fexams>a{display:block;break-inside:avoid;margin-bottom:var(--sp-8)}
/* a vendor with 4 exams or fewer: one column */
.oq-fexams.oq-fexams-few{flex:0 1 200px;columns:auto}
/* site pages: the vendors run down two columns from 980px */
@media (min-width:980px){.oq-fvendors{flex:0 1 300px;display:block;columns:2 120px;column-gap:var(--sp-24)}.oq-fvendors>span{display:block;column-span:all;margin-bottom:var(--sp-8)}.oq-fvendors>a{display:block;break-inside:avoid;margin-bottom:var(--sp-8)}}
@media (max-width:979px){.oq-fbrand{flex:1 1 100%}.oq-fcol{flex:1 1 140px;gap:0}.oq-fcol>span{margin-bottom:var(--sp-4)}.oq-fcol a{display:flex;align-items:center;min-height:44px}.oq-fexams{flex-basis:100%}.oq-fexams>span{margin-bottom:var(--sp-4)}.oq-fexams>a{margin-bottom:0}}

/* ---------------------------------------------------------------- shared: page column and bands */
.oq-wrap{max-width:var(--page);margin:0 auto}
/* a band's content column: the regular (exam facts) and the large (study bundle) rhythm */
.oq-sec{padding:var(--sec) var(--gutter);display:flex;flex-direction:column}
.oq-sec-l{padding:var(--sec-l) var(--gutter);display:flex;flex-direction:column}
/* the gap between a band's blocks */
.oq-gap-24{gap:var(--sp-24)}
.oq-gap-32{gap:var(--sp-32)}
/* the text column of a hero (study bundle, 404) */
.oq-hero-copy{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-24)}
/* a line that holds one chip or button */
.oq-flex{display:flex}
.oq-trust{max-width:620px}
.oq-lede{max-width:620px}
.oq-measure{max-width:860px}

/* ---------------------------------------------------------------- shared: chips and number tiles (R4). An exam's
   code is an Ink chip with White text (.oq-xchip); an exam without a code shows its name in Ink in its place */
.oq-chip{display:inline-flex;align-items:center}
.oq-chiplist{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.oq-num{display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.oq-xchip{flex:none;display:inline-flex;align-items:center;min-height:var(--h-mark);box-sizing:border-box;padding:0 var(--sp-8);border-radius:var(--r-8);background:var(--ink);white-space:nowrap}
.oq-xname{min-width:0}

/* ---------------------------------------------------------------- shared: the level header (macros.level_header) on
   home, vendor and exam pages. A patchwork panel (R1, the signature; equal padding) holds the card and the seal slot,
   one tile square (--S), centred in the space beside the card (under it below 980px). The quilt (14 x 13 tiles,
   build_site.LEVEL_GRID) is drawn inside the slot at -9 tiles on both axes (LEVEL_SEAL) and clipped by the panel, so
   the seal always fills one tile of the grid. The card is White (home), Sky (vendor) or Ink (exam; .oq-lv-exam
   is an Ink area); the quilt leaves out the card's colour. On phones the panel spans the page and has no padding: the card's text starts on the page gutter
   (where the logo is), and the slot is one tile tall under it. */
.oq-lv-sec{padding:var(--sp-24) var(--gutter) 0;display:flex;flex-direction:column;gap:var(--sp-16)}
.oq-lv{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;padding:var(--sp-32);border-radius:var(--sig-40);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-24)}
.oq-lv-card{position:relative;z-index:2;flex:0 1 680px;min-width:0;box-sizing:border-box;padding:var(--sp-48);border-radius:var(--sig-28);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-16)}
.oq-lv-home .oq-lv-card{background:var(--white)}
/* the home card takes the room beside the seal's tile, up to 880px, so its h1 sets in three lines and its vendor
   chips in one row on a desktop */
.p-home .oq-lv-home .oq-lv-card{flex-grow:1;max-width:880px}
.p-home .oq-lv-home .oq-lv-slot{flex-basis:var(--S)}
.p-home .oq-lv-home .lv-lede{max-width:none}
@media (min-width:1200px){.p-home .oq-lv-home .oq-lv-card{flex-basis:880px}}
/* the vendor card is Sky, with Ink headings and Night text (owner decision 14 of 2026-10-22), on a quilt whose Sky
   is Ink (build/quilt.py LEVEL_REMAP) */
.oq-lv-vendor .oq-lv-card{background:var(--sky)}
.oq-lv-exam .oq-lv-card{background:var(--ink)}
.oq-lv-slot{flex:1 1 160px;display:flex;align-items:center;justify-content:center;min-height:var(--S)}
.oq-lv-tile{position:relative;flex:none;width:var(--S);height:var(--S)}
.oq-lv-quilt{position:absolute;left:calc(-9 * var(--S));top:calc(-9 * var(--S));width:calc(14 * var(--S));height:calc(13 * var(--S));display:block}
.oq-lv-seal{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
/* the card's content: the h1 (balanced), the lede, a line of a button and a caption; on exam pages the eyebrow
   (Lemon), the h1 (the code, then the page's name in Lemon) with the Beta badge beside the code, the exam's name, the
   four numbers (each over its label) and the trust line */
.lv-h1{text-wrap:balance}
.lv-lede{max-width:620px}
.lv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12) var(--sp-24)}
.oq-lv-exam .lv-eyebrow,.oq-lv-exam .lv-page{color:var(--lem)}
.lv-titlerow{display:flex;align-items:flex-start;gap:var(--sp-16)}
.lv-xh1{min-width:0;display:flex;flex-direction:column;gap:var(--sp-8)}
/* exam pages sit closer to the strip; the compact panel and card (sample questions, study bundle) keep Question 1
   and the offer high (check_site.py above_fold), the page's name beside the code while it fits */
.oq-xlv-sec{padding-top:var(--sp-16)}
.oq-lv-c{padding:var(--sp-24)}
.oq-lv-c .oq-lv-card{padding:var(--sp-24) var(--sp-32);gap:var(--sp-12)}
.lv-xh1-c{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4) var(--sp-16)}
/* under 380px 8px between the code and the page's name, so "AB-250 Sample questions" stays one line at 360 (H3 at
   900, owner decision 18 of 2026-10-22, is 4px wider than at 800) and Question 1 stays above the buy bar */
@media (max-width:379px){.lv-xh1-c{column-gap:var(--sp-8)}}
.lv-badge{flex:none;min-height:var(--h-mark);margin-top:calc((var(--fs-outline) - var(--h-mark)) / 2);padding:0 var(--sp-12);border-radius:var(--r-8);background:var(--tan)}
.lv-titlerow:has(.lv-code-s) .lv-badge{margin-top:calc((var(--fs-display) * var(--lh-display) - var(--h-mark)) / 2)}
.lv-titlerow:has(.lv-codename) .lv-badge{margin-top:calc((var(--fs-display-s) * var(--lh-display-s) - var(--h-mark)) / 2)}
/* the numbers: each as wide as it needs (a counted number never breaks, a value in words wraps, a label wraps at
   160px), as many a row as fit */
.lv-nums{width:100%;margin:var(--sp-8) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-16) var(--sp-24)}
.lv-numbox{flex:0 1 auto;min-width:0;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--sp-4)}
.lv-num-label{max-width:160px}
.lv-note{max-width:620px}
/* text read by screen readers only (the words after the count on a home page vendor chip) */
.oq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (min-width:720px) and (max-width:979px){.oq-lv-card{flex-basis:100%}}
@media (max-width:719px){
.oq-lv-sec{padding-top:0}
.oq-lv{margin:0 calc(-1 * var(--gutter));padding:0;border-radius:0;gap:0}
.oq-lv-card{flex:1 1 100%;padding:var(--sp-24) var(--gutter);border-radius:0;gap:var(--sp-12)}
.oq-lv-c .oq-lv-card{padding:var(--sp-16) var(--gutter)}
/* the compact header (sample questions) drops its quilt strip and seal, so Question 1 shows above the buy bar (owner
   decision 9 of 2026-10-22; check_site.py above_fold) */
.oq-lv-c .oq-lv-slot{display:none}
.lv-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12) var(--sp-16);margin-top:0}
}

/* ---------------------------------------------------------------- shared: buttons (R1, the signature; .oq-btn marks a
   button for the new-tab icon). .oq-button: the base; -l (54px) and -m (52px) heights; -ink, -lem and -line fills.
   Two kinds of bundle link, never mixed: a link to the study bundle page is -info (White, or Sky Tint with
   .oq-bg-tint on a White surface; Ink text and the arrow; never Ink, never "buy"), and a link to the checkout
   is -ink ("Buy now - $19", the new-tab icon), with .oq-checkout ("Secure checkout, in a new tab.")
   under the main one of the page */
.oq-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-12)}
.oq-button{display:inline-flex;align-items:center;padding:0 var(--sp-24);border-radius:var(--sig-16);text-decoration:none}
.oq-button-l{min-height:54px}
.oq-button-m{min-height:52px}
.oq-button-ink{background:var(--ink);color:var(--white)}
.oq-button-lem{background:var(--lem);color:var(--ink)}
.oq-button-line{box-sizing:border-box;border:2px solid var(--ink);background:var(--white);color:var(--ink)}
.oq-button-info{gap:var(--sp-12);background:var(--white);color:var(--ink)}
/* the checkout line takes its own row under the buttons it follows */
:is(.oq-ctas,.qp-buyrow,.go-buy)>.oq-checkout{flex:1 1 100%}
/* a button that ends with the arrow */
.oq-button-arrow{gap:var(--sp-12);box-sizing:border-box}
.oq-button-nowrap{white-space:nowrap}

/* ---------------------------------------------------------------- shared: icons, tiles, marks, images */
.oq-sym,.oq-icon{display:block;flex:none}
/* a square tile with one block shape (macros.tile): a standalone mark with the signature */
.oq-tile{display:block;overflow:hidden;border-radius:var(--sig-16)}
.oq-tile>svg{display:block}
.oq-tile-48{width:48px;height:48px}
.oq-tile-64{width:64px;height:64px}
/* a status (macros.status_mark: home tiles, vendor page cards; build/data.py card_status): a small dot and the word in
   reading text; the dot Tangerine (beta, retiring), Lemon (updated) or Sky (new, replaces), inside an equal 2px Ink
   border, so a Lemon dot shows on a White tile (owner decision 21 of 2026-10-22) */
.oq-status{flex:none;display:inline-flex;align-items:center;gap:var(--sp-8);white-space:nowrap}
.oq-status-dot{flex:none;box-sizing:border-box;width:14px;height:14px;border:2px solid var(--ink);border-radius:var(--r-8);background:var(--sky)}
.oq-status-beta .oq-status-dot,.oq-status-retiring .oq-status-dot{background:var(--tan)}
.oq-status-updated .oq-status-dot{background:var(--lem)}
/* swatches and bullets: square; an outlined fill (the domain chart's White, the sixth colour of a seven-domain exam,
   in its legend swatch and its card's swatch; in the bar it has no outline) has an equal 2px Ink border inside its
   box */
.oq-swatch{flex:none;width:14px;height:14px}
.oq-outlined{box-sizing:border-box;border:2px solid var(--ink)}
.oq-dot{flex:none;width:8px;height:8px;margin-top:var(--sp-8);background:var(--ink)}
.oq-img{display:block;width:100%;height:auto}
/* art panels: the patchwork <svg> pinned to the panel's top left (its size from its attributes, or the panel's
   with -fill); a seal sits on the grid, in one tile (.oq-lv-tile), never centred over the quilt */
.oq-art{position:absolute;left:0;top:0;display:block}
.oq-art-fill{width:100%;height:100%}

/* ---------------------------------------------------------------- data rows (R3a): stripes, radius 8, no gaps, inside
   one card (.oq-rows-card when the list stands on a band); rows inside a Sky Tint card stripe White (.oq-rows-w); a
   key row (.oq-key) is Lemon */
.oq-rows{display:flex;flex-direction:column}
.oq-rows>*{border-radius:var(--r-8)}
.oq-rows>:nth-child(odd){background:var(--tint)}
.oq-rows-w>:nth-child(odd){background:var(--white)}
.oq-rows>.oq-key{background:var(--lem)}
.oq-rows-card{box-sizing:border-box;padding:var(--sp-8);border-radius:var(--sig-28);background:var(--white)}

/* ---------------------------------------------------------------- Home: the full index of the site (the level
   header, the directory of vendors and exams, what every bundle holds, how every bundle works) */
/* the vendor chips in the level header (owner decision 12): rows you tap, as the exam page's jump row (Sky Tint on the
   White card, Label, 44px tall, evenly rounded, 8px apart), each a vendor's name and its exam count (Caption,
   tabular), to its card in the directory; on phones one line that scrolls sideways, from the gutter to the screen's
   edge, with 8px of room above and below inside the scroller (taken back by an equal negative margin), so a focused
   chip's ring (3px, 3px off it) is not cut off by the scroller's edge */
.home-vchips{align-self:stretch;min-width:0}
.home-vchips-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.home-vchip{display:flex;align-items:center;gap:var(--sp-4);min-height:44px;box-sizing:border-box;padding:0 var(--sp-12);border-radius:var(--r-16);background:var(--tint);text-decoration:none;white-space:nowrap}
.home-vchip:hover{text-decoration:underline;text-decoration-thickness:2px}
.home-vchip-n{font-variant-numeric:tabular-nums}
@media (max-width:719px){
.home-vchips{margin:0 calc(-1 * var(--gutter))}
.home-vchips-list{flex-wrap:nowrap;overflow-x:auto;padding:var(--sp-8) var(--gutter);margin:calc(-1 * var(--sp-8)) 0;scrollbar-width:none}
}
/* Choose your exam: an index card per vendor (Sky Tint, its id #vendor-<slug>), one grid (corner rule R2: only the
   first card keeps the square corner). A vendor's card: a head (its name at the H2 size, its exam count beside it
   with the number at the H3 size, and "All <Vendor> exams", a White button with the arrow, at its right; 44px tall
   with or without the button, so the tiles of cards side by side start level) over its exam tiles (tiles you tap,
   R3b: White, evenly rounded, 8px apart; as many a row as fit at 300px or more): the code chip (or, in its place, the
   name of an exam without a code, Label) over the short name, then a foot with the status (a dot and the word) and
   the arrow; on phones a tile is a row, the chip and the name, then the status under them, at the left and the
   arrow at the right;
   the last tile of a vendor with more than 6 exams is Lemon, "+<n>" over "more <Vendor> exams". A small vendor's card
   (2 exams or fewer) takes a third of the row (half under 980px) */
.home-dhead{display:flex;flex-direction:column;gap:var(--sp-8)}
.home-dir{list-style:none;padding:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16)}
.home-dcard{grid-column:1 / -1;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--sp-24);padding:var(--sp-32);background:var(--tint)}
.home-dcard-s{grid-column:auto;padding:var(--sp-24)}
.home-dcard-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-12) var(--sp-24);min-height:44px}
.home-dtitle{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4) var(--sp-16)}
.home-dnum{font-variant-numeric:tabular-nums}
.home-dall{min-height:44px;padding:0 var(--sp-16)}
.home-tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--sp-8)}
.home-tiles>li{display:flex;min-width:0}
.home-tile{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-16);box-sizing:border-box;padding:var(--sp-16);border-radius:var(--r-16);background:var(--white);text-decoration:none}
.home-tile-top{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-8)}
.home-tile .oq-xname{display:inline-flex;align-items:center;min-height:var(--h-mark)}
.home-tile-foot{display:flex;align-items:center;gap:var(--sp-8);color:var(--ink)}
.home-tile-foot>.oq-icon{margin-left:auto}
.home-more{background:var(--lem)}
.home-more-n{font-variant-numeric:tabular-nums}
/* how every bundle works: a White card on the patchwork (equal padding and margins), its rules side by side, stacked
   under 980px, each with a Tangerine number tile */
.home-how-sec{padding:0 var(--gutter) var(--sec-l)}
/* after the Ink band of what every bundle holds, its section padding above (band_seam) */
.g-contents+section>.home-how-sec{padding-top:var(--sec-l)}
.home-how{position:relative;overflow:hidden;box-sizing:border-box;padding:var(--pad-art);border-radius:var(--sig-40)}
.home-how-card{position:relative;box-sizing:border-box;padding:var(--sp-48);border-radius:var(--sig-28);background:var(--white);display:flex;flex-direction:column;gap:var(--sp-24)}
.home-rules{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-24) var(--sp-32)}
.home-rule{min-width:0;display:flex;align-items:flex-start;gap:var(--sp-16)}
.home-rule-n{flex:none;width:44px;height:44px;border-radius:var(--r-8);background:var(--tan)}
.home-rule-text{min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
/* home: responsive */
@media (max-width:979px){
.home-dir{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-rules{grid-template-columns:minmax(0,1fr);gap:var(--sp-16)}
}
@media (max-width:719px){
.p-home main{text-wrap:pretty}
.home-dir{grid-template-columns:minmax(0,1fr)}
.home-dcard,.home-dcard-s{padding:var(--sp-24) var(--sp-16)}
.home-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:var(--sp-4) var(--sp-12);min-height:56px;padding:var(--sp-12) var(--sp-16)}
.home-tile-top{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-12)}
.home-tile-foot{display:contents}
.home-tile-foot>.oq-icon{grid-column:2;grid-row:1 / 3}
.home-more,.home-more>.home-tile-foot{display:flex;flex-direction:row;align-items:center}
.home-how-card{padding:var(--sp-24)}
}

/* ---------------------------------------------------------------- Vendor page (/<vendor slug>/): the breadcrumb and
   the level header, the exam cards by level (each level's label a heading over its cards, two a row from 980px), the
   comparison table (hidden on phones), the vendor's newest changes as cards */
.vn-crumbs{align-self:flex-start}
.vn-group{min-width:0;display:flex;flex-direction:column;gap:var(--sp-12)}
.vn-cards{gap:var(--sp-16)}
/* a vendor page's exam card, a stat card (macros.vendor_card): the title (the code chip and the name with the arrow
   after its last word, the link to the exam facts page, 44px tall) and the status, the blurb, the four numbers (each
   at the H3 size over its caption), then the buttons: the two White ones with the arrow (sample questions, the study
   bundle card) side by side, and the Ink buy button, the card's one price, the full width under them; the numbers
   and buttons sit at the card's foot, so they line up across a row of two. On phones
   the name goes under the chip and the status to the right of the chip, and the numbers share one row */
.vn-card{min-width:0;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);background:var(--tint)}
.vn-card-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-12)}
.vn-card-title{min-width:0}
.vn-card-link{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-12);min-height:44px;text-decoration:none}
.vn-card-link:hover .vn-card-name{text-decoration:underline;text-decoration-thickness:2px}
.vn-card-name{min-width:0}
.vn-card-name .oq-icon{display:inline-block;margin-left:var(--sp-8);vertical-align:-2px}
.vn-card-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-16)}
.vn-stats{display:flex;flex-wrap:wrap;gap:var(--sp-12) var(--sp-32)}
.vn-stat{min-width:0;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--sp-4)}
.vn-stat-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.vn-card-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
.vn-btn{justify-content:space-between;min-height:48px;padding:0 var(--sp-16)}
/* the buy button takes the row under the two; without a sample questions page the bundle button takes its row */
.vn-buy,.vn-btn:first-child:nth-last-child(2){grid-column:1 / -1}
.vn-buy{justify-content:center}
/* the vendor's newest changes: a card each, the exam's chip (to its change log) and the date over the text */
.vn-chgs{list-style:none;padding:0;gap:var(--sp-16)}
.vn-chg{min-width:0;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-24);background:var(--tint)}
.vn-chg-head{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-12)}
.vn-chg-code{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.vn-chg-date{font-variant-numeric:tabular-nums}
@media (max-width:719px){
.vn-card,.vn-card-foot{gap:var(--sp-12)}
.vn-card{padding:var(--sp-24) var(--sp-16)}
/* the name under the chip, the status at the right of the chip's line */
.vn-card-head{position:relative}
.vn-card-coded .vn-card-name{flex-basis:100%}
.vn-card-coded>.oq-status{position:absolute;top:0;right:0;min-height:var(--h-mark)}
/* the numbers in one row, a caption wrapping under its number when the row is full */
.vn-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,max-content);gap:var(--sp-12) var(--sp-16)}
.vn-btn{gap:var(--sp-8);padding:0 var(--sp-12)}
/* the comparison table and its intro are left out on phones (owner decision 11 of 2026-10-22: hidden by CSS, so the
   table stays in the page's text), where the cards carry the four numbers; the section with them, when it holds no
   link to a comparison page */
.vn-table,.vn-table-intro,.vn-compare-table{display:none}
}
/* exam card (the comparison pages; a cell of a card grid, not a link itself): the code links the exam facts page,
   the status (a dot and its word, as on the vendor cards) sits at the top right, the two text links at the foot */
.oq-exgrid{gap:var(--sp-16)}
.oq-exam{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-24);background:var(--white)}
.oq-exam-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-12)}
/* the code link gets a 44px tall hit area without moving the layout */
.oq-exam-code a{display:inline-block;padding:var(--sp-12) 0;margin:calc(-1 * var(--sp-12)) 0}
.oq-exam-meta{font-variant-numeric:tabular-nums}
.oq-exam-links{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-24);margin-top:auto;padding-top:var(--sp-4)}
/* the exams still to come: a plain list of stripes */
.vn-coming{list-style:none;padding:0}
.oq-citem{display:flex;align-items:baseline;gap:var(--sp-12);padding:var(--sp-8) var(--sp-12)}
.oq-ccode{flex:none;font-variant-numeric:tabular-nums}
.oq-cname{min-width:0}
/* the vendor's comparison pages */
.vn-pairs{display:flex;flex-direction:column;gap:var(--sp-8)}
.vn-pairs-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-24)}

/* ---------------------------------------------------------------- comparison tables (vendor and comparison pages): a
   standalone table card (a 2px Sky border on all sides, the signature), its caption, an Ink header row and striped
   rows, never rules. A vendor page's rows stack under 1200px, each cell under its column's label */
.oq-ctable{overflow-x:auto;box-sizing:border-box;border:2px solid var(--sky);border-radius:var(--sig-28);background:var(--white)}
.oq-ctable-t{width:100%;border-collapse:separate;border-spacing:0}
.oq-ctable-cap{caption-side:top;text-align:left;padding:var(--sp-16)}
.oq-ctable-th{text-align:left;vertical-align:bottom;padding:var(--sp-12) var(--sp-16);background:var(--ink);color:var(--c-head)}
.oq-ctable-row>*{text-align:left;vertical-align:top;padding:var(--sp-12) var(--sp-16)}
.oq-ctable-row:nth-child(odd){background:var(--tint)}
.oq-ctable-cell{font-variant-numeric:tabular-nums}
/* a vendor page's table from 1200px: the code and every cell but the name stay on one line (the name of an exam
   without a code in the code's place wraps), and the name column is at least 12rem wide, so a long name wraps to two
   or three lines, not six (narrower, the rows stack and every cell wraps, so a long value never runs out of its row;
   under 720px the table is hidden, above) */
@media (min-width:1200px){.vn-table .oq-ctable-code:not(.vn-xname),.vn-table .oq-ctable-cell:not([data-key="name"]){white-space:nowrap}.vn-table [data-key="name"]{min-width:12rem}}
.cmp-table .oq-ctable-fact{width:180px}
@media (max-width:1199px){
.vn-table .oq-ctable-t,.vn-table tbody,.vn-table tr{display:block}
.vn-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vn-table caption{display:block}
.vn-table .oq-ctable-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--sp-12) var(--sp-24);padding:var(--sp-16);border-radius:var(--r-8)}
.vn-table .oq-ctable-row>*{display:block;padding:0;white-space:normal}
.vn-table :is(.oq-ctable-code,[data-key="name"]){grid-column:1 / -1}
.vn-table .oq-ctable-cell::before{content:attr(data-label);display:block;margin-bottom:var(--sp-4);font-family:'Red Hat Text',sans-serif;font-weight:700;font-size:var(--fs-label);line-height:1.3;color:var(--c-head)}
}
/* a comparison page's table on phones: the two codes once in the Ink header, then each fact over its two values */
@media (max-width:719px){
.cmp-table .oq-ctable-t,.cmp-table thead,.cmp-table tbody{display:block}
.cmp-table caption{display:block}
.cmp-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) var(--sp-16)}
.cmp-table thead tr{padding:0 var(--sp-16);background:var(--ink)}
.cmp-table thead th{display:block;padding:var(--sp-12) 0}
.cmp-table thead th:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cmp-table .oq-ctable-row{padding:var(--sp-12) var(--sp-16);border-radius:var(--r-8)}
.cmp-table .oq-ctable-row>*{display:block;padding:0}
.cmp-table .oq-ctable-fact{grid-column:1 / -1;width:auto}
}
/* a comparison page: the verdict's text at most 720px wide in its Ink panel (about 75 characters a line, D15 of the
   assessment); both exams' cards on the White band */
.cmp-verdict .hub-short-text{max-width:720px}
.cmp-cards .oq-exam{background:var(--tint)}

/* ---------------------------------------------------------------- Exam facts (OQHub): the level header and tabs,
   the Short answer, then the sections. The h1 of two lines (.hub-h1) and the Ink .hub-short panel serve the comparison
   pages (their h1 on the vendor's level header, the verdict under it) */
.hub-h1{display:flex;flex-direction:column;gap:var(--sp-8)}
.hub-short{background:var(--ink);border-radius:var(--sig-28);padding:var(--pad-panel);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-24) var(--sp-48)}
.hub-short-text{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-16)}
.hub-short-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12)}
/* the Short answer on exam facts: its title and badge, the answer (Lead), its sources, the lede and the page's date */
.hub-sa-wrap{padding:var(--sp-32) var(--gutter) var(--sec);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12)}
.hub-sa-wrap>*{max-width:860px}
/* the Short answer's status chip in the colour of its status (as the status dots: beta and retiring Tangerine,
   updated Lemon, new and replaces Sky) and the change log's mark on a change newer than the edition (Tangerine: the
   edition predates it); both chips are marks, evenly rounded (owner decision 21 of 2026-10-22) */
.hub-sa-badge,.hub-log-mark{min-height:var(--h-mark);padding:0 var(--sp-8);border-radius:var(--r-8);background:var(--tan)}
.hub-sa-badge-updated{background:var(--lem)}
.hub-sa-badge-new,.hub-sa-badge-replaces{background:var(--sky)}
.hub-about time{font-variant-numeric:tabular-nums}
/* section head: the question, the answer, its sources */
.hub-head{display:flex;flex-direction:column;gap:var(--sp-16);max-width:780px}
.hub-src{font-variant-numeric:tabular-nums}
.hub-src-end{margin-top:auto}
.hub-cards{gap:var(--sp-16)}
.hub-tiles{gap:var(--sp-12)}
.hub-list{list-style:none;padding:0}
.hub-tiles>:only-child,.hub-fcards>:only-child{grid-column:1 / -1}
/* fact rows (format cards, delivery, dates): a label column and a value column, as stripes */
.hub-row{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:baseline;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16)}
.hub-spec>.hub-row{grid-template-columns:120px minmax(0,1fr)}
.hub-val-num{font-variant-numeric:tabular-nums}
.hub-term-date{font-variant-numeric:tabular-nums}
/* format */
.hub-fcard{min-width:0;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);background:var(--tint)}
.hub-fcard-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
.hub-fcard-badge{min-height:var(--h-mark);padding:0 var(--sp-12);border-radius:var(--r-8);background:var(--tan)}
.hub-types{display:flex;flex-direction:column;gap:var(--sp-16)}
.hub-qtypes{gap:var(--sp-16)}
.hub-qtype{display:flex;align-items:flex-start;gap:var(--sp-16);padding:var(--sp-24);background:var(--tint)}
.hub-qtype-tile{flex:none}
.hub-qtype-text{display:flex;flex-direction:column;gap:var(--sp-4)}
/* fee and scoring */
.hub-fee{min-width:0;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--pad-panel);background:var(--tint)}
.hub-price{min-width:0;display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-16);background:var(--white)}
/* the score band (R5): one shape that clips its fail and pass parts, each as wide as its part of the scale (--w) */
.hub-score{display:flex;gap:var(--sp-4);height:64px;border-radius:var(--sig-16);overflow:hidden;font-variant-numeric:tabular-nums}
.hub-fail{flex:var(--w) 1 0;min-width:0;display:flex;align-items:center;padding:0 var(--sp-16);background:var(--white);white-space:nowrap}
.hub-pass{flex:var(--w) 1 0;min-width:max-content;box-sizing:border-box;display:flex;align-items:center;padding:0 var(--sp-16);background:var(--tan);white-space:nowrap}
/* domains: the weight bar (R5: one shape, segments as wide as their weight, --w) and its legend, whose columns are
   exactly the segments' widths (same weights, same 4px gap) while the legend is at least --stack wide; narrower, each
   domain gets its own row (build_site.legend_stack_at). Then a card per domain. Under 720px the legend is hidden: the
   domain cards right under it repeat each domain's swatch, weight and name (assessment plan B12 review). The domain
   bar has no outline and no fill of its own, as the score band: its segments run to its rounded edge, which clips
   them, and its 4px gaps show the Sky Tint panel (the owner's decision of 2026-10-26 removed B34's Ink edge and Ink
   gaps); a segment carries no border of its own (the corner would cut it off): the White sixth of a seven-domain exam
   reads between Lemon and Night, and an exam with exactly six domains takes Night for its sixth (hub.html series). */
.hub-weights{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--pad-panel);border-radius:var(--sig-28);background:var(--tint)}
.hub-bar{display:flex;gap:var(--sp-4);height:clamp(44px,5vw,64px);border-radius:var(--sig-16);overflow:hidden}
.hub-bar-seg{flex:var(--w) 1 0;min-width:0}
.hub-legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-16) var(--sp-4);font-variant-numeric:tabular-nums}
.hub-legend-item{flex:var(--w) 1 calc((var(--stack,900px) - 100%) * 999);min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.hub-legend-key{display:flex;align-items:center;gap:var(--sp-8);padding:0 var(--sp-4)}
.hub-legend-name{padding:0 var(--sp-4)}
.hub-domain{min-width:0;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);background:var(--tint)}
.hub-domain-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-12)}
.hub-domain-n{width:44px;height:44px;border-radius:var(--r-8);background:var(--ink);color:var(--white)}
.hub-dmeta{display:inline-flex;align-items:center;gap:var(--sp-8)}
.hub-dmeta-top{min-height:var(--h-mark);padding:0 var(--sp-12) 0 var(--sp-8);border-radius:var(--r-8);background:var(--lem)}
.hub-dmeta-swatch{width:14px;height:14px}
.hub-task{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:baseline;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16)}
.hub-task-n{font-variant-numeric:tabular-nums}
.hub-link-end{margin-top:auto}
/* services: a Sky Tint card per group; a group of services is a list of White tiles (evenly rounded, 8px apart: each
   service's name over its note), a group of names a list of White chips */
.hub-svcgroup{min-width:0;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);background:var(--tint)}
.hub-svc{display:flex;flex-direction:column;gap:var(--sp-8)}
.hub-svc-item{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-16);background:var(--white)}
.hub-chips-item{padding:var(--sp-8) var(--sp-12);border-radius:var(--r-8);background:var(--white)}
.hub-oos{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-8) var(--sp-24);padding:var(--sp-24);border-radius:var(--sig-28);background:var(--ink)}
.hub-oos-label{flex:0 0 auto;min-width:120px}
.hub-oos-text{flex:1 1 400px;min-width:0}
/* where the vendor's documents disagree: a Sky Tint panel with one status badge */
.hub-disagree{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--pad-panel);border-radius:var(--sig-28);background:var(--tint)}
.hub-disagree-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12)}
.hub-disagree-badge{min-height:var(--h-mark);padding:0 var(--sp-12);border-radius:var(--r-8);background:var(--tan)}
.hub-side{min-width:0;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16) var(--sp-24);background:var(--white)}
/* delivery and dates */
.hub-split{display:flex;flex-wrap:wrap;gap:var(--sp-32) var(--sp-48)}
.hub-split-col{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-16)}
/* fact ledger (the fact sheet): a standalone card (a 2px Sky border on all sides, the signature) holding a list of
   facts as stripes (.oq-rows, R3a: every other row Sky Tint on the White card, radius 8, no gaps; the owner's
   decision of 2026-10-26), no header row: each fact's label (Label role, Ink) beside its value, which ends with a
   small source link (Caption, its links kept whole); on phones the label over the value, so nothing scrolls
   sideways */
.hub-ledger{box-sizing:border-box;padding:var(--sp-8);border:2px solid var(--sky);border-radius:var(--sig-28);background:var(--white)}
.hub-ledger-row{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:baseline;gap:var(--sp-4) var(--sp-32);padding:var(--sp-12) var(--sp-16)}
.hub-ledger-value{font-variant-numeric:tabular-nums}
.hub-ledger-source a{white-space:nowrap}
/* the fact sheet's fold (owner decision 8): a <details> closed in the markup, its summary a line button (White, a
   2px Ink border on all sides, the signature, as the sample questions' Show answer) that reads ledger.show while
   closed and ledger.hide while open */
.hub-fold>summary{list-style:none;display:flex;align-items:center;width:max-content;max-width:100%;min-height:52px;box-sizing:border-box;padding:0 var(--sp-24);border:2px solid var(--ink);border-radius:var(--sig-16);background:var(--white);color:var(--ink);cursor:pointer;user-select:none}
.hub-fold>summary::-webkit-details-marker{display:none}
.hub-fold>summary::marker{content:''}
.hub-fold-hide,.hub-fold[open] .hub-fold-show{display:none}
.hub-fold[open] .hub-fold-hide{display:inline}
.hub-fold[open]>summary{margin-bottom:var(--sp-24)}
/* change log: stripes in one card */
.hub-log{list-style:none}
.hub-log-item{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8) var(--sp-24);padding:var(--sp-16)}
.hub-log-date{flex:0 0 auto;min-width:128px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hub-log-text{flex:1 1 360px;min-width:0}
/* exam facts: responsive */
@media (max-width:979px){
:is(.p-hub,.p-vendor,.p-compare) main :is(h1,h2,h3){text-wrap:balance}
:is(.p-hub,.p-vendor,.p-compare) main :is(p,li,dd,td){text-wrap:pretty}
.p-hub .hub-legend li>p:last-child{text-wrap:balance}
/* hit areas of 44px around small links, without moving the layout */
.p-hub .hub-link{display:inline-block;padding:var(--sp-12) 0;margin:calc(-1 * var(--sp-12)) 0}
.p-hub .hub-src a,.p-hub .hub-foot a{padding:var(--pad-tap) 0}
.p-hub .hub-src a{white-space:nowrap}
}
@media (min-width:720px) and (max-width:979px){
.p-hub .hub-log li{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:var(--sp-8) var(--sp-24)}
.p-hub .hub-log li>a{grid-column:2;justify-self:start}
}
@media (max-width:719px){
.p-hub .hub-legend{display:none}
.hub-ledger-row{grid-template-columns:minmax(0,1fr)}
.hub-ledger-source{display:block}
.p-hub .hub-spec>div{grid-template-columns:88px minmax(0,1fr);padding:var(--sp-12)}
.p-hub .hub-dl>div{grid-template-columns:120px minmax(0,1fr)}
.p-hub .hub-dates>div{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
}
/* a chip may shrink to its row, so a long identifier (CORTEX_SEARCH_DAILY_USAGE_HISTORY) breaks inside it */
.p-hub .hub-chips>li{min-width:0}

/* ---------------------------------------------------------------- Sample questions (OQQuestions)
   Answers work without JavaScript: <details class="qp-answer">, whose summary is the Show answer / Hide answer button
   (a line button: the questions repeat, so it is never Ink-filled). While an answer is open, its question's correct
   options turn Lemon (the key) and show their Correct tag (Ink), and a wrong option the visitor picked shows its
   "Your answer" chip (Tangerine, a status) on its own Sky Tint. */
.qp-facts{font-variant-numeric:tabular-nums}
/* the questions follow the tabs: the lede, one line on how they work and the page's facts (the jump
   tiles beside them while they fit), then a card per question (White, a 2px Sky border), its options separate rows
   you tap (R3b) */
.qp-qwrap{padding:var(--sp-24) var(--gutter) var(--sec);display:flex;flex-direction:column;gap:var(--sp-24)}
.qp-intro{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-16) var(--sp-32)}
.qp-intro-text{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.qp-intro-text>*,.qp-intro>.qp-facts{max-width:640px}
.qp-intro>.qp-facts{flex:1 1 100%}
/* from 980px the facts line sits under the jump tiles, beside the text */
@media (min-width:980px){
.qp-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"text jump" "text facts";align-items:end;gap:var(--sp-8) var(--sp-32)}
.qp-intro-text{grid-area:text;align-self:start}
.qp-jump{grid-area:jump}
.qp-intro>.qp-facts{grid-area:facts}
}
.qp-jump{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.qp-jump-list{list-style:none;padding:0;grid-template-columns:repeat(10,44px);gap:var(--sp-8)}
.qp-tile{width:44px;height:44px}
.qp-jump-tile{border-radius:inherit;background:var(--tint);text-decoration:none}
.qp-qlist{gap:var(--sp-24)}
.qp-q{display:flex;flex-direction:column;gap:var(--sp-24);box-sizing:border-box;padding:var(--sp-24);border:2px solid var(--sky);background:var(--white)}
.qp-q-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12) var(--sp-16)}
.qp-type{min-height:var(--h-mark);padding:0 var(--sp-12);border-radius:var(--r-8);background:var(--sky)}
.qp-draft{min-height:var(--h-mark);padding:0 var(--sp-12);border-radius:var(--r-8);background:var(--tan)}
.qp-stem{max-width:880px}
.qp-choose{display:inline-flex;padding:0 var(--sp-8);border-radius:var(--r-8);background:var(--lem)}
.qp-opts{display:flex;flex-direction:column;gap:var(--sp-8)}
.qp-opt{display:flex;align-items:flex-start;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-16);cursor:pointer}
.qp-check{width:20px;height:20px;margin:var(--sp-4) 0 0;flex:none;accent-color:var(--ink)}
.qp-letter{flex:none;width:32px;height:32px;border-radius:var(--r-8);background:var(--white)}
.qp-opt-body{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-8) var(--sp-16)}
.qp-opt-text{flex:1 1 220px;min-width:0;padding-top:var(--sp-4)}
.qp-correct{align-items:center;flex:none;min-height:var(--h-mark);padding:0 var(--sp-8);border-radius:var(--r-8);background:var(--ink);color:var(--white)}
/* a wrong option the visitor picked: the Tangerine status chip "Your answer" (owner decision 9 of 2026-10-22); the
   option itself keeps its Sky Tint (Tangerine is status badges only) */
.qp-yours{align-items:center;flex:none;min-height:var(--h-mark);padding:0 var(--sp-8);border-radius:var(--r-8);background:var(--tan)}
.qp-panel{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--pad-panel);border-radius:var(--sig-28);background:var(--ink)}
.qp-ans,.qp-score-chip{gap:var(--sp-8);min-height:44px;padding:0 var(--sp-16) 0 var(--sp-8);border-radius:var(--r-8);background:var(--lem)}
.qp-why,.qp-whynot,.qp-whynot-list{display:flex;flex-direction:column;gap:var(--sp-8)}
.qp-whynot-list{list-style:none;padding:0}
.qp-whynot-item{display:flex;align-items:flex-start;gap:var(--sp-12)}
.qp-wn-letters{flex:none;min-width:32px;height:32px;box-sizing:border-box;padding:0 var(--sp-8);border-radius:var(--r-8);background:var(--sky)}
.qp-wn-many{white-space:nowrap}
.qp-wn-text{flex:1 1 auto;min-width:0;padding-top:var(--sp-4)}
/* more: the bundle and the optional free reference */
.qp-more-sec{padding:var(--sec-l) var(--gutter);display:flex;flex-direction:column;gap:var(--sp-32)}
.qp-more{display:flex;flex-direction:column;gap:var(--sp-16)}
.qp-more-text{max-width:640px}
.qp-products{gap:var(--sp-16)}
.qp-products>:only-child{grid-column:1 / -1}
.qp-product{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--pad-panel);background:var(--white)}
.qp-product-ink{background:var(--ink)}
.qp-price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12)}
.qp-pfacts{font-variant-numeric:tabular-nums}
.qp-product-text{flex-grow:1}
.qp-buyrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12) var(--sp-24)}
/* the question card wherever it shows (macros.question_card: the sample questions page, the ad landing page's
   Question 1, the fixtures): its states */
.qp-opt{background:var(--tint)}
.qp-opt input{-webkit-appearance:none;appearance:none;box-sizing:border-box;border:2px solid var(--ink);background:var(--white) no-repeat center / 14px 14px;cursor:pointer}
/* the radio button keeps its leaf (the signature at half its size), round but for one corner; the checkbox is a
   square mark (R4), so one answer reads round and several square, as on any form */
.qp-opt input[type="radio"]{border-radius:var(--sig-10)}
.qp-opt input[type="checkbox"]{border-radius:0}
.qp-opt input:checked{background-color:var(--ink)}
.qp-opt input[type="radio"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 4H12V9.5A2.5 2.5 0 0 1 9.5 12H6.5A2.5 2.5 0 0 1 4 9.5V6.5A2.5 2.5 0 0 1 6.5 4Z' fill='%23FFFFFF'/%3E%3C/svg%3E")}
.qp-opt input[type="checkbox"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:is(.qp-correct,.qp-yours){display:none}
.qp-q:has(.qp-answer[open]) .qp-opt[data-correct="true"]{background:var(--lem)}
.qp-q:has(.qp-answer[open]) .qp-correct,
.qp-q:has(.qp-answer[open]) .qp-opt[data-correct="false"]:has(input:checked) .qp-yours{display:inline-flex}
.qp-answer>summary{list-style:none;display:flex;align-items:center;width:max-content;max-width:100%;min-height:52px;box-sizing:border-box;padding:0 var(--sp-24);border:2px solid var(--ink);border-radius:var(--sig-16);background:var(--white);color:var(--ink);cursor:pointer;user-select:none}
.qp-answer>summary::-webkit-details-marker{display:none}
.qp-answer>summary::marker{content:''}
.qp-answer .qp-hide,.qp-answer[open] .qp-show{display:none}
.qp-answer[open] .qp-hide{display:inline}
.qp-answer .qp-panel{margin-top:var(--sp-24);overflow-wrap:anywhere}
/* the score (labels.score, after the questions; no JavaScript): a question counts when every correct option is picked
   and no wrong one (multiple response included), the number is the CSS counter qp-right, and the line shows once any
   option is picked */
.qp-qwrap{counter-reset:qp-right}
.qp-q:not(:has(.qp-opt[data-correct="true"] input:not(:checked))):not(:has(.qp-opt[data-correct="false"] input:checked)){counter-increment:qp-right}
.qp-score-n::before{content:counter(qp-right)}
.qp-score{display:none}
.qp-qwrap:has(.qp-q input:checked) .qp-score{display:flex}
/* product cards: price sits under the title so "One-page reference" never wraps */
@media (max-width:979px){.p-questions .qp-price{flex-direction:column;align-items:flex-start;gap:var(--sp-8)}}
/* touch widths: no orphan last words, and inline links get a 44px tall hit area without moving the layout */
@media (max-width:979px){.p-questions main p,.p-questions main li,.qp-opt span{text-wrap:pretty}.qp-src a{padding:var(--pad-tap) 0}}
@media (max-width:719px){
.p-questions .qp-qwrap{padding-top:var(--sp-16);gap:var(--sp-16)}
.p-questions .qp-qlist{gap:var(--sp-16)}
.qp-ans{white-space:nowrap}
/* on phones no jump tiles, and the page's facts line goes under the questions (its box lets go of its children, which
   the questions' column then orders), so Question 1 shows above the buy bar (check_site.py above_fold) */
.p-questions .qp-jump{display:none}
.p-questions .qp-intro{display:contents}
.p-questions .qp-intro-text{flex:none}
.p-questions .qp-intro>.qp-facts{order:1}
/* less nested padding and space (the card, the option row), so an option's text keeps its measure and Question 1
   starts higher */
.qp-q{padding:var(--sp-16);gap:var(--sp-16)}
.qp-opt{padding:var(--sp-12)}
}

/* ---------------------------------------------------------------- The exam page (templates/pages/hub.html; the XCombined
   mockups, in the order of owner decision 8): the level header and tabs, then the two-column region (.xb-region): the
   Short answer and the facts that decide the exam (format, fee and scoring, the domains) in the left column, the
   bundle card at the right. From 1200px the card (380px) sits beside the facts and stays in view while they scroll
   (sticky inside the region only: its grid area spans both rows; at every screen height, scrolling inside itself on a
   screen shorter than it, below); under 1200px one column: the Short answer, the jump row, the card (static), the
   facts. Then the selling sections full width, then the more facts in one column (.xb-more: services, delivery and
   dates, the fact sheet folded closed) and the change log. The facts sections stand on White, so their cards are Sky
   Tint (the format and question type cards, the fee, domain weights, domain and services cards, the delivery rows'
   card) with White stripes and tiles inside; the ledger (the fact sheet) keeps its Sky border, its stripes Sky Tint. */
.xb-region{padding:var(--sp-32) var(--gutter) var(--sec-l);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-48)}
.xb-short{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12)}
.xb-short>*{max-width:860px}
.xb-facts{min-width:0;display:flex;flex-direction:column;gap:var(--sp-48)}
.xb-sec{display:flex;flex-direction:column;gap:var(--sp-24)}
.xb-more{padding:0 var(--gutter) var(--sec-l);display:flex;flex-direction:column;gap:var(--sp-48)}
/* the jump row (pages.hub.jump, owner decision 8): under the Short answer below 1200px, links into the page as rows you
   tap (Sky Tint on the White region, Label, 44px tall, evenly rounded, 8px apart; the gap above it is half the
   region's); on phones one line that scrolls sideways, from the gutter to the screen's edge, with 8px of room above
   and below inside the scroller (an equal negative margin takes it back), so a focused link's ring is not cut off */
.hub-jump{margin-top:calc(-1 * var(--sp-24))}
.hub-jump-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.hub-jump-link{display:flex;align-items:center;min-height:44px;box-sizing:border-box;padding:0 var(--sp-16);border-radius:var(--r-16);background:var(--tint);text-decoration:none;white-space:nowrap}
.hub-jump-link:hover{text-decoration:underline;text-decoration-thickness:2px}
@media (max-width:719px){
.hub-jump{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
.hub-jump-list{flex-wrap:nowrap;overflow-x:auto;padding:var(--sp-8) var(--gutter);margin:calc(-1 * var(--sp-8)) 0;scrollbar-width:none}
}
@media (min-width:1200px){
.hub-jump{display:none}
.xb-region{grid-template-columns:minmax(0,1fr) 380px;grid-template-areas:"short card" "facts card";column-gap:var(--sp-48);align-items:start}
.xb-short{grid-area:short}
.xb-facts{grid-area:facts}
/* the card is pinned at every screen height (the owner's instruction of 2026-10-23): never taller than the screen less
   its 24px top and the same 24px below, so on a shorter screen than the card (866-897px at its 380px width) its lower
   part (the covers, the bullets, the edition line) scrolls inside it while the buy button, near its top, stays in
   view; it leaves the screen with the end of the region, so it never covers the footer */
.xb-card{grid-area:card;position:sticky;top:var(--sp-24);max-height:calc(100vh - 2 * var(--sp-24));overflow-y:auto}
/* the fee cards share the facts column, so their price tiles stack (the first keeps the square corner) */
.xb-facts .hub-fee .hub-tiles{grid-template-columns:minmax(0,1fr)}
.xb-facts .hub-fee .hub-tiles>:nth-child(n){border-top-right-radius:var(--r-16)}
.xb-facts .hub-fee .hub-tiles>:first-child{border-top-right-radius:0}
}
/* the bundle card (#bundle): Sky Tint, the signature; buying first: the kicker, the title beside the price (the
   title wraps, the price stays beside its first line), the buy button over the checkout line, the delivery note,
   the sample questions link (a White button with the arrow) and the link to the Look inside pages (a link in Caption);
   then the three covers in White frames (R2: only the last keeps the square corner), the bullets and the edition
   line */
.xb-card{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);border-radius:var(--sig-28);background:var(--tint)}
.xb-card-head{display:flex;flex-wrap:nowrap;align-items:baseline;justify-content:space-between;gap:var(--sp-4) var(--sp-16)}
.xb-card-title{min-width:0}
.xb-price{flex:none}
.xb-price{font-variant-numeric:tabular-nums}
.xb-covers{display:flex;gap:var(--sp-8)}
.xb-cover{flex:1 1 0;min-width:0;box-sizing:border-box;border:3px solid var(--white);border-radius:var(--r-8);background:var(--white);overflow:hidden}
.xb-cover:last-child{border-top-right-radius:0}
.xb-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.xb-item{display:flex;gap:var(--sp-12)}
.xb-ctas{gap:var(--sp-8)}
.xb-ctas>.oq-checkout{text-align:center}
.xb-buy{flex:1 1 100%;justify-content:center}
.xb-try{justify-content:space-between;min-height:48px;padding:0 var(--sp-16)}
.xb-see{align-self:flex-start}
/* inside the study bundle: the chapter list (a White card of stripes: the number and the title in Ink, the chapter's
   first page and its domain and weight, or its kind, in Night), then the Look inside pages in one row under it, as wide
   as the page column allows (renders of the built guide, White on the Sky Tint band; each frame is a link that opens
   the page 1360px wide, macros.look_page; .g-thumbs also lays out the ad landing page's sample pages) */
.xb-inside{display:flex;flex-direction:column;gap:var(--sp-48)}
.xb-chapters{min-width:0;max-width:860px;display:flex;flex-direction:column;gap:var(--sp-12)}
.xb-pages{min-width:0;display:flex;flex-direction:column;gap:var(--sp-12)}
.g-chapters{list-style:none;margin-top:var(--sp-4)}
.g-chapter{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;align-items:baseline;gap:var(--sp-4) var(--sp-16);padding:var(--sp-12) var(--sp-16)}
.g-chapter-n,.g-chapter-page{font-variant-numeric:tabular-nums}
.g-chapter-page,.g-chapter-meta{white-space:nowrap}
.g-chapter-meta{font-variant-numeric:tabular-nums}
.g-thumbs{gap:var(--sp-32) var(--sp-24);margin-top:var(--sp-4)}
.g-look{display:flex;flex-direction:column;align-items:center;gap:var(--sp-16)}
.g-look-caption{text-align:center}
.g-thumb{display:block;width:100%;max-width:340px;border-radius:inherit;background:var(--white);overflow:hidden}
.p-hub .g-thumb{max-width:none}
/* section head (free vs paid, the FAQ) */
.g-head{display:flex;flex-direction:column;gap:var(--sp-12);max-width:760px}
/* free vs paid: a standalone table card, its rows striped */
.g-fp{overflow-x:auto;box-sizing:border-box;border:2px solid var(--sky);border-radius:var(--sig-28);background:var(--white)}
.g-fp-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0}
.g-fp-th{background:var(--ink);color:var(--white);text-align:left;padding:var(--sp-12) var(--sp-16);vertical-align:top}
.g-fp-item{text-align:left;padding:var(--sp-12) var(--sp-16);vertical-align:top}
.g-fp-cell{padding:var(--sp-12) var(--sp-16);vertical-align:top}
/* FAQ (rows you tap, R3b): White on the exam page's Sky Tint band, Sky Tint on the ad landing page's White one (a band
   of its own, with the section padding of every band: check_site.py band_seam) */
.g-faq{display:flex;flex-direction:column;gap:var(--sp-8)}
.g-faq-item{border-radius:var(--r-16);background:var(--tint)}
.xb-faq{max-width:860px}
.xb-faq .g-faq-item{background:var(--white)}
.g-faq-q{padding:var(--sp-16) var(--sp-24);cursor:pointer}
.g-faq-a{padding:0 var(--sp-24) var(--sp-24)}
/* the closing panel: a White card on the patchwork (equal padding and margins), as the home page's How card; its
   buttons: buy (Ink) and the sample questions page (Sky Tint, the arrow) */
.xb-end-sec{padding:0 var(--gutter) var(--sec-l)}
.xb-end{position:relative;overflow:hidden;box-sizing:border-box;padding:var(--pad-art);border-radius:var(--sig-40)}
.xb-end-card{position:relative;box-sizing:border-box;padding:var(--sp-48);border-radius:var(--sig-28);background:var(--white);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-16)}
.xb-end-card .oq-ctas{margin-top:var(--sp-8)}
/* the buy bar (partials/buybar.html: the exam on the left, the buy button, the bar's one price, on the right)
   pinned to the bottom of the screen while the exam page or the sample questions page scrolls, wherever the exam
   page's bundle card is not pinned: on phones and tablets (under 1200px, owner decision 7 of 2026-10-22) and, a
   prototype for the owner to approve, on the sample questions page at every width. An Ink bar with a 2px White border
   on all sides (so it shows on Ink and Sky Tint bands too) and a Lemon button, the main button on Ink; its content
   lines up with the page column (inside its 2px border: the column starts at the gutter, or where the centred --page
   leaves off, whichever is further in); the last child of <main>, so it scrolls away with the page's end and never
   covers the footer. Hidden in print. A page with the bar keeps a link the keyboard reaches clear of it
   (scroll-padding-bottom: the bar is 68px tall). Under 380px (a 320, 360 or 375px phone) "AIB-C01 study bundle" would
   run under the button or take three lines, so the bar shows the exam code alone (.xb-bar-more, the label's " study
   bundle", hidden, so the page's text holds the label once at every width; the label at its narrowest, min-content:
   "Study bundle" in two lines for an exam without a code) and the button, its sides and the gap 8px, fills the rest
   of the bar; where even the code does not fit beside it (a 320px phone), it wraps to a second row, the full width of
   the bar (97px tall then, so the scroll padding is 104px there), and the code is never cut or run under it (owner
   decision 7: the exam on the left). */
.oq-buybar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);box-sizing:border-box;padding:var(--sp-8) max(var(--gutter),calc((100% - var(--page)) / 2));border:2px solid var(--white);background:var(--ink)}
html:has(.oq-buybar){scroll-padding-bottom:calc(var(--sp-64) + var(--sp-8))}
.xb-bar-label{min-width:0}
.xb-bar-buy{flex:none;box-sizing:border-box;min-height:48px;padding:0 var(--sp-16)}
@media (max-width:379px){html:has(.oq-buybar){scroll-padding-bottom:calc(var(--sp-96) + var(--sp-8))}.oq-buybar{flex-wrap:wrap;gap:var(--sp-8)}.xb-bar-more{display:none}.xb-bar-label{display:block;width:min-content}.xb-bar-buy{flex:1 1 auto;justify-content:center;padding:0 var(--sp-12)}}
/* from 1200px the exam page's bundle card is pinned instead, at every screen height, its buy button always in
   view (the owner's instruction of 2026-10-23) */
@media (min-width:1200px){.p-hub .oq-buybar{display:none}}
@media print{.oq-buybar{display:none}}
/* the exam page's bundle sections: responsive */
@media (max-width:979px){
:is(.p-hub,.p-go) .g-faq summary{padding-left:calc(var(--sp-24) + 1.06em);text-indent:-1.06em}
:is(.p-hub,.p-go) .g-faq p a{padding:var(--pad-tap) 0}
.p-hub .g-fp tbody th a{padding:var(--sp-12) 0}
}
@media (max-width:719px){
/* the free vs paid table: a card per row, each cell under its row's title with the column's label */
.p-hub .g-fp table{display:block;min-width:0}
.p-hub .g-fp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.p-hub .g-fp tbody,.p-hub .g-fp tr{display:block}
.p-hub .g-fp tr{padding:var(--sp-16)}
.p-hub .g-fp tbody th,.p-hub .g-fp td{display:block;padding:0}
.p-hub .g-fp tbody th{margin-bottom:var(--sp-8)}
.p-hub .g-fp td{margin-top:var(--sp-4)}
.p-hub .g-fp td::before{content:attr(data-label) ": ";font-weight:700}
.p-hub .xb-end .oq-ctas>a{flex:1 1 100%;justify-content:center}
/* a chapter's domain goes under its title */
.p-hub .g-chapter{grid-template-columns:24px minmax(0,1fr) auto}
.p-hub .g-chapter-meta{grid-column:2}
}

/* ---------------------------------------------------------------- the ad landing page's hero and PDF cards (shared
   shapes of the old study bundle page): the offer beside the three covers on the patchwork, then the three PDFs on an
   Ink band */
.g-hero{padding:var(--hero-top) var(--gutter) var(--sec-l);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-48)}
/* the three covers, exam 2 at the back and the guide in front; the offsets keep every cover's square top right corner
   in view */
.g-art{flex:0 1 auto;min-width:0;max-width:100%;box-sizing:border-box;margin:0 auto;position:relative;padding:var(--pad-art);border-radius:var(--sig-40);overflow:hidden;display:flex;align-items:center;justify-content:center}
.b-stack{position:relative;flex:none;width:350px;max-width:100%;aspect-ratio:380 / 452}
.b-cover{position:absolute;width:78.9%;box-sizing:border-box;border:5px solid var(--white);border-radius:var(--sig-16);background:var(--white);overflow:hidden}
.b-cover-exam2{left:21%;top:0%}
.b-cover-exam1{left:10.5%;top:7.1%}
.b-cover-guide{left:0%;top:14.2%}
/* what is in the bundle (an Ink band; also home's what every bundle holds): three PDFs, each a White card */
.g-contents{background:var(--ink)}
.b-pdfs{list-style:none;padding:0;gap:var(--sp-24)}
.b-pdf{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-24);background:var(--white)}
.b-thumb{display:flex;justify-content:center;padding:var(--sp-16);border-radius:var(--sig-16);background:var(--tint)}
.b-thumb-cover{width:150px;max-width:100%;border-radius:var(--sig-8);background:var(--white);overflow:hidden}
.b-pdf-meta{font-variant-numeric:tabular-nums}
/* on phones a PDF card is one row: the cover (96px) beside its name and its line (the ad landing page; home) */
@media (max-width:719px){
.b-pdfs.oq-grid{gap:var(--sp-16)}
.b-pdfs>li{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:var(--sp-16);padding:var(--sp-16)}
.b-pdfs .b-thumb{grid-row:1 / span 2;padding:var(--sp-8)}
.b-pdfs>li>:not(.b-thumb){grid-column:2}
}

/* ---------------------------------------------------------------- Ad landing page (/go/<exam>/; templates/pages/go.html)
   The study bundle's hero art, PDF cards, sample pages and FAQ under a logo that is not a link: no nav, menu, tabs,
   breadcrumb or pill. The ad page links the same stylesheet as every page; its 3 font files are the site's only ones.
   The price and the button share a row. */
.p-go .oq-hero-copy{gap:var(--sp-16)}
.go-buy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12) var(--sp-24)}
.go-price{display:flex;align-items:baseline;gap:var(--sp-8)}
.go-pdfs{list-style:none;padding:0;gap:var(--sp-24)}
/* one Sky Tint band holds two parts, the sample question to try and the sample pages, a section's padding apart; the
   three sample pages fill the band's three columns at every width (.oq-g333, as the exam page's Look inside) */
.go-band{gap:var(--sec)}
.go-part{display:flex;flex-direction:column}
.p-go .g-thumb{max-width:none}
.go-faq{flex:0 0 auto;max-width:760px}
/* the closing band: the exam page's closing panel (.xb-end) right under the FAQ, its card holding the button alone,
   centred (full width on phones, where the card's padding is 24px: the page keeps to its 5 screens) */
.p-go .go-faq-sec{padding-bottom:var(--sp-32)}
.go-end{align-items:center}
.go-flinks{flex:1 1 auto}
@media (max-width:979px){
.p-go main h1,.p-go main h2,.p-go main h3,.p-go main summary{text-wrap:balance}
.p-go main p,.p-go main li{text-wrap:pretty}
}
@media (max-width:719px){
.p-go .g-hero{gap:var(--sp-24);padding-bottom:var(--sp-48)}
/* the cover stack is left out on phones: the PDFs band right under the first screen shows the same three covers, and
   the page keeps to its 5 phone screens with the sample question (check_site.py go_rules) */
.p-go .g-art{display:none}
.p-go .go-end{padding:var(--sp-24)}
.p-go .go-end>a{align-self:stretch;justify-content:center}
}

/* ---------------------------------------------------------------- 404 */
.nf-hero{padding:var(--hero-top) var(--gutter) var(--sec-l);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-48)}
.nf-ctas{align-self:stretch}
/* the art: the seal's tile centred in a patchwork panel, the quilt drawn anchored on it (.oq-lv-quilt) */
.nf-art{flex:1 1 300px;max-width:420px;min-width:0;position:relative;isolation:isolate;height:clamp(240px,30vw,380px);border-radius:var(--sig-40);overflow:hidden;display:flex;align-items:center;justify-content:center}
@media (max-width:719px){.p-not_found .nf-ctas>a{flex:1 1 100%;justify-content:center}}

/* ---------------------------------------------------------------- About and How it works (owner decision 16 of
   2026-10-22): the site's level header (the White card), then one reading column, 640px, its section headings in the
   H3 role (type roles above), ending with the Find your exam button; How it works adds the bundle's rows (stripes),
   one exam's bundle on a Sky Tint panel (.hw-show: its covers stacked beside one Look inside page, two columns at
   every width) and the update steps (a number, the title in the Label role, the text) */
:is(.p-about,.p-how) .ab-body{max-width:var(--page);margin:0 auto;padding:var(--sec) var(--gutter) var(--sec-l);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-48)}
:is(.p-about,.p-how) .ab-sec{width:100%;max-width:640px;display:flex;flex-direction:column;gap:var(--sp-12)}
.hw-show{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:var(--sp-24);margin-top:var(--sp-12);box-sizing:border-box;padding:var(--pad-panel);border-radius:var(--sig-28);background:var(--tint)}
.hw-covers{display:flex;flex-direction:column;align-items:center;gap:var(--sp-16)}
.hw-covers .b-stack{width:100%}
.hw-covers figcaption{text-align:center}
.hw-show .g-look{border-radius:var(--r-16)}
.oq-glance-row{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-16);padding:var(--sp-12) var(--sp-16)}
.oq-glance-term{flex:0 0 132px}
.oq-glance-val{flex:1 1 220px;min-width:0}
.hw-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-16);margin-top:var(--sp-8)}
.hw-step{display:flex;align-items:flex-start;gap:var(--sp-16)}
.hw-step-text{display:flex;flex-direction:column;gap:var(--sp-4)}
@media (max-width:719px){.hw-show{gap:var(--sp-16)}}
@media (max-width:719px){.p-how .oq-glance-term{flex-basis:100%}}

/* ---------------------------------------------------------------- grids of cards and tiles (R2)
   A grid (.oq-grid) has a fixed number of columns at each width, named by its counts at 980px and up, 720-979px and
   under 720px (.oq-g321: three, two, one), so CSS knows which child sits at the group's outer top right: only that one
   keeps the signature; the others are evenly rounded, 28 for cards and 16 for tiles (.oq-tiles). A child that only
   holds the shape passes its corners on (border-radius:inherit). */
.oq-grid{display:grid}
.oq-grid>*{border-radius:var(--r-28)}
.oq-tiles>*{border-radius:var(--r-16)}
.oq-g111{grid-template-columns:minmax(0,1fr)}
.oq-g111>:first-child{border-top-right-radius:0}
.oq-g333{grid-template-columns:repeat(3,minmax(0,1fr))}
.oq-g333>:is(:nth-child(3),:last-child:nth-child(-n+3)){border-top-right-radius:0}
@media (min-width:980px){
.oq-g442,.oq-g421{grid-template-columns:repeat(4,minmax(0,1fr))}
.oq-g321,.oq-g311{grid-template-columns:repeat(3,minmax(0,1fr))}
.oq-g221,.oq-g211{grid-template-columns:repeat(2,minmax(0,1fr))}
.oq-g442>:is(:nth-child(4),:last-child:nth-child(-n+4)),.oq-g421>:is(:nth-child(4),:last-child:nth-child(-n+4)){border-top-right-radius:0}
.oq-g321>:is(:nth-child(3),:last-child:nth-child(-n+3)),.oq-g311>:is(:nth-child(3),:last-child:nth-child(-n+3)){border-top-right-radius:0}
.oq-g221>:is(:nth-child(2),:last-child:nth-child(-n+2)),.oq-g211>:is(:nth-child(2),:last-child:nth-child(-n+2)){border-top-right-radius:0}
}
@media (min-width:720px) and (max-width:979px){
.oq-g442{grid-template-columns:repeat(4,minmax(0,1fr))}
.oq-g321,.oq-g221,.oq-g421{grid-template-columns:repeat(2,minmax(0,1fr))}
.oq-g311,.oq-g211{grid-template-columns:minmax(0,1fr)}
.oq-g442>:is(:nth-child(4),:last-child:nth-child(-n+4)){border-top-right-radius:0}
.oq-g321>:is(:nth-child(2),:last-child:nth-child(-n+2)),.oq-g221>:is(:nth-child(2),:last-child:nth-child(-n+2)),.oq-g421>:is(:nth-child(2),:last-child:nth-child(-n+2)){border-top-right-radius:0}
.oq-g311>:first-child,.oq-g211>:first-child{border-top-right-radius:0}
}
@media (max-width:719px){
.oq-g442{grid-template-columns:repeat(2,minmax(0,1fr))}
.oq-g321,.oq-g311,.oq-g221,.oq-g211,.oq-g421{grid-template-columns:minmax(0,1fr)}
.oq-g442>:is(:nth-child(2),:last-child:nth-child(-n+2)){border-top-right-radius:0}
.oq-g321>:first-child,.oq-g311>:first-child,.oq-g221>:first-child,.oq-g211>:first-child,.oq-g421>:first-child{border-top-right-radius:0}
}
/* the jump tiles: ten a row (they show from 720px) */
.qp-jump-list>:is(:nth-child(10),:last-child:nth-child(-n+10)){border-top-right-radius:0}
/* the home directory: the first vendor's card spans the top row */
.home-dir>:first-child{border-top-right-radius:0}

/* ---------------------------------------------------------------- colour fills (after every component, so a fill set
   by the data wins) */
.oq-bg-white{background:var(--white)}
.oq-bg-tint{background:var(--tint)}
.oq-bg-sky{background:var(--sky)}
.oq-bg-lem{background:var(--lem)}
.oq-bg-tan{background:var(--tan)}
.oq-bg-pink{background:var(--pink)}
.oq-bg-ink{background:var(--ink)}
.oq-bg-night{background:var(--night)}

/* ---------------------------------------------------------------- motion (off under reduced motion)
   Every motion is drawn from the patchwork (turn, swap, flip, breathe) or is a short entrance or hover. The keyframes
   below are the site's motion set (check_site.py reads them): each animates only transform, opacity, clip-path, fill,
   scale, rotate, translate or --n, so nothing changes layout; infinite loops take 6s or more, transitions animate
   transform only, entrances animate translate, scale and opacity on scroll timelines, hovers transform, so the two
   never fight. Under prefers-reduced-motion: reduce (the last block) nothing moves and every element shows its final
   state. */
/* patchwork tiles (build_site.moving_quilt: at most 18 per patchwork, inside aria-hidden art): a turning tile turns
   in quarter turns with holds (clipped to its square), a swapping tile swaps its colour (--a, --b), a flipping tile
   flips, a breathing tile shrinks and grows; each starts after its ripple delay (--d, longer the farther from the
   seal) */
.oq-tw{transform-box:fill-box;transform-origin:center}
.oq-spin{animation:oq-spin 12s ease-in-out var(--d,0s) infinite}
@keyframes oq-spin{0%,20%{transform:rotate(0deg)}25%,45%{transform:rotate(90deg)}50%,70%{transform:rotate(180deg)}75%,95%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
.oq-swap{animation:oq-swap 9s ease-in-out var(--d,0s) infinite}
@keyframes oq-swap{0%,38%{fill:var(--a)}50%,88%{fill:var(--b)}100%{fill:var(--a)}}
.oq-flip{animation:oq-flip 10s ease-in-out var(--d,0s) infinite}
@keyframes oq-flip{0%,40%{transform:scaleX(1)}50%,90%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.oq-breathe{animation:oq-breathe 6s ease-in-out var(--d,0s) infinite}
@keyframes oq-breathe{0%,100%{transform:scale(1)}50%{transform:scale(0.74)}}
/* the seal: its ring text turns; it stamps in on load and wobbles on hover */
.oq-ring{transform-box:view-box;transform-origin:50px 50px;animation:oq-ring 40s linear infinite}
@keyframes oq-ring{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.oq-seal{transform-origin:center;animation:oq-stamp 0.7s 0.35s cubic-bezier(.3,1.6,.5,1) both}
.oq-seal:hover{animation:oq-stamp 0.7s 0.35s cubic-bezier(.3,1.6,.5,1) both,oq-wobble 0.7s ease-in-out}
@keyframes oq-stamp{from{scale:1.9;rotate:-35deg;opacity:0}50%{opacity:1}to{scale:1;rotate:0deg;opacity:1}}
@keyframes oq-wobble{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-12deg)}50%{transform:rotate(9deg)}75%{transform:rotate(-4deg)}}
/* the logo: its Lemon core looks around (in the symbol's 100-unit space); the mark turns once on hover */
.oq-eye{animation:oq-eye 9s ease-in-out infinite}
@keyframes oq-eye{0%,18%{translate:0 0}24%,42%{translate:8px -5px}48%,66%{translate:-8px -3px}72%,90%{translate:3px 8px}100%{translate:0 0}}
.oq-logo:hover .oq-mark{animation:oq-turn 0.8s cubic-bezier(.3,1.6,.5,1)}
@keyframes oq-turn{from{rotate:0deg}to{rotate:360deg}}
/* entrances: the level header's card rises in on load (and a breadcrumb menu's panel as it opens, .oq-cm); cards rise
   into view as they scroll in (.oq-view), the How number tiles pop (.oq-pop) and the domain bar wipes in from the left
   (.oq-wipe), on scroll timelines (a browser without them shows the final state) */
@keyframes oq-rise{from{opacity:0;translate:0 32px;scale:0.95}to{opacity:1;translate:0 0;scale:1}}
.oq-lv-card{animation:oq-rise 0.8s 0.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes oq-pop{from{rotate:-90deg;scale:0.3}70%{rotate:10deg;scale:1.1}to{rotate:0deg;scale:1}}
@keyframes oq-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@supports (animation-timeline:view()){
.oq-view{animation:oq-rise linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
.oq-pop{animation:oq-pop linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
.oq-wipe{animation:oq-wipe linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
}
/* the exam header's numbers: a skeleton, then the number (the owner's decisions of 2026-10-26; decision 4 revised the
   same day: no count). Each number is plain text in .oq-skel, which runs one animation, oq-skel (0.5s, linear), on an
   integer custom property: --n from -100 to 0. While --n is below 0 the number is clipped away and a Sky Tint bar the
   width of the number, over the digits' height (a mark: radius 8; a band per line for a value that wraps), stands in
   its place and wipes in from the left (--wipe, 0 to 1); when --n reaches 0 the bar is clipped away and the number
   shows (--sk: 1 while waiting, else 0, at once even where --n interpolates between whole numbers, as WebKit's does).
   The bar has no animation of its own: it follows --n. The number is in the
   flow from the first paint, so nothing moves the layout; under reduced motion no bar shows and the number is there
   at once */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.oq-skel{--n:0;position:relative;display:inline-block;animation:oq-skel 0.5s linear}
.oq-skel-v{display:inline-block}
@keyframes oq-skel{from{--n:-100}}
@media (prefers-reduced-motion:no-preference){
.oq-skel{--sk:clamp(0, -100 * var(--n), 1);--wipe:clamp(0, 1 + var(--n) / 100, 1)}
.oq-skel::before{content:'';position:absolute;left:0;right:0;top:0.16em;bottom:0.12em;border-radius:var(--r-8);background:repeating-linear-gradient(var(--tint) 0 0.72em,transparent 0.72em 1em);clip-path:inset(0 calc(100% - 100% * var(--wipe) * var(--sk)) 0 0)}
.oq-skel-v{clip-path:inset(calc(50% * var(--sk)))}
}
/* hovers: buttons, exam tiles and cards lift on a spring; an exam tile's or card's code chip tilts and the arrow of a
   home tile, of a directory or vendor card button or of a vendor card's title slides right; a breadcrumb menu's
   chevron turns as it opens */
@media (prefers-reduced-motion:no-preference){
.oq-lift,.oq-button,.oq-xchip{transition:transform 0.3s cubic-bezier(.3,1.6,.5,1)}
:is(.oq-lift,.oq-button):hover{transform:translateY(-4px)}
:is(.home-tile,.vn-card):hover .oq-xchip{transform:rotate(-7deg) scale(1.1)}
:is(.home-tile,.home-dall,.vn-btn,.vn-card-link) .oq-icon{transition:transform 0.3s cubic-bezier(.3,1.6,.5,1)}
:is(.home-tile,.home-dall,.vn-btn,.vn-card-link):hover .oq-icon{transform:translateX(4px)}
.oq-cm-chev{transition:transform 0.25s cubic-bezier(.3,1.6,.5,1)}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}