/* AI Build South Africa — shared stylesheet.
   Palette + font stack locked in PAGE-STANDARDS.md (2026-08-28).
   Reference template: these first four support pages set the pattern
   for nav/breadcrumb/footer/page-header that later hub/cluster/tool
   pages should reuse rather than re-deriving. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

#cookie-banner{display:none;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--bg-surface);border-top:2px solid var(--accent-green);padding:1rem 1.5rem;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;box-shadow:0 -4px 24px rgba(0,0,0,.4)}
#cookie-banner p{color:var(--text-primary);font-size:.82rem;margin:0;flex:1;min-width:200px;line-height:1.5}
#cookie-banner a{color:var(--accent-green)}
.cookie-btns{display:flex;gap:.75rem;flex-shrink:0;flex-wrap:wrap}
#cookie-accept{background:var(--accent-green);color:var(--bg-primary);border:none;padding:9px 20px;min-height:44px;border-radius:10px;font-weight:700;font-size:.82rem;cursor:pointer;font-family:inherit;white-space:nowrap}
#cookie-decline{background:transparent;color:var(--text-primary);border:1.5px solid var(--accent-green);padding:9px 20px;min-height:44px;border-radius:10px;font-weight:600;font-size:.82rem;cursor:pointer;font-family:inherit;white-space:nowrap}
#cookie-accept:focus-visible,#cookie-decline:focus-visible{outline:3px solid var(--text-primary);outline-offset:2px}
@media(max-width:600px){#cookie-banner{flex-direction:column;align-items:flex-start}.cookie-btns{width:100%}#cookie-accept,#cookie-decline{flex:1;text-align:center}}

/* Theme tokens — dark is this site's default/brand state (see PAGE-STANDARDS.md
   "Dark/light theme system"). Precedence, lowest to highest:
   1. :root (dark, default — wins when no system preference and no stored choice)
   2. @media(prefers-color-scheme:light), guarded by :not([data-theme="dark"]) so
      it never fights an explicit user choice
   3. [data-theme="light"] / [data-theme="dark"] — explicit toggle choice, set by
      the inline anti-FOUC script in <head> from localStorage, always wins */
:root{
  --bg-primary:#0B0F0D;
  --bg-surface:#141B18;
  --text-primary:#E7EAE8;
  --text-muted:#8B958F;
  --accent-green:#22C55E;
  --accent-green-bright:#00FF66;
  --color-warning:#EAB308;
  --color-error:#F87171;
  --border:rgba(231,234,232,0.12);
  --border-strong:rgba(231,234,232,0.2);
  --border-input:rgba(231,234,232,0.5);
  --r:10px;
  --r-lg:16px;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace;
}

:root[data-theme="light"]{
  --bg-primary:#FFFFFF;
  --bg-surface:#F1F4F2;
  --text-primary:#101512;
  --text-muted:#5C665F;
  --accent-green:#146C34;
  --accent-green-bright:#15803D;
  --color-warning:#7A5D07;
  --color-error:#B91C1C;
  --border:rgba(16,21,18,0.14);
  --border-strong:rgba(16,21,18,0.24);
  --border-input:rgba(16,21,18,0.5);
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);line-height:1.6}
h1,h2,h3,h4{line-height:1.25;font-weight:700;color:var(--text-primary)}
h1{font-size:clamp(1.8rem,4vw,2.6rem)}
h2{font-size:clamp(1.3rem,3vw,1.7rem)}
h3{font-size:1.05rem}
p{margin-bottom:1rem;color:var(--text-primary)}
a,a:visited{color:var(--accent-green);text-decoration:underline}
a:hover{color:var(--accent-green)}
ul{list-style:none}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.section{padding:3.5rem 0}
.section-sm{padding:2.5rem 0}

.skip-link{position:absolute;top:-52px;left:0;min-height:44px;display:inline-flex;align-items:center;background:var(--accent-green);color:var(--bg-primary);padding:8px 16px;font-weight:700;font-size:0.88rem;border-radius:0 0 8px 0;z-index:1000;transition:top 0.2s;text-decoration:none}
.skip-link:focus{top:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon-inline{width:15px;height:15px;flex-shrink:0}

.field-toggle{opacity:1;transition:opacity 0.2s ease}
.field-toggle.is-fading{opacity:0}
@media(prefers-reduced-motion:reduce){.field-toggle{transition:none}}

.nav{background:var(--bg-surface);position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;max-width:1200px;margin:0 auto}
.nav-logo{min-height:44px;font-size:1.2rem;font-weight:800;color:var(--text-primary);text-decoration:none;font-family:var(--font-mono);display:inline-flex;align-items:center;gap:8px}
.nav-logo img{height:22px;width:22px;display:block}
.nav-logo:visited{color:var(--text-primary)}
.nav-logo span{color:var(--accent-green)}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-links{display:flex;gap:1.75rem;align-items:center;line-height:1}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-muted);font-size:0.9rem;font-weight:500;text-decoration:none;transition:color 0.2s}
.nav-links a:hover,.nav-links a.active{color:var(--accent-green)}
.nav-links a:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;min-width:44px;min-height:44px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text-primary);margin:5px 0;transition:0.3s}

