/*
Theme Name:   Kadence Slope
Theme URI:    https://slopecalculators.com
Description:  Child theme for slopecalculators.com. THIS FILE IS THE SINGLE PLACE WHERE COLOUR AND SECTION STYLING LIVE. Edit a token below and every calculator page, blog page and legal page changes with it. Page content is never stored here.
Author:       slopecalculators.com
Template:     kadence
Version:      1.26.0
Text Domain:  kadence-slope
*/

/* ==========================================================================
   1. THE TOKENS
   Change a value here and it changes everywhere on the site.
   Nothing below this block hardcodes a colour.
   ========================================================================== */

:root {

	/* --- palette ------------------------------------------------------- */
	--sp-paper:        #F6F8FA;   /* page background            */
	--sp-surface:      #FFFFFF;   /* cards, boxes               */
	--sp-surface-2:    #FBFCFD;   /* subtle raised panels       */

	--sp-ink:          #101826;   /* body text and h1           */
	--sp-ink-soft:     #55606E;   /* secondary text             */
	--sp-ink-faint:    #5A6472;   /* labels, captions           */

	--sp-rule:         #E2E7EE;   /* borders                    */
	--sp-rule-soft:    #EDF1F5;   /* hairlines                  */

	--sp-accent:       #1553C7;   /* primary blue               */
	--sp-accent-ink:   #0E3E99;   /* darker blue for text       */
	--sp-accent-soft:  #EAF0FD;   /* blue tint background       */
	--sp-on-accent:    #FFFFFF;

	--sp-result:       #0B6E4F;   /* answer green               */
	--sp-result-ink:   #06402E;
	--sp-result-soft:  #E7F4EE;

	--sp-amber:        #A65B00;   /* caution                    */
	--sp-amber-ink:    #6D3D00;
	--sp-amber-soft:   #FCF2E3;

	--sp-danger:       #C0392B;   /* fail / error               */
	--sp-danger-ink:   #8C2020;
	--sp-danger-soft:  #FDECEC;
	--sp-danger-border:#F6CFCF;

	--sp-grid-line:    rgba(21, 83, 199, .055);

	/* --- headings ------------------------------------------------------ */
	--sp-h1: var(--sp-ink);
	--sp-h2: var(--sp-ink);
	--sp-h3: var(--sp-accent-ink);
	--sp-h4: var(--sp-ink-soft);

	/* --- shape --------------------------------------------------------- */
	--sp-radius:       10px;
	--sp-radius-sm:    8px;
	--sp-maxw:         1160px;
	--sp-blogw:        46rem;     /* blog reading column, rem so it does not
	                                 scale with heading font size */
	--sp-readw:        72ch;
	--sp-gap:          1.5rem;
	--sp-section-gap:  3rem;

	/* --- header ------------------------------------------------------- */
	--sp-header-bg:       rgba(255, 255, 255, .88);
	--sp-header-rule:     var(--sp-rule);
	--sp-header-h:        74px;
	--sp-header-h-stuck:  62px;
	--sp-logo-ink:        var(--sp-ink);
	--sp-nav-ink:         var(--sp-ink-soft);
	--sp-nav-ink-hover:   var(--sp-accent-ink);
	--sp-nav-ink-active:  var(--sp-accent-ink);
	--sp-nav-hover-bg:    var(--sp-accent-soft);

	/* --- footer ------------------------------------------------------- */
	--sp-footer-bg:         var(--sp-surface);
	--sp-footer-rule:       var(--sp-rule);
	--sp-footer-ink:        var(--sp-ink);
	--sp-footer-ink-soft:   var(--sp-ink-soft);
	--sp-footer-ink-faint:  var(--sp-ink-faint);
	--sp-footer-head:       var(--sp-ink-faint);
	--sp-footer-logo-ink:   var(--sp-ink);
	--sp-footer-link-hover: var(--sp-accent);

	/* --- type ---------------------------------------------------------- */
	--sp-font-head: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--sp-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	--sp-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* --- section heights (minimums, so content can breathe) ------------ */
	--sp-calc-min:     460px;
	--sp-answer-min:   320px;
	--sp-canvas-h:     clamp(220px, 34vw, 420px);

	/* --- hand the tokens to the calculator plugin ---------------------- */
	--sc-calc-bg:      var(--sp-surface);
	--sc-calc-head-bg: var(--sp-surface-2);
	--sc-calc-border:  var(--sp-rule);
	--sc-calc-title:   var(--sp-h2);
	--sc-calc-shadow:  0 1px 2px rgba(16, 24, 38, .05);
	--sc-mode-bg:      var(--sp-surface-2);
	--sc-input-bg:     var(--sp-surface);
	--sc-input-border: #D8DFE8;
	--sc-answer-bg:    var(--sp-paper);
	--sc-answer-border:var(--sp-rule);
	--sc-card-bg:      var(--sp-surface);
	--sc-ink:          var(--sp-ink);
	--sc-ink-soft:     var(--sp-ink-soft);
	--sc-ink-faint:    var(--sp-ink-faint);
	--sc-accent:       var(--sp-accent);
	--sc-accent-ink:   var(--sp-accent-ink);
	--sc-accent-soft:  var(--sp-accent-soft);
	--sc-on-accent:    var(--sp-on-accent);
	--sc-result:       var(--sp-result);
	--sc-result-ink:   var(--sp-result-ink);
	--sc-result-soft:  var(--sp-result-soft);
	--sc-amber:        var(--sp-amber);
	--sc-amber-ink:    var(--sp-amber-ink);
	--sc-amber-soft:   var(--sp-amber-soft);
	--sc-danger:       var(--sp-danger);
	--sc-danger-ink:   var(--sp-danger-ink);
	--sc-danger-soft:  var(--sp-danger-soft);
	--sc-danger-border:var(--sp-danger-border);
	--sc-grid-line:    var(--sp-grid-line);
	--sc-radius:       var(--sp-radius);
	--sc-font-head:    var(--sp-font-head);
	--sc-font-mono:    var(--sp-font-mono);
}

/* ==========================================================================
   2. PAGE SHELL
   ========================================================================== */

body.sp-page {
	background-color: var(--sp-paper);
	background-image:
		linear-gradient(var(--sp-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--sp-grid-line) 1px, transparent 1px);
	background-size: 28px 28px;
	color: var(--sp-ink);
	font-family: var(--sp-font-body);
}

