/* gpa-core.css: BUILT FILE, do not edit. Source: gpa-design-tokens.css + layout.css + components.css (in that order), joined by
   scripts/design/build_core_css.py. Edit the sources, rebuild, and ship this file with them. */

/* ==== gpa-design-tokens.css ==== */
/* ============================================================
   GPA design tokens — GLOBAL
   Loads on every page of the site.
   ------------------------------------------------------------
   2026-09-03: the calculator design system — ~34 KB of rules all scoped to
   .page-template-template-calculator — was moved out of this file into
   calculator-page.css, which only loads on calculator pages. Those rules
   could never match anywhere else, so this file had been shipping 34 KB of
   inert CSS to roughly 2,000 pages.
   Keep this file for what is genuinely global: custom properties,
   @font-face, resets and site-wide typography.
   ============================================================ */

/* ============================================
   GPA Calculator - Global Design Tokens
   Source of truth: gpa-homepage.css
   ============================================
   All 5 templates inherit typography, color, and
   spacing from these variables. Change a value here
   and it propagates site-wide.
   ============================================ */

/* Lexend, self-hosted (Digant 2026-10-06 23:29: load it once, from our own server). The same variable woff2 files
   Google Fonts served, one per character set (Lexend v26, SIL Open Font License 1.1: assets/fonts/Lexend-OFL.txt).
   The rules mirror Google's CSS exactly (one face per weight 300-800 and character set, same file, same ranges), so
   text renders as before; the arrow faces below rely on these per-weight descriptors. The browser downloads only the
   files for characters a page uses (latin on almost every page); functions.php preloads the latin file. */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/lexend-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/lexend-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/lexend-latin.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; } /* latin */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/lexend-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/lexend-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/lexend-latin.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; } /* latin */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/lexend-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/lexend-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/lexend-latin.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; } /* latin */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/lexend-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/lexend-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/lexend-latin.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; } /* latin */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/lexend-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/lexend-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/lexend-latin.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; } /* latin */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/lexend-vietnamese.woff2") format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* vietnamese */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/lexend-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin-ext */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 800; font-display: swap; src: url("assets/fonts/lexend-latin.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; } /* latin */

/* ---- Font-swap CLS fallback (T6.4) ----
   A metric-matched fallback face: while Lexend is downloading, the browser
   renders Arial re-scaled to occupy the SAME box Lexend will, so the swap
   from fallback → Lexend produces ~zero layout shift.
   Overrides computed from Lexend vs Arial metrics, normalised on x-height
   (size-adjust = Lexend xHeight-ratio / Arial xHeight-ratio). Regenerate with
   fontaine / @capsizecss/metrics if the brand font ever changes. */
@font-face {
    font-family: "Lexend Fallback";
    src: local("Arial");
    size-adjust: 103.2%;
    ascent-override: 96.9%;
    descent-override: 24.2%;
    line-gap-override: 0%;
}

/* ============================================================
   COLOR TOKENS (design system overhaul, 2026-10-02)
   Three layers. Only layer 1 holds raw colors; everything else in the
   theme and the calculators reads layers 2 and 3. To re-color the whole
   site, edit layer 1.
   ============================================================ */
:root {
    /* 1. BRAND PALETTE — edit here to re-color everything */
    --gpa-blue-50:   #EFF6FF;
    --gpa-blue-100:  #DBEAFE;
    --gpa-blue-200:  #BFDBFE;
    --gpa-blue-300:  #93C5FD;
    --gpa-blue-400:  #60A5FA;
    --gpa-blue-500:  #3B82F6;
    --gpa-blue-600:  #2563EB;
    --gpa-blue-700:  #1D4ED8;
    --gpa-blue-800:  #1E40AF;
    --gpa-blue-900:  #1E3A8A;
    --gpa-blue-950:  #172554;
    --gpa-indigo-50:  #EEF2FF;
    --gpa-indigo-100: #E0E7FF;
    --gpa-indigo-200: #C7D2FE;
    --gpa-indigo-500: #6366F1;
    --gpa-indigo-700: #4338CA;
    --gpa-indigo-800: #3730A3;
    --gpa-indigo-900: #312E81;
    --gpa-white:     #FFFFFF;
    --gpa-black:     #000000;
    --gpa-gray-25:   #F9FAFB;
    --gpa-gray-50:   #F7F7FB;
    --gpa-gray-100:  #F3F4F6;
    --gpa-gray-200:  #E5E7EB;
    --gpa-gray-300:  #D1D5DB;
    --gpa-gray-400:  #9CA3AF;
    --gpa-gray-500:  #6B7280;
    --gpa-gray-600:  #475569;
    --gpa-gray-700:  #374151;
    --gpa-gray-800:  #1F2937;
    --gpa-gray-900:  #111827;
    --gpa-slate-400: #94A3B8;
    --gpa-slate-500: #64748B;
    --gpa-slate-700: #334155;
    --gpa-green-50:  #F0FDF4;
    --gpa-green-100: #DCFCE7;
    --gpa-green-200: #BBF7D0;
    --gpa-green-400: #4ADE80;
    --gpa-green-500: #22C55E;
    --gpa-green-600: #16A34A;
    --gpa-green-700: #15803D;
    --gpa-green-800: #166534;
    --gpa-green-900: #14532D;
    --gpa-teal-100:  #CCFBF1;
    --gpa-teal-200:  #99F6E4;
    --gpa-teal-600:  #0D9488;
    --gpa-teal-700:  #0F766E;
    --gpa-teal-800:  #115E59;
    --gpa-pink-100:  #FCE7F3;
    --gpa-pink-600:  #DB2777;
    --gpa-pink-700:  #BE185D;
    --gpa-pink-800:  #9D174D;
    --gpa-rose-600:  #E11D48;
    --gpa-amber-50:  #FFFBEB;
    --gpa-amber-100: #FEF3C7;
    --gpa-amber-200: #FDE68A;
    --gpa-amber-400: #FBBF24;
    --gpa-amber-500: #F59E0B;
    --gpa-amber-600: #D97706;
    --gpa-amber-700: #B45309;
    --gpa-amber-800: #92400E;
    --gpa-amber-900: #78350F;
    --gpa-orange-50:  #FFF7ED;
    --gpa-orange-100: #FFEDD5;
    --gpa-orange-200: #FED7AA;
    --gpa-orange-600: #EA580C;
    --gpa-orange-700: #C2410C;
    --gpa-orange-800: #9A3412;
    --gpa-red-50:    #FEF2F2;
    --gpa-red-100:   #FEE2E2;
    --gpa-red-200:   #FECACA;
    --gpa-red-500:   #EF4444;
    --gpa-red-600:   #DC2626;
    --gpa-red-700:   #B91C1C;
    --gpa-red-800:   #991B1B;

    /* 2. SITE ROLES */
    --gpa-primary:        var(--gpa-blue-600);
    --gpa-primary-hover:  var(--gpa-blue-700);
    --gpa-accent:         var(--gpa-indigo-700);
    --gpa-heading:        var(--gpa-blue-900);
    --gpa-text-strong:    var(--gpa-gray-900);
    --gpa-text:           var(--gpa-gray-700);
    --gpa-text-secondary: var(--gpa-gray-600);
    --gpa-text-muted:     var(--gpa-gray-500);
    --gpa-border:         var(--gpa-gray-200);
    --gpa-border-strong:  var(--gpa-gray-300);
    --gpa-divider:        var(--gpa-gray-100);
    --gpa-page-bg:        var(--gpa-gray-50);
    --gpa-surface:        var(--gpa-white);
    --gpa-surface-subtle: var(--gpa-gray-25);
    --gpa-tint-blue:      var(--gpa-blue-50);
    --gpa-tint-indigo:    var(--gpa-indigo-50);
    --gpa-link:           var(--gpa-blue-700);
    --gpa-link-underline: var(--gpa-blue-300);
    --gpa-gradient-brand: linear-gradient(135deg, var(--gpa-blue-600) 0%, var(--gpa-indigo-700) 100%);
    --gpa-hero-bg:
        radial-gradient(900px 260px at 30% 0%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
        radial-gradient(700px 300px at 85% 110%, rgba(59,130,246,0.20), rgba(59,130,246,0) 70%),
        linear-gradient(160deg, #D6E6FF 0%, #DCE6FF 60%, #E0E5FF 100%);
    --gpa-hero-title:     var(--gpa-heading);
    --gpa-hero-text:      var(--gpa-slate-700);
    --gpa-breadcrumb-sep: var(--gpa-slate-400);
    --gpa-breadcrumb-current: var(--gpa-slate-500);
    --gpa-footer-bg:      var(--gpa-blue-950);
    --gpa-footer-text:    var(--gpa-white);
    --gpa-footer-link:    var(--gpa-blue-200);
    --gpa-footer-accent:  var(--gpa-blue-300);
    --gpa-footer-line:    rgba(191,219,254,0.2);
    --gpa-focus-ring:     var(--gpa-primary);

    /* 3. CALCULATOR ROLES */
    --gpa-calc-bg:           var(--gpa-surface);
    --gpa-calc-border:       var(--gpa-indigo-200);
    --gpa-calc-shadow:       0 2px 4px rgba(30,58,138,0.06), 0 16px 40px rgba(30,58,138,0.14);
    --gpa-calc-input-border: var(--gpa-border);
    --gpa-calc-focus:        var(--gpa-primary);
    --gpa-calc-add-bg:       var(--gpa-tint-blue);
    --gpa-calc-add-border:   var(--gpa-blue-300);
    --gpa-calc-add-text:     var(--gpa-blue-700);
    --gpa-calc-result-bg:    linear-gradient(135deg, var(--gpa-blue-50) 0%, var(--gpa-indigo-50) 100%);
    --gpa-calc-result-line:  var(--gpa-indigo-200);
    --gpa-calc-result-label: var(--gpa-accent);
    --gpa-calc-result-value: var(--gpa-heading);
    --gpa-calc-cta-bg:       var(--gpa-gradient-brand);
    /* Calculator Design Standard: card spacing and the sticky result pill */
    --gpa-calc-pad:          32px;
    --gpa-calc-row-gap:      12px;
    --gpa-calc-field-gap:    12px;
    --gpa-calc-section-gap:  16px;
    --gpa-calc-pill-bg:      var(--gpa-blue-950);
    --gpa-calc-pill-text:    var(--gpa-surface);
    --gpa-calc-pill-label:   var(--gpa-blue-300);
    --gpa-calc-pill-chip-bg: rgba(255,255,255,0.14);
    --gpa-calc-pill-shadow:  0 8px 24px rgba(23,37,84,0.28);

    /* 4. CONTENT ROLES (tables, worked examples) — roles only, no raw colors */
    --gpa-table-border:         var(--gpa-calc-border);
    --gpa-table-head-bg:        var(--gpa-surface-subtle);
    --gpa-table-head-text:      var(--gpa-heading);
    --gpa-table-row-line:       var(--gpa-divider);
    --gpa-table-total-bg:       var(--gpa-tint-blue);
    --gpa-example-op:           var(--gpa-gray-400);
    --gpa-example-result-bg:    var(--gpa-calc-result-bg);
    --gpa-example-result-line:  var(--gpa-calc-result-line);
    --gpa-example-result-label: var(--gpa-calc-result-label);
    --gpa-example-result-value: var(--gpa-calc-result-value);
    --gpa-example-highlight:    var(--gpa-primary);
    /* Grade badges in worked examples use the grade-band tokens below: semantic, they don't follow the theme. */

    /* Status: calculator results and callouts only, never decoration */
    --gpa-success: var(--gpa-green-700);
    --gpa-warning: var(--gpa-amber-700);
    --gpa-danger:  var(--gpa-red-700);

    /* Grade bands (GPA scale table): text on a light tint */
    --gpa-band-a: var(--gpa-green-700);   --gpa-band-a-bg: var(--gpa-green-50);
    --gpa-band-b: var(--gpa-blue-700);    --gpa-band-b-bg: var(--gpa-blue-50);
    --gpa-band-c: var(--gpa-amber-700);   --gpa-band-c-bg: var(--gpa-amber-50);
    --gpa-band-d: var(--gpa-orange-700);  --gpa-band-d-bg: var(--gpa-orange-50);
    --gpa-band-f: var(--gpa-red-700);     --gpa-band-f-bg: var(--gpa-red-50);

    /* OLD NAMES — aliases so files not yet migrated keep working.
       Remove each one once nothing references it. */
    --gpa-primary-dark:  var(--gpa-primary-hover);
    --gpa-primary-light: var(--gpa-blue-500);
    --gpa-success-dark:  var(--gpa-green-700);
    --gpa-warning-dark:  var(--gpa-amber-700);
    --gpa-purple:        var(--gpa-accent);
    --gpa-text-heading:  var(--gpa-text-strong);
    --gpa-text-body:     var(--gpa-text);
    --gpa-text-light:    var(--gpa-gray-400);
    --gpa-bg-white:      var(--gpa-surface);
    --gpa-bg-gray-50:    var(--gpa-surface-subtle);
    --gpa-bg-gray-100:   var(--gpa-gray-100);
    --gpa-bg-dark:       var(--gpa-gray-900);
    --gpa-border-dark:   var(--gpa-border-strong);
    --gpa-border-focus:  var(--gpa-focus-ring);
    /* gpacalculator-manager plugin calculator names (theme 1.2, not live yet) */
    --gpa-calc-brand-1:  var(--gpa-primary);
    --gpa-calc-brand-2:  var(--gpa-accent);
    --gpa-calc-tint:     var(--gpa-tint-indigo);
    --gpa-calc-ink:      var(--gpa-heading);
}

:root {
    /* ---- Font ---- */
    /* "Lexend Fallback" sits between Lexend and the system stack so the
       metric-matched face is used during font load (see @font-face above). */
    --gpa-font: "Lexend", "Lexend Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --gpa-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* ---- Type scale (one scale for every template; phones redefine below) ---- */
    --gpa-h1-size: 44px;
    --gpa-h1-weight: 700;
    --gpa-h1-line: 1.15;
    --gpa-h1-tracking: -0.01em;
    --gpa-h1-color: var(--gpa-hero-title);
    --gpa-h2-size: 30px;
    --gpa-h2-weight: 800;
    --gpa-h2-line: 1.3;
    --gpa-h2-tracking: -0.02em;
    --gpa-h2-color: var(--gpa-heading);
    --gpa-h3-size: 22px;
    --gpa-h3-weight: 700;
    --gpa-h3-line: 1.35;
    --gpa-h3-color: var(--gpa-text-strong);
    --gpa-h4-size: 18px;
    --gpa-h4-weight: 700;
    --gpa-h4-line: 1.4;
    --gpa-h4-color: var(--gpa-text-strong);

    /* Fixed phone values, for files that switch at their own breakpoint */
    --gpa-h1-size-m: 32px;
    --gpa-h2-size-m: 25px;
    --gpa-h3-size-m: 20px;

    /* ---- Body text ---- */
    --gpa-body-size: 18px;           /* article text: p, li */
    --gpa-body-lg-size: 18px;
    --gpa-ui-size: 16px;             /* nav, forms, buttons, anything that isn't article text */
    --gpa-small-size: 14px;          /* breadcrumb, table notes, sources meta */
    --gpa-small-line: 1.5;
    --gpa-body-weight: 400;
    --gpa-body-line: 1.7;
    --gpa-result-size: 40px;         /* GPA result number */

    /* ---- Text block rhythm ---- */
    --gpa-p-gap: 20px;
    --gpa-li-gap: 10px;
    --gpa-h3-above: 32px;
    --gpa-h3-below: 12px;
    --gpa-h4-above: 24px;
    --gpa-h4-below: 8px;

    /* ---- Section rhythm (layout.css) ---- */
    --gpa-hdr-above: 64px;           /* hero and column bottom spacing */
    --gpa-sec-gap: 48px;             /* above every section H2 */
    --gpa-hdr-sub-gap: 12px;         /* H2 → subtitle */
    --gpa-hdr-below: 32px;           /* header → first content */
    --gpa-block-gap: 80px;           /* between major blocks */

    /* ---- Hero (layout.css); values from the Calculator Design Standard ---- */
    --gpa-hero-pad-top: 40px;
    --gpa-hero-crumb-gap: 8px;       /* breadcrumb → H1 */
    --gpa-hero-title-gap: 12px;      /* H1 → subtitle */
    --gpa-hero-title-size-m: 28px;   /* hero H1 at 768px and below */
    --gpa-hero-tail: 128px;          /* hero space below the subtitle on calculator pages */
    --gpa-hero-overlap: 88px;        /* how far the calculator card rises into it */
    --gpa-hero-tail-plain: 48px;     /* pages without a calculator */
    --gpa-hero-sub-size: 18px;

    /* ---- Spacing ---- */
    --gpa-section-py: 80px;
    --gpa-section-py-m: 50px;
    --gpa-section-px: 16px;
    --gpa-gap-sm: 12px;
    --gpa-gap-md: 16px;
    --gpa-gap-lg: 24px;
    --gpa-gap-xl: 32px;

    /* ---- Layout ---- */
    --gpa-container-max: 1140px;     /* content area (all templates) */
    --gpa-container-wide: 1280px;    /* header / footer (full bleed band) */
    --gpa-content-max: 800px;        /* white content column: tables, calculator, images */
    --gpa-text-max: 720px;           /* text blocks inside the column */
    --gpa-column-radius: 16px;

    /* ---- Radii ---- */
    --gpa-radius-sm: 8px;
    --gpa-radius-md: 12px;
    --gpa-radius-lg: 16px;
    --gpa-radius-pill: 9999px;

    /* ---- Shadows ---- */
    --gpa-shadow-sm: 0 4px 12px color-mix(in srgb, var(--gpa-black) 6%, transparent);
    --gpa-shadow-md: 0 10px 25px color-mix(in srgb, var(--gpa-black) 5%, transparent);
    --gpa-shadow-lg: 0 10px 25px color-mix(in srgb, var(--gpa-black) 8%, transparent);

    /* ---- Inputs / buttons ---- */
    --gpa-input-radius: 8px;
    --gpa-input-border: 1px solid var(--gpa-border);
    --gpa-input-padding: 12px 16px;
    --gpa-input-font-size: 16px;
    --gpa-btn-radius: 8px;
    --gpa-btn-padding: 12px 24px;
    --gpa-btn-font-size: 16px;
    --gpa-btn-font-weight: 600;


    /* ---- Calculators: shape (colors are in the calculator roles above) ---- */
    --gpa-calc-font: var(--gpa-font);
    --gpa-calc-radius-card: 16px;
    --gpa-calc-shadow-pop: 0 12px 32px -8px rgba(30,58,138,0.3);
}
@media (max-width: 768px) {
    :root {
        --gpa-h1-size: var(--gpa-h1-size-m);
        --gpa-h2-size: var(--gpa-h2-size-m);
        --gpa-h3-size: var(--gpa-h3-size-m);
        --gpa-body-size: 17px;
        --gpa-small-size: 13px;
        --gpa-result-size: 36px;
        --gpa-hdr-above: 48px;
        --gpa-sec-gap: 40px;
        --gpa-hdr-below: 24px;
        --gpa-block-gap: 56px;
        --gpa-hero-pad-top: 16px;
        --gpa-hero-crumb-gap: 6px;
        --gpa-hero-title-gap: 8px;
        --gpa-hero-tail: 76px;
        --gpa-hero-overlap: 60px;
        --gpa-hero-tail-plain: 32px;
        --gpa-hero-sub-size: 15px;
    }
}
@media (max-width: 480px) {
    :root { --gpa-h1-size: 28px; }
}

/* ============================================
   BASE: apply tokens to the whole site
   Uses !important to override GeneratePress's
   inline CSS (font-weight:300; font-size:17px),
   which injects AFTER external stylesheets.
   ============================================ */
/* GPA_CALC_ISOLATION: #root (page calculators) and .gpacalc-mount (shortcode
   calculators from the gpacalculator-manager plugin) keep their own font
   sizing/weight; only the brand font family is inherited. */
body,
button:not(#root *, .gpacalc-mount *),
input:not(#root *, .gpacalc-mount *),
select:not(#root *, .gpacalc-mount *),
textarea:not(#root *, .gpacalc-mount *) {
    font-family: var(--gpa-font) !important;
    font-weight: var(--gpa-body-weight) !important;
    font-size: var(--gpa-ui-size) !important;
    -webkit-font-smoothing: antialiased !important;
}
body {
    line-height: var(--gpa-body-line) !important;
    color: var(--gpa-text-body) !important;
}

/* "html hN" outranks the bare hN rules GeneratePress prints inline from the Customizer. None reach inside a calculator. */
h1:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)), h2:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)), h3:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)), h4:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)), h5:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)), h6:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) {
    font-family: var(--gpa-font) !important;
    color: var(--gpa-text-strong);
}

