/*
  Sarafi design system: components.
  Framework-free, so the same file works in Next.js and in a WordPress theme.
  Load ../dist/tokens.css first. With Tailwind v4, import this into the components layer:
    @import "tailwindcss";
    @import "../design-system/dist/tokens.css";
    @import "../design-system/dist/tailwind.theme.css";
    @import "../design-system/css/sarafi.css" layer(components);
  Site and page CSS go into the same layer after it: light-theme rules here outrank site rules by specificity.
  Every component reads the surface tokens (--sf-bg, --sf-fg, ...), so it adapts
  to the section it sits in: wrap sections in .sf-dark, .sf-light or .sf-white.
  .is-hover, .is-active and .is-focus mirror the pseudo-classes for documentation.
*/

:root {
  --sf-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sf-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sf-glow: 0 0 18px rgba(140, 77, 255, 0.5);
  /* Badge labels on light surfaces sit on their own tint, so they are a step darker than the *-text tokens
     (at least 4.8:1 on white, off-white and mist). */
  --sf-badge-success-text: #22694A;
  --sf-badge-warning-text: #7A5512;
  --sf-badge-error-text: #A8354B;
  --sf-badge-info-text: #1E4FD8;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sf-font-sans);
  font-size: var(--sf-fs-body);
  line-height: var(--sf-lh-body);
  color: var(--sf-fg);
  background-color: var(--sf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
/* Headings without a type class avoid a lone last word; .sf-h* and .sf-display still balance. */
:where(h1, h2, h3, h4, h5, h6) { text-wrap: pretty; }
:where(img, video) { display: block; max-width: 100%; height: auto; }
:focus-visible, .is-focus { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
/* Sideways scrollers get tabindex from sarafi.js while they overflow. The ring is inset, so it still shows
   when the scroller runs edge to edge. */
[data-sf-scroller]:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: -2px; }
::selection { background: var(--sf-soft-lavender); color: var(--sf-midnight); }
.sf-dark, .sf-light, .sf-white { background-color: var(--sf-bg); color: var(--sf-fg); }

.sf-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Keeps a short phrase on one line, e.g. inside a headline. */
.sf-nowrap { white-space: nowrap; }
.sf-skip-link { position: absolute; left: 16px; top: -100px; z-index: var(--sf-z-toast); padding: 12px 16px; border-radius: var(--sf-radius-sm); background: var(--sf-white); color: var(--sf-midnight); font-weight: var(--sf-fw-semibold); }
.sf-skip-link:focus { top: 16px; }

/* In-page anchors (and the skip link) must clear the fixed header. */
html { scroll-padding-top: calc(var(--sf-header-height) + 16px); }
/* Cards that fade in, tilt or sit in a 3D scene can reach a few pixels past the page edge before they settle.
   That must never make the page scroll sideways (it showed as a horizontal scrollbar on desktop). clip keeps the
   sticky header working; older browsers fall back to hidden on the body, which the viewport takes over. */
main { overflow-x: clip; }
html { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

/* ---------- Smooth movement between and inside pages (only when motion is welcome) ----------
   In-page links (contents lists, "Book" buttons) glide to their target. Going from one page to the next, browsers
   that support cross-document view transitions cross-fade the content while the header and the mobile tab bar
   stay in place; other browsers simply load the page. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  .sf-header { view-transition-name: sf-header; }
  .sf-tabbar { view-transition-name: sf-tabbar; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout primitives (Tailwind handles the rest in Next.js) ---------- */
.sf-container { width: 100%; max-width: calc(var(--sf-container) + 2 * var(--sf-gutter-sm)); margin-inline: auto; padding-inline: var(--sf-gutter-sm); }
@media (min-width: 768px) { .sf-container { max-width: calc(var(--sf-container) + 2 * var(--sf-gutter-md)); padding-inline: var(--sf-gutter-md); } }
.sf-section { padding-block: var(--sf-section-y); }
.sf-stack > * + * { margin-top: var(--sf-stack-gap, var(--sf-space-16)); }
.sf-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-cluster-gap, var(--sf-space-12)); }
.sf-measure { max-width: var(--sf-measure); }
/* .sf-glow goes on a dark section that has a brand glow behind its text: its lighter muted ink is a token row in
   tokens.css (surface.dark-glow in tokens.json), so it sits unlayered with the other surface rows. */

/* ---------- Typography ---------- */
.sf-display-xl, .sf-display, .sf-h1, .sf-h2, .sf-h3, .sf-h4 { font-family: var(--sf-font-sans); color: var(--sf-fg); text-wrap: balance; }
.sf-display-xl { font-size: var(--sf-fs-display-xl); line-height: var(--sf-lh-display-xl); letter-spacing: var(--sf-ls-display-xl); font-weight: var(--sf-tw-display-xl); }
.sf-display { font-size: var(--sf-fs-display); line-height: var(--sf-lh-display); letter-spacing: var(--sf-ls-display); font-weight: var(--sf-tw-display); }
.sf-h1 { font-size: var(--sf-fs-h1); line-height: var(--sf-lh-h1); letter-spacing: var(--sf-ls-h1); font-weight: var(--sf-tw-h1); }
.sf-h2 { font-size: var(--sf-fs-h2); line-height: var(--sf-lh-h2); letter-spacing: var(--sf-ls-h2); font-weight: var(--sf-tw-h2); }
.sf-h3 { font-size: var(--sf-fs-h3); line-height: var(--sf-lh-h3); letter-spacing: var(--sf-ls-h3); font-weight: var(--sf-tw-h3); }
.sf-h4 { font-size: var(--sf-fs-h4); line-height: var(--sf-lh-h4); letter-spacing: var(--sf-ls-h4); font-weight: var(--sf-tw-h4); }
.sf-body-lg { font-size: var(--sf-fs-body-lg); line-height: var(--sf-lh-body-lg); }
.sf-body { font-size: var(--sf-fs-body); line-height: var(--sf-lh-body); }
.sf-small { font-size: var(--sf-fs-small); line-height: var(--sf-lh-small); }
.sf-caption { font-size: var(--sf-fs-caption); line-height: var(--sf-lh-caption); color: var(--sf-fg-muted); }
.sf-eyebrow { display: block; font-size: var(--sf-fs-label); line-height: var(--sf-lh-label); letter-spacing: var(--sf-ls-label); font-weight: var(--sf-tw-label); text-transform: uppercase; color: var(--sf-fg-muted); }
.sf-muted { color: var(--sf-fg-muted); }
.sf-lead { font-size: var(--sf-fs-body-lg); line-height: var(--sf-lh-body-lg); color: var(--sf-fg-muted); max-width: 56ch; text-wrap: pretty; }
/* One phrase per headline. Never together with .sf-gradient-text. */
.sf-serif { font-family: var(--sf-font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--sf-fg-accent); }
/* Large text only (24px and up). */
.sf-gradient-text { background: var(--sf-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-prose { max-width: var(--sf-measure); text-wrap: pretty; }
.sf-prose > * + * { margin-top: 1em; }
/* Buttons inside prose keep their own colours; :where() keeps this rule at 0,1,1. */
.sf-prose a:where(:not(.sf-btn)) { color: var(--sf-link); text-underline-offset: 3px; }
.sf-rule { width: 72px; height: 2px; border: 0; border-radius: 2px; background: var(--sf-gradient-brand); margin: 0; }
/* Light theme: section eyebrows lead with a short solid Electric Blue dash (solid, not the gradient, so the gradient
   budget stays with the headline word and the rule). The label stays muted ink; card and form eyebrows keep the
   plain label. Pages add the same dash to eyebrows that sit outside an .sf-section. */
:root[data-theme="light"] .sf-section .sf-eyebrow:not(:is(.sf-card, .sf-form) .sf-eyebrow) { letter-spacing: 0.14em; }
:root[data-theme="light"] .sf-section .sf-eyebrow:not(:is(.sf-card, .sf-form) .sf-eyebrow)::before {
  content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 10px 0 0; vertical-align: 0.28em;
  border-radius: 2px; background: var(--sf-electric-blue);
}
/* Light theme: thin rules show both brand ends (the brand hexes at 90deg). */
:root[data-theme="light"] .sf-rule { background: var(--sf-gradient-rule); }
/* Light theme ink ladder: Midnight headings, ink running text (--sf-fg-body, #3A4155 on paper) and muted meta. Leads,
   card copy and FAQ answers step up from 6.9:1 to 10.2:1; eyebrows, labels, captions, stat labels and breadcrumbs stay
   muted, so meta reads as meta. At 0,3,0 it also outranks a page's `.x .sf-lead { color: var(--sf-fg) }` (0,2,0), so
   in light the two emphasised leads (About's founder note, the case study's challenge) are ink, not Midnight, one step
   lighter than the prose under them, as in the approved preview. The dark theme keeps them white. */
:root[data-theme="light"] :is(.sf-lead, .sf-card__text, .sf-accordion__panel) { color: var(--sf-fg-body); }

/* ---------- Icons ---------- */
.sf-icon { display: inline-block; flex: none; width: 24px; height: 24px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sf-icon--sm { width: 16px; height: 16px; stroke-width: 1.75; }
.sf-icon--lg { width: 32px; height: 32px; }
.sf-icon-tile { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--sf-radius-sm); border: 1px solid var(--sf-border); color: var(--sf-fg); }
/* Light theme: one icon treatment everywhere, a borderless blue-to-purple well with a 1px purple inner edge and the
   purple icon (4.4:1 on the well) at a 1.75 stroke. */
:root[data-theme="light"] .sf-icon-tile {
  border-color: transparent;
  background: var(--sf-well);
  box-shadow: inset 0 0 0 1px rgba(131, 64, 255, 0.10);
  color: var(--sf-purple-on-light);
}
:root[data-theme="light"] .sf-icon-tile .sf-icon { stroke-width: 1.75; }

/* ---------- Buttons ---------- */
.sf-btn {
  --sf-btn-h: 48px;
  --sf-spinner: currentColor;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-space-8);
  min-height: var(--sf-btn-h); padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--sf-radius-sm);
  background: transparent; color: var(--sf-fg);
  font: var(--sf-fw-semibold) 0.9375rem/1 var(--sf-font-sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter var(--sf-dur-fast) var(--sf-ease-out), background-color var(--sf-dur-fast) var(--sf-ease-out), border-color var(--sf-dur-fast) var(--sf-ease-out), transform var(--sf-dur-fast) var(--sf-ease-out);
}
.sf-btn .sf-icon { width: 18px; height: 18px; stroke-width: 2; transition: transform var(--sf-dur-base) var(--sf-ease-out); }
/* The arrow at the end of a button leans forward on hover, like the arrow links do. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .sf-btn:hover .sf-icon:has(use[href$="#arrow-right"]) { transform: translateX(3px); } }
.sf-btn:active, .sf-btn.is-active { transform: translateY(1px); }
.sf-btn--primary { background: var(--sf-gradient-cta); color: #FFFFFF; --sf-spinner: #FFFFFF; }
.sf-btn--primary:hover, .sf-btn--primary.is-hover { filter: brightness(0.92); }
.sf-btn--primary:active, .sf-btn--primary.is-active { filter: brightness(0.86); }
.sf-btn--secondary, .sf-btn--whatsapp { border-color: var(--sf-border-strong); }
.sf-btn--secondary:hover, .sf-btn--secondary.is-hover,
.sf-btn--whatsapp:hover, .sf-btn--whatsapp.is-hover { background: var(--sf-hover); border-color: var(--sf-fg-muted); }
.sf-btn--ghost { padding-inline: 4px; min-height: 40px; color: var(--sf-link); }
.sf-btn--ghost:hover, .sf-btn--ghost.is-hover { text-decoration: underline; text-underline-offset: 4px; }
.sf-btn--sm { --sf-btn-h: 40px; padding: 0 14px; font-size: 0.875rem; }
.sf-btn--lg { --sf-btn-h: 56px; padding: 0 24px; font-size: 1rem; }
.sf-btn--block { width: 100%; }
.sf-btn--icon { width: var(--sf-btn-h); padding: 0; border-color: var(--sf-border-strong); }
.sf-btn--icon:hover, .sf-btn--icon.is-hover { background: var(--sf-hover); }
.sf-btn:disabled, .sf-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.sf-btn[aria-disabled="true"] { pointer-events: none; }
.sf-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.sf-btn[aria-busy="true"] .sf-icon { visibility: hidden; }
.sf-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid var(--sf-spinner); border-right-color: transparent;
  animation: sf-spin 0.7s linear infinite;
}
.sf-btn--secondary[aria-busy="true"], .sf-btn--whatsapp[aria-busy="true"], .sf-btn--ghost[aria-busy="true"] { --sf-spinner: var(--sf-fg); }
@keyframes sf-spin { to { transform: rotate(360deg); } }
/* Light theme (shape unchanged): colour only ever sits under the primary CTA, and outline buttons turn into white
   sheets on the hairline. No rule here sets `color`, so the aria-busy spinner keeps working. Each hover rule also
   takes .is-hover for the style guide; :is() keeps the specificity of the plain :hover. */
:root[data-theme="light"] .sf-btn--primary { box-shadow: var(--sf-shadow-cta); transition: filter var(--sf-dur-fast) var(--sf-ease-out), transform var(--sf-dur-fast) var(--sf-ease-out), box-shadow var(--sf-dur-fast) var(--sf-ease-out); }
:root[data-theme="light"] .sf-btn--primary:is(:hover, .is-hover) { box-shadow: var(--sf-shadow-cta-hover); }
:root[data-theme="light"] :is(.sf-btn--secondary, .sf-btn--whatsapp) {
  background-color: var(--sf-white); border-color: var(--sf-hairline-strong); box-shadow: var(--sf-shadow-1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-theme="light"] :is(.sf-btn--secondary, .sf-btn--whatsapp):is(:hover, .is-hover) { background-color: var(--sf-cloud); border-color: var(--sf-control-border); }
/* The CTA lifts on hover only when motion is welcome; :active comes after it so a press still sinks. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="light"] .sf-btn--primary:is(:hover, .is-hover) { transform: translateY(-1px); }
  :root[data-theme="light"] .sf-btn--primary:active { transform: translateY(1px); }
}

/* ---------- Links ---------- */
.sf-link { color: var(--sf-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sf-link:hover, .sf-link.is-hover { text-decoration-thickness: 2px; }
.sf-link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--sf-link); font-weight: var(--sf-fw-semibold); text-decoration: none; }
/* On touch screens both of these are the tap target, so they get to 44px without changing how they look. */
@media (pointer: coarse) { .sf-link-arrow { min-height: 44px; } }
.sf-link-arrow::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--sf-icon-arrow) center / contain no-repeat; mask: var(--sf-icon-arrow) center / contain no-repeat;
  transition: transform var(--sf-dur-fast) var(--sf-ease-out);
}
.sf-link-arrow:hover, .sf-link-arrow.is-hover { text-decoration: underline; text-underline-offset: 4px; }
.sf-link-arrow:hover::after, .sf-link-arrow.is-hover::after, a.sf-card:hover .sf-link-arrow::after { transform: translateX(3px); }
/* Light theme: a link inside a card turns Midnight with its arrow and goes blue on hover, so each card has one accent.
   Page-level and prose links stay blue, as the brand book asks, and so do links in the Midnight final box. */
:root[data-theme="light"] .sf-card .sf-link-arrow:not(.final *) { color: var(--sf-fg); }
:root[data-theme="light"] :is(.sf-card .sf-link-arrow:hover, a.sf-card:hover .sf-link-arrow):not(.final *) { color: var(--sf-link); }

/* ---------- Chips and badges ---------- */
.sf-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--sf-border-strong); border-radius: var(--sf-radius-pill);
  background: transparent; color: var(--sf-fg);
  font: var(--sf-fw-medium) 0.8125rem/1 var(--sf-font-sans); text-decoration: none; white-space: nowrap;
}
button.sf-chip, a.sf-chip { cursor: pointer; min-height: 36px; transition: background-color var(--sf-dur-fast) var(--sf-ease-out), color var(--sf-dur-fast) var(--sf-ease-out); }
/* On touch screens a chip that is a link or a button is a tap target, so it grows to 44px. */
@media (pointer: coarse) { button.sf-chip, a.sf-chip { min-height: 44px; padding-block: 10px; } }
button.sf-chip:hover, a.sf-chip:hover, .sf-chip.is-hover { background: var(--sf-hover); }
/* The :hover variants keep the selected fill while the pointer (or a sticky touch hover) is still on the chip. */
.sf-chip[aria-pressed="true"], .sf-chip[aria-pressed="true"]:hover,
.sf-chip[aria-current="page"], .sf-chip[aria-current="page"]:hover,
.sf-chip[aria-current="true"], .sf-chip[aria-current="true"]:hover { background: var(--sf-fg); border-color: var(--sf-fg); color: var(--sf-bg); }
/* Light theme: link and button chips are quiet tinted tags on a hairline instead of 24% outlines (an outline means
   "press me"). Static tags (a span) are filled and borderless, except in the Midnight final box. */
