/* ScaleLounge public site, 2026-09 redesign ("sw-" = ScaleLounge web).

   ONE stylesheet for the redesigned public pages. It is self-contained on purpose: a redesigned
   page loads this file and NOT brand.css, compare.css or package.css, so nothing here can leak onto
   the pages that have not been redesigned yet, onto the portal, or onto katielendel.com (index.html
   loads only katie-brand.css). Every class is prefixed sw- so it cannot collide with brand.css's
   sl- components if the two ever meet during the migration.

   Type: DM Sans for headings (display 500, sections and cards 500 to 600), Instrument Sans for
   body, navigation, forms, buttons and dense UI. Both are the self-hosted OFL files already in
   /assets/fonts. No serif anywhere. The cursive in the hero PHOTOGRAPH is part of the image and is
   never set in HTML.

   Palette: warm ivory, charcoal dark bands, champagne accents (Katie chose Charcoal over the first
   draft's forest green on 2026-09-25). Contrast, measured (WCAG relative luminance):
     charcoal #15171A on ivory #FAF8F4 ......... 16.9:1
     text-2 #4A4F56 on ivory ................... 7.8:1
     text-3 #5D636A on ivory ................... 5.7:1
     accent-ink #505862 on ivory ............... 6.8:1   (eyebrows, links, focus ring on light)
     accent #6E7782 on ivory ................... 4.3:1   (icons, rules, borders only; never text)
     champagne #B79A63 on ivory ................ 2.5:1   NEVER text on light. Rules, marks, fills.
     charcoal on champagne (primary button) .... 6.7:1
     ivory #F6F3ED on dark #17191C ............. 15.9:1
     on-dark-2 #CDD1D6 on dark ................. 11.5:1  (secondary text on dark)
     champagne on dark ......................... 6.6:1   (eyebrows and focus ring on dark)
*/

/* ---- Fonts ----------------------------------------------------------------------------------- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/assets/fonts/dmsans-variable.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/assets/fonts/instrumentsans-variable.woff2') format('woff2'); }

/* ---- Tokens ---------------------------------------------------------------------------------- */
:root {
  --sw-ivory: #FAF8F4;
  --sw-warm: #F3EFE7;          /* warm alternate band */
  --sw-paper: #FFFFFF;         /* raised cards */
  --sw-tint: #E2E4E7;
  --sw-tint-soft: #F0F1F2;     /* quiet tinted band */
  --sw-dark: #17191C;
  --sw-dark-deep: #111315;
  --sw-dark-raise: #23262A;  /* cards on the dark band */
  --sw-charcoal: #15171A;
  --sw-accent: #6E7782;
  --sw-accent-ink: #505862;
  --sw-champagne: #B79A63;
  --sw-champagne-hi: #C6AB78;
  --sw-champagne-ink: #7E663A; /* the only champagne allowed as text on light (4.9:1) */

  --sw-text: #15171A;
  --sw-text-2: #4A4F56;
  --sw-text-3: #5D636A;
  --sw-line: #E4DFD6;
  --sw-line-2: #D5D9DE;
  --sw-on-dark: #F6F3ED;
  --sw-on-dark-2: #CDD1D6;
  --sw-on-dark-line: rgba(246, 243, 237, .16);

  --sw-font-display: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sw-font: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --sw-t-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);   /* 36px at 320, 60px at 1440 */
  --sw-t-h1: clamp(2.1rem, 1.4rem + 2.4vw, 3.45rem);
  --sw-t-h2: clamp(1.8rem, 1.3rem + 1.7vw, 2.85rem);
  --sw-t-h3: clamp(1.2rem, 1.1rem + .35vw, 1.4rem);
  --sw-t-lead: clamp(1.075rem, 1rem + .3vw, 1.25rem);
  --sw-t-body: 1.0625rem;
  --sw-t-sm: .9375rem;
  --sw-t-xs: .8125rem;
  --sw-t-eyebrow: .78rem;

  --sw-wrap: 1200px;
  --sw-gutter: clamp(16px, 4vw, 40px);
  --sw-section: clamp(64px, 8vw, 116px);
  --sw-radius: 14px;
  --sw-radius-sm: 10px;
  --sw-radius-lg: 20px;
  --sw-shadow: 0 1px 2px rgba(21, 23, 26, .04), 0 12px 32px -18px rgba(21, 23, 26, .22);
  --sw-shadow-lg: 0 2px 4px rgba(21, 23, 26, .04), 0 40px 80px -40px rgba(21, 23, 26, .38);
  --sw-ease: cubic-bezier(.22, .9, .3, 1);
  --sw-header-h: 72px;

  /* Legacy tokens. Their names (forest, teal, sage) are historical; the values are the Charcoal
     palette. The homepage keeps two lifted components that were built on brand.css (the
     portal tour and the contact / Executive modals). They read these names, so they are defined
     here with the redesign's values instead of loading brand.css and its global rules.
     charcoal-1 to -3 (the portal tour's dark panels and border) lean blue like the rest of the
     charcoal family; each is within 1% of its old contrast with ivory text (15.8, 15.2, 10.8:1). */
  --sl-ivory: #FAF8F4; --sl-ivory-0: #FFFFFF; --sl-ivory-1: #FCFAF7; --sl-ivory-2: #FAF8F4;
  --sl-ivory-3: #F3F3F2; --sl-ivory-4: #E2E4E7; --sl-ivory-5: #E2E4E7;
  --sl-stone: #D8D3C8; --sl-stone-1: #E7E8EA; --sl-stone-2: #D8DBDF; --sl-stone-3: #C6CAD0;
  --sl-charcoal: #15171A; --sl-charcoal-0: #15171A; --sl-charcoal-1: #1C1E21; --sl-charcoal-2: #1F2124; --sl-charcoal-3: #373A3E;
  --sl-forest: #17191C; --sl-forest-0: #17191C; --sl-forest-hover: #26292E; --sl-forest-active: #0E0F11; --sl-forest-tint: #E2E4E7;
  --sl-champagne: #B79A63; --sl-champagne-0: #B79A63; --sl-champagne-ink: #7E663A; --sl-champagne-soft: rgba(183, 154, 99, .14);
  --sl-teal: #6E7782; --sl-teal-ink: #505862; --sl-sage: #E2E4E7;
  --sl-font: var(--sw-font); --sl-font-display: var(--sw-font-display);
  --background-primary: #FAF8F4; --background-secondary: #E2E4E7; --surface-primary: #FFFFFF; --surface-elevated: #FFFFFF;
  --surface-sunken: #F3F3F2; --text-primary: #15171A; --text-secondary: #4A4F56; --text-tertiary: #5D636A;
  --text-on-dark: #F6F3ED; --text-accent: #505862; --border-subtle: #E7E8EA; --border-strong: #C6CAD0;
  --accent: #6E7782; --accent-soft: #E2E4E7; --focus-ring: #505862;
}

/* ---- Base ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--sw-header-h) + 12px); }
body {
  margin: 0; background: var(--sw-ivory); color: var(--sw-text);
  font-family: var(--sw-font); font-size: var(--sw-t-body); line-height: 1.65;
  font-synthesis-weight: none; font-synthesis-style: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sw-font-display); font-weight: 500; color: inherit; margin: 0;
  letter-spacing: -.022em; line-height: 1.1; text-wrap: balance;
}
h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: .9em; }
ul, ol { margin: 0; padding: 0; }
li { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--sw-accent-ink); outline-offset: 3px; border-radius: 4px; }
/* Champagne ring only where the backdrop is dark (6.6:1). The footer is ivory, so it keeps the
   accent-ink ring above (6.8:1); champagne there would be 2.5:1. */
.sw-dark :focus-visible, .sw-hero :focus-visible, .sw-close :focus-visible { outline-color: var(--sw-champagne); }
::selection { background: var(--sw-tint); color: var(--sw-charcoal); }
[hidden] { display: none !important; }

.sw-skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--sw-charcoal); color: var(--sw-on-dark);
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.sw-skip:focus { top: 12px; }
.sw-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Layout ---------------------------------------------------------------------------------- */
.sw-wrap { width: 100%; max-width: calc(var(--sw-wrap) + 2 * var(--sw-gutter)); margin-inline: auto; padding-inline: var(--sw-gutter); }
.sw-section { padding-block: var(--sw-section); position: relative; }
.sw-section.is-tight { padding-block: clamp(44px, 5vw, 72px); }
.sw-section.is-warm { background: var(--sw-warm); }
.sw-section.is-tint { background: var(--sw-tint-soft); }
.sw-section.is-paper { background: var(--sw-paper); }
.sw-dark, .sw-section.is-dark { background: var(--sw-dark); color: var(--sw-on-dark); }
.sw-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.sw-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sw-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .sw-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 859px) { .sw-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) { .sw-grid.cols-2, .sw-grid.cols-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Type helpers ---------------------------------------------------------------------------- */
.sw-eyebrow {
  display: block; margin: 0 0 16px; font-family: var(--sw-font); font-size: var(--sw-t-eyebrow);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--sw-accent-ink);
  text-wrap: balance;
}
.sw-dark .sw-eyebrow, .sw-hero .sw-eyebrow, .sw-close .sw-eyebrow { color: var(--sw-champagne); }
.sw-display { font-size: var(--sw-t-display); line-height: 1.04; letter-spacing: -.028em; font-weight: 500; }
.sw-h1 { font-size: var(--sw-t-h1); line-height: 1.07; letter-spacing: -.026em; font-weight: 500; }
.sw-h2 { font-size: var(--sw-t-h2); line-height: 1.1; letter-spacing: -.024em; font-weight: 500; }
.sw-h3 { font-size: var(--sw-t-h3); line-height: 1.25; letter-spacing: -.012em; font-weight: 600; }
.sw-lead { font-size: var(--sw-t-lead); line-height: 1.6; color: var(--sw-text-2); max-width: 60ch; }
.sw-dark .sw-lead, .sw-hero .sw-lead, .sw-close .sw-lead { color: var(--sw-on-dark-2); }
.sw-muted { color: var(--sw-text-3); }
.sw-small { font-size: var(--sw-t-sm); line-height: 1.6; }
.sw-fine { font-size: var(--sw-t-xs); line-height: 1.55; color: var(--sw-text-3); }
.sw-dark .sw-fine, .sw-hero .sw-fine, .sw-close .sw-fine { color: var(--sw-on-dark-2); }
.sw-accent { color: var(--sw-champagne); }  /* on dark only */