/* ============================================
   Content container width: 1140px for ALL templates
   (calculator, content, database, archive, default)
   Header and footer remain at full width (1280).
   ============================================ */
body .site-content {
    max-width: var(--gpa-container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
html h1:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) {
    font-size: var(--gpa-h1-size);
    font-weight: var(--gpa-h1-weight);
    line-height: var(--gpa-h1-line);
    letter-spacing: var(--gpa-h1-tracking);
    color: var(--gpa-h1-color);
}
html h2:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) {
    font-size: var(--gpa-h2-size);
    font-weight: var(--gpa-h2-weight);
    line-height: var(--gpa-h2-line);
    letter-spacing: var(--gpa-h2-tracking);
    color: var(--gpa-h2-color);
}
html h3:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) {
    font-size: var(--gpa-h3-size);
    font-weight: var(--gpa-h3-weight);
    line-height: var(--gpa-h3-line);
    color: var(--gpa-h3-color);
}
html h4:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) {
    font-size: var(--gpa-h4-size);
    font-weight: var(--gpa-h4-weight);
    line-height: var(--gpa-h4-line);
    color: var(--gpa-h4-color);
}
small, figcaption, .wp-element-caption {
    font-size: var(--gpa-small-size);
    line-height: var(--gpa-small-line);
    color: var(--gpa-text-muted);
}

/* ============================================
   Standard form controls (inputs, selects, buttons)
   Used for calculator input consistency across all
   templates. Can be overridden per page.
   ============================================ */
.gpa-input,
.entry-content input[type="number"],
.entry-content input[type="text"],
.entry-content select:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) {
    font-family: var(--gpa-font);
    font-size: var(--gpa-input-font-size);
    padding: var(--gpa-input-padding);
    border: var(--gpa-input-border);
    border-radius: var(--gpa-input-radius);
    background: var(--gpa-bg-white);
    color: var(--gpa-text-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gpa-input:focus,
.entry-content input[type="number"]:focus,
.entry-content input[type="text"]:focus,
.entry-content select:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):focus {
    outline: none;
    border-color: var(--gpa-border-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gpa-blue-600) 15%, transparent);
}

.gpa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gpa-font);
    font-size: var(--gpa-btn-font-size);
    font-weight: var(--gpa-btn-font-weight);
    padding: var(--gpa-btn-padding);
    border-radius: var(--gpa-btn-radius);
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.gpa-btn-primary {
    background: var(--gpa-primary);
    color: var(--gpa-white);
}
.gpa-btn-primary:hover { background: var(--gpa-primary-dark); }
.gpa-btn-primary:active { transform: translateY(1px); }

/* ============================================
   Ad-slot space reservation (T6.4)
   Freestar ads (T10.1) load asynchronously and would shift the page
   when they pop in. Wrap every ad container in .gpa-ad-slot + a size
   modifier so the space is reserved up-front → no CLS once ads go live.
   min-height matches the standard Freestar/IAB unit for that slot.
   Markup example:  <div class="gpa-ad-slot gpa-ad-slot--rectangle">…</div>
   ============================================ */
.gpa-ad-slot {
    display: block;
    margin: var(--gpa-gap-lg) auto;
    text-align: center;
    overflow: hidden;
}
.gpa-ad-slot--leaderboard   { min-height: 90px; }   /* 728x90  desktop leaderboard */
.gpa-ad-slot--rectangle     { min-height: 250px; }  /* 300x250 medium rectangle    */
.gpa-ad-slot--mobile-banner { min-height: 50px; }   /* 320x50  mobile banner       */
@media (max-width: 768px) {
    /* Mobile leaderboards collapse to a 320x100 large mobile banner */
    .gpa-ad-slot--leaderboard { min-height: 100px; }
} 
#root:empty {
    display: grid;
    place-items: center;
    background: var(--gpa-bg-gray-50);
    border-radius: var(--gpa-radius-lg);
}
#root:empty::after {
    content: "";
    width: 44px;
    height: 44px;
    border: 4px solid var(--gpa-border);
    border-top-color: var(--gpa-primary);
    border-radius: 50%;
    animation: gpa-root-spin 0.8s linear infinite;
}
@keyframes gpa-root-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  :root { --gpa-calc-pad: 16px; --gpa-calc-row-gap: 16px; --gpa-calc-field-gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    #root:empty::after { animation: none; }
}
/* Legacy (Tailwind) calculators only: GeneratePress's button hover/focus colours, reset per Tailwind class. The core
   calculator (.calc-mounted, .gpacalc-mount) owns its own button reset, so none of these reach it (zero added specificity). */