:root[data-theme="light"] .sf-chip { border-color: var(--sf-hairline); background-color: var(--sf-tint); }
:root[data-theme="light"] :is(:is(a, button).sf-chip:hover, .sf-chip.is-hover) { background-color: rgba(36, 94, 255, 0.07); border-color: rgba(36, 94, 255, 0.30); }
:root[data-theme="light"] span.sf-chip:not(.final *) { border-color: transparent; background-color: rgba(36, 60, 160, 0.06); }
/* The chip in a featured card is the one filled highlight badge: purple ink on Soft Lavender (6.7:1). */
:root[data-theme="light"] .sf-card--featured :is(span, a).sf-chip { border-color: transparent; background: var(--sf-badge-bg); color: var(--sf-purple-ink); font-weight: var(--sf-fw-semibold); }
/* Light theme, selected chip or choice chip (Forms): the tab bar's purple tint with a 2px purple boundary (1px border
   + 1px inset ring, so nothing moves). Clear without relying on hue: 5.1:1 on white, 4.4:1 on its own tint. */
:root[data-theme="light"] :is(.sf-chip[aria-pressed="true"], .sf-chip[aria-current="page"], .sf-chip[aria-current="true"]),
:root[data-theme="light"] :is(.sf-chip[aria-pressed="true"], .sf-chip[aria-current="page"], .sf-chip[aria-current="true"]):hover,
:root[data-theme="light"] .sf-choice input:checked + .sf-choice__label {
  background: linear-gradient(160deg, #F3EDFF, #EEF2FF);
  border-color: var(--sf-purple-on-light);
  box-shadow: inset 0 0 0 1px var(--sf-purple-on-light);
  color: var(--sf-purple-ink);
}
.sf-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--sf-radius-xs);
  font: var(--sf-fw-semibold) 0.75rem/1.2 var(--sf-font-sans); letter-spacing: 0.02em; color: var(--sf-fg);
  background: var(--sf-hover);
}
.sf-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sf-badge--success { color: var(--sf-badge-success-text); background: color-mix(in srgb, var(--sf-success) 16%, transparent); }
.sf-badge--warning { color: var(--sf-badge-warning-text); background: color-mix(in srgb, var(--sf-warning) 18%, transparent); }
.sf-badge--error { color: var(--sf-badge-error-text); background: color-mix(in srgb, var(--sf-error) 14%, transparent); }
.sf-badge--info { color: var(--sf-badge-info-text); background: color-mix(in srgb, var(--sf-blue-on-light) 10%, transparent); }
.sf-dark .sf-badge--success { color: var(--sf-success); }
.sf-dark .sf-badge--warning { color: var(--sf-warning); }
.sf-dark .sf-badge--error { color: var(--sf-error-on-dark); }
.sf-dark .sf-badge--info { color: var(--sf-signal-cyan); background: color-mix(in srgb, var(--sf-signal-cyan) 12%, transparent); }
.sf-partner { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 8px 16px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-sm); }
.sf-partner img { max-height: 40px; width: auto; }