/* Section heads */
.sw-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.sw-head .sw-lead { margin-top: 18px; }
.sw-head.is-center { margin-inline: auto; text-align: center; }
.sw-head.is-center .sw-lead { margin-inline: auto; }
.sw-head.is-split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); align-items: end; }
.sw-head.is-split .sw-lead { margin-top: 0; }
@media (max-width: 859px) { .sw-head.is-split { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* ---- Buttons and links ----------------------------------------------------------------------- */
.sw-btn {
  --b-bg: var(--sw-dark); --b-fg: var(--sw-on-dark); --b-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  font-family: var(--sw-font); font-size: .96875rem; font-weight: 600; line-height: 1.2; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--sw-ease), border-color .18s var(--sw-ease), color .18s var(--sw-ease), transform .18s var(--sw-ease);
}
.sw-btn:hover { transform: translateY(-1px); }
.sw-btn .sw-arrow { transition: transform .18s var(--sw-ease); }
.sw-btn:hover .sw-arrow { transform: translateX(3px); }
.sw-btn.is-primary { --b-bg: var(--sw-champagne); --b-fg: var(--sw-charcoal); }
.sw-btn.is-primary:hover { --b-bg: var(--sw-champagne-hi); }
.sw-btn.is-dark:hover { --b-bg: #26292E; }
.sw-btn.is-ghost { --b-bg: transparent; --b-fg: var(--sw-text); --b-bd: var(--sw-line-2); }
.sw-btn.is-ghost:hover { --b-bd: var(--sw-accent-ink); }
.sw-btn.is-ghost-light { --b-bg: transparent; --b-fg: var(--sw-on-dark); --b-bd: rgba(246, 243, 237, .38); }
.sw-btn.is-ghost-light:hover { --b-bd: var(--sw-on-dark); }
.sw-btn.is-sm { min-height: 40px; padding: 9px 18px; font-size: .9rem; }
.sw-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.sw-arrow { width: 16px; height: 16px; flex: 0 0 auto; }
@media (max-width: 420px) { .sw-btn { white-space: normal; text-align: center; } }

.sw-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .96875rem; color: var(--sw-accent-ink);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; line-height: 1.3; text-wrap: balance;
}
.sw-link:hover .sw-arrow { transform: translateX(3px); }
.sw-link .sw-arrow { transition: transform .18s var(--sw-ease); }
.sw-dark .sw-link, .sw-hero .sw-link, .sw-close .sw-link { color: var(--sw-on-dark); border-bottom-color: rgba(246, 243, 237, .5); }
.sw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }

/* ---- Header ---------------------------------------------------------------------------------- */
.sw-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 244, .96); border-bottom: 1px solid var(--sw-line); }
@supports (backdrop-filter: blur(8px)) { .sw-header { background: rgba(250, 248, 244, .86); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); } }
.sw-header__in { display: flex; align-items: center; gap: 24px; height: var(--sw-header-h); }
.sw-logo { display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: 6px; }
/* One logo size everywhere (Katie 2026-09-25): the header and footer lockups match at every width,
   40px wide screens, 32px phones, 28px below 360. The partials' sizes attributes follow these. */
.sw-logo img { height: 40px; width: auto; }
.sw-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sw-nav__link, .sw-drop__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 8px; border: 0; background: none;
  font-family: var(--sw-font); font-size: .9375rem; font-weight: 500; color: var(--sw-text); text-decoration: none; cursor: pointer; line-height: 1.2;
}
.sw-nav__link:hover, .sw-drop__btn:hover, .sw-drop.is-open .sw-drop__btn { background: rgba(226, 228, 231, .55); }
.sw-nav__link[aria-current="page"] { color: var(--sw-accent-ink); box-shadow: inset 0 -2px 0 var(--sw-champagne); border-radius: 0; }
.sw-chev { width: 12px; height: 12px; transition: transform .18s var(--sw-ease); }
.sw-drop { position: relative; }
.sw-drop.is-open .sw-chev { transform: rotate(180deg); }
.sw-drop__panel {
  position: absolute; top: calc(100% + 8px); left: -12px; width: 360px; padding: 10px; display: none;
  background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); box-shadow: var(--sw-shadow-lg);
}
.sw-drop.is-open .sw-drop__panel { display: block; }
.sw-drop__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.sw-drop__item:hover, .sw-drop__item:focus-visible { background: var(--sw-tint-soft); }
.sw-drop__item b { font-family: var(--sw-font-display); font-weight: 600; font-size: 1rem; }
.sw-drop__item i { font-style: normal; font-size: .84rem; color: var(--sw-text-3); white-space: nowrap; }
.sw-drop__item span { grid-column: 1 / -1; font-size: .875rem; color: var(--sw-text-2); line-height: 1.45; }
.sw-drop__all { display: block; margin: 6px 4px 2px; padding: 10px 10px 4px; border-top: 1px solid var(--sw-line); font-size: .875rem; font-weight: 600; color: var(--sw-accent-ink); text-decoration: none; }
.sw-header__end { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.sw-login { padding: 10px 12px; font-size: .9rem; color: var(--sw-text-2); text-decoration: none; border-radius: 8px; }
.sw-login:hover { color: var(--sw-text); background: rgba(226, 228, 231, .55); }
.sw-menu-btn { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 8px 14px;
  border: 1px solid var(--sw-line-2); border-radius: 999px; background: var(--sw-paper); cursor: pointer; font-size: .9rem; font-weight: 600; }
.sw-burger { position: relative; width: 16px; height: 12px; }
.sw-burger::before, .sw-burger::after, .sw-burger i { content: ""; position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .2s var(--sw-ease), opacity .2s; }
.sw-burger::before { top: 0; } .sw-burger i { top: 5.2px; } .sw-burger::after { bottom: 0; }
.sw-header.is-menu .sw-burger::before { transform: translateY(5.2px) rotate(45deg); }
.sw-header.is-menu .sw-burger::after { transform: translateY(-5.2px) rotate(-45deg); }
.sw-header.is-menu .sw-burger i { opacity: 0; }
.sw-mnav { display: none; border-top: 1px solid var(--sw-line); background: var(--sw-ivory); max-height: calc(100dvh - var(--sw-header-h)); overflow-y: auto; }
.sw-header.is-menu .sw-mnav { display: block; }
.sw-mnav__in { padding-block: 12px 24px; }
.sw-mnav__group { padding: 10px 0; border-bottom: 1px solid var(--sw-line); }
.sw-mnav__label { display: block; font-size: var(--sw-t-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-accent-ink); padding: 8px 0 4px; }
.sw-mnav a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; font-size: 1.05rem; font-weight: 500; text-decoration: none; }
.sw-mnav a i { font-style: normal; font-size: .875rem; color: var(--sw-text-3); font-weight: 400; }
.sw-mnav .sw-btn { width: 100%; margin-top: 18px; justify-content: center; }
@media (max-width: 1139px) {
  .sw-nav, .sw-login { display: none; }
  .sw-menu-btn { display: inline-flex; }
  .sw-header__end { margin-left: auto; }
}
@media (max-width: 560px) {
  :root { --sw-header-h: 64px; }
  .sw-logo img { height: 32px; }
  .sw-header__end .sw-btn { display: none; }
}
/* Below 360 the label is hidden visually only: it is the button's accessible name. */
@media (max-width: 359px) { .sw-logo img { height: 28px; }
  .sw-menu-btn .sw-menu-lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }

/* ---- Hero ------------------------------------------------------------------------------------ */
.sw-hero { position: relative; background: var(--sw-dark); color: var(--sw-on-dark); overflow: hidden; isolation: isolate; }
.sw-hero__in { position: relative; z-index: 2; display: flex; align-items: center; min-height: clamp(540px, 44vw, 660px); padding-block: clamp(48px, 5vw, 80px); }
.sw-hero__copy { max-width: min(610px, 47%); }
.sw-hero__media { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 58%; }
.sw-hero__media picture, .sw-founder__media picture, .sw-close__media picture, .sw-plan__media picture { display: block; width: 100%; height: 100%; }
.sw-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sw-hero-pos, 95% 40%); }
.sw-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--sw-dark) 0%, rgba(23, 25, 28, .78) 9%, rgba(23, 25, 28, .18) 24%, rgba(23, 25, 28, 0) 36%); }
.sw-hero .sw-display, .sw-hero .sw-h1 { color: var(--sw-on-dark); }
.sw-hero .sw-display .sw-accent, .sw-hero .sw-h1 .sw-accent { display: block; color: var(--sw-champagne); }
.sw-hero__lede { margin-top: 26px; font-size: var(--sw-t-lead); line-height: 1.6; color: var(--sw-on-dark-2); max-width: 54ch; }
.sw-hero__meta { margin-top: 30px; font-size: var(--sw-t-sm); color: var(--sw-on-dark-2); }
.sw-hero__price { margin-top: 28px; display: flex; align-items: baseline; gap: 10px; }
.sw-hero__price b { font-family: var(--sw-font-display); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); font-weight: 500; letter-spacing: -.02em; color: var(--sw-on-dark); }
.sw-hero__price span { color: var(--sw-on-dark-2); }
.sw-hero__proof { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--sw-on-dark-line); max-width: 600px; }
.sw-hero__proof .sw-eyebrow { font-size: .7rem; margin-bottom: 10px; color: var(--sw-on-dark-2); }
.sw-hero__proof ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.sw-hero__proof a { color: var(--sw-on-dark); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; }
.sw-hero__proof a:hover { border-bottom-color: currentColor; }
/* Page hero: a straight 50/50 split, image fills the right half. */
.sw-hero.is-page .sw-hero__in { min-height: clamp(460px, 36vw, 560px); }
.sw-hero.is-page .sw-hero__copy { max-width: min(560px, 44%); }
.sw-hero.is-page .sw-hero__media { width: 49%; }
.sw-hero.is-page .sw-hero__media::after { background: linear-gradient(90deg, rgba(23, 25, 28, .5) 0%, rgba(23, 25, 28, 0) 18%); }
@media (max-width: 959px) {
  .sw-hero__in, .sw-hero.is-page .sw-hero__in { min-height: 0; padding-block: 48px 40px; }
  .sw-hero__copy, .sw-hero.is-page .sw-hero__copy { max-width: 640px; }
  .sw-hero__media, .sw-hero.is-page .sw-hero__media { position: relative; width: 100%; aspect-ratio: var(--sw-hero-ratio, 4 / 3); }
  .sw-hero__media img { object-position: var(--sw-hero-pos-m, 86% 36%); }
  .sw-hero__media::after, .sw-hero.is-page .sw-hero__media::after { background: linear-gradient(180deg, var(--sw-dark) 0%, rgba(23, 25, 28, 0) 14%); }
}
@media (min-width: 600px) and (max-width: 959px) { .sw-hero__media, .sw-hero.is-page .sw-hero__media { aspect-ratio: 16 / 9; } }

/* ---- Benefits band --------------------------------------------------------------------------- */
.sw-benefits { background: var(--sw-paper); border-bottom: 1px solid var(--sw-line); }
.sw-benefits ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sw-benefits li { padding: clamp(26px, 3vw, 40px) clamp(16px, 2vw, 28px); text-align: center; position: relative; }
.sw-benefits li + li::before { content: ""; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--sw-line); }
.sw-benefits svg { width: 36px; height: 36px; margin: 0 auto 16px; color: var(--sw-accent); }
.sw-benefits b { display: block; font-family: var(--sw-font-display); font-size: 1.09rem; font-weight: 600; letter-spacing: -.01em; }
.sw-benefits span { display: block; margin-top: 6px; font-size: var(--sw-t-sm); color: var(--sw-text-2); line-height: 1.5; }
/* Four across needs about 205px a cell for "One accountable partner", so two columns until then,
   and tighter side padding in the first stretch of four across. */