/* --- text colour ---------------------------------------------------------- */
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):not([class*="hover:text-"]):focus { color: inherit; }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-white:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-white:not([class*="hover:text-"]):focus { color: var(--gpa-white); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-500:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-500:not([class*="hover:text-"]):focus { color: var(--gpa-text-muted); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-600:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-600:not([class*="hover:text-"]):focus { color: var(--gpa-text-secondary); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-700:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-700:not([class*="hover:text-"]):focus { color: var(--gpa-text); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-900:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-gray-900:not([class*="hover:text-"]):focus { color: var(--gpa-text-strong); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-blue-600:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-blue-600:not([class*="hover:text-"]):focus { color: var(--gpa-primary); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-red-500:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-red-500:not([class*="hover:text-"]):focus { color: var(--gpa-red-500); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-red-600:not([class*="hover:text-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).text-red-600:not([class*="hover:text-"]):focus { color: var(--gpa-red-600); }
 
/* --- background colour ---------------------------------------------------- */
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):not([class*="hover:bg-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):not([class*="hover:bg-"]):focus { background-color: transparent; }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-white:not([class*="hover:bg-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-white:not([class*="hover:bg-"]):focus { background-color: var(--gpa-surface); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-gray-100:not([class*="hover:bg-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-gray-100:not([class*="hover:bg-"]):focus { background-color: var(--gpa-gray-100); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-gray-200:not([class*="hover:bg-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-gray-200:not([class*="hover:bg-"]):focus { background-color: var(--gpa-gray-200); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-blue-600:not([class*="hover:bg-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-blue-600:not([class*="hover:bg-"]):focus { background-color: var(--gpa-primary); }
 
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-red-500:not([class*="hover:bg-"]):hover,
:where(#root) button:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)).bg-red-500:not([class*="hover:bg-"]):focus { background-color: var(--gpa-red-500); }
/* COLLEGE GPA CALCULATOR STYLE END */

/* Breadcrumb and table of contents: layout.css */

/* ==== layout.css ==== */
/* ============================================================
   layout.css — page frame for every template (design system overhaul)
   Loads on every page, right after gpa-design-tokens.css.
   Holds: page background, content column, hero, nav, footer, section
   header spacing (moved from Simple CSS), breadcrumb, table of contents.
   Colors and sizes come only from var(--gpa-*) tokens.
   Phase 1 (2026-10-02): file created and enqueued; rules arrive in phases 3–4.
   ============================================================ */

/* Templates that use the article column: calculator pages, content pages
   (registered template, the older unregistered one, and the body class the
   theme adds) and blog posts. */

/* ---------- 1. Page background and the white content column ---------- */
body {
    background-color: var(--gpa-page-bg) !important;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) :is(.site-content, .site-main, .inside-article) {
    background-color: transparent !important;
}
/* On calculator pages the card rises --rx-card-overlap into the hero, so the
   column's white starts where the hero ends. */
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content {
    max-width: var(--gpa-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: linear-gradient(to bottom, transparent var(--rx-card-overlap, 0px), var(--gpa-surface) var(--rx-card-overlap, 0px)) !important;
    border-radius: 0 0 var(--gpa-column-radius) var(--gpa-column-radius);
    padding-bottom: var(--gpa-hdr-above);
}
@media (max-width: 940px) {
    :is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content {
        border-radius: 0;
    }
}

/* Calculator, tables, media, charts: full column width */
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content :is(#root, table, .wp-block-table, figure, .wp-block-image, iframe, canvas, svg):not(#root *, .gpacalc-mount *) {
    max-width: 100%;
}

/* Text blocks: 800px, centred inside the column (ad slots are not text, so they keep the full width) */
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6, div.wp-block-heading, .gpa-callout, .gpa-takeaways, .rx-faqwrap, .rank-math-block, .wp-block-rank-math-toc-block, .gpa-sources, .gpa-jump):not(#root *, .gpacalc-mount *, .gpa-jump *) {
    max-width: var(--gpa-text-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Text inset: 40px of white either side of the text from 641px up, 20px on phones */
@media (min-width: 641px) {
    :is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) :is(.entry-content, .entry-content .rx-sec, .entry-content .rx-about) > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6, div.wp-block-heading, .gpa-callout, .gpa-takeaways, .rx-faqwrap, .rank-math-block, .wp-block-rank-math-toc-block, .gpa-sources, .gpa-jump):not(#root *, .gpacalc-mount *, .gpa-jump *) {
        max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important;
    }
}
@media (max-width: 640px) {
    /* Phones: the column is the screen and has no padding of its own (GPA_COLUMN_TIERS in style.css), so the content area
       carries the 20px side padding. Text, tables, columns and boxes all sit 20px in; calculators pull out to 14px
       (calculator-page.css). Not the homepage: its bands are full-bleed by design. */
    :is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post):not(.home) .entry-content {
        box-sizing: border-box !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    :is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post):not(.home) .entry-content figure.wp-block-table {
        overflow-x: auto;
    }
}
/* Tablets (641-880px): the 800px column reaches the screen edges, so the content area carries the 40px inset itself
   (tables, columns and boxes included) and text fills it; calculators pull back out to the column edges (calculator-page.css). */
@media (min-width: 641px) and (max-width: 880px) {
    :is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post):not(.home) .entry-content {
        box-sizing: border-box !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    :is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post):not(.home) :is(.entry-content, .entry-content .rx-sec, .entry-content .rx-about) > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6, div.wp-block-heading, .gpa-callout, .gpa-takeaways, .rx-faqwrap, .rank-math-block, .wp-block-rank-math-toc-block, .gpa-sources, .gpa-jump):not(#root *, .gpacalc-mount *, .gpa-jump *) {
        max-width: 100% !important;
    }
    :is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post):not(.home) .entry-content figure.wp-block-table {
        overflow-x: auto;
    }
}

/* ---------- 2. Article text ---------- */
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content :is(p, li):not(#root *, .gpacalc-mount *) {
    font-size: var(--gpa-body-size) !important;
    line-height: var(--gpa-body-line) !important;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content p:not(#root *, .gpacalc-mount *) {
    margin-top: 0 !important;
    margin-bottom: var(--gpa-p-gap) !important;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content li:not(#root *, .gpacalc-mount *) {
    margin-bottom: var(--gpa-li-gap) !important;
}
#primary #main .entry-content h3:not(#root *, .gpacalc-mount *) {
    margin-top: var(--gpa-h3-above) !important;
    margin-bottom: var(--gpa-h3-below) !important;
}
#primary #main .entry-content h4:not(#root *, .gpacalc-mount *) {
    margin-top: var(--gpa-h4-above) !important;
    margin-bottom: var(--gpa-h4-below) !important;
}
/* :not(#gpa-x) lifts these over the h3/h4 rules above, whose :not(#root *) counts as an id */
#primary #main .entry-content :is(.rx-card, .rx-relcard, .rank-math-list-item, .wp-block-column) > :is(h3, h4):first-child:not(#gpa-x) {
    margin-top: 0 !important;
}
#primary #main .entry-content .rx-relcard > h3:not(#gpa-x) { margin-bottom: 6px !important; }

/* ---------- 3. Section rhythm ---------- */
:is(body.page-template-template-calculator:not(:where(.home)), body.page-template-template-content, body.page-template-gpa-content-page, body.gpa-template-content, body.single-post) .entry-content > :is(.rx-sec, .wp-block-group):not(:last-child) {
    margin-bottom: var(--gpa-block-gap) !important;
}

/* ---------- 4. Section headers ----------
   Moved from the Simple CSS box (2026-10-02), same system, values from tokens.
   Header = [pill] + H2 [+ subtitle]. The pill is optional and goes away in phase 6.
   Spacer blocks touching a header are ignored, so the editor can't break the rhythm. */

/* Space ABOVE the header: on the pill if there is one, otherwise on the H2 */
#primary #main .entry-content :is(p.rx-eyebrow, h2:not(p.rx-eyebrow + h2, p.rx-eyebrow + .wp-block-spacer + h2)):not(:first-child):not(#root *) { margin-top: var(--gpa-sec-gap) !important; }
/* ...a header that only has a spacer above it still starts its block */
#primary #main .entry-content .wp-block-spacer:first-child + :is(p.rx-eyebrow, h2) { margin-top: 0 !important; }
/* ...old React calculators carry their own bottom padding */
#primary #main .entry-content #root:has(.min-h-screen) + :is(p.rx-eyebrow, h2),
#primary #main .entry-content #root:has(.min-h-screen) + .wp-block-spacer + :is(p.rx-eyebrow, h2) { margin-top: 0 !important; }

/* Tight pill → H2 */
#primary #main .entry-content p.rx-eyebrow { margin-bottom: 0 !important; }
#primary #main .entry-content p.rx-eyebrow + h2:not(#root *),
#primary #main .entry-content p.rx-eyebrow + .wp-block-spacer + h2:not(#root *) { margin-top: 8px !important; }

/* H2 → subtitle, and header → content */
#primary #main .entry-content h2:not(#root *) { margin-bottom: 0 !important; }
#primary #main .entry-content p.rx-sub { margin-bottom: 0 !important; }
#primary #main .entry-content h2:not(#root *) + p.rx-sub,
#primary #main .entry-content h2:not(#root *) + .wp-block-spacer + p.rx-sub { margin-top: var(--gpa-hdr-sub-gap) !important; }
#primary #main .entry-content h2:not(#root *) + :not(p.rx-sub):not(.wp-block-spacer),
#primary #main .entry-content h2:not(#root *) + .wp-block-spacer + :not(p.rx-sub),
#primary #main .entry-content p.rx-sub + :not(.wp-block-spacer),
#primary #main .entry-content p.rx-sub + .wp-block-spacer + * { margin-top: var(--gpa-hdr-below) !important; }

/* Spacer blocks right before or after a header part do nothing */
#primary #main .entry-content .wp-block-spacer:has(+ :is(p.rx-eyebrow, h2, p.rx-sub)),
#primary #main .entry-content :is(p.rx-eyebrow, h2, p.rx-sub) + .wp-block-spacer { height: 0 !important; margin: 0 !important; }

/* A header that is the first thing in its card/section gets no top margin */
#primary #main .entry-content :is(.rx-sec, .rx-card) > :is(p.rx-eyebrow, h2):first-child { margin-top: 0 !important; }
/* The section right after the calculator sits the standard header distance below it */
#primary #main .entry-content > #root + .rx-sec { margin-top: var(--gpa-sec-gap) !important; }
#primary #main .entry-content > #root + .rx-sec > .rx-card:first-child { padding-top: 0 !important; }

/* Headers are left-aligned on content templates (the hero stays centred).
   Overrides the block editor's has-text-align-center class; no content edits. */
body:not(.home) #primary #main .entry-content :is(h2, h2.rx-h2, p.rx-sub, p.rx-eyebrow):not(#root *, .gpacalc-mount *) {
    text-align: left !important;
}
/* Pills sit on the text column's left edge, like the heading under them */
#primary #main .entry-content p.rx-eyebrow { margin-left: max(0px, calc((100% - var(--gpa-text-max)) / 2)) !important; margin-right: auto !important; }

/* ---------- 5. Odds and ends moved from Simple CSS ---------- */
.university-gpa-intro { margin-bottom: 40px; }
@media (max-width: 768px) {
    .university-gpa-intro { margin-bottom: 28px; }
}
/* ---------- 6. Hero (calculator and content templates) ----------
   One design: light glossy blue band, flat bottom, breadcrumb, navy title,
   one subtitle line. The band is .entry-header::after, full viewport width,
   running --rx-hero-tail past the header. On calculator pages the card rises
   --rx-card-overlap into that tail. */
body.page-template-template-calculator:not(:where(.home)).page-template-template-calculator {
    --rx-hero-tail: var(--gpa-hero-tail);
    --rx-card-overlap: var(--gpa-hero-overlap);
}
body.gpa-hero-band.gpa-hero-band {
    --rx-hero-tail: var(--gpa-hero-tail-plain);
    --rx-card-overlap: 0px;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) {
    overflow-x: clip;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) :is(.inside-article, .site-main) {
    position: relative;
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* html: beats calculator bundles' page-id header padding (high-school-gpa-calc.css) */
html :is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .entry-header {
    position: relative;
    z-index: 0;
    padding: var(--gpa-hero-pad-top) 20px 0 !important;
    margin-bottom: 0;
    text-align: center;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .entry-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100% + var(--rx-hero-tail));
    z-index: 0;
    pointer-events: none;
    background: var(--gpa-hero-bg);
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .entry-header > * {
    position: relative;
    z-index: 1;
}
/* .entry-header > beats the generic 24px title margin in content-styles.css */
html :is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .inside-article .entry-header > h1.entry-title {
    color: var(--gpa-hero-title) !important;
    text-align: center !important;
    margin: 0 auto var(--gpa-hero-title-gap) !important;
}
@media (max-width: 768px) {
    html :is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .inside-article .entry-header > h1.entry-title {
        font-size: var(--gpa-hero-title-size-m) !important;
    }
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .entry-header .rx-hero-intro {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
html :is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .entry-header .rx-hero-intro p {
    margin: 0 !important;
    color: var(--gpa-hero-text) !important;
    font-size: var(--gpa-hero-sub-size) !important;
    line-height: 1.5 !important;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .entry-header .rx-hero-intro a {
    color: var(--gpa-link) !important;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) .entry-header .rx-hero-intro strong {
    color: var(--gpa-hero-title) !important;
}
/* Homepage: the hero is a block group (.gpa-hero) holding the title, the
   subtitle and the calculator. Same band; below the card's top + overlap a
   page-colored layer covers it, so the card rises into the band the same way. */
html body .gpa-hero {
    position: relative;
    isolation: isolate;
    /* Clip sideways only (the full-width layer below); clipping down cut off the calculator's Options panel. */
    overflow: visible;
    overflow-x: clip;
    background: var(--gpa-hero-bg) !important;
    padding: var(--gpa-hero-pad-top) 20px var(--gpa-hdr-above) !important;
}
html body .gpa-hero > #root { position: relative; }
html body .gpa-hero > #root::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: var(--gpa-hero-overlap);
    bottom: calc(-1 * var(--gpa-hdr-above));
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--gpa-page-bg);
    pointer-events: none;
}
html body .gpa-hero .gpa-hero-title {
    font-size: var(--gpa-h1-size) !important;
    line-height: var(--gpa-h1-line) !important;
    color: var(--gpa-hero-title) !important;
    margin: 0 auto var(--gpa-hero-title-gap) !important; /* 12px, 8px on phones (Standard, Page hero) */
}
html body .gpa-hero .gpa-hero-sub {
    max-width: 640px;
    margin: 0 auto calc(var(--gpa-hero-tail) - var(--gpa-hero-overlap)) !important;
    font-size: var(--gpa-hero-sub-size) !important;
    line-height: 1.5 !important;
    color: var(--gpa-hero-text) !important;
}
html body .gpa-hero .gpa-hero-trust { color: var(--gpa-hero-text) !important; }
/* Under the homepage calculator (Digant 2026-10-04 06:21, 06:36): only 24px of page colour, then the first white band
   opens with the "On this page" row; nothing between the calculator and the row. The ads stay where they are. */
html body .gpa-hero { padding-bottom: 24px !important; }
html body .gpa-hero > #root::before { bottom: -24px; }
html body .gpa-hero + .gpa-sec-white { padding-top: 24px !important; }
/* Same width as the band's paragraphs (750px on the homepage), so the row lines up with the text */
html body #page .entry-content :is(.gpa-sec-white, .gpa-sec-gray) > details.gpa-toc { max-width: 750px !important; }
@media (max-width: 640px) {
    /* Phones: the homepage bands are full-bleed, so their text needs its own 20px inset (it touched the screen edge) */
    html body.home .entry-content > :is(.gpa-sec-white, .gpa-sec-gray) { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 767px) {
    html body .gpa-hero :is(.gpa-hero-title, .gpa-hero-sub) { padding-left: 16px !important; padding-right: 16px !important; }
}

/* College pages keep their own hero layout (admissions templates) but use
   the same band and title colors. "html body" beats database-page.css,
   which loads later; the hero's inline background (college photo or
   gradient) is replaced too. */
html body :is(.db-hero, .db-archive-hero) {
    background: var(--gpa-hero-bg) !important;
}
html body .db-hero {
    border: 1px solid var(--gpa-border) !important;
    box-shadow: none !important;
}
html body :is(.db-hero__overlay, .db-hero-overlay, .db-archive-hero__overlay, .db-archive-hero__bg, .db-hero-bg) {
    display: none !important;
}
html body :is(.db-hero__title, .db-hero-title, .db-archive-hero__title) {
    color: var(--gpa-hero-title) !important;
}
html body :is(.db-hero__location, .db-hero-location, .db-archive-hero__subtitle) {
    color: var(--gpa-hero-text) !important;
}
html body .db-archive-hero__stat { color: var(--gpa-hero-title) !important; }
html body .db-archive-hero__stat-divider { background: var(--gpa-border-strong) !important; }

/* Calculator card rises into the hero: the column starts --rx-card-overlap
   above the band's end, and its white begins exactly there (section 2). */
body.page-template-template-calculator:not(:where(.home)).page-template-template-calculator .entry-content {
    margin-top: calc(var(--rx-hero-tail) - var(--rx-card-overlap)) !important;
}
body.page-template-template-calculator:not(:where(.home)).page-template-template-calculator #root {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
}
/* Content pages, and calculator pages without a #root card (older plugin
   calculators), start where the band ends, with room above the first block */
body.page-template-template-calculator:not(:where(.home)).page-template-template-calculator:not(:has(#root)) {
    --rx-hero-tail: var(--gpa-hero-tail-plain);
    --rx-card-overlap: 0px;
}
body.page-template-template-calculator:not(:where(.home)).page-template-template-calculator:not(:has(#root)) .entry-content,
body.gpa-hero-band.gpa-hero-band .entry-content {
    margin-top: var(--rx-hero-tail) !important;
    padding-top: var(--gpa-hero-tail-plain);
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) #primary #main .entry-content > :is(h2, p.rx-eyebrow):first-child {
    margin-top: 0 !important;
}

/* ---------- 7. Breadcrumb ----------
   Printed once per page, above the H1 in the hero (functions.php
   gpa_hero_breadcrumb; college pages print their own). */
.gpa-breadcrumb {
    font-size: 14px;
    line-height: 1.4;
}
.gpa-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.gpa-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0 !important;
}
.gpa-breadcrumb__item + .gpa-breadcrumb__item::before {
    content: "/";
    margin: 0 8px;
    color: var(--gpa-breadcrumb-sep);
    flex: none;
}
html .gpa-breadcrumb a.gpa-breadcrumb__link {
    color: var(--gpa-link) !important;
    text-decoration: none !important;
    font-weight: 400;
}
html .gpa-breadcrumb a.gpa-breadcrumb__link:hover {
    color: var(--gpa-primary) !important;
}
.gpa-breadcrumb__current {
    color: var(--gpa-breadcrumb-current);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}
/* College pages print it above their own hero, on the page width */
.gpa-breadcrumb:not(.entry-header *) {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 16px 0;
}
/* College pages: lay it over the top of their hero, like the other pages
   (centred on the /admissions/ hub, left-aligned in a college's hero card) */
html body .db-archive-page,
html body .db-college-profile { position: relative; }
html body .db-archive-page > .gpa-breadcrumb,
html body .db-college-profile > .gpa-breadcrumb {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
}
html body .db-archive-page > .gpa-breadcrumb { top: 0; padding: 22px 24px 0; }
html body .db-archive-page > .gpa-breadcrumb .gpa-breadcrumb__list { justify-content: center; }
html body .db-archive-page > .db-archive-hero { padding-top: 100px !important; }
html body .db-college-profile > .gpa-breadcrumb { top: 0; padding: 22px 33px 0; }
html body .db-college-profile > .db-hero { padding-top: 36px !important; }
@media (max-width: 768px) {
    html body .db-archive-page > .gpa-breadcrumb { padding: 18px 16px 0; }
    html body .db-archive-page > .db-archive-hero { padding-top: 72px !important; }
    html body .db-college-profile > .gpa-breadcrumb { padding: 18px 25px 0; }
    html body .db-college-profile > .db-hero { padding-top: 32px !important; }
}
/* In the hero: centred, above the title */
.entry-header .gpa-breadcrumb {
    margin: 0 auto var(--gpa-hero-crumb-gap);
}
.entry-header .gpa-breadcrumb__list {
    justify-content: center;
}
@media (max-width: 768px) {
    .gpa-breadcrumb { font-size: 13px; }
}
@media (max-width: 480px) {
    .gpa-breadcrumb__item:has(.gpa-breadcrumb__current) { display: none; }
}

/* Blog posts: author line under the title, quiet like the subtitle */
body.single-post.gpa-hero-band .entry-header .entry-meta {
    margin-top: 0;
    color: var(--gpa-hero-text);
    font-size: var(--gpa-small-size);
}

/* ---------- 8. Header, logo and nav ----------
   White bar with a 1px line; 72px tall (60px on phones). Logo = "4.0" badge
   (inline SVG, functions.php gpa_logo_badge) + live wordmark. */
.site-header {
    background: var(--gpa-surface) !important;
    border-bottom: 1px solid var(--gpa-border) !important;
    box-shadow: none !important;
}
.site-header .inside-header {
    min-height: 72px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center;
}
.site-header .site-logo { line-height: 0; margin-right: 0 !important; }
.site-header .site-logo a { display: inline-flex; }
.gpa-logo-badge {
    display: block;
    width: 36px;
    height: 36px;
}
.gpa-logo-badge .gpa-logo-badge__from { stop-color: var(--gpa-blue-600); }
.gpa-logo-badge .gpa-logo-badge__to { stop-color: var(--gpa-indigo-700); }
.gpa-logo-badge text {
    fill: var(--gpa-white);
    font-family: var(--gpa-font);
    font-weight: 800;
    letter-spacing: -0.03em;
}
/* Light sheen on the badge (Digant 2026-10-06): once on load (about 1s), again on hover or keyboard focus, never
   looping. Two bands so leaving the logo never replays the load sweep: the load band animates once, the hover band
   only while hovered and snaps back out of view (it sits outside the clip) when the pointer leaves. */
.gpa-logo-sheen {
    transform: translate(0, 0);
    transform-box: view-box;
    pointer-events: none;
}
.gpa-logo-sheen--load { animation: gpa-logo-sheen 1s ease-in-out 0.25s 1 backwards; }
.site-logo a:is(:hover, :focus-visible) .gpa-logo-sheen--hover { animation: gpa-logo-sheen 1s ease-in-out 1 backwards; }
@keyframes gpa-logo-sheen {
    from { transform: translate(28px, 28px); }  /* band just off the top-left corner */
    to { transform: translate(80px, 80px); }  /* just off the bottom-right */
}
@media (prefers-reduced-motion: reduce) {
    .gpa-logo-sheen { animation: none !important; visibility: hidden; }
}
.site-header .site-branding-container { align-items: center; }
.site-header .site-logo + .site-branding { margin-left: 10px; }
.site-header .main-title {
    margin: 0;
    font-family: var(--gpa-font) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}
.site-header .main-title a,
.site-header .main-title a:hover {
    color: var(--gpa-text-strong) !important;
    text-decoration: none !important;
}
.site-header .main-title .gpa-wordmark-accent { color: var(--gpa-primary); }

.main-navigation a,
.main-navigation .main-nav a {
    font-family: var(--gpa-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--gpa-text) !important;
    text-decoration: none !important;
    transition: color .15s ease, background-color .15s ease;
}
.main-navigation .main-nav ul li a { padding: 0 !important; }
.main-navigation .main-nav ul li.menu-item-has-children > a { padding-left: 0 !important; }
.menu-item-has-children .dropdown-menu-toggle { padding-right: 0 !important; }
#menu-top-nav { gap: 25px; }
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li > a:focus-visible,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    color: var(--gpa-primary) !important;
}
.main-navigation .sub-menu {
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--gpa-black) 10%, transparent) !important;
    min-width: 260px !important;
}
.main-navigation #menu-top-nav .sub-menu li a {
    display: block !important;
    padding: 0.625rem !important;
    font-size: 14px !important;
    line-height: 1.25rem !important;
    color: var(--gpa-text) !important;
}
@media (min-width: 769px) {
    .main-navigation .main-nav > ul { column-gap: 4px !important; margin-right: -12px !important; }
    .main-navigation .main-nav > ul > li > a,
    .main-navigation .main-nav > ul > li.menu-item-has-children > a {
        line-height: 40px !important;
        margin: 16px 0 !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
    }
    .main-navigation .sub-menu { padding: 6px !important; }
    .main-navigation .main-nav .sub-menu li a {
        padding: 9px 12px !important;
        border-radius: 8px !important;
        background: transparent !important;
    }
    .main-navigation .main-nav .sub-menu li a:hover,
    .main-navigation .main-nav .sub-menu li a:focus-visible {
        background-color: var(--gpa-tint-blue) !important;
        color: var(--gpa-primary) !important;
    }
}
@media (max-width: 768px) {
    .site-header .inside-header {
        min-height: 60px;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .gpa-logo-badge { width: 30px; height: 30px; }
    .site-header .site-logo + .site-branding { margin-left: 8px; }
    .site-header .main-title { font-size: 17px !important; }
    .mobile-menu-control-wrapper .menu-toggle,
    .mobile-menu-control-wrapper .menu-toggle:hover,
    .mobile-menu-control-wrapper .menu-toggle:focus {
        background: transparent !important;
        color: var(--gpa-text-strong) !important;
    }
    .has-inline-mobile-toggle #site-navigation.toggled {
        background: var(--gpa-surface) !important;
        border-top: 1px solid var(--gpa-divider);
    }
}

/* ---------- 9. Footer ----------
   One block for every template (was copied in style.css, gpa-homepage.css
   and database-page.css). Deep navy; widget content stays as it is. */
.site-footer,
.site-footer .footer-widgets,
.site-footer .site-info {
    background: var(--gpa-footer-bg) !important;
    color: var(--gpa-footer-link) !important;
    font-family: var(--gpa-font) !important;
}
.site-footer .footer-widgets { padding: 3rem 0 !important; }
.site-footer .footer-widgets .widget { color: var(--gpa-footer-link) !important; }
.site-footer .footer-widgets .widget-title,
.site-footer .footer-widgets h2 {
    font-family: var(--gpa-font) !important;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: var(--gpa-footer-text) !important;
    margin: 0 0 16px !important;
}
.site-footer .footer-widgets a {
    color: var(--gpa-footer-link) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: color .15s ease;
}
.site-footer .footer-widgets a:hover { color: var(--gpa-footer-text) !important; }
.site-footer .footer-widgets ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.site-footer .footer-widgets li {
    margin: 0 0 8px !important;
    font-size: 14px !important;
    line-height: 20px !important;
}
.site-footer .site-info {
    border-top: 1px solid var(--gpa-footer-line) !important;
    padding: 24px 0 !important;
    text-align: center !important;
    color: var(--gpa-footer-accent) !important;
    font-size: 14px !important;
}
.site-footer .site-info :is(a, .copyright-bar) {
    color: var(--gpa-footer-accent) !important;
    text-decoration: none !important;
}
/* College templates zero every .grid-container's padding; the footer keeps the site width */
html body .site-footer .grid-container {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}
/* Freestar's privacy-manager link prints after the footer: same band */
.gpa-cmp-link {
    background: var(--gpa-footer-bg);
    color: var(--gpa-footer-accent);
}
#pmLink:hover { color: var(--gpa-footer-accent) !important; }
@media (max-width: 768px) {
    .site-footer .footer-widgets { padding: 40px 0 !important; }
    html body .site-footer .grid-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ---------- 10. Section numbers ----------
   Content H2s are numbered 01, 02, 03 with a CSS counter; the number is
   not part of the heading text.
   The number sits in a tinted --gpa-tint-indigo square (Digant 2026-10-04: keep the locked-in look),
   with a hanging indent so a wrapped line starts under the text.
   Not numbered: the hero H1, widget H2s, anything inside a calculator,
   an H2 given the class gpa-no-number, and an H2 gpa_toc() leaves out
   (data-gpa-toc="skip": FAQ, related tools, sources), so the numbers match
   the "On this page" list. The TOC (section 11) lists the
   same headings, so its numbers always match. Blog posts are numbered
   only when they have a TOC. */
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band:not(.single-post)) .entry-content,
body.single-post .entry-content:has(.wp-block-rank-math-toc-block) {
    counter-reset: gpa-sec;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band:not(.single-post)) .entry-content h2:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .widget *, .gpa-no-number, [data-gpa-toc="skip"]),
body.single-post .entry-content:has(.wp-block-rank-math-toc-block) > h2:not(.gpa-no-number, [data-gpa-toc="skip"]) {
    counter-increment: gpa-sec;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band:not(.single-post)) .entry-content h2:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .widget *, .gpa-no-number, [data-gpa-toc="skip"]),
body.single-post .entry-content:has(.wp-block-rank-math-toc-block) > h2:not(.gpa-no-number, [data-gpa-toc="skip"]) {
    /* Hanging indent: a wrapped second line starts under the text, not under the number */
    padding-left: 54px !important; /* 40px square + 14px gap */
    box-sizing: border-box !important; /* the number column stays inside the text column (college H2s were content-box) */
    text-indent: -54px;
}
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band:not(.single-post)) .entry-content h2:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .widget *, .gpa-no-number, [data-gpa-toc="skip"])::before,
body.single-post .entry-content:has(.wp-block-rank-math-toc-block) > h2:not(.gpa-no-number, [data-gpa-toc="skip"])::before {
    /* Number in a tinted square (Digant 2026-10-04 05:50: the locked-in look) */
    content: counter(gpa-sec, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -4px;
    width: 40px;
    height: 40px;
    margin: 0 14px 0 0;
    text-indent: 0;
    border-radius: 10px;
    background: var(--gpa-tint-indigo);
    color: var(--gpa-accent);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}
@media (max-width: 768px) {
    :is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band:not(.single-post)) .entry-content h2:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .widget *, .gpa-no-number, [data-gpa-toc="skip"]),
    body.single-post .entry-content:has(.wp-block-rank-math-toc-block) > h2:not(.gpa-no-number, [data-gpa-toc="skip"]) { padding-left: 44px !important; text-indent: -44px; }
    :is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band:not(.single-post)) .entry-content h2:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .widget *, .gpa-no-number, [data-gpa-toc="skip"])::before,
    body.single-post .entry-content:has(.wp-block-rank-math-toc-block) > h2:not(.gpa-no-number, [data-gpa-toc="skip"])::before { width: 32px; height: 32px; margin-right: 12px; border-radius: 8px; font-size: 15px; top: -3px; }
}
/* A heading block made flex by older rules would split the number from the text */
:is(body.page-template-template-calculator:not(:where(.home)), body.gpa-hero-band) #primary #main .entry-content h2.rx-h2 { display: block !important; }

/* ---------- 11. Table of contents (Rank Math TOC block) ----------
   Outline box, "On this page" title, numbered items matching the section
   numbers. */
#page .entry-content .wp-block-rank-math-toc-block {
    max-width: var(--gpa-text-max);
    margin: var(--gpa-hdr-below) auto 0 !important;
    padding: 18px 24px !important;
    background: none !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#page .entry-content .wp-block-rank-math-toc-block > :is(h2, h3, h4, p, div):first-child {
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: var(--gpa-heading) !important;
    text-align: left !important;
}
#page .entry-content .wp-block-rank-math-toc-block :is(ul, ol) {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    counter-reset: gpa-toc;
}
#page .entry-content .wp-block-rank-math-toc-block :is(ul, ol) :is(ul, ol) { display: none; }
#page .entry-content .wp-block-rank-math-toc-block li {
    counter-increment: gpa-toc;
    display: flex;
    gap: 14px;
    margin: 0 !important;
    padding: 9px 0 !important;
    border-top: 1px solid var(--gpa-divider);
    font-size: 16px !important;
    line-height: 1.45 !important;
}
#page .entry-content .wp-block-rank-math-toc-block li:first-child { border-top: 0; }
#page .entry-content .wp-block-rank-math-toc-block li::before {
    content: counter(gpa-toc, decimal-leading-zero);
    position: static;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gpa-tint-indigo);
    color: var(--gpa-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
#page .entry-content .wp-block-rank-math-toc-block li { align-items: center; }
#page .entry-content .wp-block-rank-math-toc-block li a {
    color: var(--gpa-text) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}
