/*
Theme Name: Serpify
Theme URI: https://serpify.com/
Author: Serpify
Author URI: https://serpify.com/
Description: Serpify is a full site editing (block) theme for SEO tool sites. It ships the Console design system — hard 2px rules, offset shadows and a monospace label style — as editable WordPress blocks and patterns. It includes a tools catalogue post type, a plan rack with monthly and yearly billing, auto-anchored H2 tabs for long articles, a real multilingual engine — URL prefixes, locale switching, per-post translations and twelve bundled interface languages — and JSON-LD schema for search engines and AI answer engines.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 2.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serpify
Tags: full-site-editing, blocks, block-patterns, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, translation-ready, wide-blocks, block-styles, sticky-post, threaded-comments
*/

/* =========================================================================
   1. TOKENS
   Every token reads from a WordPress preset first. Change a colour or a font
   in Appearance -> Editor -> Styles and the whole design follows.
   ========================================================================= */
:root {
  --sf-bg:    var(--wp--preset--color--base, #E8EDF1);
  --sf-card:  var(--wp--preset--color--card, #FFFFFF);
  --sf-ink:   var(--wp--preset--color--ink, #101418);
  --sf-ink2:  var(--wp--preset--color--ink-soft, #41505E);
  --sf-ink3:  var(--wp--preset--color--ink-mute, #7C8A99);
  --sf-line:  var(--wp--preset--color--line, #101418);
  --sf-acc:   var(--wp--preset--color--accent, #FF3B5C);
  --sf-acc2:  var(--wp--preset--color--mint, #12C48B);
  --sf-yel:   var(--wp--preset--color--yellow, #FFD84D);
  --sf-sky:   var(--wp--preset--color--sky, #9FC6FF);
  --sf-violet:var(--wp--preset--color--violet, #C6A8FF);

  /* Text-safe companions to the two colours that fail as small text.
     The fills, borders, stripes and swatches keep --sf-acc and --sf-ink3
     exactly as they are; only type switches to these.
       --sf-acc    #FF3B5C  2.95:1 on the page background — unreadable
       --sf-acc-tx #C8102E  4.99:1 on background, 5.88:1 on card
       --sf-ink3   #7C8A99  2.99:1 on the page background — unreadable
       --sf-ink3-tx #5E6B78 4.63:1 on background, 5.45:1 on card
     Both stay unmistakably the same colour; they are a few steps darker. */
  --sf-acc-tx:  var(--wp--preset--color--accent-text, #C8102E);
  --sf-ink3-tx: var(--wp--preset--color--ink-mute-text, #5E6B78);

  --sf-fdisp: var(--wp--preset--font-family--display, "Archivo", system-ui, sans-serif);
  --sf-fbody: var(--wp--preset--font-family--body, "Inter", system-ui, sans-serif);
  --sf-fmono: var(--wp--preset--font-family--mono, "Space Mono", ui-monospace, monospace);

  --sf-bw: 2px;                                  /* border weight  */
  --sf-sh: 4px 4px 0 var(--sf-line);             /* offset shadow  */
  --sf-sh-lg: 7px 7px 0 var(--sf-line);
  --sf-sh-xl: 9px 9px 0 var(--sf-line);
  --sf-radius: 0px;                              /* set >0 for a softer brand */
  --sf-grid: rgba(16, 20, 24, .045);
  --sf-hair: #E2E7EC;
  --sf-header-h: 62px;
}

/* =========================================================================
   2. BASE
   ========================================================================= */
html { scroll-behavior: smooth; }
body {
  background-color: var(--sf-bg);
  color: var(--sf-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.sf-grid-on {
  background-image:
    linear-gradient(var(--sf-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sf-grid) 1px, transparent 1px);
  background-size: 34px 34px;
}
:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
/* #sf-main takes tabindex="-1" so the skip link can land on it. It is not an
   interactive control, so it should not draw a focus ring when it does. */
#sf-main:focus, #sf-main:focus-visible { outline: none; }
/* On the ink-filled panels the ring needs the opposite treatment. */
.sf-cmd__top :focus-visible,
.sf-tabs__head :focus-visible,
.sf-step :focus-visible,
.sf-rack__top :focus-visible,
/* Consolidation QA, 13 September 2026: the mega menu's summary bar is ink-
   filled and holds the "Browse all tools" link, and the tools trigger turns
   ink while the menu is open. Both inherited the default ink outline, so
   tabbing to either drew a dark ring on a dark ground — an invisible focus
   state on the first control of the menu. */
.sf-mega__bar :focus-visible,
.sf-nav__trigger[aria-expanded="true"]:focus-visible,
.is-style-sf-panel-ink :focus-visible { outline-color: var(--sf-yel); }
/* .sf-wheel clips its own overflow, so an outside ring on a tool option gets
   cut off at the edges. Drawn inside instead. */
.sf-wheel__opt:focus-visible { outline-offset: -3px; }
::selection { background: var(--sf-yel); color: var(--sf-ink); }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
h1 mark, h2 mark, .sf-mark {
  background: var(--sf-yel); color: var(--sf-ink); padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sf-skip-link:focus {
  position: fixed; inset-inline-start: 12px; top: 12px; z-index: 999;
  background: var(--sf-ink); color: #fff; padding: 12px 18px;
  font-family: var(--sf-fmono); font-size: 13px;
}

/* Defined here rather than relying on wp-block-library, which a site can
   dequeue. The switcher button needs it to name itself to a screen reader. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/*
 * Without this the skip link was dead. .sf-skip-link:focus moved it on screen
 * and gave it a background, but never undid the 1x1 clip from
 * .screen-reader-text, so the first thing a keyboard user tabs to on every page
 * was a one-pixel box. Anything visually hidden that can take focus has to
 * un-hide itself here.
 */
.screen-reader-text:focus,
.screen-reader-text:focus-within {
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; clip-path: none; white-space: normal;
}

/* Shared surface + button primitives, exposed as block styles too */
.sf-hard,
.is-style-sf-hard {
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh);
  border-radius: var(--sf-radius);
}
.is-style-sf-hard-lg { box-shadow: var(--sf-sh-lg); }

.sf-btn, .is-style-sf-btn .wp-block-button__link {
  font-family: var(--sf-fdisp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .02em; border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); border-radius: var(--sf-radius);
  padding: 13px 26px; display: inline-flex; align-items: center; gap: 10px;
  transition: transform .12s, box-shadow .12s, background-color .12s;
  cursor: pointer; text-decoration: none;
}
.sf-btn:hover, .is-style-sf-btn .wp-block-button__link:hover {
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sf-line);
}
.sf-btn:active, .is-style-sf-btn .wp-block-button__link:active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sf-line);
}
.sf-btn--accent { background: var(--sf-acc-tx); color: #fff; }
.sf-btn--ink    { background: var(--sf-ink); color: #fff; }
.sf-btn--white  { background: var(--sf-card); color: var(--sf-ink); }
.sf-btn--yellow { background: var(--sf-yel); color: var(--sf-ink); }

.sf-kicker, .is-style-sf-kicker {
  display: inline-block; font-family: var(--sf-fmono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--sf-ink); color: #fff; padding: 4px 10px;
}
/* The tool template prints the category as a Post Terms block with this
   class, so the kicker holds a link. Links are ink by default: ink on the
   ink-filled kicker was text nobody could see. */
.sf-kicker a, .is-style-sf-kicker a { color: inherit; text-decoration: none; }
.sf-kicker a:hover, .is-style-sf-kicker a:hover,
.sf-kicker a:focus-visible, .is-style-sf-kicker a:focus-visible { color: var(--sf-yel); text-decoration: underline; text-underline-offset: 3px; }
.sf-kicker a:focus-visible, .is-style-sf-kicker a:focus-visible { outline-color: var(--sf-yel); }
.sf-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sf-fmono); font-size: 11.5px;
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  padding: 5px 11px;
}
.sf-tag--free { background: var(--sf-acc2); color: #04281C; font-weight: 700; }
.sf-tag--yellow { background: var(--sf-yel); }
.sf-mono, .is-style-sf-mono {
  font-family: var(--sf-fmono); font-size: .82em;
  letter-spacing: .06em; text-transform: uppercase;
}

/*
 * Affiliate / partner recommendation — patterns/affiliate-pick.php.
 *
 * Deliberately not .sf-hard and not .sf-btn. Internal cards and buttons in
 * this theme are solid, square-cornered and drop-shadowed; a reader who has
 * scrolled past a dozen of them reads that shape as "part of this site". A
 * paid recommendation for someone else's product needs to read as a break in
 * that pattern on sight, not just in the small print — dashed border instead
 * of solid, violet instead of the site's own accent colours, an outline
 * button instead of a filled one, and a visible tag plus a disclosure line
 * that neither depends on the reader noticing the styling.
 */
.sf-aff {
  border-color: var(--sf-violet) !important; background: var(--sf-card);
}
.sf-aff__tag {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--sf-fmono);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  background: var(--sf-violet); color: var(--sf-ink); border: 1px solid var(--sf-line);
  padding: 4px 10px; margin: 0 0 12px;
}
.sf-aff h3 { margin: 0 0 8px; }
.sf-aff__buttonwrap { margin: 16px 0 10px; }
.sf-aff__btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--sf-fdisp);
  font-weight: 700; font-size: 14.5px; text-decoration: none; color: var(--sf-ink);
  background: transparent; border: 1px dashed var(--sf-violet); border-radius: var(--sf-radius);
  padding: 10px 18px; transition: background-color .12s, border-style .12s;
}
.sf-aff__btn:hover { background: var(--sf-violet); border-style: solid; }
.sf-aff__disclosure {
  font-family: var(--sf-fmono); font-size: 11.5px; color: var(--sf-ink3-tx); margin: 0;
}

/* =========================================================================
   3. HEADER / NAVIGATION / ANNOUNCEMENT
   ========================================================================= */
.sf-announce {
  background: var(--sf-ink); color: #EAF0F5;
  font-family: var(--sf-fmono); font-size: 12px; text-align: center;
  padding: 8px 16px; border-bottom: var(--sf-bw) solid var(--sf-line);
}
.sf-announce a { color: var(--sf-yel); }

.sf-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--sf-bg);
  border-bottom: var(--sf-bw) solid var(--sf-line);
}
.sf-header .wp-block-site-logo img { display: block; }
/*
 * Mobile and accessibility pass, 14 September 2026. A site title longer than
 * "Serpify" — "Serpify Analytics Platform" — pushed the header bar past the
 * viewport at every width: the brand group was a flex item with the default
 * min-width:auto, so it could never be narrower than its own text, and the
 * ellipsis rule only existed below 480px. The brand can now shrink at any
 * width, and the title truncates inside its box instead of widening the page.
 */
.sf-header .sf-brand,
.sf-header .wp-block-site-title { min-width: 0; }
.sf-header .wp-block-site-title a,
.sf-logo {
  font-family: var(--sf-fdisp); font-weight: 800; font-size: 21px;
  letter-spacing: -.03em; text-transform: uppercase; text-decoration: none;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-header .wp-block-navigation {
  font-family: var(--sf-fmono); font-size: 12.5px;
}
.sf-header .wp-block-navigation .wp-block-navigation-item__content {
  padding: 6px 10px; border: var(--sf-bw) solid transparent; text-decoration: none;
}
.sf-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.sf-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  border-color: var(--sf-line); background: var(--sf-yel);
}
.sf-header .wp-block-navigation__submenu-container {
  border: var(--sf-bw) solid var(--sf-line) !important;
  box-shadow: var(--sf-sh); background: var(--sf-card);
}
.sf-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--sf-bg); padding: 24px;
}

/* Social icons keep the hard-edge language */
.sf-social .wp-block-social-link {
  border: var(--sf-bw) solid var(--sf-line); border-radius: var(--sf-radius);
  transition: transform .12s, box-shadow .12s;
}
.sf-social .wp-block-social-link:hover { transform: translate(-2px, -2px); box-shadow: var(--sf-sh); }

/* =========================================================================
   3b. SITE NAVIGATION (serpify/site-nav)
   The SEO tools mega menu, the mobile drawer and the per-category
   accordions. Carried forward from theme 1.1.0 during the 2.0.0
   consolidation — 2.0.0 shipped the block markup's CSS nowhere, because it
   had swapped the block out for a core Navigation block.

   Two behaviours are load-bearing here and easy to break later:

   html:not(.sf-js) — with JavaScript off, the mega menu opens on :hover and
   :focus-within instead of on click, and the drawer is never used because
   the link row does not collapse. The menu is usable either way. The .sf-js
   class is printed by serpify_nav_js_flag() in the head, before first paint,
   so the scripted rules never flash.

   .is-collapsed / .is-nolang / .is-nocta — set by serpify.js after it
   measures the bar. The media queries below are the baseline; the classes
   escalate early when a long translation or a long button label would
   otherwise overflow.
   ========================================================================= */

/* --- the bar ------------------------------------------------------------ */
/* Border-box inside the menu and the language selector: a full-width row with
   padding must never be wider than the panel it sits in. */
.sf-nav, .sf-nav *, .sf-nav *::before, .sf-nav *::after,
.sf-lang, .sf-lang *, .sf-lang *::before, .sf-lang *::after { box-sizing: border-box; }


.sf-nav {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px;
}

.sf-nav ul { list-style: none; margin: 0; padding: 0; }

.sf-nav__list { display: flex; align-items: center; gap: 4px; margin-inline-start: 14px; }

.sf-nav__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sf-fmono); font-size: 12.5px; line-height: 1; letter-spacing: .01em;
  color: var(--sf-ink); text-decoration: none; white-space: nowrap;
  background: none; border: var(--sf-bw) solid transparent;
  padding: 10px 11px; cursor: pointer;
}

.sf-nav__link:hover { border-color: var(--sf-line); background: var(--sf-yel); color: var(--sf-ink); }

.sf-nav__link[aria-current="page"],
.sf-nav__link.is-section { border-color: var(--sf-line); background: var(--sf-yel); }

.sf-nav__trigger[aria-expanded="true"],
.sf-nav__trigger[aria-expanded="true"]:hover { background: var(--sf-ink); border-color: var(--sf-line); color: #fff; }

.sf-ico { display: block; flex: none; }

.sf-ico--chev { transition: transform .15s; }

[aria-expanded="true"] > .sf-ico--chev { transform: rotate(180deg); }


.sf-nav__end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; flex: none; }

.sf-nav__login {
  font-family: var(--sf-fmono); font-size: 12.5px; color: var(--sf-ink);
  padding: 10px 4px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap;
}

.sf-nav__login:hover { color: var(--sf-acc-tx); }

.sf-nav__cta { box-sizing: border-box; padding: 0 17px; min-height: 40px; font-size: 14px; line-height: 1; white-space: nowrap; }


/* --- SEO tools mega menu ---------------------------------------------------- */
.sf-mega {
  position: absolute; inset-inline: 0; top: calc(100% + 10px); z-index: 70;
  padding-inline: var(--wp--style--root--padding-left, 24px) var(--wp--style--root--padding-right, 24px);
  pointer-events: none;
}

.sf-js .sf-mega:not(.is-open) { display: none; }

.sf-mega__in {
  pointer-events: auto;
  max-width: var(--wp--style--global--wide-size, 1150px); margin-inline: auto;
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh-lg);
  max-height: calc(100vh - var(--sf-header-h, 64px) - 36px); overflow-y: auto; overscroll-behavior: contain;
}
@supports (height: 100dvh) {

  .sf-mega__in { max-height: calc(100dvh - var(--sf-header-h, 64px) - 36px); }
}

.sf-mega.is-open .sf-mega__in { animation: sf-drop .16s cubic-bezier(.2, .8, .3, 1); }

@keyframes sf-drop { from { opacity: 0; transform: translateY(-6px); } }


.sf-mega__bar {
  display: flex; align-items: center; gap: 16px;
  background: var(--sf-ink); color: #EAF0F5; padding: 9px 18px;
  font-family: var(--sf-fmono); font-size: 11.5px; letter-spacing: .04em;
}

.sf-mega__sum { margin: 0; }

.sf-mega__all { margin-inline-start: auto; color: var(--sf-yel); text-underline-offset: 3px; padding: 4px 0; }

.sf-mega__all:hover, .sf-mega__all:focus-visible { color: #fff; }


.sf-mega__grid {
  display: grid; grid-template-columns: repeat(var(--sf-mega-cols, 3), minmax(0, 1fr));
  overflow: hidden;
}

.sf-mega__cat {
  position: relative; display: flex; flex-direction: column;
  padding: 16px 18px 16px 30px;
  box-shadow: var(--sf-bw) 0 0 var(--sf-line), 0 var(--sf-bw) 0 var(--sf-line);
}

.sf-mega__cat::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 9px;
  background: var(--sf-tc, var(--sf-yel)); border-inline-end: var(--sf-bw) solid var(--sf-line);
}

.sf-mega__head { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }

.sf-mega__head a { display: inline-flex; align-items: center; gap: 9px; color: var(--sf-ink); text-decoration: none; min-width: 0; }

.sf-mega__name {
  font-family: var(--sf-fdisp); font-weight: 800; font-size: 15px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: -.02em;
}

.sf-mega__head a:hover .sf-mega__name,
.sf-mega__head a[aria-current="page"] .sf-mega__name {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}

.sf-mega__code {
  font-family: var(--sf-fmono); font-size: 10px; letter-spacing: .08em; line-height: 1.4;
  background: var(--sf-bg); border: var(--sf-bw) solid var(--sf-line); padding: 1px 6px; flex: none;
}

.sf-mega__qty { margin-inline-start: auto; font-family: var(--sf-fmono); font-size: 10.5px; color: var(--sf-ink3-tx); white-space: nowrap; }

.sf-mega__tools a {
  display: flex; align-items: center; gap: 10px;
  margin-inline: -8px; padding: 7px 8px;
  font-family: var(--sf-fbody); font-size: 14px; line-height: 1.3;
  color: var(--sf-ink); text-decoration: none;
}

/* Bullets carry the category colour, so they read as a key, not as checkboxes. */
.sf-mega__tools .sq,
.sf-drawer__tools .sq {
  width: 10px; height: 10px; flex: none;
  background: var(--sf-tc, var(--sf-yel)); border: var(--sf-bw) solid var(--sf-line);
}

.sf-mega__tools a:hover { background: var(--sf-bg); color: var(--sf-ink); }

.sf-mega__tools a:hover span:last-child,
.sf-mega__tools a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.sf-mega__tools a[aria-current="page"] { background: var(--sf-ink); color: #fff; text-decoration: none; }

.sf-mega__tools a[aria-current="page"] .sq,
.sf-drawer__tools a[aria-current="page"] .sq { border-color: #fff; }

.sf-mega__more {
  align-self: flex-start; margin-top: auto; padding-top: 10px;
  font-family: var(--sf-fmono); font-size: 11.5px; color: var(--sf-ink2);
  text-decoration: underline; text-underline-offset: 3px;
}

.sf-mega__more:hover { color: var(--sf-acc-tx); }


/* Without JavaScript the tools menu still opens on hover and on keyboard focus. */
html:not(.sf-js) .sf-mega { display: none; }

html:not(.sf-js) .sf-nav__item--mega:hover .sf-mega,
html:not(.sf-js) .sf-nav__item--mega:focus-within .sf-mega { display: block; }


/* --- menu button + mobile menu ------------------------------------------ */
.sf-nav__burger {
  display: none; align-items: center; gap: 9px; box-sizing: border-box;
  min-height: 40px; padding: 0 13px;
  font-family: var(--sf-fmono); font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: .1em;
  background: var(--sf-card); color: var(--sf-ink);
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh); border-radius: var(--sf-radius);
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}

.sf-nav__burger:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sf-line); }

.sf-nav__burger[aria-expanded="true"] { background: var(--sf-ink); color: #fff; transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--sf-line); }

.sf-nav__burger .sf-ico--close { display: none; }

.sf-nav__burger[aria-expanded="true"] .sf-ico--menu { display: none; }

.sf-nav__burger[aria-expanded="true"] .sf-ico--close { display: block; }


.sf-drawer { display: none; }

/* Scroll lock for the open menu. Only the root is locked: a body with its own
   overflow becomes a scroll container, and the sticky header would then stick
   to the body instead of the viewport and scroll away. */
html.sf-nav-locked { overflow: hidden; scrollbar-gutter: stable; }

html.sf-nav-locked body { overflow: visible; }


.sf-js .sf-drawer.is-open {
  display: block; position: fixed; inset-inline: 0; bottom: 0; top: var(--sf-drawer-top, 64px); z-index: 65;
  background: var(--sf-bg); border-top: var(--sf-bw) solid var(--sf-line);
  overflow-y: auto; overscroll-behavior: contain;
}

.sf-drawer.is-open .sf-drawer__in { animation: sf-drop .16s cubic-bezier(.2, .8, .3, 1); }


.sf-nav.is-collapsed .sf-nav__list,
.sf-nav.is-collapsed .sf-nav__login { display: none; }

.sf-nav.is-collapsed .sf-nav__burger { display: inline-flex; }
@media (max-width: 1023px) {

  .sf-nav__list, .sf-nav__login { display: none; }

  .sf-nav__burger { display: inline-flex; }


  /* Without JavaScript the link row wraps under the logo instead. */
  html:not(.sf-js) .sf-header__bar { flex-wrap: wrap !important; row-gap: 4px !important; }

  html:not(.sf-js) .sf-nav { flex-wrap: wrap; row-gap: 0; }

  html:not(.sf-js) .sf-nav__list { display: flex; flex-wrap: wrap; order: 2; flex-basis: 100%; margin-inline-start: -13px; }

  html:not(.sf-js) .sf-nav__burger { display: none; }

  html:not(.sf-js) .sf-mega__grid { grid-template-columns: minmax(0, 1fr); }
}


.sf-drawer__in {
  display: flex; flex-direction: column; gap: 14px; min-height: 100%;
  max-width: 640px; margin-inline: auto;
  padding: 18px var(--wp--style--root--padding-right, 24px) 0 var(--wp--style--root--padding-left, 24px);
}

.sf-drawer ul { list-style: none; margin: 0; padding: 0; }

.sf-drawer__list,
.sf-drawer__lang {
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
}

.sf-drawer__item + .sf-drawer__item { border-top: var(--sf-bw) solid var(--sf-line); }

.sf-drawer__row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px;
  background: none; border: 0; text-align: start; cursor: pointer; text-decoration: none;
  color: var(--sf-ink); font-family: var(--sf-fdisp); font-weight: 800; font-size: 18px;
  line-height: 1.1; text-transform: uppercase; letter-spacing: -.02em;
}

.sf-drawer__row:hover { background: var(--sf-yel); color: var(--sf-ink); }

.sf-drawer__row[aria-current="page"] { background: var(--sf-yel); }

.sf-drawer__row[aria-expanded="true"] { background: var(--sf-ink); color: #fff; }

.sf-drawer__row .sf-ico--chev { margin-inline-start: auto; width: 12px; height: 12px; }

.sf-drawer__n {
  font-family: var(--sf-fmono); font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.4;
  border: var(--sf-bw) solid currentColor; padding: 0 6px;
}

.sf-drawer__val {
  margin-inline-start: auto; font-family: var(--sf-fmono); font-size: 12.5px; font-weight: 400;
  text-transform: none; letter-spacing: 0;
}

.sf-drawer__val + .sf-ico--chev { margin-inline-start: 0; }

.sf-drawer__lang .sf-lang__globe { flex: none; }


.sf-js .sf-acc__panel:not(.is-open) { display: none; }

.sf-drawer__sub { border-top: var(--sf-bw) solid var(--sf-line); background: var(--sf-bg); padding: 12px; }

.sf-drawer__all {
  display: flex; align-items: center; min-height: 48px; margin-bottom: 12px; padding: 10px 14px;
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
  font-family: var(--sf-fmono); font-size: 13px; font-weight: 700; color: var(--sf-ink); text-decoration: none;
}

.sf-drawer__all:hover, .sf-drawer__all[aria-current="page"] { background: var(--sf-yel); color: var(--sf-ink); }

.sf-drawer__cats { display: grid; gap: 8px; }

.sf-drawer__cat { position: relative; background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); }

.sf-drawer__cat::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 9px;
  background: var(--sf-tc, var(--sf-yel)); border-inline-end: var(--sf-bw) solid var(--sf-line);
}

.sf-drawer__catbtn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px;
  padding: 10px 14px; padding-inline-start: 24px;
  background: none; border: 0; text-align: start; cursor: pointer; color: var(--sf-ink);
  font-family: var(--sf-fdisp); font-weight: 700; font-size: 15px; line-height: 1.15;
  text-transform: uppercase; letter-spacing: -.015em;
}