/* Nav dropdowns — six content pillars grouped under "Guides" so the top level
   stays at four items (see docs/core-concept.md §3 for the pillars, and
   docs/fix-and-add-tracker.md P2-1 for why a dropdown rather than 10 tabs).
   The submenu order follows the journey spine (Understand → Prompt → Build →
   Integrate → Diagnose/Fix → Deploy) so the menu itself teaches the sequence. */
.nav-has-menu{position:relative}
.nav-menu-btn{display:inline-flex;align-items:center;gap:5px;min-height:44px;background:none;border:none;padding:0;font-family:inherit;font-size:0.9rem;font-weight:500;color:var(--text-muted);cursor:pointer;transition:color 0.2s}
.nav-menu-btn:hover,.nav-has-menu.open .nav-menu-btn,.nav-menu-btn.active{color:var(--accent-green)}
.nav-menu-btn:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.nav-chev{transition:transform 0.2s;flex-shrink:0}
.nav-has-menu.open .nav-chev{transform:rotate(180deg)}
.nav-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:190px;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:0.6rem 0.4rem 0.4rem;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:120}
.nav-has-menu.open .nav-menu{display:block}
.nav-menu li{display:block}
.nav-menu a{display:block;width:100%;min-height:0;padding:9px 12px;border-radius:6px;font-size:0.88rem;white-space:nowrap}
.nav-menu a:hover,.nav-menu a.active{color:var(--accent-green);background:rgba(34,197,94,0.1)}

@media(max-width:768px){
  /* Mobile: flatten the dropdown rather than nesting a menu inside the
     hamburger. The Guides button is hidden and its six links render always
     open, indented 0.9rem under Home with no visible label (row 24). */
  .nav-has-menu{position:static}
  .nav-menu-btn{display:none}
  .nav-menu{display:block;position:static;transform:none;min-width:0;background:none;border:none;border-top:1px solid var(--border);border-radius:0;padding:0.35rem 0 0.5rem;margin-top:0.35rem;box-shadow:none}
  .nav-links .nav-menu a{display:flex;align-items:center;min-height:44px;padding:10px 0 10px 0.9rem;font-size:0.9rem}
  .nav-menu a:hover,.nav-menu a.active{background:none}
}

.theme-toggle{background:none;border:1px solid var(--border-strong);border-radius:8px;padding:8px;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:color 0.2s,border-color 0.2s}
.theme-toggle:hover{color:var(--accent-green);border-color:var(--accent-green)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="dark"]) .theme-toggle .icon-moon{display:block}
}

@media(max-width:768px){
  .nav-links{display:none;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;background:var(--bg-surface);padding:0.5rem 1.5rem;gap:0;border-bottom:1px solid var(--border)}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 0}
  .nav-links>li>a{display:flex}
  .nav-toggle{display:block}
  .nav-inner{position:relative}
}

.breadcrumb{background:var(--bg-surface);padding:0.75rem 0;border-bottom:1px solid var(--border)}
.breadcrumb ol{display:flex;list-style:none;gap:0.5rem;align-items:center;font-size:0.8rem;flex-wrap:wrap}
.breadcrumb li{color:var(--text-muted)}
.breadcrumb li+li::before{content:'›';margin-right:0.5rem;color:var(--text-muted)}
.breadcrumb a{position:relative;color:var(--text-muted);text-decoration:none}
/* Touch target: the visible link stays small; this invisible box takes the hit area to 44px (Section 5). */
.breadcrumb a::after{content:'';position:absolute;inset:-14px -9px}
.breadcrumb a:hover{color:var(--accent-green)}
.breadcrumb li:last-child{color:var(--text-primary);font-weight:600}

.page-header{background:var(--bg-surface);min-height:292px;display:flex;align-items:center;padding:2rem 0;border-bottom:1px solid var(--border)}
.page-header .badge{display:inline-block;background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.35);color:var(--accent-green);font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:1rem}
.page-header h1{margin-bottom:0.75rem}
.page-header p{color:var(--text-muted);font-size:1.02rem;max-width:640px;margin:0}
.page-header .updated{color:var(--text-muted);font-size:0.85rem;margin-top:1rem}

.prose{max-width:760px}
.prose h2{margin:2rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.25rem 0 0.5rem}
.prose ul{margin:0.75rem 0 1rem 1.5rem;list-style:disc}
.prose ul li{margin-bottom:6px}
.prose ol{margin:0.75rem 0 1rem 1.5rem;list-style:decimal}
.prose ol li{margin-bottom:6px}
.prose strong{color:var(--text-primary)}

.callout{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;margin:1.5rem 0}
.callout h3{color:var(--accent-green);margin-bottom:0.5rem;font-size:0.92rem}