#page .entry-content .wp-block-rank-math-toc-block li a:hover { color: var(--gpa-primary) !important; }

/* ---------- 11b. "On this page", collapsed (Design System spec, Digant 2026-10-03) ----------
   Core Details block wrapping the Rank Math TOC block (class gpa-toc), so the links stay server-rendered and Rank Math
   stays the source of the list and its schema. Collapsed by default at every width; one column when open; no box.
   A page opts in by wrapping its TOC block; pages without the wrapper keep the box above. */
#page .entry-content details.wp-block-details.gpa-toc {
    box-sizing: border-box;
    max-width: var(--gpa-text-max) !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--gpa-divider);
    border-bottom: 1px solid var(--gpa-divider);
    background: none !important;
}
@media (min-width: 641px) {
    /* Same inset as the text, also when the row sits inside a section wrapper (after the calculator on High School GPA) */
    #page .entry-content :is(.rx-sec, .rx-about) > details.wp-block-details.gpa-toc,
    #page .entry-content > details.wp-block-details.gpa-toc { max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; }
}
@media (min-width: 641px) and (max-width: 880px) {
    #page .entry-content :is(.rx-sec, .rx-about) > details.wp-block-details.gpa-toc,
    #page .entry-content > details.wp-block-details.gpa-toc { max-width: 100% !important; }
}
/* Exactly 24px above the row and 24px from its bottom line to the first content below (Digant 20:39, every page).
   The neighbours' own margins are zeroed so nothing collapses into a bigger gap. */
#page #primary #main .entry-content details.wp-block-details.gpa-toc:not(#gpa-x) { margin-top: 24px !important; margin-bottom: 0 !important; }
#page #primary #main .entry-content :has(+ details.wp-block-details.gpa-toc):not(#gpa-x) { margin-bottom: 0 !important; }
#page #primary #main .entry-content details.wp-block-details.gpa-toc + :not(#gpa-x) { margin-top: 24px !important; }
#page #primary #main .entry-content details.wp-block-details.gpa-toc + :not(#gpa-x) > :is(h2, .wp-block-heading):first-child:not(#gpa-x) { margin-top: 0 !important; }
/* College-style pages open with an unboxed .rx-about wrapper whose 24px top padding doubled the gap under the row */
#page #primary #main .entry-content details.wp-block-details.gpa-toc + :not(#gpa-x) > .rx-about:first-child:not(#gpa-x) { padding-top: 0 !important; margin-top: 0 !important; }
#page #primary #main .entry-content details.wp-block-details.gpa-toc + :not(#gpa-x) > .rx-about:first-child > :is(h2, .wp-block-heading):first-child:not(#gpa-x) { margin-top: 0 !important; }
#page .entry-content details.gpa-toc > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px; /* + the row's 1px lines above and below = 52px */
    padding: 0 !important;
    list-style: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gpa-text-strong);
    transition: color .15s ease;
}
/* Plain text row, not a form control: the whole row is the tap target; label and count turn link blue on hover */
@media (hover: hover) { /* a tap must not leave the label blue on phones */
    #page .entry-content details.gpa-toc > summary:hover,
    #page .entry-content details.gpa-toc > summary:hover .gpa-toc__count { color: var(--gpa-link); }
}
#page .entry-content details.gpa-toc > summary::-webkit-details-marker { display: none; }
#page .entry-content details.gpa-toc > summary::marker { content: ""; }
#page .entry-content details.gpa-toc > summary .gpa-toc__count { font-weight: 400; color: var(--gpa-text-muted); }
/* 16px chevron in --gpa-link right after the text (summary gap 8px), no circle or background; Masked so it takes the link colour token. */
#page .entry-content details.gpa-toc > summary::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: var(--gpa-link);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
    transition: transform .15s ease;
}
#page .entry-content details.gpa-toc[open] > summary::after { transform: rotate(180deg); }
#page .entry-content details.gpa-toc > summary:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { #page .entry-content details.gpa-toc > summary, #page .entry-content details.gpa-toc > summary::after { transition: none; } }
/* The Rank Math list inside: no box, no second title, numbers in the same tinted square as the H2s; only the heading text is the link */
#page .entry-content details.gpa-toc .wp-block-rank-math-toc-block {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#page .entry-content details.gpa-toc .wp-block-rank-math-toc-block > :is(h2, h3, h4, p, div):first-child { display: none !important; }
/* Every row 44px at every width, text centred in it, so the last row sits as far from the bottom line as the others;
   :not(#gpa-x) beats the content-list margin rule (li margin-bottom) */
#page #main .entry-content details.gpa-toc .wp-block-rank-math-toc-block li:not(#gpa-x) {
    gap: 14px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--gpa-divider);
}
#page .entry-content details.gpa-toc .wp-block-rank-math-toc-block li a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 7px 0; }
/* A link that wraps keeps its number square beside the first line, not centred on both (ui-review 2026-10-04) */
#page #main .entry-content details.gpa-toc .wp-block-rank-math-toc-block li:not(#gpa-x) { align-items: flex-start; }
#page #main .entry-content details.gpa-toc .wp-block-rank-math-toc-block li:not(#gpa-x)::before { flex: none; margin-top: 8px; }
#page .entry-content details.gpa-toc .wp-block-rank-math-toc-block li:first-child { border-top: 0; }
#page .entry-content details.gpa-toc .wp-block-rank-math-toc-block li::before {
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--gpa-tint-indigo);
    color: var(--gpa-accent);
    font-size: 13px;
    font-weight: 700;
}
#page .entry-content details.gpa-toc .wp-block-rank-math-toc-block li a { color: var(--gpa-link) !important; }

/* ==== components.css ==== */
/* ============================================================
   components.css — content blocks for every template (design system overhaul)
   Loads on every page, after layout.css and before the template stylesheet.
   Holds: in-text links, quote, quick facts, table, callouts, formula,
   takeaways, lists, FAQ, related-tool cards, step cards, sources.
   Colors and sizes come only from var(--gpa-*) tokens.

   Selectors start with #page (GeneratePress's page wrapper) so these rules
   win over the older template files that load after this one, without
   each rule needing to know which template it is on. Nothing inside a
   calculator (#root, .gpacalc-mount) is touched.
   ============================================================ */

/* ---------- 1. In-text links ----------
   Plain links in text only; buttons, cards, TOC, breadcrumb, FAQ
   questions, nav and footer keep their own treatment. */
#page .entry-content :is(p, li, td, dd) > a:not([class]):not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .rx-relcard h3 *, .gpa-sources *, .gpa-scale-nav *, .gpa-cta *, .wp-block-button *) {
    color: var(--gpa-link) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--gpa-link-underline) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
}
#page .entry-content :is(p, li, td, dd) > a:not([class]):not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .rx-relcard h3 *, .gpa-sources *, .gpa-scale-nav *, .gpa-cta *, .wp-block-button *):hover {
    color: var(--gpa-link) !important;
    text-decoration-color: var(--gpa-primary) !important;
}

/* ---------- 2. Lists ----------
   Bullets: 6px primary dots, 12px from the text, items 10px apart.
   Numbered: 24px tinted circles with the number in the accent color. */
#page .entry-content ul:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .gpa-takeaways *, .is-style-gpa-takeaways *, .gpa-jumpto-list, .gpa-breadcrumb__list, .blocks-gallery-grid, .wp-block-gallery, .wp-block-social-links, .rank-math-list, nav *) {
    list-style: none !important;
    padding-left: 18px !important;
}
#page .entry-content ul:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .gpa-takeaways *, .is-style-gpa-takeaways *, .gpa-jumpto-list, .gpa-breadcrumb__list, .blocks-gallery-grid, .wp-block-gallery, .wp-block-social-links, .rank-math-list, nav *) > li {
    position: relative;
    display: list-item;
    list-style: none !important;
    margin-bottom: var(--gpa-li-gap) !important;
}
#page .entry-content ul:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .gpa-takeaways *, .is-style-gpa-takeaways *, .gpa-jumpto-list, .gpa-breadcrumb__list, .blocks-gallery-grid, .wp-block-gallery, .wp-block-social-links, .rank-math-list, nav *) > li::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: -18px;
    top: calc(0.85em - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gpa-primary);
}
#page .entry-content ol:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .gpa-sources *, nav *) {
    list-style: none !important;
    padding-left: 36px !important;
    counter-reset: gpa-ol;
}
#page .entry-content ol:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .gpa-sources *, nav *) > li {
    position: relative;
    display: list-item;
    list-style: none !important;
    counter-increment: gpa-ol;
    margin-bottom: var(--gpa-li-gap) !important;
}
#page .entry-content ol:not(#root *, .gpacalc-mount *, .wp-block-rank-math-toc-block *, .gpa-sources *, nav *) > li::before {
    content: counter(gpa-ol) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -36px;
    top: calc(0.85em - 12px);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gpa-tint-indigo);
    color: var(--gpa-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
#page .entry-content :is(ul, ol) > li > :is(ul, ol) { margin-top: var(--gpa-li-gap) !important; }

/* ---------- 3. Quote, quick facts and notes ----------
   Blockquotes do three jobs on this site:
   - with an attribution (<cite> or <footer>): a real quote. No box, a large
     quote mark, 21px navy text.
   - with a list: the "quick facts" box the content rules ask for near the
     top of a page. Light blue card.
   - otherwise: a side note. Same look as the Note callout. */
#page .entry-content blockquote:not(#root *, .gpacalc-mount *) {
    position: relative;
    margin: 0 auto var(--gpa-p-gap) !important;
    padding: 16px 18px !important;
    background: var(--gpa-gray-50) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-style: normal !important;
}
#page .entry-content blockquote:not(#root *, .gpacalc-mount *) > p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--gpa-text) !important;
}
#page .entry-content blockquote:not(#root *, .gpacalc-mount *) > :last-child { margin-bottom: 0 !important; }
/* Quick facts */
#page .entry-content blockquote:has(> :is(ul, ol)):not(#root *, .gpacalc-mount *) {
    padding: 18px 24px !important;
    background: var(--gpa-tint-blue) !important;
    border-color: var(--gpa-blue-100) !important;
}
#page .entry-content blockquote:has(> :is(ul, ol)):not(#root *, .gpacalc-mount *) :is(p, li) {
    font-size: var(--gpa-body-size) !important;
    line-height: var(--gpa-body-line) !important;
}
/* Real quotes */
#page .entry-content blockquote:has(cite, footer):not(#root *, .gpacalc-mount *) {
    padding: 36px 0 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
#page .entry-content blockquote:has(cite, footer):not(#root *, .gpacalc-mount *)::before {
    content: "\201C";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 56px;
    line-height: 1;
    font-weight: 700;
    color: var(--gpa-calc-border);
}
#page .entry-content blockquote:has(cite, footer):not(#root *, .gpacalc-mount *) > p {
    font-size: 21px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: var(--gpa-heading) !important;
}
#page .entry-content blockquote:not(#root *, .gpacalc-mount *) :is(cite, footer) {
    display: block;
    margin-top: 8px;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: var(--gpa-text-muted) !important;
}

/* ---------- 4. Tables ----------
   White box with a 1px border and 12px corners; tinted header row (layer 4 table roles); rows
   divided by 1px lines; numbers line up (tabular). Wide tables scroll
   inside their own box. */
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) {
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-table-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto var(--gpa-hdr-below) !important;
}
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    font-variant-numeric: tabular-nums;
}
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) thead {
    background: var(--gpa-table-head-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gpa-table-border) !important;
}
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) th {
    background: var(--gpa-table-head-bg) !important;
    color: var(--gpa-table-head-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 11px 18px !important;
    border: 0 !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *, .gpa-scale-table) td {
    color: var(--gpa-text) !important;
    font-weight: 400 !important;
}
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) td {
    font-size: 16px !important;
    line-height: 1.45 !important;
    padding: 11px 18px !important;
    border: 0 !important;
    border-top: 1px solid var(--gpa-table-row-line) !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) tbody tr:first-child td { border-top: 0 !important; }
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) tbody tr:hover { background: transparent !important; }
#page .entry-content .rx-table:not(#root *, .rx-scale) :is(th, td):first-child { text-align: left !important; }
/* Column alignment set in the editor (has-text-align-left/-right on th and td) wins over the centered default:
   text columns read left, numbers stay centered (Digant 2026-10-05, /gpa/ tables). */
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) :is(th, td).has-text-align-left { text-align: left !important; }
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) :is(th, td).has-text-align-right { text-align: right !important; }
/* A table with left-aligned text columns reads top-down: rows start on one line, and its note sits on the same left edge. */
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *):has(td.has-text-align-left) td { vertical-align: top !important; }
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *):has(td.has-text-align-left) figcaption { text-align: left !important; }
/* Phones: a two-column text table (Myth | What's true) reads as one card per row: the first cell bold, the second under it */
@media (max-width: 600px) {
    #page #main .entry-content figure.wp-block-table:not(#root *, .gpacalc-mount *):has(> table > tbody > tr > td.has-text-align-left:first-child + td:last-child) :is(table, tbody, tr, td) { display: block !important; width: auto !important; }
    #page #main .entry-content figure.wp-block-table:not(#root *, .gpacalc-mount *):has(> table > tbody > tr > td.has-text-align-left:first-child + td:last-child) thead { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
    #page #main .entry-content figure.wp-block-table:not(#root *, .gpacalc-mount *):has(> table > tbody > tr > td.has-text-align-left:first-child + td:last-child) tr { padding: 12px 16px !important; border-bottom: 1px solid var(--gpa-border) !important; }
    #page #main .entry-content figure.wp-block-table:not(#root *, .gpacalc-mount *):has(> table > tbody > tr > td.has-text-align-left:first-child + td:last-child) tr:last-child { border-bottom: 0 !important; }
    #page #main .entry-content figure.wp-block-table:not(#root *, .gpacalc-mount *):has(> table > tbody > tr > td.has-text-align-left:first-child + td:last-child) td { padding: 0 !important; border: 0 !important; text-align: left !important; }
    #page #main .entry-content figure.wp-block-table:not(#root *, .gpacalc-mount *):has(> table > tbody > tr > td.has-text-align-left:first-child + td:last-child) td:first-child { margin-bottom: 4px !important; font-weight: 700 !important; color: var(--gpa-text-strong) !important; }
}
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) figcaption {
    margin: 0 !important;
    padding: 10px 18px !important;
    border-top: 1px solid var(--gpa-table-row-line);
    font-size: 13px !important;
    font-style: normal !important;
    color: var(--gpa-text-muted) !important;
    text-align: center;
}
/* Highlighted row: the page's own "Your GPA" row (tr.is-highlight, spec "GPA tables") or totals */
#page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *) tr.is-highlight td,
#page .entry-content .rx-table:not(#root *, .rx-scale) tbody tr:last-child td {
    background: var(--gpa-table-total-bg) !important;
    color: var(--gpa-table-head-text) !important;
    font-weight: 600 !important;
}
@media (max-width: 768px) {
    #page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) :is(th, td) {
        padding: 10px 12px !important;
    }
    #page .entry-content :is(figure.wp-block-table, .rx-table, .content-table):not(#root *, .gpacalc-mount *) td { font-size: 15px !important; }
}

