/* ============================================================
   sitepage.css — the site pages' C+ rules (release C's C15, moved out of page.css in C.1)
   Loads straight after page.css, on the .com site pages only: terms, privacy, the 404, about, contact,
   tuition, thankyou, the insights and the three hub-like pages (_scripts/site-pages-cplus.test.mjs lists
   them). Every notes page loads page.css, and none of these rules can match there, so they live here
   (the lead's ruling of 20 Oct 11:45Z, release C's speed row). The .app's pricing, terms, privacy,
   refunds and 404 get them from practice/site-pages.css, generated from page.css and this file.
============================================================ */

/* ==== The site pages in C+ (release C, C15; the lead's ruling of 20 Oct 00:21Z) ====
   Terms, privacy and the 404 page on both domains, and the .app's pricing and refunds, in C+'s look: no band behind the
   hero, the crumb and labels in sentence case, ink buttons, the surface card, no red outside a mark. Words and markup
   unchanged but one class on <main>. Every rule starts at main.c-sitepage, which only those pages carry
   (_scripts/site-pages-cplus.test.mjs lists them), because the notes pages, the hubs and both generators share
   .breadcrumb, .section-title and .article-body-inner with them and must not move. The .app copy is generated from
   here (c-sitepage is in site-app-pages-css.mjs's CLASSES). The headline follows the .com hubs (drawing 21 v2: the
   serif, upright, in the ink) on the .com, and the app's own screens (.c-h1) on the .app, which sets html.c-app before
   first paint. */
main.c-sitepage .page-hero { background: transparent; border-bottom: 0; padding: var(--c-s3) 0 var(--c-s2); }
main.c-sitepage .page-hero-inner { gap: var(--c-s2); }
main.c-sitepage .page-hero + section { padding-top: var(--c-s5); }
/* The legal pages' body section carries an inline padding (56-96 px each side); !important is the only way past an
   inline style without editing the legal pages' markup, which J16's word-for-word test holds. */
main.c-sitepage .page-hero + section[style] { padding: var(--c-s4) 0 var(--c-s6) !important; }
main.c-sitepage .breadcrumb { display: block; font-family: var(--c-font); font-size: var(--c-t2); line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage .breadcrumb a { display: inline-block; min-height: var(--c-tap); min-width: var(--c-tap); padding: 11px 0; color: inherit;
  text-decoration: underline; text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }   /* drawing 21's .c-crumb a */
main.c-sitepage .breadcrumb a:hover { color: inherit; text-decoration-color: currentColor; }
main.c-sitepage .breadcrumb span[aria-hidden] { padding: 0 var(--c-s1); }
main.c-sitepage .page-title, main.c-sitepage .pull { margin: 0; font-family: var(--c-serif); font-weight: 400; font-size: var(--c-t7); line-height: 1.05; letter-spacing: -0.01em; color: var(--c-ink); }
main.c-sitepage .page-title em.accent, main.c-sitepage .pull em { font-style: normal; color: inherit; }
html.c-app main.c-sitepage .page-title, html.c-app main.c-sitepage .pull { font-family: var(--c-font); font-weight: 600; font-size: var(--c-t5); line-height: 1.25; letter-spacing: 0; }
main.c-sitepage .page-lede { font-family: var(--c-font); font-size: var(--c-t3); line-height: 1.5; font-weight: 400; color: var(--c-ink-2); max-width: var(--c-measure); }
main.c-sitepage .section-sub { font-size: var(--c-t2); line-height: 1.5; color: var(--c-ink-2); margin-top: var(--c-s3); }
main.c-sitepage .section-sub a { text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; }
main.c-sitepage .section-eyebrow { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); margin-bottom: var(--c-s2); }
main.c-sitepage .eyebrow-rule { display: none; }
/* Buttons: C+'s ink button (.c-btn) and its outlined one (.c-btn--line), on live's .btn classes. */
main.c-sitepage .btn { --btn-h: var(--c-btn-h); height: auto; min-height: var(--c-btn-h); padding: 0 var(--c-s4); gap: var(--c-s2); border-radius: var(--c-r1);
  font-family: var(--c-font); font-size: var(--c-t3); font-weight: 600; line-height: 1.2; transition: none; }
