:root {
  --sf-bg: #F1F5FE;
  --sf-surface: #F7FAFF;
  --sf-elevated: #FFFFFF;
  /* Section band (BUILD-DEFAULTS §2a): one solved step off the page ground,
     so alternating sections read as a rhythm instead of one continuous field.
     Aliases --sf-surface in dark mode, which already had a real ramp. */
  --sf-band: #E5EBF9;
  --sf-text: #1A2438;
  --sf-muted: #536383;
  --sf-accent: #3E6798;
  --sf-accent-text: #F1F7FF;
  /* The client's own brand hex, unclamped — for FILL surfaces (primary button,
     footer, nav) where the colour is a background carrying --sf-brand-text.
     Equals --sf-accent unless the brand was too dark for the accent-as-text
     role, which is the case this token exists to stop washing out. */
  --sf-brand: #00167A;
  --sf-brand-text: #F3F7FF;
  /* CHROME (nav + footer, BUILD-DEFAULTS §2a). --sf-brand doing a second job:
     the same hex unless the client's brand could not be told apart from their
     own page ground, in which case it is walked off it and theme.meta
     .chromeRescued records that it happened. --sf-chrome-ink-dim is the
     SOLVED quiet ink — chrome never fades an ink toward transparent, because
     that composites the scrolling page into the bar and no gate can measure
     the result. */
  --sf-chrome-bg: #F1F5FE;
  --sf-chrome-ink: #1A2438;
  --sf-chrome-ink-dim: #515B70;
  /* The footer's coloured register — the client's own hex, walked only as far
     as legibility on the wash demanded. Hue and chroma are untouched. */
  --sf-chrome-accent: #00167A;
  /* THE FOOTER WASH (BUILD-DEFAULTS §2a). Two SOLVED stops and the gradient
     built from them. Both stops are emitted as their own hexes on purpose: a
     gate can only measure a gradient it can name the ends of, and
     verifyChromeContrast() samples the interpolation between these two. The
     wash starts ON the page ground, which is what puts the client's full-colour
     logo on white, and fades into a faint tint of their own hue after it. */
  --sf-chrome-wash-from: #F1F5FE;
  --sf-chrome-wash-to: #DFEAFF;
  --sf-chrome-wash: linear-gradient(104deg, var(--sf-chrome-wash-from) 0%, var(--sf-chrome-wash-from) 18%, var(--sf-chrome-wash-to) 100%);
  /* THE NAV'S OWN GROUND AND INKS. Identical to the chrome triple above unless
     this client pinned theme.navTone, which is what lets a LIGHT BAR sit over a
     DARK PAGE — the footer keeps the chrome's inks and the bar gets its own.
     The nav-surface and nav-link-style axes read THESE, never --sf-chrome-bg:
     a nav-scoped rule taking a footer colour is how an active link measured
     1.20:1 on a brand bar and passed every token check that existed. */
  --sf-chrome-nav-bg: #F1F5FE;
  --sf-chrome-nav-ink: #1A2438;
  --sf-chrome-nav-ink-dim: #515B70;
  --sf-chrome-nav-accent: #00167A;
  /* THE NAV OVER THE HERO — the TOP state (BUILD-DEFAULTS §2i, refit task 27).
     On the home page the bar is transparent at scroll-top over a neutral BLACK
     scrim and carries this LIGHT ink, independent of the chrome triple; from
     the first scroll, and on every other page, it is the solid bar above.
     --sf-nav-top-scrim-a is the alpha at the bar's bottom edge, SOLVED against a
     pure-white pixel: black at alpha a over white leaves channel 255·(1−a), and
     (L_ink + 0.05) / (L_pixel + 0.05) must clear 4.5 — for a near-white ink that
     is alpha ≥ 0.535 (themes/tokens.mjs minScrimAlpha), shipped with a 0.06
     margin. --sf-nav-top-scrim-a0 is the gradient's top stop. The ground is the
     stand-in the bar's ground variable takes in that state, so a pill painted
     in the ink still has legible text. engine/template/_nav.part consumes all
     four. (No other variable is NAMED in this comment on purpose: test-tokens
     reads every --sf-* token out of the emitted text, comments included.) */
  --sf-nav-top-ink: #EBF2FF;
  --sf-nav-top-ground: #0A0A0A;
  --sf-nav-top-scrim-a: 0.63;
  --sf-nav-top-scrim-a0: 0.71;
  /* THE LOGO HALO (refit task 26). The colour is solved; the geometry is here
     so it can be read. A client who wants none pins theme.logoGlow: false, and
     the variable resolves to a fully transparent shadow — a no-op drop-shadow
     rather than a removed declaration, so the surfaces need no second rule.
     The pin is read from theme.meta.logoGlow (generateTheme validates it);
     the colour token is emitted either way so the solve stays inspectable.
     Until 2026-09-04 this comment described a pin nothing implemented. */
  --sf-logo-glow-color: #3356A4;
  --sf-logo-glow: 0 0 12px color-mix(in srgb, var(--sf-logo-glow-color) 42%, transparent);
  --sf-accent-1: #B8C8DB;
  --sf-accent-2: #7997BB;
  --sf-accent-3: #3E6798;
  --sf-accent-4: #2A5382;
  --sf-accent-5: #1A406B;
  --sf-radius: 8px;
  --sf-shadow: 62 103 152;
  --sf-font-display: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', 'Segoe UI', system-ui, sans-serif;
  --sf-font-body: 'Source Sans 3', 'Source Sans 3 Fallback', 'Segoe UI', system-ui, sans-serif;
  /* THE MONO ROLE (2026-08-20). Order and tracking references, the manual-
     payment bank digits, COA filenames, admin readouts. A FACE is named here
     only when this client's pair ships one; otherwise this is the system stack
     and that is the right answer, not a gap. Never hard-code a mono stack in a
     page again — three of them had already grown. See monoStackFor(). */
  --sf-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* SF logo treatment (theme mode: light; nav-top: measured — 82.9% of the lockup's opaque pixels would fall under 3:1 on the brightest pixel under the scrim (#FFFFFF at α 0.63) and its mean luminance is 0.156 against a legible line of 0.438: predominantly dark, so it is silhouetted light) */
:root { --sf-logo-filter: brightness(1); --sf-logo-filter-nav-top: brightness(0) invert(1); }

/* ── layout: hero-split ────────────────────────────────────────────────────
   Two-column hero — claim left, product visual right. See hero-split.md.
   Scoped entirely to body.layout-hero-split; colors come from --sf-* tokens. */

/* nav: logo left, links center-right, actions far right */
body.layout-hero-split .sf-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sf-bg);
  border-bottom: var(--sf-nav-border, 1px solid color-mix(in srgb, var(--sf-text) 10%, transparent));
  box-shadow: var(--sf-nav-shadow, none);
}
body.layout-hero-split .sf-nav-inner {
  max-width: var(--sf-nav-max, 1160px);
  margin-inline: auto;
  padding: var(--sf-nav-pad-y, 14px) clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}