.cta-bar{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.cta-bar p{margin:0;color:var(--text-primary);font-size:0.95rem;flex:1;min-width:200px}
.cta-bar .btn{flex-shrink:0}
.callout p{color:var(--text-muted);font-size:0.9rem;margin:0}
.callout p+p{margin-top:0.5rem}

.affiliate-cta{background:var(--bg-surface);border:1px solid var(--accent-green);border-radius:var(--r-lg);padding:1.5rem;margin:1.5rem 0;text-align:center}
.affiliate-cta-label{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.6rem}
.affiliate-cta h3{color:var(--text-primary);margin-bottom:0.5rem;font-size:1.05rem}
.affiliate-cta p{color:var(--text-muted);font-size:0.9rem;margin:0 0 1rem;max-width:520px;margin-left:auto;margin-right:auto}
.affiliate-cta .btn{margin-bottom:0.75rem}
.affiliate-cta-disclosure{font-size:0.72rem;color:var(--text-muted);margin:0!important}

.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}
a.card{transition:border-color 0.2s,transform 0.15s}
a.card:hover{border-color:var(--accent-green)}
a.card:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
@media(prefers-reduced-motion:reduce){a.card{transition:none}}
.card-heading{color:var(--text-primary);font-size:1rem;margin-bottom:1rem}

.contact-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr}}
.sidebar{display:flex;flex-direction:column;gap:1.25rem}

.field-group{margin-bottom:1.25rem}
.field-label{display:block;font-size:0.82rem;font-weight:700;color:var(--text-primary);margin-bottom:0.4rem}
.field-input{width:100%;padding:11px 14px;border:1.5px solid var(--border-input);border-radius:var(--r);font-size:1rem;font-family:inherit;color:var(--text-primary);background:var(--bg-primary);transition:border 0.2s}
.field-input:focus-visible{outline:2px solid var(--accent-green);outline-offset:1px;border-color:var(--accent-green)}
.field-input::placeholder{color:var(--text-muted)}
textarea.field-input{resize:vertical;min-height:140px}
select.field-input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:44px;background-image:linear-gradient(45deg,transparent 50%,var(--text-primary) 50%),linear-gradient(135deg,var(--text-primary) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
@media(forced-colors:active){select.field-input{-webkit-appearance:auto;appearance:auto;background-image:none;padding-right:14px}}
/* Custom Prompt Builder: "what must not change" emphasis, why-toggle, answer checks */
.pb-must-keep{border-left:3px solid var(--accent-green);padding-left:0.85rem}
.tool-form .pb-access{margin:0}
.pb-output-head{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;margin-bottom:0.5rem}
.pb-output-head h4{margin:0}
.pb-why-toggle{background:transparent;border:1px solid var(--border-input);transition:color 0.2s,border-color 0.2s;border-radius:6px;padding:6px 12px;min-height:44px;font-size:0.78rem;font-weight:600;font-family:inherit;color:var(--text-primary);cursor:pointer}
.pb-why-toggle:hover,.pb-why-toggle[aria-pressed="true"]{border-color:var(--accent-green);color:var(--accent-green)}
.pb-why-toggle[aria-pressed="true"]{background:var(--bg-surface)}
.pb-why-toggle:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.prompt-output .pb-part+.pb-part{margin-top:1rem}
.pb-why{display:none;white-space:normal;font-size:0.8rem;color:var(--text-muted);border-left:2px solid var(--border-input);padding:0.2rem 0 0.2rem 0.6rem;margin-bottom:0.35rem}
.prompt-output.show-why .pb-why{display:block}
.answer-checks{margin-top:1.25rem}
.answer-checks ul{list-style:disc;margin:0;padding-left:1.2rem;font-size:0.88rem;color:var(--text-primary)}
.answer-checks li+li{margin-top:0.35rem}
.form-btn{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--r);font-weight:700;font-size:0.92rem;cursor:pointer;border:1px solid var(--accent-green);background:var(--accent-green);color:var(--bg-primary);width:100%;justify-content:center}
.form-btn:hover{background:var(--accent-green-bright);border-color:var(--accent-green-bright)}
.form-btn:focus-visible{outline:3px solid var(--text-primary);outline-offset:2px}
.form-btn[disabled]{opacity:0.7;cursor:not-allowed}
.form-status{margin-top:0.9rem;font-size:0.88rem;line-height:1.5}
.form-status:empty{display:none}
.form-status[data-state="success"]{color:var(--accent-green)}
.form-status[data-state="error"]{color:var(--color-error)}
.form-status[data-state="pending"]{color:var(--text-muted)}
.form-status a{color:inherit;text-decoration:underline}
.contact-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:1rem}
.contact-row:last-child{margin-bottom:0}
.contact-icon{width:36px;height:36px;background:var(--bg-primary);border:1px solid var(--border-strong);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem}
.contact-label{font-size:0.82rem;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.contact-value{font-size:0.9rem}
a.contact-value,.link-target{display:inline-flex;align-items:center;min-height:44px}
.contact-sub{font-size:0.78rem;color:var(--text-muted)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--r);font-weight:700;font-size:0.92rem;cursor:pointer;transition:all 0.2s;border:1px solid var(--accent-green);text-decoration:none;background:var(--accent-green);color:var(--bg-primary)}
.btn:hover{background:var(--accent-green-bright);border-color:var(--accent-green-bright);color:var(--bg-primary)}
.btn:focus-visible{outline:3px solid var(--text-primary);outline-offset:2px}
.skip-link:focus-visible{outline:3px solid var(--text-primary);outline-offset:2px}