/* ---------- Cards: the Sarafi Box ---------- */
.sf-card {
  position: relative; display: block; padding: var(--sf-space-24);
  background: var(--sf-bg-raised); color: var(--sf-fg);
  border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md);
  text-decoration: none;
}
.sf-card--outline { background: transparent; }
.sf-card--featured { border-color: transparent; background: linear-gradient(var(--sf-bg-raised), var(--sf-bg-raised)) padding-box, var(--sf-gradient-brand) border-box; }
a.sf-card { transition: border-color var(--sf-dur-fast) var(--sf-ease-out), transform var(--sf-dur-base) var(--sf-ease-out); }
a.sf-card:not(.sf-card--featured):hover, .sf-card.is-hover { border-color: var(--sf-border-strong); }
a.sf-card:hover, .sf-card.is-hover { transform: translateY(-2px); }
.sf-card__media { margin: calc(-1 * var(--sf-space-24)) calc(-1 * var(--sf-space-24)) var(--sf-space-24); aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--sf-radius-md) - 1px) calc(var(--sf-radius-md) - 1px) 0 0; background: var(--sf-hover); }
.sf-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sf-card__title { font-size: var(--sf-fs-h4); line-height: var(--sf-lh-h4); font-weight: var(--sf-fw-semibold); letter-spacing: -0.01em; }
.sf-card__text { color: var(--sf-fg-muted); margin-top: var(--sf-space-8); }
.sf-card__footer { margin-top: var(--sf-space-16); }
.sf-card > .sf-eyebrow + .sf-card__title { margin-top: var(--sf-space-8); }
/* Geometric window for photography: brand book p26 "offset rectangles and geometric windows" */
.sf-media-window { clip-path: polygon(0 0, 100% 0, 100% 84%, 86% 100%, 0 100%); }
/* Light theme elevation, always Midnight-tinted, never black. A shadow means "you can act here": a linked card, a card
   with a link or button inside, the featured offer and the other raised sheets (stat, node, form, callout) rest at
   level 1, and a linked card rises to level 2 on hover. Static cards rest flat on their hairline, the brand book's white
   card. :where() keeps the rule at 0,4,0; a static card that tilts takes the tilt shadow. */
:root[data-theme="light"] :is(.sf-card:not(.sf-card--outline):where(a, .sf-card--featured, :has(a[href], button)), .sf-stat, .sf-node, .sf-form, .sf-callout) { box-shadow: var(--sf-shadow-1); }
/* Cards that reveal or tilt already ease box-shadow in their own transition, which this must not replace.
   Deliberate difference from the approved preview: there the override, injected last, replaced that transition and
   the tilt on every link card, so they popped in without the reveal and lifted flat. Here they reveal and tilt as in
   the dark theme; the resting look and the hover shadow are the same. */
:root[data-theme="light"] a.sf-card:not([data-sf-reveal], [data-sf-tilt]) { transition: border-color var(--sf-dur-fast) var(--sf-ease-out), transform var(--sf-dur-base) var(--sf-ease-out), box-shadow var(--sf-dur-base) var(--sf-ease-out); }
:root[data-theme="light"] :is(a.sf-card:hover, .sf-card.is-hover) { box-shadow: var(--sf-shadow-2); }
/* The hover lift only runs when motion is welcome, and gives way to the tilt (which lifts the same 3px). */
@media (prefers-reduced-motion: no-preference) { :root[data-theme="light"] :is(a.sf-card:not(.is-tilting):hover, .sf-card.is-hover) { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="light"] :is(a.sf-card:hover, .sf-card.is-hover) { transform: none; } }
/* The featured offer leads its row: the brand hairline, a Growth Purple light from the top and a purple-tinted lift,
   which it keeps on hover. The megamenu's featured card stays a plain sheet. */
:root[data-theme="light"] .sf-card--featured:not(.sf-megamenu .sf-card) {
  background: linear-gradient(180deg, rgba(140, 77, 255, 0.08), rgba(140, 77, 255, 0) 180px) padding-box,
    linear-gradient(var(--sf-white), var(--sf-white)) padding-box, var(--sf-gradient-brand) border-box;
  box-shadow: 0 2px 4px rgba(9, 11, 20, 0.04), 0 24px 48px -26px rgba(91, 43, 196, 0.34);
}

