/* StressTherapy Solutions — site-wide chrome + design tokens.
   Loaded on EVERY page (see functions.php). Defines the palette (light + dark),
   base typography, the shared site header / nav / footer, buttons, and the
   floating light/dark toggle. Theme is driven by <html data-theme="light|dark">.
   Page-type specifics live in home.css (front page) and inner.css (the rest). */

/* ---------- design tokens ---------- */
.sts-site{
  --green:#2f7d4f; --green-deep:#1b5233; --green-bright:#55b07a;
  --ink:#161d18; --ink-soft:#4e5a51; --ink-faint:#84918a;
  --ground:#e7ece4; --surface:#fbfcfa; --surface-2:#dae2d6; --line:#c9d3c5;
  --accent:var(--green); --accent-deep:var(--green-deep);
  --sans:"Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,system-ui,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --shell:1120px;
}
:root[data-theme="dark"] .sts-site{
  --green:#5cb782; --green-deep:#8fd6aa; --green-bright:#6cc48d;
  --ink:#eef4ef; --ink-soft:#b7c4bb; --ink-faint:#7f8f84;
  --ground:#1a211d; --surface:#232b26; --surface-2:#2c3730; --line:#3a4a41;
  --accent:#6cc48d; --accent-deep:#8fd6aa;
}

/* ---------- base ---------- */
body.sts-site{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
.sts-site *{box-sizing:border-box}
.sts-site img{max-width:100%;height:auto}
.sts-shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:20px}
/* The eyebrow is 12.5px, so WCAG treats it as normal text and wants 4.5:1. Brand green
   (#2f7d4f) on the light ground (#e7ece4) measures 4.20 — a near miss, but a miss. The
   deep green is the same brand ramp and clears it comfortably, so light mode uses that;
   dark mode keeps the bright green, which already measures 6.68 on the dark ground. */
.sts-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);margin:0}
:root[data-theme="dark"] .sts-site .sts-eyebrow{color:var(--green)}

/* Headings must be bound to the token EXPLICITLY, not left to inherit from body.
   Kadence sets a hard-coded h1..h6 colour (#1a202c) which does not follow our dark
   toggle, and a direct rule on the element always beats an inherited colour — so
   setting `color` on a container does nothing for the headings inside it. Without
   this, any template whose own stylesheet does not name the heading renders it at
   about 1:1 contrast in dark mode: #1a202c on our #1a211d ground, i.e. invisible.
   That is what happened to the instructor archive's <h1> and its group <h2>s. */
.sts-site h1,.sts-site h2,.sts-site h3,.sts-site h4,.sts-site h5,.sts-site h6{color:var(--ink)}

/* Section headings are used by inner templates too (the instructor archive, for one),
   but home.css both scopes them to `.sts-home` AND is only enqueued on the front page,
   so everywhere else they had no size, weight or spacing at all. Base styles live here;
   the `.sts-home`-scoped rules in home.css are more specific and still win on the
   homepage, where the block is centred and width-limited. */
.sts-section-head{margin:0 0 26px}
.sts-section-title{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-.02em;margin:.35em 0 .3em;color:var(--ink)}
.sts-section-lede{color:var(--ink-soft);font-size:17px;margin:0}

/* skip link */
.sts-skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.sts-skip:focus{left:0}

