/* 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 #4A504C on ivory ................... 7.8:1
     text-3 #5E6561 on ivory ................... 5.6: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: #4A504C;
  --sw-text-3: #5E6561;
  --sw-line: #E4DFD6;
  --sw-line-2: #D5DCD7;
  --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. */
  --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: #1C1F1E; --sl-charcoal-2: #1E2221; --sl-charcoal-3: #373B39;
  --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: #4A504C; --text-tertiary: #5E6561;
  --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; }
.sw-logo img { height: 34px; 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: 28px; }
  .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: 24px; }
  .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: 26px; height: 26px; margin: 0 auto 14px; 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-xs); color: var(--sw-text-3); max-width: 90ch; }
@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 */
.sw-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.sw-steps li { padding: 4px clamp(16px, 2vw, 28px) 4px 0; }
.sw-steps li + li { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--sw-line); }
.sw-steps .sw-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--sw-tint-soft); color: var(--sw-accent-ink); margin-bottom: 22px; }
.sw-steps .sw-ico svg { width: 20px; height: 20px; }
.sw-steps .sw-num { margin-bottom: 8px; }
.sw-steps h3 { font-size: 1.22rem; font-weight: 500; letter-spacing: -.015em; }
.sw-steps p { margin-top: 10px; 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 .sw-ico { background: rgba(226, 228, 231, .12); color: var(--sw-champagne); }
.sw-dark .sw-steps p { color: var(--sw-on-dark-2); }
@media (max-width: 959px) { .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); display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; }
  .sw-steps li:first-child { border-top: 0; padding-top: 0; }
  .sw-steps .sw-ico { grid-row: span 3; margin: 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 #818985; border-radius: 10px; padding: 12px 14px; line-height: 1.5;
}
/* Field edge #818985: 3.6:1 on white, 3.4:1 on ivory, 3.1:1 on warm and tint-soft (non-text minimum 3:1).
   Placeholder text-3: 6.0: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; }
.sw-ok { color: #2F6B4F; font-size: .92rem; font-weight: 500; }

/* ---- 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: 32px; width: auto; }
.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; }
}

/* ---- 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; }
}
@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; }
}