/* ---------- Stats ---------- */
.sf-stat { padding: 18px 20px; background: var(--sf-bg-raised); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); }
.sf-stat__value { display: block; font-size: clamp(2rem, 1.7rem + 1.2vw, 3rem); font-weight: var(--sf-fw-extrabold); line-height: 1; letter-spacing: -0.03em; }
.sf-stat__value--gradient { background: var(--sf-gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-stat__label { display: block; margin-top: 10px; font-size: 0.75rem; font-weight: var(--sf-fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-fg-muted); }

/* ---------- Quote: serif for the words, Manrope for the attribution ---------- */
.sf-quote__text { font-family: var(--sf-font-serif); font-style: italic; font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem); line-height: 1.2; color: var(--sf-fg); }
.sf-quote__cite { display: flex; align-items: center; gap: 12px; margin-top: var(--sf-space-24); font-style: normal; font-size: var(--sf-fs-small); }
.sf-quote__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; filter: grayscale(1); background: var(--sf-border); }
.sf-quote__name { display: block; font-weight: var(--sf-fw-semibold); }
.sf-quote__role { display: block; color: var(--sf-fg-muted); }

/* ---------- Growth system: four layers on one line ---------- */
.sf-system { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sf-system::before { content: ""; position: absolute; left: 31px; top: 32px; bottom: 32px; width: 2px; background: var(--sf-gradient-brand); }
.sf-dark .sf-system::before { box-shadow: var(--sf-glow); }
/* Light theme: the full glow smudges on paper, so the connector keeps a faint one. */
:root[data-theme="light"] .sf-dark .sf-system::before { box-shadow: 0 0 10px rgba(131, 64, 255, 0.22); }
@media (min-width: 1024px) {
  .sf-system { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sf-system::before { left: 6%; right: 6%; top: 31px; bottom: auto; width: auto; height: 2px; }
}
.sf-node { position: relative; padding: 20px; background: var(--sf-bg-raised); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); }
.sf-node__dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sf-bg); border: 2px solid var(--sf-fg-accent); }
.sf-node__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-gradient-brand); }
.sf-node__title { margin-top: 14px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); line-height: 1.3; }
.sf-node__role { color: var(--sf-fg-muted); font-size: 0.9375rem; }
.sf-node .sf-cluster { --sf-cluster-gap: 6px; margin-top: 14px; }

/* ---------- Ribbon line that draws on scroll ----------
   sarafi.js measures the dots, bends the line through each one and draws it as you scroll.
   Without JavaScript the line and every step show in full. */
.sf-ribbon { position: relative; padding-left: 56px; }
/* An SVG keeps its intrinsic 1000px height even with top and bottom set, so the height makes it span the ribbon
   without JavaScript. sarafi.js replaces top and height inline. */
.sf-ribbon__line { position: absolute; left: 0; top: 12px; bottom: 12px; width: 40px; height: calc(100% - 24px); overflow: visible; pointer-events: none; }
/* No non-scaling-stroke: with it Chrome measures the pathLength="1" dash in screen pixels, so a line taller than
   about 1000px stopped drawing part-way down. */
.sf-ribbon__line path { fill: none; stroke-width: 2; }
.sf-ribbon__track { stroke: var(--sf-border-strong); }
.sf-ribbon__draw { stroke: url(#sf-ribbon-gradient); stroke-dasharray: 1; stroke-dashoffset: 0; }
.sf-ribbon__step { position: relative; padding-bottom: var(--sf-space-64); }
.sf-ribbon__step:last-child { padding-bottom: 0; }
/* Pages move or resize the dots through these three variables, which the no-JS connector below also reads. */
.sf-ribbon__dot { position: absolute; left: var(--sf-ribbon-dot-left, -48px); top: var(--sf-ribbon-dot-top, 0px); width: var(--sf-ribbon-dot-size, 24px); height: var(--sf-ribbon-dot-size, 24px); border-radius: 50%; background: var(--sf-bg); border: 2px solid var(--sf-fg-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sf-growth-purple) 18%, transparent); }
.sf-js .sf-ribbon__draw { stroke-dashoffset: 1; }
.sf-js .sf-ribbon__dot { transition: border-color var(--sf-dur-base) var(--sf-ease-out), box-shadow var(--sf-dur-base) var(--sf-ease-out); }
.sf-js .sf-ribbon__step:not(.is-on) .sf-ribbon__dot { border-color: var(--sf-border-strong); box-shadow: none; }
/* Without JavaScript nothing measures the dots, so the SVG line would overshoot the last one. Instead each step draws a
   plain line from its dot's centre to the next dot's centre. */
:root:not(.sf-js) .sf-ribbon__line { display: none; }
:root:not(.sf-js) .sf-ribbon__step:not(:last-child)::before {
  content: ""; position: absolute; width: 2px; background: var(--sf-fg-accent);
  left: calc(var(--sf-ribbon-dot-left, -48px) + var(--sf-ribbon-dot-size, 24px) / 2 - 1px);
  top: calc(var(--sf-ribbon-dot-top, 0px) + var(--sf-ribbon-dot-size, 24px) / 2);
  bottom: calc(-1 * (var(--sf-ribbon-dot-top, 0px) + var(--sf-ribbon-dot-size, 24px) / 2));
}


/* ---------- Accordion (native details/summary) ---------- */
.sf-accordion { border-top: 1px solid var(--sf-border-strong); }
.sf-accordion__item { border-bottom: 1px solid var(--sf-border-strong); }
.sf-accordion__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; list-style: none; cursor: pointer;
  font-size: 1.0625rem; font-weight: var(--sf-fw-semibold); line-height: 1.4;
}
.sf-accordion__item > summary::-webkit-details-marker { display: none; }
.sf-accordion__item > summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: background-size var(--sf-dur-base) var(--sf-ease-out);
}
.sf-accordion__item[open] > summary::after { background-size: 100% 2px, 2px 0; }
.sf-accordion__item > summary:hover { color: var(--sf-link); }
.sf-accordion__panel { padding: 0 0 20px; max-width: var(--sf-measure); color: var(--sf-fg-muted); }
/* The answer slides open and closed where the browser can animate to its natural height; elsewhere it just opens. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .sf-accordion__item { interpolate-size: allow-keywords; }
    .sf-accordion__item::details-content { block-size: 0; overflow-y: clip; opacity: 0;
      transition: block-size 320ms var(--sf-ease-out), opacity 240ms var(--sf-ease-out), content-visibility 320ms allow-discrete; }
    .sf-accordion__item[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* ---------- Forms ---------- */
.sf-form { padding: var(--sf-space-24); background: var(--sf-bg-raised); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); }
@media (min-width: 768px) { .sf-form { padding: var(--sf-space-32); } }
.sf-field { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.sf-field + .sf-field { margin-top: 18px; }
.sf-field__label { display: block; margin-bottom: 8px; padding: 0; font-size: var(--sf-fs-small); font-weight: var(--sf-fw-semibold); color: var(--sf-fg); }
.sf-field__optional { font-weight: var(--sf-fw-regular); color: var(--sf-fg-muted); }
.sf-input {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  font: var(--sf-fw-regular) 1rem/1.4 var(--sf-font-sans); color: var(--sf-fg);
  background: var(--sf-control-bg); border: 1px solid var(--sf-control-border); border-radius: var(--sf-radius-sm);
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--sf-dur-fast) var(--sf-ease-out), box-shadow var(--sf-dur-fast) var(--sf-ease-out);
}
/* Placeholders and the prefix sit on a tinted control, so muted text moves a little towards fg to keep 4.5:1. */
.sf-input::placeholder { color: color-mix(in srgb, var(--sf-fg-muted) 85%, var(--sf-fg)); opacity: 1; }
/* Light theme: muted ink is darker there, so placeholders take slate to stay a clear step lighter than typed text
   (5.1:1 on the white control). */