.footer{background:var(--bg-surface);border-top:1px solid var(--border);padding:3rem 0 1.5rem}
.footer-ad{text-align:center;padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--border)}
.footer-ad-label{font-size:0.7rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem}
.footer-ad-banner{display:inline-block;max-width:100%;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:1.5rem}
.footer-ad-banner img{display:block;max-width:100%;width:auto;height:auto;margin:0 auto}
.footer-ad-banner:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.footer-ad-hook{margin-top:0.85rem;margin-bottom:0;font-size:0.92rem}
.footer-ad-hook a{display:inline-flex;align-items:center;min-height:44px;padding:4px 2px;font-weight:600;text-decoration:underline}
.footer-ad-hook a:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.footer-ad-disclosure{font-size:0.72rem;color:var(--text-muted);margin-top:0.35rem;margin-bottom:0}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;gap:2.5rem;margin-bottom:2rem}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:1.75rem}}
.footer-brand p{color:var(--text-muted);font-size:0.86rem;margin-top:0.75rem}
.footer-heading{font-size:0.78rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.9rem}
.footer ul li{margin-bottom:0.1rem}
.footer ul a{display:inline-flex;align-items:center;min-height:32px;padding:2px 0;color:var(--text-muted);font-size:0.86rem;text-decoration:none}
.footer ul a:hover{color:var(--accent-green)}
.footer ul a:focus-visible,.footer-bottom a:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
/* Touch targets at the mobile breakpoint: footer links reach 44px; the quick links sit in two columns so the footer does not grow. */
@media(max-width:768px){
  .footer ul a{min-height:44px;min-width:44px}
  .footer-links{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem}
  .footer-bottom p:not(.footer-fine) a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
}
.sister-links{display:flex;flex-direction:column;gap:0.5rem}
.sister-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;background:rgba(231,234,232,0.04);border:1px solid var(--border);border-radius:20px;padding:6px 14px;text-decoration:none;transition:all 0.2s}
.sister-link:hover{background:rgba(231,234,232,0.08);border-color:var(--border-strong)}
.sister-link:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.sister-name{font-size:0.78rem;font-weight:700;color:var(--text-primary);line-height:1.2}
.sister-desc{font-size:0.68rem;color:var(--text-muted)}
.sister-arrow{color:var(--text-muted);font-size:0.75rem;margin-left:auto}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem}
.footer-bottom p{font-size:0.82rem;color:var(--text-muted);margin-bottom:0.6rem}
.footer-bottom p:last-child{margin-bottom:0}
.footer-bottom a{color:var(--text-muted);text-decoration:underline}
.footer-bottom a:hover{color:var(--accent-green)}
.footer-fine{font-size:0.72rem;line-height:1.6}

/* Homepage — full-page falling-code background + glow cards. The canvas is
   position:fixed behind the whole page, not confined to the hero — html
   keeps a solid base colour as the no-JS/no-canvas fallback, body goes
   transparent so the canvas reads through everywhere. Every distinct piece
   of homepage content is a .glow-card floating on it (a solid surface +
   soft accent-coloured shadow), never a section-wide panel — a panel
   wrapping a whole section was tried first and rejected: it hid the code
   entirely and looked like a big blurred box, not a background. */
html{background:var(--bg-primary)}
body{background:transparent}
#fullpage-code-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none}

.homepage-section{padding:1.75rem 0}
.homepage-heading{margin-bottom:0.5rem}
.homepage-subtext{color:var(--text-muted);margin-bottom:1.75rem;max-width:640px}

.glow-card{
  background:var(--bg-surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  box-shadow:0 0 0 1px rgba(34,197,94,0.06), 0 8px 28px -6px rgba(34,197,94,0.28), 0 12px 32px -10px rgba(0,0,0,0.5);
}
:root[data-theme="light"] .glow-card{box-shadow:0 0 0 1px rgba(20,108,52,0.08), 0 8px 24px -8px rgba(20,108,52,0.22), 0 10px 26px -12px rgba(16,21,18,0.16)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .glow-card{box-shadow:0 0 0 1px rgba(20,108,52,0.08), 0 8px 24px -8px rgba(20,108,52,0.22), 0 10px 26px -12px rgba(16,21,18,0.16)}}
.glow-card.section-sm{padding:2rem}
.glow-card.section{padding:2.5rem}
/* .prose caps at 760px sitewide for article reading width, right for a
   cluster page, wrong on the homepage where it sits beside full-width
   cards — keep .prose's typography, drop just the width cap. */
/* A glow card spans the full 1200px container so it lines up with the card
   grids around it, but the prose inside it still holds reading measure.
   Measure is a content decision, not a card decision — see
   docs/core-concept.md §6.4. Before this, .glow-card.prose dropped the cap
   entirely and homepage body copy ran the full 1200px while identical prose
   on every leaf page sat at 760px. */
.glow-card.prose{max-width:none}
.glow-card.prose > *{max-width:760px}
.glow-card.prose > .callout{max-width:none}

.hero{position:relative;padding:3rem;margin-top:1.5rem}
.hero-inner{max-width:700px;padding:0}
.hero .badge{margin-bottom:1rem}
.hero h1{margin-bottom:0.75rem}
.hero h1 span{color:var(--accent-green)}
.hero-dek{color:var(--text-muted);font-size:1.05rem;max-width:620px;margin-bottom:1.75rem}
.hero-btns{display:flex;gap:0.9rem;flex-wrap:wrap}
.btn-outline{background:transparent;color:var(--accent-green)}
.btn-outline:hover{background:rgba(34,197,94,0.1);border-color:var(--accent-green-bright);color:var(--accent-green)}

/* Scroll-reveal, scoped to the silo cards only, per the scoping doc's own
   recommendation — not applied blanket down the page, since dense text
   sections fading in on scroll reads as tiring, not craft. */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.6s ease, transform 0.6s ease}