.sf-drawer__catbtn:hover { background: var(--sf-bg); }

.sf-drawer__catbtn[aria-expanded="true"] { border-bottom: var(--sf-bw) solid var(--sf-line); }

.sf-drawer__catname { min-width: 0; }

.sf-drawer__qty { margin-inline-start: auto; font-family: var(--sf-fmono); font-size: 11px; font-weight: 400; color: var(--sf-ink3-tx); }

.sf-drawer__catbtn .sf-ico--chev { width: 11px; height: 11px; }

.sf-drawer__tools a {
  display: flex; align-items: center; gap: 11px; min-height: 46px;
  padding: 10px 14px; padding-inline-start: 24px;
  border-top: 1px solid var(--sf-hair); color: var(--sf-ink); text-decoration: none;
  font-size: 15px; line-height: 1.3;
}

.sf-drawer__tools li:first-child a { border-top: 0; }

.sf-drawer__tools a:hover { background: var(--sf-bg); color: var(--sf-ink); }

.sf-drawer__tools a[aria-current="page"] { background: var(--sf-ink); color: #fff; }

.sf-drawer__catall { font-family: var(--sf-fmono); font-size: 12.5px; font-weight: 700; }


.sf-drawer__langs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  padding: 12px; border-top: var(--sf-bw) solid var(--sf-line); background: var(--sf-bg);
}

