/* ============================================================ GoPokerPro — SINGLE-COURSE PAGE (Phase-5 branded scaffold) ------------------------------------------------------------ BRAND-05 / D-01 / D-02 / D-03. The mockup's tokens.css is MAPPED, NOT shipped — there is NO @import here; the canonical v1 token NAMES in assets/css/gpp-brand-tokens.css are the single source of truth (D-01). Every mockup token was collapsed to its nearest existing v1 token with NO new shade added (D-02); this file only references var(--gpp-*) — no bare surface hex (D-03). The single-course page therefore reads as the SAME BRAND as live /courses (square corners, flat, Lexend, no underlines, 1020px centered container). Loads AFTER gpp-brand-tokens.css (declared as the `gpp-tokens` dependency in the enqueue, handle `gpp-single-course`), so every var(--gpp-*) below resolves. Phase-5 SCOPE (scaffold ONLY — CONTEXT D-13/D-14): 1. TB-frame width fix + branded shell (body.single-course #content) 2. The 5 labeled placeholder section mounts (.gpp-sc-mount) 3. The throwaway per-persona state readout (.gpp-sc-readout) The REAL sections (Course Header — Phase 6; Action Bar / Value Strip / Instructor — Phase 7; Syllabus hero — Phase 8) are OUT OF SCOPE here. Do NOT style them in this file. Brand law (binding, carries from v1 / CLAUDE.md): border-radius: 0 everywhere (Phase 5 ships ZERO rounded elements — the ring SVG + 54px .inst-photo are Phase 6/7) · flat (no drop shadow) · Lexend via var(--gpp-font*) · no underlined link text anywhere (affordance = color/ weight) · var(--gpp-*) only (the sanctioned rgba(246,166,100,…) gold-tints v1 already ships are the only literal-rgba allowed). CSS is RISKLESS to deploy — overwrite freely (NOT subject to the kill-switch-first PHP procedure). ============================================================ */ /* ------------------------------------------------------------ 0. Square corners + no-underline brand law (BRAND-04 / D-03) ------------------------------------------------------------ GoPokerPro never uses rounded corners and never underlines link text — link affordance is color/weight. Phase 5 ships no round elements at all, so border-radius:0 is universal here. ------------------------------------------------------------ */ body.single-course *, .gpp-sc * { box-sizing: border-box; } body.single-course .gpp-sc *, .gpp-sc * { border-radius: 0; } /* square — no rounded elements ship in Phase 5 */ body.single-course .gpp-sc a { text-decoration: none; } /* no underlines — affordance is color/weight */ /* ------------------------------------------------------------ 1. TB-frame width fix + branded shell ------------------------------------------------------------ The live single-course page renders through the SAME Divi Theme Builder frame as /courses (#et-main-area > #container > #content) — there is NO classic-Divi #left-area/.container/ #sidebar here. Retarget the shipped v1 hotfix verbatim (v1 used body.post-type-archive-course #content, commit bea12cb) to constrain the actual TB content wrapper to the 1020px centered column. single-course.css only loads on a single course (is_singular('course')), so this #content rule cannot affect any other page. ------------------------------------------------------------ */ body.single-course #content { max-width: 1020px !important; margin: 0 auto !important; box-sizing: border-box; /* keep the 24/12px side padding INSIDE the 1020px cap (match the catalog #content recipe; don't rely on a universal reset surviving Divi's cascade) */ /* Container gutter — MATCH THE /courses CATALOG EXACTLY (founder decision 2026-06-11): 24px desktop → 12px ≤480px, carried on #content (the Divi TB content wrapper) with !important, mirroring the v1 catalog `body.post-type-archive-course #content` fix (curriculum.css) which PROVED Divi needs !important on this wrapper's padding. `.gpp-sc` side padding is zeroed (below) so the gutter lives in ONE place and the card content + the page heading/rule share the same left/right edge — and the single-course page renders at the SAME width as /courses (1020px container, 24/12 gutter). */ padding-left: 24px !important; padding-right: 24px !important; background: var(--gpp-bg); color: var(--gpp-ink); font-family: var(--gpp-font); } @media (max-width: 480px) { /* Catalog mobile gutter — matches curriculum.css `.gpp-curric-wrap` 12px @≤480px. */ body.single-course #content { padding-left: 12px !important; padding-right: 12px !important; } } /* Page canvas — deep navy on the TB wrappers (mirrors the v1 catalog-body chrome recipe, retargeted to the single course). */ body.single-course, body.single-course #page-container, body.single-course #main-content { background-color: var(--gpp-bg); } /* Container wrapper — HARNESS-ONLY scaffold (1020px centered). NOTE: `.gpp-sc` is emitted ONLY by the test harness (render-single-course.php wraps the mounts in it); the LIVE page has NO `.gpp-sc` — the 5 sections mount directly onto lifterlms_single_course_after_summary and the 1020px container + gutter come SOLELY from `body.single-course #content` (above). So on live this rule is inert; it exists so the harness preview matches the live #content geometry. The side gutter is carried by #content (24px → 12px ≤480px, == /courses), so .gpp-sc has ZERO horizontal padding and the harness card content spans the full content column (== the page heading/rule, == the catalog cards). Vertical 48px top/bottom unchanged. (Was `48px 20px` → 32px ≥720px; SUPERSEDED 2026-06-11 by the founder's catalog-match decision — supersedes the frozen-mockup 20/32px value and the 07-UI-SPEC gutter.) */ .gpp-sc { max-width: 1020px; margin: 0 auto; padding: 48px 0; font-family: var(--gpp-font); color: var(--gpp-ink); } /* WR-02 resolution (founder-approved 2026-06-11) — neutralize Divi 4's GLOBAL `.container` (max-width + side padding) on the syllabus `.container` wrapper (inc/single-course-syllabus.php), so on live it does NOT re-inset the syllabus relative to the other mounts (header/action-bar/instructor have no .container). SCOPED TO `#content .container` (NOT page-wide `.container`, NOT the harness-only `.gpp-sc .container`): - `.gpp-sc` is HARNESS-ONLY (live mounts emit directly onto lifterlms_single_course_after_summary with no .gpp-sc parent), so a .gpp-sc-gated rule is INERT on live — exactly where WR-02 bites. - A PAGE-WIDE `body.single-course .container` would ALSO zero Divi's header/footer `.container` chrome (#main-header / #main-footer use .container) → broken site chrome. `#content .container` confines the reset to the TB content region where our syllabus .container lives (mirrors the catalog's own `#main-content .container` scoping at curriculum.css:54). Specificity (1,1,1) beats Divi's plain `.container`. No-op in the harness (.container is unstyled there → the declarations match but change nothing visible). LIVE-VERIFY the syllabus left edge lines up with the header rule (add !important, or the inc/ rename to .gpp-sc-syl-inner, if Divi's .container proves more specific). */ body.single-course #content .container { /* CONFIRMED LIVE 2026-06-11: Divi 4's global `.container` is `width:80%; max-width:1080px; margin:auto`, which inset the syllabus ~40px while the rest of the page (header/rule/action-bar/instructor — no .container) stayed full-width. Reset ALL of Divi's sizing — incl. `width` (the piece the first pass missed) — and use !important, since Divi's `.container` was winning. */ width: auto !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Belt-and-suspenders suppression of any stray default LifterLMS/ Divi sidebar/meta on the single-course body — the PHP unhook removes them at source; this is the visual fallback only. DEPLOY: live-verify stray TB chrome (hit the TB DOM twice, same as v1) — the exact stray selectors are confirmed on the real live DOM during the Phase-9 deploy pass. */ body.single-course #content .llms-meta-info, body.single-course #content .llms-author, body.single-course #content #sidebar { display: none; } /* ------------------------------------------------------------ 1.5 Restricted-access notice (LifterLMS "must enrol" message) ------------------------------------------------------------ When a logged-out / no-access user opens a gated course, LifterLMS prints `ul.llms-notice.llms-error > li` carrying "You must enrol in this course to access course content." Out of the box it renders ROUNDED, TALL/LOPSIDED (its default 1em 1.618em + theme
  • margins float one line in a ~64px box), in the THEME FONT, in a SALMON red too close to the gold accent. Restyle it brand-true: square, flat, Lexend, Ruby restricted-red (var(--gpp-restrict) — DISTINCT from --gpp-leak), symmetric 14px 18px padding, a baked-Ruby lock glyph, and a tight 28px gap above the .gpp-sc-head below. The box already shares the header's left/right edges (both live inside #content's 1020px / 24px-gutter column). border-radius:0 is EXPLICIT here: the universal square reset (section 0) is gated on `.gpp-sc *`, which is HARNESS-ONLY (the live notice has no .gpp-sc parent), so without this the live box keeps LifterLMS's 5px radius. !important beats LifterLMS's own llms.css + Divi list/notice rules on these properties. CSS-only — RISKLESS to deploy (no PHP, no kill-switch). Only shows for users without access (logged-out / non-enrolled); enrolled members never see it. ------------------------------------------------------------ */ body.single-course .llms-notice.llms-error { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; padding: 14px 18px !important; /* symmetric — replaces the default tall/lopsided 1em 1.618em */ list-style: none; background: linear-gradient(rgba(217,45,58,.07), rgba(217,45,58,.07)), var(--gpp-card) !important; /* Ruby tint over card navy */ border: 1px solid rgba(217,45,58,.32) !important; border-left: 3px solid var(--gpp-restrict) !important; border-radius: 0 !important; /* square (section-0 reset is harness-only) */ box-shadow: none !important; /* flat */ font-family: var(--gpp-font) !important; /* Lexend */ color: var(--gpp-white); } /* Lock glyph — baked-Ruby data-URI SVG as a leading flex item (background-image can't read currentColor, so the red is baked; it tracks --gpp-restrict by value). Square lock body + circular keyhole (genuine SVG illustration — the square-corner exception). */ body.single-course .llms-notice.llms-error::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23d92d3a' stroke-width='2'/%3E%3Crect x='4.5' y='10' width='15' height='11' fill='%23d92d3a'/%3E%3Crect x='11' y='14.5' width='2' height='3.6' fill='%230d1b2a'/%3E%3Ccircle cx='12' cy='14.2' r='1.5' fill='%230d1b2a'/%3E%3C/svg%3E") center / contain no-repeat; } body.single-course .llms-notice.llms-error li { margin: 0; padding: 0; list-style: none; font: 500 15px/1.4 var(--gpp-font); /* Lexend on the message too */ color: var(--gpp-white); } /* ------------------------------------------------------------ 2. The 5 labeled placeholder section mounts (D-13) ------------------------------------------------------------ Five stacked, labeled empty boxes (NOT real content) in the mockup's top-to-bottom order: header / actionbar / valuestrip (logged-out only) / syllabus / instructor. Appearance LOCKED (UI-SPEC §Component Inventory #2). Square, flat, var(--gpp-*). ------------------------------------------------------------ */ .gpp-sc-mount { background: var(--gpp-card); border: 1px solid var(--gpp-line); border-radius: 0; padding: 16px; margin-top: 24px; } .gpp-sc-mount:first-child { margin-top: 0; } @media (min-width: 720px) { .gpp-sc-mount { padding: 24px; margin-top: 32px; } } /* Mount label — eyebrow style (reuses the mockup .eyebrow treatment so the scaffold already reads on-brand). */ .gpp-sc-mount-label { font-family: var(--gpp-font-display); font-size: 12px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gpp-orange); } /* Sub-caption below the label — the "(Phase N — placeholder)" orienting note. AA-pass --gpp-dim (NEVER the mockup faint value, which fails AA — see FOUNDER-SIGNOFF flag 1 below). */ .gpp-sc-mount-note { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--gpp-dim); margin-top: 8px; } /* Locked-persona left strip — the visitor/locked accent on the logged-out persona's mounts (data-audience or .is-locked). */ .gpp-sc-mount[data-audience="logged-out"], .gpp-sc-mount.is-locked { border-left: 3px solid var(--gpp-lock-border); } /* ------------------------------------------------------------ 3. The throwaway per-persona state readout (D-13/D-14) ------------------------------------------------------------ A minimal debug strip proving the state engine. THROWAWAY — Phases 6–8 DELETE it. Keep it dead simple; it must NOT pull any real section content forward. Wraps gracefully at 360px. ------------------------------------------------------------ */ .gpp-sc-readout { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; background: var(--gpp-card-2); border-top: 1px solid var(--gpp-line); border-bottom: 1px solid var(--gpp-line); font-family: var(--gpp-font); font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--gpp-dim); } /* Numbers emphasis — bold white figures (9 of 22, 41%). */ .gpp-sc-readout strong, .gpp-sc-readout-num { font-weight: 600; color: var(--gpp-white); } /* Per-audience accent figures: in-progress / not-started → orange (%, next marker) completed → green (100% / complete: yes) logged-out → stays --gpp-dim (no progress). */ .gpp-sc-readout[data-audience="in-progress"] .gpp-sc-readout-accent, .gpp-sc-readout[data-audience="not-started"] .gpp-sc-readout-accent { color: var(--gpp-orange); } .gpp-sc-readout[data-audience="completed"] .gpp-sc-readout-accent { color: var(--gpp-green); } /* ------------------------------------------------------------ 4. The REAL dossier course header + "Builds on" theory pill (Phase 6 — HEAD-01..05 / CARD-03 / PILL-01/02) ------------------------------------------------------------ Ported from the mockup reference single-course.css:88-196 (.crumbs / .course-head / .head-grid / .head-cat / .facet-pill / .head-title / .builds-on / .bo-link / .ring-slot / .head-rule). The mockup's token NAMES do NOT exist in gpp-brand-tokens.css — every one is MAPPED to its verified v1 token (06-PATTERNS.md mapping table; D-01/D-02/D-03): --gpp-gold→--gpp-orange, --gpp-fg-1→--gpp-white, --gpp-fg-2→--gpp-ink, --gpp-fg-dim/ --gpp-fg-4→--gpp-dim (the AA-pass muted #9fb0c3, NEVER the AA-fail faint navies on readable text), --gpp-navy-line→--gpp-line, --gpp-navy-line-2→ --gpp-card-2; the 2px/3px gold accents + the gold-tint-14 hover wash are inlined (no token exists), reusing the sanctioned rgba(246,166,100,…) gold-tint literals v1 already ships. NO new shade added. The header renders INSIDE .gpp-sc, so it inherits the square-corner (@51) + no-underline (@52) brand resets. The LOCKED pixels-win port px (crumbs 18px, head 22px, bo-link 9px 14px 9px 13px, ring slot 195px, watermark 40px/330px, head rule 28px, title clamp(32px,8vw,54px)) are verbatim — do NOT round to the 4/8 grid (ui-checker PASSES this documented exception). CSS is RISKLESS (no kill-switch). var(--gpp-*) only. ------------------------------------------------------------ */ /* Belt-and-suspenders: kill any inherited link underline on the header's two link surfaces (the .gpp-sc a reset @52 already does this; explicit here so the header is self-contained). */ .gpp-sc-bo-link, .gpp-sc-crumbs a { text-decoration: none; } /* The header wrapper — relative so the spade watermark positions against it; 22px top pad (LOCKED port). */ .gpp-sc-head { position: relative; padding: 22px 0 0; } /* Spade watermark — decorative, behind the content (pure-CSS background; the bare div carries no data). FLEXIBLE height (UAT 2026-06-10): spans from the breadcrumb text top (top:40px = the head's 22px pad + the crumbs' 18px pad) down to the content bottom (bottom:30px = the rule's 28px margin + its 2px), so it grows/shrinks with the header content and always keeps the SAME gap to the gold rule as the content — never crossing it. aspect-ratio holds the spade's proportions as the height flexes; width follows. The SVG carries its own internal 0.1 opacity (no css opacity). url() is relative to this stylesheet → resolves in the theme AND the zero-WP harness. */ .gpp-sc-head-bg { position: absolute; top: 40px; bottom: 30px; left: 50%; transform: translateX(-50%); width: auto; aspect-ratio: 320 / 356; background: url("../Hero-bg.svg") center / contain no-repeat; pointer-events: none; z-index: 0; } .gpp-sc-head > *:not(.gpp-sc-head-bg) { position: relative; z-index: 1; } @media (max-width: 720px) { /* Responsive on mobile (UAT 2026-06-10): keep the spade anchored top:40 → bottom:30 (inherited) so it flexes with the taller mobile header and NEVER crosses the gold rule; only CAP its width to the narrow viewport and release the fixed aspect-ratio, so background:contain fits the SVG inside the resulting tall/narrow box (centered, proportions preserved) — never overflowing. */ .gpp-sc-head-bg { width: min(58%, 260px); aspect-ratio: auto; } } /* Breadcrumb — 18px top pad (LOCKED port); muted AA-pass --gpp-dim text; gold on hover/focus. The decorative '/' separator is the ONLY place a faint non-AA navy is permitted (non-text glyph, aria-hidden — UI-SPEC Color row). */ .gpp-sc-crumbs { display: flex; align-items: center; gap: 8px; padding: 18px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gpp-dim); } .gpp-sc-crumbs a { color: var(--gpp-dim); } .gpp-sc-crumbs a:hover, .gpp-sc-crumbs a:focus-visible { color: var(--gpp-orange); } .gpp-sc-crumb-sep { color: #3d5a7a; } /* decorative separator glyph ONLY — never text content */ /* Two-column dossier grid: stacked on mobile, meta-left / 195px ring-slot-right at >=820px. */ .gpp-sc-head-grid { display: flex; flex-direction: column; gap: 28px; } @media (min-width: 820px) { .gpp-sc-head-grid { flex-direction: row; align-items: start; gap: 40px; } } .gpp-sc-head-meta { flex: 1 1 auto; min-width: 0; } /* Facet pills — outline-only gold, REUSING the deployed .gpp-curric-facet treatment (D-05, byte-identical to /courses): gold text, gold-@45%-alpha border, no fill, square. The orange-at-alpha border has no token — reuse the sanctioned v1 rgba literal. */ .gpp-sc-head-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; } .gpp-sc-facet { font-family: var(--gpp-font-display); font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gpp-orange); border: 1px solid rgba(246, 166, 100, 0.45); background: transparent; padding: 2px 8px; } /* Two-line title (HEAD-03) — LOCKED clamp(32px,8vw,54px), weight 400 (the brief overrides the mockup's --disp-weight:600), uppercase, line-height 1.04. line2 (the gold .hl span) is only emitted when non-empty (no orphan gold span on single-line titles — the PHP guards it). */ .gpp-sc-head-title { font-family: var(--gpp-font-display); font-size: clamp(32px,8vw,54px); font-weight: 400; text-transform: uppercase; line-height: 1.04; color: var(--gpp-white); margin: 16px 0 0; } .gpp-sc-t-line { display: block; } .gpp-sc-hl { color: var(--gpp-orange); } /* Descriptor (HEAD-04) — AA-pass --gpp-dim; only rendered when gpp_course_descriptor() is non-empty (D-04 deferred → no reserved space this phase). */ .gpp-sc-head-desc { font-size: 16px; font-weight: 300; line-height: 1.55; color: var(--gpp-dim); max-width: 46ch; margin: 12px 0 0; } /* "Builds on" wayfinding (CARD-03 / PILL-01) — the GPP signature 3px gold left-accent on a faint navy outline. The pill resting border is --gpp-line; the 3px gold left accent + the hover wash are inlined (no token). Hover/focus = the sanctioned rgba(246,166,100,.14) gold-tint, raised-surface border, gold left accent retained; the name brightens to white. Color/bg transition only — reduced-motion-safe (no transform/opacity animation introduced). */ .gpp-sc-builds-on { display: flex; flex-direction: column; align-items: stretch; /* UAT (founder): pills equal-width — was flex-start */ width: fit-content; /* group shrinks to the widest pill … */ max-width: 100%; /* … but never overflows the meta column */ gap: 8px; margin-top: 16px; } .gpp-sc-bo-link { display: flex; /* UAT: block flex so the stretch equalizes width — was inline-flex */ align-items: center; justify-content: flex-start; /* keep icon + label left-aligned in the equalized box */ gap: 9px; white-space: normal; padding: 9px 14px 9px 13px; border: 1px solid var(--gpp-line); border-left: 3px solid var(--gpp-orange); background: transparent; color: var(--gpp-ink); font-size: 13px; line-height: 1.2; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .gpp-sc-bo-link:hover, .gpp-sc-bo-link:focus-visible { background: rgba(246, 166, 100, 0.14); border-color: var(--gpp-card-2); border-left-color: var(--gpp-orange); color: var(--gpp-white); } .gpp-sc-bo-link:hover .gpp-sc-bo-name, .gpp-sc-bo-link:focus-visible .gpp-sc-bo-name { color: var(--gpp-white); } .gpp-sc-bo-icon { display: inline-flex; flex: none; color: var(--gpp-orange); } .gpp-sc-bo-pre { flex: none; color: var(--gpp-white); } .gpp-sc-bo-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; white-space: normal; color: var(--gpp-orange); font-weight: 600; } .gpp-sc-bo-arr { flex: none; color: var(--gpp-orange); font-size: 12px; line-height: 1; } /* Ring dossier slot (HEAD-05) — centered/stacked on mobile; fixed 195px slot, right-aligned, at >=820px (LOCKED port). The shipped gpp_ring() SVG fills the slot up to 260px; shrinks ~25% (to 195px) at <=640px to free vertical space. */ .gpp-sc-ring-slot { display: flex; justify-content: center; align-items: center; } @media (min-width: 820px) { .gpp-sc-ring-slot { flex: 0 0 195px; width: 195px; justify-content: flex-end; } } .gpp-sc-ring-slot svg { width: 100%; max-width: 260px; height: auto; } @media (max-width: 640px) { /* UAT (founder, 2026-06-10): on mobile remove the position-ring seat table entirely (supersedes RESP-05's "~25% shrink ≤640px" — Phase 9 must honor hidden-on-mobile). */ .gpp-sc-ring-slot { display: none; } } /* Position-ring seat recolor (HEAD-05) — the .art layer that colors the ring's seat classes (s-hero / s-sel / s-dim / felt / t-*) lives in curriculum.css for the /courses catalog, but that sheet does NOT load on single-course pages (enqueue is gated on is_courses()), so the ring here would fall back to the SVG default black on every seat. Ported verbatim from curriculum.css:100-107 (same project tokens). */ .art { font-family: var(--gpp-font-display); } .art .felt { fill: var(--gpp-soft); stroke: var(--gpp-line); stroke-width: 2.5; } .art .s-hero { fill: var(--gpp-orange); } .art .s-sel { fill: var(--gpp-card); stroke: var(--gpp-orange); stroke-width: 2.5; } .art .s-dim { fill: var(--gpp-card); stroke: rgba(255, 255, 255, .25); stroke-width: 2.5; } .art .t-hero { fill: var(--gpp-bg); } .art .t-sel { fill: var(--gpp-orange); } .art .t-dim { fill: var(--gpp-seat-dim); } /* Gold head rule (HEAD-01) — the 2px gold dossier underline; 28px top margin (LOCKED port). 2px inlined (no --gpp-border-accent token). */ .gpp-sc-head-rule { height: 0; border: 0; border-top: 2px solid var(--gpp-orange); margin: 28px 0 0; } /* Focus-visible parity for the header's new links (reuse the v1 gold-outline pattern from curriculum.css:514-517). */ .gpp-sc-crumbs a:focus-visible, .gpp-sc-bo-link:focus-visible { outline: 2px solid var(--gpp-orange); outline-offset: 2px; } /* A11Y-05 / D-01 — keyboard focus on EVERY syllabus interactive control. The LOCKED /courses focus indicator copied verbatim from curriculum.css:514-517: keyboard-only :focus-visible, 2px gold outline, outline-offset:2px (places the gold ring on the navy page bg OUTSIDE the box → visible even around the gold-filled .cta-main; ONE rule covers every control — D-01b, no distinct filled-button style). The global *{border-radius:0} keeps the outline SQUARE (no rounded glow / box-shadow). Color is var(--gpp-orange) — never a bare hex. No underline. ADDITIVE — alters no layout, so it lives OUTSIDE any breakpoint block and applies at every viewport. Structural a11y (Enter/Space + aria-expanded + aria-controls) ALREADY ships Phase 8 (D-01c) — this adds ONLY the visible outline; the controls are not rebuilt. Builds-on theory pill uses .gpp-sc-bo-link — already covered by the existing :435-436 :focus-visible rule above; no new selector needed (D-01). */ .sec-head:focus-visible, /* section toggle