/* ---------- 4b. Worked GPA example ([gpa_table type="worked-example"], gpa-shortcodes.php) ----------
   Design "B · Formula reads across": one card at full column width; Course | Grade badge | → | Grade points | × |
   Credits | = | Quality points; the result strip (total quality points ÷ total credits = GPA) is the table's <tfoot>.
   Phones (≤640px) restyle the same markup ("B · On a phone"): each course is two lines, the result stacks.
   Colors: layer 4 content roles; grade badges use the grade-band tokens (semantic, they don't follow the theme). */
#page :is(.entry-content, .gpacalc-mount) figure.gpa-ex {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto var(--gpa-hdr-below) !important;
    padding: 0 !important;
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-table-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex__mhead { display: none; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex table.gpa-ex__table {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    background: transparent !important;
    font-variant-numeric: tabular-nums;
    table-layout: auto !important;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex :is(thead, tbody, tfoot, tr) { border: 0 !important; background: transparent !important; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex thead th {
    background: var(--gpa-table-head-bg) !important;
    color: var(--gpa-table-head-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    padding: 14px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gpa-table-border) !important;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody :is(th, td) {
    background: transparent !important;
    color: var(--gpa-text) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding: 14px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gpa-table-row-line) !important;
    vertical-align: middle !important;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex :is(thead, tbody) .gpa-ex__course { text-align: left !important; padding-left: 24px !important; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody .gpa-ex__course { color: var(--gpa-text-strong) !important; font-weight: 500 !important; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex :is(th, td).gpa-ex__op {
    width: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--gpa-example-op) !important;
    font-size: 15px !important;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody .gpa-ex__qp { color: var(--gpa-heading) !important; font-weight: 600 !important; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__unit { display: none; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__badge {
    display: inline-block;
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__badge--a { color: var(--gpa-band-a); background: var(--gpa-band-a-bg); }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__badge--b { color: var(--gpa-band-b); background: var(--gpa-band-b-bg); }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__badge--c { color: var(--gpa-band-c); background: var(--gpa-band-c-bg); }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__badge--d { color: var(--gpa-band-d); background: var(--gpa-band-d-bg); }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__badge--f { color: var(--gpa-band-f); background: var(--gpa-band-f-bg); }
/* Level tag (weighted examples) and the strip's note line */
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--gpa-border);
    background: var(--gpa-surface-subtle);
    color: var(--gpa-text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__note {
    grid-column: 1 / -1;
    margin: 0 !important;
    max-width: none !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--gpa-text) !important;
    text-align: center;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__note strong { color: var(--gpa-example-result-value); }
/* Result strip, attached to the bottom of the card */
#page :is(.entry-content, .gpacalc-mount) .gpa-ex tfoot td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__result {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 12px;
    padding: 24px;
    background: var(--gpa-example-result-bg);
    border-top: 1px solid var(--gpa-example-result-line);
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 !important;
    max-width: none !important;
    padding: 14px 16px !important;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-table-border);
    border-radius: 12px;
    text-align: center;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gpa-text-muted);
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--gpa-example-result-value);
    font-variant-numeric: tabular-nums;
}
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--gpa { border: 2px solid var(--gpa-example-highlight); padding: 13px 16px !important; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--gpa .gpa-ex__label { color: var(--gpa-example-result-label); }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--gpa .gpa-ex__value { font-size: 30px; }
#page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__rop { align-self: center; font-size: 24px; line-height: 1; color: var(--gpa-text-muted); }
/* Phones: the same <table>, restyled ("B · On a phone") */
@media (max-width: 640px) {
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__mhead {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--gpa-table-head-bg);
        border-bottom: 1px solid var(--gpa-table-border);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--gpa-table-head-text);
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex :is(table, tbody, tfoot, tr, td) { display: block; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex thead {   /* kept for screen readers */
        position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody tr {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--gpa-table-row-line) !important;
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody :is(th, td) {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        font-size: 15px !important;
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody th.gpa-ex__course {
        flex: 0 0 100%;
        padding: 0 0 2px !important;
        color: var(--gpa-heading) !important;
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__unit { display: inline; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tag { padding: 2px 6px; font-size: 12px; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody td { white-space: nowrap; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex tbody .gpa-ex__qp { margin-left: auto; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__result {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 18px 16px;
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__rop { display: none; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 !important;
        background: none;
        border: 0;
        border-radius: 0;
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__label { font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gpa-text); }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__value { font-size: 15px; font-weight: 700; color: var(--gpa-heading); }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--div .gpa-ex__label::before { content: "÷ "; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--gpa {
        margin-top: 4px !important;
        padding: 10px 16px !important;
        background: var(--gpa-surface);
        border: 2px solid var(--gpa-example-highlight);
        border-radius: 12px;
    }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--gpa .gpa-ex__label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gpa-example-result-label); }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--gpa .gpa-ex__label::before { content: "= "; }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__tile--gpa .gpa-ex__value { font-size: 28px; color: var(--gpa-example-result-value); }
    #page :is(.entry-content, .gpacalc-mount) .gpa-ex .gpa-ex__note { text-align: left; font-size: 14px !important; }
}


/* ---------- 4c. Library components on content pages (steps, definitions, related tools, icons) ----------
   Copied from calculator-page.css (which only loads on calculator pages), same specificity, scoped to the content
   templates so calculator pages are untouched. Keep the two in step when changing these components. */
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-card {
  border: 1px solid var(--rx-line);
  background: var(--rx-surface);
  border-radius: var(--rx-radius);
  padding: var(--rx-gap-4);
  box-shadow: var(--rx-shadow);
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-card-t {
  font-size: var(--rx-fs-title) !important;
  font-weight: var(--gpa-h4-weight, 700) !important;
  color: var(--rx-ink) !important;
  line-height: var(--rx-lh-tight) !important;
  margin-top: 0 !important;
  margin-bottom: var(--rx-gap-1) !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-card-b {
  font-size: var(--rx-fs-body) !important;
  color: var(--rx-body) !important;
  line-height: var(--rx-lh-body) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-card-b + .rx-card-b {
  margin-top: var(--rx-gap-2) !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-cards {
  gap: var(--rx-gap-4) !important;
  counter-reset: rxstep;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-cards .wp-block-column {
  flex-basis: 0;
  flex-grow: 1;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step {
  position: relative;
  padding-top: 86px;
  counter-increment: rxstep;
  transition: box-shadow .2s;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step:hover { box-shadow: var(--rx-shadow-hover); }
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step::before {
  content: "";
  position: absolute;
  top: var(--rx-gap-4);
  left: var(--rx-gap-4);
  width: 44px;
  height: 44px;
  border-radius: var(--rx-radius-sm);
  background: var(--rx-ico) center / 22px no-repeat,
              linear-gradient(135deg, var(--rx-accent-2), var(--rx-accent));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--gpa-indigo-500) 25%, transparent);
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step::after {
  content: counter(rxstep);
  position: absolute;
  top: 21px;
  left: 82px;
  font-size: var(--rx-fs-num);
  font-weight: 700;
  color: var(--rx-surface-3);
  line-height: 1.2;
  transition: color .2s;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step:hover::after { color: var(--rx-accent-bg); }
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-feat > .rx-card-t {
  margin-top: var(--rx-gap-1) !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-pill {
  display: table !important;
  margin: var(--rx-gap-3) auto var(--rx-gap-4) !important;
  background: var(--gpa-surface);
  color: var(--gpa-example-result-value) !important;
  border: 1px solid var(--gpa-example-result-line);
  border-radius: var(--rx-radius-sm);
  padding: var(--rx-gap-3) var(--rx-gap-4);
  font-size: var(--rx-fs-lg) !important;
  font-weight: 700 !important;
  line-height: var(--rx-lh-tight) !important;
  box-shadow: none;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-defs { gap: var(--rx-gap-2) !important; }
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-def {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius-sm);
  background: var(--rx-surface);
  padding: var(--rx-gap-3);
  text-align: left;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-def-t {
  font-size: var(--rx-fs-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--rx-accent-ink) !important;
  line-height: 1.5 !important;
  margin: 0 0 4px !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-def-b {
  font-size: var(--rx-fs-body) !important;
  color: var(--rx-body) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rel { gap: var(--rx-gap-4) !important; }
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-relcard {
  border: 1px solid var(--rx-line);
  border-radius: var(--rx-radius);
  background: var(--rx-surface);
  padding: var(--rx-gap-4);
  box-shadow: var(--rx-shadow);
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-relcard h3 {
  font-size: var(--rx-fs-title) !important;
  font-weight: var(--gpa-h4-weight, 700) !important;
  color: var(--rx-ink) !important;
  line-height: var(--rx-lh-tight) !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  padding-left: 52px;
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-relcard h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--rx-radius-sm);
  background: var(--rx-ico) center / 20px no-repeat, var(--rx-accent-bg-soft);
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-relsub {
  font-size: var(--rx-fs-small) !important;
  color: var(--rx-light) !important;
  line-height: 1.5 !important;
  margin: 0 0 var(--rx-gap-1) !important;
  padding-left: 52px;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist {
  list-style: disc outside;
  margin: 0;
  padding-left: 1.5rem;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li {
  display: list-item;
  margin: 0 0 8px;
  padding: 0;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li:first-child {
  border-top: 0;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li::before,
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li::marker {
  content: normal;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist a {
  display: inline;
  font-size: 17px;
  font-weight: 500;
  color: var(--gpa-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist a:hover {
  color: var(--gpa-primary-hover);
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist a::after {
  content: "";
  width: var(--rx-gap-3);
  height: var(--rx-gap-3);
  flex: 0 0 var(--rx-gap-3);
  background: var(--rx-ext) center / contain no-repeat;
  opacity: .45;
  transition: opacity .2s, transform .2s;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist a:hover::after {
  opacity: 1;
  transform: translateX(2px);
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li:not(:has(a)) {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 0 !important;
  font-size: var(--rx-fs-body) !important;
  font-weight: 500 !important;
  color: var(--rx-body) !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist mark {
  margin-left: auto;
  white-space: nowrap;
  font-size: var(--rx-fs-label) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.6 !important;
  border-radius: 6px;
  padding: 2px 8px;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-cap {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-pen {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-card {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-calc {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14v4'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-trophy {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-brief {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect x='2' y='6' width='20' height='14' rx='2'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-flask {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 9.3V1.99'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-flaskv {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31'/%3E%3Cpath d='M14 9.3V1.99'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 1 1-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-i-info {
  --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist a {
  display: inline;
  font-size: 17px;
  font-weight: 500;
  color: var(--gpa-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post):is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) p.rx-card-b,
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post):is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) p.rx-def-b,
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post):is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .rx-relsub {
    font-size: var(--rx-fs-body) !important;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist {
  list-style: disc outside;
  padding-left: 1.5rem;
  margin: 0;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li {
  display: list-item;
  border-top: 0;
  padding: 0;
  margin: 0 0 8px;
  background: none;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li::before,
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li::marker {
  content: normal;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li a {
  display: inline;
  color: var(--gpa-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li a:hover,
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-rellist li a:focus-visible {
  color: var(--gpa-primary-hover);
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step::before,
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step::after,
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-relcard h3::before {
  content: none;
  display: none;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-step {
  padding-top: 24px;
  counter-increment: none;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-cards {
  counter-reset: none;
}
:is(.page-template-template-content, .page-template-gpa-content-page, .gpa-template-content, .single-post) .entry-content .rx-relcard h3 {
  padding-left: 0;
}

/* ---------- 5. Callouts (Digant 2026-10-05: one shared block, 7 families) ----------
   Markup (pattern "GPA components › Callout: …", gpa-block-patterns.php):
     <div class="wp-block-group gpa-callout gpa-callout--{family}">  role="note" is added at render
       <p class="gpa-callout__label">Tip</p>                         the variant's name; icon comes from the family
       <p>Body…</p>
     </div>
   Families: helpful (indigo, bulb) · caution (amber, alert) · info (blue, info) · evidence (white card, big number or
   quote, source inside) · learn (light gray; Quick check uses a Details block to reveal the answer) · action (green;
   steps, checklist, takeaway, next-step button) · compare (two columns, left-aligned; stacks on phones).
   Older markup keeps working: .gpa-callout--tip / is-style-gpa-callout-tip = helpful, --note = info, --warn = caution,
   and their first bold line (or h3/h4/.gpa-callout__title) is the label. Icons are CSS masks, so screen readers skip them.
   Rules (spec "Callouts"): at most 1 per section, about 6 per page, never two in a row, never before a section's first
   paragraph. */
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) {
    --co-bg: var(--gpa-indigo-100);
    --co-line: var(--gpa-indigo-200);
    --co-ink: var(--gpa-indigo-800);
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 16 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
    position: relative;
    box-sizing: border-box;
    padding: 16px 20px !important;
    border: 1px solid var(--co-line) !important;
    border-radius: 12px !important;
    background: var(--co-bg) !important;
    color: var(--gpa-text);
    font-size: 16px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}
#page .entry-content :is(.gpa-callout--caution, .gpa-callout--warn, .is-style-gpa-callout-warn) {
    --co-bg: var(--gpa-amber-50);
    --co-line: var(--gpa-amber-200);
    --co-ink: var(--gpa-amber-800);
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
#page .entry-content :is(.gpa-callout--info, .gpa-callout--note, .is-style-gpa-callout-note) {
    --co-bg: var(--gpa-tint-blue);
    --co-line: var(--gpa-blue-200);
    --co-ink: var(--gpa-blue-700);
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
#page .entry-content .gpa-callout--evidence {
    --co-bg: var(--gpa-surface);
    --co-line: var(--gpa-border);
    --co-ink: var(--gpa-heading);
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
}
#page .entry-content .gpa-callout--learn {
    --co-bg: var(--gpa-gray-100);
    --co-line: var(--gpa-gray-200);
    --co-ink: var(--gpa-gray-800);
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
#page .entry-content .gpa-callout--action {
    --co-bg: var(--gpa-green-50);
    --co-line: var(--gpa-green-200);
    --co-ink: var(--gpa-green-800);
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='m12 8 4 4-4 4'/%3E%3C/svg%3E");
}
#page .entry-content .gpa-callout--compare {
    --co-bg: var(--gpa-surface);
    --co-line: var(--gpa-gray-300);
    --co-ink: var(--gpa-gray-800);
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E");
}

/* Width: callouts sit on the text column, like paragraphs (layout.css "Text blocks"); the older block-style form too */
#page .entry-content :is(.is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) {
    max-width: var(--gpa-text-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
@media (min-width: 641px) {
    #page .entry-content :is(.is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) { max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; }
}
@media (min-width: 641px) and (max-width: 880px) {
    #page .entry-content :is(.is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) { max-width: 100% !important; }
}

/* Body text */
/* #main outranks layout.css "2. Article text" (18px); classed parts (label, stat, quote, source, column heads) keep their own rules */
#page #main .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) :is(p, li):not([class*="gpa-callout__"]) {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--gpa-text) !important;
    text-align: left !important;
}
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > * { margin-top: 0 !important; margin-bottom: 8px !important; max-width: none !important; }
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > :last-child { margin-bottom: 0 !important; }
#page #main .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) p:not([class*="gpa-callout__"]) { margin-bottom: 8px !important; }
#page #main .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) p:not([class*="gpa-callout__"]):last-child { margin-bottom: 0 !important; }
#page .entry-content .gpa-callout li + li { margin-top: 4px !important; }
#page #main .entry-content .gpa-callout li:not(#root *, .gpa-cutoffs li) { margin: 0 0 6px !important; }
#page #main .entry-content .gpa-callout li:not(#root *, .gpa-cutoffs li):last-child { margin-bottom: 0 !important; }

/* Label row: icon + the variant's name, in the family's ink. Same row on every width; the body runs full width under it. */
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > :is(.gpa-callout__label, .gpa-callout__title, h3, h4):first-child,
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > p:first-child > strong:first-child,
#page .entry-content p:is(.is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > strong:first-child {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--co-ink) !important;
}
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > :is(.gpa-callout__label, .gpa-callout__title, h3, h4):first-child::before,
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > p:first-child > strong:first-child::before,
#page .entry-content p:is(.is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) > strong:first-child::before {
    content: "";
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: var(--co-icon) left center / contain no-repeat;
    mask: var(--co-icon) left center / contain no-repeat;
}
/* Older callouts with no title line keep the icon in the corner */
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn):not(:has(> :is(.gpa-callout__label, .gpa-callout__title, h3, h4):first-child, > p:first-child > strong:first-child, > strong:first-child)) {
    padding-left: 48px !important;
}
#page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn):not(:has(> :is(.gpa-callout__label, .gpa-callout__title, h3, h4):first-child, > p:first-child > strong:first-child, > strong:first-child))::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 18px;
    width: 20px;
    height: 20px;
    background: var(--co-ink);
    -webkit-mask: var(--co-icon) left center / contain no-repeat;
    mask: var(--co-icon) left center / contain no-repeat;
}

/* Evidence: a big number or a quote, with its source inside the card */
#page .entry-content .gpa-callout .gpa-callout__stat {
    margin: 0 0 4px !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em;
    color: var(--gpa-heading) !important;
}
#page .entry-content .gpa-callout .gpa-callout__quote {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--gpa-text-strong) !important;
}
#page .entry-content .gpa-callout--evidence:has(.gpa-callout__quote) {
    --co-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}
#page .entry-content .gpa-callout .gpa-callout__source {
    text-wrap: pretty;
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--gpa-text-secondary) !important;
}

/* Learn: Quick check / Practice reveal the answer in a Details block */
#page .entry-content .gpa-callout details {
    margin-top: 0 !important;
}
#page .entry-content .gpa-callout details > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--gpa-primary);
}
#page .entry-content .gpa-callout details > summary::-webkit-details-marker { display: none; }
#page .entry-content .gpa-callout details > summary::after {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--gpa-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .15s;
}
#page .entry-content .gpa-callout details[open] > summary::after { transform: rotate(180deg); }
#page .entry-content .gpa-callout details > summary:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: 2px; border-radius: 6px; }
#page .entry-content .gpa-callout details > :not(summary) { margin: 0 0 8px !important; }
#page .entry-content .gpa-callout details > :last-child { margin-bottom: 0 !important; }

/* Lists: item text starts on the label's text edge (20px icon + 8px gap); markers hang in the icon's column, in the
   family's ink. Steps are plain bold numbers, Checklist items get a tick. #main outranks the site-wide list rules. */
#page #main .entry-content .gpa-callout :is(ul, ol) { padding-left: 28px !important; }
#page #main .entry-content .gpa-callout ul > li::before { left: -21px !important; background: var(--co-ink) !important; }
#page #main .entry-content .gpa-callout ol > li::before {
    left: -28px !important;
    top: 0 !important;
    width: 20px !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    color: var(--co-ink) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
}
#page #main .entry-content .gpa-callout ul.gpa-callout__checks > li::before {
    left: -27px !important;
    top: 3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
#page .entry-content .gpa-callout > p:has(> a.gpa-btn:only-child) { margin-top: 16px !important; }

/* Compare: two left-aligned columns with a divider; stacked on phones */
#page .entry-content .gpa-callout .gpa-callout__cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    margin: 0 !important;
}
#page .entry-content .gpa-callout .gpa-callout__cols > .wp-block-column { min-width: 0; padding: 0 20px 0 0; }
#page .entry-content .gpa-callout .gpa-callout__cols > .wp-block-column + .wp-block-column { padding: 0 0 0 20px; border-left: 1px solid var(--gpa-border); }
#page .entry-content .gpa-callout .gpa-callout__cols > .wp-block-column > * { margin: 0 0 8px !important; }
#page .entry-content .gpa-callout .gpa-callout__cols > .wp-block-column > :last-child { margin-bottom: 0 !important; }
#page .entry-content .gpa-callout .gpa-callout__colhead {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gpa-text-strong) !important;
}
@media (max-width: 640px) {
    #page .entry-content :is(.gpa-callout, .is-style-gpa-callout-tip, .is-style-gpa-callout-note, .is-style-gpa-callout-warn) { padding: 16px !important; }
    #page .entry-content .gpa-callout .gpa-callout__cols { grid-template-columns: 1fr; }
    #page .entry-content .gpa-callout .gpa-callout__cols > .wp-block-column { padding: 0 0 12px; }
    #page .entry-content .gpa-callout .gpa-callout__cols > .wp-block-column + .wp-block-column { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--gpa-border); }
    #page .entry-content .gpa-callout .gpa-callout__stat { font-size: 36px !important; }
}

/* ---------- 6. Formula / worked example ---------- */
#page .entry-content :is(.content-formula, .content-result, .rx-formula):not(#root *) {
    padding: 20px 22px !important;
    background: var(--gpa-example-result-bg) !important;
    border: 1px solid var(--gpa-example-result-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#page .entry-content :is(.content-formula, .rx-formula) :is(.content-formula__label, .rx-formula-label) {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--gpa-example-result-label) !important;
}
#page .entry-content .content-formula > p,
#page .entry-content .rx-formula .rx-pill {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--gpa-example-result-value) !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}
#page .entry-content .content-result > p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--gpa-text-secondary) !important;
}
#page .entry-content .content-result :is(.content-result-big, strong) {
    font-size: inherit !important;
    font-weight: 600 !important;
    color: var(--gpa-example-result-value) !important;
}

/* ---------- 7. Key takeaways ---------- */
#page .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) {
    padding: 20px 24px !important;
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
}
#page .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) > :is(h2, h3, h4, p):first-child {
    margin: 0 0 10px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--gpa-heading) !important;
}
#page .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#page .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) li {
    position: relative;
    margin: 0 0 8px !important;
    padding-left: 28px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}
#page .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    background: var(--gpa-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* #main outranks the site-wide heading, list and paragraph rules (heading top margin, 18px items, last item gap) */
#page #main .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) > :is(h2, h3, h4, p):first-child:not(#root *) { margin: 0 0 10px !important; }
#page #main .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) li:not(#root *) { font-size: 16px !important; line-height: 1.55 !important; margin: 0 0 8px !important; }
#page #main .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways) li:not(#root *):last-child { margin-bottom: 0 !important; }
#page #main .entry-content .rx-formula > :last-child:not(#root *) { margin-bottom: 0 !important; }

/* ---------- 8. FAQ (Rank Math FAQ block) ----------
   One white card; each question a row with a divider and a chevron.
   functions.php (gpa_faq_accordion) makes it an accordion with the first
   item open; without JavaScript every answer shows. The FAQ schema and the
   answer HTML are untouched. */
#page .entry-content .rank-math-block:not(#root *) {
    max-width: var(--gpa-text-max);
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden;
}
#page .entry-content .rank-math-block .rank-math-list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
#page .entry-content .rank-math-block .rank-math-list-item {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-top: 1px solid var(--gpa-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#page .entry-content .rank-math-block .rank-math-list-item:first-child { border-top: 0 !important; }
#page #main .entry-content .rank-math-block .rank-math-question:not(#root *) {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 14px 52px 14px 20px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: var(--gpa-text-strong) !important;
    background: none !important;
    border: 0 !important;
    text-align: left !important;
}
#page .entry-content .rank-math-block .rank-math-question::before { content: none !important; display: none !important; }
#page .entry-content .rank-math-block .rank-math-question::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--gpa-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .2s ease;
}
#page .entry-content .rank-math-block .rank-math-list-item.is-open .rank-math-question::after { transform: rotate(180deg); }
#page .entry-content .rank-math-block.gpa-faq-ready .rank-math-question { cursor: pointer; }
#page .entry-content .rank-math-block.gpa-faq-ready .rank-math-question:hover { color: var(--gpa-primary) !important; }
#page .entry-content .rank-math-block .rank-math-answer {
    margin: 0 !important;
    padding: 0 20px 18px !important;
    border: 0 !important;
    background: none !important;
}
#page .entry-content .rank-math-block .rank-math-answer,
#page .entry-content .rank-math-block .rank-math-answer :is(p, li) {
    font-size: 17px !important;
    line-height: var(--gpa-body-line) !important;
    color: var(--gpa-text) !important;
}
#page .entry-content .rank-math-block .rank-math-answer p:not(#root *) { margin: 0 0 10px !important; padding: 0 !important; }
#page .entry-content .rank-math-block .rank-math-answer > :last-child { margin-bottom: 0 !important; }
#page .entry-content .rank-math-block.gpa-faq-ready .rank-math-list-item:not(.is-open) .rank-math-answer { display: none !important; }

/* Calculator pages' FAQ (details blocks inside .rx-faqwrap): same card */
#page .entry-content .rx-faqwrap {
    max-width: var(--gpa-text-max);
    margin: 0 auto !important;
    background: var(--gpa-surface);
    border: 1px solid var(--gpa-border);
    border-radius: 12px;
    overflow: hidden;
}
#page .entry-content .rx-faqwrap .rx-faq {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--gpa-divider) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
#page .entry-content .rx-faqwrap .rx-faq:first-child { border-top: 0 !important; }
#page .entry-content .rx-faqwrap .rx-faq summary {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 14px 52px 14px 20px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--gpa-text-strong) !important;
    background: none !important;
}
#page .entry-content .rx-faqwrap .rx-faq summary:hover { color: var(--gpa-primary) !important; }
#page .entry-content .rx-faqwrap .rx-faq summary::before { content: none !important; display: none !important; }
#page .entry-content .rx-faqwrap .rx-faq summary::after {
    right: 20px;
    top: 50%;
    margin-top: -9px;
    background: var(--gpa-accent) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
#page .entry-content .rx-faqwrap .rx-faq > :not(summary) {
    padding: 0 20px 18px !important;
    font-size: 17px !important;
    line-height: var(--gpa-body-line) !important;
    color: var(--gpa-text) !important;
}

/* ---------- 9. Related tools and step cards ----------
   White cards, 1px border, 12px corners, the card's 24px icon in the accent
   color with nothing behind it (no tinted squares behind icons: ui-review
   checklist). The icon comes from the card's rx-i-* class as --rx-ico. */
#page :is(.entry-content, .gpacalc-mount) :is(.rx-relcard, .rx-step) {
    position: relative;
    padding: 20px !important;
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#page :is(.entry-content, .gpacalc-mount) :is(.rx-relcard, .rx-step):hover { box-shadow: none !important; }
/* Side-by-side cards keep their own height (no empty block under the shorter list) */
#page .entry-content .rx-rel { align-items: flex-start !important; }
#page :is(.entry-content, .gpacalc-mount) .rx-relcard > h3 {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 24px;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--gpa-heading) !important;
}
#page :is(.entry-content, .gpacalc-mount) .rx-relcard > h3::before,
#page .entry-content .rx-step::before {
    content: "" !important;
    display: block !important;
    position: static;
    flex: none;
    width: 24px;
    height: 24px;
    background: none !important;
    box-shadow: none !important;
}
#page :is(.entry-content, .gpacalc-mount) .rx-relcard > h3::after,
#page .entry-content .rx-step::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: var(--gpa-accent) !important;
    -webkit-mask: var(--rx-ico) center / contain no-repeat;
    mask: var(--rx-ico) center / contain no-repeat;
}
#page :is(.entry-content, .gpacalc-mount) .rx-relcard > h3::after { top: 50%; margin-top: -12px; }
#page .entry-content .rx-step::after { left: 20px; top: 20px; }
#page .entry-content .rx-step::before { margin-bottom: 14px; }
#page .entry-content .rx-step { padding-top: 20px !important; }
#page :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-relsub {
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--gpa-gray-600) !important;
}
#page :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li { font-size: 16px !important; }
#page :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li > a {
    color: var(--gpa-link) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--gpa-link-underline) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
}
#page :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li > a:hover { text-decoration-color: var(--gpa-primary) !important; }
#page :is(.entry-content, .gpacalc-mount) .rx-relcard mark {
    background: var(--gpa-tint-indigo) !important;
    color: var(--gpa-accent) !important;
}

/* 9b. Related cards, one look on every page (Digant 2026-10-05: the "Keep planning" cards read too loud).
   Card titles are 17px 700 in the heading color on every template; content-styles.css's 22px h3 rule
   no longer reaches them (#main + :not(#gpa-x) outweighs it). A card whose title is a link ("Keep planning",
   "Related calculators") is one link: the whole card is clickable, the title carries an arrow, cards in a
   row share one height, and on screens wider than a phone the icon sits above the title so the title
   has the full card width. */
#page #main :is(.entry-content, .gpacalc-mount) .rx-relcard > h3:not(#gpa-x) {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    color: var(--gpa-heading) !important;
}
#page #main .entry-content .rx-rel:not(#gpa-x) { gap: 16px !important; }
#page #main .entry-content .rx-rel:has(> .rx-relcard > h3 > a) { align-items: stretch !important; }
#page #main .entry-content .rx-relcard:has(> h3 > a) {
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease;
}
#page #main .entry-content .rx-relcard:has(> h3 > a):hover { border-color: var(--gpa-primary) !important; }
#page #main .entry-content .rx-relcard:has(> h3 > a:focus-visible) { outline: 2px solid var(--gpa-primary); outline-offset: 2px; }
#page #main .entry-content .rx-relcard > h3:has(> a):not(#gpa-x) { position: static; justify-content: flex-start !important; text-align: left !important; width: 100%; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
#page #main .entry-content .rx-relcard > h3:has(> a)::after { top: 20px !important; left: 20px; margin-top: 0 !important; }
#page #main .entry-content .rx-relcard > h3 > a:not(#gpa-x) {
    color: inherit !important;
    font: inherit !important;
    text-decoration: none !important;
}
#page #main .entry-content .rx-relcard > h3 > a:focus-visible { outline: none; }
/* The whole card is the link */
#page #main .entry-content .rx-relcard:not(.calc-keep *) > h3 > a::before { content: ""; position: absolute; inset: 0; border-radius: 12px; }
/* The arrow stays on the line of the last word (no-break space) */
/* Not inside a calculator's "Keep going" (.calc-keep): calc-core.css already makes its card one link with an empty a::after
   positioned over the card, so an arrow there landed in the card's top-left corner (live 2026-10-05 05:12). */
#page #main .entry-content .rx-relcard:not(.calc-keep *) > h3 > a::after {
    content: "\00a0→";
    color: var(--gpa-primary);
}
#page #main .entry-content .rx-relcard:has(> h3 > a):hover > h3 > a { color: var(--gpa-primary) !important; }
#page #main .entry-content .rx-relcard:has(> h3 > a) > .rx-relsub:last-child { margin-bottom: 0 !important; }
@media (min-width: 641px) {
    #page #main .entry-content .rx-relcard > h3:has(> a):not(#gpa-x) { display: block !important; }
    #page #main .entry-content .rx-relcard > h3:has(> a)::before { margin-bottom: 12px; }
}

/* Grade Calculators group icon (Digant 2026-10-05): a checked clipboard, on every template */
#page :is(.entry-content, .gpacalc-mount) .rx-i-grade { --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E"); }
/* Related tools rows for calculators that aren't live yet: name only, muted (the shared block prints li.is-draft) */
#page #main :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li.is-draft { color: var(--gpa-text-muted) !important; }
/* Its bullet and service tag go grey too, so a draft row doesn't read as half-active (Unification second opinion 2026-10-05) */
#page #main :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li.is-draft::before { background: var(--gpa-gray-500) !important; }
#page #main :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li.is-draft mark { background: var(--gpa-gray-100) !important; color: var(--gpa-gray-600) !important; }

/* ---------- 10. Sources (block pattern "Sources", gpa-block-patterns.php) ---------- */
#page .entry-content .gpa-sources {
    max-width: var(--gpa-text-max);
    margin: var(--gpa-hdr-above) auto 0 !important;
    padding: 24px 0 0 !important;
    border-top: 1px solid var(--gpa-border);
}
#page .entry-content .gpa-sources > :is(h2, h3, p.gpa-sources__title):first-child {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    color: var(--gpa-text-strong) !important;
    text-align: left !important;
}
#page .entry-content .gpa-sources .gpa-sources__meta {
    margin: 4px 0 16px !important;
    font-size: 14px !important;
    color: var(--gpa-text-muted) !important;
}
/* Each half of the byline stays whole, so it breaks at the dot (gpa-block-patterns.php adds the spans) */
#page .entry-content .gpa-sources .gpa-sources__meta .gpa-nowrap { white-space: nowrap; }
/* No byline (college pages): the list keeps 16px under the title instead of touching it */
#page .entry-content .gpa-sources > :is(h2, h3, p.gpa-sources__title):first-child + :is(ol, ul) { margin-top: 16px !important; }
/* Token button in page content (<a class="gpa-btn gpa-btn-primary">, gpa-design-tokens.css): white text,
   no link underline, 44px tap target; hover darkens the fill as in the tokens file */