[data-reveal].is-revealed{opacity:1;transform:translateY(0)}
[data-reveal] .silo-card{transition:opacity 0.5s ease, transform 0.5s ease}
[data-reveal]:not(.is-revealed) .silo-card{opacity:0;transform:translateY(10px)}
[data-reveal].is-revealed .silo-card:nth-child(1){transition-delay:0.05s}
[data-reveal].is-revealed .silo-card:nth-child(2){transition-delay:0.15s}
[data-reveal].is-revealed .silo-card:nth-child(3){transition-delay:0.25s}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal] .silo-card{opacity:1!important;transform:none!important;transition:none!important}
}

.silo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:1.5rem 0 0.5rem}
@media(max-width:768px){.silo-grid{grid-template-columns:1fr}}
.silo-card h3{margin-bottom:0.5rem;font-size:1rem}
.silo-card p{color:var(--text-muted);font-size:0.88rem;margin:0}
.silo-card{position:relative;box-shadow:0 6px 20px -6px rgba(34,197,94,0.22);transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s cubic-bezier(0.22,1,0.36,1),border-color 0.2s}
:root[data-theme="light"] .silo-card{box-shadow:0 6px 20px -6px rgba(20,108,52,0.16)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .silo-card{box-shadow:0 6px 20px -6px rgba(20,108,52,0.16)}}
/* Overrides the generic a.card:hover full-border accent colour — the
   running-light ring below carries the accent instead, so the base border
   stays neutral and the ring reads as its own distinct highlight rather
   than disappearing into an already-green border. */
a.silo-card:hover,a.silo-card:focus-visible{transform:translateY(-3px);box-shadow:0 20px 45px -14px rgba(34,197,94,0.4);border-color:var(--border-strong)}
:root[data-theme="light"] a.silo-card:hover,:root[data-theme="light"] a.silo-card:focus-visible{box-shadow:0 20px 45px -14px rgba(20,108,52,0.28)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) a.silo-card:hover,:root:not([data-theme="dark"]) a.silo-card:focus-visible{box-shadow:0 20px 45px -14px rgba(20,108,52,0.28)}}

/* Featured-hub cards (docs/homepage-featured-hubs.md, shipped 2026-08-31 —
   trigger condition, every hub with 3+ real cluster pages, was met the same
   day). Headings sit bare on the flat page; only the actual cards get a
   surface + glow. */
.featured-hub{margin-bottom:2.25rem}
.featured-hub:last-child{margin-bottom:0}
.featured-hub-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.featured-hub-head h3{margin:0;font-size:1.05rem}
.featured-hub-head a{display:inline-flex;align-items:center;min-height:44px;font-size:0.85rem;font-weight:700;color:var(--accent-green);text-decoration:none;white-space:nowrap}
.featured-hub-head a:hover{color:var(--accent-green)}
.featured-hub-head a:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:768px){.featured-grid{grid-template-columns:1fr;gap:1.25rem}}
.featured-card{position:relative;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:1rem;text-decoration:none;color:inherit;display:block;transition:border-color 0.2s,transform 0.35s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s cubic-bezier(0.22,1,0.36,1);box-shadow:0 6px 18px -6px rgba(34,197,94,0.2)}
:root[data-theme="light"] .featured-card{box-shadow:0 6px 18px -6px rgba(20,108,52,0.14)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .featured-card{box-shadow:0 6px 18px -6px rgba(20,108,52,0.14)}}
.featured-card:hover,.featured-card:focus-visible{transform:translateY(-3px);box-shadow:0 20px 45px -14px rgba(34,197,94,0.4)}
:root[data-theme="light"] .featured-card:hover,:root[data-theme="light"] .featured-card:focus-visible{box-shadow:0 20px 45px -14px rgba(20,108,52,0.28)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .featured-card:hover,:root:not([data-theme="dark"]) .featured-card:focus-visible{box-shadow:0 20px 45px -14px rgba(20,108,52,0.28)}}
.featured-card:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.featured-card h4{font-size:0.92rem;margin-bottom:0.35rem;color:var(--text-primary)}
.featured-card p{font-size:0.82rem;color:var(--text-muted);margin:0}
.coming-soon{display:inline-block;font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);background:rgba(231,234,232,0.06);border:1px solid var(--border);border-radius:12px;padding:2px 10px;margin-bottom:0.7rem}