.sf-drawer__langs .sf-lang__item {
  min-height: 46px; border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
}

.sf-drawer__langs .sf-lang__item.is-current { background: var(--sf-ink); color: #fff; }


.sf-drawer__foot {
  position: sticky; bottom: 0; z-index: 2; margin-top: auto;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  background: var(--sf-bg); border-top: var(--sf-bw) solid var(--sf-line);
}

.sf-drawer__cta { box-sizing: border-box; flex: 1; justify-content: center; min-height: 48px; padding-block: 0; }

.sf-drawer__login {
  font-family: var(--sf-fmono); font-size: 13px; color: var(--sf-ink);
  padding: 12px 4px; text-decoration: underline; text-underline-offset: 4px;
}

/* The language selector and the header button live in the bar until the bar
   runs out of room; then they move to the menu, never both places at once. */
.sf-drawer__cta { display: none; }

.sf-drawer__foot:not(:has(.sf-drawer__login)) { display: none; }

.sf-drawer__lang { display: none; }


.sf-nav.is-nolang .sf-nav__end > .sf-lang { display: none; }

.sf-nav.is-nolang .sf-drawer__lang { display: block; }
@media (max-width: 640px) {

  .sf-nav__end > .sf-lang { display: none; }

  .sf-drawer__lang { display: block; }
}

.sf-nav.is-nocta .sf-nav__cta { display: none; }

.sf-nav.is-nocta .sf-drawer__cta { display: inline-flex; }

.sf-nav.is-nocta .sf-drawer__foot { display: flex; }

/* =========================================================================
   4. LANGUAGE SWITCHER (serpify/language-switcher)
   The dropdown is a native <details>: the browser shows and hides the panel,
   so there is no display toggle here and nothing for scripting to switch on.
   ========================================================================= */
.sf-lang { position: relative; display: inline-block; }
.sf-lang__btn {
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); padding: 8px 13px; font-size: 13.5px;
  font-family: var(--sf-fmono); display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s, box-shadow .12s; cursor: pointer; color: inherit;
  list-style: none; user-select: none; -webkit-user-select: none;
}
/* The disclosure triangle a browser draws on <summary>; the caret below is
   the theme's own. Both selectors are needed: Safari ignores ::marker. */
.sf-lang__btn::-webkit-details-marker { display: none; }
.sf-lang__btn::marker { content: ""; }
.sf-lang__btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sf-line); }
.sf-lang__btn:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.sf-lang[open] .sf-lang__caret { transform: rotate(180deg); }
.sf-lang__flag { font-size: 15px; line-height: 1; }
.sf-lang__panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 9px); width: 244px;
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh-lg); max-height: 62vh; overflow: auto;
  overscroll-behavior: contain; z-index: 80;
}
.sf-lang__head {
  font-family: var(--sf-fmono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; background: var(--sf-yel);
  border-bottom: var(--sf-bw) solid var(--sf-line); padding: 9px 14px;
}
.sf-lang__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid var(--sf-hair);
  padding: 10px 14px; text-align: start; font-size: 14.5px;
  color: inherit; text-decoration: none; cursor: pointer;
}
.sf-lang__item:hover { background: var(--sf-yel); }
.sf-lang__item.is-current { background: var(--sf-ink); color: #fff; }
.sf-lang__cc {
  margin-inline-start: auto; font-family: var(--sf-fmono);
  font-size: 10.5px; color: var(--sf-ink3-tx); text-transform: uppercase;
}
.sf-lang__item.is-current .sf-lang__cc { color: #9BB0C4; }

/* Header language control: match the compact reference treatment — flag + code. */
.sf-header .sf-lang__current { display: none; }
.sf-header .sf-lang__cc--btn { display: inline; margin-inline-start: 0; }
.sf-header .sf-lang__btn { gap: 7px; }
.sf-header .sf-lang__flag { display: inline-flex; align-items: center; font-size: 15px; line-height: 1; }
/* The code shown on the closed button: mobile only, see the query below. */
.sf-lang__cc--btn { display: none; margin-inline-start: 0; }

/* Configured but not translated yet. Rendered as a span, never a link. */
.sf-lang__item.is-unavailable {
  color: var(--sf-ink3-tx); cursor: default; background: repeating-linear-gradient(
    135deg, transparent, transparent 6px, rgba(16, 20, 24, .035) 6px, rgba(16, 20, 24, .035) 12px
  );
}
.sf-lang__item.is-unavailable:hover { background-color: transparent; }
.sf-lang__note {
  margin-inline-start: auto; font-family: var(--sf-fmono); font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sf-ink3-tx);
  border: 1px solid currentColor; padding: 1px 5px; white-space: nowrap;
}
.sf-lang__item.is-unavailable .sf-lang__cc { margin-inline-start: 8px; }

/* inline + grid variants */
.sf-lang--inline { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-lang--inline .sf-lang__item {
  width: auto; border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  padding: 6px 10px; font-size: 13px;
}
/*
 * Mobile pass, 14 September 2026: the grid was a hard repeat(4, 1fr). In the
 * footer's fourth column at tablet width that is four 38px tracks holding
 * rows that cannot be narrower than about 70px, so the grid blew out and the
 * whole page scrolled sideways by 13px. The tracks now come from the space
 * available: as many columns as fit, never fewer pixels than a row needs.
 * The compact variant (codes only, as the footer uses it) needs less.
 */
.sf-lang--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.sf-lang--grid.sf-lang--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 72px), 1fr)); }
.sf-lang--grid .sf-lang__item { border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); }
/* The card background above outranked the current-language fill by source
   order, which left the row's white text on a white card: the language you
   are reading in was the one row you could not read. */
.sf-lang--grid .sf-lang__item.is-current,
.sf-lang--inline .sf-lang__item.is-current { background: var(--sf-ink); color: #fff; }
/* Rows inside the scrolling dropdown panel: an outside ring is clipped by
   the panel's own scroll box, so the ring is drawn inside instead. */
.sf-lang__panel .sf-lang__item:focus-visible { outline-offset: -3px; }
/* In the compact variants the marker moves onto its own line rather than being
   hidden — the whole point of the row is that it says it is not ready. */
.sf-lang--inline .sf-lang__item.is-unavailable,
.sf-lang--grid .sf-lang__item.is-unavailable { flex-wrap: wrap; }
.sf-lang--inline .sf-lang__note,
.sf-lang--grid .sf-lang__note { margin-inline-start: 0; flex-basis: 100%; border: 0; padding: 0; }

/* =========================================================================
   5. HERO + COMMAND BAR (serpify/command-bar)
   ========================================================================= */
.sf-hero { padding-block-start: clamp(40px, 6vw, 64px); }
/*
 * Visual pass, 15 September 2026. Inside a constrained layout WordPress centres
 * every child that is narrower than the content width — margin-left and
 * margin-right auto, both !important. So anything given a max-width here (this
 * H1 at 15ch, the lede at 58ch, the legal-page paragraphs at 68ch) was pushed
 * off the left edge shared by the badge, the breadcrumb and the command bar:
 * on the guide template the byline sat at one edge and the lede 120px to its
 * right. The box now stays the full content width and the measure is capped
 * with end padding instead, which the auto margins cannot move.
 */
.sf-hero h1 { padding-inline-end: max(0px, calc(100% - 15ch)); }
.sf-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--sf-acc2); color: #04281C;
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
  padding: 6px 14px; font-family: var(--sf-fmono); font-size: 12.5px; font-weight: 700;
}
.sf-lede { color: var(--sf-ink2); padding-inline-end: max(0px, calc(100% - 58ch)); }
/* Term description and excerpt blocks wrap their text in a <p> of their own. */
.sf-lede > p:first-child { margin-top: 0; }
.sf-lede > p:last-child { margin-bottom: 0; }