#page .entry-content a.gpa-btn.gpa-btn-primary,
#page .entry-content a.gpa-btn.gpa-btn-primary:is(:hover, :focus, :visited, :active) {
    color: var(--gpa-white) !important;
    text-decoration: none !important;
}
#page .entry-content a.gpa-btn.gpa-btn-primary { min-height: 44px; background: var(--gpa-primary) !important; }
#page .entry-content a.gpa-btn.gpa-btn-primary:hover { background: var(--gpa-primary-dark) !important; }
#page .entry-content a.gpa-btn.gpa-btn-primary:focus-visible { outline: 2px solid var(--gpa-primary); outline-offset: 2px; }
#page .entry-content .gpa-sources ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    counter-reset: gpa-src;
}
#page .entry-content .gpa-sources ol > li {
    position: relative;
    counter-increment: gpa-src;
    margin: 0 0 14px !important;
    padding-left: 36px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--gpa-text-muted) !important;
}
#page .entry-content .gpa-sources ol > li::before {
    content: counter(gpa-src);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gpa-tint-blue);
    color: var(--gpa-primary-hover);
    font-size: 12px;
    font-weight: 600;
}
/* Source titles read as links: the in-text link look (section 1), on a line of their own above the publisher */
#page .entry-content .gpa-sources ol > li > a {
    display: block;
    width: fit-content;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--gpa-link) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--gpa-link-underline) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
    margin-bottom: 4px; /* clear of the publisher line under it */
}
#page .entry-content .gpa-sources ol > li > a:hover { text-decoration-color: var(--gpa-primary) !important; }
/* One-line rows (name + service tag) center their dot */
#page :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li::before { top: 50%; margin-top: -3px; }

/* ---------- 11. Page content standard ----------
   One look for the blocks every calculator and guide page is built from
   (the College GPA calculator page is the model). Spacing: 64px between
   sections, 12px heading → intro, 24px intro → first block, 16px between
   cards. Cards: white, 1px border, 12px corners, 24px padding, a 40px
   tinted icon square, 18px title, 16px text. */
#page #main .entry-content .rx-sec > .wp-block-spacer { display: none !important; }
#page #main .entry-content .rx-sec > h2 + p.rx-sub:not(#root *) { margin-top: 12px !important; }
#page #main .entry-content .rx-about > h2 + p:not(#root *) { margin-top: 16px !important; }
#page #main .entry-content .rx-sec > :is(h2, p.rx-sub) + :is(.wp-block-columns, figure, .rx-formula, .rx-meaning, .rx-faqwrap, .rank-math-block, .wp-block-rank-math-faq-block, blockquote, .gpa-callout),
#page #main .entry-content .rx-sec > :is(h2, p.rx-sub) + .wp-block-spacer + :is(.wp-block-columns, figure, .rx-formula, .rx-meaning, .rx-faqwrap, .rank-math-block, .wp-block-rank-math-faq-block, blockquote, .gpa-callout) {
    margin-top: 24px !important;
}
#page #main .entry-content .rx-sec > .wp-block-columns { gap: 16px !important; margin-bottom: 0 !important; }
#page #main .entry-content .rx-sec > .wp-block-columns + .wp-block-columns { margin-top: 16px !important; }
#page #main .entry-content .rx-sec > * + :is(p.rx-note, blockquote, .gpa-callout, p.rx-result) { margin-top: 24px !important; }
/* Callouts and the formula box keep a 24px gap on both sides, so the next paragraph never sits flush against the box. */
#page #main .entry-content :is(.rx-sec, .rx-about) > * + :is(.gpa-callout, .gpa-callout--tip, .is-style-gpa-callout-tip, .gpa-callout--note, .is-style-gpa-callout-note, .gpa-callout--warn, .is-style-gpa-callout-warn, .rx-formula),
#page #main .entry-content :is(.rx-sec, .rx-about) > :is(.gpa-callout, .gpa-callout--tip, .is-style-gpa-callout-tip, .gpa-callout--note, .is-style-gpa-callout-note, .gpa-callout--warn, .is-style-gpa-callout-warn, .rx-formula) + * { margin-top: 24px !important; }
#page #main .entry-content > .rx-sec:not(:has(~ .rx-sec, ~ p, ~ h2)) { margin-bottom: 0 !important; }
#page #main :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li::before { top: 50% !important; margin-top: -3px !important; }