:root[data-theme="light"] .sf-input::placeholder { color: var(--sf-slate-on-light); }
.sf-input:hover, .sf-input.is-hover { border-color: var(--sf-fg); }
.sf-input:focus-visible, .sf-input.is-focus { outline: 2px solid var(--sf-focus); outline-offset: 0; border-color: var(--sf-focus); }
.sf-input:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.sf-input { min-height: 128px; resize: vertical; }
select.sf-input { padding-right: 44px; background-image: none; }
.sf-select { position: relative; }
.sf-select::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none;
  background: var(--sf-fg-muted); -webkit-mask: var(--sf-icon-chevron) center / contain no-repeat; mask: var(--sf-icon-chevron) center / contain no-repeat;
}
.sf-input[aria-invalid="true"], .sf-field--error .sf-input { border-color: var(--sf-fg-error); }
.sf-input[aria-invalid="true"]:focus-visible { outline-color: var(--sf-fg-error); }
.sf-field__help, .sf-field__error, .sf-field__success { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 0.8125rem; line-height: 1.4; }
.sf-field__help { color: var(--sf-fg-muted); }
.sf-field__error { color: var(--sf-fg-error); font-weight: var(--sf-fw-medium); }
.sf-field__success { color: var(--sf-fg-success); font-weight: var(--sf-fw-medium); }
/* These lines set their own display, so the hidden attribute needs help to win. */
.sf-field__help[hidden], .sf-field__error[hidden], .sf-field__success[hidden] { display: none; }
.sf-field__error .sf-icon, .sf-field__success .sf-icon { width: 16px; height: 16px; margin-top: 1px; }
.sf-input-group { display: flex; }
.sf-input-group__prefix { display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--sf-control-border); border-right: 0; border-radius: var(--sf-radius-sm) 0 0 var(--sf-radius-sm); background: var(--sf-hover); color: color-mix(in srgb, var(--sf-fg-muted) 85%, var(--sf-fg)); font-weight: var(--sf-fw-semibold); }
.sf-input-group .sf-input { border-radius: 0 var(--sf-radius-sm) var(--sf-radius-sm) 0; }
/* Choice chips: real checkboxes or radios, drawn as pills. A check icon marks the selected ones. */
.sf-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-choice { position: relative; display: inline-flex; }
.sf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf-choice__label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--sf-control-border); border-radius: var(--sf-radius-pill);
  font-size: 0.9375rem; font-weight: var(--sf-fw-medium); cursor: pointer;
  transition: background-color var(--sf-dur-fast) var(--sf-ease-out), color var(--sf-dur-fast) var(--sf-ease-out);
}
.sf-choice__label .sf-icon { display: none; width: 16px; height: 16px; stroke-width: 2.25; }
.sf-choice input:hover + .sf-choice__label { background: var(--sf-hover); }
.sf-choice input:checked + .sf-choice__label { background: var(--sf-fg); border-color: var(--sf-fg); color: var(--sf-bg); }
.sf-choice input:checked + .sf-choice__label .sf-icon { display: inline-block; }
.sf-choice input:focus-visible + .sf-choice__label { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.sf-progress { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-progress__step { flex: 1; height: 4px; border-radius: 2px; background: var(--sf-border-strong); }
.sf-progress__step.is-done, .sf-progress__step[aria-current="step"] { background: var(--sf-fg); }
/* Light theme: progress is a UI indicator, so the done steps use the AA pair (5.1:1 on white). The steps sit apart, so
   the track only ever meets the page; it is decorative, and the "Step N of 3" text carries the state. */
:root[data-theme="light"] :is(.sf-progress__step.is-done, .sf-progress__step[aria-current="step"]) { background: linear-gradient(90deg, var(--sf-blue-on-light), var(--sf-purple-on-light)); }

/* ---------- Navigation ---------- */
.sf-header {
  position: sticky; top: 0; z-index: var(--sf-z-sticky);
  display: flex; align-items: center; height: var(--sf-header-height);
  border-bottom: 1px solid transparent;
  transition: background-color var(--sf-dur-base) var(--sf-ease-out), border-color var(--sf-dur-base) var(--sf-ease-out);
}
.sf-header.is-solid {
  background-color: color-mix(in srgb, var(--sf-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: color-mix(in srgb, var(--sf-fg) 8%, transparent);
}
.sf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; }
/* The right-hand group: theme switch, then the CTA (desktop) or the menu button (mobile). */
.sf-header__actions { display: flex; align-items: center; gap: 10px; }
.sf-header__logo { display: inline-flex; flex: none; }
.sf-header__logo img { width: 130px; height: auto; }
.sf-header__cta { display: none; }
@media (min-width: 1024px) { .sf-header__cta { display: inline-flex; } .sf-header__menu-btn { display: none; } }
.sf-nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 1024px) { .sf-nav { display: flex; } }
.sf-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0;
  border: 0; background: none; color: var(--sf-fg); cursor: pointer;
  font: var(--sf-fw-medium) 0.9375rem/1.2 var(--sf-font-sans); text-decoration: none;
}
.sf-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--sf-gradient-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--sf-dur-base) var(--sf-ease-out); }
/* [aria-current] matches both "page" (this exact page) and "true" (a page inside this section). */
.sf-nav__link:hover::after, .sf-nav__link.is-hover::after, .sf-nav__link[aria-current]::after, .sf-nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.sf-nav__caret { width: 16px; height: 16px; transition: transform var(--sf-dur-base) var(--sf-ease-out); }
.sf-nav__link[aria-expanded="true"] .sf-nav__caret { transform: rotate(180deg); }
/* The Services trigger is marked current with aria-current like the other nav links; data-current does the same for a static demo. */
.sf-nav__link[data-current]::after { transform: scaleX(1); }

/* ---------- Capsule header: the bar floats as a glass pill inside the page margins ----------
   Markup: header.sf-header.sf-header--capsule > .sf-container > .sf-header__inner. The total height stays
   --sf-header-height, so heroes laid out under the header don't move. */
.sf-header--capsule { align-items: flex-start; padding-top: 12px; }
.sf-header--capsule .sf-header__inner { height: calc(var(--sf-header-height) - 20px); padding: 0 8px 0 22px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sf-fg) 12%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sf-bg-raised) 42%, transparent), color-mix(in srgb, var(--sf-bg-raised) 72%, transparent));
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 color-mix(in srgb, var(--sf-fg) 7%, transparent);
  transition: background-color var(--sf-dur-base) var(--sf-ease-out), box-shadow var(--sf-dur-base) var(--sf-ease-out); }