.sp-wrap { max-width: var(--sp-maxw); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.sp-read { max-width: var(--sp-readw); }

.sp-section { margin-bottom: var(--sp-section-gap); }

/* ==========================================================================
   3. HEADINGS  (one place, all page types)
   ========================================================================== */

.sp-page h1, .sp-page h2, .sp-page h3, .sp-page h4 {
	font-family: var(--sp-font-head);
	line-height: 1.2;
	letter-spacing: -0.012em;
	font-weight: 700;
}
.sp-page h1 { color: var(--sp-h1); font-size: clamp(1.85rem, 4.2vw, 2.6rem); margin: 0 0 .7rem; }
.sp-page h2 { color: var(--sp-h2); font-size: clamp(1.4rem, 2.8vw, 1.8rem); margin: 2.4rem 0 .8rem; }
.sp-page h3 { color: var(--sp-h3); font-size: clamp(1.1rem, 2.1vw, 1.3rem); margin: 1.8rem 0 .6rem; }
.sp-page h4 { color: var(--sp-h4); font-size: 1.02rem; margin: 1.4rem 0 .5rem; }

.sp-page p, .sp-page li { color: var(--sp-ink-soft); line-height: 1.72; font-size: 1.02rem; }
.sp-page a { color: var(--sp-accent); text-underline-offset: 2px; }
.sp-page a:hover { color: var(--sp-accent-ink); }

.sp-dek { font-size: 1.08rem; color: var(--sp-ink-soft); max-width: 62ch; margin: 0 0 1.6rem; }

/* ==========================================================================
   4. CALCULATOR PAGE
   ========================================================================== */

.sp-calc-section { min-height: var(--sp-calc-min); }
.sp-calc-section .slopecalc { margin-bottom: 0; }
.sp-calc-section .sc-answer { min-height: var(--sp-answer-min); }

/* ==========================================================================
   5. BLOG PAGE
   ========================================================================== */

.sp-canvas {
	position: relative;
	width: 100%;
	height: var(--sp-canvas-h);
	overflow: hidden;
	background: var(--sp-accent-soft);
	border-bottom: 1px solid var(--sp-rule);
	margin-bottom: 2.2rem;
}
.sp-canvas img, .sp-canvas .wp-block-image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.sp-canvas figure { margin: 0; height: 100%; }
.sp-canvas-caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: .6rem clamp(1rem, 4vw, 2rem);
	font-size: .82rem; color: #fff;
	background: linear-gradient(transparent, rgba(16, 24, 38, .68));
}

.sp-meta {
	display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
	font-size: .82rem; color: var(--sp-ink-faint);
	margin-bottom: 1.4rem;
	font-family: var(--sp-font-mono);
}

.sp-short {
	background: var(--sp-result-soft);
	border-left: 4px solid var(--sp-result);
	border-radius: var(--sp-radius-sm);
	padding: 1.2rem 1.4rem;
	margin: 0 0 2rem;
}
.sp-short-label {
	display: block; font-family: var(--sp-font-head);
	font-size: .74rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--sp-result); margin-bottom: .45rem;
}
.sp-short p { margin: 0; color: var(--sp-result-ink); font-size: 1.05rem; line-height: 1.65; }
.sp-short p + p { margin-top: .7rem; }

.sp-toc {
	background: var(--sp-surface);
	border: 1px solid var(--sp-rule);
	border-radius: var(--sp-radius-sm);
	padding: 1.1rem 1.3rem;
	margin: 0 0 2.2rem;
}
.sp-toc-label {
	display: block; font-family: var(--sp-font-head);
	font-size: .74rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--sp-ink-faint); margin-bottom: .6rem;
}
.sp-toc ol, .sp-toc ul { margin: 0; padding-left: 1.15rem; }
.sp-toc li { font-size: .95rem; line-height: 1.9; color: var(--sp-ink-soft); }
.sp-toc a { text-decoration: none; }
.sp-toc a:hover { text-decoration: underline; }

.sp-content > * { max-width: var(--sp-readw); }
.sp-content > .sp-full, .sp-content > figure, .sp-content > table { max-width: none; }

.sp-content table {
	width: 100%; border-collapse: collapse; margin: 1.6rem 0;
	font-size: .95rem; background: var(--sp-surface);
	border: 1px solid var(--sp-rule); border-radius: var(--sp-radius-sm);
	overflow: hidden;
}
.sp-content th {
	text-align: left; font-family: var(--sp-font-head); font-size: .8rem;
	letter-spacing: .04em; text-transform: uppercase;
	background: var(--sp-surface-2); color: var(--sp-ink-faint);
	padding: .7rem .9rem; border-bottom: 1px solid var(--sp-rule);
}
.sp-content td { padding: .7rem .9rem; border-bottom: 1px solid var(--sp-rule-soft); color: var(--sp-ink-soft); }
.sp-content tr:last-child td { border-bottom: 0; }
.sp-table-scroll { overflow-x: auto; }

.sp-content blockquote {
	margin: 1.6rem 0; padding: .3rem 0 .3rem 1.2rem;
	border-left: 3px solid var(--sp-accent);
	color: var(--sp-ink); font-size: 1.06rem;
}
.sp-content code {
	font-family: var(--sp-font-mono); font-size: .92em;
	background: var(--sp-accent-soft); color: var(--sp-accent-ink);
	padding: .12em .38em; border-radius: 4px;
}

.sp-callout {
	background: var(--sp-amber-soft);
	border-left: 4px solid var(--sp-amber);
	border-radius: var(--sp-radius-sm);
	padding: 1rem 1.2rem; margin: 1.6rem 0;
}
.sp-callout p { margin: 0; color: var(--sp-amber-ink); }

/* ==========================================================================
   6. FAQ  (same design on every page type)
   ========================================================================== */

.sp-faq { margin-top: var(--sp-section-gap); }
.sp-faq > h2 { margin-top: 0; }
.sp-faq-item,
.sp-reveal {
	background: var(--sp-surface);
	border: 1px solid var(--sp-rule);
	border-radius: var(--sp-radius-sm);
	margin-bottom: .6rem;
	overflow: hidden;
}
.sp-faq-item > summary,
.sp-reveal > summary {
	cursor: pointer; list-style: none;
	padding: 1rem 3rem 1rem 1.2rem;
	font-family: var(--sp-font-head); font-weight: 600; font-size: 1.02rem;
	color: var(--sp-ink); position: relative;
}
.sp-faq-item > summary::-webkit-details-marker,
.sp-reveal > summary::-webkit-details-marker { display: none; }
.sp-faq-item > summary::after,
.sp-reveal > summary::after {
	content: ''; position: absolute; right: 1.3rem; top: 50%;
	width: 9px; height: 9px; margin-top: -6px;
	border-right: 2px solid var(--sp-accent);
	border-bottom: 2px solid var(--sp-accent);
	transform: rotate(45deg); transition: transform .18s;
}
.sp-faq-item[open] > summary::after,
.sp-reveal[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sp-faq-item[open] > summary,
.sp-reveal[open] > summary { background: var(--sp-accent-soft); color: var(--sp-accent-ink); }
.sp-faq-item > summary:focus-visible,
.sp-reveal > summary:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: -2px; }
.sp-faq-answer,
.sp-reveal-body { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--sp-rule-soft); }
.sp-faq-answer p:last-child,
.sp-reveal-body :last-child { margin-bottom: 0; }

/* ==========================================================================
   7. LEGAL / ABOUT PAGE
   ========================================================================== */

.sp-legal { max-width: var(--sp-readw); margin-inline: auto; }
.sp-legal-head {
	padding-bottom: 1.2rem; margin-bottom: 2rem;
	border-bottom: 1px solid var(--sp-rule);
}
.sp-updated {
	font-family: var(--sp-font-mono); font-size: .82rem;
	color: var(--sp-ink-faint); margin: 0;
}
.sp-legal h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.sp-legal h3 { font-size: 1.05rem; }
.sp-legal p, .sp-legal li { font-size: .98rem; }