@media (max-width: 1023px) {
  .sw-benefits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-benefits li:nth-child(3)::before { display: none; }
  .sw-benefits li:nth-child(n+3) { border-top: 1px solid var(--sw-line); }
}
@media (min-width: 1024px) and (max-width: 1100px) { .sw-benefits li { padding-inline: 10px; } }
/* One column up to 559: in two columns below 560 a cell is too narrow to keep "One accountable
   partner" on one line. */
@media (max-width: 559px) {
  .sw-benefits ul { grid-template-columns: minmax(0, 1fr); }
  .sw-benefits li { text-align: left; display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding: 20px 4px; }
  .sw-benefits li::before { display: none; }
  .sw-benefits li + li { border-top: 1px solid var(--sw-line); }
  .sw-benefits svg { margin: 2px 0 0; grid-row: span 2; }
}

/* ---- Cards ----------------------------------------------------------------------------------- */
.sw-card { background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); padding: clamp(22px, 2.4vw, 32px); }
.sw-card.is-flat { box-shadow: none; }
.sw-card.is-raised { box-shadow: var(--sw-shadow); }
.sw-card h3 { font-size: var(--sw-t-h3); }
.sw-card h3 + p, .sw-card .sw-h3 + p { margin-top: 12px; color: var(--sw-text-2); }
.sw-dark .sw-card { background: var(--sw-dark-raise); border-color: var(--sw-on-dark-line); color: var(--sw-on-dark); }
.sw-dark .sw-card h3 + p { color: var(--sw-on-dark-2); }
.sw-num { display: block; font-family: var(--sw-font); font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--sw-accent-ink); margin-bottom: 14px; }
.sw-dark .sw-num { color: var(--sw-champagne); }

/* Plan cards (services) */
.sw-plans { display: grid; grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); align-items: stretch; }
.sw-plans__intro { padding-right: clamp(0px, 2vw, 24px); align-self: start; padding-top: 8px; }
.sw-plans__intro .sw-lead { margin-top: 18px; }
.sw-plans__intro .sw-link { margin-top: 26px; }
.sw-plan { display: flex; flex-direction: column; background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); overflow: hidden; }
.sw-plan__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sw-tint-soft); }
.sw-plan__media img { width: 100%; height: 100%; object-fit: cover; }
.sw-plan__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.sw-plan h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -.018em; }
.sw-price { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.sw-price b { font-family: var(--sw-font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -.02em; }
.sw-price span { font-size: .9rem; color: var(--sw-text-2); }
.sw-term { margin-top: 2px; font-size: .84rem; color: var(--sw-text-3); }
.sw-plan__blurb { margin-top: 16px; color: var(--sw-text-2); font-size: .98rem; line-height: 1.55; }
.sw-plan .sw-check { margin-top: 18px; }
.sw-plan__typ { margin-top: 14px; font-size: .84rem; color: var(--sw-text-3); line-height: 1.5; }
.sw-plan__foot { margin-top: auto; padding-top: 22px; }
.sw-exec { margin-top: clamp(16px, 1.8vw, 24px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr) auto; gap: 18px clamp(20px, 3vw, 44px); align-items: center;
  background: var(--sw-warm); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); padding: clamp(22px, 2.6vw, 34px); }
.sw-exec h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.sw-exec .price { font-weight: 600; font-size: .95rem; margin-top: 4px; }
.sw-exec .pkg-term { font-size: .84rem; color: var(--sw-text-3); margin-top: 2px; }
.sw-exec .blurb { color: var(--sw-text-2); font-size: .98rem; }
.sw-plans-note { margin-top: 16px; font-size: var(--sw-t-sm); line-height: 1.6; color: var(--sw-text-2); }
@media (max-width: 1139px) { .sw-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sw-plans__intro { grid-column: 1 / -1; padding: 0 0 12px; max-width: 720px; } }
@media (max-width: 899px) { .sw-plans { grid-template-columns: minmax(0, 1fr); } .sw-plan { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sw-exec { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 560px) and (max-width: 899px) { .sw-plan { grid-template-columns: 38% minmax(0, 1fr); } .sw-plan__media { aspect-ratio: auto; min-height: 100%; } }

/* Checklist */
.sw-check { list-style: none; display: grid; gap: 10px; }
.sw-check li { position: relative; padding-left: 28px; font-size: .96rem; line-height: 1.5; color: var(--sw-text-2); }
.sw-check li::before { content: ""; position: absolute; left: 0; top: .28em; width: 17px; height: 17px; border-radius: 50%; background: var(--sw-tint);
  -webkit-mask: none; }
.sw-check li::after { content: ""; position: absolute; left: 5px; top: calc(.28em + 4px); width: 7px; height: 4px; border-left: 1.6px solid var(--sw-accent-ink); border-bottom: 1.6px solid var(--sw-accent-ink); transform: rotate(-45deg); }
.sw-check.is-lg li { font-size: var(--sw-t-body); color: var(--sw-text); }
.sw-dark .sw-check li { color: var(--sw-on-dark-2); }
.sw-dark .sw-check li::before { background: rgba(226, 228, 231, .18); }
.sw-dark .sw-check li::after { border-color: var(--sw-champagne); }
.sw-x li::before { background: #EFE7DA; }
.sw-x li::after { width: 9px; height: 1.6px; border: 0; background: var(--sw-champagne-ink); left: 4px; top: calc(.28em + 7.7px); transform: none; box-shadow: none; }

/* Split: media and text side by side */
.sw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sw-split.is-media-right > .sw-split__media { order: 2; }
.sw-split__media img { width: 100%; border-radius: var(--sw-radius); }
.sw-split__media.is-bleed img { border-radius: 0; }
.sw-cap { margin-top: 12px; font-size: var(--sw-t-xs); color: var(--sw-text-3); text-wrap: balance; }
@media (max-width: 859px) { .sw-split { grid-template-columns: minmax(0, 1fr); } .sw-split.is-media-right > .sw-split__media { order: 0; } }

/* Founder */
.sw-founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .55fr); background: var(--sw-warm); }
.sw-founder__media { position: relative; min-height: 420px; }
.sw-founder__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-founder__body { padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 60px); align-self: center; }
.sw-founder__body .sw-h2 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); }
.sw-founder__body p { color: var(--sw-text-2); margin-top: 18px; max-width: 54ch; }
.sw-founder__aside { align-self: center; padding: 32px clamp(20px, 3vw, 44px); border-left: 1px solid var(--sw-line); margin-block: 40px; }
.sw-founder__aside .sw-quote { font-family: var(--sw-font-display); font-size: 1.35rem; line-height: 1.3; font-weight: 500; letter-spacing: -.015em; }
.sw-founder__aside .sw-rule { width: 36px; height: 2px; background: var(--sw-champagne); margin: 22px 0 16px; }
.sw-founder__aside ul { list-style: none; display: grid; gap: 4px; font-size: .92rem; color: var(--sw-text-2); }
.sw-founder__sig { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.sw-founder__sig img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.sw-founder__sig b { display: block; font-family: var(--sw-font-display); font-weight: 600; }
.sw-founder__sig span { font-size: .88rem; color: var(--sw-text-3); }
@media (max-width: 1099px) { .sw-founder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } .sw-founder__aside { grid-column: 2; margin: 0 clamp(24px, 4vw, 60px) 40px; border-left: 0; border-top: 1px solid var(--sw-line); padding: 24px 0 0; } }
@media (max-width: 759px) { .sw-founder { grid-template-columns: minmax(0, 1fr); } .sw-founder__media { min-height: 0; aspect-ratio: 4 / 3; } .sw-founder__aside { grid-column: 1; margin: 0 var(--sw-gutter) 40px; } .sw-founder__body { padding-inline: var(--sw-gutter); } }

/* Steps */
/* Circled numbers (Katie 2026-09-25): the step number sits in a circle on the same line as its
   title, at the title's own text size, instead of an icon above it. The circle is 2em of that size
   and the title gets (2em - its line height) / 2 of top padding, so a one-line title is centred on
   the circle exactly and a wrapped title's first line stays centred on it. Pages set the size by
   giving .sw-numc the same font-size as the title beside it. */
.sw-numc { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2em; height: 2em; border-radius: 50%;
  background: var(--sw-tint-soft); color: var(--sw-accent-ink); font-family: var(--sw-font-display); font-weight: 500;
  line-height: 1; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.sw-dark .sw-numc { background: rgba(226, 228, 231, .12); color: var(--sw-champagne); }
@media (forced-colors: active) { .sw-numc { border: 1px solid CanvasText; } }
.sw-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
/* Each step is a small grid: the circled number and the title on one line, then the text. From
   1200px the four steps share their rows through subgrid, so a title that wraps pushes every
   column's text down together and the descriptions stay level; below that two columns give the
   titles room. Browsers without subgrid still get the one-line number and title. */
.sw-steps li { padding: 4px clamp(16px, 2vw, 28px) 4px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-content: start; }
.sw-steps li + li { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--sw-line); }
.sw-steps .sw-numc { grid-column: 1; grid-row: 1; font-size: 1.22rem; align-self: start; }
.sw-steps h3 { grid-column: 2; grid-row: 1; align-self: start; font-size: 1.22rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.25; padding-top: .375em; text-wrap: balance; }
.sw-steps p { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; font-size: .96rem; color: var(--sw-text-2); line-height: 1.55; }
.sw-dark .sw-steps li + li { border-left-color: var(--sw-on-dark-line); }
.sw-dark .sw-steps p { color: var(--sw-on-dark-2); }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1200px) { .sw-steps li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; } }
}
@media (max-width: 1199px) { .sw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; } .sw-steps li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 559px) { .sw-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .sw-steps li, .sw-steps li + li, .sw-steps li:nth-child(3) { padding: 22px 0; border-left: 0; border-top: 1px solid var(--sw-line); }
  .sw-steps li:first-child { border-top: 0; padding-top: 0; }
  .sw-dark .sw-steps li { border-top-color: var(--sw-on-dark-line); } }

/* Stats row */
.sw-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--sw-line); border-bottom: 1px solid var(--sw-line); }
.sw-stats li { padding: 26px clamp(16px, 2vw, 28px); }
.sw-stats li + li { border-left: 1px solid var(--sw-line); }
.sw-stats b { display: block; font-family: var(--sw-font-display); font-size: clamp(2.2rem, 1.8rem + 1.2vw, 3rem); font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--sw-dark); }
.sw-stats strong { display: block; margin-top: 14px; font-weight: 600; }
.sw-stats span { display: block; margin-top: 4px; font-size: .9rem; color: var(--sw-text-3); }
@media (max-width: 599px) { .sw-stats { grid-template-columns: minmax(0, 1fr); } .sw-stats li + li { border-left: 0; border-top: 1px solid var(--sw-line); }
  .sw-stats li { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: start; padding: 20px 0; } .sw-stats b { grid-row: span 2; font-size: 2.3rem; } .sw-stats strong { margin-top: 2px; } }