/* After scrolling, the page shows through less: the pill gets more solid, the full-width bar stays away. */
.sf-header--capsule.is-solid { background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sf-header--capsule.is-solid .sf-header__inner { background: color-mix(in srgb, var(--sf-bg-raised) 88%, transparent); }
/* Without JavaScript nothing sets data-theme or .is-solid, so the pill starts solid and stays readable over light sections. */
:root:not(.sf-js) .sf-header--capsule .sf-header__inner { background: color-mix(in srgb, var(--sf-bg-raised) 88%, transparent); }
.sf-header--capsule .sf-header__logo img { width: 118px; }
.sf-header--capsule .sf-nav { gap: 30px; }
.sf-header--capsule .sf-nav__link { color: color-mix(in srgb, var(--sf-fg) 80%, transparent); padding: 10px 0; }
.sf-header--capsule .sf-nav__link:hover, .sf-header--capsule .sf-nav__link[aria-current], .sf-header--capsule .sf-nav__link[data-current], .sf-header--capsule .sf-nav__link[aria-expanded="true"] { color: var(--sf-fg); }
.sf-header--capsule .sf-nav__link::after { bottom: 0; }
.sf-header--capsule .sf-btn--icon { --sf-btn-h: 40px; border-radius: 50%; border-color: color-mix(in srgb, var(--sf-fg) 16%, transparent); background: color-mix(in srgb, var(--sf-fg) 4%, transparent); }
.sf-header--capsule .sf-header__actions { gap: 8px; }
.sf-header--capsule .sf-megamenu__panel { border-radius: 24px; }

/* ---------- Pill CTA: label, then a white circle with an arrow. Used in the capsule header only. ---------- */
.sf-pill-cta { --sf-pill-bg: color-mix(in srgb, var(--sf-electric-blue) 24%, var(--sf-deep-blue));
  display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 5px 0 20px; border-radius: 999px;
  background: var(--sf-pill-bg); color: #FFFFFF; font: var(--sf-fw-semibold) 0.875rem/1 var(--sf-font-sans); text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: background-color var(--sf-dur-fast) var(--sf-ease-out), box-shadow var(--sf-dur-fast) var(--sf-ease-out); }
/* In the capsule header the pill CTA shows at every width; below 1024px it is compact. */
.sf-header__cta.sf-pill-cta { display: inline-flex; }
@media (max-width: 1023px) {
  .sf-header--capsule .sf-pill-cta { height: 40px; gap: 8px; padding: 0 4px 0 14px; font-size: 0.8125rem; }
  .sf-header--capsule .sf-pill-cta__icon { width: 32px; height: 32px; }
  .sf-header--capsule .sf-header__inner { padding: 0 6px 0 16px; }
  .sf-header--capsule .sf-header__logo img { width: 104px; }
}
/* The full label needs about 420px; narrower phones show "Book", and the smallest also get a smaller logo.
   The rest of the label is only visually hidden, so the link is still announced as "Book a review". */
@media (max-width: 419px) {
  .sf-header--capsule .sf-pill-cta__more { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 359px) { .sf-header--capsule .sf-header__logo img { width: 92px; } }
.sf-pill-cta__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; color: var(--sf-midnight); transition: transform var(--sf-dur-base) var(--sf-ease-out); }
.sf-pill-cta__icon .sf-icon { width: 16px; height: 16px; stroke-width: 2; }
.sf-pill-cta:hover { background: linear-gradient(135deg, var(--sf-cta-start), var(--sf-cta-end)); box-shadow: 0 8px 24px -8px rgba(140, 77, 255, 0.6); }
.sf-pill-cta:hover .sf-pill-cta__icon { transform: rotate(45deg); }
.sf-pill-cta:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sf-pill-cta:hover .sf-pill-cta__icon { transform: none; } }
:root[data-theme="light"] .sf-pill-cta { --sf-pill-bg: var(--sf-midnight); }
/* Light theme: a white glass capsule on the hairline, and the theme switch a white circle on the hairline. */
:root[data-theme="light"] .sf-header--capsule .sf-header__inner {
  border-color: var(--sf-hairline);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.86));
  box-shadow: 0 1px 2px rgba(9, 11, 20, 0.04), 0 14px 36px -20px rgba(9, 11, 20, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* Once scrolled, the capsule can float over the Midnight box or a card: it turns an almost solid sheet. */
:root[data-theme="light"] .sf-header--capsule.is-solid .sf-header__inner { background: rgba(255, 255, 255, 0.94); }
:root[data-theme="light"] .sf-header--capsule .sf-btn--icon { border-color: var(--sf-hairline); background: var(--sf-white); }

.sf-megamenu { position: absolute; left: 0; right: 0; top: var(--sf-header-height); z-index: var(--sf-z-dropdown); }
.sf-megamenu[hidden] { display: none; }
/* The panel eases in when it opens. */
@media (prefers-reduced-motion: no-preference) { .sf-megamenu:not([hidden]) .sf-megamenu__panel { animation: sf-menu-in 220ms var(--sf-ease-out) both; } }
@keyframes sf-menu-in { from { opacity: 0; transform: translateY(-8px) scale(0.985); } }
.sf-megamenu--static { position: static; }
.sf-megamenu__panel {
  display: grid; gap: 24px; padding: 28px;
  background: var(--sf-bg-raised); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-float);
}
@media (min-width: 1024px) { .sf-megamenu__panel { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.1fr); } }
.sf-megamenu__link { display: block; padding: 8px 0; color: var(--sf-fg); text-decoration: none; }
.sf-megamenu__link strong { display: block; font-weight: var(--sf-fw-semibold); }
.sf-megamenu__link span { display: block; color: var(--sf-fg-muted); font-size: 0.875rem; }
.sf-megamenu__link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sf-drawer { position: fixed; inset: 0; z-index: var(--sf-z-overlay); display: flex; flex-direction: column; padding: 0 20px 20px; overflow-y: auto; }
.sf-drawer[hidden] { display: none; }
.sf-drawer--static { position: relative; inset: auto; min-height: 640px; border-radius: 24px; border: 1px solid var(--sf-border); }
.sf-drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.sf-drawer__item, .sf-drawer__group > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  border-bottom: 1px solid var(--sf-border); color: var(--sf-fg); text-decoration: none;
  font-size: 1.25rem; font-weight: var(--sf-fw-bold); list-style: none; cursor: pointer;
}
.sf-drawer__group > summary::-webkit-details-marker { display: none; }
.sf-drawer__group > summary::after { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--sf-icon-chevron) center / contain no-repeat; mask: var(--sf-icon-chevron) center / contain no-repeat; transition: transform var(--sf-dur-base) var(--sf-ease-out); }
.sf-drawer__group[open] > summary::after { transform: rotate(180deg); }
.sf-drawer__sub { display: grid; gap: 4px; padding: 12px 0 16px; border-bottom: 1px solid var(--sf-border); }
.sf-drawer__sub a { padding: 6px 0; color: var(--sf-fg-muted); text-decoration: none; }
.sf-drawer__sub a:hover { color: var(--sf-fg); }
/* The buttons stay pinned to the bottom, even when the Services list makes the menu scroll. */
.sf-drawer__actions { position: sticky; bottom: 0; display: grid; gap: 10px; margin-top: auto; padding-top: 24px; background: var(--sf-bg); }
.sf-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--sf-fg-muted); }
/* The separator trails each crumb, so a wrapped trail never starts a line with "/". */
.sf-breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; }
.sf-breadcrumb a { color: inherit; text-decoration: none; }
.sf-breadcrumb a:hover { color: var(--sf-fg); text-decoration: underline; }
.sf-breadcrumb [aria-current="page"] { color: var(--sf-fg); }
/* Touch: each crumb link is a 44px target, like the chips and link arrows. The row centres its items, so the current
   page's plain text stays level with the links, and a wrapped trail needs no row gap. A mouse keeps the 18px line. */
@media (pointer: coarse) {
  .sf-breadcrumb ol { align-items: center; row-gap: 0; }
  .sf-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Mobile action bar ---------- */
.sf-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--sf-z-sticky);
  display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background-color: color-mix(in srgb, var(--sf-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid color-mix(in srgb, var(--sf-fg) 8%, transparent);
  transform: translateY(110%); transition: transform var(--sf-dur-base) var(--sf-ease-out);
}
.sf-actionbar.is-visible, .sf-actionbar--static { transform: none; }
.sf-actionbar--static { position: relative; }
.sf-actionbar .sf-btn { flex: 1; min-height: 44px; }
.sf-actionbar .sf-btn--whatsapp { flex: 0 0 auto; }
@media (min-width: 768px) { .sf-actionbar:not(.sf-actionbar--static) { display: none; } }

/* ---------- Footer ---------- */
.sf-footer { padding-block: 72px 32px; }
.sf-footer__grid { display: grid; gap: 40px; }
@media (min-width: 768px) { .sf-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A link column is never narrower than its longest word (min-content: the email), so the address stays on one line at
   1024-1087 and in narrow demos; only the column that needs it widens, and the others give up the room. */
@media (min-width: 1024px) { .sf-footer__grid { grid-template-columns: 1.6fr repeat(4, minmax(min-content, 1fr)); } }
/* A block that hugs the logo: Chrome paints no focus ring round an inline link that wraps a block image, and
   inline-block would add a line's descent under it. */
.sf-footer__logo { display: block; width: fit-content; }
.sf-footer__logo img { width: 180px; height: auto; }
.sf-footer__tagline { margin-top: 20px; max-width: 32ch; }
.sf-footer__title { margin-bottom: 14px; font-size: var(--sf-fs-label); letter-spacing: var(--sf-ls-label); font-weight: var(--sf-tw-label); text-transform: uppercase; color: var(--sf-fg-muted); }
.sf-footer__list { margin: 0; padding: 0; list-style: none; }
.sf-footer__list li + li { margin-top: 10px; }
/* break-word, not anywhere: it keeps a word's min-content whole, so the column above grows to fit the email, also when
   text spacing is raised (WCAG 1.4.12), instead of breaking it mid-word; a word longer than its box still wraps. */
.sf-footer__list a { color: var(--sf-fg); text-decoration: none; opacity: 0.86; overflow-wrap: break-word; }
.sf-footer__list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .sf-footer__list a { display: inline-flex; align-items: center; min-height: 40px; } .sf-footer__list li + li { margin-top: 0; } }
/* Mobile accordion (sarafi.js adds .is-accordion below 768px). Each group becomes a full-width 44px row with a plus that turns into a minus. */
.sf-footer.is-accordion .sf-footer__grid { gap: 0; }
.sf-footer.is-accordion .sf-footer__grid > :first-child { margin-bottom: 32px; }
.sf-footer.is-accordion .sf-footer__grid > :not(:first-child) { border-top: 1px solid var(--sf-border); }
.sf-footer.is-accordion .sf-footer__title { margin: 0; }
.sf-footer__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.sf-footer__toggle::after { content: ""; width: 12px; height: 12px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: background-size var(--sf-dur-fast) var(--sf-ease-out); }
.sf-footer__toggle[aria-expanded="true"]::after { background-size: 100% 1.5px, 1.5px 0; }
.sf-footer__toggle:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: 2px; }
.sf-footer.is-accordion .sf-footer__list { padding-bottom: 20px; }
.sf-footer__list[hidden] { display: none; }
.sf-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--sf-border); font-size: 0.8125rem; color: var(--sf-fg-muted); }
.sf-footer__legal a { color: inherit; }
@media (pointer: coarse) { .sf-footer__legal a { display: inline-flex; align-items: center; min-height: 40px; } }