body.layout-hero-split .sf-logo {
  font-family: var(--sf-font-display);
  font-size: 1.15rem;
  margin-right: auto;
}
body.layout-hero-split .sf-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 28px);
}
body.layout-hero-split .sf-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* hero: 1.05fr copy / 0.95fr media, vertically centered, tall */
/* --sf-hero-clearance is the bar's height when the home page loads with the
   nav transparent over the hero (refit task 27, BUILD-DEFAULTS §2i — set on
   #hero by _nav.part's state rule, 0px everywhere else). It is FOLDED INTO the
   layout's own top pad here, at this rule's specificity, so a client rule that
   pads #hero itself simply wins. The min-height grows by the same amount:
   this hero is flex-centred with a border-box min-height, and extra top padding
   alone would centre the content half a bar higher (measured −27px). */
body.layout-hero-split .sf-hero {
  --sf-hero-pad-top: calc(clamp(40px, 8vh, 96px) * var(--sf-hero-pad-scale, 1));
  padding: calc(var(--sf-hero-pad-top) + var(--sf-hero-clearance, 0px)) clamp(16px, 4vw, 32px) var(--sf-hero-pad-top);
  min-height: calc(min(68vh, 720px) + var(--sf-hero-clearance, 0px));
  display: flex;
  align-items: center;
}
body.layout-hero-split .sf-hero-inner {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
body.layout-hero-split .sf-hero-copy {
  text-align: left;
}
body.layout-hero-split .sf-hero-kicker {
  font-family: var(--sf-font-body);
  font-size: 0.95rem;
  margin-bottom: 14px;
}
body.layout-hero-split .sf-hero-title {
  font-family: var(--sf-font-display);
  font-size: calc(clamp(2.1rem, 4.6vw, 3.4rem) * var(--sf-display-scale, 1));
  line-height: 1.08;
  letter-spacing: var(--sf-h-track, -0.025em);
  text-wrap: balance;
  margin-bottom: 18px;
}
body.layout-hero-split .sf-hero-sub {
  font-family: var(--sf-font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  max-width: 54ch;
  margin-bottom: 28px;
}
body.layout-hero-split .sf-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
body.layout-hero-split .sf-hero-media {
  display: block;
  border-radius: var(--sf-radius);
  overflow: hidden;
  background: var(--sf-surface);
  box-shadow:
    0 1px 2px rgb(var(--sf-shadow) / 0.10),
    0 12px 32px -8px rgb(var(--sf-shadow) / 0.22),
    0 32px 64px -24px rgb(var(--sf-shadow) / 0.28);
}
body.layout-hero-split .sf-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* catalog: standard responsive grid below the fold */
body.layout-hero-split .sf-section {
  padding: calc(clamp(40px, 7vh, 80px) * var(--sf-section-pad-scale, 1)) clamp(16px, 4vw, 32px);
}
body.layout-hero-split .sf-catalog {
  max-width: 1160px;
  margin-inline: auto;
}
body.layout-hero-split .sf-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sf-grid-min, 250px), 1fr));
  gap: var(--sf-grid-gap, clamp(16px, 2.5vw, 28px));
}

@media (max-width: 860px) {
  body.layout-hero-split .sf-hero {
    min-height: 0;
  }
  body.layout-hero-split .sf-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.layout-hero-split .sf-hero-media {
    order: 2; /* copy first on mobile */
    max-width: 480px;
  }
  body.layout-hero-split .sf-nav-links {
    display: none; /* template's mobile menu takes over */
  }
}

/* ── layout: hero-centered ─────────────────────────────────────────────────
   Symmetric editorial hero — stacked centered copy, media as a wide band
   beneath. See hero-centered.md. Scoped to body.layout-hero-centered. */

/* nav: centered link row, logo above on its own line at desktop widths */
body.layout-hero-centered .sf-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sf-bg);
  border-bottom: var(--sf-nav-border, 1px solid color-mix(in srgb, var(--sf-text) 10%, transparent));
  box-shadow: var(--sf-nav-shadow, none);
}
body.layout-hero-centered .sf-nav-inner {
  max-width: var(--sf-nav-max, 1040px);
  margin-inline: auto;
  padding: var(--sf-nav-pad-y, 14px) clamp(16px, 4vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
body.layout-hero-centered .sf-logo {
  font-family: var(--sf-font-display);
  font-size: 1.15rem;
  justify-self: start;
}
body.layout-hero-centered .sf-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 30px);
}
body.layout-hero-centered .sf-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* hero: single centered column; media becomes a wide band below the copy */
/* --sf-hero-clearance: the bar's height when the home page loads with the nav
   transparent over the hero (refit task 27) — set on #hero by _nav.part, 0px
   otherwise — folded into this layout's own top pad so the pad survives and a
   client rule that pads #hero itself wins on specificity. */
body.layout-hero-centered .sf-hero {
  --sf-hero-pad-top: calc(clamp(56px, 10vh, 120px) * var(--sf-hero-pad-scale, 1));
  padding: calc(var(--sf-hero-pad-top) + var(--sf-hero-clearance, 0px)) clamp(16px, 4vw, 32px) 0;
}
body.layout-hero-centered .sf-hero-inner {
  max-width: 1040px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.layout-hero-centered .sf-hero-copy {
  text-align: center;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.layout-hero-centered .sf-hero-kicker {
  font-family: var(--sf-font-body);
  font-size: 0.95rem;
  margin-bottom: 16px;
}
body.layout-hero-centered .sf-hero-title {
  font-family: var(--sf-font-display);
  font-size: calc(clamp(2.4rem, 5.6vw, 4rem) * var(--sf-display-scale, 1));
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-bottom: 20px;
}
body.layout-hero-centered .sf-hero-sub {
  font-family: var(--sf-font-body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  max-width: 58ch;
  margin-bottom: 30px;
}
body.layout-hero-centered .sf-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
body.layout-hero-centered .sf-hero-media {
  display: block;
  width: 100%;
  max-width: 880px;
  margin-top: clamp(40px, 7vh, 72px);
  border-radius: var(--sf-radius) var(--sf-radius) 0 0;
  overflow: hidden;
  background: var(--sf-surface);
  box-shadow:
    0 1px 2px rgb(var(--sf-shadow) / 0.10),
    0 -2px 40px -8px rgb(var(--sf-shadow) / 0.18),
    0 24px 64px -24px rgb(var(--sf-shadow) / 0.30);
}
body.layout-hero-centered .sf-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* catalog: narrower, more curated grid — max 3 columns */
body.layout-hero-centered .sf-section {
  padding: calc(clamp(48px, 8vh, 88px) * var(--sf-section-pad-scale, 1)) clamp(16px, 4vw, 32px);
}
body.layout-hero-centered .sf-catalog {
  max-width: 1040px;
  margin-inline: auto;
}
body.layout-hero-centered .sf-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sf-grid-min, 280px), 1fr));
  gap: var(--sf-grid-gap, clamp(20px, 3vw, 32px));
  max-width: 1040px;
  margin-inline: auto;
}

@media (max-width: 860px) {
  body.layout-hero-centered .sf-nav-inner {
    grid-template-columns: auto 1fr;
  }
  body.layout-hero-centered .sf-nav-links {
    display: none; /* template's mobile menu takes over */
  }
}

/* ── layout: hero-product-forward ──────────────────────────────────────────
   The catalog IS the hero. Compact intro strip, no hero media, grid starts
   inside the first viewport with the first product featured at double width.
   See hero-product-forward.md. Scoped to body.layout-hero-product-forward. */