/* Note / callout */
.sw-note { border-left: 3px solid var(--sw-accent); background: var(--sw-tint-soft); border-radius: 0 var(--sw-radius-sm) var(--sw-radius-sm) 0; padding: 20px 24px; }
.sw-note b { display: block; font-weight: 600; margin-bottom: 6px; }
.sw-note p { color: var(--sw-text-2); font-size: .98rem; }
.sw-note.is-warm { background: var(--sw-warm); border-left-color: var(--sw-champagne); }
.sw-dark .sw-note { background: rgba(226, 228, 231, .08); border-left-color: var(--sw-champagne); }
.sw-dark .sw-note p { color: var(--sw-on-dark-2); }

/* Pill */
.sw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  background: var(--sw-tint); color: var(--sw-dark); line-height: 1.3; }
.sw-pill.is-warm { background: #EFE7DA; color: var(--sw-champagne-ink); }
.sw-dark .sw-pill { background: rgba(226, 228, 231, .16); color: var(--sw-on-dark); }
.sw-frame .sw-pill, .sw-dark .sw-frame .sw-pill { background: var(--sw-tint); color: var(--sw-dark); }

/* Points (numbered feature list) */
.sw-points { list-style: none; display: grid; gap: 0; counter-reset: pt; }
.sw-points li { counter-increment: pt; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--sw-line); }
.sw-points li:last-child { border-bottom: 1px solid var(--sw-line); }
.sw-points li::before { content: counter(pt, decimal-leading-zero); grid-row: span 2; font-size: .8rem; font-weight: 600; letter-spacing: .12em; color: var(--sw-accent-ink); padding-top: 4px; }
.sw-points b { font-family: var(--sw-font-display); font-size: 1.14rem; font-weight: 600; letter-spacing: -.01em; }
.sw-points span { color: var(--sw-text-2); font-size: .97rem; line-height: 1.55; }
.sw-dark .sw-points li { border-color: var(--sw-on-dark-line); }
.sw-dark .sw-points li::before { color: var(--sw-champagne); }
.sw-dark .sw-points span { color: var(--sw-on-dark-2); }

/* Browser / device frame for real product renders */
.sw-frame { background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: 14px; box-shadow: var(--sw-shadow-lg); overflow: hidden; }
.sw-frame__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #F4F1EB; border-bottom: 1px solid var(--sw-line); font-size: .78rem; color: var(--sw-text-3); }
.sw-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: #DCD6CB; }
.sw-frame__bar i + i { margin-left: -4px; }
.sw-frame__bar .sw-pill { margin-left: auto; }
.sw-frame img { width: 100%; }
.sw-dark .sw-frame { border-color: rgba(0, 0, 0, .2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); }

/* Table */
.sw-table-wrap { overflow-x: auto; border: 1px solid var(--sw-line); border-radius: var(--sw-radius); background: var(--sw-paper); }
.sw-table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
.sw-table th, .sw-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--sw-line); }
.sw-table thead th { font-family: var(--sw-font-display); font-weight: 600; font-size: 1rem; background: var(--sw-warm); }
.sw-table tbody th { font-weight: 600; width: 22%; }
.sw-table td { color: var(--sw-text-2); }
.sw-table tr:last-child > * { border-bottom: 0; }

/* FAQ */
.sw-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.sw-faq__list { border-top: 1px solid var(--sw-line-2); }
.sw-faq details { border-bottom: 1px solid var(--sw-line-2); }
.sw-faq summary { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 20px 0; cursor: pointer;
  font-family: var(--sw-font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.4; letter-spacing: -.008em; text-wrap: balance; }
.sw-faq summary::-webkit-details-marker { display: none; }
.sw-faq summary::after { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 6px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat; color: var(--sw-accent-ink); transition: transform .2s var(--sw-ease); }
.sw-faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat; }
.sw-faq details > div { padding: 0 40px 22px 0; color: var(--sw-text-2); }
.sw-faq details > div p + p { margin-top: .7em; }
@media (max-width: 859px) { .sw-faq { grid-template-columns: minmax(0, 1fr); } }

/* Closing CTA */
.sw-close { position: relative; background: var(--sw-dark); color: var(--sw-on-dark); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: hidden; }
.sw-close__body { padding: clamp(52px, 6vw, 96px) var(--sw-gutter) clamp(52px, 6vw, 96px) max(var(--sw-gutter), calc((100vw - var(--sw-wrap)) / 2)); align-self: center; }
.sw-close__body .sw-h2 { color: var(--sw-on-dark); max-width: 18ch; }
.sw-close__body .sw-lead { margin-top: 18px; }
.sw-close__media { position: relative; min-height: 360px; }
.sw-close__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--sw-close-pos, 60% 55%); }
@media (max-width: 859px) { .sw-close { grid-template-columns: minmax(0, 1fr); } .sw-close__body { padding-inline: var(--sw-gutter); } .sw-close__media { min-height: 0; aspect-ratio: 16 / 10; } }

/* Forms (Before You Hire tool and similar) */
.sw-field { display: grid; gap: 8px; }
.sw-field label, .sw-label { font-weight: 600; font-size: .95rem; }
.sw-input, .sw-textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--sw-text); background: var(--sw-paper);
  border: 1px solid #7F858D; border-radius: 10px; padding: 12px 14px; line-height: 1.5;
}
/* Field edge #7F858D: 3.7:1 on white, 3.5:1 on ivory, 3.2:1 on warm, 3.3:1 on tint-soft (non-text minimum 3:1).
   Placeholder text-3: 6.1:1 on white. */
.sw-input::placeholder, .sw-textarea::placeholder { color: var(--sw-text-3); opacity: 1; }
.sw-textarea { min-height: 200px; resize: vertical; }
.sw-input:focus, .sw-textarea:focus { outline: 2px solid var(--sw-accent-ink); outline-offset: 1px; border-color: var(--sw-accent-ink); }
.sw-help { font-size: .88rem; color: var(--sw-text-3); }
.sw-err { color: #A33A34; font-size: .92rem; font-weight: 500; }
/* Success, in the Charcoal system: charcoal text on a champagne wash, led by a charcoal disc with a
   champagne tick (the mark the flow and message-page success icons use). An error is red text, so
   the two differ in colour, in mark and in shape. The wash is translucent, so it reads as warm
   ivory on ivory, white or the warm band alike. Text 14.5:1 or more on every band; tick on its
   disc 6.6:1. The tick is a background layer, not a pseudo-element, so a page rule that still
   sets its own background replaces the whole look rather than mixing with it. The panel rule sits
   with the flow status rules below, because a flow's success line (.sw-flow__status.is-ok, or its
   role="status" with .ok or .is-ok) shares it and has to come after the flow's own status colour. */
.sw-ok { color: var(--sw-text); font-size: .92rem; font-weight: 500; line-height: 1.5; }

/* =============================================================================================
   PHASE 2 COMPONENTS (2026-09-25)
   Added for the page families that follow the four phase-1 pages: plan pages, comparisons, case
   studies, legal, blog, the one-question flows and the message pages. Every selector below is
   new, so nothing here can change how the phase-1 pages render (they keep their own pg- classes;
   the promoted versions here are copies under system names, not renames). The usage guide with
   copy-paste markup lives beside the build spec (SPEC2-components.md).
   ============================================================================================= */

/* ---- Utilities ------------------------------------------------------------------------------- */
/* Three phase-1 pages each defined their own nowrap and balance helpers. One copy each now. */
.sw-nowrap { white-space: nowrap; }
.sw-balance { text-wrap: balance; }

/* ---- Breadcrumb ------------------------------------------------------------------------------ */
/* <nav class="sw-crumb" aria-label="Breadcrumb"><ol>...</ol></nav>. The separator is a drawn
   chevron, not a character, so a screen reader reads "Home, Comparisons, Agency" and nothing in
   between. Links carry a quiet underline so they never depend on colour alone. */
.sw-crumb { margin: 0 0 20px; font-size: var(--sw-t-sm); line-height: 1.5; color: var(--sw-text-3); }
.sw-crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.sw-crumb li { display: inline-flex; align-items: center; min-width: 0; }
.sw-crumb li + li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin: 0 11px 0 8px;
  border-top: 1.4px solid var(--sw-accent); border-right: 1.4px solid var(--sw-accent); transform: rotate(45deg); }
.sw-crumb a { color: var(--sw-text-2); text-decoration: underline; text-decoration-color: var(--sw-line-2); border-radius: 4px; }
.sw-crumb a:hover { color: var(--sw-text); text-decoration-color: currentColor; }
.sw-crumb [aria-current="page"] { color: var(--sw-text); font-weight: 500; }
.sw-dark .sw-crumb, .sw-hero .sw-crumb, .sw-dark .sw-crumb a, .sw-hero .sw-crumb a { color: var(--sw-on-dark-2); }
.sw-dark .sw-crumb a, .sw-hero .sw-crumb a { text-decoration-color: rgba(246, 243, 237, .35); }
.sw-dark .sw-crumb a:hover, .sw-hero .sw-crumb a:hover, .sw-dark .sw-crumb [aria-current="page"], .sw-hero .sw-crumb [aria-current="page"] { color: var(--sw-on-dark); }
.sw-dark .sw-crumb li + li::before, .sw-hero .sw-crumb li + li::before { border-color: rgba(246, 243, 237, .5); }

/* ---- Page header (ivory) --------------------------------------------------------------------- */
/* The opening of a text-led page: comparisons, legal, case studies, blog, forms. The photo hero
   (.sw-hero.is-page) stays for pages that sell; this one is for pages that are read. Title uses
   .sw-h1 on the h1. The copy column holds a reading measure; .is-split adds an aside (a price
   block, a key fact) that drops under the copy below 960. */