.sf-cmd {
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh-lg); margin-block-start: 36px;
}
.sf-cmd__top {
  display: flex; align-items: center; gap: 8px;
  background: var(--sf-ink); color: #EAF0F5; padding: 8px 14px;
  font-family: var(--sf-fmono); font-size: 11.5px; letter-spacing: .06em;
}
.sf-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); }
.sf-dot--r { background: #FF5F57; } .sf-dot--y { background: #FEBC2E; } .sf-dot--g { background: #28C840; }
.sf-cmd__row { display: flex; align-items: stretch; margin: 0; }
.sf-pick { position: relative; flex: none; }
.sf-pick__btn {
  height: 100%; display: flex; align-items: center; gap: 14px;
  background: var(--sf-yel); border: 0;
  border-inline-end: var(--sf-bw) solid var(--sf-line);
  padding: 15px 18px; min-width: 272px; text-align: start; cursor: pointer; color: inherit;
}
.sf-pick__btn:hover { filter: brightness(.96); }
.sf-pick__lbl {
  display: block; font-family: var(--sf-fmono); font-size: 9.5px;
  letter-spacing: .15em; text-transform: uppercase;
}
.sf-pick__val {
  display: block; font-weight: 600; font-size: 15px; margin-top: 1px; max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-pick__chev { margin-inline-start: auto; transition: transform .18s; }
.sf-pick__btn[aria-expanded="true"] .sf-pick__chev { transform: rotate(180deg); }
.sf-q {
  flex: 1; display: flex; align-items: center; min-width: 0;
  border-inline-end: var(--sf-bw) solid var(--sf-line);
}
.sf-q__prompt { font-family: var(--sf-fmono); color: var(--sf-acc-tx); padding-inline-start: 16px; font-size: 15px; font-weight: 700; }
.sf-q__input {
  flex: 1; border: 0; background: none; font-family: var(--sf-fmono);
  font-size: 15px; padding: 17px 12px; min-width: 0; color: var(--sf-ink);
}
.sf-q__input::placeholder { color: var(--sf-ink3-tx); opacity: 1; }
.sf-q__input:focus { outline: none; }
/* The input is borderless by design — the frame is .sf-q around it — and
   `outline: none` alone left the site's primary field with no focus state.
   Same fix as the catalogue filter: the ring moves to the frame, drawn inside
   because the frame sits flush against the picker and the Start button. */
.sf-q:focus-within { outline: 3px solid var(--sf-ink); outline-offset: -3px; }
.sf-caret { width: 9px; height: 19px; background: var(--sf-ink); margin-inline-end: 14px; animation: sf-blink 1.05s steps(1) infinite; }
@keyframes sf-blink { 50% { opacity: 0; } }
.sf-cmd__go {
  flex: none; background: var(--sf-ink); color: #fff; border: 0; padding: 0 32px;
  font-family: var(--sf-fdisp); font-weight: 800; text-transform: uppercase;
  font-size: 15.5px; letter-spacing: .03em; display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-decoration: none;
}
.sf-cmd__go:hover { background: var(--sf-acc-tx); }
.sf-hint { font-family: var(--sf-fmono); font-size: 12px; color: var(--sf-ink2); margin-top: 13px; }

/* Quiet secondary links: under the hero, and closing a section. Mono, ink, */
/* underlined so they read as links without competing with a solid button.  */
.sf-hero__links, .sf-sectionlink { color: var(--sf-ink2); }
.sf-hero__links a, .sf-sectionlink a {
  color: var(--sf-ink); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.sf-hero__links a:hover, .sf-sectionlink a:hover { color: var(--sf-acc-tx); }
.sf-statnote { color: var(--sf-ink3-tx, var(--sf-ink2)); }.sf-err { color: #C11B36; font-size: 13.5px; margin-top: 8px; min-height: 20px; font-family: var(--sf-fmono); }

.sf-wheel {
  position: absolute; z-index: 70; inset-inline-start: -2px; top: calc(100% + 8px);
  width: 412px; max-width: 92vw; background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh-lg);
  display: none; overflow: hidden;
}
.sf-wheel.is-open { display: block; }
.sf-wheel__search { padding: 10px; border-bottom: var(--sf-bw) solid var(--sf-line); background: var(--sf-bg); }
.sf-wheel__search input {
  width: 100%; background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line);
  padding: 10px 12px; font-family: var(--sf-fmono); font-size: 13.5px;
}
.sf-wheel__search input:focus { outline: none; background: var(--sf-yel); }
.sf-wheel__search input::placeholder { color: var(--sf-ink3-tx); opacity: 1; }
.sf-wheel__list { height: 268px; overflow-y: auto; overscroll-behavior: contain; }
.sf-wheel__cat {
  font-family: var(--sf-fmono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  background: var(--sf-bg); border-block: 1px solid var(--sf-line); padding: 7px 16px;
  position: sticky; top: 0;
}
.sf-wheel__opt {
  display: flex; align-items: center; gap: 11px; width: 100%; background: none;
  border: 0; border-bottom: 1px solid var(--sf-hair); padding: 10px 16px;
  text-align: start; font-size: 14.5px; cursor: pointer; color: inherit;
}
.sf-wheel__opt:hover { background: var(--sf-yel); }
.sf-wheel__opt.is-on { background: var(--sf-ink); color: #fff; }
.sf-wheel__opt .n { font-family: var(--sf-fmono); font-size: 10.5px; color: var(--sf-ink3-tx); min-width: 20px; }
/* Present on every option in the markup, exposed only on the chosen one, so a
   screen reader hears it once rather than after every tool in the list. */
.sf-wheel__cur { display: none; }
.sf-wheel__opt[aria-current="true"] .sf-wheel__cur { display: inline; }
.sf-wheel__opt.is-on .n { color: var(--sf-yel); }
.sf-wheel__empty { padding: 26px; text-align: center; font-family: var(--sf-fmono); font-size: 13px; color: var(--sf-ink3-tx); }

/* =========================================================================
   6. PAGE HEADER (inner pages)
   ========================================================================= */
.sf-phead { padding-block-start: clamp(30px, 4vw, 46px); }
.sf-crumb-wrap { margin-block-end: 14px; }
.sf-byline { font-family: var(--sf-fmono); font-size: 13px; color: var(--sf-ink2); margin-block: 10px 0; }
.sf-byline a { color: inherit; border-bottom: 1px solid var(--sf-ink3); text-decoration: none; }
.sf-byline a:hover { color: var(--sf-acc-tx); border-color: var(--sf-acc-tx); }
.sf-count-fact { margin: 0; }
.sf-crumb { font-family: var(--sf-fmono); font-size: 12px; color: var(--sf-ink2); }
.sf-crumb a { text-decoration: none; border-bottom: 1px solid var(--sf-ink3); }
.sf-crumb a:hover { color: var(--sf-acc-tx); border-color: var(--sf-acc-tx); }
.sf-metaline { display: flex; flex-wrap: wrap; gap: 9px; }

/* =========================================================================
   7. STAT + FEATURE + STEP CARDS (patterns)
   ========================================================================= */
.sf-stat {
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); padding: 18px; box-sizing: border-box;
}
.sf-stat__n {
  display: block; font-family: var(--sf-fdisp); font-weight: 800;
  font-size: 30px; letter-spacing: -.04em; line-height: 1; margin: 0;
}
.sf-stat__l {
  font-family: var(--sf-fmono); font-size: 11px; color: var(--sf-ink2);
  display: block; margin-top: 7px; text-transform: uppercase; letter-spacing: .06em;
}
.sf-fcard {
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); padding: 20px;
}
.sf-fcard__n { font-family: var(--sf-fmono); font-size: 11px; color: var(--sf-acc-tx); font-weight: 700; }
.sf-step {
  background: var(--sf-ink); color: #EAF0F5; border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); padding: 26px;
}
/* height:100% was set on both of these. A flex item whose height is anything
   other than auto is not stretched, and 100% of a row with no fixed height is
   auto in all but name — so the four Why cards and the three step panels each
   took the height of their own text and the row read as a staircase. Columns
   already stretch their children; the height rule only got in the way. */
.sf-step h3, .sf-step .wp-block-heading { color: #fff; }
.sf-step p { color: #A9BACA; }
.sf-step__n { font-family: var(--sf-fdisp); font-weight: 800; font-size: 44px; line-height: 1; color: var(--sf-yel); }

/* Tool shortlist blocks (home page) */
.sf-block { background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh); }
.sf-block__head {
  display: flex; align-items: center; gap: 10px;
  border-bottom: var(--sf-bw) solid var(--sf-line); padding: 11px 14px; background: var(--sf-yel);
}
.sf-block__head--mint { background: var(--sf-acc2); }
.sf-block__head--sky  { background: var(--sf-sky); }
/* Pre-launch QA, 13 September 2026: these components all set width:100% and then
   add horizontal padding. With the browser default of content-box that makes each
   one wider than its container — the language switcher items pushed 8px past the
   viewport on every page at tablet width, and the shortlist rows did the same on
   the home page. Sized to include their own padding instead. */
.sf-block__row,
.sf-lang__item,
.sf-wheel__opt,
.sf-wheel__search input,
.sf-tabs__select,
.sf-pick__btn,
.wp-block-post-comments-form input,
.wp-block-post-comments-form textarea { box-sizing: border-box; }

/* Pre-launch QA, 13 September 2026: width:100% with 14px of horizontal padding
   and the browser default content-box made every row 28px wider than its
   column, which pushed the tools shortlist 8px past the viewport and put a
   horizontal scrollbar on the home page at tablet width. */
.sf-block__row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border-bottom: 1px solid var(--sf-hair); padding: 11px 14px;
  text-align: start; font-size: 14.2px; text-decoration: none; color: inherit;
}
.sf-block__row:last-child { border-bottom: 0; }
.sf-block__row:hover { background: var(--sf-bg); }
.sf-block__row .sq { width: 9px; height: 9px; border: var(--sf-bw) solid var(--sf-line); flex: none; }
/* The row is a flex container, so the link inside it was a box the height of
   its own text — 23px — while the row around it, which is not clickable, was
   45px. The link now fills the row's height and the remaining width. */
.sf-block__row a { display: flex; align-items: center; flex: 1 1 auto; align-self: stretch; margin-block: -11px; padding-block: 11px; }
.sf-block__row:hover .sq { background: var(--sf-acc); }

/* =========================================================================
   8. TOOL CATALOGUE (serpify/tool-catalogue)
   ========================================================================= */
.sf-deck {
  position: sticky; top: var(--sf-header-h); z-index: 40;
  background: var(--sf-bg); border-block: var(--sf-bw) solid var(--sf-line);
  padding: 12px 0;
}
.sf-deck__in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sf-find {
  display: flex; align-items: center; flex: 1; min-width: 240px;
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
}
.sf-find__pr { font-family: var(--sf-fmono); color: var(--sf-acc-tx); font-weight: 700; padding-inline-start: 13px; }
.sf-find input {
  flex: 1; border: 0; background: none; font-family: var(--sf-fmono);
  font-size: 14px; padding: 11px 12px; min-width: 0; color: var(--sf-ink);
}
/*
 * Catalogue pass, 14 September 2026: this was `outline: none` and nothing
 * else. The input is borderless by design — the frame belongs to .sf-find
 * around it — so removing the outline left a keyboard user with no way to
 * tell the field was focused at all. WCAG 2.4.7, on the one control the
 * catalogue is built around.
 *
 * The outline moves to the wrapper, which is the thing that reads as the
 * field. Same ink, same offset as the global :focus-visible rule, so it
 * looks like every other focused control on the site.
 */
.sf-find input::placeholder { color: var(--sf-ink3-tx); opacity: 1; }
.sf-find input:focus { outline: none; }
.sf-find:focus-within { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-find__clr, .sf-find__kbd {
  font-family: var(--sf-fmono); font-size: 11px; color: var(--sf-ink3-tx);
  background: none; border: 0; cursor: pointer; padding: 0 12px;
}
/* "clear" was a 13px-tall button: the text height, centred in a 41px row.
   Stretching it to the row makes the whole height clickable. */
.sf-find__clr { align-self: stretch; }
.sf-find__kbd { border-inline-start: var(--sf-bw) solid var(--sf-line); padding: 6px 11px; margin-inline-end: 6px; }
.sf-count { font-family: var(--sf-fmono); font-size: 12px; color: var(--sf-ink2); }
.sf-view { display: flex; border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); }
.sf-view button {
  border: 0; background: none; font-family: var(--sf-fmono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .08em; padding: 8px 13px; cursor: pointer; color: inherit;
}
.sf-view button + button { border-inline-start: var(--sf-bw) solid var(--sf-line); }
.sf-view button.is-on { background: var(--sf-ink); color: #fff; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.sf-chip {
  font-family: var(--sf-fmono); font-size: 11.5px; background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line); padding: 6px 12px; cursor: pointer; color: inherit;
}
.sf-chip:hover { background: var(--sf-yel); }
.sf-chip.is-on { background: var(--sf-ink); color: #fff; }

.sf-group { margin-top: 44px; }
.sf-group:first-of-type { margin-top: 30px; }
.sf-ghead {
  display: flex; align-items: center; gap: 14px; overflow: hidden;
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); box-shadow: var(--sf-sh);
}
.sf-ghead__swatch { width: 52px; align-self: stretch; border-inline-end: var(--sf-bw) solid var(--sf-line); flex: none; }
.sf-ghead__txt { padding: 13px 4px 13px 0; flex: 1; min-width: 0; }
.sf-ghead__h {
  font-family: var(--sf-fdisp); font-weight: 800; font-size: 19px; margin: 0;
  text-transform: uppercase; letter-spacing: -.025em; line-height: 1.15;
}
.sf-ghead p { margin: 3px 0 0; color: var(--sf-ink2); font-size: 13.5px; }
.sf-ghead__qty {
  font-family: var(--sf-fmono); font-size: 11.5px; padding: 6px 12px;
  border: var(--sf-bw) solid var(--sf-line); margin-inline-end: 14px;
  white-space: nowrap; background: var(--sf-bg);
}
/* minmax(0, 1fr) rather than 1fr throughout: a bare 1fr track can never be
   narrower than its content's min-content width, so one long word — or, in
   list view, one nowrap description — widened the whole grid and with it the
   page. Zero minimum lets the track shrink and the content wrap or clip. */
.sf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sf-tool {
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
  padding: 15px 16px 14px; padding-inline-start: 24px; display: flex; flex-direction: column;
  transition: transform .12s, box-shadow .12s; position: relative; text-decoration: none; color: inherit;
}
.sf-tool:hover { transform: translate(-3px, -3px); box-shadow: var(--sf-sh-lg); }
.sf-tool::before {
  content: ""; position: absolute; inset-inline-start: -2px; top: -2px; bottom: -2px;
  width: 6px; background: var(--sf-tc, var(--sf-yel)); border: var(--sf-bw) solid var(--sf-line);
}
.sf-tool__top { display: flex; align-items: center; gap: 9px; }
.sf-tool__code {
  font-family: var(--sf-fmono); font-size: 10.5px; letter-spacing: .08em;
  background: var(--sf-bg); border: var(--sf-bw) solid var(--sf-line); padding: 2px 7px;
}
.sf-tool__free {
  margin-inline-start: auto; font-family: var(--sf-fmono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; background: var(--sf-acc2);
  color: #04281C; border: var(--sf-bw) solid var(--sf-line); padding: 2px 7px; font-weight: 700;
}
.sf-tool__h {
  font-family: var(--sf-fdisp); font-weight: 700; font-size: 16.5px; margin: 11px 0 6px;
  text-transform: uppercase; letter-spacing: -.022em; line-height: 1.15;
}
.sf-tool p { margin: 0; color: var(--sf-ink2); font-size: 13.8px; min-height: 42px; }
.sf-tool__foot {
  display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 11px;
  border-top: 1px solid var(--sf-hair); font-family: var(--sf-fmono); font-size: 11px; color: var(--sf-ink3-tx);
}
.sf-tool__go {
  margin-inline-start: auto; display: flex; align-items: center; gap: 6px;
  background: var(--sf-ink); color: #fff; border: var(--sf-bw) solid var(--sf-line);
  padding: 5px 11px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
.sf-tool:hover .sf-tool__go { background: var(--sf-acc-tx); }
/* list view */
.sf-catalogue.is-list .sf-grid {
  grid-template-columns: minmax(0, 1fr); gap: 0; border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); background: var(--sf-card);
}
.sf-catalogue.is-list .sf-tool {
  box-shadow: none; border: 0; border-bottom: 1px solid var(--sf-hair);
  padding: 11px 16px 11px 24px; flex-direction: row; align-items: center; gap: 14px;
}
.sf-catalogue.is-list .sf-tool:last-child { border-bottom: 0; }
.sf-catalogue.is-list .sf-tool:hover { transform: none; background: var(--sf-bg); }
.sf-catalogue.is-list .sf-tool::before { inset-inline-start: 0; top: 0; bottom: 0; border: 0; border-inline-end: var(--sf-bw) solid var(--sf-line); }
.sf-catalogue.is-list .sf-tool__top { order: 1; flex: none; }
.sf-catalogue.is-list .sf-tool__free { display: none; }
.sf-catalogue.is-list .sf-tool__h { order: 2; margin: 0; font-size: 15px; flex: none; width: 230px; }
/* min-width: 0 is what lets the ellipsis happen. A flex item defaults to
   min-width:auto — its own content width — so a nowrap description could
   never shrink, and every list row was as wide as its description: 800px
   rows on a 390px screen, and a page that scrolled sideways at tablet too. */
.sf-catalogue.is-list .sf-tool p { order: 3; flex: 1; min-width: 0; min-height: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-catalogue.is-list .sf-tool__foot { order: 4; margin: 0; padding: 0; border: 0; flex: none; }
.sf-empty {
  display: none; text-align: center; background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
  padding: 52px 24px; margin-top: 26px;
}
.sf-empty.is-shown { display: block; }
.sf-hidden { display: none !important; }

/* Category heading links to the category's own archive. Inherits the
   display face; the underline only appears on hover so the head keeps its
   solid block look at rest. */
.sf-ghead__h a { color: inherit; text-decoration: none; }
.sf-ghead__h a:hover { color: var(--sf-acc-tx); text-decoration: underline; text-underline-offset: 3px; }

/* A short row of internal links inside an article. Square markers in the
   console idiom, wrapping to a column on narrow screens. */
.sf-inlinelinks {
  list-style: none; padding-inline-start: 0; margin: 18px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--sf-fmono); font-size: 13px;
}
.sf-inlinelinks li { position: relative; padding-inline-start: 16px; margin: 0; }
.sf-inlinelinks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .5em;
  width: 7px; height: 7px; background: var(--sf-yel);
  border: 1.5px solid var(--sf-line);
}
.sf-inlinelinks a { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 3px; }
.sf-inlinelinks a:hover { color: var(--sf-acc-tx); }

/* Editors-only note on a tool card with nothing written about it. */
.sf-tool__todo {
  font-family: var(--sf-fmono); font-size: 11.5px; color: var(--sf-ink3-tx);
  border: 1px dashed var(--sf-ink3-tx); padding: 8px 10px;
}

/* The catalogue with nothing in it: same panel as the filter empty state. */
.sf-empty--bare { text-align: start; padding: 44px 32px; margin-top: 0; }
.sf-empty--bare h2 {
  font-family: var(--sf-fdisp); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.025em; margin: 10px 0 12px;
}
.sf-empty--bare p { max-width: 62ch; margin: 0 0 14px; color: var(--sf-ink2); }
.sf-empty__tag { color: var(--sf-acc-tx); font-weight: 700; margin: 0; }
.sf-empty__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/*
 * No-JavaScript fallbacks. The filter field, the category chips and the
 * card/list switch are all driven by assets/js/serpify.js and do nothing
 * without it — a search box that ignores typing is worse than no search box,
 * because it costs the visitor an attempt before they learn that. They are
 * hidden unless the document has been marked as scripted, the same .sf-js
 * flag the navigation already uses.
 *
 * Nothing is lost: the tools are all rendered server-side, grouped under
 * headings that link to the real category archives, so browsing and filtering
 * by category both still work.
 */
html:not(.sf-js) .sf-find,
html:not(.sf-js) .sf-chips,
html:not(.sf-js) .sf-view,
html:not(.sf-js) .sf-find__kbd { display: none; }
html:not(.sf-js) .sf-deck { position: static; }

/* =========================================================================
   9. CLAIM / RECEIPT (serpify/receipt + why pattern)
   ========================================================================= */
.sf-claim {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh); background: var(--sf-card);
}
.sf-claim__said { padding: 26px 28px; padding-inline-start: 36px; position: relative; }
.sf-claim__said::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 12px; background: var(--sf-sp, var(--sf-yel)); border-inline-end: var(--sf-bw) solid var(--sf-line);
}
.sf-claim__no { font-family: var(--sf-fmono); font-size: 11px; letter-spacing: .14em; color: var(--sf-acc-tx); font-weight: 700; }
.sf-claim__said h3 {
  font-family: var(--sf-fdisp); font-weight: 800; font-size: clamp(19px, 2.2vw, 25px);
  text-transform: uppercase; letter-spacing: -.03em; line-height: 1.1; margin: 10px 0; max-width: 20ch;
}
.sf-claim__said p { margin: 0; color: var(--sf-ink2); font-size: 14.6px; max-width: 46ch; }
.sf-receipt { border-inline-start: var(--sf-bw) solid var(--sf-line); background: var(--sf-bg); display: flex; flex-direction: column; }
.sf-receipt__head {
  display: flex; align-items: center; gap: 8px; font-family: var(--sf-fmono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: var(--sf-bw) solid var(--sf-line); padding: 9px 16px; background: var(--sf-card);
}
.sf-receipt__head .sf-dot { width: 8px; height: 8px; background: var(--sf-acc2); border: 1px solid var(--sf-line); }
.sf-receipt__body { padding: 14px 16px 16px; display: grid; gap: 9px; }
.sf-rline {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.4px; border-bottom: 1px dashed #C9D3DC; padding-bottom: 7px;
}
.sf-rline .k { color: var(--sf-ink2); }
.sf-rline .v { margin-inline-start: auto; font-family: var(--sf-fmono); font-weight: 700; }
.sf-rbar { display: grid; gap: 7px; font-family: var(--sf-fmono); font-size: 11px; margin-top: 4px; }
.sf-rbar .row { display: flex; align-items: center; gap: 9px; }
.sf-rbar .nm { width: 96px; flex: none; color: var(--sf-ink2); }
.sf-rbar .tr { flex: 1; height: 11px; border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); }
.sf-rbar .tr i { display: block; height: 100%; width: 0; background: var(--sf-ink); transition: width .8s cubic-bezier(.2,.8,.3,1); }
.sf-rbar .tr i.us { background: var(--sf-acc2); }
.sf-rbar .vl { width: 56px; flex: none; text-align: end; }

