:root {
  --sf-bg: #03090D;
  --sf-surface: #071015;
  --sf-elevated: #0E171C;
  /* 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: #071015;
  --sf-text: #E9F3F8;
  --sf-muted: #99AFBA;
  --sf-accent: #5F94AD;
  --sf-accent-text: #031219;
  /* 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: #20576E;
  --sf-brand-text: #EDF9FF;
  /* 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: #03090D;
  --sf-chrome-ink: #E9F3F8;
  --sf-chrome-ink-dim: #ABB5BB;
  /* 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: #50869E;
  /* 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: #03090D;
  --sf-chrome-wash-to: #0B171D;
  --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: #FFFFFF;
  --sf-chrome-nav-ink: #20576E;
  --sf-chrome-nav-ink-dim: #587581;
  --sf-chrome-nav-accent: #20576E;
  --sf-accent-1: #2B5265;
  --sf-accent-2: #437389;
  --sf-accent-3: #5F94AD;
  --sf-accent-4: #7FAFC6;
  --sf-accent-5: #A1C7DA;
  --sf-radius: 16px;
  --sf-shadow: 95 148 173;
  --sf-font-display: 'Sora', 'Sora Fallback', 'Segoe UI', system-ui, sans-serif;
  --sf-font-body: 'Manrope', 'Manrope 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: dark) */
:root { --sf-logo-filter: 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 */
body.layout-hero-split .sf-hero {
  padding: calc(clamp(40px, 8vh, 96px) * var(--sf-hero-pad-scale, 1)) clamp(16px, 4vw, 32px);
  min-height: min(68vh, 720px);
  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 */
body.layout-hero-centered .sf-hero {
  padding: calc(clamp(56px, 10vh, 120px) * var(--sf-hero-pad-scale, 1)) 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 */
body.layout-hero-product-forward .sf-hero {
  padding: calc(clamp(28px, 4vh, 48px) * var(--sf-hero-pad-scale, 1)) clamp(16px, 3vw, 28px);
  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;
  }
}

/* ══ design options (themes/options.mjs) — append AFTER theme/layout/motion CSS ══ */
:root {
  --sf-soft-bg: #13222A;
  --sf-soft-ink: #5F94AD;
  --sf-tint-bg: #192227;
  --sf-hero-wash: #091318;
  --sf-hero-wash-pct: 7;
  --sf-glass-fill: rgb(7 16 21 / 0.62);
  --sf-glass-fill-strong: rgb(7 16 21 / 0.85);
  --sf-grad-from: #5F94AD;
  --sf-grad-to: #74AAC3;
  --sf-accent-hover: #72A1B7;
  --sf-btn-hover-overlay: rgb(255 255 255 / 0.16);
  --sf-contrast-bg: #E9F3F8;
  --sf-contrast-ink: #03090D;
  --sf-contrast-muted: #5C707A;
  --sf-contrast-accent: #3E728A;
  --sf-photo-bg: #0E171C;
  --sf-ctaband-dim-solved: #DEF3FD;
  --sf-texture-alpha: 0.05;
  --sf-logo-filter-flip: brightness(1);
  --sf-logo-filter-chrome: brightness(0) invert(1);
  --sf-logo-filter-nav: none;
  --sf-card-radius: 12px;
  --sf-btn-radius: 999px;
  --sf-input-radius: 8px;
  --sf-badge-radius: 999px;
  --sf-img-radius: 10px;
  --sf-modal-radius: 22px;
  --sf-menu-radius: 10px;
  --sf-thumb-radius: 14px;
  --sf-shadow-1: 0 1px 3px rgb(var(--sf-shadow-rgb, 0 0 0) / 0.10), 0 14px 34px -12px rgb(var(--sf-shadow-rgb, 0 0 0) / 0.28);
  --sf-shadow-2: 0 3px 6px rgb(var(--sf-shadow-rgb, 0 0 0) / 0.12), 0 24px 52px -16px rgb(var(--sf-shadow-rgb, 0 0 0) / 0.38);
  --sf-shadow-rgb: var(--sf-shadow);
  --sf-border-color: color-mix(in srgb, var(--sf-text) 8%, 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: 11px;
  --sf-btn-pad-x: 22px;
  --sf-btn-fs: 0.95rem;
  --sf-btn-case: none;
  --sf-btn-track: 0.01em;
  --sf-btn-weight: 500;
  --sf-btn-shadow: 0 6px 16px -8px rgb(var(--sf-shadow-rgb, 0 0 0) / 0.5);
  --sf-cta-scale: 1;
  --sf-focus-ring: 3px solid var(--sf-accent);
  --sf-focus-offset: 2px;
  --sf-h-weight: 700;
  --sf-h-track: -0.03em;
  --sf-display-scale: 1;
  --sf-body-fs: 15px;
  --sf-body-lh: 1.75;
  --sf-numvariant: tabular-nums;
  --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: none;
  --sf-nav-pad-y: 8px;
  --sf-nav-border: 1px solid var(--sf-border-color);
  --sf-nav-shadow: none;
  --sf-nav-case: uppercase;
  --sf-nav-track: 0.07em;
  --sf-nav-max: 1160px;
  --sf-logo-scale: 1.15;
  --sf-hero-pad-scale: 0.7;
  --sf-section-pad-scale: 1.3;
  --sf-thumb-aspect: 4 / 3;
  --sf-grid-min: 220px;
  --sf-grid-gap: 16px;
  --sf-card-title-fs: 1.05rem;
  --sf-pdp-sep: 1px solid var(--sf-border-color);
  --sf-input-pad-y: 11px;
  --sf-input-pad-x: 14px;
  --sf-input-fs: 0.98rem;
  --sf-field-gap: 20px;
  --sf-check-radius: 4px;
  --sf-form-btn-w: auto;
  --sf-scrim: rgb(0 0 0 / 0.55);
  --sf-modal-max: 520px;
  --sf-thumb-fit: contain;
  --sf-particle-density: 0;
  --sf-badge-fs: 0.72rem;
  --sf-badge-pad: 2px 9px;
  --sf-footer-bg: var(--sf-chrome-wash);
  --sf-footer-ink: var(--sf-chrome-ink);
  --sf-footer-ink-dim: var(--sf-chrome-ink-dim);
  --sf-footer-accent: var(--sf-chrome-accent);
  --sf-footer-pad: 48px;
}

/* ── option: card-style = glass ── */
body.opt-card-style-glass .sf-card {
  background: var(--sf-glass-fill-strong);
  border: 1px solid color-mix(in srgb, var(--sf-text) 14%, transparent);
  box-shadow: var(--sf-shadow-1, none);
}
@supports (backdrop-filter: blur(1px)) {
  @media (min-width: 769px) {
    body.opt-card-style-glass .sf-card {
      background: var(--sf-glass-fill);
      backdrop-filter: blur(14px);
    }
  }
}

/* ── option: texture = grain ── */
body.opt-texture-grain::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: calc(var(--sf-texture-alpha, 0.03) * var(--sf-texture-mult, 0.8));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── 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: card-hover-border = accent ── */
body.opt-card-hover-border-accent .sf-card:hover {
  border-color: color-mix(in srgb, var(--sf-accent) 55%, transparent);
}

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

/* ── option: btn-hover = shade ── */
body.opt-btn-hover-shade.opt-btn-style-solid .sf-btn-primary:hover,
body.opt-btn-hover-shade.opt-btn-style-gradient .sf-btn-primary:hover {
  background: var(--sf-accent-hover);
}
body.opt-btn-hover-shade.opt-btn-style-soft .sf-btn-primary:hover {
  background: var(--sf-accent);
  color: var(--sf-accent-text);
}
body.opt-btn-hover-shade.opt-btn-style-outline .sf-btn-primary:hover {
  background: var(--sf-tint-bg);
}

/* ── option: btn-arrow = arrow ── */
body.opt-btn-arrow-arrow .sf-btn-cta::after {
  content: '\2192';
  display: inline-block;
  margin-left: 0.5em;
  transition: transform var(--sfm-dur-fast, 140ms) var(--sfm-ease, ease-out);
}
body.opt-btn-arrow-arrow .sf-btn-cta:hover::after,
body.opt-btn-arrow-arrow .sf-btn-cta:focus-visible::after {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  body.opt-btn-arrow-arrow .sf-btn-cta::after { transition: none; }
  body.opt-btn-arrow-arrow .sf-btn-cta:hover::after, body.opt-btn-arrow-arrow .sf-btn-cta:focus-visible::after { transform: none; }
}

/* ── option: secondary-style = outline ── */
body.opt-secondary-style-outline .sf-btn-secondary {
  background: transparent;
  color: var(--sf-text);
  border: 1px solid color-mix(in srgb, var(--sf-text) 30%, transparent);
}
body.opt-secondary-style-outline .sf-btn-secondary:hover {
  border-color: color-mix(in srgb, var(--sf-text) 55%, transparent);
}

/* ── 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 = plain ── */
body.opt-kicker-style-plain .sf-kicker {
  color: var(--sf-accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── 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 = pill ── */
body.opt-nav-link-style-pill .sf-nav-link {
  padding: 6px 12px;
  border-radius: 999px;
}
body.opt-nav-link-style-pill .sf-nav-link[aria-current],
body.opt-nav-link-style-pill .sf-nav-link.active {
  background: var(--sf-nav-ink);
  color: var(--sf-nav-bg);
}
body.opt-nav-link-style-pill .sf-nav-link:hover {
  background: color-mix(in srgb, var(--sf-nav-ink) 16%, transparent);
  color: var(--sf-nav-ink);
}

/* ── option: cart-badge = minimal ── */
body.opt-cart-badge-minimal .sf-cart-count {
  background: transparent;
  color: var(--sf-nav-ink, var(--sf-accent));
  font-weight: 700;
}

/* ── option: mobile-menu = full ── */
body.opt-mobile-menu-full .sf-mobile-menu {
  position: fixed;
  inset: 0;
  border-radius: 0;
  background: var(--sf-bg);
}

/* ── option: hero-bg = gradient ── */
body.opt-hero-bg-gradient .sf-hero {
  background:
    radial-gradient(120% 90% at 85% -10%, var(--sf-hero-wash), transparent 60%),
    radial-gradient(90% 80% at -10% 110%, var(--sf-hero-wash), transparent 55%),
    var(--sf-bg);
}

/* ── 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-separator = fade ── */
body.opt-section-separator-fade .sf-section + .sf-section {
  position: relative;
}
body.opt-section-separator-fade .sf-section + .sf-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sf-border-color), transparent);
}

/* ── option: scroll-cue = arrow ── */
body.opt-scroll-cue-arrow .sf-scroll-cue {
  display: flex;
  justify-content: center;
  color: var(--sf-muted);
  animation: sfo-scroll-cue-bob 2.2s var(--sfm-ease, ease-in-out) infinite;
}
@keyframes sfo-scroll-cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  body.opt-scroll-cue-arrow .sf-scroll-cue { animation: none; }
}

/* ── option: hero-stats = plain ── */
body.opt-hero-stats-plain .sf-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
}
body.opt-hero-stats-plain .sf-hero-stats b {
  color: var(--sf-accent);
  font-size: 1.3em;
}
body.opt-hero-stats-plain .sf-hero-stats span {
  color: var(--sf-muted);
  font-size: 0.85rem;
}

/* ── option: card-layout = horizontal ── */
body.opt-card-layout-horizontal .sf-card {
  display: grid;
  grid-template-columns: minmax(96px, 132px) 1fr;
  align-items: stretch;
}
body.opt-card-layout-horizontal .sf-card .sf-card-media {
  height: 100%;
  aspect-ratio: auto;
}
@media (max-width: 560px) {
  body.opt-card-layout-horizontal .sf-card {
    display: block;
  }
  body.opt-card-layout-horizontal .sf-card .sf-card-media {
    height: auto;
    aspect-ratio: var(--sf-thumb-aspect, 4 / 3);
  }
}

/* ── option: card-media-bg = tinted ── */
body.opt-card-media-bg-tinted .sf-card-media,
body.opt-card-media-bg-tinted .card-img-wrap {
  background: var(--sf-soft-bg);
}

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

/* ── 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-accent-edge = left ── */
body.opt-card-accent-edge-left .sf-card {
  position: relative;
  overflow: hidden;
}
body.opt-card-accent-edge-left .sf-card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--sf-accent);
  z-index: 2;
}

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