main.c-sitepage .btn:hover, main.c-sitepage .btn:hover .btn-arrow { transform: none; }
main.c-sitepage .btn-primary, main.c-sitepage .price-card .btn-primary, main.c-sitepage .price-card-feature .btn-primary { background: var(--c-ink); color: var(--c-on-ink); border-color: transparent; }
main.c-sitepage .btn-ghost, main.c-sitepage .btn-ghost-light { background: transparent; color: var(--c-ink); border: var(--c-border); }
@media (hover: hover) {
  main.c-sitepage .btn-primary:hover, main.c-sitepage .price-card .btn-primary:hover, main.c-sitepage .price-card-feature .btn-primary:hover { background: color-mix(in oklch, var(--c-ink) 86%, var(--c-bg)); color: var(--c-on-ink); }
  main.c-sitepage .btn-ghost:hover, main.c-sitepage .btn-ghost-light:hover { background: color-mix(in oklch, var(--c-ink) 6%, transparent); border: var(--c-border); }
}
main.c-sitepage .btn-arrow { font-size: inherit; }
/* Pricing: two equal surface cards; Plus has the control edge in place of the hairline (no ink fill, no pills). */
main.c-sitepage .pricing { padding: var(--c-s5) 0 var(--c-s4); }
main.c-sitepage .pricing-grid { gap: var(--c-s4); }
main.c-sitepage .price-card, main.c-sitepage .price-card-feature { background: var(--c-surface); color: var(--c-ink); border: var(--c-line); border-radius: var(--c-r2); padding: var(--c-s4); gap: var(--c-s3); }
main.c-sitepage .price-card-feature { border: var(--c-border); }
main.c-sitepage .price-card-head, main.c-sitepage .price-card-feature .price-card-head { gap: var(--c-s1); border-bottom: var(--c-line); padding-bottom: var(--c-s3); }
main.c-sitepage .price-tag { display: none; }
main.c-sitepage .price-tier { font-family: var(--c-font); font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; }
main.c-sitepage .price-amount { gap: var(--c-s1); }
main.c-sitepage .price-num { font-family: var(--c-font); font-size: var(--c-t5); line-height: 1.25; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
main.c-sitepage .price-unit, main.c-sitepage .price-card-feature .price-unit, main.c-sitepage .price-card-feature .price-from { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; color: var(--c-ink-2); }
main.c-sitepage .price-aud, main.c-sitepage .price-card-feature .price-aud { font-size: var(--c-t2); line-height: 1.5; color: var(--c-ink-2); }
main.c-sitepage .price-list { gap: var(--c-s2); }
main.c-sitepage .price-list li, main.c-sitepage .price-card-feature .price-list li { font-size: var(--c-t2); line-height: 1.5; color: var(--c-ink-2); padding-left: var(--c-s4); }
main.c-sitepage .price-list li strong, main.c-sitepage .price-card-feature .price-list li strong { color: var(--c-ink); font-weight: 600; }
main.c-sitepage .price-list li::before, main.c-sitepage .price-card-feature .price-list li::before { width: 10px; background: var(--c-ink-3); }
@media (min-width: 900px) { main.c-sitepage .price-card, main.c-sitepage .price-card-feature { box-shadow: var(--c-shadow-1); } }
/* The trial and the questions. */
main.c-sitepage .bio, main.c-sitepage .pricing + .bio { padding: var(--c-s5) 0; }
main.c-sitepage .section-head-left { margin-bottom: var(--c-s3); }
main.c-sitepage .section-title { font-family: var(--c-font); font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .bio-copy { gap: var(--c-s3); }
main.c-sitepage .bio-prose { gap: var(--c-s3); max-width: var(--c-measure); }
main.c-sitepage .bio-prose p { font-size: var(--c-t3); line-height: 1.5; color: var(--c-ink); }
main.c-sitepage .faq { padding: var(--c-s5) 0 var(--c-s6); }
main.c-sitepage .faq-list { max-width: var(--c-measure); border-top: var(--c-line); }
main.c-sitepage .faq-item { border-bottom: var(--c-line); }
main.c-sitepage .faq-item summary { justify-content: flex-start; gap: var(--c-s2); min-height: var(--c-tap); padding: var(--c-s3) 0; font-family: var(--c-font); font-size: var(--c-t3); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .faq-item summary:hover { color: var(--c-ink); }
main.c-sitepage .faq-item summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: var(--c-s1); border-right: 1.5px solid var(--c-glyph-2); border-bottom: 1.5px solid var(--c-glyph-2); transform: translateY(-2px) rotate(45deg); }
main.c-sitepage .faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
main.c-sitepage .faq-indicator { display: none; }
main.c-sitepage .faq-body { padding: 0 0 var(--c-s3); max-width: var(--c-measure); }
main.c-sitepage .faq-body p { font-size: var(--c-t3); line-height: 1.5; color: var(--c-ink); }
main.c-sitepage .faq-body p + p { margin-top: var(--c-s2); }
main.c-sitepage .faq-body a, main.c-sitepage .i3-pricing-links a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
main.c-sitepage .faq-body a:hover, main.c-sitepage .i3-pricing-links a:hover, main.c-sitepage .i3-pricing-links a:focus-visible { color: var(--c-ink); text-decoration-color: currentColor; }
main.c-sitepage .i3-pricing-links { margin-top: var(--c-s4); font-size: var(--c-t2); line-height: 2.2; color: var(--c-ink-2); }
/* The legal body. */
main.c-sitepage .article-body-inner { max-width: var(--c-measure); }
main.c-sitepage .article-body-inner > * { margin: 0 0 var(--c-s3); }
main.c-sitepage .article-body-inner > p, main.c-sitepage .article-body-inner > ul, main.c-sitepage .article-body-inner > ol { font-size: var(--c-t3); line-height: 1.6; color: var(--c-ink); }
main.c-sitepage .article-body-inner > h2 { font-family: var(--c-font); font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; margin-top: var(--c-s6); margin-bottom: var(--c-s2); }
main.c-sitepage .article-body-inner > h2:first-child { margin-top: 0; }
main.c-sitepage .article-body-inner > h3 { font-family: var(--c-font); font-size: var(--c-t3); line-height: 1.35; font-weight: 600; letter-spacing: 0; margin-top: var(--c-s5); margin-bottom: var(--c-s2); }
main.c-sitepage .article-body-inner > ul, main.c-sitepage .article-body-inner > ol { gap: var(--c-s2); }
main.c-sitepage .article-body-inner > ul li, main.c-sitepage .article-body-inner > ol li { padding-left: var(--c-s4); }
main.c-sitepage .article-body-inner > ul li::before { width: 10px; background: var(--c-ink-3); }
main.c-sitepage .article-body-inner > ol > li::before { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; font-weight: 600; color: var(--c-ink-2); line-height: 1.75; }
/* Links, not buttons: an .btn inside an article (the calculator's tuition offer) keeps its own ink-and-on-ink pair;
   without :not(.btn) this rule out-ranked it and drew the label ink on ink (found on the C15b render). */
main.c-sitepage .article-body-inner a:not(.btn) { color: var(--c-ink); text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; transition: none; }
main.c-sitepage .article-body-inner a:not(.btn):hover { color: var(--c-ink); text-decoration-color: currentColor; }
main.c-sitepage .article-body-inner > hr { border-top: var(--c-line); }
main.c-sitepage .article-body-inner th, main.c-sitepage .article-body-inner td { border-bottom: var(--c-line); }
main.c-sitepage .article-body-inner thead th { font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); border-bottom: var(--c-border); }
main.c-sitepage .article-body-inner blockquote { border-left: 3px solid var(--c-hair); font-family: var(--c-font); font-style: normal; font-size: var(--c-t3); line-height: 1.5; color: var(--c-ink); background: var(--c-well); border-radius: 0 var(--c-r1) var(--c-r1) 0; }
main.c-sitepage .article-body-inner .call-to-action, main.c-sitepage .article-body-inner .article-inline-cta { background: var(--c-well); border: var(--c-line); border-radius: var(--c-r2); padding: var(--c-s4); }
/* The 404 page: a plain page, left-aligned like the others; its handwritten note was decoration (aria-hidden). */
main.c-sitepage .utility-hero { min-height: 0; padding: var(--c-s5) 0 var(--c-s6); }
main.c-sitepage .differ-inner { text-align: left; margin: 0; max-width: var(--c-measure); }
main.c-sitepage .differ-inner .section-eyebrow { justify-content: flex-start; }
main.c-sitepage .pull { margin-bottom: var(--c-s3); }
main.c-sitepage .utility-lede { font-size: var(--c-t3); line-height: 1.5; color: var(--c-ink-2); margin: 0 0 var(--c-s4); }
main.c-sitepage .utility-actions { justify-content: flex-start; gap: var(--c-s2); }
main.c-sitepage .utility-annot { display: none; }
main.c-sitepage .site-search-hubs { font-size: var(--c-t2); color: var(--c-ink-2); margin: var(--c-s3) 0 var(--c-s4); }
/* ---- C15b (release C.1, or C if HELD in time; the lead's 00:31Z ruling): about, contact, tuition, thankyou, the
   insights index and its articles. Same scope (main.c-sitepage); every word, id, name= and data-* unchanged. The
   grade-boundaries calculator's and the NMR guide's widgets take their old look from revision.css, which the notes
   pages share, so their C+ rules are here instead, scoped, and revision.css stays byte-identical. ---- */
/* Shared: the hub sub-title, the reply note, bands gone, the dark end band as the hubs' C+ end card (drawing 21). */
main.c-sitepage .page-sub-title { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .page-meta { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; color: var(--c-ink-2); gap: var(--c-s1) var(--c-s2); }
main.c-sitepage .page-meta strong { font-weight: 600; color: var(--c-ink); }
main.c-sitepage .page-meta-sep { background: var(--c-ink-3); }
main.c-sitepage .page-meta .i3-tuition-enquiry, main.c-sitepage .included-blurb a, main.c-sitepage .faq-body a, main.c-sitepage .form-privacy a,
main.c-sitepage .contact-card-link, main.c-sitepage .contact-socials a, main.c-sitepage .article-quick-links a, main.c-sitepage .article-cta p a {
  color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
main.c-sitepage .page-meta .i3-tuition-enquiry:hover, main.c-sitepage .included-blurb a:hover, main.c-sitepage .contact-card-link:hover,
main.c-sitepage .contact-socials a:hover, main.c-sitepage .article-quick-links a:hover, main.c-sitepage .article-cta p a:hover { color: var(--c-ink); text-decoration-color: currentColor; }
main.c-sitepage .reply-note { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage :is(.process, .included, .credentials, .article-hero, .article-cta) { background: transparent; border-top: 0; border-bottom: 0; }
main.c-sitepage .final-cta { background: transparent; color: var(--c-ink); padding: 0 0 var(--c-s7); }
main.c-sitepage .final-cta::before { display: none; }
main.c-sitepage .final-cta-inner { box-sizing: border-box; padding: var(--c-s4); background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage .final-cta-title { font-family: var(--c-font); font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .final-cta-title .accent-light { font-style: normal; color: inherit; }
main.c-sitepage .final-cta-lede, main.c-sitepage .final-cta p { color: var(--c-ink-2); }
main.c-sitepage .final-cta .btn-light, main.c-sitepage .final-cta .btn-primary { background: var(--c-ink); color: var(--c-on-ink); border-color: transparent; }
main.c-sitepage .final-cta .btn-ghost-light { background: transparent; color: var(--c-ink); border: var(--c-border); }
main.c-sitepage .section-eyebrow-light { color: var(--c-ink-2); }
/* Tuition: the price cards (C15a's cards; the A-Level card loses its ink fill, keeps the control edge), "Most enquiries"
   as a quiet label (its own words), the price lines in sans, numbering in ink-3, the boards as cards, the testimonials. */
main.c-sitepage .price-feature-tag { position: absolute; top: var(--c-s3); right: var(--c-s4); background: transparent; color: var(--c-ink-2); font-family: var(--c-font); font-size: var(--c-t1); font-weight: 600; letter-spacing: 0; text-transform: none; padding: 0; border-radius: 0; }
main.c-sitepage .price-from { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage .price-card-feature .btn-ghost-light { color: var(--c-ink); }
main.c-sitepage .price-card-feature .price-card-head { border-bottom: var(--c-line); }
main.c-sitepage .process, main.c-sitepage .boards, main.c-sitepage .included { padding: var(--c-s6) 0; }
main.c-sitepage .process-grid { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); overflow: hidden; }
main.c-sitepage .process-step { border-right: var(--c-line); gap: var(--c-s2); padding: var(--c-s4); }
main.c-sitepage .process-step:last-child { border-right: 0; }
main.c-sitepage :is(.process-num, .board-num, .cred-num, .insight-row-num) { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
main.c-sitepage .process-num { border-bottom: var(--c-line); padding-bottom: var(--c-s2); }
main.c-sitepage :is(.process-body h3, .board-tile h3, .cred-body h3, .contact-card-h, .related-card h4, .article-cta h3) { font-family: var(--c-font); font-size: var(--c-t3); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage :is(.process-body p, .board-tile p) { font-size: var(--c-t2); line-height: 1.5; color: var(--c-ink-2); }
main.c-sitepage .boards-grid { gap: var(--c-s3); background: transparent; border: 0; }
main.c-sitepage .board-tile { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); padding: var(--c-s4); }
main.c-sitepage .board-tile:hover { background: var(--c-surface); border: var(--c-border); }
main.c-sitepage :is(.board-tile-meta, .bio-signature-meta, .bio-photo-sub, .outside-cap, .t-context, .related-card-meta, .insight-row-meta, .form-meta, .contact-card-list span, .gb-paper-max) {
  font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage .board-tile-meta { border-top: var(--c-line); }
main.c-sitepage .included-list { gap: 0; background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); overflow: hidden; }
main.c-sitepage .included-list li { background: transparent; border-bottom: var(--c-line); padding: var(--c-s3) var(--c-s4); }
main.c-sitepage .included-list li:last-child { border-bottom: 0; }
main.c-sitepage .included-num { font-family: var(--c-font); font-style: normal; font-size: var(--c-t3); font-weight: 600; color: var(--c-ink-3); }
main.c-sitepage .included-blurb { font-size: var(--c-t3); line-height: 1.5; color: var(--c-ink-2); }
main.c-sitepage .t-mark { font-family: var(--c-font); color: var(--c-ink-3); }
main.c-sitepage .t-quote { font-family: var(--c-font); font-style: normal; font-size: var(--c-t3); line-height: 1.5; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .t-card { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage .carousel-btn { width: var(--c-tap); height: var(--c-tap); border-radius: var(--c-r1); background: transparent; color: var(--c-ink); border: var(--c-border); }
main.c-sitepage .carousel-btn:hover { background: color-mix(in oklch, var(--c-ink) 6%, transparent); color: var(--c-ink); }
main.c-sitepage .carousel-dot.is-active::before { background: var(--c-ink); }
/* About. */
main.c-sitepage .bio-signature-name { font-family: var(--c-font); font-style: normal; font-size: var(--c-t3); font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .bio-photo-label { font-family: var(--c-font); font-style: normal; font-size: var(--c-t3); font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .credentials, main.c-sitepage .outside { padding: var(--c-s6) 0; }
main.c-sitepage .cred-list { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); overflow: hidden; }
main.c-sitepage .cred-item { border-color: var(--c-hair); }
main.c-sitepage .cred-tag { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); border: 0; border-radius: 0; padding: 0; background: transparent; }
main.c-sitepage .outside-heading { font-family: var(--c-font); font-style: normal; font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
/* Contact. */
main.c-sitepage .contact-form-heading { font-family: var(--c-font); font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .field label { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .field :is(input, select, textarea):focus, main.c-sitepage .field :is(input, select, textarea):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-color: var(--c-edge); box-shadow: none; }
main.c-sitepage .enquiry-status { color: var(--c-ink); }
main.c-sitepage .contact-card { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage .contact-card-quiet { background: var(--c-surface); }
main.c-sitepage .contact-card-eyebrow { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
/* The insights index. */
main.c-sitepage .insight-row-body h3, main.c-sitepage .insight-feature .insight-row-body h3 { font-family: var(--c-font); font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage :is(.insight-row, .insight-feature):hover { background: transparent; }
main.c-sitepage :is(.insight-row, .insight-feature):hover .insight-row-body h3 { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; }
main.c-sitepage .insight-row-arrow, main.c-sitepage .related-card-arrow { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
/* The articles: the hero as a page hero (the title keeps the serif, upright, in the ink), the category and byline as
   one quiet line each, the standfirst a lede, the CTA and related cards as C+ cards, the TOC. */
main.c-sitepage .article-title { font-family: var(--c-serif); font-weight: 400; letter-spacing: -0.01em; color: var(--c-ink); }
main.c-sitepage .article-category { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink-2); background: transparent; border: 0; border-radius: 0; padding: 0; }
main.c-sitepage .article-standfirst { font-family: var(--c-font); font-style: normal; font-size: var(--c-t3); line-height: 1.5; letter-spacing: 0; color: var(--c-ink-2); }
main.c-sitepage .article-byline { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage .article-byline .cred-tag { color: var(--c-ink-2); }
main.c-sitepage .article-byline-sep { background: var(--c-ink-3); }
main.c-sitepage .article-cta-inner { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); padding: var(--c-s4); }
main.c-sitepage .related-card { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage .related-card:hover h4, main.c-sitepage .related-card:hover .related-card-arrow { color: var(--c-ink); }
main.c-sitepage .article-toc-eyebrow, main.c-sitepage .article-toc-list a { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .article-toc-eyebrow { font-weight: 600; }
main.c-sitepage .article-toc-list a:hover { color: var(--c-ink); text-decoration: underline; }
/* Grade boundaries (revision.css's gb-* rules, overridden here; the calculator is site.js's, untouched). Pressed chips
   are C+'s ink, a grade estimate isn't a mark, so no red; the student's marker is in the ink. */
main.c-sitepage .gb-calc { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage :is(.gb-calc > h2, .gb-tables > h2) { font-family: var(--c-font); font-size: var(--c-t4); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .gb-label { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .gb-pill { font-family: var(--c-font); font-size: var(--c-t2); min-height: var(--c-tap); color: var(--c-ink); background: transparent; border: var(--c-border); }
main.c-sitepage .gb-pill:hover { border-color: var(--c-ink); }
main.c-sitepage .gb-pill[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); font-weight: 600; }
main.c-sitepage :is(.gb-pill, .gb-select, .gb-input, .gb-summary):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-color: var(--c-edge); }
main.c-sitepage :is(.gb-select, .gb-input) { min-height: var(--c-btn-h); border: var(--c-border); border-radius: var(--c-r1); background: var(--c-surface); }
main.c-sitepage .gb-result { border: var(--c-line); border-left: var(--c-line); border-radius: var(--c-r2); background: var(--c-surface); }
main.c-sitepage .gb-result-grade { font-family: var(--c-font); font-size: var(--c-t5); line-height: 1.25; font-weight: 600; color: var(--c-ink); }
main.c-sitepage .gb-result-score { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--c-ink-2); }
main.c-sitepage .gb-scale-track { background: var(--c-well); }
main.c-sitepage :is(.gb-tick-label, .gb-scale-ends) { font-family: var(--c-font); font-size: var(--c-t1); color: var(--c-ink-3); }
main.c-sitepage .gb-marker-line { background: var(--c-ink); }
main.c-sitepage .gb-marker-val { font-family: var(--c-font); background: var(--c-ink); color: var(--c-on-ink); }
main.c-sitepage .gb-note-approx { border-left-color: var(--c-ink-3); }
main.c-sitepage .gb-details { border: var(--c-line); border-radius: var(--c-r2); background: var(--c-surface); }
main.c-sitepage .gb-summary:hover, main.c-sitepage .gb-details[open] .gb-summary { background: var(--c-well); }
main.c-sitepage .gb-summary-title { font-family: var(--c-font); font-size: var(--c-t3); line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .gb-summary::after { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
/* The NMR guide (revision.css's callout, rn-table, rn-exam, rn-practice, rn-cap and nmr rules, overridden here, in the
   notes frame's own C+ terms; site.js's analyser untouched). Titles sentence case, so the case hazard is gone; a wrong
   answer's red (.is-err) is a mark and stays. */
main.c-sitepage .callout { background: var(--c-surface); border: var(--c-line); border-left: 3px solid var(--c-ink-3); border-radius: 0 var(--c-r1) var(--c-r1) 0; }
main.c-sitepage :is(.callout-key, .callout-warn) { border-left-color: var(--c-ink-3); }
main.c-sitepage .callout-title, main.c-sitepage :is(.callout-key, .callout-warn) .callout-title { font-family: var(--c-font); font-size: var(--c-t3); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--c-ink); }
main.c-sitepage .callout ol > li::before { font-family: var(--c-font); letter-spacing: 0; color: var(--c-ink-2); }
main.c-sitepage .rn-table th { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); background: var(--c-surface); border-bottom: 2px solid var(--c-ink-3); }
main.c-sitepage .rn-table tr:nth-child(even) td { background: transparent; }
main.c-sitepage .rn-table-caption { font-family: var(--c-font); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage :is(.rn-exam-num, .rn-exam-marks, .rn-exam-src) { font-family: var(--c-font); letter-spacing: 0; text-transform: none; }
main.c-sitepage .rn-exam-num { background: var(--c-ink); color: var(--c-on-ink); }
main.c-sitepage .rn-practice { background: transparent; border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage .rn-practice-header { font-family: var(--c-font); font-size: var(--c-t3); font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--c-ink); }
main.c-sitepage .rn-practice-header::after { letter-spacing: 0; text-transform: none; }
main.c-sitepage .rn-cap-wrap { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage .rn-cap-lead { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .rn-cap-btn { font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; text-transform: none; min-height: var(--c-tap); color: var(--c-ink); background: transparent; border: var(--c-border); }
main.c-sitepage .rn-cap-btn.nuc-opt[aria-pressed="true"], main.c-sitepage .nuc-opt[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
main.c-sitepage :is(.nmr-pick-label, .nmr-booklet > summary, .nmr-booklet-tables caption, .nmr-booklet-tables th, .nmr-panel-title, .nmr-field, .nmr-log-title, .nmr-struct, .nmr-arow-tag) { font-family: var(--c-font); letter-spacing: 0; text-transform: none; }
/* C15c (release C.1; the lead's rulings of 20 Oct 00:31Z and 02:57Z): /revision/, the past-paper packs and Bridge the
   Gap's index, in the hubs' C+ terms (drawing 21 v2). revision.css's rn-hub, rn-plot, rn-topic, pk and rn-bridge rules
   are overridden here, never edited, because the two notes hubs and the notes pages share those classes. Red stays only
   where it is a mark (the diagnostic's verdicts) and the hero art (single-sourced in build-og.mjs); a finished module's
   ring keeps its green. Words unchanged. */
/* Two corrections to the blocks above, found while building this one. The end card sat on the .wrap's outer edge
   (its s4 padding replaced the wrap's gutter), so it was wider than the content column; it now sits in the column, as
   the hubs' card does. A list's "01." was wider than C15a's s4 indent in the sans, so it touched its text. */
main.c-sitepage .final-cta-inner { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter)); margin-inline: auto; }
main.c-sitepage .article-body-inner > ol > li { padding-left: var(--c-s5); }
/* The hero's proof line, the routes and the map. */
main.c-sitepage .rn-hub-proof { font-family: var(--c-font); font-size: var(--c-t2); line-height: 1.5; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .rn-hub-title em.accent { font-style: normal; color: inherit; }
main.c-sitepage .quick-routes { gap: var(--c-s2) var(--c-s4); padding: var(--c-s3) 0 0; border-top: var(--c-line); }   /* no rule below: at 1280 the summit card rises over it */
main.c-sitepage .quick-routes a { min-height: var(--c-tap); padding: 0; border: 0; border-radius: 0; font-family: var(--c-font); font-size: var(--c-t3); color: var(--c-ink);
  text-decoration: underline; text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
main.c-sitepage .quick-routes a:hover { color: var(--c-ink); text-decoration-color: currentColor; }
main.c-sitepage :is(.rn-hub-ylabel, .rn-hub-axis span, .rn-hub-era) { font-family: var(--c-font); font-size: var(--c-t1); letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
main.c-sitepage :is(.rn-hub-anno, .rn-hub-anno-m) { color: var(--c-ink-2); }
main.c-sitepage :is(.rn-hub-anno, .rn-hub-anno-m) em { font-family: var(--c-font); font-style: normal; font-size: var(--c-t2); color: var(--c-ink-2); }
main.c-sitepage .rn-plot { background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); }
main.c-sitepage .rn-plot:hover { background: var(--c-surface); border-color: var(--c-ink-2); }
main.c-sitepage .rn-plot::before { background: var(--c-ink); }   /* a position on the curve, not a mark */
main.c-sitepage .rn-plot-bridge { box-shadow: none; }
main.c-sitepage .rn-plot-eyebrow { font-family: var(--c-font); font-size: var(--c-t1); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage .rn-plot h2 { font-family: var(--c-font); font-weight: 600; font-size: var(--c-t3); line-height: 1.3; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .rn-plot-links a { border-top: var(--c-line); font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); transition: none; }
main.c-sitepage .rn-plot-links a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
main.c-sitepage .rn-plot-links .rn-plot-more { font-weight: 400; color: var(--c-ink-2) !important; }   /* revision.css sets it !important */
main.c-sitepage .rn-plot-links .rn-plot-more:hover { color: var(--c-ink) !important; }
main.c-sitepage .rn-plot-links a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
main.c-sitepage .i4-coverage a:hover { color: var(--c-ink); text-decoration-color: currentColor; }
/* The packs' headings and the cards (the packs' and Bridge's modules share .rn-topic-card), as the hubs' C+ card. */
main.c-sitepage .rn-paper-heading { font-family: var(--c-font); font-weight: 600; font-size: var(--c-t5); line-height: 1.25; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .pk-group-heading { font-family: var(--c-font); font-size: var(--c-t3); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .rn-topic-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--c-s3); border: 0; }   /* 260, not 280: four columns at 1280 with the gap, as live */
main.c-sitepage .rn-topic-card { padding: var(--c-s4); background: var(--c-surface); border: var(--c-line); border-radius: var(--c-r2); transition: border-color .15s; }
main.c-sitepage .rn-topic-card:hover { background: var(--c-surface); border-color: var(--c-ink-2); }
main.c-sitepage a.rn-topic-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
main.c-sitepage .rn-topic-num { font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage .rn-topic-card h3 { font-family: var(--c-font); font-weight: 600; font-size: var(--c-t3); line-height: 1.3; letter-spacing: 0; color: var(--c-ink); }
main.c-sitepage .rn-topic-card p { font-size: var(--c-t2); color: var(--c-ink-2); }
main.c-sitepage .rn-topic-link { border-top: var(--c-line); font-family: var(--c-font); font-size: var(--c-t2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--c-ink); }
main.c-sitepage .rn-topic-card:hover .rn-topic-link { color: var(--c-ink); }
main.c-sitepage .pk-card .pk-card-actions { font-size: var(--c-t1); }
main.c-sitepage :is(.pk-links, .pk-index) a { color: var(--c-ink); text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: none; }
main.c-sitepage :is(.pk-links, .pk-index) a:hover { color: var(--c-ink); text-decoration-color: currentColor; }
main.c-sitepage .pk-prerequisites { font-size: var(--c-t2); color: var(--c-ink-2); }
main.c-sitepage .pk-prerequisites summary { font-family: var(--c-font); font-size: var(--c-t2); color: var(--c-ink); }
main.c-sitepage .pk-prerequisites summary:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
main.c-sitepage :is(.pk-hero a, .pk-index a, .pk-prerequisites summary):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Bridge's rings: in progress in the ink, done in C+'s green (a finished module, as Learn marks done). The diagnostic's
   verdict colours (is-solid, is-shaky, is-start) are marks and stay; only their mono capitals go. */
main.c-sitepage .rn-bridge-ring-track { stroke: var(--c-hair); }
main.c-sitepage .rn-bridge-ring-fill { stroke: var(--c-ink); }
main.c-sitepage .rn-bridge-card.is-done .rn-bridge-ring-fill { stroke: var(--c-green); }
main.c-sitepage .rn-bridge-ring-txt { font-family: var(--c-font); font-size: var(--c-t1); color: var(--c-ink-2); }
main.c-sitepage .rn-bridge-card.is-done .rn-bridge-ring-txt { color: var(--c-green); font-weight: 600; }
main.c-sitepage .rn-bridge-meta { font-family: var(--c-font); font-size: var(--c-t1); letter-spacing: 0; text-transform: none; color: var(--c-ink-2); }
main.c-sitepage .rn-diag-skill { border: var(--c-line); border-radius: var(--c-r1); background: var(--c-surface); }
main.c-sitepage .rn-diag-skill-name { font-size: var(--c-t2); }
main.c-sitepage .rn-diag-skill-verdict { font-family: var(--c-font); font-size: var(--c-t1); font-weight: 600; letter-spacing: 0; text-transform: none; }
main.c-sitepage .rn-bridge-reset { min-height: var(--c-tap); font-family: var(--c-font); font-size: var(--c-t2); letter-spacing: 0; color: var(--c-ink-2); text-decoration-color: var(--c-ink-3); text-underline-offset: 3px; }
main.c-sitepage .rn-bridge-reset:hover { color: var(--c-ink); text-decoration-color: currentColor; }
main.c-sitepage .rn-bridge-reset:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
main.c-sitepage .i5c-bridge-onward { border-top: var(--c-line); font-size: var(--c-t2); }
main.c-sitepage .i5c-bridge-onward a { color: var(--c-ink); text-decoration-color: var(--c-ink-3); }
main.c-sitepage .i5c-bridge-onward a:hover { color: var(--c-ink); text-decoration-color: currentColor; }
/* ==== end site pages in C+ ==== */
/* 320 px (POST-LAUNCH, "Four .com pages scroll sideways at 320 px on live"): the Bridge index's end-card button,
   "Enquire about A-Level tuition", ran past a 320 screen as one nowrap line (348px). Below 360 it wraps, balanced
   so the break falls before "A-Level", not at its hyphen; from 360 up nothing changes. */
@media (max-width: 359px) { main.c-sitepage .article-cta .btn { white-space: normal; text-wrap: balance; text-align: center; } }
/* 320 px, the fifth page (the reviewer's 16:40Z; the lead's 16:41Z): insights/structure-and-bonding's question table was
   303px in a 280px column, held wide by single long words ("intermolecular", "electrostatic"). Below 360 a site page's
   table cells may hyphenate words of 12 characters or more, 5 either side of the break, so the table fits; shorter
   words never break, no character of the page changes, and from 360 up nothing changes. */
@media (max-width: 359px) { main.c-sitepage .article-body-inner :is(td, th) { hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; } }