.sw-pagehead { background: var(--sw-ivory); border-bottom: 1px solid var(--sw-line); padding-block: clamp(32px, 4.4vw, 64px) clamp(40px, 5vw, 68px); }
.sw-pagehead.is-warm { background: var(--sw-warm); }
.sw-pagehead.is-flush { border-bottom: 0; }
.sw-pagehead__in { max-width: 860px; }
.sw-pagehead .sw-crumb { margin-bottom: clamp(24px, 3.2vw, 40px); }
.sw-pagehead .sw-eyebrow { margin-bottom: 14px; }
.sw-pagehead .sw-lead { margin-top: 20px; max-width: 62ch; text-wrap: balance; }
.sw-pagehead__meta { list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin-top: 26px; font-size: var(--sw-t-sm); line-height: 1.5; color: var(--sw-text-3); }
/* Items separate with a drawn dot, so nothing is read aloud between them. */
.sw-pagehead__meta > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.sw-pagehead__meta b, .sw-pagehead__meta strong { color: var(--sw-text-2); font-weight: 600; }
/* On a phone the items stack instead, so a wrapped line never starts with a stray dot. */
@media (max-width: 559px) {
  .sw-pagehead__meta { flex-direction: column; align-items: flex-start; row-gap: 10px; }
  .sw-pagehead__meta > * + *::before { display: none; }
}
/* A short champagne rule under the title: the same mark the founder aside and the statement use. */
.sw-pagehead.is-ruled h1::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 22px; background: var(--sw-champagne); }
.sw-pagehead.is-center { text-align: center; }
.sw-pagehead.is-center .sw-pagehead__in { margin-inline: auto; }
.sw-pagehead.is-center :is(.sw-crumb ol, .sw-pagehead__meta) { justify-content: center; }
@media (max-width: 559px) { .sw-pagehead.is-center .sw-pagehead__meta { align-items: center; } }
.sw-pagehead.is-center .sw-lead { margin-inline: auto; }
.sw-pagehead.is-center.is-ruled h1::after { margin-inline: auto; }
/* Compact: the intro above a form or flow card, where the card is the point of the page. */
.sw-pagehead.is-compact { border-bottom: 0; padding-block: clamp(28px, 4vw, 52px) clamp(20px, 2.6vw, 32px); }
.sw-pagehead.is-compact .sw-h1 { font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.75rem); }
.sw-pagehead.is-split .sw-pagehead__in { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.sw-pagehead.is-split .sw-crumb { grid-column: 1 / -1; margin-bottom: 0; }
@media (max-width: 959px) { .sw-pagehead.is-split .sw-pagehead__in { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* Author line: a small portrait, the name, the role. Used in the page header meta and under posts. */
.sw-byline { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.sw-byline img { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 24%; background: var(--sw-tint-soft); }
.sw-byline span { display: block; line-height: 1.4; }
.sw-byline b { display: block; color: var(--sw-text); font-weight: 600; }

/* ---- Long-form prose ------------------------------------------------------------------------- */
/* Legal text, blog posts and case-study detail. It styles bare elements (the markup a legal page
   or a converted post already has), so the text itself never needs a class. Lists and tables are
   styled only when they carry no class, so a system component dropped inside (.sw-tags,
   .sw-table, .sw-check) keeps its own look. Body copy is text-2 like the rest of the site; bold
   lead-ins and headings step up to text. */
.sw-prose { max-width: 68ch; font-size: var(--sw-t-body); line-height: 1.72; color: var(--sw-text-2); overflow-wrap: break-word; }
.sw-prose > * { margin-block: 0; }
.sw-prose > * + * { margin-top: 1.1em; }
.sw-prose :is(h2, h3, h4) { font-family: var(--sw-font-display); color: var(--sw-text); text-wrap: balance; }
.sw-prose h2 { font-size: clamp(1.45rem, 1.28rem + .7vw, 1.9rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.sw-prose h3 { font-size: clamp(1.14rem, 1.08rem + .28vw, 1.3rem); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.sw-prose h4 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; }
.sw-prose > h2 { margin-top: clamp(2.3rem, 1.9rem + 1.4vw, 3.2rem); }
.sw-prose > h3 { margin-top: 2rem; }
.sw-prose > h4 { margin-top: 1.6rem; }
.sw-prose > :is(h2, h3, h4) + * { margin-top: .6em; }
.sw-prose > h2 + h3 { margin-top: 1.1rem; }
.sw-prose > :first-child { margin-top: 0; }
/* The html scroll-padding already clears the sticky header; this adds a breath above the heading. */
.sw-prose [id] { scroll-margin-top: 16px; }
.sw-prose :is(strong, b) { color: var(--sw-text); font-weight: 600; }
.sw-prose a { color: var(--sw-accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(80, 88, 98, .45); }
.sw-prose a:hover { color: var(--sw-text); text-decoration-color: currentColor; }
.sw-prose :is(ul, ol):not([class]) { padding-left: 1.35em; }
.sw-prose :is(ul, ol):not([class]) > li { padding-left: .3em; }
.sw-prose :is(ul, ol):not([class]) > li + li { margin-top: .5em; }
.sw-prose li > :is(ul, ol):not([class]) { margin-top: .5em; }
.sw-prose ul:not([class]) > li::marker { color: var(--sw-accent); }
.sw-prose ol:not([class]) > li::marker { color: var(--sw-accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.sw-prose blockquote { margin: 1.9em 0; padding: 2px 0 2px clamp(18px, 2.4vw, 28px); border-left: 2px solid var(--sw-champagne);
  font-family: var(--sw-font-display); font-size: clamp(1.1rem, 1.04rem + .3vw, 1.25rem); font-weight: 400; line-height: 1.55; letter-spacing: -.006em; color: var(--sw-text); }
.sw-prose blockquote p + p { margin-top: .7em; }
.sw-prose blockquote :is(footer, cite) { display: block; margin-top: .9em; font-family: var(--sw-font); font-size: var(--sw-t-sm); font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--sw-text-3); }
.sw-prose hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--sw-line); }
/* Small tables only. Cells may break long words so a three-column table still fits a phone; a
   wide table belongs in .sw-table-wrap + .sw-table, which scrolls. */
.sw-prose table:not([class]) { width: 100%; border-collapse: collapse; font-size: var(--sw-t-sm); line-height: 1.5; }
.sw-prose table:not([class]) :is(th, td) { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--sw-line); overflow-wrap: anywhere; }
.sw-prose table:not([class]) thead th { font-family: var(--sw-font-display); font-weight: 600; color: var(--sw-text); border-bottom: 1.5px solid var(--sw-line-2); }
.sw-prose table:not([class]) :is(th, td):first-child { padding-left: 0; }
.sw-prose table:not([class]) caption { caption-side: bottom; margin-top: 10px; text-align: left; font-size: var(--sw-t-xs); color: var(--sw-text-3); }
.sw-prose code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .88em; color: var(--sw-text); background: var(--sw-tint-soft);
  border: 1px solid var(--sw-line); border-radius: 5px; padding: .08em .35em; overflow-wrap: anywhere; }
.sw-prose pre { overflow-x: auto; padding: 16px 18px; background: var(--sw-tint-soft); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-sm); font-size: .9rem; line-height: 1.6; }
.sw-prose pre code { padding: 0; border: 0; background: none; font-size: inherit; overflow-wrap: normal; }
.sw-prose img { border-radius: var(--sw-radius-sm); }
.sw-prose figure { margin: 2em 0; }
.sw-prose figcaption { margin-top: 10px; font-size: var(--sw-t-xs); line-height: 1.55; color: var(--sw-text-3); text-wrap: balance; }
.sw-prose small { font-size: var(--sw-t-sm); }

/* ---- Document layout and on-page contents ---------------------------------------------------- */
/* .sw-doc puts the contents list beside the text from 1024 up, where it sticks under the header
   and scrolls on its own if it is taller than the window. Below 1024 it is a plain list at the
   top of the text, in a light box so it reads as navigation rather than the first paragraph.
   A script that tracks the section in view may set aria-current="true" (or .is-active) on a link. */
.sw-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.sw-toc { font-size: var(--sw-t-sm); line-height: 1.45; padding: 20px 22px; background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius); }
.sw-toc__title { display: block; margin: 0 0 12px; font-size: var(--sw-t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--sw-accent-ink); }
.sw-toc ol, .sw-toc ul { list-style: none; border-left: 1px solid var(--sw-line-2); }
.sw-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--sw-text-2); text-decoration: none; text-wrap: pretty; }
.sw-toc a:hover { color: var(--sw-text); border-left-color: var(--sw-accent); }
/* An inset ring, so it is never clipped by the scrolling box on wide screens. */
.sw-toc a:focus-visible { outline-offset: -2px; border-radius: 6px; }
.sw-toc a[aria-current="true"], .sw-toc a.is-active { color: var(--sw-text); font-weight: 600; border-left-color: var(--sw-champagne); }
@media (min-width: 1024px) {
  .sw-doc { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); }
  .sw-toc { position: sticky; top: calc(var(--sw-header-h) + 28px); max-height: calc(100vh - var(--sw-header-h) - 56px); overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 0; background: none; border: 0; border-radius: 0; }
}
/* A document without a contents list (the shorter policies: affiliate disclosure, content
   licensing, creator rights, data deletion). Its prose is the only thing in a plain .sw-wrap, or
   sits in a .sw-doc with no .sw-toc. It reads as one centred column instead of a 68ch column
   against the left edge with the rest of a wide screen empty, and the page header's crumb, title
   and date move onto the same column so the left edges line up. Text stays left-aligned.
   Pages with a contents list (terms, privacy) are untouched: the toc is what their layout keys on.
   The header box is 68ch at the prose's size and font, so the two match at every screen size
   (both fill the wrap once it is narrower than 68ch). Screen only: print keeps full-width text. */
@media screen {
  .sw-wrap:not(.sw-doc) > .sw-prose:only-child, .sw-doc:not(:has(> .sw-toc)) > .sw-prose { margin-inline: auto; }
  main:is(:has(.sw-wrap:not(.sw-doc) > .sw-prose:only-child), :has(.sw-doc > .sw-prose)):not(:has(.sw-toc)) .sw-pagehead:not(.is-center, .is-split) .sw-pagehead__in {
    max-width: 68ch; margin-inline: auto; font-size: var(--sw-t-body); }
}
@media (min-width: 1024px) { .sw-doc:not(:has(> .sw-toc)) { grid-template-columns: minmax(0, 1fr); } }

/* ---- Comparison table ------------------------------------------------------------------------ */
/* One semantic <table>, promoted from Before You Hire's table and Social Essentials' side by side.
   The ScaleLounge column (the last one by default; .is-hl-2 moves it to the second, .is-plain
   turns it off) gets a charcoal head with a champagne edge and a tinted body.
   Row labels may be <th scope="row"> or a bare <td> as the first cell: the comparison pages keep
   <tr><td>Indicative cost</td> because a test reads that exact markup.
   Below 640 each row stacks into a card and every cell is labelled with its column: from
   data-label on the cell, or, where the cells must stay attribute-free, from --sw-col-2 / -3 / -4
   strings set once on the table. Those labels also keep the stacked rows understandable in a
   browser that drops table semantics when the display changes.
   .is-duo keeps two option columns side by side on phones instead (short cells only). */
.sw-compare-wrap { overflow-x: auto; border: 1px solid var(--sw-line); border-radius: var(--sw-radius); background: var(--sw-paper); }
/* Fixed layout: the option columns share the width equally, so the longer cell never makes its
   column look like the favoured one. The label column is 22%. */
