/* ============================================================================
   SFTS modular page templates
   Loaded only on template-host-presentation / start-a-chapter / areyouokay-guide
   / areyouokay-toolkit (see inc/modules.php). Sits ON the theme's framework:
   Figtree, the site palette, the hard-shadow button family, the breakpoints
   1279 / 1023 / 767 / 640. Everything is scoped under body.sfts-modular.
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
body.sfts-modular {
  --sfts-ink: #262626;
  --sfts-ink-soft: #4b5560;        /* 7.6:1 on white */
  --sfts-white: #fff;
  --sfts-blue: #2a9cde;            /* site blue: fills, rules, shadows, large text only (3.0:1) */
  --sfts-blue-fill: #1878bd;       /* white text on it reads 4.7:1 */
  --sfts-blue-text: #1673b3;       /* text and icons on white / light blue (5.0:1 / 4.8:1) */
  --sfts-orange: #ff9b5c;          /* always with ink text */
  --sfts-light: #f2faff;
  --sfts-sky: #d2efff;
  --sfts-orange-tint: #fff4ec;
  --sfts-dark: #262626;
  --sfts-rule: #dce8f2;
  --sfts-rule-strong: #c9dff0;
  --sfts-ph: #ffe4d1;
  --sfts-accent-text: var(--sfts-blue-text);

  --sfts-wrap: 1200px;
  --sfts-gutter: 32px;
  --sfts-space: 80px;             /* 96 until 2026-10-18 (style round 2) */
  --sfts-radius: 0px;

  --sfts-text: 18px;
  --sfts-lead: 21px;
  --sfts-small: 16px;
  --sfts-h1: clamp(40px, 3.4vw + 10px, 62px);
  --sfts-h2: clamp(30px, 1.5vw + 14px, 44px);
  --sfts-h3: 22px;

  --sfts-scroll-pad: 140px;        /* republished by sfts-modules.js from the real header height */
}
body.sfts-modular.sfts-page--w-site,
body.sfts-modular .sfts-page--w-site { --sfts-wrap: 1704px; }

@media (max-width: 1279px) { body.sfts-modular { --sfts-space: 72px; } }
@media (max-width: 1023px) { body.sfts-modular { --sfts-space: 56px; } }
@media (max-width: 767px)  { body.sfts-modular { --sfts-space: 44px; --sfts-text: 17px; --sfts-lead: 19px; } }
@media (max-width: 640px)  { body.sfts-modular { --sfts-gutter: 16px; } }

/* ── Page frame ──────────────────────────────────────────────────────────── */
.sfts-page { color: var(--sfts-ink); font-size: var(--sfts-text); line-height: 1.55; }
.sfts-main { display: block; outline: none; }
.sfts-wrap { width: 100%; max-width: var(--sfts-wrap); margin: 0 auto; padding: 0 var(--sfts-gutter); }
.sfts-mod--w-narrow .sfts-wrap { max-width: 1200px; }
.sfts-mod--w-site .sfts-wrap { max-width: 1704px; }

/* theme resets inside the modular main (the theme styles bare tags for the WYSIWYG pages).
   :where() keeps them at (0,1,0): they still beat the theme's bare-tag rules (0,0,1) but no longer outrank a
   module's own single-class rule written later in this sheet. Until 2026-10-18 they were (0,1,1) and quietly
   won: .sfts-h2's bottom margin, .sfts-crisiscard__lead's, .sfts-stats__list--inline's offset, .sfts-callout's
   padding and left border, .sfts-card-item's flex were all lost to them. Lists keep their weight below, because
   the theme decorates `ul:not(.menu, …) li` at (0,1,2); list-item rules carry a .sfts-page prefix instead. */
.sfts-main :where(h1, h2, h3, h4) { margin: 0; clear: none; text-wrap: balance; } /* balance: no single-word last line on a two-line heading (card titles, hero h1) */
.sfts-main :where(summary) { text-wrap: balance; }
.sfts-main :where(p) { margin: 0 0 16px; }
.sfts-main :where(p:last-child) { margin-bottom: 0; }
/* no stranded last words in running text ("…straight from / it."); browsers without text-wrap: pretty wrap as before */
.sfts-main :where(p, li, dd, dt, figcaption) { text-wrap: pretty; }
/* The theme decorates every list: `ul:not(.menu, …) li { padding-left: 30px; min-height: 30px }`
   with an orange square in li::before (specificity 0,1,3 because of the :not() list), and
   numbered circles on `ol li::before`. Reset at the same weight; this sheet loads later. */