/* Cluster-page components — first use, Day 7 (PayFast → Lovable.dev), reference template for every later Cluster/blog page; extend rather than duplicate. */
.article-meta{color:var(--text-muted);font-size:0.85rem;margin-top:1rem}

.author-line{display:flex;align-items:center;gap:0.75rem}
.author-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent-green);font-size:0.85rem;flex-shrink:0}
.author-name{font-size:0.88rem;font-weight:700;color:var(--text-primary)}
.author-role{font-size:0.78rem;color:var(--text-muted)}

.quick-answer{background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--accent-green);border-radius:var(--r-lg);padding:1.25rem 1.5rem}
.quick-answer h2{margin:0 0 0.5rem!important;font-size:1rem;color:var(--accent-green)}
.quick-answer p{margin:0;color:var(--text-primary)}

.tools-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
@media(max-width:768px){.tools-strip{grid-template-columns:1fr;gap:1.25rem}}
.tools-strip--single{grid-template-columns:1fr}
.tool-strip-card{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;transition:transform 0.35s cubic-bezier(0.22,1,0.36,1),box-shadow 0.35s cubic-bezier(0.22,1,0.36,1),border-color 0.2s}
/* Deliberately more modest than .silo-card/.featured-card's hover treatment
   (no spinning ring, smaller shadow reach) — this card sits mid-article on
   50+ Cluster/blog pages, below the page's actual primary content, not on
   the homepage's own hero grid. Design review 2026-09-16 flagged the
   original full-intensity copy as disproportionate here. */
.tool-strip-card:hover,.tool-strip-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px -8px rgba(34,197,94,0.3)}
:root[data-theme="light"] .tool-strip-card:hover,:root[data-theme="light"] .tool-strip-card:focus-visible{box-shadow:0 10px 24px -8px rgba(20,108,52,0.21)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .tool-strip-card:hover,:root:not([data-theme="dark"]) .tool-strip-card:focus-visible{box-shadow:0 10px 24px -8px rgba(20,108,52,0.21)}}
.tool-strip-card:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.tool-strip-card h3,.tool-strip-card h4{font-size:0.88rem;margin-bottom:0.3rem;color:var(--text-primary)}
.tool-strip-card p{font-size:0.78rem;color:var(--text-muted);margin:0}

/* Running-light border ring on hover/focus — a masked conic-gradient on
   ::after, no extra markup needed. Scoped to .silo-card and .featured-card
   only (both homepage-only, the site's biggest/most decorative card grids)
   — deliberately NOT on .tool-strip-card, whose mid-article "related
   tools" placement on 50+ pages made the identical spinning treatment
   disproportionate (design review 2026-09-16); see that card's own hover
   rule above for its more modest, ring-free treatment instead. Pattern
   verified against scrolltide.co's identical effect (2026-09-16):
   @property registers --card-angle as an animatable <angle> so the
   gradient can rotate smoothly; the double mask (content-box vs
   border-box, composited with exclude) keeps only a ~1.5px ring instead of
   painting the whole card. Purely decorative (::after is never exposed to
   assistive tech, and WCAG 1.4.11's non-text contrast floor only binds a
   graphical object required to understand content or operate the UI) —
   the real accessible hover/focus signal stays the focus-visible outline
   plus the lift/shadow above, which the ring never substitutes for. */