/* ==========================================================================
   8. RELATED LINKS BLOCK (internal linking, every page type)
   ========================================================================== */

.sp-related {
	background: var(--sp-surface);
	border: 1px solid var(--sp-rule);
	border-radius: var(--sp-radius);
	padding: 1.3rem 1.5rem;
	margin-top: var(--sp-section-gap);
}
.sp-related h2 { margin: 0 0 .9rem; font-size: 1.05rem; }
.sp-related ul { display: grid; gap: .4rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; }
.sp-related li { font-size: .95rem; }
.sp-related a { text-decoration: none; font-weight: 500; }
.sp-related a:hover { text-decoration: underline; }

/* ==========================================================================
   9. PRINT
   ========================================================================== */

@media print {
	body.sp-page { background: #fff; }
	.sp-toc, .sp-related, .sc-actions, .sc-modes { display: none !important; }
	.sp-faq-item, .sp-reveal { break-inside: avoid; }
}

/* ==========================================================================
   10. KADENCE OVERRIDES
   Kadence paints its own white behind the content, which hides the paper
   background and the grid. These make its wrappers transparent so the
   token background is the one people see.
   ========================================================================== */

.sp-page #wrapper,
.sp-page .site,
.sp-page .site-container,
.sp-page .content-container,
.sp-page .content-area,
.sp-page .entry-content-wrap,
.sp-page .content-bg { background: transparent; }

/* Heading colours: beat Kadence's .entry-content h2 selectors. */
.sp-page .entry-content h1, .sp-page.sp-page h1 { color: var(--sp-h1); }
.sp-page .entry-content h2, .sp-page.sp-page h2 { color: var(--sp-h2); }
.sp-page .entry-content h3, .sp-page.sp-page h3 { color: var(--sp-h3); }
.sp-page .entry-content h4, .sp-page.sp-page h4 { color: var(--sp-h4); }

/* Give the calculator and blog pages room to breathe. */
.sp-page .entry-content > .sp-wrap { padding-top: 2.5rem; padding-bottom: 3rem; }
.sp-page .entry-content > .sp-canvas + .sp-wrap { padding-top: 0; }

/* Empty canvas: say what belongs there instead of showing a blank band. */
.sp-canvas:not(:has(img[src])) { display: flex; align-items: center; justify-content: center; height: clamp(140px, 18vw, 220px); }
.sp-canvas:not(:has(img[src]))::after {
	content: 'Feature image goes here';
	font-family: var(--sp-font-mono);
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sp-accent);
	opacity: .55;
}

/* ==========================================================================
   11. HEADER
   Structure only. Every colour is a token from block 1.
   ========================================================================== */

.sp-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--sp-accent); color: var(--sp-on-accent);
	padding: .7rem 1.2rem; border-radius: 0 0 var(--sp-radius-sm) 0;
	font-weight: 600; font-size: .9rem;
}
.sp-skip:focus { left: 0; color: var(--sp-on-accent); }

.sp-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--sp-header-bg);
	border-bottom: 1px solid var(--sp-header-rule);
	backdrop-filter: saturate(180%) blur(8px);
	transition: box-shadow .2s, background .2s;
}
.sp-header.is-stuck { box-shadow: 0 1px 12px rgba(16, 24, 38, .07); }
body.admin-bar .sp-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .sp-header { top: 46px; } }

.sp-header-inner {
	display: flex; align-items: center; gap: 1.5rem;
	min-height: var(--sp-header-h);
	transition: min-height .2s;
}
.sp-header.is-stuck .sp-header-inner { min-height: var(--sp-header-h-stuck); }

/* ---- wordmark ---- */
.sp-logo {
	display: inline-flex; align-items: center; gap: .7rem;
	text-decoration: none; flex: 0 0 auto;
}
.sp-logo-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.sp-logo-bg    { fill: var(--sp-accent-soft); stroke: var(--sp-accent); stroke-width: 1.4; }
.sp-logo-line  { stroke: var(--sp-accent); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.sp-logo-legs  { stroke: var(--sp-accent); stroke-width: 1.2; stroke-dasharray: 3 3; fill: none; opacity: .5; }
.sp-logo-dot   { fill: var(--sp-accent); }
.sp-logo-text {
	font-family: var(--sp-font-head);
	font-weight: 700; font-size: 1.34rem;
	letter-spacing: -0.005em;
	color: var(--sp-logo-ink);
	white-space: nowrap;
}
.sp-logo-tld { color: var(--sp-accent); }

/* ---- nav ---- */
.sp-nav { margin-left: auto; }
.sp-nav-list {
	display: flex; align-items: center; gap: .2rem;
	list-style: none; margin: 0; padding: 0;
}
.sp-nav-li { position: relative; }

.sp-nav-link {
	display: inline-flex; align-items: center; gap: .35rem;
	font-family: var(--sp-font-body);
	font-size: .95rem; font-weight: 500;
	color: var(--sp-nav-ink);
	text-decoration: none;
	padding: .55rem .85rem;
	border-radius: var(--sp-radius-sm);
	background: none; border: 0; cursor: pointer;
	white-space: nowrap;
	transition: background .15s, color .15s;
}
.sp-nav-link:hover { color: var(--sp-nav-ink-hover); background: var(--sp-nav-hover-bg); }
.sp-nav-li.is-current > .sp-nav-link { color: var(--sp-nav-ink-active); font-weight: 600; }
.sp-nav-link:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 1px; }

.sp-chev {
	width: 7px; height: 7px; margin-top: -3px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: rotate(45deg);
	transition: transform .18s;
	opacity: .65;
}
.sp-nav-li.is-open > .sp-nav-link .sp-chev { transform: rotate(-135deg); margin-top: 2px; }

/* ---- dropdowns ---- */
.sp-sub {
	list-style: none; margin: 0; padding: .6rem;
	position: absolute; top: calc(100% + 6px); right: 0;
	min-width: 250px;
	background: var(--sp-surface);
	border: 1px solid var(--sp-rule);
	border-radius: var(--sp-radius);
	box-shadow: 0 12px 32px rgba(16, 24, 38, .11);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s, transform .16s, visibility .16s;
	z-index: 10;
}
.sp-sub.is-mega { min-width: 520px; column-count: 2; column-gap: 1.4rem; }
.sp-sub.is-mega .sp-nav-li { break-inside: avoid; }

.sp-nav-li.is-open > .sp-sub { opacity: 1; visibility: visible; transform: translateY(0); }
/*
 * No CSS hover rule here on purpose. Hover used to open the dropdown while the
 * click handler toggled a class, so the two disagreed: hovering showed the menu,
 * then a click "closed" a menu the browser was still painting, and the chevron
 * flipped on every click regardless of what was on screen. Hover is handled in
 * header.js now, through the same is-open class, so there is one source of truth.
 */