/* Cards: step, feature and exception cards share one layout */
#page #main .entry-content :is(.rx-step, .rx-feat) {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px !important;
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#page #main .entry-content :is(.rx-step, .rx-feat):hover { box-shadow: none !important; }
#page #main .entry-content :is(.rx-step, .rx-feat)::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: none;
    width: 40px !important;
    height: 40px !important;
    margin: 0 0 16px !important;
    border-radius: 10px !important;
    background: var(--gpa-tint-indigo) !important;
    box-shadow: none !important;
}
#page #main .entry-content :is(.rx-step, .rx-feat)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 34px !important;
    top: 34px !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--gpa-accent) !important;
    -webkit-mask: var(--rx-ico) center / contain no-repeat;
    mask: var(--rx-ico) center / contain no-repeat;
}
#page #main .entry-content :is(.rx-step, .rx-feat) > .rx-card-t:not(#root *) {
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--gpa-heading) !important;
}
#page #main .entry-content :is(.rx-step, .rx-feat) > .rx-card-b:not(#root *) {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--gpa-text) !important;
}

/* Worked result under a table: the same light result box as the calculator */
#page #main .entry-content p.rx-result:not(#root *) {
    display: block !important;
    max-width: var(--gpa-text-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px 20px !important;
    background: var(--gpa-calc-result-bg) !important;
    border: 1px solid var(--gpa-calc-result-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--gpa-gray-600) !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#page #main .entry-content p.rx-result strong {
    display: block;
    margin-top: 4px;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--gpa-heading) !important;
}

/* Formula box: tinted panel, formula line, then three white definition cards */
#page #main .entry-content .rx-formula { padding: 24px !important; }
#page #main .entry-content .rx-formula > p.rx-sub:not(#root *) {
    margin: 0 !important;
    font-size: 16px !important;
    color: var(--gpa-text) !important;
    text-align: center !important;
}
#page #main .entry-content .rx-formula > p.rx-pill:not(#root *) {
    margin: 8px 0 20px !important;
    text-align: center !important;
    box-shadow: none !important;
}
#page #main .entry-content .rx-formula > .wp-block-columns { gap: 12px !important; margin: 0 !important; }
#page #main .entry-content .rx-formula .rx-def {
    padding: 16px 18px !important;
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-calc-result-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
#page #main .entry-content .rx-formula .rx-def-t:not(#root *) {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--gpa-accent) !important;
}
#page #main .entry-content .rx-formula .rx-def-b:not(#root *) {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--gpa-text) !important;
}
#page #main .entry-content .rx-formula > .wp-block-columns + p.rx-sub { margin-top: 16px !important; font-size: 15px !important; }

/* GPA range rows */
#page #main .entry-content .rx-meaning {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    align-items: center;
    gap: 16px;
    margin: 12px 0 0 !important;
    padding: 18px 20px !important;
    background: var(--gpa-surface) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
#page #main .entry-content .rx-meaning > p:not(#root *) { margin: 0 !important; padding: 0 !important; }
#page #main .entry-content .rx-meaning .rx-mrange { white-space: nowrap; }
#page #main .entry-content .rx-meaning .rx-mdesc { font-size: 16px !important; line-height: 1.6 !important; color: var(--gpa-text) !important; }
@media (max-width: 640px) {
    #page #main .entry-content .rx-meaning { grid-template-columns: 1fr; gap: 8px; }
}

/* Short disclaimer lines read as a note box (same as a plain quote) */
#page #main .entry-content p.rx-note:not(#root *) {
    padding: 16px 18px !important;
    background: var(--gpa-gray-50) !important;
    border: 1px solid var(--gpa-border) !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    color: var(--gpa-gray-600) !important;
}

/* Older FAQ (details blocks): answer lines up with the question */
#page #main .entry-content .rx-faq > summary { padding: 16px 52px 16px 20px !important; }
#page #main .entry-content .rx-faq > :not(summary) { margin: 0 !important; padding: 0 20px 18px !important; }

/* Related tools: name, service tag and dot on one line */
#page #main :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li {
    margin: 0 !important;
    padding: 6px 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
#page #main :is(.entry-content, .gpacalc-mount) .rx-relcard .rx-rellist > li > mark { flex: none; margin: 0 !important; }

/* 11b. One text standard and section spacing (Digant 2026-10-02 20:10).
   Every font is Lexend. Running text: 18px in the body color; text inside cards, boxes, tables and FAQ answers: 16px,
   same color. Section intros (p.rx-sub) were a lighter gray than other paragraphs, which read as a different font.
   Sections sit --gpa-sec-gap apart (48px desktop, 40px phones), down from 64px. */
#page #main .entry-content p.rx-sub:not(#root *, .gpacalc-mount *) { color: var(--gpa-text) !important; }
#page .entry-content .rank-math-block .rank-math-answer:not(#root *),
#page .entry-content .rank-math-block .rank-math-answer :is(p, li):not(#root *) { font-size: 16px !important; }
#page #main .entry-content > .rx-sec:not(#root *) { margin-top: 0 !important; margin-bottom: var(--gpa-sec-gap) !important; }
#page #main .entry-content > :is(#root, .gpacalc-mount, .wp-block-rank-math-toc-block) + .rx-sec:not(#root *) { margin-top: var(--gpa-sec-gap) !important; }
#page #main .entry-content > .rx-sec:not(:has(~ .rx-sec, ~ p, ~ h2)) { margin-bottom: 0 !important; }
/* Formula box: left-aligned like the rest of the page, with room above its closing line */
#page #main .entry-content .rx-formula > p:is(.rx-sub, .rx-pill):not(#root *) { text-align: left !important; }
#page #main .entry-content .rx-formula > .wp-block-columns + p:not(#root *) { margin-top: 20px !important; }
/* Calculators asked for Inter: they use Lexend like the rest of the page (Inter's download goes in phase 5) */
body #page #root:not(.calc-mounted), body #page #root:not(.calc-mounted) *:not(code, pre, kbd, samp, svg, svg *) { font-family: var(--gpa-font) !important; } /* legacy calculators; the core sets its own */

/* 12. In-page navigation: jump-link chips (Design spec "In-page navigation"; Digant 2026-10-03 16:46).
   One shared component for every template. Server-rendered markup only, never built by JavaScript:
     <nav class="gpa-jump" aria-label="Jump to">
       <span class="gpa-jump__label">Jump to</span>
       <ul class="gpa-jump__list">
         <li><a class="gpa-jump__chip" href="#average-gpa">Average GPA</a></li> ...
       </ul>
     </nav>
   Short labels (2-3 words), descriptive section IDs, 4+ sections. Desktop wraps (2 lines at most);
   phones: one row that scrolls sideways with a 20px fade on the right. Always visible, no toggle. */
#page .entry-content .gpa-jump {
    display: flex;
    align-items: flex-start;
    gap: 8px 12px;
    max-width: var(--gpa-text-max);
    margin: 0 auto var(--gpa-sec-gap) !important;
    padding: 0 !important;
    font-family: var(--gpa-font);
}
#page .entry-content .gpa-jump__label {
    flex: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;               /* level with the first row of chips */
    color: var(--gpa-text-muted);
    white-space: nowrap;
}
#page #main .entry-content ul.gpa-jump__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#page #main .entry-content ul.gpa-jump__list > li {
    margin: 0 !important;
    padding: 0 !important;
}
#page #main .entry-content ul.gpa-jump__list > li::before,
#page #main .entry-content ul.gpa-jump__list > li::marker { content: none !important; display: none !important; }
#page .entry-content a.gpa-jump__chip {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--gpa-border);
    border-radius: 999px;
    background: var(--gpa-surface);
    color: var(--gpa-link) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none !important;
    transition: border-color .15s ease, color .15s ease;
}
#page .entry-content a.gpa-jump__chip:hover { border-color: var(--gpa-primary); color: var(--gpa-primary) !important; }
#page .entry-content a.gpa-jump__chip:focus-visible { outline: 2px solid var(--gpa-focus-ring); outline-offset: 2px; }
@media (max-width: 640px) {
    #page .entry-content .gpa-jump { gap: 8px; }
    #page #main .entry-content ul.gpa-jump__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px 20px 4px 0 !important;       /* room for the 44px tap area and the fade */
        margin: -4px 0 !important;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    }
    #page #main .entry-content ul.gpa-jump__list::-webkit-scrollbar { display: none; }
    #page .entry-content a.gpa-jump__chip { position: relative; }
    #page .entry-content a.gpa-jump__chip::after { content: ""; position: absolute; inset: -4px 0; }   /* 44px tap area */
}
@media (prefers-reduced-motion: reduce) { #page .entry-content a.gpa-jump__chip { transition: none; } }
/* Sections the chips point to stop below the sticky header */
html:has(.gpa-jump) #page .entry-content [id] { scroll-margin-top: 80px; }

/* ---------- Guides that open with the formula box: "Lifted, clean" (Digant 2026-10-05 09:15). The box rises into the
   blue band as a white card, like a calculator card (same tokens as layout.css section 6, the content column turns
   transparent above it), with no boxes inside: the definitions are plain lines under a 1px divider. Card text lines up with the
   column text (40px inset from 641px). ---------- */
body.gpa-hero-band.gpa-hero-band:has(.entry-content > .rx-formula:first-child) {
    --rx-hero-tail: var(--gpa-hero-tail);
    --rx-card-overlap: var(--gpa-hero-overlap);
}
body.gpa-hero-band.gpa-hero-band:has(.entry-content > .rx-formula:first-child) .entry-content {
    margin-top: calc(var(--rx-hero-tail) - var(--rx-card-overlap)) !important;
    padding-top: 0 !important;
}
body.gpa-hero-band.gpa-hero-band #page #main .entry-content > .rx-formula:first-child {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
    padding: 28px 40px !important;
    background: var(--gpa-surface) !important;
    box-shadow: var(--gpa-shadow-lg) !important;
}
body.gpa-hero-band.gpa-hero-band #page #main .entry-content > .rx-formula:first-child > p.rx-pill:not(#root *) { text-wrap: balance; }
body.gpa-hero-band.gpa-hero-band #page #main .entry-content > .rx-formula:first-child > .wp-block-columns {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--gpa-border) !important;
    gap: 24px !important;
}
body.gpa-hero-band.gpa-hero-band #page #main .entry-content > .rx-formula:first-child .rx-def {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
@media (max-width: 640px) {
    body.gpa-hero-band.gpa-hero-band #page #main .entry-content > .rx-formula:first-child { padding: 24px 20px !important; }
    body.gpa-hero-band.gpa-hero-band #page #main .entry-content > .rx-formula:first-child > .wp-block-columns { gap: 12px !important; }
    body.gpa-hero-band.gpa-hero-band #page #main .entry-content > .rx-formula:first-child > p.rx-pill:not(#root *) { font-size: 20px !important; line-height: 1.35 !important; }
}

/* ---------- 13. Page-section blocks (Digant 2026-10-05 19:36 "add the missing ones"; 19:53 "they all look same. no flare.
   no flavor": each block now has its own shape) ----------
   Patterns "Section: …" in gpa-block-patterns.php. Tokens only; icons are plain masks (no tinted circle or box behind
   them); no labels above headings. Card-like blocks span the column like tables; text-like blocks keep the text width. */

/* Shared: these lists draw their own markers */
#page #main .entry-content :is(ul.gpa-need, ol.gpa-howto, ul.gpa-when, ul.gpa-bands, ul.gpa-limits, ul.gpa-options, ul.gpa-terms, ul.gpa-timeline, ol.gpa-method) > li::before { content: none !important; display: none !important; }
#page #main .entry-content :is(ol.gpa-howto, ul.gpa-bands, ul.gpa-options):not(#gpa-x) {
    list-style: none !important; padding: 0 !important; max-width: none !important; margin: 0 0 var(--gpa-sec-gap, 32px) !important;
}
#page #main .entry-content :is(ul.gpa-need, ul.gpa-terms, ul.gpa-when, ul.gpa-limits, ul.gpa-timeline, ol.gpa-method):not(#gpa-x) { list-style: none !important; padding-left: 0 !important; }
#page #main .entry-content :is(ul.gpa-need, ol.gpa-howto, ul.gpa-when, ul.gpa-bands, ul.gpa-limits, ul.gpa-options, ul.gpa-terms, ul.gpa-timeline, ol.gpa-method) > li:not(#gpa-x) {
    position: relative; margin: 0 !important; padding-left: 0 !important;
}

/* Key takeaways: room before the next paragraph when the panel sits mid-section */
#page #main .entry-content :is(.gpa-takeaways, .is-style-gpa-takeaways):not(#gpa-x) { margin-bottom: 24px !important; }

/* Summary: the page's answer as a big lead sentence on a brand-gradient rule (no panel: the formula box owns the tinted panel) */
#page #main .entry-content .gpa-summary:not(#gpa-x) {
    max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; margin: 0 auto var(--gpa-sec-gap, 32px) !important; padding: 4px 0 4px 24px !important;
    background: linear-gradient(var(--gpa-blue-600), var(--gpa-indigo-700)) left top / 5px 100% no-repeat;
}
#page #main .entry-content .gpa-summary > p:not(#gpa-x) { max-width: none !important; margin: 12px 0 0 !important; font-size: 17px !important; line-height: 1.6 !important; color: var(--gpa-text-secondary) !important; }
#page #main .entry-content .gpa-summary > p:first-child:not(#gpa-x) { margin-top: 0 !important; font-size: 24px !important; line-height: 1.4 !important; font-weight: 600 !important; color: var(--gpa-heading) !important; letter-spacing: -.015em; }

/* What you need: a compact checklist with green checks (Digant 21:02: cards only when content needs them) */
#page #main .entry-content ul.gpa-need:not(#gpa-x) { max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; margin-left: auto !important; margin-right: auto !important; }
#page #main .entry-content ul.gpa-need > li:not(#gpa-x) { padding: 5px 0 5px 34px !important; font-size: 17px !important; line-height: 1.55 !important; color: var(--gpa-text-strong) !important; }
#page #main .entry-content ul.gpa-need > li::after { content: ""; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; background: var(--gpa-green-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* How to use: big gradient step numbers on a progress line; a column per step on wide screens */
#page #main .entry-content ol.gpa-howto:not(#gpa-x) { counter-reset: gpa-howto; max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; margin-left: auto !important; margin-right: auto !important; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 24px; }
#page #main .entry-content ol.gpa-howto > li:not(#gpa-x) {
    counter-increment: gpa-howto; padding-top: 18px !important; border-top: 3px solid var(--gpa-indigo-200);
    font-size: 16px !important; line-height: 1.55 !important; color: var(--gpa-text) !important;
}
#page #main .entry-content ol.gpa-howto > li:first-child:not(#gpa-x) { border-top-color: var(--gpa-primary); }
#page #main .entry-content ol.gpa-howto > li::after {
    content: counter(gpa-howto); position: static; display: block; order: -1; margin-bottom: 8px;
    font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
    background: var(--gpa-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#page #main .entry-content ol.gpa-howto > li:not(#gpa-x) { display: flex; flex-direction: column; }
#page #main .entry-content ol.gpa-howto > li > strong:first-child:not(#gpa-x) { display: block; margin-bottom: 4px; font-size: 18px !important; color: var(--gpa-heading) !important; }

/* When to use it: one situation per row behind an indigo arrow */
#page #main .entry-content ul.gpa-when > li:not(#gpa-x) {
    padding: 14px 0 14px 40px !important; border-bottom: 1px solid var(--gpa-border);
    font-size: 18px !important; line-height: 1.5 !important; color: var(--gpa-text-strong) !important;
}
#page #main .entry-content ul.gpa-when > li:first-child:not(#gpa-x) { border-top: 1px solid var(--gpa-border); }
#page #main .entry-content ul.gpa-when > li::after { content: ""; position: absolute; left: 4px; top: 17px; width: 22px; height: 22px; background: var(--gpa-accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Understanding your results: a 0-to-top colour scale, then one coloured band per range (best first, up to four) */
#page #main .entry-content ul.gpa-bands:not(#gpa-x) { display: grid; gap: 8px; }
#page #main .entry-content ul.gpa-bands::before {
    content: ""; display: block; height: 10px; margin-bottom: 12px; border-radius: 999px;
    background: linear-gradient(90deg, var(--gpa-green-500), var(--gpa-blue-500) 25%, var(--gpa-amber-400) 55%, var(--gpa-red-500));
}
#page #main .entry-content ul.gpa-bands > li:not(#gpa-x) {
    --band: var(--gpa-green-700); --band-bg: var(--gpa-green-50); --band-line: var(--gpa-green-500);
    display: grid; grid-template-columns: 150px 1fr; column-gap: 20px; align-items: baseline;
    padding: 16px 20px !important; background: var(--band-bg); border-left: 4px solid var(--band-line); border-radius: 0 12px 12px 0;
    font-size: 16px !important; line-height: 1.5 !important; color: var(--gpa-text) !important;
}
#page #main .entry-content ul.gpa-bands > li:nth-child(2):not(#gpa-x) { --band: var(--gpa-blue-700); --band-bg: var(--gpa-blue-50); --band-line: var(--gpa-blue-500); }
#page #main .entry-content ul.gpa-bands > li:nth-child(3):not(#gpa-x) { --band: var(--gpa-amber-800); --band-bg: var(--gpa-amber-50); --band-line: var(--gpa-amber-500); }
#page #main .entry-content ul.gpa-bands > li:nth-child(4):not(#gpa-x) { --band: var(--gpa-red-700); --band-bg: var(--gpa-red-50); --band-line: var(--gpa-red-500); }
#page #main .entry-content ul.gpa-bands > li > strong:first-child:not(#gpa-x) { color: var(--band) !important; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Limitations: a dashed "not covered" panel with a muted slashed-circle marker */
#page #main .entry-content ul.gpa-limits:not(#gpa-x) { padding: 18px 22px !important; background: var(--gpa-surface-subtle); border: 1px dashed var(--gpa-border-strong); border-radius: 12px; }
#page #main .entry-content ul.gpa-limits > li:not(#gpa-x) { padding: 6px 0 6px 32px !important; font-size: 17px !important; line-height: 1.55 !important; }
#page #main .entry-content ul.gpa-limits > li::after { content: ""; position: absolute; left: 0; top: 10px; width: 20px; height: 20px; background: var(--gpa-slate-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.9 4.9 14.2 14.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Other ways to do it: one row per option, name on the left and when to pick it on the right; one accent colour */
#page #main .entry-content ul.gpa-options:not(#gpa-x) { display: grid; gap: 10px; }
#page #main .entry-content ul.gpa-options > li:not(#gpa-x) {
    display: grid; grid-template-columns: minmax(180px, 34%) 1fr; column-gap: 24px; align-items: baseline;
    padding: 18px 22px !important; background: var(--gpa-surface); border: 1px solid var(--gpa-border); border-left: 4px solid var(--gpa-primary);
    border-radius: 12px; font-size: 16px !important; line-height: 1.55 !important; color: var(--gpa-text) !important;
}
#page #main .entry-content ul.gpa-options > li > strong:first-child:not(#gpa-x) { font-size: 17px !important; line-height: 1.4; color: var(--gpa-heading) !important; }
#page #main .entry-content ul.gpa-options > li > strong:first-child > a:not(#gpa-x) { color: inherit !important; text-decoration: none !important; }
#page #main .entry-content ul.gpa-options > li > strong:first-child > a::after { content: "\00a0→"; color: var(--gpa-primary); }
#page #main .entry-content ul.gpa-options > li > strong:first-child > a:hover { color: var(--gpa-primary) !important; }
#page #main .entry-content ul.gpa-options > li:has(> strong > a) { position: relative; }
#page #main .entry-content ul.gpa-options > li > strong:first-child > a::before { content: ""; position: absolute; inset: 0; border-radius: 12px; }
#page #main .entry-content ul.gpa-options > li:has(> strong > a):hover { border-color: var(--gpa-primary); }