@property --card-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.silo-card::after,.featured-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity 0.35s;background:conic-gradient(from var(--card-angle),transparent 0deg,transparent 295deg,var(--accent-green) 330deg,var(--accent-green-bright) 350deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.silo-card:hover::after,.silo-card:focus-visible::after,.featured-card:hover::after,.featured-card:focus-visible::after{opacity:1;animation:2.4s linear infinite card-border-spin}
@keyframes card-border-spin{to{--card-angle:360deg}}

.step-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem 1rem;margin-top:1.75rem}
@media(max-width:768px){.step-flow{grid-template-columns:1fr;gap:1.75rem}}
.step-card{position:relative;background:var(--bg-primary);border:1.5px solid var(--border-strong);border-radius:var(--r-lg);padding:1.75rem 1rem 1.25rem;text-align:center}
.step-card.is-current{border-color:var(--accent-green)}
.step-num{position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:var(--bg-surface);border:1.5px solid var(--border-strong);color:var(--text-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.95rem}
.step-card.is-current .step-num{background:var(--accent-green);border-color:var(--accent-green);color:var(--bg-primary)}
.step-card p{margin:0;font-weight:700;font-size:1.1rem;color:var(--text-primary);line-height:1.35}
.step-card.is-current p{color:var(--accent-green)}

.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
@media(max-width:768px){.compare-grid{grid-template-columns:1fr}}
@media(min-width:769px){.compare-grid:has(>.compare-card:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}}
.compare-card{background:var(--bg-primary);border:1px solid var(--border-input);border-radius:var(--r);padding:1.25rem}
.compare-card h4{font-size:1rem;margin-bottom:0.6rem;color:var(--text-primary)}
.compare-card p{font-size:0.85rem;color:var(--text-primary);margin:0 0 0.5rem}
.compare-card p:last-child{margin-bottom:0}
.compare-highlight{color:var(--accent-green);font-weight:700}
.compare-watermark{font-size:0.75rem;color:var(--text-muted);text-align:right;margin-top:0.75rem}

.diagram-scroll{overflow-x:auto;overflow-y:hidden;margin-top:1rem}
.diagram-scroll svg,.diagram-scroll img{min-width:680px;display:block}

.table-scroll{overflow-x:auto;overflow-y:hidden;margin:1rem 0;border:1px solid var(--border);border-radius:var(--r)}
.data-table{width:100%;min-width:760px;border-collapse:collapse;font-size:0.9rem}
.data-table caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.data-table th,.data-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.data-table thead th{background:var(--bg-surface);color:var(--text-primary);font-weight:700;white-space:nowrap}
/* Row headers wrap; min-width:9rem floors the column so short labels stay on one line. They used to
   be nowrap, which let a long row header take most of the table and squeeze the data columns (I-18). */
.data-table tbody th{color:var(--text-primary);font-weight:700;min-width:9rem}
.data-table tbody td{color:var(--text-muted)}
.data-table td a{display:inline-block;min-height:44px}
.data-table tbody tr:last-child th,.data-table tbody tr:last-child td{border-bottom:none}
/* Narrower variant for a 2-3 column table (the 760px default was sized for the 6-column Base44
   pricing table and forces an unnecessary mobile side-scroll on shorter tables that don't need
   it). Column headers still get white-space:nowrap from the base rule above, so this floor is
   set high enough that a header like "Typical RTT from Johannesburg" never gets squeezed. */
.data-table--narrow{min-width:620px}

.code-block{position:relative;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem;margin:1rem 0;overflow-x:auto;overflow-y:hidden}
.code-block pre{margin:0;padding-right:4.5rem}
.code-block code{font-family:var(--font-mono);font-size:0.82rem;line-height:1.55;color:var(--text-primary);white-space:pre}
.code-block--prompt code{white-space:pre-wrap;word-break:break-word}
.prose code{font-family:var(--font-mono);font-size:0.88em;background:var(--bg-surface);border:1px solid var(--border);border-radius:4px;padding:0.1em 0.4em}
.prose .code-block code{background:none;border:none;padding:0}

.code-copy-btn{position:absolute;top:0.6rem;right:0.6rem;display:inline-flex;align-items:center;gap:4px;background:var(--bg-primary);border:1px solid var(--border-strong);border-radius:6px;padding:5px 10px;font-size:0.72rem;font-weight:600;font-family:var(--font-body);color:var(--text-muted);cursor:pointer;transition:color 0.2s,border-color 0.2s}
.code-copy-btn:hover{color:var(--accent-green);border-color:var(--accent-green)}
.code-copy-btn:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.code-copy-btn.copied{color:var(--accent-green);border-color:var(--accent-green)}
.code-copy-btn svg{width:13px;height:13px;flex-shrink:0}
/* Touch target: invisible extension to 44px high; not on the static variant, which is already 44px and not positioned. */
.code-copy-btn:not(.code-copy-btn--static)::after{content:'';position:absolute;inset:-9px -4px}
.code-copy-btn--static{position:static;margin-top:0.75rem;min-height:44px;padding:8px 16px;font-size:0.85rem;color:var(--accent-green);border-color:var(--accent-green)}

/* Tool-page widget components (payfast/popia/prompt-builder tools) — promoted
   from 3 duplicated inline copies, L2026-09-02 review; see WORKLOG.md. */
.tool-widget{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.tool-widget--narrow-form{grid-template-columns:340px 1fr}
/* L48: a grid item defaults to min-width:auto and grows to its longest unwrapped code line;
   min-width:0 lets a .code-block inside it scroll instead of widening the page. */
.tool-widget>*{min-width:0}
@media(max-width:900px){.tool-widget,.tool-widget--narrow-form{grid-template-columns:1fr}}
.tool-form fieldset{border:none;padding:0;margin:0 0 1.25rem}
.tool-form legend{font-size:0.82rem;font-weight:700;color:var(--text-primary);margin-bottom:0.5rem;padding:0}
.radio-row{display:flex;flex-direction:column;gap:0.5rem}
.radio-option{display:flex;align-items:center;gap:0.5rem;font-size:0.95rem;color:var(--text-primary);min-height:44px}
.radio-option input{accent-color:var(--accent-green);width:16px;height:16px;flex-shrink:0}
.check-option{display:flex;align-items:flex-start;gap:0.5rem;font-size:0.95rem;color:var(--text-primary);margin-bottom:0.5rem;line-height:1.4;min-height:44px}
.check-option input{accent-color:var(--accent-green);width:16px;height:16px;flex-shrink:0;margin-top:2px}
.tool-output h4{font-size:0.85rem;color:var(--accent-green);margin:0 0 0.5rem}
.tool-output .code-block{margin-top:0}
.hint-note{font-size:0.78rem;color:var(--text-muted);margin-top:0.5rem}
.privacy-note{display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;color:var(--text-muted);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.prompt-output{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.25rem;font-size:0.9rem;color:var(--text-primary);white-space:pre-wrap;overflow-wrap:anywhere;min-height:180px;position:relative}
.prompt-output.empty{color:var(--text-muted);font-style:italic}
.result-block{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem;margin-bottom:1rem}
.result-block h4{font-size:0.9rem;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem}
.result-block p{font-size:0.88rem;color:var(--text-muted);margin:0}
.result-status{font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;padding:3px 10px;border-radius:20px}
.status-confirmed{background:rgba(34,197,94,0.15);color:var(--accent-green)}
.status-needs-attention{background:rgba(234,179,8,0.15);color:var(--color-warning)}
.status-not-assessed{background:rgba(139,149,143,0.12);color:var(--text-muted)}
.warning-block{background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.4);border-radius:var(--r-lg);padding:1.25rem 1.5rem;margin-bottom:1.25rem}
.warning-block h4{color:var(--color-warning);font-size:0.9rem;margin-bottom:0.4rem}
.warning-block p{font-size:0.86rem;color:var(--text-primary);margin:0}
.checklist-readout{font-size:0.88rem;color:var(--text-primary);margin-top:0.5rem}

.media-note{display:flex;align-items:center;gap:0.6rem;background:var(--bg-surface);border:1px dashed var(--border-strong);border-radius:var(--r);padding:0.75rem 1rem;margin:1rem 0;font-size:0.82rem;color:var(--text-muted)}
.doc-screenshot{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin:1rem 0;text-align:center}
.doc-screenshot-scroll{overflow-x:auto;overflow-y:hidden}
.doc-screenshot-scroll img{max-width:none;height:auto;border-radius:calc(var(--r) - 4px);display:block;margin:0 auto}
.doc-screenshot figcaption{font-size:0.82rem;color:var(--text-muted);margin-top:0.6rem}

.faq-item{border-bottom:1px solid var(--border);padding:0}
.faq-item:first-of-type{border-top:1px solid var(--border)}
.faq-item summary{padding:1rem 0;cursor:pointer;font-weight:700;color:var(--text-primary);font-size:0.95rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';color:var(--accent-green);font-size:1.2rem;flex-shrink:0}
.faq-item[open] summary::after{content:'\2212'}
.faq-item summary:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
/* The row's padding lives on the summary so the whole row is the tap target; spacing is unchanged. */
.faq-item[open] summary{padding-bottom:0}
.faq-item[open]>:last-child{padding-bottom:1rem}
.faq-item p{margin-top:0.75rem;color:var(--text-muted);font-size:0.9rem}

.wpg-picker{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:end}
.wpg-go{grid-column:1/-1}
.wpg-picker .field-group{margin-bottom:0}
.wpg-picker .btn{min-height:44px}
.wpg-step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--accent-green);color:var(--bg-primary);font-size:0.75rem;font-weight:700;margin-right:0.5rem;vertical-align:middle}
.wpg-stale:empty{margin:0}
.wpg-stale{font-size:0.82rem;color:var(--text-muted);margin-top:0.75rem}
.wpg-result{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.wpg-result h3{font-size:1.05rem;margin:0 0 0.5rem;color:var(--text-primary)}
.wpg-result h3:focus{outline:none}
.wpg-result h3:focus-visible{outline:2px solid var(--accent-green);outline-offset:2px}
.wpg-note{font-size:0.85rem;color:var(--text-muted);margin-bottom:0.75rem}
.wpg-prompt .wpg-label{display:block;font-size:0.72rem;font-weight:700;letter-spacing:0.06em;color:var(--accent-green)}
.wpg-guide{font-size:0.88rem;margin-top:1rem;color:var(--text-primary)}
@media(max-width:1000px){.wpg-picker{grid-template-columns:1fr}}
@media(max-width:768px){.wpg-picker .btn{width:100%;justify-content:center}}
.silo-grid--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:768px){.silo-grid--two{grid-template-columns:1fr}}
.tools-strip--two{grid-template-columns:repeat(2,1fr)}
@media(max-width:768px){.tools-strip--two{grid-template-columns:1fr}}
:root .featured-grid .featured-card.featured-card--soon{border-style:dashed;box-shadow:none}
:root .featured-grid .featured-card.featured-card--soon:hover{transform:none;box-shadow:none}
.featured-card--soon::after{display:none}
/* Two text sections in a row read as one page: the join collapses to a heading gap (PAGE-STANDARDS Section 4). Boxed blocks keep their section padding. */
main>section:has(>.container.prose>:is(p:not([class]),ul:not([class]),ol:not([class]),details.faq-item):last-child):has(+section>.container.prose>h2:first-child){padding-bottom:0}
main>section:has(>.container.prose>details.faq-item:last-child):has(+section>.container.prose>h2:first-child){padding-bottom:1rem}
main>section:has(>.container.prose>:is(p:not([class]),ul:not([class]),ol:not([class]),details.faq-item):last-child)+section:has(>.container.prose>h2:first-child){padding-top:1rem}