/* buttons */
.sts-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:15px;line-height:1;padding:13px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,color .15s,border-color .15s}
.sts-btn:hover{transform:translateY(-1px)}
.sts-btn-solid{background:var(--green);color:#fff}
.sts-btn-solid:hover{background:var(--green-deep)}
:root[data-theme="dark"] .sts-site .sts-btn-solid{color:#0f1611}
.sts-btn-ghost{background:transparent;color:var(--green-deep);border-color:var(--line)}
.sts-btn-ghost:hover{border-color:var(--green)}
.sts-btn-on-dark{color:#fff;border-color:rgba(255,255,255,.5)}
.sts-btn-on-dark:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.sts-link{font-weight:700;color:var(--green-deep);text-decoration:none;border-bottom:2px solid var(--surface-2);padding-bottom:2px}
.sts-link:hover{border-bottom-color:var(--green)}

/* ---------- site header ---------- */
.sts-siteheader{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sts-siteheader-inner{position:relative;display:flex;align-items:center;gap:16px;min-height:66px}
.sts-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800}
.sts-brand-mark{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:var(--green);color:#fff}
.sts-brand-mark svg{width:20px;height:20px}
.sts-brand-text{font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.sts-brand-accent{color:var(--green)}
.sts-brand-logo{display:block;height:auto;max-width:100%}
/* Size by WIDTH (+ !important + specific selector) so no stray height rule can
   blow the logo up. Header and footer are the same size. */
.sts-siteheader .sts-brand-logo,.sts-sitefooter .sts-brand-logo{width:260px!important;height:auto!important}
/* Simple PayPal Cart: style the (now text) add-to-cart buttons site-wide */
.wspsc_add_cart_submit{display:inline-block;font:inherit;font-weight:700;line-height:1.2;padding:9px 16px;border-radius:999px;border:1.5px solid var(--green);background:var(--green);color:#fff;cursor:pointer;transition:background .15s,transform .15s}
.wspsc_add_cart_submit:hover{background:var(--green-deep);transform:translateY(-1px)}
.sts-foot-brand{display:inline-flex}
@media (max-width:600px){.sts-siteheader .sts-brand-logo,.sts-sitefooter .sts-brand-logo{width:175px!important}}

/* primary nav */
.sts-nav{margin-left:auto}
.sts-nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:26px}
.sts-nav-list li{position:relative}
.sts-nav-list a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:15px;display:inline-block}
.sts-nav-list a:hover,.sts-nav-list .current-menu-item>a,.sts-nav-list .current_page_item>a{color:var(--green)}
.sts-nav-list .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -22px rgba(22,29,24,.4);display:none;z-index:60}
.sts-nav-list li:hover>.sub-menu,.sts-nav-list li:focus-within>.sub-menu{display:block}
.sts-nav-list .sub-menu a{display:block;padding:8px 12px;border-radius:8px}
.sts-nav-list .sub-menu a:hover{background:var(--surface-2)}
.sts-header-cta{padding:10px 18px;font-size:14px}

/* hamburger (mobile) */
.sts-navtoggle{display:none;margin-left:auto;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.sts-navtoggle-bar{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
body.sts-nav-open .sts-navtoggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.sts-nav-open .sts-navtoggle-bar:nth-child(2){opacity:0}
body.sts-nav-open .sts-navtoggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- site footer ---------- */
.sts-sitefooter{background:#161d18;color:#d7e0d9;margin-top:auto}
:root[data-theme="dark"] .sts-site .sts-sitefooter{background:#141a16}
.sts-sitefooter-inner{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-block:36px}
.sts-sitefooter .sts-brand-text{color:#fff}
.sts-foot-nav{margin:0}
.sts-foot-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px}
.sts-foot-list a{color:#aebbb1;text-decoration:none;font-size:15px}
.sts-foot-list a:hover{color:#fff}

/* keep footer pinned on short inner pages */
body.sts-site{display:flex;flex-direction:column;min-height:100vh}

/* focus */
.sts-site a:focus-visible,.sts-site .sts-btn:focus-visible,.sts-navtoggle:focus-visible{outline:2.5px solid var(--green);outline-offset:3px}

/* ---------- floating theme toggle ---------- */
.sts-theme-toggle{position:fixed;right:18px;bottom:18px;z-index:1000;width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(22,29,24,.14);background:#ffffff;color:#1b5233;cursor:pointer;box-shadow:0 6px 22px -8px rgba(22,29,24,.5);transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease}
.sts-theme-toggle:hover{transform:translateY(-2px)}
.sts-theme-toggle:focus-visible{outline:2.5px solid #2f7d4f;outline-offset:3px}
.sts-theme-toggle svg{width:22px;height:22px}
.sts-theme-toggle .sts-i-sun{display:none}
.sts-theme-toggle .sts-i-moon{display:block}
:root[data-theme="dark"] .sts-theme-toggle{background:#2c3730;color:#8fd6aa;border-color:rgba(255,255,255,.16);box-shadow:0 6px 22px -8px rgba(0,0,0,.7)}
:root[data-theme="dark"] .sts-theme-toggle .sts-i-sun{display:block}
:root[data-theme="dark"] .sts-theme-toggle .sts-i-moon{display:none}

/* ---------- instructor cards (shortcode [sts_instructors]) ---------- */
.sts-instructors{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:560px){.sts-instructors{grid-template-columns:1fr 1fr}}
@media (min-width:880px){.sts-instructors{grid-template-columns:repeat(var(--sts-cols,3),1fr)}}
/* Cards stretch to the tallest in their row, so every name and every "Read bio" in a
   row sits on the same line regardless of how much text each person has. */
.sts-inst-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 20px;box-shadow:0 1px 2px rgba(22,29,24,.04),0 16px 36px -26px rgba(27,82,51,.28)}
/* Photos: fixed 4:5 box, whatever the source shape.
   `height:150px` alone did NOT hold — Kadence ships `img{height:auto}` at equal
   specificity and wins on source order, so only the width applied and portraits,
   squares and landscapes all rendered at different heights in the same row. Declaring
   height:auto and letting aspect-ratio set the box works WITH that rule instead of
   fighting it, and needs no !important. */
.sts-inst-card .sts-inst-photo{width:120px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:12px;margin-bottom:12px;background:var(--surface-2);flex:none}
/* The monogram stand-in is a <span>, so it needs the box drawn explicitly. */
.sts-inst-card .sts-inst-monogram{display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--ink-faint)}
/* Pin the link to the bottom of every card. */
.sts-inst-card .sts-link{margin-top:auto;padding-top:14px}
/* Reserve the line even when someone has no credentials, so the blurb below starts at
   the same height on every card. */
.sts-inst-creds:empty::before{content:"\00a0"}
.sts-inst-excerpt.is-pending{font-style:italic;color:var(--ink-faint)}
.sts-inst-monogram{display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--green)}
.sts-inst-name{font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0}
.sts-inst-creds{font-size:13px;font-weight:700;color:var(--green-deep);margin:0}
.sts-inst-excerpt{font-size:14px;color:var(--ink-soft);margin:8px 0 0;line-height:1.5}

/* ---------- workshop cards (shortcode [sts_workshops]) ---------- */
.sts-workshops{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:560px){.sts-workshops{grid-template-columns:1fr 1fr}}
@media (min-width:880px){.sts-workshops{grid-template-columns:repeat(var(--sts-cols,3),1fr)}}
.sts-wk-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(22,29,24,.04),0 16px 36px -26px rgba(27,82,51,.28)}
.sts-wk-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:var(--surface-2);padding:5px 11px;border-radius:999px}
.sts-wk-title{font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0}
.sts-wk-title a{color:var(--ink);text-decoration:none}
.sts-wk-title a:hover{color:var(--green)}
.sts-wk-excerpt{font-size:14px;color:var(--ink-soft);margin:0;line-height:1.5}
.sts-wk-card .sts-link{margin-top:auto}

/* ---------- responsive ---------- */
@media (max-width:719px){
  .sts-navtoggle{display:flex}
  .sts-nav{position:absolute;top:100%;left:0;right:0;margin:0;display:none;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(0,0,0,.35)}
  body.sts-nav-open .sts-nav{display:block}
  .sts-nav-list{flex-direction:column;align-items:stretch;gap:0;padding:6px 0}
  .sts-nav-list a{padding:13px 20px}
  .sts-nav-list .sub-menu{position:static;display:block;border:0;box-shadow:none;padding:0 0 8px 14px;background:transparent}
  .sts-header-cta{display:none}
}
/* ---- footer contact + copyright ---------------------------------------- */
/* Its own row under the logo and nav rather than a fourth item in that flex line —
   four items sharing space-between squeezes the address until it wraps mid-street. */
.sts-foot-legal{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}
.sts-foot-contact{font-style:normal;color:#8c988f;font-size:13.5px;line-height:1.7;
  display:flex;flex-wrap:wrap;gap:0 10px;align-items:baseline}
/* Separators are decoration, so they are aria-hidden in the markup and simply vanish
   when the line wraps — a pipe stranded at the start of a row reads as a typo. */
.sts-foot-sep{color:#5d6a61}
.sts-foot-contact a{color:#c8d3cb;text-decoration:none;border-bottom:1px solid #46524a}
.sts-foot-contact a:hover{color:#fff;border-bottom-color:#8fd6aa}
.sts-copy{color:#8c988f;font-size:14px}

@media (min-width:720px){
  .sts-sitefooter-inner{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  /* Full width forces the legal block onto its own line beneath the row above. */
  .sts-foot-legal{flex:1 0 100%;flex-direction:row;align-items:baseline;
    justify-content:space-between;gap:18px;
    margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
  .sts-copy{white-space:nowrap}
}
@media (max-width:719.98px){
  /* Stacked, the pipes sit between wrapped lines and look like stray characters. */
  .sts-foot-contact{flex-direction:column;gap:2px}
  .sts-foot-sep{display:none}
}

/* ---- instructor team page: two groups, one divider ---------------------- */
.sts-team-section{margin:0 0 52px}
.sts-team-section.is-secondary{margin-top:64px;padding-top:40px;border-top:2px solid var(--line)}
.sts-team-head{margin:0 0 24px}
.sts-team-title{margin:0;font-size:26px;font-weight:800;letter-spacing:-.018em;color:var(--ink)}
.sts-team-lede{margin:6px 0 0;font-size:15px;color:var(--ink-soft)}

/* ============================================================================
   Print
   ----------------------------------------------------------------------------
   Written so the site can be reviewed on paper. A reviewer without a computer
   still needs to read the words, and the default print output was mostly
   furniture: site header, primary nav, footer nav, contact band and a "Get in
   touch" button on every single sheet.

   Two rules drive everything here. Navigation is worthless on paper, because
   nothing on a page is clickable — it goes. And a link that says "read more"
   tells a reader nothing once the href is gone, so real destinations are
   printed alongside the text.
   ========================================================================== */

@media print {

	/* Ink. Backgrounds are dropped so body text is black on white; the few
	   places where a background carries meaning re-enable it below. */
	:root {
		--sts-ink: #000;
		--sts-muted: #333;
	}

	html, body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt;
	}

	/* Chrome that cannot be acted on. */
	.sts-siteheader,
	.sts-sitefooter,
	.sts-nav,
	.sts-navtoggle,
	.sts-foot-nav,
	.sts-header-cta,
	.sts-skip,
	.sts-cta-band,
	.sts-themetoggle,
	.sts-carousel-arrow,
	.sts-carousel-dots,
	.sts-vidlib,
	#wpadminbar {
		display: none !important;
	}

	/* The brand belongs on the first sheet only — repeating it on all 40 wastes
	   a third of a page each time. */
	.sts-brand { display: none !important; }

	main, .sts-shell, .sts-copy {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* A carousel prints as one slide unless every slide is unstacked — otherwise
	   the reviewer sees testimonial 1 of 9 and never knows the rest exist. */
	.sts-carousel-track {
		display: block !important;
		transform: none !important;
	}
	.sts-carousel-slide {
		display: block !important;
		width: auto !important;
		page-break-inside: avoid;
		break-inside: avoid;
		margin-bottom: 10pt;
	}

	/*
	 * Grids are LEFT AS GRIDS. Collapsing them to one column looks like the tidy
	 * thing to do and is a trap: every card photo is width:100%, so a full-width
	 * card gives a full-width photo. The instructor roster went to 205 sheets —
	 * four per person, 51 people — and buried a 65-page review pack inside a ream.
	 *
	 * At print width the existing auto-fill grid already settles on about three
	 * columns, which reads fine. Only the roster needs help, because 51 cards at
	 * three across is still a dozen pages of mostly photograph.
	 */
	.sts-instructor-grid {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 6pt !important;
	}
	.sts-instructor-card-media { max-width: 26mm !important; }
	.sts-instructor-card .sts-instructor-photo,
	.sts-instructor-photo.is-empty {
		width: 26mm !important;
		height: auto !important;
	}
	.sts-instructor-card-name { font-size: 9pt !important; }
	.sts-instructor-card-creds { font-size: 7.5pt !important; }

	/* A group of the roster should not be split mid-heading. */
	.sts-instructor-group-head { page-break-after: avoid; break-after: avoid; }

	.sts-card,
	.sts-inst-card,
	.sts-instructor-card,
	.sts-kb-card {
		page-break-inside: avoid;
		break-inside: avoid;
		border: 1px solid #bbb !important;
		margin: 0 0 8pt !important;
		box-shadow: none !important;
	}

	h1, h2, h3, h4 {
		page-break-after: avoid;
		break-after: avoid;
		color: #000 !important;
	}

	p, li, blockquote, table, figure, img {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	img { max-width: 100% !important; height: auto !important; }

	a { color: #000 !important; text-decoration: underline; }

	/*
	 * Print the destination after external links. Restricted to http(s) so
	 * mailto: and tel: — which already show the address in their own text —
	 * are not doubled up, and suppressed inside headings where a URL would
	 * break the line badly.
	 */
	.sts-copy a[href^="http"]::after,
	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 8pt;
		color: #444;
		word-break: break-all;
	}
	h1 a::after, h2 a::after, h3 a::after, h4 a::after,
	.sts-card a::after, .sts-btn::after { content: "" !important; }

	/*
	 * Interactive tools cannot be printed meaningfully — a canvas animating an EEG
	 * trace is a blank rectangle on paper, and a blank rectangle reads as a broken
	 * page rather than an omission. So the canvas goes and its container says why.
	 * Done with a generated note rather than markup, so no template has to carry an
	 * element that exists only for print.
	 */
	.sts-freq-stage canvas,
	.sts-brodmann-stage canvas,
	canvas {
		display: none !important;
	}
	.sts-freq-stage::after,
	.sts-brodmann-stage::after,
	.sts-planner-frame::after {
		content: "[ Interactive tool — this part only works on screen. ]";
		display: block;
		padding: 10pt;
		border: 1px dashed #999;
		font-style: italic;
		color: #444;
		text-align: center;
	}
	.sts-planner-frame iframe { display: none !important; }

	@page {
		margin: 16mm 14mm;
	}
}


/* ============================================================================
   Migration QA fixes
   ========================================================================== */

/* Footer: policies link, email and badges. Badges sit on white chips because all three
   images were drawn for a white page and disappear on the dark footer. */
.sts-foot-policy{display:flex;flex-direction:column;gap:14px;align-items:flex-start;width:100%}
.sts-foot-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px}
.sts-foot-links a{color:#c8d3cb;text-decoration:none;border-bottom:1px solid #46524a}
.sts-foot-links a:hover{color:#fff;border-bottom-color:#8fd6aa}
.sts-foot-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sts-foot-badges li{background:#fff;border-radius:6px;padding:6px 8px;display:flex;align-items:center}
.sts-foot-badges img{display:block;height:36px!important;width:auto!important;max-width:none}
.sts-foot-badges .sts-foot-badge-tall img{height:52px!important}
@media (min-width:900px){
  .sts-foot-policy{flex:1 0 100%;flex-direction:row;justify-content:space-between;align-items:center}
}

/* Purchase fallback: what a Register button shows when the cart is not running. */
.sts-buy-fallback{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px dashed var(--line);
  border-radius:10px;background:var(--surface);color:var(--ink-soft);font-size:14px;line-height:1.5;max-width:560px}
.sts-buy-fallback-lead{color:var(--ink);font-weight:600}
.sts-buy-fallback a{color:var(--green-deep)}

/* Policy link beside workshop registration. */
/* An editor's note at the top of a page — "this is a draft", "these figures come from
   elsewhere". It has to read as something OTHER than the page, or it is just a first paragraph
   that happens to be about the page: both of these classes were being used with no styling at
   all, so a reader had no way to tell where the note ended and the page began.
   A tinted panel with a rule down the leading edge, and a clear gap under it, which is the
   break. Colour comes from the theme's own tokens so it follows light and dark. */
.sts-page-note,.sts-cert-note{
  margin:0 0 2em;padding:16px 18px;
  border-inline-start:4px solid var(--green);border-radius:8px;
  background:var(--surface-2);color:var(--ink-soft);
  font-size:15px;line-height:1.6}
.sts-page-note strong,.sts-cert-note strong{color:var(--ink)}
.sts-page-note a,.sts-cert-note a{color:var(--green-deep)}
/* The gap alone can read as ordinary spacing, so the note is followed by a hairline that spans
   the column — the visible "the page starts here" line. */
.sts-page-note::after{content:"";display:block;margin:16px -18px -16px;border-bottom:1px solid var(--line)}

.sts-wshop-terms{flex:1 0 100%;margin:8px 0 0;font-size:13px;color:var(--ink-soft)}
.sts-wshop-terms a{color:var(--green-deep)}

/* "In this section" list under parent pages. */
.sts-section-index{margin-block:40px 8px;padding-top:22px;border-top:1px solid var(--line)}
.sts-section-index-title{font-size:12.5px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 10px!important;font-weight:600}
.sts-section-index ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 28px}
.sts-section-index li{margin:0}
.sts-section-index a{display:block;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
.sts-section-index a:hover{color:var(--green-deep)}

/* Links page. */
.sts-linklist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:18px}
.sts-linklist li{color:var(--ink-soft);line-height:1.55}
.sts-linklist a{font-weight:600;color:var(--green-deep)}