/* Troubleshooting: each problem opens to its fix */
#page #main .entry-content .gpa-trouble:not(#gpa-x) { margin: 0 0 var(--gpa-sec-gap, 32px) !important; border: 1px solid var(--gpa-border); border-radius: 12px; overflow: hidden; background: var(--gpa-surface); }
#page #main .entry-content .gpa-trouble > details:not(#gpa-x) { margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--gpa-border) !important; border-radius: 0 !important; background: none !important; max-width: none !important; }
#page #main .entry-content .gpa-trouble > details:last-child:not(#gpa-x) { border-bottom: 0 !important; }
#page #main .entry-content .gpa-trouble > details > summary:not(#gpa-x) {
    position: relative; display: block; list-style: none; cursor: pointer; margin: 0 !important;
    padding: 16px 52px 16px 54px !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.45 !important;
    color: var(--gpa-text-strong) !important; background: none !important;
}
#page #main .entry-content .gpa-trouble > details > summary::-webkit-details-marker { display: none; }
#page #main .entry-content .gpa-trouble > details > summary::before { content: ""; position: absolute; left: 20px; top: 17px; width: 22px; height: 22px; background: var(--gpa-slate-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
#page #main .entry-content .gpa-trouble > details > summary::after { content: ""; position: absolute; right: 20px; top: 19px; width: 18px; height: 18px; background: var(--gpa-text-muted); transition: transform .15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
#page #main .entry-content .gpa-trouble > details[open] > summary::after { transform: rotate(180deg); }
#page #main .entry-content .gpa-trouble > details > summary:hover { background: var(--gpa-surface-subtle) !important; }
#page #main .entry-content .gpa-trouble > details > summary:focus-visible { outline: 2px solid var(--gpa-primary); outline-offset: -2px; }
#page #main .entry-content .gpa-trouble > details > p:not(#gpa-x) { max-width: none !important; margin: -4px 0 0 !important; padding: 0 24px 18px 54px !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--gpa-text) !important; }
#page #main .entry-content .gpa-trouble > details > p > strong:first-child:not(#gpa-x) { color: var(--gpa-text-strong) !important; } /* "Fix:" in plain strong text; green is a status color */

/* How we calculate it: the formula box, then the steps with plain accent numbers (C-30, 2026-10-05: no circles behind numbers) */
#page #main .entry-content ol.gpa-method:not(#gpa-x) { counter-reset: gpa-method; }
#page #main .entry-content ol.gpa-method > li:not(#gpa-x) { counter-increment: gpa-method; padding: 0 0 14px 34px !important; font-size: 17px !important; line-height: 1.55 !important; }
#page #main .entry-content ol.gpa-method > li:last-child:not(#gpa-x) { padding-bottom: 0 !important; }
#page #main .entry-content ol.gpa-method > li::after {
    content: counter(gpa-method) "."; position: absolute; left: 0; top: 0; width: 24px;
    color: var(--gpa-accent); font-size: 17px; font-weight: 700; line-height: 1.55; font-variant-numeric: tabular-nums;
}

/* Download: one pale file card with a normal-size blue button; the calculator and result keep the strongest emphasis.
   Only for files that exist. */
#page #main .entry-content .gpa-download:not(#gpa-x) {
    display: flex; align-items: center; gap: 16px; margin: 0 0 var(--gpa-sec-gap, 32px) !important; padding: 18px 20px !important;
    background: var(--gpa-tint-blue); border: 1px solid var(--gpa-border); border-radius: 12px;
}
#page #main .entry-content .gpa-download::before { content: ""; flex: none; width: 32px; height: 32px; background: var(--gpa-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3 3 3-3'/%3E%3C/svg%3E") center / contain no-repeat; }
#page #main .entry-content .gpa-download > .gpa-download__text { flex: 1; min-width: 0; }
#page #main .entry-content .gpa-download p.gpa-download__title:not(#gpa-x) { max-width: none !important; margin: 0 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--gpa-heading) !important; }
#page #main .entry-content .gpa-download p.gpa-download__meta:not(#gpa-x) { max-width: none !important; margin: 2px 0 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: var(--gpa-text-muted) !important; }
#page #main .entry-content .gpa-download > p:last-child:not(#gpa-x) { max-width: none !important; margin: 0 !important; flex: none; }
#page #main .entry-content .gpa-download a.gpa-btn.gpa-btn-primary:not(#gpa-x) { min-height: 40px !important; padding: 0 18px !important; font-size: 15px !important; }

/* Glossary: a plain two-column definition list, terms A to Z */
#page #main .entry-content ul.gpa-terms:not(#gpa-x) { max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; margin-left: auto !important; margin-right: auto !important; border-top: 1px solid var(--gpa-border); }
#page #main .entry-content ul.gpa-terms > li:not(#gpa-x) {
    display: grid; grid-template-columns: 180px 1fr; column-gap: 24px; padding: 14px 0 !important; border-bottom: 1px solid var(--gpa-border);
    font-size: 16px !important; line-height: 1.55 !important; color: var(--gpa-text) !important;
}
#page #main .entry-content ul.gpa-terms > li > strong:first-child:not(#gpa-x) { color: var(--gpa-heading) !important; font-weight: 700 !important; }

/* Updates: the latest meaningful change on show; older ones behind "Earlier updates" (a full timeline only where rules or data change) */
#page #main .entry-content ul.gpa-timeline > li:not(#gpa-x) { padding: 0 0 22px 30px !important; font-size: 16px !important; line-height: 1.55 !important; }
#page #main .entry-content ul.gpa-timeline > li:last-child:not(#gpa-x) { padding-bottom: 0 !important; }
#page #main .entry-content ul.gpa-timeline > li::after { content: ""; position: absolute; left: 1px; top: 5px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--gpa-primary); background: var(--gpa-surface); }
#page #main .entry-content ul.gpa-timeline > li:not(:first-child)::after { border-color: var(--gpa-gray-400); }
#page #main .entry-content .gpa-updates-more ul.gpa-timeline > li::after { border-color: var(--gpa-gray-400); }
#page #main .entry-content ul.gpa-timeline > li:not(:last-child) { background: linear-gradient(var(--gpa-border), var(--gpa-border)) 6px 22px / 2px calc(100% - 22px) no-repeat; }
#page #main .entry-content ul.gpa-timeline > li > strong:first-child:not(#gpa-x) { display: block; font-size: 14px !important; font-weight: 600 !important; color: var(--gpa-primary) !important; font-variant-numeric: tabular-nums; }
#page #main .entry-content :is(ul.gpa-timeline > li:not(:first-child), .gpa-updates-more ul.gpa-timeline > li) > strong:first-child:not(#gpa-x) { color: var(--gpa-text-muted) !important; }
#page #main .entry-content details.gpa-updates-more:not(#gpa-x) { max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; margin: 14px auto var(--gpa-sec-gap, 32px) !important; padding: 0 !important; border: 0 !important; background: none !important; }
#page #main .entry-content details.gpa-updates-more > summary:not(#gpa-x) {
    display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; margin: 0 0 0 30px !important; padding: 6px 0 !important;
    font-size: 15px !important; font-weight: 600 !important; color: var(--gpa-primary) !important; background: none !important; border: 0 !important;
}
#page #main .entry-content details.gpa-updates-more > summary::-webkit-details-marker { display: none; }
#page #main .entry-content details.gpa-updates-more > summary::after { content: ""; width: 16px; height: 16px; background: currentColor; transition: transform .15s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
#page #main .entry-content details.gpa-updates-more[open] > summary::after { transform: rotate(180deg); }
#page #main .entry-content details.gpa-updates-more[open] > summary { margin-bottom: 12px !important; }

/* Disclaimer: a quiet footnote panel with a shield, no heading of its own */
#page #main .entry-content .gpa-disclaimer:not(#gpa-x) {
    position: relative; max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; margin: 0 auto 20px !important; padding: 16px 20px 16px 54px !important;
    background: var(--gpa-surface-subtle); border-radius: 12px;
}
#page #main .entry-content .gpa-disclaimer::before { content: ""; position: absolute; left: 20px; top: 17px; width: 20px; height: 20px; background: var(--gpa-slate-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
#page #main .entry-content .gpa-disclaimer > p:not(#gpa-x) { max-width: none !important; margin: 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--gpa-text-secondary) !important; }
#page #main .entry-content .gpa-disclaimer > p > strong:first-child:not(#gpa-x) { color: var(--gpa-text-strong) !important; }

/* Feedback line: one quiet line with a mail icon and an inline link (the calculator keeps the emphasis) */
#page #main .entry-content p.gpa-report:not(#gpa-x) {
    position: relative; padding-left: 28px !important; margin-top: 24px !important; margin-bottom: var(--gpa-sec-gap, 32px) !important;
    font-size: 15px !important; line-height: 1.5 !important; color: var(--gpa-text-secondary) !important;
}
#page #main .entry-content p.gpa-report::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; background: var(--gpa-slate-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat; }
#page #main .entry-content p.gpa-report > a.gpa-report__link:not(#gpa-x) {
    display: inline-block; padding: 11px 0; margin: -11px 0; font-weight: 600; color: var(--gpa-primary) !important; /* 44px tap height */
    text-decoration: underline !important; text-decoration-color: var(--gpa-blue-200) !important; text-underline-offset: 3px;
}
#page #main .entry-content p.gpa-report > a.gpa-report__link:hover { text-decoration-color: currentColor !important; }
#page #main .entry-content p.gpa-report > .gpa-report__thanks { font-weight: 600; color: var(--gpa-green-700); }
/* Feedback form: opens under the line (feedback.js), only where the intake is installed */
#page #main .entry-content form.gpa-feedback:not(#gpa-x) {
    display: grid; gap: 16px; margin: -12px auto var(--gpa-sec-gap, 32px) !important; padding: 20px; max-width: min(var(--gpa-text-max), calc(100% - 80px)) !important; box-sizing: border-box;
    background: var(--gpa-surface-subtle); border: 1px solid var(--gpa-border); border-radius: 12px; font-size: 15px;
}
#page #main .entry-content form.gpa-feedback[hidden]:not(#gpa-x) { display: none; }
#page #main .entry-content .gpa-feedback__kind { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; border: 0; }
#page #main .entry-content .gpa-feedback__kind legend { width: 100%; margin-bottom: 0; padding: 0; font-weight: 600; color: var(--gpa-text-strong); }
#page #main .entry-content .gpa-feedback label { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--gpa-text); cursor: pointer; }
#page #main .entry-content .gpa-feedback input[type=radio], #page #main .entry-content .gpa-feedback input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--gpa-primary); }
#page #main .entry-content .gpa-feedback__field { flex-direction: column; align-items: stretch !important; gap: 6px !important; }
#page #main .entry-content .gpa-feedback__field > span:first-child { font-weight: 600; color: var(--gpa-text-strong); }
#page #main .entry-content .gpa-feedback :is(textarea, input[type=email]) {
    width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--gpa-text);
    background: var(--gpa-surface); border: 1px solid var(--gpa-border-strong); border-radius: 8px; box-sizing: border-box;
}
#page #main .entry-content .gpa-feedback :is(textarea, input[type=email]):focus { outline: 2px solid var(--gpa-primary); outline-offset: 1px; }
#page #main .entry-content .gpa-feedback__err { font-size: 14px; color: var(--gpa-red-700); }
#page #main .entry-content .gpa-feedback__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#page #main .entry-content .gpa-feedback__attach details { margin: 0 0 0 26px; font-size: 14px; }
#page #main .entry-content .gpa-feedback__attach summary { display: list-item; line-height: 40px; cursor: pointer; color: var(--gpa-primary); }
#page #main .entry-content .gpa-feedback__attach pre { max-height: 160px; overflow: auto; margin: 0; padding: 0; font: inherit; font-size: 14px; line-height: 1.6; white-space: pre-wrap; color: var(--gpa-text-secondary); background: none; border: 0; }
#page #main .entry-content .gpa-feedback__actions { display: flex; align-items: center; gap: 16px; }
#page #main .entry-content .gpa-feedback__actions .gpa-btn { min-height: 40px; padding: 0 20px; font-size: 15px; }
#page #main .entry-content .gpa-feedback__cancel { min-height: 40px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--gpa-text-secondary); cursor: pointer; }
#page #main .entry-content .gpa-feedback__status { margin: 0 !important; font-size: 14px !important; color: var(--gpa-text-secondary) !important; }
#page #main .entry-content .gpa-feedback__status.is-error { font-weight: 600; color: var(--gpa-red-700) !important; }
#page #main .entry-content .gpa-feedback__status:empty { display: none; }

@media (max-width: 640px) {
    #page #main .entry-content form.gpa-feedback:not(#gpa-x) { max-width: none !important; padding: 16px; }
    #page #main .entry-content ol.gpa-howto:not(#gpa-x) { grid-auto-flow: row; gap: 0; max-width: none !important; }
    #page #main .entry-content .gpa-disclaimer:not(#gpa-x) { max-width: none !important; }
    #page #main .entry-content ol.gpa-howto > li:not(#gpa-x) { padding: 0 0 22px 58px !important; border-top: 0; min-height: 40px; }
    #page #main .entry-content ol.gpa-howto > li:not(:last-child) { background: linear-gradient(var(--gpa-indigo-200), var(--gpa-indigo-200)) 18px 42px / 3px calc(100% - 48px) no-repeat; }
    #page #main .entry-content ol.gpa-howto > li::after { position: absolute; left: 0; top: 0; font-size: 34px; }
    #page #main .entry-content ul.gpa-bands > li:not(#gpa-x) { grid-template-columns: 1fr; row-gap: 2px; }
    #page #main .entry-content :is(ul.gpa-need, ul.gpa-terms, details.gpa-updates-more):not(#gpa-x) { max-width: none !important; }
    #page #main .entry-content :is(ul.gpa-terms, ul.gpa-options) > li:not(#gpa-x) { grid-template-columns: 1fr; row-gap: 4px; }
    #page #main .entry-content .gpa-summary:not(#gpa-x) { max-width: none !important; padding-left: 18px !important; }
    #page #main .entry-content .gpa-summary > p:first-child:not(#gpa-x) { font-size: 20px !important; }
    #page #main .entry-content .gpa-download:not(#gpa-x) { flex-wrap: wrap; align-items: flex-start; }
    #page #main .entry-content .gpa-download > p:last-child:not(#gpa-x) { flex-basis: 100%; padding-left: 48px; }
    #page #main .entry-content .gpa-trouble > details > summary:not(#gpa-x) { padding-left: 50px !important; }
    #page #main .entry-content .gpa-trouble > details > p:not(#gpa-x) { padding: 0 20px 16px 50px !important; }
}

/* Inline definition (tooltip): a term with a dotted underline; its one-sentence definition shows on hover, focus or tap.
   <span class="gpa-term" tabindex="0">term<span class="gpa-term__tip" role="tooltip">Definition.</span></span>
   The definition stays in the text for screen readers. First use of a term only, at most three per page, never on a link. */
#page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) { position: relative; display: inline; cursor: help; color: inherit; text-decoration: underline dotted var(--gpa-primary) 2px; text-underline-offset: 4px; }
#page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):focus-visible { outline: 2px solid var(--gpa-primary); outline-offset: 2px; border-radius: 3px; }
#page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) > .gpa-term__tip {
    position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: min(280px, 80vw);
    padding: 10px 12px; border-radius: 8px; background: var(--gpa-gray-900); color: var(--gpa-white);
    font-size: 14px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; letter-spacing: 0;
    box-shadow: 0 8px 24px -8px rgba(17,24,39,.45);
    opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .12s ease, transform .12s ease;
}
#page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) > .gpa-term__tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--gpa-gray-900); }
#page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):is(:hover, :focus, :focus-within) > .gpa-term__tip { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
    #page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) > .gpa-term__tip { left: 0; transform: translate(0, 4px); }
    #page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)):is(:hover, :focus, :focus-within) > .gpa-term__tip { transform: translate(0, 0); }
    #page #main .entry-content .gpa-term:not(:where(.calc-mounted, .calc-mounted *, .gpacalc-mount, .gpacalc-mount *, .gpa-calc-portal, .gpa-calc-portal *)) > .gpa-term__tip::after { left: 20px; }
}

/* Related guides cards: an open-book icon; the one-line description keeps the card's left edge (a short line centred in the flex card). */
#page #main .entry-content .rx-relcard.rx-i-book > .rx-relsub:not(#gpa-x) { align-self: stretch; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
#page :is(.entry-content, .gpacalc-mount) .rx-i-book { --rx-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); }