.sfts-page ul, .sfts-page ol { display: block; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
/* The theme also makes every plain list `display: grid; gap: 23px` (ul:not(.menu, …) at 0,1,1), so list-based
   layouts below carry a .sfts-page prefix (0,2,0) to outrank both that rule and this reset. */
.sfts-page ul li, .sfts-page ol li, .sfts-page li { position: static; display: block; float: none; width: auto; margin: 0; padding: 0; min-height: 0; counter-increment: none; }
.sfts-page ul li::before, .sfts-page ol li::before, .sfts-page li::before { content: none; display: none; }
.sfts-main :where(figure) { margin: 0; }
.sfts-main :where(dl, dt, dd) { margin: 0; padding: 0; }
.sfts-main :where(img) { max-width: 100%; height: auto; display: block; }
/* plain text links only: anything with a class (buttons, chips, cards) styles itself */
.sfts-main a:not([class]) { color: var(--sfts-accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s ease-in; }
.sfts-main a:not([class]):hover { color: var(--sfts-ink); }
.sfts-main button { font-family: inherit; }
.sfts-main .screen-reader-text { position: absolute !important; }

/* sections */
.sfts-mod { position: relative; overflow: visible; overflow-x: clip; padding: var(--sfts-space) 0; scroll-margin-top: var(--sfts-scroll-pad); }
.sfts-mod[tabindex="-1"] { outline: none; }
/* Tight = "this section continues the one above it" (the field's own instruction):
   the gap ABOVE it is half a section space, the gap below stays whole. The gap
   between two sections is the first one's bottom padding (plus the second one's
   top padding only where the background changes), so both halves are needed.
   Until 2026-10-19 the class halved the section's own top and bottom padding,
   which with a dropped top padding meant "tight below me" and left, for example,
   the toolkit's stats band 80px under its intro and 40px above the next heading. */
.sfts-sp--tight { padding-top: calc(var(--sfts-space) / 2); }
.sfts-mod:not(.sfts-sp--none):has(+ .sfts-sp--tight) { padding-bottom: calc(var(--sfts-space) / 2); }
.sfts-sp--none { padding: 0; }
/* two neighbours on the same background read as one block: drop the second one's top padding */
.sfts-mod:not([class*="sfts-bg--"]) + .sfts-mod:not([class*="sfts-bg--"]),
.sfts-bg--light + .sfts-bg--light,
.sfts-bg--sky + .sfts-bg--sky,
.sfts-bg--blue + .sfts-bg--blue,
.sfts-bg--dark + .sfts-bg--dark,
.sfts-bg--white + .sfts-bg--white,
.sfts-bg--orange-tint + .sfts-bg--orange-tint { padding-top: 0; }
.sfts-mod--hero { padding-top: 0; }

.sfts-bg--white { background: var(--sfts-white); }
.sfts-bg--light { background: var(--sfts-light); }
.sfts-bg--sky { background: var(--sfts-sky); --sfts-accent-text: var(--sfts-ink); }
.sfts-bg--orange-tint { background: var(--sfts-orange-tint); }
.sfts-bg--blue { background: var(--sfts-blue-fill); }
.sfts-bg--dark { background: var(--sfts-dark); }
/* On blue (#1878BD) white is 4.7:1, so secondary text stays solid white: any translucent white fails AA at body sizes. */
.sfts-on-dark { color: var(--sfts-white); --sfts-ink: #fff; --sfts-ink-soft: #fff; --sfts-accent-text: #fff; --sfts-rule: rgba(255, 255, 255, .28); }
.sfts-on-dark a:not([class]) { color: #fff; }
.sfts-on-dark a:not([class]):hover { color: var(--sfts-orange); }

/* ── Type ────────────────────────────────────────────────────────────────── */
.sfts-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sfts-accent-text); }
.sfts-eyebrow::before { content: ""; display: block; flex: none; width: 32px; height: 3px; background: var(--sfts-orange); }
.sfts-pill { display: inline-flex; align-items: center; margin: 0 0 18px; padding: 9px 18px; border-radius: 999px; background: var(--sfts-orange); color: #262626; font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sfts-h2 { font-size: var(--sfts-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 16px; color: var(--sfts-ink); text-wrap: balance; }
.sfts-h2 em, .sfts-h2 i { font-style: italic; }
.sfts-lead { font-size: var(--sfts-lead); line-height: 1.5; color: var(--sfts-ink-soft); max-width: 780px; margin: 0; text-wrap: pretty; }
.sfts-mod__head { margin: 0 0 32px; }
.sfts-mod__head .sfts-lead { margin-top: 0; }
/* Host / Chapter headings: the mockups' blue bar when there is no eyebrow.
   The bar runs the heading's full height, inset .125em top and bottom: a one-line heading keeps the .85em bar it
   always had (line-height 1.1), a two-line one gets a bar down both lines (until 2026-10-23 it was a centred stub
   between them). Positioned, not flex: in a flex h2 every <em>/<br> the heading field allows became its own item. */
.sfts-tpl-host .sfts-mod__head:not(:has(.sfts-eyebrow)) .sfts-h2,
.sfts-tpl-chapter .sfts-mod__head:not(:has(.sfts-eyebrow)) .sfts-h2,
.sfts-tpl-host .sfts-h2:first-child,
.sfts-tpl-chapter .sfts-h2:first-child { position: relative; padding-left: 24px; }
.sfts-tpl-host .sfts-mod__head:not(:has(.sfts-eyebrow)) .sfts-h2::before,
.sfts-tpl-chapter .sfts-mod__head:not(:has(.sfts-eyebrow)) .sfts-h2::before,
.sfts-tpl-host .sfts-h2:first-child::before,
.sfts-tpl-chapter .sfts-h2:first-child::before { content: ""; position: absolute; left: 0; top: .125em; bottom: .125em; width: 4px; background: var(--sfts-bar, var(--sfts-blue)); }
/* Orange bar on blue / dark bands. A variable, because the old `.sfts-on-dark .sfts-h2::before` (0,2,1) lost to the
   rules above (0,3,1)/(0,4,1) and the chapter CTA band kept a blue bar on blue until 2026-10-23. */
.sfts-on-dark { --sfts-bar: var(--sfts-orange); }
.sfts-prose { font-size: var(--sfts-text); line-height: 1.6; }
.sfts-prose p { margin: 0 0 16px; }
.sfts-main .sfts-prose ul { list-style: disc; padding-left: 1.3em; margin: 0 0 16px; }
.sfts-main .sfts-prose ol { list-style: decimal; padding-left: 1.3em; margin: 0 0 16px; }
.sfts-main .sfts-prose li { display: list-item; margin: 0 0 6px; }
.sfts-caption { margin-top: 10px; font-size: 14px; color: var(--sfts-ink-soft); }
.sfts-small { font-size: var(--sfts-small); color: var(--sfts-ink-soft); }
mark.sfts-ph { background: var(--sfts-ph); color: inherit; padding: 1px 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .15); }
.sfts-ph-note { font-size: var(--sfts-small); color: var(--sfts-ink-soft); background: var(--sfts-ph); padding: 10px 14px; }

/* ── Focus ───────────────────────────────────────────────────────────────── */
/* two layers so one always shows: near-black outline + white halo. Plain weight,
   so Formidable's own field focus and any component with its own ring still win. */
.sfts-page :is(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid #262626; outline-offset: 3px; box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(38, 38, 38, .15);
}
.sfts-page .sfts-on-dark :is(a, button, summary):focus-visible,
.sfts-page .sfts-bg--blue :is(a, button, summary):focus-visible,
.sfts-page .sfts-bg--dark :is(a, button, summary):focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px #262626; }
.sfts-page :is(input, select, textarea):focus-visible { outline: 2px solid var(--sfts-blue-fill); outline-offset: 0; }
@media (forced-colors: active) { .sfts-page :focus-visible { outline-color: Highlight; } }

/* ── Buttons (theme .button family, 48px targets) ────────────────────────── */
.sfts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; }
.sfts-mod__head + .sfts-actions, .sfts-lead + .sfts-actions { margin-top: 28px; }
.sfts-actions--stack { flex-direction: column; align-items: stretch; gap: 12px; }
.sfts-actions--stack .sfts-btn { justify-content: center; }
.sfts-btn {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px;
  min-height: 48px; padding: 10px 26px; border: 1px solid transparent; border-radius: var(--sfts-radius);
  font-family: inherit; font-size: 17px; font-weight: 600; letter-spacing: .34px; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: box-shadow .2s ease-in, background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
}
.sfts-btn .sfts-icon { flex: none; transition: transform .3s ease-in; }
.sfts-btn:hover .sfts-icon--arrow { transform: translateX(6px); }
.sfts-btn__meta { font-size: 14px; font-weight: 500; white-space: normal; }
.sfts-btn { flex-wrap: wrap; }
.sfts-btn .sfts-btn__label { white-space: normal; }
.sfts-btn--lg { min-height: 56px; font-size: 18px; padding: 12px 30px; }
.sfts-btn--primary { background: var(--sfts-blue-fill); color: #fff; border-color: var(--sfts-blue-fill); }
.sfts-btn--primary:hover { color: #fff; box-shadow: 6px 6px 0 0 var(--sfts-orange); }
.sfts-btn--secondary { background: #fff; color: #262626; border-color: #262626; }
.sfts-btn--secondary:hover { color: #262626; box-shadow: 6px 6px 0 0 #262626; }
.sfts-btn--guide { background: var(--sfts-orange); color: #262626; border-color: var(--sfts-orange); }
.sfts-btn--guide:hover { color: #262626; box-shadow: 6px 6px 0 0 #262626; }
.sfts-btn--light { background: #fff; color: var(--sfts-blue-text); border-color: #fff; }
.sfts-btn--light:hover { color: var(--sfts-blue-text); box-shadow: 6px 6px 0 0 var(--sfts-orange); }
.sfts-btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.sfts-btn--outline-light:hover { background: #fff; color: var(--sfts-blue-text); }
.sfts-btn--text { min-height: 0; padding: 0; border: 0; background: none; color: var(--sfts-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sfts-btn--text:hover { color: var(--sfts-ink); }
/* text buttons as a link row in the theme's own blue */
.sfts-on-dark .sfts-btn--text { color: #fff; }
@media (max-width: 640px) {
  .sfts-actions:not(.sfts-actions--inline) .sfts-btn:not(.sfts-btn--text) { width: 100%; justify-content: center; }
  /* 20px sides: at 30px "Download the free guide" missed fitting beside its icon by ~4px at 320px and the
     icon wrapped onto a line of its own (2026-10-30). The button is full width and centred here, so it looks the same. */
  .sfts-btn--lg { font-size: 17px; padding-left: 20px; padding-right: 20px; }
}

/* ── Crisis strip (Page setting) ─────────────────────────────────────────── */
.sfts-crisis { background: var(--sfts-light); border-bottom: 1px solid var(--sfts-rule); font-size: 15px; line-height: 1.4; }
.sfts-crisis__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 22px; padding-top: 9px; padding-bottom: 9px; }
.sfts-crisis__label { font-weight: 700; }
.sfts-page .sfts-crisis__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.sfts-page .sfts-crisis__list a { color: var(--sfts-blue-text); font-weight: 700; text-decoration: none; }
.sfts-page .sfts-crisis__list a:hover { text-decoration: underline; }
@media (max-width: 620px) { .sfts-crisis__inner { flex-direction: column; gap: 2px; text-align: center; } .sfts-page .sfts-crisis__list { flex-direction: column; gap: 2px; } }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sfts-hero--split { padding-top: 24px; }
.sfts-hero__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); min-height: 450px; }
.sfts-hero__media { position: relative; min-height: 320px; }
.sfts-hero__media .sfts-picture, .sfts-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sfts-hero__panel { display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; background: var(--sfts-blue-fill); color: #fff; }
.sfts-hero--panel-orange .sfts-hero__panel { background: var(--sfts-orange); color: #262626; }
.sfts-hero--panel-dark .sfts-hero__panel { background: var(--sfts-dark); }
.sfts-hero__eyebrow { margin: 0 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sfts-hero--split .sfts-hero__title { font-size: clamp(36px, 2.6vw + 14px, 54px); font-weight: 800; line-height: 1.04; letter-spacing: -.01em; margin: 0 0 22px; color: inherit; }
.sfts-hero--split .sfts-hero__lead { font-size: clamp(19px, .6vw + 14px, 22px); line-height: 1.4; margin: 0; color: inherit; }
.sfts-hero--panel-blue .sfts-hero__lead, .sfts-hero--panel-dark .sfts-hero__lead { color: #fff; }
.sfts-hero--split .sfts-hero__actions { margin-top: 28px; }
.sfts-hero--split .sfts-actions .sfts-btn--primary { background: #fff; color: var(--sfts-blue-text); border-color: #fff; }
.sfts-hero--split .sfts-actions .sfts-btn--primary:hover { box-shadow: 6px 6px 0 0 var(--sfts-orange); }
@media (max-width: 1023px) {
  .sfts-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .sfts-hero__media { aspect-ratio: 1380 / 900; min-height: 0; }
  .sfts-hero__panel { padding: 32px 28px; }
}
/* Phones: image and panel edge to edge. The grid IS the .sfts-wrap (width 100%), so it drops the wrap's padding; the
   negative side margins used until 2026-10-23 only slid it left and left a 32px white strip on the right. */
@media (max-width: 640px) { .sfts-hero--split { padding-top: 0; } .sfts-hero__grid { padding: 0; } .sfts-hero__panel { padding: 28px var(--sfts-gutter) 32px; } }

.sfts-hero--cover { padding: 56px 0 64px; }
/* The cover is a column of its own (.8 of the text column), not an `auto` track hugging a 330px image, so it reads as the hero's second subject (Brian, 2026-10-18: "scaled up to feel in proportion").
   Head (eyebrow) and body (title to form) stack on the left with the cover beside both. The 1fr rows above and below
   take any height the cover adds, so the text stays centred against it, as when it was one block (2026-10-30). */
.sfts-hero__cover-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". cover" "head cover" "body cover" ". cover"; align-items: center; column-gap: 64px; }
.sfts-hero__head { grid-area: head; }
.sfts-hero__body { grid-area: body; }
.sfts-hero--cover .sfts-hero__title { font-size: clamp(44px, 3.6vw + 12px, 68px); font-weight: 800; line-height: 1; letter-spacing: -.02em; margin: 0 0 18px; }
.sfts-hero--cover .sfts-hero__title em { font-style: italic; }
.sfts-hero--cover .sfts-hero__lead { font-size: var(--sfts-lead); line-height: 1.5; color: var(--sfts-ink-soft); max-width: 600px; margin: 0; }
.sfts-hero--cover .sfts-hero__actions { margin-top: 30px; }
.sfts-page .sfts-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font-size: 15px; color: var(--sfts-ink-soft); }
.sfts-page .sfts-hero__meta li + li::before { content: "·"; margin-right: 18px; color: var(--sfts-rule-strong); }
.sfts-hero__cover { grid-area: cover; position: relative; justify-self: center; width: 100%; max-width: 520px; padding: 16px 28px 16px 0; }
.sfts-hero__cover-img { display: block; width: 100%; height: auto; border-radius: 3px 6px 6px 3px; transform: perspective(1800px) rotateY(-12deg) rotateX(1.5deg); transform-origin: left center; box-shadow: -2px 0 0 #c9dcea, 20px 30px 48px rgba(24, 60, 90, .24), 2px 4px 10px rgba(24, 60, 90, .12); }
.sfts-badge { position: absolute; top: 0; right: 0; z-index: 1; padding: 8px 14px; border-radius: 999px; background: var(--sfts-orange); color: #262626; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sfts-form-box { margin-top: 32px; max-width: 600px; padding: 24px 26px 26px; background: #fff; border: 1px solid var(--sfts-rule); }
.sfts-page .sfts-form-box__title { font-size: 18px; font-weight: 700; margin: 0 0 16px; } /* .sfts-page prefix: the heading reset is (0,1,1) */
/* Phones and tablets: one flow. The cover floats beside the title and the description wraps under it, so the book and
   the download button share the first screen; before, the book came after the email form (Brian, 2026-10-30, after
   feedback about visitors arriving from ads). It is sized as a share of the width, so it keeps its proportion on every
   screen. flow-root keeps the float inside the hero when there is no email box below it. */
@media (max-width: 1023px) {
  .sfts-hero--cover { padding: 40px 0 48px; }
  .sfts-hero__cover-grid { display: flow-root; }
  .sfts-hero__cover { float: right; width: 34%; max-width: 260px; margin: 4px 0 12px 22px; padding: 0 8px 0 0; }
  .sfts-hero__cover-img { transform: perspective(900px) rotateY(-10deg) rotateX(1deg); box-shadow: -1px 0 0 #c9dcea, 10px 16px 26px rgba(24, 60, 90, .22), 1px 2px 6px rgba(24, 60, 90, .12); }
  .sfts-hero--cover .sfts-badge { top: -12px; right: -4px; padding: 5px 9px; font-size: 11px; letter-spacing: .08em; }
  /* Tablets: the button row sits beside the cover (a flex row narrows beside a float); the email box starts below it. */
  .sfts-hero__form { clear: both; }
}
@media (max-width: 640px) {
  .sfts-hero--cover { padding-top: 32px; } /* 8px less than tablets: the button's bottom edge then clears an iPhone SE's first screen */
  .sfts-hero__cover { width: 38%; max-width: 200px; margin: 2px 0 10px 18px; }
  .sfts-hero--cover .sfts-hero__actions { clear: both; } /* phones: the button never squeezes in beside the cover */
  .sfts-hero--cover .sfts-badge { top: -10px; right: -6px; padding: 4px 8px; font-size: 10px; }
}
/* Small phones: slimmer box padding gives the Turnstile widget its room back (style.css scales it to fit
   whatever room is left): full size from 375px, 90% at 340px, 80% at 320px (2026-10-30). */
@media (max-width: 400px) { .sfts-page .sfts-form-box { padding: 20px 18px 22px; } }

/* ── Intro ───────────────────────────────────────────────────────────────── */
.sfts-intro--plain .sfts-intro__text { max-width: 860px; }
.sfts-intro__lead { font-size: clamp(20px, .9vw + 12px, 26px); line-height: 1.38; font-weight: 500; margin: 0 0 30px; }
.sfts-intro__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.sfts-intro__cta .sfts-actions { margin-top: 0; }
.sfts-intro__aside { font-size: var(--sfts-text); color: var(--sfts-ink-soft); }
.sfts-intro--boxed .sfts-intro__inner { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 48px; align-items: center; padding: 36px 44px; background: var(--sfts-light); }
.sfts-intro--boxed.sfts-bg--light .sfts-intro__inner { background: #fff; }
.sfts-intro__heading { font-size: clamp(24px, 1vw + 14px, 28px); font-weight: 800; line-height: 1.2; margin: 0 0 10px; }
.sfts-intro--boxed .sfts-intro__lead { font-size: 19px; line-height: 1.5; font-weight: 400; color: var(--sfts-ink-soft); margin: 0; }
.sfts-intro__side .sfts-actions { margin-top: 0; }
@media (max-width: 1023px) { .sfts-intro--boxed .sfts-intro__inner { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; } }

/* ── Stats ───────────────────────────────────────────────────────────────── */
.sfts-stats__heading { margin-bottom: 24px; }
.sfts-stats__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.sfts-stats__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sfts-stats__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfts-stat { display: flex; flex-direction: column; gap: 8px; }
.sfts-stat__number { font-size: clamp(34px, 1.6vw + 18px, 50px); font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--sfts-accent-text); font-variant-numeric: tabular-nums; }
.sfts-stat__label { font-size: 17px; line-height: 1.35; color: var(--sfts-ink-soft); }
.sfts-stats--band .sfts-stats__list { padding: 32px 36px; background: var(--sfts-light); }
.sfts-stats--band.sfts-bg--light .sfts-stats__list { background: #fff; }
.sfts-stats--band .sfts-stat__label { color: var(--sfts-ink); }
.sfts-stats--inline .sfts-stats__list, .sfts-stats__list--inline { gap: 16px 28px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sfts-rule); }
.sfts-stats__list--inline .sfts-stat__number { font-size: clamp(28px, 1vw + 18px, 34px); }
.sfts-stats__list--inline .sfts-stat__label { font-size: 15px; }
.sfts-stats--on-blue .sfts-stat__number { color: #fff; }
.sfts-on-dark .sfts-stat__number { color: #fff; }
@media (max-width: 767px) {
  .sfts-stats__list, .sfts-stats__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .sfts-stats__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* two columns left the third stat hanging alone */
  .sfts-stats--band .sfts-stats__list { padding: 24px 22px; }
}
@media (max-width: 640px) { .sfts-stats__list--3 { grid-template-columns: 1fr; } } /* three stats on a phone: one column (Brian, 2026-10-23) */
@media (max-width: 360px) { .sfts-stats__list { grid-template-columns: 1fr; } } /* 400 until 2026-10-18: a 390px phone, the commonest width, never saw the two-column stats */

/* ── Text + media ────────────────────────────────────────────────────────── */
.sfts-tm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 40px 56px; align-items: start; }
.sfts-tm--align-center .sfts-tm__grid { align-items: center; }
.sfts-tm--media-none .sfts-tm__grid { grid-template-columns: minmax(0, 860px); }
.sfts-tm--side-left .sfts-tm__grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
.sfts-tm--side-left .sfts-tm__media { order: -1; }
.sfts-tm__text .sfts-mod__head { margin-bottom: 24px; }
.sfts-tm__text .sfts-actions { margin-top: 28px; }
.sfts-tm__img { width: 100%; height: auto; }
.sfts-page .sfts-itemlist__item { padding: 0 0 18px; margin: 0 0 18px; border-bottom: 1px solid var(--sfts-rule); } /* .sfts-page: the li reset is (0,1,1) */
.sfts-page .sfts-itemlist__item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.sfts-itemlist__title { font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
.sfts-itemlist__text { margin: 0; color: var(--sfts-ink-soft); }
.sfts-prose + .sfts-itemlist { margin-top: 24px; }
.sfts-video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #262626; }
.sfts-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sfts-video__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; padding: 0; border-radius: 50%; border: 3px solid #fff; background: var(--sfts-blue-fill); color: #fff; display: grid; place-items: center; cursor: pointer; transition: transform .2s ease-in, background-color .2s ease-in; }
.sfts-video__play .sfts-icon { width: 30px; height: 30px; margin-left: 4px; }
.sfts-video:hover .sfts-video__play, .sfts-video__play:focus-visible { background: var(--sfts-ink); transform: scale(1.06); }
.sfts-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (prefers-reduced-motion: reduce) { .sfts-video:hover .sfts-video__play { transform: none; } }
@media (max-width: 1023px) {
  .sfts-tm__grid, .sfts-tm--side-left .sfts-tm__grid { grid-template-columns: 1fr; }
  .sfts-tm--side-left .sfts-tm__media { order: 0; }
  .sfts-tm__media { max-width: 640px; }
}

/* ── CTA band ────────────────────────────────────────────────────────────── */
.sfts-cta__box { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 44px; padding: 44px 48px; background: var(--sfts-light); border-radius: var(--sfts-radius); }
.sfts-cta--has-image .sfts-cta__box { flex-wrap: nowrap; align-items: center; }
.sfts-cta--has-image .sfts-cta__body { flex: 1 1 auto; }
.sfts-cta--has-image .sfts-cta__body .sfts-actions { margin-top: 24px; }
.sfts-cta--light.sfts-bg--light .sfts-cta__box { background: #fff; border: 1px solid var(--sfts-rule); }
.sfts-cta--blue .sfts-cta__box { background: var(--sfts-blue-fill); box-shadow: 0 10px 30px rgba(33, 149, 224, .25); }
.sfts-cta--dark .sfts-cta__box { background: var(--sfts-dark); }
.sfts-cta__image { flex: none; width: 190px; }
.sfts-cta__img { width: 100%; height: auto; box-shadow: 0 14px 34px rgba(24, 60, 90, .2); }
.sfts-cta__body { flex: 1 1 480px; min-width: 0; }
.sfts-cta__heading { margin-bottom: 12px; }
.sfts-cta--blue .sfts-cta__heading, .sfts-cta--dark .sfts-cta__heading { font-size: clamp(28px, 1.2vw + 16px, 36px); font-weight: 800; line-height: 1.15; }
.sfts-cta__text { max-width: 760px; }
.sfts-cta__note { max-width: 760px; margin-top: 14px; font-size: 15px; line-height: 1.5; } /* "Have a question first? Ask us below." */
.sfts-cta .sfts-cta__note > * { margin: 0; } /* (0,2,0) over .sfts-prose p (0,1,1): its 16px pushed the stacked button further than the closing band's */
.sfts-cta__actions { flex: 0 1 auto; margin-top: 0; }
.sfts-cta__body .sfts-stats__list--inline { margin-top: 22px; padding-top: 16px; }
@media (max-width: 1023px) {
  .sfts-cta__box { flex-direction: column; align-items: flex-start; padding: 36px 32px; }
  .sfts-cta__body { flex: 0 1 auto; } /* in a column the 480px basis is a height: it pushed the button ~270px down on phones */
  .sfts-cta__actions { margin-top: 4px; }
}
@media (max-width: 640px) { .sfts-cta__box { padding: 28px 22px; } }

/* ── Form module ─────────────────────────────────────────────────────────── */
.sfts-formmod__intro { max-width: 860px; }
.sfts-formmod__form { margin-top: 28px; } /* the full wrap width, like every other section's content (Brian, 2026-10-19); 860px until then */
.sfts-formmod__note { max-width: 860px; margin-top: 16px; font-size: 15px; color: var(--sfts-ink-soft); }
.sfts-page .sfts-formmod .frm_forms { margin: 0; } /* style.css gives every Formidable form 50px above and below; the module's own 28px/16px apply instead (2026-10-18) */
.sfts-formmod__after { margin-top: 22px; font-size: var(--sfts-small); color: var(--sfts-ink-soft); }

/* The big Host/Chapter forms sit on the light band, and style.css paints every
   Formidable field in that same pale blue (#f2faff fill, #d2efff border, both
   !important, at (0,2,2)), so the fields vanished into the band (Brian,
   2026-10-19). White fields with a visible rule instead, the chips' border colour
   so the two kinds of control read as one set. The red error border style.css
   gives .frm_blank_field is restated after it so it still wins. */
.sfts-page .sfts-formmod { --sfts-field-rule: #a9bdcf; }
.sfts-page .sfts-formmod .frm_forms.with_frm_style :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) { background-color: #fff !important; border-color: var(--sfts-field-rule) !important; }
.sfts-page .sfts-formmod .select2-container .select2-selection { background-color: #fff; border-color: var(--sfts-field-rule); } /* style.css: (0,2,1), no !important */
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_blank_field :is(input, select, textarea, .select2-selection),
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_form_field :invalid { border-color: rgba(199, 22, 22, .9) !important; }

/* Rows: style.css spaces the field grid with one row-gap (35px, 25px on phones,
   at (0,3,1)), so the Turnstile widget and the button sat as far from the message
   field as the fields from each other. The fields carry the gap instead, and the
   last three rows sit closer (Brian, 2026-10-19). The widget's and the button's
   wrappers have no class of their own, hence :has(). */
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container { row-gap: 0; }
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .frm_form_field { margin-bottom: 32px; } /* style.css: 0 at (0,4,1) */
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .frm_form_field:has(+ .frm_form_field > .frm-cf-turnstile),
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .frm_form_field:has(> .frm-cf-turnstile) { margin-bottom: 20px; }
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .frm_form_field:has(> .frm_submit) { margin-bottom: 0; }
@media (max-width: 767px) {
  .sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .frm_form_field { margin-bottom: 24px; } /* the fields are 40px tall there (style.css) */
}
@media (max-width: 1279px) {
  /* style.css centres the button from 1279px down and only makes it full width
     under 768px; tablets get the phone's full-width button too (Brian, 2026-10-19). */
  .sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_submit button { width: 100%; }
}

/* Field hints (Formidable's field description, e.g. "We recommend requesting at
   least three months ahead."): style.css prints them in the label colour right
   under the field; secondary text with a little air reads as a hint. */
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_description { padding-top: 8px; color: var(--sfts-ink-soft); }

/* Form notes: Formidable HTML fields with class sfts-form-note that the form's
   logic shows for one answer (Host: "Parent or community member" under Your
   Role; Chapter: "Following up on our Letter of Intent" under the topic chips).
   Pulled up to 12px under the field they answer. Formidable prints them visible
   and hides them once its script runs; until then (no style attribute yet) they
   stay hidden so the rows below never jump. The Host note (sfts-role-note) also
   sits under the Role column, since Role is the right-hand half field. */
.sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .sfts-form-note { margin-top: -20px; padding: 12px 16px; background: #fff; border-left: 3px solid var(--sfts-orange); font-size: 15px; line-height: 1.5; color: var(--sfts-ink); }
.sfts-page .sfts-formmod .sfts-form-note p { margin: 0; }
.sfts-js .sfts-page .sfts-formmod .sfts-form-note:not([style]) { display: none; }
@media (min-width: 601px) { /* Formidable keeps half fields side by side down to 601px */
  .sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .sfts-role-note { grid-column: 7 / span 6; }
}
@media (max-width: 767px) {
  .sfts-page .sfts-formmod .frm_forms.with_frm_style .frm_fields_container > .sfts-form-note { margin-top: -12px; }
}

/* ── Shared: cards, callouts, quotes, tags ───────────────────────────────── */
.sfts-main :where(blockquote) { margin: 0; padding: 0; font: inherit; color: inherit; position: static; background: none; border: 0; }
.sfts-main blockquote::before, .sfts-main blockquote::after { content: none; }
.sfts-main cite { font-style: normal; }
.sfts-page .sfts-cards { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sfts-page .sfts-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfts-page .sfts-cards--cols-1 { grid-template-columns: minmax(0, 1fr); }
.sfts-cards + .sfts-callout, .sfts-cards + .sfts-actions, .sfts-cards__layout + .sfts-callout { margin-top: 28px; }
.sfts-page .sfts-card-item { display: flex; } /* .sfts-page: the li reset is (0,1,1) */
.sfts-card { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 26px 28px; background: #fff; border: 1px solid var(--sfts-rule); border-radius: var(--sfts-radius); color: var(--sfts-ink); }
.sfts-cards--plain .sfts-card { padding: 0; border: 0; background: none; }
.sfts-on-dark .sfts-card, .sfts-bg--blue .sfts-card, .sfts-bg--dark .sfts-card { color: #262626; --sfts-ink: #262626; --sfts-ink-soft: #4b5560; --sfts-accent-text: #1673b3; }
.sfts-card__title { font-size: var(--sfts-h3); font-weight: 700; line-height: 1.25; margin: 0; }
.sfts-card__format { margin: -4px 0 0; font-size: 14px; color: var(--sfts-ink-soft); }
.sfts-card__text { margin: 0; font-size: 17px; line-height: 1.5; color: var(--sfts-ink-soft); }
.sfts-card__meta { margin: 0; font-size: var(--sfts-small); color: var(--sfts-ink-soft); }
.sfts-card__link { margin: auto 0 0; padding-top: 6px; }
.sfts-card--tile { text-decoration: none; border-width: 2px; min-height: 180px; transition: border-color .2s ease-in, box-shadow .2s ease-in; }
.sfts-card--tile:hover { color: var(--sfts-ink); border-color: var(--sfts-blue); box-shadow: 6px 6px 0 0 var(--sfts-blue); }
.sfts-card--tile .sfts-card__title { font-size: 22px; font-weight: 800; }
.sfts-card__meta--link { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sfts-accent-text); }
.sfts-card--tile:hover .sfts-card__meta--link .sfts-icon { transform: translateX(6px); }
.sfts-card__meta--link .sfts-icon { transition: transform .3s ease-in; }
.sfts-cards__layout--statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.sfts-cards__layout--statement .sfts-cards { grid-template-columns: minmax(0, 1fr); }
.sfts-statement { margin: 0; padding-left: 12px; font-size: clamp(32px, 2vw + 14px, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.sfts-callout { margin-top: 28px; padding: 22px 26px; background: #fff; border-left: 4px solid var(--sfts-orange); color: var(--sfts-ink); }
.sfts-mod:not([class*="sfts-bg--"]) .sfts-callout { background: var(--sfts-light); }
.sfts-callout__title { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.sfts-callout .sfts-prose { font-size: 17px; }
.sfts-callout--row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; border-left: 0; padding: 26px 30px; background: var(--sfts-light); }
.sfts-callout--row .sfts-callout__body { flex: 1 1 320px; }
.sfts-callout--row .sfts-callout__title { font-size: 20px; }
.sfts-callout__text { margin: 0; font-size: 16px; color: var(--sfts-ink-soft); }
.sfts-callout__actions { margin: 0; margin-left: auto; }
.sfts-callout--quote { max-width: none; }
.sfts-callout__label { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--sfts-accent-text); }
.sfts-callout__quote { margin: 0 0 10px; font-size: 22px; line-height: 1.42; font-weight: 500; }
.sfts-quote__cite { font-size: 15px; color: var(--sfts-ink-soft); }
.sfts-page .sfts-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sfts-page .sfts-tags .sfts-tag { display: inline-block; width: auto; padding: 3px 8px; border-radius: 4px; background: #f1f4f7; color: var(--sfts-ink-soft); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.sfts-mod__footer { margin-top: 28px; }
/* Boxes end at their own padding: a text block that closes a box (or a module) keeps no bottom margin on its last
   paragraph, so the space under the text matches the space above it (Brian, 2026-10-26, "A note for administrators":
   22px above, 38px below). Listed box by box on purpose: `.sfts-prose:last-child > :last-child` would also shrink the
   text-to-video gap of text_media on phones and the crisis card's intro-to-buttons gap, which are spacing, not slack. */
.sfts-page :is(.sfts-callout .sfts-prose, .sfts-crisiscard__footer, .sfts-schoolnote, .sfts-faq__a, .sfts-formmod__after, .sfts-mod__footer) > :last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .sfts-page .sfts-cards, .sfts-page .sfts-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfts-cards__layout--statement { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sfts-page .sfts-cards, .sfts-page .sfts-cards--cols-2 { grid-template-columns: 1fr; }
  .sfts-card { padding: 22px 20px; }
  .sfts-callout { padding: 20px 20px; }
  .sfts-callout__actions { margin-left: 0; width: 100%; }
}

/* ── Facts ───────────────────────────────────────────────────────────────── */
.sfts-facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.sfts-fact { padding: 18px 0; border-top: 1px solid var(--sfts-rule-strong); }
.sfts-fact__label { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--sfts-accent-text); margin-bottom: 2px; }
.sfts-fact__value { font-size: var(--sfts-text); }
.sfts-facts__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.sfts-facts__cta-text { margin: 0; font-size: 22px; font-weight: 600; }
.sfts-facts__cta .sfts-actions { margin-top: 0; }
@media (max-width: 1023px) { .sfts-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sfts-facts__list { grid-template-columns: 1fr; } }

/* ── Testimonials ────────────────────────────────────────────────────────── */
.sfts-quote--lead { max-width: 860px; margin: 0 0 44px; }
.sfts-quote--lead p { font-size: clamp(21px, .9vw + 12px, 26px); line-height: 1.4; font-weight: 500; margin: 0 0 12px; }
.sfts-quote--lead .sfts-quote__cite { font-size: 16px; }
.sfts-testi__intro { font-size: 19px; font-weight: 700; margin: 0 0 24px; }
.sfts-page .sfts-testi__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; }
.sfts-quote__who { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--sfts-accent-text); }
.sfts-quote--small .sfts-quote__text { margin: 0; padding-left: 18px; border-left: 3px solid var(--sfts-rule); font-size: 19px; line-height: 1.55; }
@media (max-width: 767px) { .sfts-page .sfts-testi__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.sfts-steps { counter-reset: none; }
/* Rail: on desktop each step is a light card of equal height with the blue rule
   on top (Brian, 2026-10-19: with five columns and uneven copy, the space under
   the short steps hung below a hairline; on a card it reads as the card's).
   Until then the rail was one blue rule over hairline-divided columns. */
.sfts-page .sfts-steps--rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.sfts-page .sfts-steps--rail.sfts-steps--count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sfts-page .sfts-steps--rail.sfts-steps--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sfts-page .sfts-steps--rail .sfts-step { padding: 22px 20px 18px; background: var(--sfts-light); border-top: 3px solid var(--sfts-blue); }
.sfts-bg--light .sfts-steps--rail .sfts-step { background: #fff; }
.sfts-step__num { display: block; margin-bottom: 12px; font-size: 44px; font-weight: 800; line-height: 1; color: var(--sfts-accent-text); }
.sfts-step__title { margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.25; }
.sfts-step__tag { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--sfts-accent-text); }
.sfts-step__text { margin: 0; font-size: 16px; line-height: 1.5; color: var(--sfts-ink-soft); }
.sfts-main .sfts-step__points li { position: relative; padding-left: 16px; margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--sfts-ink-soft); overflow-wrap: anywhere; }
.sfts-main .sfts-step__points li::before { content: ""; display: block; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--sfts-orange); }
.sfts-page .sfts-steps--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sfts-page .sfts-steps--cards .sfts-step { display: flex; gap: 18px; align-items: flex-start; padding: 26px; background: #fff; border: 1px solid var(--sfts-rule); }
.sfts-page .sfts-steps--cards .sfts-step__num { flex: none; width: 52px; height: 52px; margin: 0; display: grid; place-items: center; background: var(--sfts-blue-fill); color: #fff; font-size: 24px; }
.sfts-page .sfts-steps--cards .sfts-step__title { margin-bottom: 2px; }
@media (max-width: 1023px) {
  /* stacked list, no cards: one rule above the first step, hairlines between the rest (unchanged by the desktop cards) */
  .sfts-page .sfts-steps--rail, .sfts-page .sfts-steps--rail.sfts-steps--count-4, .sfts-page .sfts-steps--rail.sfts-steps--count-3 { grid-template-columns: 1fr; gap: 0; border-top: 0; }
  /* number column hugs the numeral: a 38px digit is 16-24px wide, so 28px + 14px puts the title ~20px from it
     (56px + 8px until 2026-10-23 left 40-48px of air; Brian: "the numbers feel far away"). max-content lets a
     two-digit step widen its own row instead of running into the title. */
  .sfts-page .sfts-steps--rail .sfts-step, .sfts-bg--light .sfts-steps--rail .sfts-step { display: grid; grid-template-columns: minmax(28px, max-content) minmax(0, 1fr); column-gap: 14px; padding: 20px 0 12px; background: none; border-left: 0; border-top: 1px solid var(--sfts-rule); }
  .sfts-page .sfts-steps--rail .sfts-step:first-child { border-top: 3px solid var(--sfts-blue); }
  .sfts-page .sfts-steps--rail .sfts-step__num { font-size: 38px; }
}
@media (max-width: 767px) { .sfts-page .sfts-steps--cards { grid-template-columns: 1fr; } }

/* ── Resources ───────────────────────────────────────────────────────────── */
.sfts-res__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--sfts-rule); }
.sfts-res__heading { margin: 0; font-size: clamp(22px, .8vw + 14px, 26px); }
.sfts-res__count { font-size: 14px; font-weight: 600; color: var(--sfts-ink-soft); }
.sfts-res__lead { margin-bottom: 24px; }
.sfts-res__card { gap: 18px; }
.sfts-res__body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.sfts-res__actions { margin-top: auto; gap: 10px; }
.sfts-page .sfts-cards--cols-1 .sfts-res__card { flex-direction: row; align-items: center; gap: 28px; }
.sfts-page .sfts-cards--cols-1 .sfts-res__actions { margin-top: 0; flex: none; }
@media (max-width: 767px) { .sfts-page .sfts-cards--cols-1 .sfts-res__card { flex-direction: column; align-items: stretch; } }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.sfts-faq__a > * { max-width: 860px; } /* the rows span the wrap like every other section (Brian, 2026-10-19; the list was 960px); the answer text keeps a readable measure */
.sfts-faq__item { margin: 0 0 16px; }
.sfts-faq__q { display: flex; align-items: stretch; gap: 0; list-style: none; cursor: pointer; background: var(--sfts-light); font-size: 20px; font-weight: 600; line-height: 1.3; }
.sfts-faq__q::-webkit-details-marker { display: none; }
.sfts-faq__q::marker { content: ""; }
.sfts-faq__icon { flex: none; width: 60px; display: grid; place-items: center; background: var(--sfts-blue); color: #fff; }
.sfts-faq__icon .sfts-icon { grid-area: 1 / 1; width: 22px; height: 22px; stroke-width: 2.4; transition: opacity .2s ease-in; }
.sfts-faq__minus { opacity: 0; }
.sfts-faq__item[open] .sfts-faq__plus { opacity: 0; }
.sfts-faq__item[open] .sfts-faq__minus { opacity: 1; }
.sfts-faq__q-text { padding: 16px 24px; align-self: center; }
.sfts-faq__q:hover .sfts-faq__q-text { color: var(--sfts-accent-text); }
.sfts-faq__a { padding: 4px 24px 22px 84px; background: var(--sfts-light); font-size: var(--sfts-text); }
.sfts-bg--light .sfts-faq__q, .sfts-bg--light .sfts-faq__a { background: #fff; }
@media (max-width: 640px) {
  .sfts-faq__q { font-size: 18px; }
  .sfts-faq__icon { width: 48px; }
  .sfts-faq__q-text { padding: 14px 16px; }
  .sfts-faq__a { padding: 4px 16px 18px 16px; }
}

/* ── Crisis card ─────────────────────────────────────────────────────────── */
.sfts-crisiscard { padding: 30px 32px; background: #fff; border: 1px solid var(--sfts-rule); border-left: 6px solid var(--sfts-orange); box-shadow: 0 2px 10px rgba(24, 120, 189, .06); }
.sfts-crisiscard__eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sfts-accent-text); }
.sfts-crisiscard__lead { margin: 0 0 24px; font-size: 22px; font-weight: 700; line-height: 1.3; }
.sfts-crisiscard__intro { margin: -14px 0 24px; font-size: 16px; color: var(--sfts-ink-soft); }
.sfts-page .sfts-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sfts-page .sfts-routes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfts-page .sfts-routes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sfts-page .sfts-route { display: flex; flex-direction: column; gap: 8px; } /* .sfts-page: the li reset is (0,1,1) */
.sfts-route__num { margin: 0; font-size: 30px; font-weight: 800; line-height: 1; color: var(--sfts-accent-text); }
.sfts-route__num a { color: inherit; text-decoration: none; }
.sfts-route__num a:hover { text-decoration: underline; }
.sfts-route__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
.sfts-route__text { font-size: 15.5px; line-height: 1.5; color: var(--sfts-ink-soft); }
.sfts-crisiscard__actions { margin-top: 0; }
.sfts-actions--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sfts-actions--grid .sfts-btn { justify-content: center; }
.sfts-page .sfts-btn--route { border-color: var(--sfts-blue-text); color: var(--sfts-blue-text); }
.sfts-crisiscard__footer { margin-top: 22px; color: #33404c; }
@media (max-width: 1023px) { .sfts-actions--grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .sfts-page .sfts-routes, .sfts-page .sfts-routes--4 { grid-template-columns: 1fr; } .sfts-crisiscard { padding: 24px 22px; } .sfts-crisiscard__lead { font-size: 19px; } }

/* ── Copy templates ──────────────────────────────────────────────────────── */
.sfts-copycard { gap: 14px; }
.sfts-copycard__head { display: flex; flex-direction: column; gap: 6px; }
.sfts-copygrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 10px; }
.sfts-copygrid__templates { display: flex; flex-direction: column; gap: 12px; }
.sfts-email { border: 1px solid var(--sfts-rule); background: #fff; }
.sfts-email__head { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 18px 12px 14px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 700; }
.sfts-email__head::-webkit-details-marker { display: none; }
.sfts-email__head::marker { content: ""; }
.sfts-email__head:hover { background: #f6fafd; }
.sfts-email__num { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e3f3fd; color: var(--sfts-blue-text); font-size: 16px; }
.sfts-email__title { flex: 1 1 auto; }
.sfts-email__icon { flex: none; display: grid; color: var(--sfts-blue-text); }
.sfts-email__icon .sfts-icon { grid-area: 1 / 1; }
.sfts-email .sfts-faq__minus { opacity: 0; }
.sfts-email[open] .sfts-faq__plus { opacity: 0; }
.sfts-email[open] .sfts-faq__minus { opacity: 1; }
.sfts-email__body { padding: 0 18px 18px; }
.sfts-email__body .sfts-actions { margin-top: 14px; }
.sfts-etext { padding: 18px 20px; background: #f7fafc; border: 1px solid #e6eef5; font-size: 15.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.sfts-copygrid__title { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.sfts-main .sfts-checklist { padding-left: 20px; list-style: disc; color: var(--sfts-ink-soft); font-size: 15.5px; line-height: 1.7; }
.sfts-main .sfts-checklist li { display: list-item; }
.sfts-copygrid__aside .sfts-actions { margin-top: 16px; }
.sfts-schoolnote { margin-top: 4px; padding: 14px 16px; background: var(--sfts-light); font-size: 15px; line-height: 1.5; color: #33404c; }
.sfts-bg--light .sfts-schoolnote { background: #f7fafc; }
@media (max-width: 1023px) { .sfts-copygrid { grid-template-columns: 1fr; } }

/* ── Share ───────────────────────────────────────────────────────────────── */
.sfts-share { display: grid; gap: 20px; }
.sfts-share__head { margin-bottom: 0; }
.sfts-sharemod--stacked .sfts-share__card { max-width: 760px; gap: 18px; }
.sfts-sharemod--split .sfts-share { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px 36px; align-items: center; padding: 36px 48px; background: #fff; border: 1px solid var(--sfts-rule); }
.sfts-sharemod--split .sfts-share__card { padding: 0; border: 0; background: none; }
/* Split, desktop: the buttons come after the message in the source (one column reads heading, lead, message, buttons)
   and sit back under the lead here. The message spans both rows; its extra height splits evenly between them, so the
   lead and the buttons stay a centred group beside it. */
@media (min-width: 1024px) {
  .sfts-sharemod--split .sfts-share__text { grid-column: 1; grid-row: 1; align-self: end; }
  .sfts-sharemod--split .sfts-share__card { grid-column: 2; grid-row: 1 / span 2; }
  .sfts-sharemod--split .sfts-share > .sfts-share__actions { grid-column: 1; grid-row: 2; align-self: start; }
}
.sfts-share__actions { margin-top: 0; }
/* "Send as a text" is an sms: link: on a phone it opens Messages with the text filled in; on a desktop with a mouse it is
   a dead click on Windows and a Messages hand-off only on a Mac. Shown to touch devices only (Brian, 2026-10-18). */
@media (hover: hover) and (pointer: fine) { .sfts-page .sfts-share__sms { display: none; } }
@media (max-width: 1023px) { .sfts-sharemod--split .sfts-share { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; } }

/* ── Link lists (Sources) ────────────────────────────────────────────────── */
.sfts-sources { border: 1px solid var(--sfts-rule); background: #fff; }
.sfts-sources__summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 16px 22px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 700; }
.sfts-sources__summary::-webkit-details-marker { display: none; }
.sfts-sources__summary::marker { content: ""; }
.sfts-sources__chev { transition: transform .2s ease-in; }
.sfts-sources[open] .sfts-sources__chev { transform: rotate(180deg); }
.sfts-sources__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; padding: 0 22px 22px; }
.sfts-sources__title { margin: 14px 0 6px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--sfts-ink-soft); }
.sfts-page .sfts-sources__list li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.4; }
@media (max-width: 640px) { .sfts-sources__body { grid-template-columns: 1fr; } }

/* ── Jump navigation ─────────────────────────────────────────────────────── */
.sfts-jumpnav { padding: 0; z-index: 20; background: var(--sfts-light); border-top: 1px solid var(--sfts-rule); border-bottom: 1px solid var(--sfts-rule); }
.sfts-jumpnav__inner { display: flex; align-items: center; gap: 14px; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
/* The bar is a divider: the next module keeps half a section space below it. Its neighbour's own padding-top is zeroed by
   the same-background rule above (the bar carries no .sfts-bg-- class), so the space lives on the bar (2026-10-18). */
.sfts-page .sfts-mod--jump-nav { margin-bottom: calc(var(--sfts-space) / 2); }
.sfts-jumpnav__label { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sfts-ink-soft); }
.sfts-page .sfts-jumpnav__chips { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.sfts-jumpnav__chips::-webkit-scrollbar { display: none; }
.sfts-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 2px solid #a9bdcf; background: #fff; color: var(--sfts-ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-decoration: none; white-space: nowrap; flex: none; transition: border-color .2s ease-in, background-color .2s ease-in; }
.sfts-chip:hover { border-color: var(--sfts-orange); color: var(--sfts-ink); }
.sfts-chip[aria-current="true"] { background: var(--sfts-orange); border-color: var(--sfts-orange); color: #262626; }
.sfts-jumpnav__actions { margin: 0; margin-left: auto; flex: none; gap: 8px; }
.sfts-btn--sm { min-height: 42px; padding: 6px 16px; font-size: 15px; }
@media (min-width: 1024px) {
  .sfts-jumpnav--sticky { position: sticky; top: var(--sfts-header-h, 0px); box-shadow: 0 6px 18px rgba(24, 60, 90, .08); }
  /* The theme header animates its height (.header-wrap padding 30px→10px over .3s)
     and the bar's top follows it through the ResizeObserver in sfts-modules.js, a
     frame or more behind, so while the header moves a sliver of page shows between
     the two (Brian, 2026-10-19: "aliasing" at the seam on scroll). While the bar is
     stuck (class from the script) a white strip stands above it: under the header
     when the two meet, filling the sliver when they do not. The bar's top rule
     goes too; the header's shadow separates them. */
  .sfts-jumpnav--sticky.is-stuck { border-top-color: transparent; }
  .sfts-jumpnav--sticky.is-stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 60px; background: #fff; pointer-events: none; }
}
@media (max-width: 1023px) { .sfts-jumpnav__label, .sfts-jumpnav__actions { display: none; } .sfts-jumpnav__inner { min-height: 56px; } }

/* ── Section intro ───────────────────────────────────────────────────────── */
.sfts-secintro__head { margin-bottom: 0; }
.sfts-secintro .sfts-lead { max-width: 760px; }

/* ── Preview viewer (dialog) ─────────────────────────────────────────────── */
.sfts-viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(20, 32, 44, .78); color: #262626; font-family: inherit; }
.sfts-viewer::backdrop { background: transparent; }
.sfts-viewer__frame { display: flex; flex-direction: column; height: 100%; }
.sfts-viewer__bar { display: flex; align-items: center; gap: 16px; flex: none; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--sfts-rule); }
.sfts-viewer__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfts-viewer__meta { flex: none; font-size: 14px; color: var(--sfts-ink-soft); }
.sfts-viewer__note { flex: none; padding: 8px 20px; background: #fff4ec; color: #5a3a22; font-size: 14px; border-bottom: 1px solid #f3d9c6; }
.sfts-viewer__scroll { flex: 1 1 auto; overflow: auto; padding: 24px 16px 48px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sfts-viewer__scroll img { display: block; width: 100%; max-width: 940px; height: auto; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.sfts-viewer__scroll img.is-landscape { max-width: 1180px; }
body.sfts-viewer-open { overflow: hidden; }
@media (max-width: 620px) { .sfts-viewer__bar { padding: 10px 12px; gap: 10px; } .sfts-viewer__title { font-size: 15px; } .sfts-viewer__meta { display: none; } .sfts-viewer__scroll { padding: 12px 8px 32px; gap: 12px; } }

/* copy feedback */
.sfts-btn.is-copied { background: var(--sfts-ink); border-color: var(--sfts-ink); color: #fff; }
.sfts-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }

/* ── Empty-state notice (editors only) ───────────────────────────────────── */
.sfts-mod--empty { padding: 48px 0; }
.sfts-mod--empty p { padding: 20px 24px; background: var(--sfts-ph); font-size: var(--sfts-small); }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sfts-page *, .sfts-page *::before, .sfts-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Formidable inside the modules (Phase 3) ─────────────────────────────
   The forms keep Formidable's default style (the site's other forms use it);
   these rules only add the two shapes the mockups ask for. Hooks are field
   CSS classes set in the form builder (and carried by docs/forms/*.xml):
   sfts-chips on the "What can we help with?" radios, sfts-f-email /
   sfts-f-submit / sfts-f-news / sfts-f-captcha on the email-me-the-guide form. */

/* Radio chips: the native radios stay in the DOM (keyboard, screen readers,
   Formidable's own validation); the label is the visible chip. The selectors
   carry .frm_forms.with_frm_style because style.css styles the same label at
   (0,3,2) (20px regular, gap 14px) and the option row at (0,4,1) (gap 10px 20px):
   at (0,3,x) the chips rendered at 20px regular and wrapped 2+1 (2026-10-19). */
.sfts-page .frm_forms.with_frm_style .sfts-chips .frm_opt_container { display: flex; flex-wrap: wrap; gap: 10px; }
.sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio { display: block; margin: 0; }
.sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio label { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 20px; border: 2px solid #a9bdcf; border-radius: 999px; background: #fff; color: var(--sfts-ink); font-size: 16px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: border-color .2s ease-in, background-color .2s ease-in; } /* 16px/48px next to the legacy 69px fields; the three chips are 787px of the 860px row at that size */
.sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio label:hover { border-color: var(--sfts-orange); }
.sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio label:has(input:checked) { background: var(--sfts-orange); border-color: var(--sfts-orange); color: #262626; }
.sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio label:has(input:focus-visible) { outline: 3px solid var(--sfts-ink); outline-offset: 2px; box-shadow: 0 0 0 6px #fff; }
.sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio input[type="radio"] { position: absolute; left: 0; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
@supports not selector(label:has(input)) {
  /* no :has(): keep the native radio visible inside the chip */
  .sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio input[type="radio"] { position: static; width: 16px; height: 16px; opacity: 1; pointer-events: auto; }
}
@media (max-width: 767px) {
  /* phones: one full-width chip per line (a 44px target the whole width) */
  .sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio { flex: 1 1 100%; }
  .sfts-page .frm_forms.with_frm_style .sfts-chips .frm_radio label { width: 100%; }
}

/* Email-me-the-guide box: a single stack (email, consent, Turnstile, button),
   the button last so the tab order is the visual order (Brian, 2026-10-18:
   "move the Email it to me to the bottom below the turnstile"; the submit
   field's order is set in tests/tools/build-forms.php). The legacy stylesheet
   styles every Formidable form for the site's big multi-step forms (69px
   inputs at 24px, an 80px white button with a blue drop, 28px pale checkboxes,
   50px margins around the form): the box resets those at higher specificity,
   with !important only where style.css uses it. */
.sfts-page .sfts-form-box .frm_forms { margin: 0; }
.sfts-page .sfts-form-box .frm_forms fieldset { margin: 0; padding: 0; border: 0; }
.sfts-page .sfts-form-box .frm_forms.with_frm_style .frm_fields_container { row-gap: 0; column-gap: 20px; } /* style.css sets row-gap 35px at (0,3,1) */
.sfts-page .sfts-form-box .frm_fields_container > .frm_form_field { grid-column: 1 / -1 !important; margin-bottom: 14px; }
.sfts-page .sfts-form-box .sfts-f-email .frm_primary_label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* the box heading is the visible prompt; the label stays for assistive tech */
.sfts-page .sfts-form-box .frm_forms.with_frm_style input[type="email"] { height: auto; min-height: 52px; padding: 12px 16px; font-size: 16px; line-height: 1.3; color: var(--sfts-ink); background-color: #fff !important; border: 1px solid var(--sfts-rule-strong) !important; border-radius: 0; }
.sfts-page .sfts-form-box .frm_forms.with_frm_style input[type="email"]::placeholder { color: var(--sfts-ink-soft); opacity: 1; }
.sfts-page .sfts-form-box .sfts-f-news .frm_checkbox label { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 15px; line-height: 1.4; color: var(--sfts-ink); }
.sfts-page .sfts-form-box .frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type="checkbox"],
.sfts-page .sfts-form-box .frm_forms.with_frm_style .frm_fields_container .frm_checkbox input[type="checkbox"]:not([disabled]):checked { flex: none; width: 20px !important; height: 20px !important; margin: 1px 0 0 !important; appearance: auto; -webkit-appearance: checkbox; accent-color: var(--sfts-blue-fill); background-color: #fff !important; border: 1px solid var(--sfts-rule-strong) !important; border-radius: 0 !important; }
/* style.css draws its own 16px blue square in ::before once checked (WebKit and Blink render generated content on checkboxes), on top of the native tick */
.sfts-page .sfts-form-box .frm_checkbox input[type="checkbox"]::before,
.sfts-page .sfts-form-box .frm_checkbox input[type="checkbox"]::after { content: none !important; display: none !important; }
.sfts-page .sfts-form-box .frm_forms.with_frm_style .frm_checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--sfts-blue-fill) !important; outline-offset: 2px !important; box-shadow: none !important; }
/* The note belongs to the checkbox line, not the Turnstile (Brian, 2026-10-26: "feels like a separate paragraph
   leading into the turnstile"): no option margin or style.css padding-top above it, and more room below it. */
.sfts-page .sfts-form-box .frm_fields_container > .sfts-f-news { margin-bottom: 18px; }
.sfts-page .sfts-form-box .sfts-f-news .frm_checkbox { margin: 0; }
.sfts-page .sfts-form-box .sfts-f-news .frm_description { margin: 4px 0 0; padding: 0 0 0 32px; font-size: 14px; line-height: 1.4; color: var(--sfts-ink-soft); }
.sfts-page .sfts-form-box .sfts-f-captcha { margin-bottom: 18px; }
.sfts-page .sfts-form-box .frm_fields_container > .sfts-f-submit { margin-bottom: 0; } /* (0,4,0): the 14px field gap above is (0,4,0) too, and at (0,3,0) this lost, leaving 14px under the button (2026-10-26) */
.sfts-page .sfts-form-box .sfts-f-submit .frm_submit { margin: 0; }
.sfts-page .sfts-form-box .frm_forms.with_frm_style .frm_submit button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: auto; min-height: 52px; margin: 0; padding: 12px 22px; background-color: var(--sfts-blue-fill); color: #fff; border: 1px solid var(--sfts-blue-fill); border-radius: 0; box-shadow: none; font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.2; transition: box-shadow .2s ease-in; }
.sfts-page .sfts-form-box .frm_forms.with_frm_style .frm_submit button:hover { background-color: var(--sfts-blue-fill); border-color: var(--sfts-blue-fill); color: #fff; box-shadow: 6px 6px 0 0 var(--sfts-orange); }
.sfts-page .sfts-form-box .frm_forms.with_frm_style .frm_submit button svg { width: 24px; height: auto; flex: none; }
.sfts-page .sfts-form-box .frm_message { margin: 0; }

/* ── Without JavaScript (Phase 4 audit) ──────────────────────────────────
   The root carries scroll-padding so native #anchor jumps and focus scrolling
   land below the sticky header (sfts-modules.js refines the value). Controls
   that need a script (copy to clipboard, the preview dialog) disappear without
   one and their plain-link fallbacks appear; the video facade is a real link to
   the video page that the script upgrades to an inline player. */
html.sfts-modular { scroll-padding-top: var(--sfts-scroll-pad, 140px); }
html.sfts-modular:not(.sfts-js) .sfts-page [data-copy-text],
html.sfts-modular:not(.sfts-js) .sfts-page [data-preview] { display: none !important; }
html.sfts-js .sfts-nojs { display: none !important; }

/* ── Formidable controls: readable placeholders and a visible focus ring (Phase 4 audit) ──
   The theme paints placeholders site-blue on the pale field background (2.9:1) and
   removes the focus outline on inputs; Formidable's own focus shadow does not
   survive that either. Inside the modules both are put back: placeholder in the
   soft ink (7:1) and the same two-layer ring as every other control. */
body.sfts-modular .frm_forms.with_frm_style input::placeholder,
body.sfts-modular .frm_forms.with_frm_style textarea::placeholder,
body.sfts-modular .frm_forms.with_frm_style select::placeholder,
body.sfts-modular .frm_forms .select2-container--default .select2-selection__placeholder,
body.sfts-modular .select2-container--default .select2-selection__placeholder { color: var(--sfts-ink-soft) !important; opacity: 1; } /* !important: the theme marks its blue placeholder !important */

body.sfts-modular .frm_forms.with_frm_style :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea, select):focus-visible,
body.sfts-modular .frm_forms .select2-selection:focus-visible,
body.sfts-modular .select2-container--focus .select2-selection { outline: 3px solid var(--sfts-ink) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #fff !important; }
body.sfts-modular .frm_forms.with_frm_style :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 3px solid var(--sfts-ink) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px #fff !important; }
body.sfts-modular .frm_forms.with_frm_style :is(button, input[type="submit"], .frm_button_submit):focus-visible { outline: 3px solid var(--sfts-ink) !important; outline-offset: 3px !important; }
@media (forced-colors: active) { body.sfts-modular .frm_forms :focus-visible { outline-color: Highlight !important; } }

/* Help strip links: a 24px-tall target (WCAG 2.5.8) without moving the text. */
.sfts-page .sfts-crisis__list a { display: inline-block; padding: 4px 6px; margin: 0 -6px; min-height: 24px; border-radius: 4px; } /* no negative vertical margin: stacked links on phones must not overlap */
.sfts-crisis__inner { padding-top: 5px; padding-bottom: 5px; } /* the 4px the links grew by */

/* ── Thank-you page (/ayo2026/, template-areyouokay-thanks.php): the client's design v4, 2026-10-27 ──
   The heading takes the guide hero's title style (800, italic, tight tracking) at the design's size.
   Two colours are a step darker than the mock for contrast on the light band (WCAG AA): the links
   use --sfts-blue-text (#1878bd reads 4.46:1 there, #1673b3 4.8:1) and the closing line the soft ink
   (#6b7785 reads 4.3:1). */
.sfts-ty { background: var(--sfts-light); padding: 96px var(--sfts-gutter) 104px; text-align: center; }
.sfts-ty__inner { max-width: 760px; margin: 0 auto; }
.sfts-ty__cover { display: block; width: 150px; margin: 0 auto 34px; transform: rotate(-3deg); box-shadow: 0 16px 34px rgba(22, 80, 130, .18), 0 2px 6px rgba(22, 80, 130, .08); transition: transform .2s; }
.sfts-ty__cover:hover { transform: rotate(-1deg) scale(1.03); }
.sfts-ty__cover img { display: block; width: 100%; height: auto; }
.sfts-page .sfts-ty__title { margin: 0; font-size: clamp(34px, 2.5vw + 18px, 54px); line-height: 1.08; font-weight: 800; font-style: italic; letter-spacing: -.01em; color: var(--sfts-ink); }
.sfts-page .sfts-ty__lead { margin: 16px 0 0; font-size: 20px; line-height: 31px; color: var(--sfts-ink-soft); }
.sfts-page .sfts-ty__fallback { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--sfts-ink-soft); }
.sfts-page .sfts-ty__more { margin: 44px 0 0; font-size: 16px; line-height: 1.5; color: var(--sfts-ink-soft); }
.sfts-page .sfts-ty a.sfts-ty__link { color: var(--sfts-blue-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sfts-page .sfts-ty a.sfts-ty__link:hover { color: var(--sfts-ink); }
@media (max-width: 640px) {
  .sfts-ty { padding: 56px var(--sfts-gutter) 64px; }
  .sfts-ty__cover { width: 120px; margin-bottom: 26px; }
  .sfts-page .sfts-ty__lead { font-size: 18px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .sfts-ty__cover { transition: none; }
  .sfts-ty__cover:hover { transform: rotate(-3deg); }
}