/* ---------- Feedback: toast and modal ---------- */
.sf-toast {
  display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 14px 16px;
  background: var(--sf-deep-blue); color: var(--sf-white);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--sf-radius-md); box-shadow: var(--sf-shadow-float);
}
.sf-toast__title { font-weight: var(--sf-fw-semibold); }
.sf-toast__text { color: var(--sf-slate); font-size: var(--sf-fs-small); }
.sf-toast--success .sf-toast__icon { color: var(--sf-success); }
.sf-toast--error .sf-toast__icon { color: var(--sf-error-on-dark); }
.sf-modal { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); background: var(--sf-bg-raised); color: var(--sf-fg); box-shadow: var(--sf-shadow-float); }
.sf-modal::backdrop { background: rgba(9, 11, 20, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sf-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--sf-border); }
.sf-modal__body { padding: 24px; }
.sf-modal__footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--sf-border); }

/* ---------- Logo wall ---------- */
.sf-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .sf-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sf-logos__item { display: flex; align-items: center; justify-content: center; height: 72px; padding: 12px 20px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); }
.sf-logos__item img { max-height: 32px; width: auto; filter: grayscale(1); opacity: 0.8; }
.sf-dark .sf-logos__item img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.75; }

/* ---------- Content: article card, author, callout, contents ---------- */
.sf-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8125rem; color: var(--sf-fg-muted); }
.sf-author { display: flex; align-items: center; gap: 12px; }
.sf-author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.sf-author__name { display: block; font-weight: var(--sf-fw-semibold); }
.sf-author__role { display: block; color: var(--sf-fg-muted); font-size: var(--sf-fs-small); }
.sf-callout { position: relative; padding: var(--sf-space-24); background: var(--sf-bg-raised); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); overflow: hidden; }
.sf-callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sf-gradient-brand); }
.sf-toc { position: sticky; top: calc(var(--sf-header-height) + 24px); }
.sf-toc ol { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.sf-toc a { display: block; padding: 6px 0 6px 14px; border-left: 2px solid var(--sf-border); color: var(--sf-fg-muted); text-decoration: none; font-size: var(--sf-fs-small); }
.sf-toc a:hover { color: var(--sf-fg); }
.sf-toc a[aria-current="true"] { color: var(--sf-fg); border-left-color: var(--sf-fg-accent); font-weight: var(--sf-fw-semibold); }

/* ---------- Scroll reveal (needs sarafi.js; content stays visible without it) ----------
   The reveal moves with the individual translate and rotate properties, so transform stays free for tilt and hover.
   Only the reveal waits for the stagger; hover and tilt transitions start at once. */
.sf-js [data-sf-reveal] {
  --sf-reveal-dur: var(--sf-dur-slow);
  --sf-reveal-delay: calc(var(--sf-reveal-index, 0) * var(--sf-stagger));
  opacity: 0; translate: 0 20px;
  transition: opacity var(--sf-reveal-dur) var(--sf-ease-out) var(--sf-reveal-delay), translate var(--sf-reveal-dur) var(--sf-ease-out) var(--sf-reveal-delay), rotate var(--sf-reveal-dur) var(--sf-ease-out) var(--sf-reveal-delay),
    transform 500ms var(--sf-ease-out), border-color var(--sf-dur-fast) var(--sf-ease-out), box-shadow 500ms var(--sf-ease-out);
}
.sf-js [data-sf-reveal].is-revealed { opacity: 1; translate: none; rotate: none; }
/* Depth: the element rises out of the page in perspective. Its parent supplies the perspective. */
.sf-js [data-sf-reveal="depth"] { --sf-reveal-dur: 800ms; translate: 0 36px -100px; rotate: x 10deg; transform-origin: 50% 100%; }
:has(> [data-sf-reveal="depth"]) { perspective: 1400px; }
@media (prefers-reduced-motion: reduce) { .sf-js [data-sf-reveal] { opacity: 1; translate: none; rotate: none; } }

/* ---------- Tilt (needs sarafi.js; fine pointers only, off with reduced motion) ----------
   The card leans towards the pointer and a light follows it round the border. sarafi.js sets --sf-tx and --sf-ty
   (-1 to 1) and --sf-gx and --sf-gy (the light's position). At rest there is no transform, so text stays crisp. */
[data-sf-tilt] { position: relative; --sf-tilt-light: rgba(200, 183, 255, 0.7); --sf-tilt-shadow: 0 32px 64px -32px rgba(140, 77, 255, 0.5); }
.sf-light [data-sf-tilt], .sf-white [data-sf-tilt] { --sf-tilt-light: rgba(70, 119, 255, 0.55); --sf-tilt-shadow: 0 32px 64px -30px rgba(9, 11, 20, 0.28); }
.sf-js [data-sf-tilt]:not([data-sf-reveal]) { transition: transform 500ms var(--sf-ease-out), border-color var(--sf-dur-fast) var(--sf-ease-out), box-shadow 500ms var(--sf-ease-out); }
.sf-js [data-sf-tilt].is-tilting {
  transform: perspective(1000px) rotateX(calc(var(--sf-ty, 0) * -5deg)) rotateY(calc(var(--sf-tx, 0) * 6deg)) translateY(-3px);
  box-shadow: var(--sf-tilt-shadow);
}
.sf-js [data-sf-tilt]::before {
  content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(240px circle at var(--sf-gx, 50%) var(--sf-gy, 50%), var(--sf-tilt-light), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--sf-dur-base) var(--sf-ease-out);
}
.sf-js [data-sf-tilt].is-tilting::before { opacity: 1; }

/* ---------- Themes: light and dark ----------
   The visitor picks a theme with [data-sf-theme-toggle]; a tiny script in <head> sets data-theme on <html> before
   the first paint, from their saved choice or their system setting. The surface tokens flip in tokens.css; the rules
   below adjust the few components that read a surface class directly. Without data-theme nothing changes. */
/* The switch needs the script, so it only shows once sarafi.js has run. It matches the small CTA on desktop. */
.sf-theme-toggle { display: none; }
.sf-js .sf-theme-toggle { display: inline-flex; }
@media (min-width: 1024px) { .sf-header .sf-theme-toggle { --sf-btn-h: 40px; } }
.sf-theme-toggle .sf-icon { width: 18px; height: 18px; }
/* Logos come in a pair: on-dark by default (header, drawer and footer are dark surfaces), on-light in the light theme. */
.sf-logo-on-light { display: none; }
:root[data-theme="light"] .sf-logo-on-dark { display: none; }
:root[data-theme="light"] .sf-logo-on-light { display: block; }
.sf-theme-toggle__to-light { display: none; }
:root[data-theme="dark"] .sf-theme-toggle__to-dark { display: none; }
:root[data-theme="dark"] .sf-theme-toggle__to-light { display: inline-block; }
/* Colours ease across when the theme changes, then the transition is removed again. */
:root.sf-theme-switching, :root.sf-theme-switching *, :root.sf-theme-switching *::before, :root.sf-theme-switching *::after {
  transition: background-color 320ms var(--sf-ease-out), color 320ms var(--sf-ease-out), border-color 320ms var(--sf-ease-out), fill 320ms var(--sf-ease-out) !important;
}
/* Dark surfaces that turn light (the .sf-glow muted ink is a token row in tokens.css) */
:root[data-theme="light"] .sf-dark .sf-badge--success { color: var(--sf-badge-success-text); }
:root[data-theme="light"] .sf-dark .sf-badge--warning { color: var(--sf-badge-warning-text); }
:root[data-theme="light"] .sf-dark .sf-badge--error { color: var(--sf-badge-error-text); }
:root[data-theme="light"] .sf-dark .sf-badge--info { color: var(--sf-badge-info-text); background: color-mix(in srgb, var(--sf-blue-on-light) 10%, transparent); }
:root[data-theme="light"] .sf-dark .sf-logos__item img { filter: grayscale(1); opacity: 0.75; }
/* Gradient text on any light surface uses the darker on-light pair, so it keeps 4.5:1 at both ends. The stat gradient
   spans the digits, not the whole card, so it reaches purple. */
:root[data-theme="light"] :is(.sf-gradient-text, .sf-stat__value--gradient) { background-image: var(--sf-gradient-on-light); }
:root[data-theme="light"] .sf-stat__value--gradient { width: fit-content; }
:root[data-theme="light"] .sf-dark [data-sf-tilt] { --sf-tilt-light: rgba(70, 119, 255, 0.55); --sf-tilt-shadow: 0 32px 64px -30px rgba(9, 11, 20, 0.28); }
/* Light surfaces that turn dark */
:root[data-theme="dark"] :is(.sf-light, .sf-white) .sf-badge--success { color: var(--sf-success); }
:root[data-theme="dark"] :is(.sf-light, .sf-white) .sf-badge--warning { color: var(--sf-warning); }
:root[data-theme="dark"] :is(.sf-light, .sf-white) .sf-badge--error { color: var(--sf-error-on-dark); }
:root[data-theme="dark"] :is(.sf-light, .sf-white) .sf-badge--info { color: var(--sf-signal-cyan); background: color-mix(in srgb, var(--sf-signal-cyan) 12%, transparent); }
:root[data-theme="dark"] :is(.sf-light, .sf-white) .sf-logos__item img { filter: grayscale(1) brightness(0) invert(1); opacity: 0.75; }
:root[data-theme="dark"] :is(.sf-light, .sf-white) [data-sf-tilt] { --sf-tilt-light: rgba(200, 183, 255, 0.7); --sf-tilt-shadow: 0 32px 64px -32px rgba(140, 77, 255, 0.5); }

/* ---------- Mobile tab bar: the main navigation below 1024px ----------
   A floating bar at the bottom with icon and label items; the current page gets a tinted tile.
   Markup: nav.sf-tabbar > a.sf-tabbar__item > svg.sf-icon + span. The current item gets aria-current="page" when it
   links to this page, or aria-current="true" when this page sits inside its section.
   The page gets bottom padding via body:has(.sf-tabbar), so the footer never hides behind it; add .sf-has-tabbar on
   <body> only where :has() is unsupported. */
.sf-tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--sf-z-sticky);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-width: 520px; margin-inline: auto; padding: 8px;
  border: 1px solid color-mix(in srgb, var(--sf-fg) 12%, transparent); border-radius: 22px;
  background: color-mix(in srgb, var(--sf-bg-raised) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6), inset 0 1px 0 color-mix(in srgb, var(--sf-fg) 7%, transparent); }