.sw-compare { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .96rem; line-height: 1.55; }
.sw-compare tr > :first-child { width: 22%; }
.sw-compare caption { caption-side: bottom; padding: 12px 20px; text-align: left; font-size: var(--sw-t-xs); color: var(--sw-text-3); }
.sw-compare :is(th, td) { text-align: left; vertical-align: top; padding: 16px 20px; border-bottom: 1px solid var(--sw-line); text-wrap: pretty; }
.sw-compare thead th { vertical-align: bottom; background: var(--sw-warm); font-family: var(--sw-font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.3; letter-spacing: -.008em; color: var(--sw-text); text-wrap: balance; }
.sw-compare thead th small { display: block; margin-top: 4px; font-family: var(--sw-font); font-size: .84rem; font-weight: 500; letter-spacing: 0; color: var(--sw-text-3); }
.sw-compare tbody :is(th, td):first-child { font-weight: 600; color: var(--sw-text); text-wrap: balance; }
.sw-compare tbody td { color: var(--sw-text-2); }
.sw-compare tbody tr:last-child > * { border-bottom: 0; }
.sw-compare:not(.is-plain):not(.is-hl-2) thead th:last-child, .sw-compare.is-hl-2 thead th:nth-child(2) {
  background: var(--sw-dark); color: var(--sw-on-dark); box-shadow: inset 0 3px 0 var(--sw-champagne); }
.sw-compare:not(.is-plain):not(.is-hl-2) thead th:last-child small, .sw-compare.is-hl-2 thead th:nth-child(2) small { color: var(--sw-on-dark-2); }
.sw-compare:not(.is-plain):not(.is-hl-2) tbody td:last-child, .sw-compare.is-hl-2 tbody td:nth-child(2) { background: var(--sw-tint-soft); color: var(--sw-text); }
.sw-compare-note { margin-top: 16px; font-size: var(--sw-t-xs); line-height: 1.55; color: var(--sw-text-3); max-width: 90ch; }
@media (max-width: 639px) {
  .sw-compare, .sw-compare tbody, .sw-compare tbody tr, .sw-compare tbody :is(th, td) { display: block; }
  .sw-compare:not(.is-duo) thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .sw-compare caption { display: block; }
  .sw-compare tbody tr { padding: 18px 18px 20px; border-bottom: 1px solid var(--sw-line); }
  .sw-compare tbody tr:last-child { border-bottom: 0; }
  .sw-compare tbody :is(th, td), .sw-compare tr > :first-child { width: auto; }
  .sw-compare tbody :is(th, td) { padding: 0; border: 0; }
  .sw-compare tbody :is(th, td):first-child { margin-bottom: 10px; font-family: var(--sw-font-display); font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.35; }
  .sw-compare tbody td + td { margin-top: 12px; }
  .sw-compare tbody td:not(:first-child)::before { display: block; margin-bottom: 3px; font-size: var(--sw-t-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: var(--sw-text-3); }
  .sw-compare tbody td:nth-child(2)::before { content: var(--sw-col-2, none); }
  .sw-compare tbody td:nth-child(3)::before { content: var(--sw-col-3, none); }
  .sw-compare tbody td:nth-child(4)::before { content: var(--sw-col-4, none); }
  .sw-compare tbody td[data-label]::before { content: attr(data-label); }
  .sw-compare:not(.is-plain):not(.is-hl-2) tbody td:last-child, .sw-compare.is-hl-2 tbody td:nth-child(2) { padding: 11px 14px 12px; border-radius: var(--sw-radius-sm); box-shadow: inset 3px 0 0 var(--sw-champagne); }
  .sw-compare:not(.is-plain):not(.is-hl-2) tbody td:last-child::before, .sw-compare.is-hl-2 tbody td:nth-child(2)::before { color: var(--sw-accent-ink); }
  /* Duo: two short option columns stay side by side, under their names, one row label across. */
  .sw-compare.is-duo thead, .sw-compare.is-duo thead tr { display: block; }
  .sw-compare.is-duo tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-compare.is-duo tbody tr { padding: 0; }
  .sw-compare.is-duo thead th:first-child { display: none; }
  .sw-compare.is-duo thead th { padding: 14px 12px; font-size: .96rem; }
  .sw-compare.is-duo tbody :is(th, td):first-child { grid-column: 1 / -1; margin: 0; padding: 16px 12px 2px; font-family: var(--sw-font); font-size: var(--sw-t-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sw-accent-ink); }
  .sw-compare.is-duo tbody td + td { margin: 0; }
  .sw-compare.is-duo tbody td { padding: 6px 12px 16px; font-size: .92rem; line-height: 1.5; border-radius: 0; box-shadow: none; }
  .sw-compare.is-duo tbody td::before { display: none; }
  .sw-compare.is-duo thead th:last-child, .sw-compare.is-duo tbody td:last-child { border-left: 1px solid var(--sw-line); }
  .sw-compare.is-duo:not(.is-plain):not(.is-hl-2) tbody td:last-child { padding: 6px 12px 16px; border-radius: 0; box-shadow: none; }
}

/* ---- One-question flows ---------------------------------------------------------------------- */
/* Style hooks for the fit check, the Score and the intake: a card shell, a progress bar with a
   step count, a question title in DM Sans, large choices, fields, a back and next row, an inline
   error and a success state. The flows build their questions in script, so:
   - Fields need no class. Text inputs, textareas and selects inside .sw-flow get the field look.
   - Choices accept every selected-state convention the scripts already use: .is-selected,
     aria-pressed="true", aria-checked="true", or a checked radio or checkbox inside a label.
   - The status line is found by role="status", because the fit check rewrites its className.
   - .sw-flow__stage marks the container a script renders each question into. Inside it the class
     names the existing scripts already emit are honoured (the compatibility block below), so a
     flow adopts this look by adding classes to its STATIC markup only, never to its script. */
.sw-flow { position: relative; width: 100%; max-width: 680px; margin-inline: auto; padding: clamp(22px, 3.2vw, 40px);
  background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-lg); box-shadow: var(--sw-shadow); }
.sw-flow.is-flat { box-shadow: none; }
.sw-flow.is-wide { max-width: 860px; }
.sw-flow__head { display: grid; gap: 10px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.sw-flow__count { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--sw-t-eyebrow); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1.4; color: var(--sw-accent-ink); }
/* The fill is the track's first child, whatever it is called (span.bar, span, div.prog-fill), and
   scripts set its width inline. A static page can set --sw-flow-progress instead. */
.sw-flow__progress { height: 4px; border-radius: 999px; background: var(--sw-line); overflow: hidden; }
.sw-flow__progress > :first-child { display: block; height: 100%; width: var(--sw-flow-progress, 0%); border-radius: inherit; background: var(--sw-dark); transition: width .3s var(--sw-ease); }
.sw-flow__q { margin: 0 0 20px; font-family: var(--sw-font-display); font-size: clamp(1.3rem, 1.16rem + .6vw, 1.6rem); font-weight: 500;
  line-height: 1.25; letter-spacing: -.018em; color: var(--sw-text); text-wrap: balance; }
.sw-flow__q:focus { outline: none; }
.sw-flow__q:focus-visible { outline: 2px solid var(--sw-accent-ink); }
.sw-flow__note { margin: -8px 0 20px; max-width: 58ch; font-size: var(--sw-t-sm); line-height: 1.55; color: var(--sw-text-2); text-wrap: pretty; }
/* The intake empties its help line on questions that have none; an empty note takes no room. */
.sw-flow__note:empty { display: none; }
.sw-flow__choices { display: grid; gap: 10px; }
@media (min-width: 560px) { .sw-flow__choices.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A choice is a <button> or a <label> around a radio or checkbox. 56px tall at least, the whole
   row is the target. The drawn mark (#7F858D edge, 3.7:1 on white) is what says "pick one". */
.sw-flow__choice { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 14px 18px;
  font-family: var(--sw-font); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; text-align: left; color: var(--sw-text); text-wrap: balance;
  background: var(--sw-paper); border: 1px solid var(--sw-line-2); border-radius: 12px; cursor: pointer;
  transition: border-color .15s var(--sw-ease), background-color .15s var(--sw-ease), box-shadow .15s var(--sw-ease); }
.sw-flow__choice::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #7F858D; background: var(--sw-paper);
  transition: background-color .15s var(--sw-ease), border-color .15s var(--sw-ease), box-shadow .15s var(--sw-ease); }
.sw-flow__choice:hover { border-color: var(--sw-accent-ink); }
.sw-flow__choice small { display: block; margin-top: 2px; font-size: .9rem; font-weight: 400; line-height: 1.45; color: var(--sw-text-2); }
.sw-flow__choice input[type="radio"], .sw-flow__choice input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sw-flow__choice:has(input:focus-visible) { outline: 2px solid var(--sw-accent-ink); outline-offset: 3px; }
.sw-flow__choice:has(input:disabled), .sw-flow__choice:disabled { opacity: .55; cursor: not-allowed; }
.sw-flow__choice:has(input[type="checkbox"])::before { border-radius: 5px; }
.sw-flow__choice:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(input:checked)) {
  border-color: var(--sw-dark); background: var(--sw-tint-soft); box-shadow: inset 0 0 0 1px var(--sw-dark); }
.sw-flow__choice:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(input:checked))::before {
  border-color: var(--sw-dark); background: var(--sw-dark); box-shadow: inset 0 0 0 4px var(--sw-tint-soft); }