/* =========================================================================
   10. PLAN RACK (serpify/plan-rack + serpify/plan)
   ========================================================================= */
.sf-rack { border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh-lg); background: var(--sf-card); }
.sf-rack__top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--sf-ink); color: #EAF0F5; padding: 9px 14px;
  font-family: var(--sf-fmono); font-size: 11.5px; letter-spacing: .06em;
}
.sf-rack__switch { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; }
.sf-sw { display: flex; border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); }
.sf-sw button {
  border: 0; background: none; font-family: var(--sf-fmono); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .08em; padding: 7px 14px; cursor: pointer; color: var(--sf-ink);
}
.sf-sw button + button { border-inline-start: var(--sf-bw) solid var(--sf-line); }
.sf-sw button.is-on { background: var(--sf-yel); }
.sf-rack__save { font-family: var(--sf-fmono); font-size: 11px; color: var(--sf-yel); }
/* Column count comes from how many Plan blocks actually rendered, not a
   hard-coded four. See blocks/plan-rack/render.php. */
.sf-plans { display: grid; grid-template-columns: repeat(var(--sf-plancols, 4), minmax(0, 1fr)); }
.sf-plan { padding: 24px 20px; border-inline-end: var(--sf-bw) solid var(--sf-line); display: flex; flex-direction: column; }
.sf-plan:last-child { border-inline-end: 0; }
.sf-plan.is-pick { background: var(--sf-bg); }
.sf-plan__tag {
  font-family: var(--sf-fmono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  border: var(--sf-bw) solid var(--sf-line); padding: 3px 8px; align-self: flex-start; background: var(--sf-card);
}
.sf-plan.is-pick .sf-plan__tag { background: var(--sf-acc-tx); color: #fff; }
.sf-plan__name {
  font-family: var(--sf-fdisp); font-weight: 800; font-size: 24px; text-transform: uppercase;
  letter-spacing: -.03em; margin: 12px 0 6px;
}
.sf-plan__for { color: var(--sf-ink2); font-size: 13.6px; margin: 0 0 16px; min-height: 40px; }
.sf-plan__pricebox { border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); padding: 14px; margin-bottom: 14px; }
.sf-plan__amt { font-family: var(--sf-fdisp); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.04em; display: flex; align-items: baseline; gap: 2px; }
.sf-plan__cur { font-size: 20px; }
.sf-plan__per { font-family: var(--sf-fmono); font-size: 12px; font-weight: 400; color: var(--sf-ink2); margin-inline-start: 6px; }
.sf-plan__bill { font-family: var(--sf-fmono); font-size: 11px; color: var(--sf-ink2); margin: 8px 0 0; }
.sf-plan__btn {
  display: block; text-align: center; background: var(--sf-ink); color: #fff;
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
  font-family: var(--sf-fdisp); font-weight: 800; text-transform: uppercase;
  padding: 12px; font-size: 14px; text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.sf-plan__btn:hover { background: var(--sf-acc-tx); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sf-line); }
.sf-plan.is-pick .sf-plan__btn { background: var(--sf-acc-tx); }
.sf-plan__list, .sf-plan .wp-block-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13.8px; }
.sf-plan__list li, .sf-plan .wp-block-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--sf-ink2); }
.sf-plan__list li::before, .sf-plan .wp-block-list li::before {
  content: ""; width: 9px; height: 9px; margin-top: 6px; flex: none;
  background: var(--sf-acc2); border: var(--sf-bw) solid var(--sf-line);
}
.sf-plan__list li.is-off::before, .sf-plan .wp-block-list li.is-off::before { background: transparent; }
.sf-plan__list li.is-off, .sf-plan .wp-block-list li.is-off { color: var(--sf-ink3-tx); }