/* nav: full-width working toolbar, hard bottom rule */
body.layout-hero-product-forward .sf-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--sf-bg);
  border-bottom: 2px solid color-mix(in srgb, var(--sf-text) 14%, transparent);
}
body.layout-hero-product-forward .sf-nav-inner {
  max-width: var(--sf-nav-max, 1280px);
  margin-inline: auto;
  padding: var(--sf-nav-pad-y, 12px) clamp(16px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
}
body.layout-hero-product-forward .sf-logo {
  font-family: var(--sf-font-display);
  font-size: 1.1rem;
  margin-right: auto;
}
body.layout-hero-product-forward .sf-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}
body.layout-hero-product-forward .sf-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* hero: a slim horizontal band — title left, sub + CTA right; media suppressed */
/* --sf-hero-clearance: the bar's height when the home page loads with the nav
   transparent over the hero (refit task 27) — set on #hero by _nav.part, 0px
   otherwise — folded into this layout's own top pad so the 28px strip keeps
   its pad and a client rule that pads #hero itself wins on specificity. */
body.layout-hero-product-forward .sf-hero {
  --sf-hero-pad-top: calc(clamp(28px, 4vh, 48px) * var(--sf-hero-pad-scale, 1));
  padding: calc(var(--sf-hero-pad-top) + var(--sf-hero-clearance, 0px)) clamp(16px, 3vw, 28px) var(--sf-hero-pad-top);
  border-bottom: var(--sf-nav-border, 1px solid color-mix(in srgb, var(--sf-text) 8%, transparent));
  box-shadow: var(--sf-nav-shadow, none);
}
body.layout-hero-product-forward .sf-hero-inner {
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: end;
}
body.layout-hero-product-forward .sf-hero-copy {
  display: contents; /* title and sub/CTA land in separate columns */
}
body.layout-hero-product-forward .sf-hero-kicker {
  grid-column: 1;
  font-family: var(--sf-font-body);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
body.layout-hero-product-forward .sf-hero-title {
  grid-column: 1;
  font-family: var(--sf-font-display);
  font-size: calc(clamp(1.7rem, 3.2vw, 2.5rem) * var(--sf-display-scale, 1));
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
body.layout-hero-product-forward .sf-hero-sub {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  font-family: var(--sf-font-body);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 48ch;
}
body.layout-hero-product-forward .sf-hero-cta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
body.layout-hero-product-forward .sf-hero-media {
  display: none; /* markup ships; this layout simply doesn't use it */
}

/* catalog: opens immediately, denser grid, first card featured 2×2 */
body.layout-hero-product-forward .sf-section {
  padding: calc(clamp(24px, 4vh, 44px) * var(--sf-section-pad-scale, 1)) clamp(16px, 3vw, 28px);
}
body.layout-hero-product-forward .sf-catalog {
  max-width: 1280px;
  margin-inline: auto;
}
body.layout-hero-product-forward .sf-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sf-grid-min, 230px), 1fr));
  grid-auto-flow: dense;
  gap: var(--sf-grid-gap, clamp(14px, 2vw, 22px));
}
body.layout-hero-product-forward .sf-product-grid > *:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

@media (max-width: 860px) {
  body.layout-hero-product-forward .sf-hero-inner {
    grid-template-columns: 1fr;
  }
  body.layout-hero-product-forward .sf-hero-sub {
    grid-column: 1;
    grid-row: auto;
    margin-top: 12px;
  }
  body.layout-hero-product-forward .sf-hero-cta {
    grid-column: 1;
  }
  body.layout-hero-product-forward .sf-nav-links {
    display: none; /* template's mobile menu takes over */
  }
}
@media (max-width: 560px) {
  body.layout-hero-product-forward .sf-product-grid > *:first-child {
    grid-column: auto;
    grid-row: auto; /* feature card collapses to normal on small phones */
  }
}

/* ── motion: calm-rise — Calm Rise ─────────────────────────────
   Slow, weighted rises on a long decelerating tail — reassuring and premium; nothing ever startles. */