.sp-sub .sp-nav-link {
	display: block; width: 100%;
	font-size: .9rem; font-weight: 400;
	padding: .5rem .7rem;
	color: var(--sp-ink-soft);
	white-space: normal;
}
.sp-sub .sp-nav-link:hover { background: var(--sp-accent-soft); color: var(--sp-accent-ink); }
.sp-sub .sp-nav-li.is-current > .sp-nav-link { color: var(--sp-accent-ink); font-weight: 600; }

.sp-group { break-inside: avoid; }
.sp-group ~ .sp-group { break-before: column; }
.sp-group-label {
	display: block;
	font-family: var(--sp-font-head);
	font-size: .7rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--sp-ink-faint);
	padding: .8rem .7rem .3rem;
}
.sp-nav-li:first-child > .sp-group-label { padding-top: .3rem; }

/* ---- burger ---- */
.sp-burger {
	display: none; margin-left: auto;
	width: 42px; height: 42px; padding: 10px;
	background: none; border: 1px solid var(--sp-rule);
	border-radius: var(--sp-radius-sm); cursor: pointer;
	flex-direction: column; justify-content: space-between;
}
.sp-burger span {
	display: block; height: 2px; width: 100%;
	background: var(--sp-nav-ink); border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.sp-burger:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp-header.is-nav-open .sp-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.sp-header.is-nav-open .sp-burger span:nth-child(2) { opacity: 0; }
.sp-header.is-nav-open .sp-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---- mobile ---- */
@media (max-width: 980px) {
	.sp-burger { display: flex; }
	.sp-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--sp-surface);
		border-bottom: 1px solid var(--sp-rule);
		box-shadow: 0 14px 30px rgba(16, 24, 38, .1);
		max-height: calc(100vh - var(--sp-header-h));
		overflow-y: auto;
		padding: .6rem clamp(1rem, 4vw, 2rem) 1.4rem;
	}
	.sp-header.is-nav-open .sp-nav { display: block; }
	.sp-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.sp-nav-li { border-bottom: 1px solid var(--sp-rule-soft); }
	.sp-nav-list > .sp-nav-li:last-child { border-bottom: 0; }
	.sp-nav-link { padding: .85rem .2rem; font-size: 1rem; width: 100%; justify-content: space-between; }
	.sp-sub {
		position: static; opacity: 1; visibility: visible; transform: none;
		display: none; box-shadow: none; border: 0; border-radius: 0;
		min-width: 0; padding: 0 0 .6rem .6rem;
		column-count: 1 !important;
		background: var(--sp-surface-2);
		margin: 0 -.2rem .6rem;
		border-left: 2px solid var(--sp-accent-soft);
	}
	.sp-sub.is-mega { min-width: 0; }
	.sp-nav-li.is-open > .sp-sub { display: block; }
	.sp-sub .sp-nav-link { padding: .6rem .7rem; }
	.sp-group ~ .sp-group { break-before: auto; }
	body.sp-nav-locked { overflow: hidden; }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.sp-footer {
	margin-top: var(--sp-section-gap);
	background: var(--sp-footer-bg);
	border-top: 1px solid var(--sp-footer-rule);
	color: var(--sp-footer-ink);
}
.sp-footer-inner {
	display: grid; gap: 2rem 2.5rem;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	padding-top: 3rem; padding-bottom: 2.5rem;
}
@media (max-width: 900px) { .sp-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sp-footer-inner { grid-template-columns: 1fr; gap: 1.8rem; } }

.sp-fcol-brand .sp-logo-text { color: var(--sp-footer-logo-ink); }
.sp-ftagline {
	margin: .9rem 0 0; max-width: 34ch;
	font-size: .92rem; line-height: 1.65;
	color: var(--sp-footer-ink-soft);
}

.sp-page .sp-fhead {
	margin: 0 0 .8rem;
	font-family: var(--sp-font-head);
	font-size: .74rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--sp-footer-head);
}

.sp-flinks { list-style: none; margin: 0; padding: 0; }
.sp-flinks li { margin-bottom: .5rem; font-size: .92rem; line-height: 1.45; }
.sp-page .sp-flinks a { color: var(--sp-footer-ink-soft); text-decoration: none; }
.sp-page .sp-flinks a:hover { color: var(--sp-footer-link-hover); text-decoration: underline; }

.sp-draft {
	display: inline-block; margin-left: .35rem;
	font-family: var(--sp-font-mono); font-size: .62rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--sp-amber); background: var(--sp-amber-soft);
	padding: .05rem .3rem; border-radius: 3px; vertical-align: middle;
}

.sp-page .sp-fcontact { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--sp-footer-ink-soft); }
.sp-page .sp-fcontact a { color: var(--sp-footer-link-hover); display: block; margin-top: .4rem; font-weight: 500; }

.sp-social { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; }
.sp-page .sp-social a {
	display: inline-block; font-size: .82rem; font-weight: 500;
	padding: .35rem .7rem; border-radius: 999px;
	border: 1px solid var(--sp-footer-rule);
	color: var(--sp-footer-ink-soft); text-decoration: none;
}
.sp-page .sp-social a:hover { border-color: var(--sp-accent); color: var(--sp-footer-link-hover); }

.sp-footer-bar { border-top: 1px solid var(--sp-footer-rule); }
.sp-footer-bar-inner {
	display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
	align-items: center; justify-content: space-between;
	padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.sp-page .sp-footer-bar p { margin: 0; font-size: .82rem; color: var(--sp-footer-ink-faint); }
.sp-disclaim { max-width: 52ch; }

/* Group headings line up across both columns of a mega menu. */
.sp-group-label { padding: .3rem .7rem .35rem; }
@media (max-width: 980px) {
	.sp-group ~ .sp-group .sp-group-label { padding-top: 1.1rem; }
}

@media (max-width: 980px) {
	/* Only the four top level items get a divider. Sub items stay quiet. */
	.sp-sub .sp-nav-li { border-bottom: 0; }
}

/* Formula callout used inside page content. */
.sp-page .sp-formula {
	font-family: var(--sp-font-mono);
	font-size: clamp(1.05rem, 2.4vw, 1.3rem);
	font-weight: 500;
	color: var(--sp-accent-ink);
	background: var(--sp-accent-soft);
	border: 1px solid var(--sp-rule);
	border-radius: var(--sp-radius-sm);
	padding: 1rem 1.2rem;
	margin: 1.4rem 0;
	text-align: center;
	overflow-x: auto;
}
.sp-page .wp-element-caption {
	font-size: .84rem; color: var(--sp-ink-faint);
	margin-top: .5rem; line-height: 1.55;
}
.sp-content figure.wp-block-table { overflow-x: auto; }

/* ==========================================================================
   13. RELATED TOOLS  (the four box section)
   ========================================================================== */

.sp-tools { margin: 2.2rem 0; }
.sp-content > .sp-tools { max-width: none; }
.sp-page .sp-tools-head {
	margin: 0 0 .85rem;
	font-family: var(--sp-font-head);
	font-size: .74rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--sp-ink-faint);
}

.sp-toolgrid { display: grid; gap: .75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .sp-toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sp-toolgrid { grid-template-columns: 1fr; } }