/* ── option: spec-style = mono ── */
body.opt-spec-style-mono .sf-spec-table td:last-child {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}
body.opt-spec-style-mono .sf-spec-table tr + tr {
  border-top: 1px dashed var(--sf-border-color, transparent);
}

/* ── option: proof-panel = framed ── */
body.opt-proof-panel-framed .sf-proof-panel {
  background: transparent;
  color: inherit;
  border: 1.5px solid color-mix(in srgb, var(--sf-text) 24%, transparent);
}

/* ── option: coa-link = button ── */
body.opt-coa-link-button .sf-coa-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sf-accent);
  border: 1px solid color-mix(in srgb, var(--sf-accent) 55%, transparent);
  border-radius: var(--sf-btn-radius, 8px);
  padding: 7px 14px;
  text-decoration: none;
  font-weight: 600;
}
body.opt-coa-link-button .sf-coa-link:hover {
  background: var(--sf-tint-bg);
}

/* ── option: batch-chip = plain ── */
body.opt-batch-chip-plain .sf-batch-chip {
  color: var(--sf-muted);
  font-size: 0.88em;
}

/* ── option: gallery-frame = none ── */
body.opt-gallery-frame-none .sf-gallery {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ── option: qty-style = boxed ── */
body.opt-qty-style-boxed .sf-qty {
  border: 1px solid var(--sf-border-color, transparent);
  border-radius: var(--sf-btn-radius, 8px);
  overflow: hidden;
}
body.opt-qty-style-boxed .sf-qty button {
  background: var(--sf-tint-bg);
  color: var(--sf-text);
  border: none;
}

/* ── option: input-style = filled ── */
body.opt-input-style-filled .sf-input {
  background: var(--sf-tint-bg);
  border: 1px solid transparent;
  border-radius: var(--sf-input-radius, 8px);
}
body.opt-input-style-filled .sf-input:focus {
  border-color: var(--sf-accent);
}

/* ── option: focus-fill = tint ── */
body.opt-focus-fill-tint .sf-input:focus {
  background: var(--sf-tint-bg);
}

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

/* ── option: toast-pos = bottom-right ── */
body.opt-toast-pos-bottom-right .sf-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  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 = circle ── */
body.opt-close-style-circle .sf-modal-close {
  background: var(--sf-tint-bg);
  border: 1px solid var(--sf-border-color, transparent);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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-hover = lift ── */
body.opt-img-hover-lift .sf-thumb img {
  transition: transform var(--sfm-dur-base, 260ms) var(--sfm-ease, ease-out);
}
body.opt-img-hover-lift .sf-thumb:hover img {
  transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  body.opt-img-hover-lift .sf-thumb img { transition: none; }
  body.opt-img-hover-lift .sf-thumb:hover img { transform: none; }
}

/* ── 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: hover-feedback = playful ── */
body.opt-hover-feedback-playful .sf-hover-lift:hover,
body.opt-hover-feedback-playful .sf-hover-lift:focus-visible {
  transform: translateY(-6px) rotate(-0.4deg);
}
body.opt-hover-feedback-playful .sf-hover-scale:hover,
body.opt-hover-feedback-playful .sf-hover-scale:focus-visible {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  body.opt-hover-feedback-playful .sf-hover-lift:hover, body.opt-hover-feedback-playful .sf-hover-lift:focus-visible,
  body.opt-hover-feedback-playful .sf-hover-scale:hover, body.opt-hover-feedback-playful .sf-hover-scale:focus-visible { transform: none; }
}

/* ── option: press-feedback = firm ── */
body.opt-press-feedback-firm .sf-pressable:active {
  transform: scale(0.955);
}
@media (prefers-reduced-motion: reduce) {
  body.opt-press-feedback-firm .sf-pressable:active { transform: none; }
}

/* ── option: stagger-tempo = loose ── */
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(1) { animation-delay: 0ms; }
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(2) { animation-delay: 110ms; }
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(3) { animation-delay: 220ms; }
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(4) { animation-delay: 330ms; }
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(5) { animation-delay: 440ms; }
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(6) { animation-delay: 550ms; }
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(7) { animation-delay: 660ms; }
body.opt-stagger-tempo-loose .sf-stagger > *:nth-child(8) { animation-delay: 770ms; }

/* ── option: scroll-reveal = on ── */
html.sf-io body.opt-scroll-reveal-on .sf-reveal:not(.sf-in) {
  opacity: 0;
}
html.sf-io body.opt-scroll-reveal-on .sf-reveal.sf-in {
  animation: sfo-reveal-rise var(--sfm-dur-slow, 560ms) var(--sfm-ease, ease-out) both;
}
@keyframes sfo-reveal-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.sf-io body.opt-scroll-reveal-on .sf-reveal:not(.sf-in) { opacity: 1; }
  html.sf-io body.opt-scroll-reveal-on .sf-reveal.sf-in { animation: none; }
}

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

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

/* ── option: section-glow = on ── */
body.opt-section-glow-on .sf-section.sf-featured {
  position: relative;
}
body.opt-section-glow-on .sf-section.sf-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 0%, var(--sf-hero-wash), transparent 75%);
}

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