body.motion-calm-rise {
  --sfm-dur-fast: 160ms;
  --sfm-dur-base: 420ms;
  --sfm-dur-slow: 640ms;
  --sfm-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body.motion-calm-rise .sf-animate-in {
  animation: sfm-calmrise-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-calm-rise .sf-stagger > * {
  animation: sfm-calmrise-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-calm-rise .sf-stagger > *:nth-child(1) { animation-delay: 0ms; }
body.motion-calm-rise .sf-stagger > *:nth-child(2) { animation-delay: 80ms; }
body.motion-calm-rise .sf-stagger > *:nth-child(3) { animation-delay: 160ms; }
body.motion-calm-rise .sf-stagger > *:nth-child(4) { animation-delay: 240ms; }
body.motion-calm-rise .sf-stagger > *:nth-child(5) { animation-delay: 320ms; }
body.motion-calm-rise .sf-stagger > *:nth-child(6) { animation-delay: 400ms; }
body.motion-calm-rise .sf-stagger > *:nth-child(7) { animation-delay: 480ms; }
body.motion-calm-rise .sf-stagger > *:nth-child(8) { animation-delay: 560ms; }
body.motion-calm-rise .sf-hover-lift {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-calm-rise .sf-hover-lift:hover,
body.motion-calm-rise .sf-hover-lift:focus-visible {
  transform: translateY(-5px);
}
body.motion-calm-rise .sf-hover-scale {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-calm-rise .sf-hover-scale:hover,
body.motion-calm-rise .sf-hover-scale:focus-visible {
  transform: scale(1.02);
}
body.motion-calm-rise .sf-pressable {
  transition: transform var(--sfm-dur-fast) var(--sfm-ease);
}
body.motion-calm-rise .sf-pressable:active {
  transform: scale(0.98);
}
body.motion-calm-rise .sf-fade {
  transition: opacity var(--sfm-dur-base) var(--sfm-ease);
}
@keyframes sfm-calmrise-enter {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-calm-rise .sf-animate-in,
  body.motion-calm-rise .sf-stagger > * {
    animation: none;
  }
  body.motion-calm-rise .sf-hover-lift,
  body.motion-calm-rise .sf-hover-scale,
  body.motion-calm-rise .sf-pressable,
  body.motion-calm-rise .sf-fade {
    transition: none;
  }
  body.motion-calm-rise .sf-hover-lift:hover,
  body.motion-calm-rise .sf-hover-lift:focus-visible,
  body.motion-calm-rise .sf-hover-scale:hover,
  body.motion-calm-rise .sf-hover-scale:focus-visible,
  body.motion-calm-rise .sf-pressable:active {
    transform: none;
  }
}

/* ── motion: snap-spring — Snap Spring ─────────────────────────────
   Quick entrances with a visible overshoot — kinetic, product-demo energy for younger, louder brands. */
body.motion-snap-spring {
  --sfm-dur-fast: 100ms;
  --sfm-dur-base: 210ms;
  --sfm-dur-slow: 320ms;
  --sfm-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.motion-snap-spring .sf-animate-in {
  animation: sfm-snapspring-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-snap-spring .sf-stagger > * {
  animation: sfm-snapspring-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-snap-spring .sf-stagger > *:nth-child(1) { animation-delay: 0ms; }
body.motion-snap-spring .sf-stagger > *:nth-child(2) { animation-delay: 45ms; }
body.motion-snap-spring .sf-stagger > *:nth-child(3) { animation-delay: 90ms; }
body.motion-snap-spring .sf-stagger > *:nth-child(4) { animation-delay: 135ms; }
body.motion-snap-spring .sf-stagger > *:nth-child(5) { animation-delay: 180ms; }
body.motion-snap-spring .sf-stagger > *:nth-child(6) { animation-delay: 225ms; }
body.motion-snap-spring .sf-stagger > *:nth-child(7) { animation-delay: 270ms; }
body.motion-snap-spring .sf-stagger > *:nth-child(8) { animation-delay: 315ms; }
body.motion-snap-spring .sf-hover-lift {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-snap-spring .sf-hover-lift:hover,
body.motion-snap-spring .sf-hover-lift:focus-visible {
  transform: translateY(-3px);
}
body.motion-snap-spring .sf-hover-scale {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-snap-spring .sf-hover-scale:hover,
body.motion-snap-spring .sf-hover-scale:focus-visible {
  transform: scale(1.04);
}
body.motion-snap-spring .sf-pressable {
  transition: transform var(--sfm-dur-fast) var(--sfm-ease);
}
body.motion-snap-spring .sf-pressable:active {
  transform: scale(0.96);
}
body.motion-snap-spring .sf-fade {
  transition: opacity var(--sfm-dur-base) var(--sfm-ease);
}
@keyframes sfm-snapspring-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-snap-spring .sf-animate-in,
  body.motion-snap-spring .sf-stagger > * {
    animation: none;
  }
  body.motion-snap-spring .sf-hover-lift,
  body.motion-snap-spring .sf-hover-scale,
  body.motion-snap-spring .sf-pressable,
  body.motion-snap-spring .sf-fade {
    transition: none;
  }
  body.motion-snap-spring .sf-hover-lift:hover,
  body.motion-snap-spring .sf-hover-lift:focus-visible,
  body.motion-snap-spring .sf-hover-scale:hover,
  body.motion-snap-spring .sf-hover-scale:focus-visible,
  body.motion-snap-spring .sf-pressable:active {
    transform: none;
  }
}

/* ── motion: drift-fade — Drift Fade ─────────────────────────────
   Opacity-first with barely-there drift — ambient gallery calm that lets photography and whitespace lead. */
body.motion-drift-fade {
  --sfm-dur-fast: 220ms;
  --sfm-dur-base: 560ms;
  --sfm-dur-slow: 860ms;
  --sfm-ease: cubic-bezier(0.45, 0.05, 0.25, 1);
}
body.motion-drift-fade .sf-animate-in {
  animation: sfm-driftfade-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-drift-fade .sf-stagger > * {
  animation: sfm-driftfade-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-drift-fade .sf-stagger > *:nth-child(1) { animation-delay: 0ms; }
body.motion-drift-fade .sf-stagger > *:nth-child(2) { animation-delay: 120ms; }
body.motion-drift-fade .sf-stagger > *:nth-child(3) { animation-delay: 240ms; }
body.motion-drift-fade .sf-stagger > *:nth-child(4) { animation-delay: 360ms; }
body.motion-drift-fade .sf-stagger > *:nth-child(5) { animation-delay: 480ms; }
body.motion-drift-fade .sf-stagger > *:nth-child(6) { animation-delay: 600ms; }
body.motion-drift-fade .sf-stagger > *:nth-child(7) { animation-delay: 720ms; }
body.motion-drift-fade .sf-stagger > *:nth-child(8) { animation-delay: 840ms; }
body.motion-drift-fade .sf-hover-lift {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-drift-fade .sf-hover-lift:hover,
body.motion-drift-fade .sf-hover-lift:focus-visible {
  transform: translateY(-2px);
}
body.motion-drift-fade .sf-hover-scale {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-drift-fade .sf-hover-scale:hover,
body.motion-drift-fade .sf-hover-scale:focus-visible {
  transform: scale(1.01);
}
body.motion-drift-fade .sf-pressable {
  transition: transform var(--sfm-dur-fast) var(--sfm-ease);
}
body.motion-drift-fade .sf-pressable:active {
  transform: scale(0.99);
}
body.motion-drift-fade .sf-fade {
  transition: opacity var(--sfm-dur-base) var(--sfm-ease);
}
@keyframes sfm-driftfade-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-drift-fade .sf-animate-in,
  body.motion-drift-fade .sf-stagger > * {
    animation: none;
  }
  body.motion-drift-fade .sf-hover-lift,
  body.motion-drift-fade .sf-hover-scale,
  body.motion-drift-fade .sf-pressable,
  body.motion-drift-fade .sf-fade {
    transition: none;
  }
  body.motion-drift-fade .sf-hover-lift:hover,
  body.motion-drift-fade .sf-hover-lift:focus-visible,
  body.motion-drift-fade .sf-hover-scale:hover,
  body.motion-drift-fade .sf-hover-scale:focus-visible,
  body.motion-drift-fade .sf-pressable:active {
    transform: none;
  }
}

/* ── motion: precise-slide — Precise Slide ─────────────────────────────
   Short lateral slides on a sharp curve — clinical, instrument-panel exactness; motion as measurement. */
body.motion-precise-slide {
  --sfm-dur-fast: 90ms;
  --sfm-dur-base: 170ms;
  --sfm-dur-slow: 250ms;
  --sfm-ease: cubic-bezier(0.3, 0.7, 0, 1);
}
body.motion-precise-slide .sf-animate-in {
  animation: sfm-preciseslide-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-precise-slide .sf-stagger > * {
  animation: sfm-preciseslide-enter var(--sfm-dur-slow) var(--sfm-ease) backwards;
}
body.motion-precise-slide .sf-stagger > *:nth-child(1) { animation-delay: 0ms; }
body.motion-precise-slide .sf-stagger > *:nth-child(2) { animation-delay: 30ms; }
body.motion-precise-slide .sf-stagger > *:nth-child(3) { animation-delay: 60ms; }
body.motion-precise-slide .sf-stagger > *:nth-child(4) { animation-delay: 90ms; }
body.motion-precise-slide .sf-stagger > *:nth-child(5) { animation-delay: 120ms; }
body.motion-precise-slide .sf-stagger > *:nth-child(6) { animation-delay: 150ms; }
body.motion-precise-slide .sf-stagger > *:nth-child(7) { animation-delay: 180ms; }
body.motion-precise-slide .sf-stagger > *:nth-child(8) { animation-delay: 210ms; }
body.motion-precise-slide .sf-hover-lift {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-precise-slide .sf-hover-lift:hover,
body.motion-precise-slide .sf-hover-lift:focus-visible {
  transform: translateY(-2px);
}
body.motion-precise-slide .sf-hover-scale {
  transition: transform var(--sfm-dur-base) var(--sfm-ease);
}
body.motion-precise-slide .sf-hover-scale:hover,
body.motion-precise-slide .sf-hover-scale:focus-visible {
  transform: scale(1.02);
}
body.motion-precise-slide .sf-pressable {
  transition: transform var(--sfm-dur-fast) var(--sfm-ease);
}
body.motion-precise-slide .sf-pressable:active {
  transform: scale(0.985);
}
body.motion-precise-slide .sf-fade {
  transition: opacity var(--sfm-dur-base) var(--sfm-ease);
}
@keyframes sfm-preciseslide-enter {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.motion-precise-slide .sf-animate-in,
  body.motion-precise-slide .sf-stagger > * {
    animation: none;
  }
  body.motion-precise-slide .sf-hover-lift,
  body.motion-precise-slide .sf-hover-scale,
  body.motion-precise-slide .sf-pressable,
  body.motion-precise-slide .sf-fade {
    transition: none;
  }
  body.motion-precise-slide .sf-hover-lift:hover,
  body.motion-precise-slide .sf-hover-lift:focus-visible,
  body.motion-precise-slide .sf-hover-scale:hover,
  body.motion-precise-slide .sf-hover-scale:focus-visible,
  body.motion-precise-slide .sf-pressable:active {
    transform: none;
  }
}

/* ── animation slots: sfx effect vocabulary ────────────────────────────── */
.sfx-rise { animation: sfx-kf-rise var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sfx-slide { animation: sfx-kf-slide var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-slide { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
.sfx-zoom { animation: sfx-kf-zoom var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-zoom { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.sfx-fade { animation: sfx-kf-fade var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-fade { from { opacity: 0; } to { opacity: 1; } }
.sfx-float { animation: sfx-kf-float var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-float { 0% { opacity: 0; transform: translateY(26px); } 70% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
.sfx-zoom-settle { animation: sfx-kf-zoom-settle var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-zoom-settle { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
.sfx-tilt { animation: sfx-kf-tilt var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-tilt { from { opacity: 0; transform: rotate(-2deg) translateY(14px); } to { opacity: 1; transform: none; } }
.sfx-drift { animation: sfx-kf-drift 5.5s ease-in-out infinite alternate; }
@keyframes sfx-kf-drift { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.sfx-hover-lift { transition: transform var(--sfm-dur-base, 260ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.sfx-hover-lift:hover, .sfx-hover-lift:focus-visible { transform: translateY(-5px); }
.sfx-hover-scale { transition: transform var(--sfm-dur-base, 260ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.sfx-hover-scale:hover, .sfx-hover-scale:focus-visible { transform: scale(1.03); }
.sfx-hover-tilt { transition: transform var(--sfm-dur-base, 260ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.sfx-hover-tilt:hover, .sfx-hover-tilt:focus-visible { transform: perspective(700px) rotateX(2deg) translateY(-3px); }
.sfx-hover-nudge { transition: transform var(--sfm-dur-base, 260ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)); }
.sfx-hover-nudge:hover, .sfx-hover-nudge:focus-visible { transform: translateX(4px); }
.sfx-pulse { animation: sfx-kf-pulse 2.6s ease-in-out infinite; }
@keyframes sfx-kf-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.sfx-pulse-ring { position: relative; }
.sfx-pulse-ring::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--sf-accent, currentColor); border-radius: inherit; pointer-events: none; animation: sfx-kf-pulse-ring 2.4s ease-out infinite; }
@keyframes sfx-kf-pulse-ring { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
.sfx-glow-pulse { position: relative; }
.sfx-glow-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; background: radial-gradient(closest-side, var(--sf-btn-hover-overlay, rgb(255 255 255 / 0.16)), transparent); pointer-events: none; z-index: -1; animation: sfx-kf-glow-pulse 2.8s ease-in-out infinite; }
@keyframes sfx-kf-glow-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
.sfx-drop { animation: sfx-kf-drop var(--sfm-dur-base, 300ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@keyframes sfx-kf-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.sfx-pop { animation: sfx-kf-pop var(--sfm-dur-base, 300ms) var(--sfm-ease, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; }
@keyframes sfx-kf-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
.sfx-spin-in { animation: sfx-kf-spin-in var(--sfm-dur-base, 300ms) var(--sfm-ease, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; }
@keyframes sfx-kf-spin-in { from { opacity: 0; transform: rotate(-10deg) scale(0.8); } to { opacity: 1; transform: none; } }
/* card-reveal scroll gating (observer adds html.sf-io + .sf-in; no-JS plays on load) */
html.sf-io [data-sf-anim="card-reveal"].sfx-rise:not(.sf-in) { opacity: 0; animation: none; }
html.sf-io [data-sf-anim="card-reveal"].sfx-rise.sf-in { animation: sfx-kf-rise var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
html.sf-io [data-sf-anim="card-reveal"].sfx-fade:not(.sf-in) { opacity: 0; animation: none; }
html.sf-io [data-sf-anim="card-reveal"].sfx-fade.sf-in { animation: sfx-kf-fade var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
html.sf-io [data-sf-anim="card-reveal"].sfx-zoom:not(.sf-in) { opacity: 0; animation: none; }
html.sf-io [data-sf-anim="card-reveal"].sfx-zoom.sf-in { animation: sfx-kf-zoom var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
html.sf-io [data-sf-anim="card-reveal"].sfx-slide:not(.sf-in) { opacity: 0; animation: none; }
html.sf-io [data-sf-anim="card-reveal"].sfx-slide.sf-in { animation: sfx-kf-slide var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards; }
@media (prefers-reduced-motion: reduce) {
  .sfx-rise,
  .sfx-slide,
  .sfx-zoom,
  .sfx-fade,
  .sfx-float,
  .sfx-zoom-settle,
  .sfx-tilt,
  .sfx-drift,
  .sfx-hover-lift,
  .sfx-hover-scale,
  .sfx-hover-tilt,
  .sfx-hover-nudge,
  .sfx-pulse,
  .sfx-pulse-ring,
  .sfx-glow-pulse,
  .sfx-drop,
  .sfx-pop,
  .sfx-spin-in,
  .sfx-rise::after,
  .sfx-slide::after,
  .sfx-zoom::after,
  .sfx-fade::after,
  .sfx-float::after,
  .sfx-zoom-settle::after,
  .sfx-tilt::after,
  .sfx-drift::after,
  .sfx-hover-lift::after,
  .sfx-hover-scale::after,
  .sfx-hover-tilt::after,
  .sfx-hover-nudge::after,
  .sfx-pulse::after,
  .sfx-pulse-ring::after,
  .sfx-glow-pulse::after,
  .sfx-drop::after,
  .sfx-pop::after,
  .sfx-spin-in::after {
    animation: none !important;
    transition: none !important;
  }
  .sfx-hover-lift:hover, .sfx-hover-lift:focus-visible,
  .sfx-hover-scale:hover, .sfx-hover-scale:focus-visible,
  .sfx-hover-tilt:hover, .sfx-hover-tilt:focus-visible,
  .sfx-hover-nudge:hover, .sfx-hover-nudge:focus-visible {
    transform: none !important;
  }
  html.sf-io [data-sf-anim="card-reveal"]:not(.sf-in) {
    opacity: 1 !important;
  }
}

/* ── motion kit (refit task 28): one implementation per effect, scoped by <html data-sf-kit> ── */
/* cta-glow — CTA hover glow */
html[data-sf-kit~="cta-glow"] .sfx-cta-glow { transition: box-shadow var(--sfm-dur-base, 260ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--sfm-dur-base, 260ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)); }
html[data-sf-kit~="cta-glow"] .sfx-cta-glow:hover, html[data-sf-kit~="cta-glow"] .sfx-cta-glow:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 22%, transparent), 0 10px 28px color-mix(in srgb, var(--sf-accent) 38%, transparent); }
/* divider-draw — Section divider draw-on-scroll */
html[data-sf-kit~="divider-draw"] .sfx-divider-draw { display: block; height: 2px; width: 100%; background: linear-gradient(90deg, var(--sf-accent), color-mix(in srgb, var(--sf-accent) 35%, transparent)); transform-origin: left center; }
html.sf-io[data-sf-kit~="divider-draw"] .sfx-divider-draw:not(.sf-in) { transform: scaleX(0); }
html.sf-io[data-sf-kit~="divider-draw"] .sfx-divider-draw.sf-in { animation: sfx-kf-divider-draw var(--sfm-dur-slow, 560ms) var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)) both; }
@keyframes sfx-kf-divider-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* count-up — Stats count-up */
html[data-sf-kit~="count-up"] .sfx-count-up, html[data-sf-kit~="count-up"] [data-sf-count] { font-variant-numeric: tabular-nums; }
/* press-ripple — Button-press ripple */
html[data-sf-kit~="press-ripple"] .sfx-press-ripple { position: relative; overflow: hidden; isolation: isolate; }
html[data-sf-kit~="press-ripple"] .sfx-press-ripple::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at center, color-mix(in srgb, var(--sf-accent) 30%, transparent) 0%, transparent 62%); transform: scale(0); opacity: 0; transition: transform 380ms var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 480ms var(--sfm-ease, cubic-bezier(0.22, 1, 0.36, 1)); pointer-events: none; }
html[data-sf-kit~="press-ripple"] .sfx-press-ripple:active::after { transform: scale(2.4); opacity: 1; transition-duration: 0s; }
/* check-draw — Checkmark draw */
html[data-sf-kit~="check-draw"] .sfx-check-draw { stroke-dasharray: 60; stroke-dashoffset: 60; animation: sfx-kf-check-draw 500ms cubic-bezier(0.34, 1.2, 0.64, 1) 300ms forwards; }
@keyframes sfx-kf-check-draw { from { stroke-dashoffset: 60; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
/* ring-spin — Ring spinner */
html[data-sf-kit~="ring-spin"] .sfx-ring-spin { transform-origin: 50% 50%; animation: sfx-kf-ring-spin 800ms linear infinite; }
@keyframes sfx-kf-ring-spin { to { transform: rotate(360deg); } }
/* Reduced motion: the END STATE, not a frozen mid-state. card-lift is guarded by
   themes/motion.mjs slotCss(); light-sweep by _header-bg.part; count-up by its
   script. ring-spin--essential is the one motion that keeps going (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  html[data-sf-kit] .sfx-cta-glow { transition: none !important; }
  html[data-sf-kit] .sfx-divider-draw { animation: none !important; transform: none !important; }
  html[data-sf-kit] .sfx-press-ripple::after { transition: none !important; }
  html[data-sf-kit] .sfx-check-draw { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  html[data-sf-kit] .sfx-ring-spin { animation: none !important; }
  html[data-sf-kit] .sfx-ring-spin--essential { animation: sfx-kf-ring-spin 1600ms linear infinite !important; }
}
/* ── end motion kit ── */

/* ══ design options (themes/options.mjs) — append AFTER theme/layout/motion CSS ══ */
:root {
  --sf-soft-bg: #DDE5F1;
  --sf-soft-ink: #3E6798;
  --sf-tint-bg: #E5E9EF;
  --sf-hero-wash: #E4EBF7;
  --sf-hero-wash-pct: 7;
  --sf-glass-fill: rgb(247 250 255 / 0.62);
  --sf-glass-fill-strong: rgb(247 250 255 / 0.85);
  --sf-grad-from: #3E6798;
  --sf-grad-to: #2A5382;
  --sf-accent-hover: #375B86;
  --sf-btn-hover-overlay: rgb(0 0 0 / 0.18);
  --sf-contrast-bg: #1A2438;
  --sf-contrast-ink: #F1F5FE;
  --sf-contrast-muted: #7A8BAD;
  --sf-contrast-accent: #638DC1;
  --sf-photo-bg: #FFFFFF;
  --sf-ctaband-dim-solved: #C2CAE4;
  --sf-texture-alpha: 0.05;
  --sf-logo-filter-flip: brightness(0) invert(1);
  --sf-logo-filter-chrome: none;
  --sf-logo-filter-nav: none;
  --sf-card-radius: 22px;
  --sf-btn-radius: 8px;
  --sf-input-radius: 12px;
  --sf-badge-radius: 999px;
  --sf-img-radius: 10px;
  --sf-modal-radius: 14px;
  --sf-menu-radius: 16px;
  --sf-thumb-radius: 4px;
  --sf-shadow-1: none;
  --sf-shadow-2: none;
  --sf-shadow-rgb: 0 0 0;
  --sf-border-color: transparent;
  --sf-texture-mult: 0.55;
  --sf-divider-h: 1px;
  --sf-divider-bg: linear-gradient(var(--sf-border-color), var(--sf-border-color));
  --sf-btn-pad-y: 8px;
  --sf-btn-pad-x: 16px;
  --sf-btn-fs: 0.9rem;
  --sf-btn-case: none;
  --sf-btn-track: 0.01em;
  --sf-btn-weight: 600;
  --sf-btn-shadow: 0 6px 16px -8px rgb(var(--sf-shadow-rgb, 0 0 0) / 0.5);
  --sf-cta-scale: 1;
  --sf-focus-ring: 2px solid var(--sf-accent);
  --sf-focus-offset: 2px;
  --sf-h-weight: 600;
  --sf-h-track: -0.01em;
  --sf-display-scale: 0.9;
  --sf-body-fs: 17px;
  --sf-body-lh: 1.6;
  --sf-numvariant: normal;
  --sf-nav-bg: var(--sf-chrome-nav-bg);
  --sf-nav-ink: var(--sf-chrome-nav-ink);
  --sf-nav-ink-dim: var(--sf-chrome-nav-ink-dim);
  --sf-nav-blur: blur(12px) saturate(1.3);
  --sf-nav-pad-y: 14px;
  --sf-nav-border: none;
  --sf-nav-shadow: var(--sf-shadow-1);
  --sf-nav-case: none;
  --sf-nav-track: 0em;
  --sf-nav-max: 1160px;
  --sf-logo-scale: 0.9;
  --sf-hero-pad-scale: 1;
  --sf-section-pad-scale: 1.3;
  --sf-thumb-aspect: 1 / 1;
  --sf-grid-min: 250px;
  --sf-grid-gap: 22px;
  --sf-card-title-fs: 1.15rem;
  --sf-pdp-sep: none;
  --sf-input-pad-y: 11px;
  --sf-input-pad-x: 14px;
  --sf-input-fs: 0.98rem;
  --sf-field-gap: 20px;
  --sf-check-radius: 999px;
  --sf-form-btn-w: auto;
  --sf-scrim: rgb(0 0 0 / 0.75);
  --sf-modal-max: 640px;
  --sf-thumb-fit: cover;
  --sf-particle-density: 0.45;
  --sf-badge-fs: 0.8rem;
  --sf-badge-pad: 3px 11px;
  --sf-footer-bg: var(--sf-surface);
  --sf-footer-ink: var(--sf-text);
  --sf-footer-ink-dim: var(--sf-muted);
  --sf-footer-accent: var(--sf-accent);
  --sf-footer-pad: 28px;
}

/* ── option: card-style = flat ── */
body.opt-card-style-flat .sf-card {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border-color, transparent);
  box-shadow: none;
}

/* ── option: panel-style = inset ── */
body.opt-panel-style-inset .sf-panel {
  background: var(--sf-tint-bg);
  border: 1px solid var(--sf-border-color, transparent);
  border-radius: var(--sf-card-radius, 12px);
  box-shadow: none;
}

/* ── option: btn-style = solid ── */
body.opt-btn-style-solid .sf-btn-primary {
  background: var(--sf-accent);
  color: var(--sf-accent-text);
  border: 1px solid transparent;
}

/* ── option: btn-hover = lift ── */
body.opt-btn-hover-lift .sf-btn-primary {
  transition: transform var(--sfm-dur-fast, 140ms) var(--sfm-ease, ease-out);
}
body.opt-btn-hover-lift .sf-btn-primary:hover,
body.opt-btn-hover-lift .sf-btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow-2, none);
}
@media (prefers-reduced-motion: reduce) {
  body.opt-btn-hover-lift .sf-btn-primary { transition: none; }
  body.opt-btn-hover-lift .sf-btn-primary:hover, body.opt-btn-hover-lift .sf-btn-primary:focus-visible { transform: none; }
}

/* ── option: secondary-style = tinted ── */
body.opt-secondary-style-tinted .sf-btn-secondary {
  background: var(--sf-tint-bg);
  color: var(--sf-text);
  border: 1px solid transparent;
}
body.opt-secondary-style-tinted .sf-btn-secondary:hover {
  background: var(--sf-soft-bg);
  color: var(--sf-soft-ink);
}

/* ── option: link-style = accent ── */
body.opt-link-style-accent .sf-prose a {
  color: var(--sf-accent);
  text-decoration: none;
}
body.opt-link-style-accent .sf-prose a:hover {
  text-decoration: underline;
}

/* ── option: kicker-style = pill ── */
body.opt-kicker-style-pill .sf-kicker {
  display: inline-block;
  background: var(--sf-soft-bg);
  color: var(--sf-soft-ink);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--sf-badge-radius, 999px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── option: price-style = bold ── */
body.opt-price-style-bold .sf-price {
  color: var(--sf-accent);
  font-weight: 700;
  font-size: 1.05em;
}

/* ── option: nav-link-style = underline ── */
body.opt-nav-link-style-underline .sf-nav-link {
  padding-bottom: 4px;
}
body.opt-nav-link-style-underline .sf-nav-link:hover,
body.opt-nav-link-style-underline .sf-nav-link[aria-current],
body.opt-nav-link-style-underline .sf-nav-link.active {
  color: var(--sf-nav-ink);
  background-image: linear-gradient(var(--sf-nav-ink), var(--sf-nav-ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}

/* ── option: cart-badge = pill ── */
body.opt-cart-badge-pill .sf-cart-count {
  background: var(--sf-nav-ink, var(--sf-accent));
  color: var(--sf-nav-bg, var(--sf-accent-text));
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
}

/* ── option: mobile-menu = sheet ── */
body.opt-mobile-menu-sheet .sf-mobile-menu {
  background: var(--sf-elevated);
  border: 1px solid var(--sf-border-color, transparent);
  border-radius: var(--sf-menu-radius, 10px);
  box-shadow: var(--sf-shadow-2, none);
}

/* ── option: trust-row = carded ── */
body.opt-trust-row-carded .sf-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
body.opt-trust-row-carded .sf-trust-row > * {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border-color, transparent);
  border-radius: var(--sf-badge-radius, 999px);
  padding: 6px 14px;
  font-size: 0.82rem;
  color: var(--sf-text);
}

/* ── option: section-head-align = centered ── */
body.opt-section-head-align-centered .sf-section-head {
  text-align: center;
  margin-inline: auto;
  max-width: 56ch;
}

/* ── option: hero-stats = carded ── */
body.opt-hero-stats-carded .sf-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
body.opt-hero-stats-carded .sf-hero-stats > * {
  background: var(--sf-surface);
  border: 1px solid var(--sf-border-color, transparent);
  border-radius: var(--sf-card-radius, 12px);
  padding: 10px 18px;
}
body.opt-hero-stats-carded .sf-hero-stats b {
  color: var(--sf-accent);
  font-size: 1.3em;
}
body.opt-hero-stats-carded .sf-hero-stats span {
  color: var(--sf-muted);
  font-size: 0.85rem;
}

/* ── option: card-media-bg = glow ── */
body.opt-card-media-bg-glow .sf-card-media,
body.opt-card-media-bg-glow .card-img-wrap {
  background: radial-gradient(closest-side, var(--sf-hero-wash), transparent), var(--sf-photo-bg, var(--sf-elevated));
}

/* ── option: card-price-row = inline ── */
body.opt-card-price-row-inline .sf-card-price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

/* ── option: card-badge-pos = overlay ── */
body.opt-card-badge-pos-overlay .sf-card {
  position: relative;
}
body.opt-card-badge-pos-overlay .sf-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* ── option: card-cta = none ── */
body.opt-card-cta-none .sf-card-cta {
  display: none;
}

/* ── option: spec-style = boxed ── */
body.opt-spec-style-boxed .sf-spec-table {
  border-collapse: separate;
  border-spacing: 0 6px;
}
body.opt-spec-style-boxed .sf-spec-table tr {
  background: var(--sf-surface);
}
body.opt-spec-style-boxed .sf-spec-table td:first-child {
  border-radius: 6px 0 0 6px;
}
body.opt-spec-style-boxed .sf-spec-table td:last-child {
  border-radius: 0 6px 6px 0;
}

/* ── option: proof-panel = light-island ── */
body.opt-proof-panel-light-island .sf-proof-panel {
  background: #F4F6F8;
  color: #16202B;
  border: 1px solid #D8DEE5;
}
body.opt-proof-panel-light-island .sf-proof-panel .sf-card-meta,
body.opt-proof-panel-light-island .sf-proof-panel small {
  color: #46535F;
}
body.opt-proof-panel-light-island .sf-proof-panel a,
body.opt-proof-panel-light-island .sf-proof-panel .sf-coa-link {
  color: #16202B;
  text-decoration: underline;
}
body.opt-proof-panel-light-island .sf-proof-panel .sf-batch-chip {
  color: #16202B;
  background: #E7EBEF;
  border-color: #C9D1D9;
}
body.opt-proof-panel-light-island .sf-proof-panel .sf-purity-value {
  color: #0F4C5C;
}

/* ── option: coa-link = link ── */
body.opt-coa-link-link .sf-coa-link {
  color: var(--sf-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── option: batch-chip = tag ── */
body.opt-batch-chip-tag .sf-batch-chip {
  background: var(--sf-soft-bg);
  color: var(--sf-soft-ink);
  border-radius: var(--sf-badge-radius, 999px);
  padding: 3px 10px;
  font-size: 0.82em;
  font-weight: 600;
}

/* ── option: purity-display = large ── */
body.opt-purity-display-large .sf-purity-value {
  font-size: 1.55em;
  font-weight: 700;
  color: var(--sf-accent);
}

/* ── option: buybox-style = sticky ── */
@media (min-width: 960px) {
  body.opt-buybox-style-sticky .sf-buybox {
    position: sticky;
    top: 84px;
  }
}

/* ── option: qty-style = inline ── */
body.opt-qty-style-inline .sf-qty {
  border: none;
}
body.opt-qty-style-inline .sf-qty button {
  background: transparent;
  color: var(--sf-accent);
  border: 1px solid color-mix(in srgb, var(--sf-accent) 45%, transparent);
  border-radius: 999px;
}

/* ── option: related-rail = scroll ── */
body.opt-related-rail-scroll .sf-related {
  display: flex;
  gap: var(--sf-grid-gap, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
body.opt-related-rail-scroll .sf-related > * {
  flex: 0 0 min(72vw, var(--sf-grid-min, 250px));
  scroll-snap-align: start;
}

/* ── option: input-style = outline ── */
body.opt-input-style-outline .sf-input {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--sf-text) 26%, transparent);
  border-radius: var(--sf-input-radius, 8px);
}
body.opt-input-style-outline .sf-input:focus {
  border-color: var(--sf-accent);
}

/* ── option: modal-position = centered ── */
body.opt-modal-position-centered .sf-modal {
  display: grid;
  place-items: center;
  padding: 18px;
}

/* ── option: popup-frame = bordered ── */
body.opt-popup-frame-bordered .sf-modal-panel {
  border: 1.5px solid color-mix(in srgb, var(--sf-text) 22%, transparent);
}

/* ── option: toast-pos = bottom-center ── */
body.opt-toast-pos-bottom-center .sf-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 240;
}

/* ── option: toast-style = contrast ── */
body.opt-toast-style-contrast .sf-toast {
  background: var(--sf-contrast-bg);
  color: var(--sf-contrast-ink);
  border: none;
  box-shadow: var(--sf-shadow-2, none);
}

/* ── option: close-style = ghost ── */
body.opt-close-style-ghost .sf-modal-close {
  background: transparent;
  border: none;
  color: var(--sf-muted);
}
body.opt-close-style-ghost .sf-modal-close:hover {
  color: var(--sf-text);
}

/* ── option: overlay-enter = rise ── */
body.opt-overlay-enter-rise .sf-modal.open .sf-modal-panel {
  animation: sfo-ov-rise var(--sfm-dur-base, 260ms) var(--sfm-ease, ease-out) both;
}
@keyframes sfo-ov-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.opt-overlay-enter-rise .sf-modal.open .sf-modal-panel { animation: none; }
}

/* ── option: img-frame = shadow ── */
body.opt-img-frame-shadow .sf-thumb img,
body.opt-img-frame-shadow .sf-gallery img {
  border-radius: var(--sf-img-radius, 10px);
  box-shadow: var(--sf-shadow-1, none);
}

/* ── option: product-backdrop = grid-paper ── */
body.opt-product-backdrop-grid-paper .sf-gallery,
body.opt-product-backdrop-grid-paper .sf-card-media,
body.opt-product-backdrop-grid-paper .card-img-wrap {
  background-image:
    linear-gradient(var(--sf-border-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--sf-border-color) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── option: coa-thumb = stacked ── */
body.opt-coa-thumb-stacked .sf-coa-thumb {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--sf-border-color, transparent);
  border-radius: 6px;
  padding: 6px;
  box-shadow: var(--sf-shadow-1, none);
}
body.opt-coa-thumb-stacked .sf-coa-thumb::after {
  content: '';
  position: absolute;
  inset: 6px -5px -5px 6px;
  background: color-mix(in srgb, var(--sf-text) 10%, transparent);
  border-radius: 6px;
  z-index: -1;
}

/* ── option: anim-intensity = off ── */
body.opt-anim-intensity-off,
body.opt-anim-intensity-off .sf-animate-in,
body.opt-anim-intensity-off .sf-stagger > *,
body.opt-anim-intensity-off [class*="sfx-"],
body.opt-anim-intensity-off .sf-hover-lift,
body.opt-anim-intensity-off .sf-hover-scale,
body.opt-anim-intensity-off .sf-pressable {
  animation: none !important;
  transition: none !important;
}
body.opt-anim-intensity-off .sf-hover-lift:hover,
body.opt-anim-intensity-off .sf-hover-scale:hover,
body.opt-anim-intensity-off .sf-pressable:active,
body.opt-anim-intensity-off [class*="sfx-"]:hover {
  transform: none !important;
}
body.opt-anim-intensity-off [data-sf-anim],
body.opt-anim-intensity-off .sf-reveal {
  opacity: 1 !important;
}

/* ── option: icon-motion = nudge ── */
body.opt-icon-motion-nudge .sf-icon {
  display: inline-block;
  transition: transform var(--sfm-dur-fast, 140ms) var(--sfm-ease, ease-out);
}
body.opt-icon-motion-nudge a:hover .sf-icon,
body.opt-icon-motion-nudge button:hover .sf-icon {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  body.opt-icon-motion-nudge .sf-icon { transition: none; }
  body.opt-icon-motion-nudge a:hover .sf-icon, body.opt-icon-motion-nudge button:hover .sf-icon { transform: none; }
}

/* ── option: divider-flourish = gradient ── */
body.opt-divider-flourish-gradient .sf-divider.sf-flourish {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sf-accent), transparent);
  border: none;
}

/* ── option: badge-style = soft ── */
body.opt-badge-style-soft .sf-badge {
  color: var(--sf-soft-ink);
  background: var(--sf-soft-bg);
  border: 1px solid transparent;
  border-radius: var(--sf-badge-radius, 999px);
}

/* ── option: stock-style = dot ── */
body.opt-stock-style-dot .sf-stock::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--sf-accent);
  margin-right: 6px;
  vertical-align: middle;
}
body.opt-stock-style-dot .sf-stock.sf-stock-out::before {
  background: var(--sf-muted);
}

/* ── option: new-tag = pill ── */
body.opt-new-tag-pill .sf-new-tag {
  background: var(--sf-accent);
  color: var(--sf-accent-text);
  border-radius: var(--sf-badge-radius, 999px);
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── option: verified-pill = outline ── */
body.opt-verified-pill-outline .sf-verified-pill {
  color: var(--sf-accent);
  border: 1px solid color-mix(in srgb, var(--sf-accent) 55%, transparent);
  background: transparent;
  border-radius: var(--sf-badge-radius, 999px);
  padding: 3px 11px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ── option: footer-style = columns ── */
body.opt-footer-style-columns .sf-footer-inner {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.2fr;
  gap: 3.5rem;
}
@media (max-width: 1000px) {
  body.opt-footer-style-columns .sf-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem;
  }
  body.opt-footer-style-columns .sf-footer-inner > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body.opt-footer-style-columns .sf-footer-inner {
    grid-template-columns: 1fr;
  }
}

/* ── option: footer-border = line ── */
body.opt-footer-border-line .sf-footer {
  border-top: 1px solid var(--sf-border-color, transparent);
}

/* ── option: footer-logo = hide ── */
body.opt-footer-logo-hide .sf-footer-logo {
  display: none;
}

/* ── option: footer-social = pill ── */
body.opt-footer-social-pill .sf-footer-social a {
  display: inline-flex;
  background: var(--sf-footer-ink);
  color: var(--sf-footer-bg);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

/* SF logo geometry — measured from the client's artwork (logo-prep.mjs).
 * shape: mark · nav form: client-supplied
 * trimmed aspect: 1.103 */
:root {
  --sf-logo-nav-h: 44px;
  --sf-logo-foot-h: 48px;
  --sf-logo-lockup-scale: 1.158;
  --sf-nav-wordmark: none;
}
/* SF footer logo: the footer ground #F1F5FE is light — the client's artwork ships as drawn. */
:root { --sf-logo-filter-foot: none; }