.sw-flow__choice:has(input[type="checkbox"]:checked)::before { box-shadow: none;
  background: var(--sw-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FAF8F4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
/* Fields: a flow's inputs need no class. 17px text so iOS never zooms, 52px tall. A honeypot
   (always tabindex="-1" on these pages) is left alone, so its own hiding rule stays in charge. */
.sw-flow :where(input:not([type="radio"], [type="checkbox"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="range"], [type="color"], [type="image"], [tabindex="-1"]), textarea:not([tabindex="-1"]), select) {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 13px 16px; font: inherit; font-size: 1.0625rem; line-height: 1.5; color: var(--sw-text);
  background: var(--sw-paper); border: 1px solid #7F858D; border-radius: 10px; }
.sw-flow :where(textarea) { min-height: 132px; resize: vertical; }
.sw-flow :where(select) { appearance: none; padding-right: 44px; cursor: pointer;
  background: var(--sw-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23505862' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 12px no-repeat; }
.sw-flow :where(input, textarea)::placeholder { color: var(--sw-text-3); opacity: 1; }
.sw-flow :where(input, textarea, select):focus { outline: 2px solid var(--sw-accent-ink); outline-offset: 1px; border-color: var(--sw-accent-ink); }
.sw-flow__label { display: block; margin-bottom: 8px; font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--sw-text); text-wrap: balance; }
.sw-flow__label small { font-size: .9em; font-weight: 400; color: var(--sw-text-3); }
.sw-flow__field + .sw-flow__field, .sw-flow__row + .sw-flow__field, .sw-flow__field + .sw-flow__row, .sw-flow__row + .sw-flow__row { margin-top: 18px; }
.sw-flow__row { display: grid; gap: 18px; align-items: start; }
.sw-flow__row > .sw-flow__field { margin-top: 0; }
/* A question built from a fieldset: the legend is the question title, with no browser inset. */
.sw-flow :where(fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; }
.sw-flow :where(legend) { padding: 0; }
.sw-flow :where(fieldset + fieldset) { margin-top: 28px; }
@media (min-width: 560px) { .sw-flow__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Back on the left, the forward control on the right, on every step. margin-left:auto rather than
   space-between, so the forward control stays right when Back is hidden on the first question. */
.sw-flow__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(22px, 2.8vw, 30px); padding-top: clamp(18px, 2.2vw, 22px); border-top: 1px solid var(--sw-line); }
.sw-flow__nav > :last-child:not(:first-child) { margin-left: auto; }
.sw-flow__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: -4px; padding: 10px 4px; background: none; border: 0; border-radius: 8px;
  font-family: var(--sw-font); font-size: .96875rem; font-weight: 600; line-height: 1.2; color: var(--sw-text-2); text-decoration: none; cursor: pointer; }
.sw-flow__back:hover { color: var(--sw-text); text-decoration: underline; text-underline-offset: .22em; }
.sw-flow__back svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Status and error. An empty live region keeps its place in the accessibility tree (collapsed,
   not display:none), so the first message is still announced. Error red #A33A34: 6.5:1 on white,
   5.8:1 on its own tint. */
.sw-flow__status, .sw-flow :where([role="status"]:not(.sw-sr)) { margin-top: 14px; font-size: .95rem; line-height: 1.5; color: var(--sw-text-2); }
.sw-flow__status:empty, .sw-flow :where([role="status"]:not(.sw-sr)):empty { margin-top: 0; }
.sw-flow__error:not(:empty), .sw-flow__status.is-error:not(:empty), .sw-flow :where([role="status"].err, [role="status"].is-error):not(:empty) {
  margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: #FBEFEE; border: 1px solid #F0D5D2; color: #A33A34; font-size: .95rem; font-weight: 500; line-height: 1.5; }
/* Success line: the .sw-ok look (see Forms above), for .sw-ok itself and for a flow's status. */
.sw-ok:not(:empty), .sw-flow__status.is-ok:not(:empty), .sw-flow :where([role="status"].ok, [role="status"].is-ok):not(:empty) {
  padding: 10px 14px 10px 40px; border-radius: 10px; border: 1px solid rgba(183, 154, 99, .42); color: var(--sw-text); font-weight: 500;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2317191C'/%3E%3Cpath d='M5.3 9.4l2.5 2.5 4.9-5.3' fill='none' stroke='%23B79A63' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 12px top 12px / 18px 18px no-repeat, rgba(183, 154, 99, .1); }
.sw-flow__done { padding: clamp(6px, 1.6vw, 18px) 0 4px; text-align: center; }
.sw-flow__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--sw-dark); color: var(--sw-champagne); font-size: 1.6rem; line-height: 1; }
.sw-flow__icon svg { width: 28px; height: 28px; }
.sw-flow__done h2 { font-family: var(--sw-font-display); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.95rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; }
.sw-flow__done p { max-width: 50ch; margin-inline: auto; color: var(--sw-text-2); }
.sw-flow__done p b { color: var(--sw-text); }
.sw-flow__done .sw-actions { justify-content: center; margin-top: 26px; }
/* Compatibility: the markup the fit check (request-a-call) and the Score already render. Scoped
   to .sw-flow__stage, so a bare .q or .opt anywhere else (the support forms use .opt for
   "optional") is never touched. Mirrors the rules above one for one. */
.sw-flow__stage :where(.q, h2) { margin: 0 0 20px; font-family: var(--sw-font-display); font-size: clamp(1.3rem, 1.16rem + .6vw, 1.6rem); font-weight: 500;
  line-height: 1.25; letter-spacing: -.018em; color: var(--sw-text); text-wrap: balance; }
.sw-flow__stage :where(.why, .hint) { margin: -8px 0 20px; max-width: 58ch; font-size: var(--sw-t-sm); line-height: 1.55; color: var(--sw-text-2); text-wrap: pretty; }
.sw-flow__stage :where(.opts) { display: grid; gap: 10px; }
.sw-flow__stage :where(.opt) { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0; padding: 14px 18px;
  font-family: var(--sw-font); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; text-align: left; color: var(--sw-text); text-wrap: balance;
  background: var(--sw-paper); border: 1px solid var(--sw-line-2); border-radius: 12px; cursor: pointer;
  transition: border-color .15s var(--sw-ease), background-color .15s var(--sw-ease), box-shadow .15s var(--sw-ease); }
.sw-flow__stage :where(.opt)::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #7F858D; background: var(--sw-paper);
  transition: background-color .15s var(--sw-ease), border-color .15s var(--sw-ease), box-shadow .15s var(--sw-ease); }
.sw-flow__stage :where(.opt):hover { border-color: var(--sw-accent-ink); }
.sw-flow__stage :where(.opt .dot) { display: none; }
.sw-flow__stage :where(.opt.sel, .opt[aria-pressed="true"]) { border-color: var(--sw-dark); background: var(--sw-tint-soft); box-shadow: inset 0 0 0 1px var(--sw-dark); }
.sw-flow__stage :where(.opt.sel, .opt[aria-pressed="true"])::before { border-color: var(--sw-dark); background: var(--sw-dark); box-shadow: inset 0 0 0 4px var(--sw-tint-soft); }
.sw-flow > :where(.done) { padding: clamp(6px, 1.6vw, 18px) 0 4px; text-align: center; }
.sw-flow > :where(.done) > :where(.tick) { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--sw-dark); color: var(--sw-champagne); font-size: 1.6rem; line-height: 1; }
.sw-flow > :where(.done) h2 { font-family: var(--sw-font-display); font-size: clamp(1.5rem, 1.3rem + .8vw, 1.95rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; }
.sw-flow > :where(.done) p { max-width: 50ch; margin-inline: auto; color: var(--sw-text-2); }
.sw-flow > :where(.done) p b { color: var(--sw-text); }

/* ---- Message page ---------------------------------------------------------------------------- */
/* 404, thank-you and confirmation pages: one centred column under the normal header. An icon
   (or the big 404), the h1, a line of text, optional numbered next steps, the actions. .is-card on
   the inner block puts it on a raised card, which suits a confirmation after a purchase. */
.sw-msg { padding-block: clamp(56px, 8vw, 112px); text-align: center; }
@media (min-width: 700px) { .sw-msg { display: grid; place-items: center; min-height: min(760px, calc(100vh - var(--sw-header-h))); } }
.sw-msg__in { width: 100%; max-width: 640px; margin-inline: auto; }
.sw-msg__in.is-card { max-width: 700px; padding: clamp(28px, 4.4vw, 56px) clamp(20px, 4.4vw, 56px); background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-lg); box-shadow: var(--sw-shadow); }
.sw-msg__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 26px; border-radius: 50%; background: var(--sw-dark); color: var(--sw-champagne); }
.sw-msg__icon svg { width: 28px; height: 28px; }
.sw-msg__icon.is-soft { background: var(--sw-tint-soft); color: var(--sw-accent-ink); }
.sw-msg__code { display: block; margin-bottom: 26px; font-family: var(--sw-font-display); font-size: clamp(4.5rem, 3.3rem + 5.2vw, 8rem); font-weight: 500; line-height: .9; letter-spacing: -.05em; color: var(--sw-dark); }
.sw-msg__code::after { content: ""; display: block; width: 44px; height: 2px; margin: 24px auto 0; background: var(--sw-champagne); }
.sw-msg .sw-h1 { font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem); }
.sw-msg .sw-lead { max-width: 52ch; margin: 18px auto 0; text-wrap: balance; }
.sw-msg .sw-actions { justify-content: center; margin-top: 30px; }
.sw-msg .sw-fine { max-width: 56ch; margin: 26px auto 0; text-wrap: balance; }
/* Numbered next steps. Needs role="list": Safari drops list semantics once markers are removed. */
.sw-msg__steps { list-style: none; counter-reset: sw-msg; max-width: 540px; margin: 32px auto 0; text-align: left; border-top: 1px solid var(--sw-line); }
.sw-msg__steps li { counter-increment: sw-msg; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sw-line);
  font-size: .98rem; line-height: 1.55; color: var(--sw-text-2); }
.sw-msg__steps li::before { content: counter(sw-msg); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sw-tint-soft);
  color: var(--sw-accent-ink); font-size: .88rem; font-weight: 600; }
.sw-msg__steps b { color: var(--sw-text); font-weight: 600; }

/* ---- Plan price block ------------------------------------------------------------------------ */
/* The price at the top of a plan page. The Growth and Scale pages must keep their exact
   <span class="price-big"> and <span class="price-term"> (a test reads that markup), so those two
   class names are styled here as well as the system names. Works on ivory, on a card (.is-card)
   and on a dark band. */
.sw-pricehead { display: block; }
.sw-pricehead__row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.sw-pricehead :is(.price-big, .sw-pricehead__amount) { font-family: var(--sw-font-display); font-size: clamp(2.6rem, 2rem + 2.2vw, 3.75rem); font-weight: 500;
  line-height: 1; letter-spacing: -.035em; color: var(--sw-text); font-variant-numeric: lining-nums; }
.sw-pricehead__unit { font-size: 1.05rem; color: var(--sw-text-2); }
.sw-pricehead :is(.price-term, .sw-pricehead__term) { display: block; flex-basis: 100%; margin-top: 12px; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--sw-text-2); text-wrap: pretty; }
.sw-pricehead__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.sw-pricehead__meta li { padding: 5px 13px; border: 1px solid var(--sw-line-2); border-radius: 999px; background: var(--sw-paper); font-size: .875rem; line-height: 1.4; color: var(--sw-text-2); }
.sw-pricehead__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.sw-pricehead__fine { margin-top: 16px; max-width: 56ch; font-size: var(--sw-t-xs); line-height: 1.55; color: var(--sw-text-3); text-wrap: pretty; }
.sw-pricehead .sw-note { margin-top: 22px; }
.sw-pricehead.is-card { padding: clamp(24px, 3vw, 36px); background: var(--sw-paper); border: 1px solid var(--sw-line); border-radius: var(--sw-radius-lg); box-shadow: var(--sw-shadow); }
.sw-pricehead.is-card .sw-pricehead__meta li { background: var(--sw-ivory); }
.sw-dark .sw-pricehead :is(.price-big, .sw-pricehead__amount), .sw-hero .sw-pricehead :is(.price-big, .sw-pricehead__amount) { color: var(--sw-on-dark); }
.sw-dark .sw-pricehead :is(.price-term, .sw-pricehead__term, .sw-pricehead__unit, .sw-pricehead__fine),
.sw-hero .sw-pricehead :is(.price-term, .sw-pricehead__term, .sw-pricehead__unit, .sw-pricehead__fine) { color: var(--sw-on-dark-2); }
.sw-dark .sw-pricehead__meta li, .sw-hero .sw-pricehead__meta li { background: transparent; border-color: var(--sw-on-dark-line); color: var(--sw-on-dark-2); }

/* ---- Promoted from phase 1 ------------------------------------------------------------------- */
/* Stacked card (was pg-card): a column, so a footer can sit on the bottom edge and a row of cards
   ends on one line. .is-ruled adds the label-and-answer footer (was pg-fit, "Usually fits"). */
.sw-card.is-stack { display: flex; flex-direction: column; }
.sw-card__foot { margin-top: auto; padding-top: 22px; }
.sw-card__foot.is-ruled { padding-top: 24px; }
.sw-card__foot.is-ruled::before { content: ""; display: block; height: 1px; margin-bottom: 16px; background: var(--sw-line); }
.sw-card__label { display: block; margin-bottom: 4px; font-size: var(--sw-t-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--sw-text-3); }
.sw-card__foot.is-ruled p { font-weight: 600; color: var(--sw-text); }
.sw-card__foot.is-ruled p a { color: var(--sw-accent-ink); text-decoration: underline; text-decoration-color: rgba(80, 88, 98, .4); }
.sw-card__foot.is-ruled p a:hover { text-decoration-color: currentColor; }