/* ── option: new-tag = ribbon ── */
body.opt-new-tag-ribbon .sf-card {
  position: relative;
}
body.opt-new-tag-ribbon .sf-new-tag {
  position: absolute;
  top: 12px;
  left: -6px;
  z-index: 2;
  transform: rotate(-4deg);
  background: var(--sf-accent);
  color: var(--sf-accent-text);
  border-radius: 3px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--sf-shadow-1, none);
}

/* ── 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 = fade ── */
body.opt-footer-border-fade .sf-footer {
  border-top: none;
  position: relative;
}
body.opt-footer-border-fade .sf-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sf-border-color), transparent);
}

/* SF logo geometry — measured from the client's artwork (logo-prep.mjs).
 * shape: horizontal · nav form: full
 * trimmed aspect: 3.525 */
:root {
  --sf-logo-nav-h: 38px;
  --sf-logo-foot-h: 34px;
  --sf-logo-lockup-scale: 1;
  --sf-nav-wordmark: none;
}
/* SF non-home header backdrop — the client's own picture.
 * lane: photo (client-asset) · source file: section-bg.jpg
 * measured: p2 0.0314 · p50 0.1647 · p98 0.4
 * wash solved to 0.3 against ground #071015 and ink #E9F3F8: the page title clears 8.36:1 over the worst pixel this picture can put under it (floor 4.5), and the title's luminance sits outside the composited range so no region of the photo matches it.
 * The wash is SOLVED, not picked. Do not hand-edit these numbers: raise the
 * wash and the page title stops clearing 4.5:1 over the picture, which
 * verifySectionBg() fails the build for. */
:root {
  --sf-secbg-url: url("brand_assets/SECTION-BG.webp?v=5818ee26");
  --sf-secbg-wash: 0.3;
  --sf-secbg-tint: 0.22;
  --sf-secbg-sweep: 0.1;
  --sf-secbg-grey: 1;
}
/* SF footer logo: ground #0B171D is dark, so the footer draws brand_assets/LOGO-ONDARK.webp — real knockout artwork, NOT a silhouette. The filter is off because the file is already correct for this surface. */
:root { --sf-logo-filter-foot: none; }