.sp-page a.sp-tool {
	display: flex; flex-direction: column; gap: .35rem;
	padding: 1rem 1.05rem 2.2rem;
	background: var(--sp-surface);
	border: 1px solid var(--sp-rule);
	border-radius: var(--sp-radius-sm);
	text-decoration: none; color: inherit;
	position: relative;
	transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sp-page a.sp-tool:hover {
	border-color: var(--sp-accent);
	box-shadow: 0 4px 14px rgba(16, 24, 38, .07);
	transform: translateY(-1px);
	color: inherit;
}
.sp-page a.sp-tool:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

.sp-tool-name {
	font-family: var(--sp-font-head);
	font-size: .95rem; font-weight: 600; line-height: 1.3;
	color: var(--sp-ink);
}
.sp-tool-blurb { font-size: .82rem; line-height: 1.5; color: var(--sp-ink-soft); }

.sp-tool-go {
	position: absolute; left: 1.05rem; bottom: .95rem;
	width: 8px; height: 8px;
	border-top: 1.8px solid var(--sp-accent);
	border-right: 1.8px solid var(--sp-accent);
	transform: rotate(45deg);
	transition: transform .15s, left .15s;
}
.sp-page a.sp-tool:hover .sp-tool-go { left: 1.35rem; }

/* Calculator pages open tight, so the calculator and its answer clear the fold. */
.sp-page .entry-content > .sp-wrap.sp-calc-page { padding-top: 1.4rem; }
.sp-calc-page .sp-calc-section { margin-bottom: 2.2rem; min-height: 0; }
.sp-page .sp-calc-page .sp-calc-section h1 {
	font-size: clamp(1.55rem, 3vw, 2.05rem);
	margin-bottom: .4rem;
}
.sp-calc-page .sp-calc-section .sp-dek {
	font-size: .95rem; line-height: 1.55;
	margin-bottom: 1.1rem; max-width: 80ch;
}

/* Calculator page header gets tighter on short screens, to protect the fold. */
@media (min-width: 1001px) and (max-height: 800px) {
	.sp-page .entry-content > .sp-wrap.sp-calc-page { padding-top: 1rem; }
	.sp-page .sp-calc-page .sp-calc-section h1 { font-size: 1.6rem; margin-bottom: .3rem; }
	.sp-calc-page .sp-calc-section .sp-dek { font-size: .92rem; margin-bottom: .85rem; }
	.sp-header { --sp-header-h: 64px; --sp-header-h-stuck: 56px; }
}

/* WordPress constrains every child of a group to the content width. The tool
   grid and wide tables need the full column, so they opt out here. */
.sp-page .is-layout-constrained > .sp-tools,
.sp-page .is-layout-constrained > .sp-full,
.sp-page .is-layout-constrained > figure.wp-block-table.sp-full {
	max-width: none;
	width: 100%;
}

/* The reading width belongs on the paragraphs, not on the block wrapper that
   holds them. Capping the wrapper was squeezing the tool grid and wide tables
   down to text width too. */
.sp-page .sp-content > .wp-block-group__inner-container { max-width: none; }
.sp-page .sp-content > .wp-block-group__inner-container > * { max-width: var(--sp-readw); }
.sp-page .sp-content > .wp-block-group__inner-container > .sp-tools,
.sp-page .sp-content > .wp-block-group__inner-container > .sp-full,
.sp-page .sp-content > .wp-block-group__inner-container > figure,
.sp-page .sp-content > .wp-block-group__inner-container > .wp-block-table { max-width: none; }

/* Segmented control track colour, alongside the other tokens. */
:root { --sp-seg-track: #EDF1F7; --sc-seg-track: var(--sp-seg-track); }

/* ==========================================================================
   14. CALCULATOR PAGE CONTENT WIDTH
   The content column lines up with the calculator above it, edge to edge, so
   the page reads as one block instead of two of different widths.
   ========================================================================== */

.sp-calc-page .sp-content > .wp-block-group__inner-container > *,
.sp-calc-page .sp-content > * { max-width: none; }

/*
 * READING MEASURE. Tried and reverted, 2026-08-27.
 *
 * The team audit measured prose at 1096px of 16.8px type, about 130 characters
 * a line against a comfortable range of 45 to 75, and asked for a 760 to 850px
 * measure. That was implemented at 76ch and reverted the same day at Bilal's
 * request: with the calculator at 1096 and the prose at 766 the column looked
 * unfinished on the right, on a page where the tables and the tools grid are
 * both full width.
 *
 * Narrowing everything to the prose measure instead was tested at 790px and
 * fails: the six mode tabs clip mid-word, the example chips wrap to four rows
 * and the result cards drop to two columns, roughly doubling the height of the
 * panel. A two-pane calculator wants about 1100px and readable prose wants
 * about 760. They cannot both be the same width and both be right.
 *
 * The alignment won, deliberately, on the grounds that the calculator is the
 * product and the prose supports it. The size and leading below are the
 * compensation. They do not fully cover it, and if engagement on these pages
 * ever looks weak on desktop, this is the first thing to re-test.
 */

/* Longer lines need a little more size and leading to stay readable. */
.sp-calc-page .sp-content p,
.sp-calc-page .sp-content li { font-size: 1.05rem; line-height: 1.8; }
.sp-calc-page .sp-faq { max-width: none; }


/* A forgiving hover bridge, so the pointer can cross the gap between the button
   and the panel without the menu closing under it. */
.sp-nav-li.has-sub > .sp-sub::before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: -10px;
	height: 10px;
}

/* The intro paragraph runs the same width as the calculator beneath it. */
.sp-calc-page .sp-calc-section .sp-dek { max-width: none; }

/* ==========================================================================
   15. BUTTON SCHEME
   Kadence paints every <button> on hover, focus and active with its own
   palette (#215387). That was landing on the Reset button while our rule kept
   the text dark, giving a murky dark-on-dark box. These tokens define the
   whole scheme in one place, and the plugin applies them to every state so
   nothing is left for the parent theme to fill in.
   ========================================================================== */

:root {
	/* primary: Calculate */
	--sp-btn-bg:            var(--sp-accent);
	--sp-btn-bg-hover:      var(--sp-accent-ink);
	--sp-btn-bg-active:     #0B3480;
	--sp-btn-ink:           var(--sp-on-accent);

	/* secondary: Reset, and anything else that sits beside a primary */
	--sp-btn2-bg:           transparent;
	--sp-btn2-bg-hover:     var(--sp-accent-soft);
	--sp-btn2-bg-active:    #DCE6FA;
	--sp-btn2-ink:          var(--sp-ink-soft);
	--sp-btn2-ink-hover:    var(--sp-accent-ink);
	--sp-btn2-border:       #D8DFE8;
	--sp-btn2-border-hover: var(--sp-accent);

	/* ghost: the mode tabs */
	--sp-btn3-ink:          var(--sp-ink-soft);
	--sp-btn3-ink-hover:    var(--sp-accent);
	--sp-btn3-ink-active:   var(--sp-accent-ink);

	/* shared */
	--sp-btn-ring:          var(--sp-accent);
	--sp-btn-off-bg:        #EDF1F5;
	--sp-btn-off-ink:       var(--sp-ink-faint);

	/* hand them to the calculator */
	--sc-btn-bg:            var(--sp-btn-bg);
	--sc-btn-bg-hover:      var(--sp-btn-bg-hover);
	--sc-btn-bg-active:     var(--sp-btn-bg-active);
	--sc-btn-ink:           var(--sp-btn-ink);
	--sc-btn2-bg:           var(--sp-btn2-bg);
	--sc-btn2-bg-hover:     var(--sp-btn2-bg-hover);
	--sc-btn2-bg-active:    var(--sp-btn2-bg-active);
	--sc-btn2-ink:          var(--sp-btn2-ink);
	--sc-btn2-ink-hover:    var(--sp-btn2-ink-hover);
	--sc-btn2-border:       var(--sp-btn2-border);
	--sc-btn2-border-hover: var(--sp-btn2-border-hover);
	--sc-btn3-ink:          var(--sp-btn3-ink);
	--sc-btn3-ink-hover:    var(--sp-btn3-ink-hover);
	--sc-btn3-ink-active:   var(--sp-btn3-ink-active);
	--sc-btn-ring:          var(--sp-btn-ring);
	--sc-btn-off-bg:        var(--sp-btn-off-bg);
	--sc-btn-off-ink:       var(--sp-btn-off-ink);
}

/* ==========================================================================
   16. THE SLOPE DIAGRAM
   Drawn as inline SVG rather than an image: every number is exactly right,
   it stays sharp at any size, it weighs a couple of kilobytes, and Google can
   read the labels. Colours come from the same tokens as everything else, so
   one edit up in block 1 recolours it.
   ========================================================================== */

.sp-diagram { margin: 1.8rem 0; }
.sp-diagram .sd { display: block; width: 100%; height: auto; }

.sd-surface { fill: var(--sp-surface); stroke: var(--sp-rule); stroke-width: 1; }

.sd-formula {
	font-family: var(--sp-font-mono);
	font-size: 21px;
	font-weight: 500;
	fill: var(--sp-ink);
	letter-spacing: .01em;
}

/* the two legs are supporting information, so they stay quiet */
.sd-leg    { stroke: var(--sp-ink-faint); stroke-width: 2; }
.sd-guide  { stroke: var(--sp-ink-faint); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.sd-g2     { stroke: var(--sp-border, #e5e9f0); stroke-width: 1; }
.sd-axisnum { font-size: 14px; fill: var(--sp-ink-faint); font-family: inherit; }
.sd-eqbig  { font-size: 36px; font-weight: 700; fill: var(--sp-ink); font-family: inherit; letter-spacing: .01em; }
.sd-tall .sd-eqbig { font-size: 30px; }
.sd-tall .sd-axisnum { font-size: 16px; }
.sd-square { stroke: var(--sp-ink-faint); stroke-width: 1.6; fill: none; }

/* the slope itself is the point of the picture */
.sd-line { stroke: var(--sp-accent); stroke-width: 4; stroke-linecap: round; }
.sd-dot  { fill: var(--sp-accent); }
.sd-arc  { stroke: var(--sp-accent); stroke-width: 2; fill: none; }

.sd-label {
	font-family: var(--sp-font-head);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .09em;
	fill: var(--sp-ink-soft);
}
.sd-angle {
	font-family: var(--sp-font-mono);
	font-size: 16px;
	font-weight: 500;
	fill: var(--sp-accent-ink);
}

.sd-box { fill: var(--sp-accent-soft); stroke: var(--sp-accent); stroke-width: 1; }
.sd-k {
	font-family: var(--sp-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	fill: var(--sp-ink-faint);
}
.sd-v {
	font-family: var(--sp-font-mono);
	font-size: 23px;
	font-weight: 600;
	fill: var(--sp-accent-ink);
}

/*
 * Lift the type wherever the diagram is rendering below its natural size.
 *
 * Was max-width: 600px, chosen when a narrow screen meant a scrolling diagram.
 * Now that portrait variants take over below 720px, the band that actually
 * needs this is the tablet range above it: measured at a 768px viewport the
 * wide diagram renders at 0.85 scale, which put the small caps at 9.4px.
 */
@media (max-width: 900px) {
	.sd-formula { font-size: 24px; }
	.sd-label   { font-size: 17px; }
	.sd-k       { font-size: 13px; }
	.sd-v       { font-size: 25px; }
	.sd-angle   { font-size: 18px; }
}

@media print { .sd-surface { fill: none; } }

/* Cap it at its natural size so it does not tower over the text, and let it
   scroll rather than shrink on a phone, where a squashed diagram is unreadable. */
.sp-diagram { max-width: 820px; margin-inline: auto; }
.sp-page .is-layout-constrained > .sp-diagram { max-width: 820px; }

@media (max-width: 720px) {
	.sp-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.sp-diagram .sd { min-width: 660px; }
}

/*
 * PORTRAIT DIAGRAM VARIANTS. Added 2026-08-26 after the team audit.
 *
 * The min-width above is a deliberate trade: on a phone a wide diagram scrolls
 * rather than shrinking to unreadable type. That holds for a diagram whose
 * meaning survives seeing the left half first.
 *
 * It does not hold for the ramp measurement diagram, where the rise figure and
 * the footprint total both sit on the far right. A visitor who does not realise
 * the figure scrolls sees the shape and none of the numbers.
 *
 * So a diagram may ship a second, taller SVG marked .sd-tall, with .is-responsive
 * on the figure. Below 720px the wide version is swapped out and the tall one
 * fits the column with no scrolling. Figures without .is-responsive are
 * untouched and keep scrolling, which is why pipe and roof are unaffected.
 *
 * Deliberately an explicit class rather than :has(). If :has() were ever not
 * supported the swap would fail open and BOTH diagrams would render. A class
 * fails closed: no class, old behaviour.
 */
.sp-diagram .sd-tall { display: none; }

/*
 * The tall variant only ever renders inside a narrow column, so its type is
 * sized for that and not for the 820px canvas. Measured at a 328px column,
 * which is a 360px phone: the shared 13px cap labels land at 9.7 rendered
 * pixels, too small to read. These put every label above 12.
 */
.sd-tall .sd-k     { font-size: 17px; }
.sd-tall .sd-label { font-size: 19px; }
.sd-tall .sd-angle { font-size: 21px; }
.sd-tall .sd-v     { font-size: 27px; }

/*
 * One breakpoint, and a cap.
 *
 * First attempt used two: portrait under 600px, and the wide version scaled
 * down between 600 and 720. Measured it instead of assuming: at a 560px column
 * the wide version's small caps render at 7.5px and its body labels at 10px.
 * "It scales down fine" was wrong.
 *
 * So the portrait version serves everything below 720px, and it is capped at
 * its natural width. Without the cap it stretched to fill the column: measured
 * at 700px wide with 30px labels and 43px numerals, worse than the scrolling it
 * replaced. Capped and centred it renders the same size on a 700px column as on
 * a 460px one, with white space either side, which is only cosmetic.
 */
@media (max-width: 720px) {
	.sp-diagram.is-responsive { overflow-x: visible; }
	.sp-diagram.is-responsive .sd { min-width: 0; }
	.sp-diagram.is-responsive .sd-wide { display: none; }
	.sp-diagram.is-responsive .sd-tall {
		display: block;
		width: 100%;
		max-width: 460px;
		margin-inline: auto;
	}
}

/* The calculator-page rule that unsets max-width on every content child was
   winning here, so this beats it on specificity rather than with !important. */
.sp-page .sp-calc-page .sp-content .sp-diagram,
.sp-page .sp-blog-page .sp-content .sp-diagram { max-width: 820px; margin-inline: auto; }

/* ==========================================================================
   17. WIDE TABLES ON NARROW SCREENS
   The review asked for a "swipe" label above wide tables. Doing it with a
   shadow instead: the classic background-attachment trick shows a soft edge
   only while there is more table off-screen, and it disappears when you reach
   the end. It is the affordance every native scroller uses, it needs no words
   in any language, it costs no vertical space, and it cannot go stale the way
   an instruction can. It applies to every table on every page, not just this one.
   ========================================================================== */

.sp-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background-image:
		linear-gradient(to right, var(--sp-bg, #fff) 30%, rgba(255, 255, 255, 0)),
		linear-gradient(to right, rgba(255, 255, 255, 0), var(--sp-bg, #fff) 70%),
		linear-gradient(to right, rgba(16, 24, 38, .13), rgba(16, 24, 38, 0)),
		linear-gradient(to left,  rgba(16, 24, 38, .13), rgba(16, 24, 38, 0));
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-repeat: no-repeat;
	background-size: 42px 100%, 42px 100%, 15px 100%, 15px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* Keyboard users need to be able to reach the scroller too. */
.sp-content .wp-block-table:focus-visible {
	outline: 2px solid var(--sp-accent, #1553c7);
	outline-offset: 3px;
}

.sp-content .wp-block-table table { min-width: 34rem; }

@media print {
	.sp-content .wp-block-table { overflow: visible; background-image: none; }
	.sp-content .wp-block-table table { min-width: 0; }
}

/* Caption under a diagram. The measurement drawing needs one because the
   picture shows the method and the words carry the rule. */
.sp-diagram .sp-figcap {
	font-size: .88rem;
	line-height: 1.55;
	color: var(--sp-ink-soft, #46536a);
	margin-top: .7rem;
	text-align: left;
}
@media (max-width: 720px) {
	.sp-diagram .sp-figcap { padding-inline: .2rem; }
}



/* ---------------------------------------------------------------- 19
   Outbound citations

   A link to the code we are quoting should look different from a link
   to another page on this site, so a reader knows before clicking that
   they are leaving. Small mark, no image request, hidden from screen
   readers because the anchor text already says what it is.

   The class is applied in PHP by comparing the link host against
   home_url(). An earlier version matched the production domain in the
   selector, which meant every internal link on the local install
   counted as outbound and the related tool cards drew two arrows: this
   one and their own. A stylesheet cannot know what host it is served
   from, so it does not get to decide.
   ---------------------------------------------------------------- */
/* The mark was a bare arrowhead: a square with its top and right borders
   kept, rotated 45 degrees. No shaft, so at text size it read as a stray
   greater-than sign, and the site owner asked whether it was a bug. A mark
   that has to be explained is not doing its job.

   It is now a proper diagonal arrow, drawn as an SVG mask so it still costs
   no network request, still takes its colour from the link, and still says
   nothing to a screen reader, because a mask has no text content. The bare
   arrowhead stays as the fallback where mask is unsupported. */
.entry-content a.sp-external::after {
	content: "";
	display: inline-block;
	width: .52em;
	height: .52em;
	margin-left: .28em;
	vertical-align: .06em;
	border: 1.4px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	transform: rotate(45deg);
	opacity: .65;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
	.entry-content a.sp-external::after {
		width: .62em;
		height: .62em;
		margin-left: .3em;
		vertical-align: -.01em;
		border: 0;
		transform: none;
		opacity: .55;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12.4 12 4M6.5 4h6v6'/%3E%3C/svg%3E") no-repeat center / contain;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 12.4 12 4M6.5 4h6v6'/%3E%3C/svg%3E") no-repeat center / contain;
	}
}
@media print {
	.entry-content a.sp-external::after { display: none; }
}


/* ---------------------------------------------------------------- 20
   Sources

   Sits at the foot of any page that quotes a standard. Quiet, dense,
   and deliberately last: it is there to be checked, not read. Each
   entry names the document and the edition, because a section number
   without an edition is not a citation.
   ---------------------------------------------------------------- */
.sp-sources {
	/* A raw HTML block sits outside Kadence's constrained layout, so it has
	   to line itself up with the content column by hand. This is the same
	   arithmetic .sp-wrap does: the max width less its inline padding, which
	   lands it exactly on the FAQ cards above it. */
	box-sizing: border-box;
	max-width: calc(var(--sp-maxw, 1160px) - 2 * clamp(1rem, 4vw, 2rem));
	margin: 3rem auto 0;
	padding: 1.4rem 1.5rem;
	border-top: 2px solid var(--sp-rule, #e2e7ee);
	background: var(--sp-sunk, #f7f9fc);
	border-radius: 0 0 10px 10px;
}
.sp-sources h2,
.sp-sources h3 {
	margin: 0 0 .35rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sp-ink-soft, #55606e);
}
.sp-sources > p {
	margin: 0 0 1rem;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--sp-ink-soft, #55606e);
}
.sp-sources ol {
	margin: 0;
	padding-left: 1.15rem;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--sp-ink-soft, #55606e);
}
.sp-sources li { margin-bottom: .6rem; }
.sp-sources li:last-child { margin-bottom: 0; }
.sp-sources cite {
	font-style: normal;
	font-weight: 600;
	color: var(--sp-ink, #101826);
}
.sp-sources .sp-src-note {
	display: block;
	margin-top: .1rem;
	font-size: .82rem;
	color: var(--sp-ink-faint, #5A6472);
}
@media (max-width: 600px) {
	.sp-sources { padding: 1.1rem 1.1rem; }
}

/* ==========================================================================
   BLOG PAGE FURNITURE
   Added 2026-08-31 with the first blog page, /point-slope-form/.
   Three pieces only: the hero figure, the quick answer, the contents list.
   BLOG_SKELETON.md left the quick-answer styling open to be decided here and
   inherited by the other twelve blog pages. This is that decision. Tokens
   only, no new colours.
   ========================================================================== */

.sp-fig {
	margin: 0 0 1.6rem;
}
.sp-fig svg {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sp-rule, #e2e7ee);
	border-radius: var(--sp-radius, 10px);
	background: var(--sp-surface, #fff);
}
.sp-fig figcaption {
	margin-top: .5rem;
	font-size: .85rem;
	color: var(--sp-ink-faint, #5A6472);
}

/* DIAGRAM LABELS AT PHONE WIDTH
 *
 * An inline SVG scales uniformly with its width, so its text shrinks with the
 * drawing. Measured on a 320px phone the labels in the first version of this
 * diagram rendered at 5.6px and the equation at 8px, which is not small, it is
 * unreadable. Two fixes, both here rather than in a second SVG file that would
 * drift out of sync with the first:
 *
 * 1. The equation moved out of the SVG into a real <p>. It is text, so it now
 *    scales with the page, can be selected and copied, and is read properly by
 *    a screen reader instead of being baked into a picture.
 * 2. The remaining labels size from a class, so a narrow screen can enlarge
 *    them in user units. The drawing keeps its proportions; only the type grows.
 */
/* Sizes are in viewBox units, not screen pixels. The viewBox is 440 wide and
   the figure renders at 736 on desktop, so a unit is worth 1.67 screen px:
   11 units lands at about 18px. On a 320px phone the figure is 288 wide, a
   unit is worth 0.65px, so the mobile block below asks for 21 units to land at
   the same readable size. */
.sp-fig-t { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 11px; }
.sp-fig-pt { font-size: 12px; font-weight: 600; }

/* A figure inside the body rather than at the top. Same styling, a little
   smaller and with room above it, so it reads as an illustration of the
   paragraph it sits in rather than as a second hero. */
.sp-fig-inline { margin-top: 1.3rem; }
.sp-fig-inline svg { max-width: 30rem; }
.sp-fig-inline figcaption { margin-top: .4rem; }

.sp-fig-eq-note {
	font-weight: 500;
	font-size: .85em;
	color: var(--sp-ink-faint, #5A6472);
}
.sp-fig-eq {
	margin: .7rem 0 0;
	font-family: var(--sp-font-head, inherit);
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--sp-ink, #101826);
	text-align: center;
}

@media (max-width: 700px) {
	/* At 320px the SVG renders about 288px wide, a scale of 0.65 against the
	   440 unit viewBox, so 21 units lands at roughly 14px on screen. */
	.sp-fig-t { font-size: 21px; }
	.sp-fig-pt { font-size: 23px; }
	.sp-fig-eq { font-size: 1.1rem; }
}

/* The quick answer. Reads as an answer, not as a paragraph. */
.sp-quick {
	margin: 0 0 1.6rem;
	padding: 1.1rem 1.25rem;
	background: var(--sp-accent-soft, #eaf0fd);
	border: 1px solid var(--sp-rule, #e2e7ee);
	border-left: 4px solid var(--sp-accent, #1553c7);
	border-radius: var(--sp-radius-sm, 8px);
}
.sp-quick p {
	margin: 0;
	font-size: 1.06rem;
	line-height: 1.6;
	color: var(--sp-ink, #101826);
}
.sp-quick p + p { margin-top: .6rem; }

/* Contents. Hand built, and deliberately so: the Kadence table of contents
   block stores its headings as editor attributes, and pages on this site are
   installed from a content file that the editor never opens, so the block
   would ship empty. Revisit only if that pipeline changes. */
.sp-toc {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	background: var(--sp-surface-2, #fbfcfd);
	border: 1px solid var(--sp-rule-soft, #edf1f5);
	border-radius: var(--sp-radius-sm, 8px);
}
.sp-toc h2 {
	margin: 0 0 .5rem;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sp-ink-faint, #5A6472);
}
.sp-toc ol {
	margin: 0;
	padding-left: 1.15rem;
}
.sp-toc li { margin: .22rem 0; }
.sp-toc a {
	color: var(--sp-accent-ink, #0e3e99);
	text-decoration: none;
}
.sp-toc a:hover,
.sp-toc a:focus { text-decoration: underline; }

/* A field note. Sits in the flow of the section it belongs to. Not a badge. */
.sp-note {
	margin: 1.2rem 0;
	padding: .9rem 1.1rem;
	background: var(--sp-amber-soft, #fcf2e3);
	border-left: 3px solid var(--sp-amber, #a65b00);
	border-radius: var(--sp-radius-sm, 8px);
}
.sp-note p { margin: 0; color: var(--sp-ink, #101826); }
.sp-note p + p { margin-top: .55rem; }

/* Blog pages read at the reading width, not the calculator width. Two
   overrides are needed because .sp-content lets figures and raw HTML escape it:
   the hero figure would run the full 1096px column, and .sp-sources centres
   itself inside that wider column, which leaves it visibly offset from body
   text that starts further left. BLOG_SKELETON: the hero is the same width as
   the content column and is never full bleed. */
/* Blog pages centre their reading column. The theme constrains .sp-content
   children to --sp-readw but leaves them flush left, which is right on a
   calculator page where the column IS the full width, and wrong here where the
   text is narrower than the wrapper and ends up hugging the left edge with a
   band of empty page beside it. Text stays left aligned; the column itself is
   centred. Specificity has to beat the theme's own 0-3-1 rules, hence .sp-page. */
/* One column width for the whole blog page, in rem not ch. The theme's
   --sp-readw is 72ch, and ch scales with font-size, so an h1 at 72ch is far
   wider than a paragraph at 72ch and the headings hang out past the text.
   A rem value is the same width for every element on the page. */
.sp-page .sp-blog-page .sp-content > .wp-block-group__inner-container > * {
	max-width: var(--sp-blogw, 46rem);
	margin-inline: auto;
}
.sp-page .sp-blog-page .sp-content > .wp-block-group__inner-container > figure.sp-fig {
	max-width: var(--sp-blogw, 46rem);
	margin-inline: auto;
}
.sp-page .sp-blog-page .sp-sources {
	max-width: var(--sp-blogw, 46rem);
	margin-inline: auto;
}

/* ANCHOR OFFSET FOR THE STICKY HEADER
   Jumping to #formula scrolls that heading to y=0, which is underneath the
   sticky header, so the reader lands looking at the first paragraph with the
   heading hidden above it. scroll-margin-top tells the browser to stop short.
   The header measures 63px, so 5.5rem (88px) clears it with a little air.
   Logged-in users also have the 32px admin bar sitting above the header, which
   pushes everything down, so they need that much more. Visitors never see the
   admin bar and get the smaller value.
   Applied to any element with an id inside the page wrapper, not just headings,
   so a future anchor anywhere on the page inherits the fix. */
.sp-wrap [id] { scroll-margin-top: 5.5rem; }
body.admin-bar .sp-wrap [id] { scroll-margin-top: 7.5rem; }

/* Animate the jump so the stop-short reads as deliberate rather than as the
   page having mis-scrolled. Skipped for anyone who has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* The three-forms comparison table. The theme already styles .sp-content
   tables; this only stops the first column collapsing and lets a narrow screen
   scroll the table rather than the page. */
.sp-compare { overflow-x: auto; }
.sp-compare table { min-width: 34rem; }
.sp-compare td:first-child,
.sp-compare td:nth-child(2) { white-space: nowrap; }

/* The practice reveal. Looks and behaves like an FAQ card on purpose, but it
   must NOT wear .sp-faq-item: that class is what kadence_slope_faq_schema()
   scrapes into FAQPage structured data, and "Show the answers" is not a
   question. Styled from the same rules, kept under its own name. */
.sp-reveal { margin-top: 1.2rem; }

@media (max-width: 600px) {
	.sp-quick, .sp-toc, .sp-note { padding: .95rem 1rem; }
}