/* =========================================================================
   11. ARTICLE TABS (serpify/article-tabs) + long-form content
   ========================================================================= */
.sf-tabs {
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  box-shadow: var(--sf-sh); margin-block: 26px;
}
.sf-tabs.is-sticky { position: sticky; top: var(--sf-header-h); z-index: 35; }
.sf-tabs__head {
  display: flex; align-items: center; gap: 8px;
  background: var(--sf-ink); color: #EAF0F5; padding: 7px 13px;
  font-family: var(--sf-fmono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.sf-tabs__strip {
  display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain;
}
/* Six sections show three tabs; nothing said there were more. The old
   `scrollbar-width: thin` made Chromium ignore the styled scrollbar below and
   draw an overlay one that is invisible until touched. A slim, always-visible
   track under the strip is the cue, in the same ink as the rest of the bar.
   Firefox has no ::-webkit-scrollbar and takes the standard properties. */
.sf-tabs__strip::-webkit-scrollbar { height: 6px; }
.sf-tabs__strip::-webkit-scrollbar-track { background: var(--sf-bg); border-top: 1px solid var(--sf-hair); }
.sf-tabs__strip::-webkit-scrollbar-thumb { background: var(--sf-ink3); }
@supports not selector(::-webkit-scrollbar) {
  .sf-tabs__strip { scrollbar-width: thin; scrollbar-color: var(--sf-ink3) var(--sf-bg); }
}
.sf-tab {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; font-family: var(--sf-fmono); font-size: 12.5px;
  border-inline-end: 1px solid var(--sf-hair); text-decoration: none; color: var(--sf-ink2);
  white-space: nowrap; background: none; border-block: 0; border-inline-start: 0; cursor: pointer;
}
.sf-tab .n { font-size: 10px; color: var(--sf-ink3-tx); }
/* The strip scrolls sideways, which also clips vertical overflow, so a ring
   drawn outside the tab lost its top and bottom edges. */
.sf-tab:focus-visible { outline-offset: -3px; }
.sf-tab:hover { background: var(--sf-yel); color: var(--sf-ink); }
.sf-tab.is-active { background: var(--sf-ink); color: #fff; }
.sf-tab.is-active .n { color: var(--sf-yel); }
/* select fallback on very small screens */
.sf-tabs__select { display: none; width: 100%; border: 0; border-top: var(--sf-bw) solid var(--sf-line); padding: 12px; font-family: var(--sf-fmono); font-size: 13px; background: var(--sf-card); }

.sf-article > * { scroll-margin-top: calc(var(--sf-header-h) + 70px); }
.sf-article h2 {
  margin-top: 2.2em; padding-top: .4em; border-top: var(--sf-bw) solid var(--sf-line);
}
.sf-article h2:first-child { margin-top: 0; border-top: 0; }
.sf-anchor {
  font-family: var(--sf-fmono); font-size: .5em; color: var(--sf-ink3-tx);
  text-decoration: none; margin-inline-start: .5em; opacity: 0; transition: opacity .15s;
  padding: .2em .4em;
}
.sf-anchor:focus-visible { opacity: 1; }
.sf-article h2:hover .sf-anchor, .sf-article h3:hover .sf-anchor { opacity: 1; }
.sf-article blockquote {
  background: var(--sf-card);
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
  /* Declared after the shorthand, which used to reset it to ink: the quote
     lost the yellow edge that the callout, the answer box and the disclosure
     all carry. Same 10px edge as those three now. */
  border-inline-start-width: 10px; border-inline-start-color: var(--sf-yel);
  padding: 18px 22px; margin-inline: 0;
}
.sf-article blockquote > :first-child { margin-top: 0; }
.sf-article blockquote > :last-child { margin-bottom: 0; }
/* A URL or token with no break opportunity used to widen the whole page at
   desktop and tablet; the wrap rule only existed below 720px. `anywhere`
   rather than `break-word` because several of these live in flex rows (the
   checklist items) where only `anywhere` shrinks the min-content size. */
.sf-article :where(p, li, dt, dd, figcaption, blockquote, code),
.sf-lede, .sf-hint, .sf-fld__hint, .sf-contact__alt, .sf-fbot, .sf-tool p, .sf-tool__h, .sf-ghead__h,
.sf-plan__for, .sf-help__tool, .sf-related__text, .sf-rline { overflow-wrap: anywhere; }
.sf-article table { border-collapse: collapse; width: 100%; }
.sf-article th, .sf-article td { border: 1px solid var(--sf-line); padding: 10px 12px; text-align: start; }
.sf-article th { background: var(--sf-yel); font-family: var(--sf-fmono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.sf-article code { font-family: var(--sf-fmono); background: var(--sf-bg); border: 1px solid var(--sf-hair); padding: 1px 5px; }
.sf-article pre { background: var(--sf-ink); color: #EAF0F5; border: var(--sf-bw) solid var(--sf-line); padding: 18px; overflow: auto; }
/* The inline-code rule above gave the <code> inside a <pre> its own pale
   background and 1px frame, so a code block was a light strip of light text
   on an ink panel: unreadable. Inside a block the code element is plain. */
.sf-article pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; overflow-wrap: normal; }
.sf-article img { border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh); }

.sf-reading {
  position: fixed; top: 0; inset-inline: 0; height: 4px; z-index: 90;
  background: var(--sf-acc); width: 0; transition: width .1s linear;
}

/* FAQ built from core/details */
.sf-faq .wp-block-details {
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  box-shadow: var(--sf-sh); padding: 0; margin-bottom: 12px;
}
.sf-faq .wp-block-details summary {
  font-family: var(--sf-fdisp); font-weight: 700; font-size: 16.5px;
  padding: 15px 18px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
}
.sf-faq .wp-block-details summary::-webkit-details-marker { display: none; }
/* The alt-text syntax on generated content: the glyph is drawn, but the string
   exposed to a screen reader is empty. <details> already announces its own
   expanded state, so reading "plus" after every question is noise. */
.sf-faq .wp-block-details summary::after {
  content: "+" / ""; margin-inline-start: auto; font-family: var(--sf-fmono); font-size: 20px;
}
.sf-faq .wp-block-details[open] summary { background: var(--sf-yel); border-bottom: var(--sf-bw) solid var(--sf-line); }
.sf-faq .wp-block-details[open] summary::after { content: "\2212" / ""; }
.sf-faq .wp-block-details > *:not(summary) { padding: 16px 18px; margin: 0; color: var(--sf-ink2); }

/* =========================================================================
   12. CTA BAND / POST CARDS / FOOTER / MISC
   ========================================================================= */
.sf-ctaband {
  background: var(--sf-acc-tx); color: #fff; border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh-lg); padding: clamp(32px, 5vw, 52px) 38px; text-align: center;
}
.sf-ctaband h2, .sf-ctaband .wp-block-heading { color: #fff; margin-inline: auto; max-width: 18ch; }
.sf-ctaband p { color: #FFFFFF; margin-inline: auto; max-width: 50ch; }
.sf-ctaband--ink { background: var(--sf-ink); }
.sf-ctaband--ink p { color: #A9BACA; }

.sf-postcard {
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); height: 100%; transition: transform .12s, box-shadow .12s;
}
.sf-postcard:hover { transform: translate(-3px, -3px); box-shadow: var(--sf-sh-lg); }
.sf-postcard .wp-block-post-title a { text-decoration: none; }
.sf-postcard .wp-block-post-featured-image img { border-bottom: var(--sf-bw) solid var(--sf-line); }

.sf-footer { border-top: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); }
.sf-footer h2, .sf-footer h4, .sf-footer .wp-block-heading {
  font-family: var(--sf-fmono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.sf-footer .wp-block-navigation { font-size: 14px; }
.sf-footer .sf-footer__list { list-style: none; margin: 0; padding: 0; font-size: 14px; display: grid; gap: 2px; }
.sf-footer .sf-footer__list a { display: inline-block; padding: 4px 0; }
.sf-editor-note {
  display: block;
  font-family: var(--sf-fmono, monospace);
  font-size: 12.5px;
  color: var(--sf-ink3-tx, #5E6B78);
  border: 1px dashed var(--sf-ink3, #7C8A99);
  padding: 12px 14px;
  margin: 0;
}
.sf-footer a:hover { color: var(--sf-acc-tx); text-decoration: underline; }
.sf-fbot {
  border-top: var(--sf-bw) solid var(--sf-line); font-family: var(--sf-fmono);
  font-size: 12px; color: var(--sf-ink2);
}
/* The legal row holds every published policy now, not just privacy, so it */
/* needs to wrap on narrow screens instead of pushing the bar out.         */
.sf-fbot .sf-flegal { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
/* Flex turns each link into a box of its own text height — 19px. Padding
   brings them to the 24px minimum without changing how the row reads. */
.sf-fbot .sf-flegal a { padding: 5px 0; }

.sf-toast {
  position: fixed; inset-inline: 0; bottom: 26px; margin: auto; width: max-content; max-width: 90vw;
  background: var(--sf-ink); color: #fff; border: var(--sf-bw) solid var(--sf-line);
  box-shadow: var(--sf-sh); padding: 13px 20px; font-family: var(--sf-fmono); font-size: 13px;
  z-index: 95; opacity: 0; transform: translateY(14px); transition: .2s; pointer-events: none;
}
.sf-toast.is-shown { opacity: 1; transform: none; }

/* Pagination + comments keep the console voice */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next, .wp-block-query-pagination-previous {
  font-family: var(--sf-fmono); font-size: 12.5px; border: var(--sf-bw) solid var(--sf-line);
  background: var(--sf-card); padding: 7px 12px; text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current { background: var(--sf-ink); color: #fff; }
.wp-block-comment-template li { border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); padding: 18px; margin-bottom: 14px; box-shadow: var(--sf-sh); }
.wp-block-post-comments-form input, .wp-block-post-comments-form textarea {
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-bg); padding: 11px 12px; width: 100%;
}
/* The search block on the 404 and search pages uses core's "button inside"
   layout, which wraps input and button in .wp-block-search__inside-wrapper and
   removes the input's own border. Only the input was styled, so the form drew
   core's thin grey frame and a default button: the one generic control on the
   site. The frame, the shadow and the button now match the command bar. */
.wp-block-search .wp-block-search__inside-wrapper {
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  box-shadow: var(--sf-sh); border-radius: var(--sf-radius); padding: 4px;
}
.wp-block-search .wp-block-search__input {
  border: 0; background: none; padding: 9px 12px; min-width: 0;
  font-family: var(--sf-fmono); font-size: 14px; color: var(--sf-ink);
}
.wp-block-search .wp-block-search__input::placeholder { color: var(--sf-ink3-tx); opacity: 1; }
.wp-block-search .wp-block-search__input:focus { outline: none; }
.wp-block-search .wp-block-search__inside-wrapper:focus-within { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.wp-block-search .wp-block-search__button {
  margin: 0; border: var(--sf-bw) solid var(--sf-line); background: var(--sf-ink); color: #fff;
  font-family: var(--sf-fdisp); font-weight: 800; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .03em; padding: 8px 14px; cursor: pointer; border-radius: var(--sf-radius);
}
.wp-block-search .wp-block-search__button:hover { background: var(--sf-acc-tx); }

/* =========================================================================
   12b. SEARCH RESULTS + 404 (serpify/search-summary, result-meta,
        not-found-help)
   ========================================================================= */
.sf-searchhead__h { margin: 0 0 6px; overflow-wrap: anywhere; }
.sf-searchhead__n {
  font-family: var(--sf-fmono); font-size: 12.5px; color: var(--sf-ink2);
  margin: 0 0 18px;
}

/* One result. The meta line sits above the title so the eye picks up the kind
   of thing before the name of it. */
.sf-result { display: block; }
.sf-result .wp-block-post-title { margin: 0 0 6px; overflow-wrap: anywhere; }
.sf-result .wp-block-post-title a { text-decoration: none; }
.sf-result .wp-block-post-title a:hover { text-decoration: underline; }
.sf-result .wp-block-post-excerpt__excerpt { margin: 0; color: var(--sf-ink2); }
.sf-result .wp-block-post-excerpt__more-text { display: none; }

.sf-rmeta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 0 0 9px; font-family: var(--sf-fmono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
}
.sf-rmeta__type {
  background: var(--sf-ink); color: #fff; padding: 3px 7px;
  border: 1px solid var(--sf-line);
}
.sf-rmeta__cat {
  background: var(--sf-yel); color: var(--sf-ink); padding: 3px 7px;
  border: 1px solid var(--sf-line); text-decoration: none;
}
a.sf-rmeta__cat:hover { background: var(--sf-sky); }
.sf-rmeta__date { color: var(--sf-ink3-tx); letter-spacing: .1em; }

/* Pagination: core numbers, Serpify furniture. */
.sf-pager { gap: 8px; font-family: var(--sf-fmono); font-size: 13px; }
.sf-pager .wp-block-query-pagination-numbers,
.sf-pager > a,
.sf-pager > .wp-block-query-pagination-previous,
.sf-pager > .wp-block-query-pagination-next { display: flex; gap: 8px; align-items: center; }
.sf-pager a,
.sf-pager .page-numbers {
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  padding: 7px 12px; text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
}
.sf-pager a:hover { background: var(--sf-yel); transform: translate(-2px, -2px); box-shadow: var(--sf-sh); }
.sf-pager .page-numbers.current { background: var(--sf-ink); color: #fff; }
.sf-pager .page-numbers.dots { border: 0; background: none; padding: 7px 2px; }

/* Ways out of a dead end. */
.sf-help { margin-top: 26px; }
.sf-help__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.sf-help__btn {
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  box-shadow: var(--sf-sh); padding: 12px 18px; text-decoration: none;
  color: inherit; font-family: var(--sf-fdisp); font-weight: 800; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: .02em;
  transition: transform .12s, box-shadow .12s;
}
.sf-help__btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--sf-line); }
.sf-help__btn--primary { background: var(--sf-ink); color: #fff; }
.sf-help__btn--primary:hover { background: var(--sf-acc-tx); }

.sf-help__sec { margin-bottom: 28px; }
.sf-help__h {
  font-family: var(--sf-fmono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sf-ink2); margin: 0 0 11px;
  padding-bottom: 8px; border-bottom: var(--sf-bw) solid var(--sf-line);
}
.sf-help__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-help__chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  padding: 7px 11px; text-decoration: none; color: inherit; font-size: 13.5px;
}
.sf-help__chip:hover { background: var(--sf-yel); }
.sf-help__count {
  font-family: var(--sf-fmono); font-size: 10.5px; color: var(--sf-ink3-tx);
  direction: ltr; unicode-bidi: embed;
}
.sf-help__chip:hover .sf-help__count { color: var(--sf-ink2); }

.sf-help__tools {
  list-style: none; margin: 0; padding: 0;
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card);
  box-shadow: var(--sf-sh);
}
.sf-help__tools li + li { border-top: 1px solid var(--sf-hair); }
.sf-help__tool {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; text-decoration: none; color: inherit; font-size: 14.5px;
}
.sf-help__tool:hover { background: var(--sf-yel); }
.sf-help__go { font-family: var(--sf-fmono); color: var(--sf-ink3-tx); }
.sf-help__tool:hover .sf-help__go { color: var(--sf-ink); }

/* Inside the no-results card the helper is already framed, so it loses its
   own top margin and the button row tightens up. */
.sf-empty .sf-help, .sf-noresults .sf-help { margin-top: 20px; }
.sf-empty .sf-help__tools, .sf-noresults .sf-help__tools { box-shadow: none; }
/* The search page's "Nothing matched" panel (patterns/search-empty.php) used
   to carry the catalogue's .sf-empty class, and .sf-empty is display:none
   until the catalogue script shows it — so a search with no results printed
   the heading, the box and then nothing at all. It has its own class now. */
.sf-noresults { text-align: start; }
.sf-noresults > h2 { margin: 0 0 10px; }



/* -------------------------------------------------------------------------
   Header account controls and compact reference footer
   ------------------------------------------------------------------------- */
.sf-lang__label { font-family: var(--sf-fmono); font-size: 12.5px; white-space: nowrap; }
.sf-lang__current--with-label { display: none; }

.sf-auth-locked { overflow: hidden; }
.sf-auth {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: 24px;
}
.sf-auth[hidden] { display: none; }
.sf-auth__backdrop { position: absolute; inset: 0; background: rgba(16,20,24,.58); }
.sf-auth__dialog {
  position: relative; width: min(480px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--sf-card); border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh-lg);
  padding: 30px;
}
.sf-auth__close {
  position: absolute; inset-inline-end: 14px; top: 10px; width: 38px; height: 38px;
  border: var(--sf-bw) solid var(--sf-line); background: var(--sf-card); color: var(--sf-ink);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.sf-auth__close:hover { background: var(--sf-yel); transform: translate(-2px,-2px); box-shadow: var(--sf-sh); }
.sf-auth__eyebrow { margin: 0 0 7px; font-family: var(--sf-fmono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sf-ink3-tx); }
.sf-auth__dialog h2 { margin: 0 0 20px; font-family: var(--sf-fdisp); font-size: clamp(26px, 5vw, 36px); }
.sf-auth__tabs { display: flex; gap: 0; border-bottom: var(--sf-bw) solid var(--sf-line); margin-bottom: 22px; }
.sf-auth__tabs button {
  border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--sf-ink2);
  padding: 10px 16px; font-family: var(--sf-fmono); font-size: 12px; cursor: pointer;
}
.sf-auth__tabs button.is-active { color: var(--sf-ink); border-bottom-color: var(--sf-acc); }
.sf-auth__form { display: grid; gap: 15px; }
.sf-auth__form[hidden] { display: none; }
.sf-auth__form label { display: grid; gap: 7px; font-family: var(--sf-fmono); font-size: 11px; letter-spacing: .02em; }
.sf-auth__form input[type="email"],
.sf-auth__form input[type="password"],
.sf-auth__form input[type="text"] {
  width: 100%; min-height: 44px; border: var(--sf-bw) solid var(--sf-line); background: #fff; color: var(--sf-ink);
  padding: 10px 12px; font-family: var(--sf-fbody); font-size: 15px;
}
.sf-auth__form input:focus { outline: 3px solid var(--sf-yel); outline-offset: 1px; }
.sf-auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-auth__check { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 8px !important; font-family: var(--sf-fbody) !important; font-size: 13px !important; }
.sf-auth__check input { width: 18px; height: 18px; }
.sf-auth__form .sf-btn { min-height: 46px; justify-content: center; cursor: pointer; border: var(--sf-bw) solid var(--sf-line); }
.sf-auth__form .sf-btn:disabled { opacity: .6; cursor: wait; }
.sf-auth__status { min-height: 18px; margin: 0; font-size: 13px; color: var(--sf-ink2); }
.sf-auth__status.is-error { color: var(--sf-acc-tx); }
.sf-auth__status.is-success { color: #087A58; }

@media (max-width: 781px) {
  .sf-footer .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 15px) !important; }
}
@media (max-width: 520px) {
  .sf-auth { padding: 12px; }
  .sf-auth__dialog { padding: 24px 18px; max-height: calc(100vh - 24px); }
  .sf-auth__two { grid-template-columns: 1fr; }
  .sf-footer .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}

/* =========================================================================
   13. RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .sf-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-plan:nth-child(2n) { border-inline-end: 0; }
  .sf-plan { border-bottom: var(--sf-bw) solid var(--sf-line); }
  /* The rack draws its own bottom edge; a border on the last plan doubled it. */
  .sf-plan:last-child { border-bottom: 0; }
}
@media (max-width: 980px) {
  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-claim { grid-template-columns: minmax(0, 1fr); }
  .sf-receipt { border-inline-start: 0; border-top: var(--sf-bw) solid var(--sf-line); }
}
/* -------------------------------------------------------------------------
   Grids with a fixed column count. Core writes repeat(3, minmax(0, 1fr)) for a
   Query Loop or Group set to three columns and adds no media query of its own,
   so the guides index and the "More tools" grid were three 110px columns on a
   phone. Two columns on a tablet, one on a phone, like the catalogue.
   ------------------------------------------------------------------------- */
@media (max-width: 781px) {
  .wp-block-post-template.is-layout-grid,
  .wp-block-group.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .wp-block-post-template.is-layout-grid,
  .wp-block-group.is-layout-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Footer link columns: on a phone the Tools and Company lists stacked into one
   column of a dozen full-width rows, most of a screen of footer. Side by side
   they take half the height and still clear the 44px touch target. The brand
   and language columns keep the full width. */
@media (max-width: 781px) {
  .sf-footer .wp-block-columns > .wp-block-column:nth-child(2),
  .sf-footer .wp-block-columns > .wp-block-column:nth-child(3) { flex-basis: calc(50% - 15px) !important; }
}
@media (max-width: 720px) {
  .sf-cmd__row { flex-direction: column; }
  /* Filter, count, view switch and two rows of chips are 200px of sticky bar
     on a phone — a quarter of the screen pinned while the list scrolls under
     it. The deck scrolls with the page below this width. */
  .sf-deck { position: static; }
  .sf-pick__btn { min-width: 0; width: 100%; border-inline-end: 0; border-bottom: var(--sf-bw) solid var(--sf-line); }
  .sf-q { border-inline-end: 0; border-bottom: var(--sf-bw) solid var(--sf-line); }
  .sf-cmd__go { justify-content: center; padding: 16px; }
  .sf-wheel { inset-inline: 0; width: auto; }
  .sf-grid { grid-template-columns: minmax(0, 1fr); }
  .sf-plans { grid-template-columns: minmax(0, 1fr); }
  .sf-plan { border-inline-end: 0; }
  /* The switch and its note sit on their own row rather than squeezing in
     beside the window title. */
  .sf-rack__switch { margin-inline-start: 0; flex-basis: 100%; flex-wrap: wrap; gap: 8px 12px; }
  /* The header row is logo + nav toggle + switcher + button. A native name
     like "Nederlands" or "Português" pushes that past 360px, so the closed
     button falls back to flag + code. The full name is still in the panel. */
  .sf-header .sf-lang__current { display: none; }
  .sf-header .sf-lang__cc--btn { display: inline; }
  .sf-header .sf-lang__btn { padding: 8px 10px; gap: 6px; }
  /* A fixed 244px panel anchored to the right edge can sit off-screen on a
     narrow viewport. Let it size to the space it actually has. */
  .sf-lang__panel { width: min(244px, calc(100vw - 26px)); max-height: 70vh; }
  .sf-tabs__strip { display: none; }
  .sf-tabs__select { display: block; }
  .sf-catalogue.is-list .sf-tool { flex-wrap: wrap; }
  /* flex:none kept a long title at its full unwrapped width, so "Google
     Search Console Coverage Report Analyser" pushed the row past the screen.
     It can shrink and wrap now. */
  .sf-catalogue.is-list .sf-tool__h { width: auto; flex: 1 1 auto; min-width: 0; }
  /* One line of ellipsis is not a description on a phone; let it wrap under
     the title and give the footer its own row. */
  .sf-catalogue.is-list .sf-tool p { flex-basis: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
  .sf-catalogue.is-list .sf-tool__foot { flex-basis: 100%; }
  /* Two full-width buttons stack better than two half-width ones that wrap
     mid-word on a 320px screen. */
  .sf-help__actions { flex-direction: column; align-items: stretch; }
  .sf-help__btn { text-align: center; }
  /* Pagination is the one place a horizontal scroll is worse than a wrap. */
  .sf-pager { flex-wrap: wrap; row-gap: 8px; }
  .sf-pager a, .sf-pager .page-numbers { padding: 8px 11px; }
  .sf-result { padding: 15px 16px !important; }
  .sf-searchhead__h { font-size: clamp(24px, 7vw, 34px); }
}

/* -------------------------------------------------------------------------
   13a. TABLET — 768px and down
   The header is the pinch point here, not the content. Core switches the
   navigation to its overlay at 600px, which leaves 768px trying to lay out
   the logo, a full horizontal menu, the language switcher and the log-in
   button on one 720px line. Moving the overlay up to 900px is one rule and
   costs the desktop nothing.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sf-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .sf-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* -------------------------------------------------------------------------
   13b. PHONE — 720px and down, shared
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* iOS Safari zooms the page when a focused input is under 16px and never
     zooms back out. Every input in the theme was 13.5–15px. This is the fix;
     it is not a style preference. */
  .sf-q__input,
  .sf-find input,
  .sf-wheel__search input,
  .sf-tabs__select,
  .wp-block-search__input,
  .wp-block-post-comments-form input,
  .wp-block-post-comments-form textarea,
  input[type="text"], input[type="search"], input[type="email"],
  input[type="url"], input[type="number"], input[type="tel"], textarea, select {
    font-size: 16px;
  }


  /* Anchor links reveal on hover, which a touch screen does not have. */
  .sf-article h2 .sf-anchor,
  .sf-article h3 .sf-anchor { opacity: .5; }

  /* The command bar stacks at this width, so the tool name no longer needs
     to be clipped to fit beside the input. */
  .sf-pick__val { max-width: none; }
  /* A fixed 268px list plus the search field can outgrow a short phone once
     the on-screen keyboard is up. */
  .sf-wheel__list { height: auto; max-height: min(268px, 42vh); }

  .sf-ctaband { padding-inline: 22px; }
  .sf-step { padding: 22px; }
  .sf-cta--panel { padding: 20px; }
  .sf-plan { padding: 22px 18px; }
  /* Reserved space for a missing line is dead space once the plans stack. */
  .sf-plan__for { min-height: 0; }

  /* Long unbroken strings — a URL in a paragraph, a tool code, an API key in
     a code span — are a common source of a page that scrolls sideways. */
  .sf-article p, .sf-article li,
  .sf-tool__h, .sf-ghead__h, .sf-plan__name, .sf-help__tool-n {
    overflow-wrap: anywhere;
  }
  /* Table cells are deliberately left out: with anywhere-wrapping a four-column
     table shrank to the phone width by splitting "Volume" and "Commercial" in
     the middle, and because it then fitted, the figure never scrolled. Cells
     wrap at spaces only; a table that is genuinely too wide scrolls sideways in
     its figure, which is what the scroll box is for. */
  .sf-article :where(td, th) { overflow-wrap: normal; }
  .sf-article code { overflow-wrap: anywhere; }

  /* The select replaces the tab strip at this width, so it is a real control. */
  .sf-tabs__select { min-height: 46px; }

  /* A button label longer than the screen should wrap inside its own box
     rather than widen the page. Core sets word-break on the link; the shadow
     and border need to be inside the box too. */
  .sf-btn, .is-style-sf-btn .wp-block-button__link, .sf-plan__btn {
    max-width: 100%; text-align: center; justify-content: center;
  }
  .wp-block-buttons { row-gap: 10px; }
}

/* -------------------------------------------------------------------------
   Touch targets. Everything interactive gets to 44px of height, without
   changing any of the padding the desktop layout depends on. Applied on any
   coarse-pointer device as well as on narrow screens: a tablet at 1024px is
   still a thumb, and the width rule alone left it with desktop-sized rows.
   ------------------------------------------------------------------------- */
@media (max-width: 720px), (pointer: coarse) {
  .sf-chip,
  .sf-view button,
  .sf-sw button,
  .sf-tab,
  .sf-lang__btn,
  .sf-lang__item,
  .sf-help__btn,
  .sf-help__chip,
  .sf-help__tool,
  .sf-pager a,
  .sf-pager .page-numbers,
  .sf-find__clr,
  .sf-find__kbd,
  .sf-block__row,
  .sf-wheel__opt,
  .sf-mega__all,
  .sf-drawer__login,
  .sf-nav__burger,
  .sf-nav__cta,
  .sf-nav__login,
  .sf-social .wp-block-social-link,
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    min-height: 44px;
  }
  .sf-chip, .sf-view button, .sf-sw button, .sf-help__chip,
  .sf-pager a, .sf-pager .page-numbers, .sf-find__clr, .sf-find__kbd {
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* The social icon's link is what gets tapped, not the list item around it.
     Core sizes the link to its 24px icon; the list item's min-height did
     nothing for it. */
  .sf-social .wp-block-social-link a {
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }
  /* A category chip on a result card was a 22px tap target. */
  .sf-rmeta__cat { padding: 6px 9px; }
  a.sf-rmeta__cat { min-height: 30px; display: inline-flex; align-items: center; }
  /* The footer link rows: comfortable spacing between stacked links. */
  .sf-footer .sf-footer__list a { padding: 8px 0; }
  .sf-fbot .sf-flegal a { padding: 8px 2px; }
  .sf-fbot .sf-flegal { gap: 0 6px; }
}

/* Pointer-specific affordances. A keyboard-shortcut hint and a hover-reveal
   anchor are both meaningless on a touch screen, and the hint is taking up
   room the search field needs. */
@media (hover: none) {
  .sf-find__kbd { display: none; }
  .sf-article h2 .sf-anchor,
  .sf-article h3 .sf-anchor { opacity: .5; }
}

/* -------------------------------------------------------------------------
   13c. SMALL PHONE — 480px and down
   Covers 414, 390 and 375. The header is compacted to hold one line; the
   wrap rule underneath is the safety net for a site title longer than
   "Serpify".
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* 24px each side leaves 272px of content at 320px. 16px leaves 288px, and
     the hard borders still read as a frame.

     The variable is what WordPress sets on <body> for root-padding-aware
     alignments, so overriding it moves every constrained section at once.
     "html body" rather than "body" because the theme stylesheet is not
     guaranteed to load after the inline global styles. */
  html body {
    --wp--style--root--padding-left: 16px;
    --wp--style--root--padding-right: 16px;
  }

  /* Header: compact, then allowed to wrap rather than overflow. */
  .sf-header .alignwide { flex-wrap: wrap; row-gap: 9px; column-gap: 9px; }
  .sf-header .wp-block-site-title a,
  .sf-logo { font-size: 16px; }
  .sf-header .wp-block-site-logo img { width: 28px; height: auto; }
  .sf-header .is-style-sf-btn .wp-block-button__link {
    padding: 9px 12px; font-size: 12px; box-shadow: 3px 3px 0 var(--sf-line);
  }
  /* Flag and caret are decoration; the code is the information. */
  .sf-header .sf-lang__caret { display: none; }
  .sf-header .sf-lang__flag { display: inline-flex; }
  .sf-header .sf-lang__btn { padding: 8px 9px; gap: 5px; }

  /* The panel is 244px wide and hangs from its button's trailing edge. That
     button sits roughly two thirds across a 320px header, so the panel ran off
     the leading edge of the screen — a menu you cannot see the start of.
     Dropping .sf-lang out of the positioning context hands the panel to
     .sf-header, which is sticky and therefore positioned, so it can span the
     full width underneath the bar instead. */
  .sf-header .sf-lang { position: static; }
  .sf-header .sf-lang__panel {
    inset-inline: 16px;
    width: auto;
    top: 100%;
    margin-top: 2px;
  }

  /* Section furniture loses a little air so the content keeps its own. */
  .sf-ctaband { padding-inline: 16px; }
  .sf-ctaband h2, .sf-ctaband .wp-block-heading { max-width: none; }
  .sf-tool { padding: 14px 14px 13px; padding-inline-start: 20px; }
  .sf-ghead__swatch { width: 34px; }
  .sf-ghead__qty { margin-inline-end: 10px; padding: 5px 8px; }
  .sf-plan__amt { font-size: 34px; }
  .sf-step__n { font-size: 34px; }
  .sf-stat__n { font-size: 25px; }
  .sf-faq .wp-block-details summary { font-size: 15px; padding: 14px 15px; }
  .sf-faq .wp-block-details > *:not(summary) { padding: 14px 15px; }
}

/* -------------------------------------------------------------------------
   13d. 360px and down — the iPhone SE floor
   ------------------------------------------------------------------------- */
@media (max-width: 360px) {
  html body {
    --wp--style--root--padding-left: 13px;
    --wp--style--root--padding-right: 13px;
  }
  .sf-header .wp-block-site-title a, .sf-logo { font-size: 15px; }
  .sf-header .is-style-sf-btn .wp-block-button__link { padding: 9px 10px; font-size: 11.5px; }
  .sf-ghead__qty { display: none; }
  .sf-header .sf-lang__panel { inset-inline: 13px; }
  .sf-plan__amt { font-size: 30px; }
  .sf-ctaband { padding-inline: 13px; }
}

/* -------------------------------------------------------------------------
   13f. Stat strip
   Core stacks every column to full width below 782px. For cards of prose that
   is right; for four single numbers it produces a four-screen scroll past
   almost no content. Two by two reads as a strip at every phone size.
   ------------------------------------------------------------------------- */
@media (max-width: 781px) {
  /* Core already applies flex-wrap:wrap here, so only the basis needs
     overriding — and it needs !important because core's own rule uses it. */
  .wp-block-columns > .wp-block-column.sf-stat {
    flex-basis: calc(50% - 7px) !important;
    flex-grow: 0;
  }
}
@media (max-width: 360px) {
  .wp-block-columns > .wp-block-column.sf-stat { flex-basis: 100% !important; }
}

/* -------------------------------------------------------------------------
   13e. Wide tables inside articles
   Wrapped at runtime by serpify.js — see initTables(). A table with six
   columns cannot be made narrow, so it is given its own scroll box instead
   of being allowed to widen the page.
   ------------------------------------------------------------------------- */
.sf-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: var(--sf-bw) solid var(--sf-line); box-shadow: var(--sf-sh);
  margin-block: 22px; background: var(--sf-card);
}
.sf-tablewrap > table { margin: 0; border: 0; min-width: 480px; }
.sf-tablewrap > table th:first-child,
.sf-tablewrap > table td:first-child { border-inline-start: 0; }
.sf-tablewrap > table th:last-child,
.sf-tablewrap > table td:last-child { border-inline-end: 0; }
.sf-tablewrap > table tr:first-child th,
.sf-tablewrap > table tr:first-child td { border-top: 0; }
.sf-tablewrap__note {
  font-family: var(--sf-fmono); font-size: 11px; color: var(--sf-ink3-tx);
  margin: -14px 0 22px;
}
@media (min-width: 721px) { .sf-tablewrap__note { display: none; } }

/* Core's own table block already scrolls in a figure, but its wrapper has no
   frame of its own, so it inherits ours. */
.sf-article .wp-block-table { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   14. PRINT — client-ready reports
   ========================================================================= */
@media print {
  .sf-header, .sf-footer, .sf-deck, .sf-tabs, .sf-ctaband, .sf-reading, .sf-toast { display: none !important; }
  body { background: #fff; }
  .sf-hard, .sf-tool, .sf-claim { box-shadow: none; }
}