/* Card link (was the homepage's pg-cardlink): the whole card is one link, for case studies and
   comparisons. Hover lifts it; reduced motion keeps it still. */
.sw-cardlink { display: flex; flex-direction: column; color: inherit; text-decoration: none;
  transition: border-color .18s var(--sw-ease), transform .18s var(--sw-ease), box-shadow .18s var(--sw-ease); }
.sw-cardlink:hover { border-color: #C6CAD0; transform: translateY(-2px); box-shadow: var(--sw-shadow); }
.sw-cardlink:focus-visible { border-radius: var(--sw-radius); }
.sw-cardlink__kicker { display: block; font-size: var(--sw-t-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--sw-accent-ink); }
.sw-cardlink h3 { margin-top: 14px; font-size: clamp(1.25rem, 1rem + .6vw, 1.45rem); font-weight: 500; letter-spacing: -.018em; }
.sw-card.sw-cardlink h3 + p { margin-top: 10px; text-wrap: balance; }
.sw-cardlink__fact { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sw-line); font-size: var(--sw-t-sm); line-height: 1.5; color: var(--sw-text-3); text-wrap: balance; }
.sw-cardlink__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: .96875rem; font-weight: 600; line-height: 1.3; color: var(--sw-accent-ink); }
.sw-cardlink__more .sw-arrow { transition: transform .18s var(--sw-ease); }
.sw-cardlink:hover .sw-cardlink__more .sw-arrow { transform: translateX(3px); }

/* Key legend (was pg-key): a coloured dot, a name, one line. The colour is never the only
   carrier; every dot has its label beside it. */
.sw-key { list-style: none; border-top: 1px solid var(--sw-line); }
.sw-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--sw-line); }
.sw-key i { grid-row: span 2; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--sw-key, var(--sw-accent)); }
.sw-key b { font-family: var(--sw-font-display); font-weight: 600; line-height: 1.4; }
.sw-key span { font-size: var(--sw-t-sm); line-height: 1.5; color: var(--sw-text-2); }
.sw-key .is-accent { --sw-key: var(--sw-accent); }
.sw-key .is-champagne { --sw-key: var(--sw-champagne); }
.sw-key .is-muted { --sw-key: #A3A8AE; }
.sw-key.is-inline { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 0; }
.sw-key.is-inline li { grid-template-columns: 12px auto; column-gap: 10px; align-items: center; padding: 0; border-bottom: 0; }
.sw-key.is-inline i { grid-row: auto; margin-top: 0; }
.sw-key.is-inline b { font-family: var(--sw-font); font-size: var(--sw-t-sm); font-weight: 500; color: var(--sw-text-2); }

/* Tags (was pg-pills): short labels in outlined chips, such as "What we handled". */
.sw-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sw-tags li { padding: 6px 14px; border: 1px solid var(--sw-line-2); border-radius: 999px; background: var(--sw-paper); font-size: var(--sw-t-sm); line-height: 1.4; color: var(--sw-text-2); }
.sw-dark .sw-tags li { background: transparent; border-color: var(--sw-on-dark-line); color: var(--sw-on-dark-2); }

/* Statement (was pg-statement): one sentence set as a pull line under a short champagne rule. */
.sw-statement::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 18px; background: var(--sw-champagne); }
.sw-statement, .sw-statement p { font-family: var(--sw-font-display); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 500; line-height: 1.35; letter-spacing: -.012em; color: var(--sw-text); max-width: 34ch; text-wrap: balance; }
.sw-dark .sw-statement, .sw-dark .sw-statement p { color: var(--sw-on-dark); }

/* Note title (was pg-note-h) for a note that opens with a heading, and a white note for tinted bands. */
.sw-note__title { margin-bottom: 8px; font-family: var(--sw-font-display); font-size: 1.12rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--sw-text); text-wrap: balance; }
.sw-note.is-paper { background: var(--sw-paper); }

/* Framed shot (was pg-shot): a real product render in .sw-frame, with a bar label that truncates
   instead of pushing the "Sample data" pill off a phone screen. */
.sw-shot { margin: 0; min-width: 0; }
.sw-shot .sw-frame__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-shot .sw-pill { flex: 0 0 auto; white-space: nowrap; }
.sw-shot .sw-cap { text-wrap: pretty; }

/* ---- Footer ---------------------------------------------------------------------------------- */
.sw-footer { background: var(--sw-ivory); border-top: 1px solid var(--sw-line); padding-top: clamp(48px, 5vw, 72px); }
.sw-footer__top { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px); padding-bottom: 44px; }
.sw-footer__brand img { height: 40px; width: auto; }
@media (max-width: 560px) { .sw-footer__brand img { height: 32px; } }
@media (max-width: 359px) { .sw-footer__brand img { height: 28px; } }
.sw-footer__brand p { margin-top: 16px; font-size: .94rem; color: var(--sw-text-2); max-width: 30ch; text-wrap: balance; }
.sw-footer h2 { font-family: var(--sw-font); font-size: .95rem; font-weight: 600; letter-spacing: 0; margin-bottom: 14px; }
.sw-footer ul { list-style: none; display: grid; gap: 4px; }
.sw-footer li a, .sw-footer li button { display: inline-block; padding: 5px 0; font-size: .93rem; color: var(--sw-text-2); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; text-wrap: balance; }
.sw-footer li a:hover, .sw-footer li button:hover { color: var(--sw-text); text-decoration: underline; }
.sw-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px 28px; border-top: 1px solid var(--sw-line); font-size: .86rem; color: var(--sw-text-3); }
.sw-footer__bottom nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.sw-footer__bottom a { color: var(--sw-text-2); text-decoration: none; }
.sw-footer__bottom a:hover { text-decoration: underline; }
@media (max-width: 899px) { .sw-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 419px) { .sw-footer__top { grid-template-columns: minmax(0, 1fr); } }

/* ---- Touch targets --------------------------------------------------------------------------- */
/* On touch screens the small text links get a hit area of at least 44px tall. .sw-link uses an
   invisible overlay so the layout does not move; the stacked footer and hero-proof links grow
   their own padding instead, so neighbouring targets never overlap. */
@media (pointer: coarse) {
  .sw-link { position: relative; }
  .sw-link::after { content: ""; position: absolute; inset: -10px -4px -11px; } /* -11: the 1px underline sits outside the padding box */
  .sw-footer li a, .sw-footer li button { padding-block: 10px; }
  .sw-footer__bottom a { display: inline-block; padding-block: 11px; }
  .sw-hero__proof a { display: inline-block; padding-block: 8px; border-bottom: 0; }
  .sw-hero__proof a:hover { text-decoration: underline; }
  /* Phase 2: overlays for the inline crumb and card-footer links (the row keeps its height; the
     side insets stay small so neighbouring targets never overlap), a full-height row for each
     contents link. */
  .sw-crumb a, .sw-card__foot.is-ruled p a { position: relative; }
  .sw-crumb a::after, .sw-card__foot.is-ruled p a::after { content: ""; position: absolute; inset: -12px -3px; }
  .sw-toc a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
}

/* ---- Motion ---------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .sw-btn:hover, .sw-btn:hover .sw-arrow, .sw-link:hover .sw-arrow { transform: none; }
  .sw-cardlink:hover, .sw-cardlink:hover .sw-cardlink__more .sw-arrow { transform: none; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Forced colours: the check circle and its tick (or dash) keep their own colours as one pair, so
   the mark never lands on a system colour it cannot be seen against. On the dark band the pair switches
   to the light-band colours, because the dark band behind it is replaced by Canvas. The FAQ icon is a
   gradient, which forced colours removes, so it becomes a text plus or minus. */
@media (forced-colors: active) {
  .sw-btn { border: 1px solid ButtonText; }
  .sw-check li::before, .sw-check li::after { forced-color-adjust: none; }
  .sw-dark .sw-check li::before { background: var(--sw-tint); }
  .sw-dark .sw-check li::after { border-color: var(--sw-accent-ink); }
  .sw-faq summary::after { content: "+"; content: "+" / ""; width: auto; height: auto; margin-top: 0; background: none; line-height: inherit; }
  .sw-faq details[open] summary::after { content: "-"; content: "-" / ""; background: none; }
  /* Phase 2. A chosen answer and the progress fill are drawn with backgrounds, which forced
     colours removes, so both take the system Highlight instead; the legend dots keep their own. */
  .sw-flow__choice:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(input:checked)),
  .sw-flow__stage :where(.opt.sel, .opt[aria-pressed="true"]) { border: 2px solid Highlight; }
  .sw-flow__choice::before, .sw-flow__stage :where(.opt)::before { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .sw-flow__choice:is(.is-selected, [aria-pressed="true"], [aria-checked="true"], :has(input:checked))::before,
  .sw-flow__stage :where(.opt.sel, .opt[aria-pressed="true"])::before { border-color: Highlight; background: Highlight; box-shadow: inset 0 0 0 4px Canvas; }
  .sw-flow__progress { border: 1px solid CanvasText; }
  .sw-flow__progress > :first-child { forced-color-adjust: none; background: Highlight; }
  .sw-key i { forced-color-adjust: none; }
  .sw-compare:not(.is-plain):not(.is-hl-2) thead th:last-child, .sw-compare.is-hl-2 thead th:nth-child(2) { border-top: 3px solid Highlight; }
  .sw-toc a[aria-current="true"], .sw-toc a.is-active { border-left-color: Highlight; }
}

/* ---- Print ----------------------------------------------------------------------------------- */
/* Only pages that carry long-form text (legal, posts, case studies) change in print: the chrome
   goes, the text runs full width in black, and outside links print their address. Scoped with
   :has(.sw-prose), so the marketing pages print exactly as they did. */
@media print {
  body:has(.sw-prose) { background: #fff; color: #000; }
  body:has(.sw-prose) :is(.sw-skip, .sw-header, .sw-footer, .sw-toc, .sw-crumb, .sw-close) { display: none !important; }
  body:has(.sw-prose) .sw-pagehead { padding: 0 0 12pt; border: 0; background: none; }
  body:has(.sw-prose) .sw-doc { display: block; }
  .sw-prose { max-width: none; font-size: 11pt; line-height: 1.5; color: #000; }
  .sw-prose :is(h2, h3, h4, strong, b, blockquote) { color: #000; }
  .sw-prose :is(h2, h3, h4) { break-after: avoid; page-break-after: avoid; }
  .sw-prose :is(blockquote, table, pre, figure) { break-inside: avoid; page-break-inside: avoid; }
  .sw-prose p { orphans: 3; widows: 3; }
  .sw-prose a { color: #000; text-decoration-color: currentColor; }
  .sw-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #333; overflow-wrap: anywhere; }
}