@media (min-width: 1024px) { .sf-tabbar { display: none; } }
.sf-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 6px 2px; border-radius: 14px;
  color: color-mix(in srgb, var(--sf-fg) 70%, transparent); font: var(--sf-fw-semibold) 0.6875rem/1.1 var(--sf-font-sans); letter-spacing: 0.01em; text-decoration: none; text-align: center;
  transition: background-color var(--sf-dur-fast) var(--sf-ease-out), color var(--sf-dur-fast) var(--sf-ease-out); }
.sf-tabbar__item .sf-icon { width: 22px; height: 22px; }
.sf-tabbar__item:hover { color: var(--sf-fg); background: var(--sf-hover); }
/* The ring sits inside the item: outside it, the 4px gap put it against the current item's tinted pill (2.65:1 in light). */
.sf-tabbar__item:focus-visible { outline: 2px solid var(--sf-focus); outline-offset: -2px; }
/* Current page or section: a brand-tinted tile with an accent icon and label (the reference's orange, in Sarafi purple). */
.sf-tabbar__item[aria-current] { color: var(--sf-fg-accent); background: linear-gradient(160deg, color-mix(in srgb, var(--sf-growth-purple) 26%, transparent), color-mix(in srgb, var(--sf-electric-blue) 16%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sf-growth-purple) 40%, transparent); }
/* Screen only: the bar is not printed, so neither is its padding. scroll-padding-bottom keeps a focused element
   (or one scrolled into view) clear of the bar instead of stopping behind it. */
@media screen and (max-width: 1023px) {
  body:has(.sf-tabbar:not(.sf-tabbar--static)), .sf-has-tabbar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html:has(.sf-tabbar:not(.sf-tabbar--static)) { scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Landscape phones: the header scrolls away and the bar goes compact (icon beside label), so together they no longer
   cover about 40% of a 390px-tall screen. The header stays in the flow, because heroes are pulled up under it. */
@media screen and (max-width: 1023px) and (max-height: 500px) {
  html { scroll-padding-top: 16px; }
  .sf-header { position: relative; }
  .sf-tabbar:not(.sf-tabbar--static) { padding: 4px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .sf-tabbar:not(.sf-tabbar--static) .sf-tabbar__item { flex-direction: row; gap: 6px; min-height: 44px; padding: 4px; }
  body:has(.sf-tabbar:not(.sf-tabbar--static)), .sf-has-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  html:has(.sf-tabbar:not(.sf-tabbar--static)) { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
/* Static copy for the style guide: sits in the flow and shows at every width. */
.sf-tabbar--static { position: relative; left: auto; right: auto; bottom: auto; z-index: auto; margin: 0; }
@media (min-width: 1024px) { .sf-tabbar.sf-tabbar--static { display: grid; } }
:root[data-theme="light"] .sf-tabbar { border-color: var(--sf-hairline); box-shadow: 0 18px 40px -20px rgba(9, 11, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
/* On the light bar the tinted tile is pale, so the current item uses the selected-state purple ink to keep small labels
   above 4.5:1 (about 5.5:1 even where a light section shows through the bar). */
:root[data-theme="light"] .sf-tabbar__item[aria-current] { color: var(--sf-purple-ink); background: linear-gradient(160deg, color-mix(in srgb, var(--sf-growth-purple) 14%, transparent), color-mix(in srgb, var(--sf-electric-blue) 8%, transparent)); }

/* ---------- Print ----------
   Browsers print with background graphics off by default, and printing never runs the scroll observers. */
@media print {
  /* Show every scroll-reveal element, even ones the visitor never scrolled to. */
  .sf-js [data-sf-reveal] { opacity: 1; translate: none; rotate: none; transition: none; }
  /* A fixed bar repeats on every printed page and covers the text under it. */
  .sf-tabbar:not(.sf-tabbar--static) { display: none; }
  /* Shadows print as hard grey slabs. !important beats the light-theme shadow rules. */
  .sf-header--capsule .sf-header__inner, .sf-tabbar { box-shadow: none !important; }
  /* sarafi.js prints in the light theme, so its elevation and CTA shadows go too (the featured card's lift included). */
  :root[data-theme="light"] :is(.sf-btn, .sf-card, .sf-stat, .sf-node, .sf-form, .sf-callout) { box-shadow: none !important; }
  /* Gradient text is painted by its background, so without backgrounds it would print blank. */
  .sf-gradient-text, .sf-stat__value--gradient { background: none !important; color: var(--sf-fg-accent); }
  /* White text on a gradient would print as pale text with no button, so buttons print as outlines. */
  .sf-btn--primary, .sf-pill-cta { background: none; color: var(--sf-fg); box-shadow: none; border: 1px solid currentColor; }
  /* Selected chips and choices are a dark fill with light text, which would print as pale text: a heavier outline instead. */
  .sf-chip[aria-pressed="true"], .sf-chip[aria-current], .sf-choice input:checked + .sf-choice__label { background: none; color: var(--sf-fg); border: 2px solid currentColor; }
  /* The footer accordion can switch on while printing (the page is narrower than 768px), so every list prints open. */
  .sf-footer__list[hidden] { display: block; }
  .sf-footer__toggle::after { display: none; }
  /* A heading or eyebrow never ends a page without what follows it, and a button is never cut in two. */
  :where(h1, h2, h3, h4), .sf-eyebrow { break-after: avoid; }
  .sf-btn { break-inside: avoid; }
}