@syncedco/flow 0.1.0

package/styles.css

@@ -0,0 +1,2313 @@
+/* Generated by @syncedco/flow. Edit src/tokens.mjs or scripts/build-css.mjs, then run pnpm build. */
+@layer reset, tokens, base, app, layout, components, utilities;
+@layer tokens {
+  :root {
+    color-scheme: light;
+
+    --sf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --sf-font-display: Fraunces, Georgia, "Times New Roman", serif;
+    --sf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+
+    --sf-step--2: clamp(0.6944rem, 0.6866rem + 0.0348vw, 0.72rem);
+    --sf-step--1: clamp(0.8333rem, 0.8129rem + 0.0907vw, 0.9rem);
+    --sf-step-0: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --sf-step-1: clamp(1.2rem, 1.1369rem + 0.2806vw, 1.4063rem);
+    --sf-step-2: clamp(1.44rem, 1.3427rem + 0.4324vw, 1.7578rem);
+    --sf-step-3: clamp(1.728rem, 1.5843rem + 0.6385vw, 2.1973rem);
+    --sf-step-4: clamp(2.0736rem, 1.8676rem + 0.9156vw, 2.7466rem);
+    --sf-step-5: clamp(2.4883rem, 2.1991rem + 1.2856vw, 3.4332rem);
+    --sf-step-6: clamp(2.986rem, 2.5863rem + 1.7763vw, 4.2915rem);
+    --sf-step-7: clamp(3.5832rem, 3.0379rem + 2.4235vw, 5.3644rem);
+    --sf-step-8: clamp(4.2998rem, 3.5634rem + 3.2731vw, 6.7055rem);
+    --sf-type-caption: var(--sf-step--1);
+    --sf-type-body: var(--sf-step-0);
+    --sf-type-lead: var(--sf-step-1);
+    --sf-type-h6: var(--sf-step-1);
+    --sf-type-h5: var(--sf-step-2);
+    --sf-type-h4: var(--sf-step-3);
+    --sf-type-h3: var(--sf-step-4);
+    --sf-type-h2: var(--sf-step-5);
+    --sf-type-h1: var(--sf-step-6);
+    --sf-type-title: var(--sf-step-4);
+    --sf-type-display: var(--sf-step-7);
+    --sf-line-height-tight: 1;
+    --sf-line-height-heading: 1.08;
+    --sf-line-height-body: 1.5;
+    --sf-line-height-loose: 1.7;
+
+    --sf-space-3xs: clamp(0.25rem, 0.2404rem + 0.0425vw, 0.2813rem);
+    --sf-space-2xs: clamp(0.5rem, 0.4809rem + 0.085vw, 0.5625rem);
+    --sf-space-xs: clamp(0.75rem, 0.7213rem + 0.1276vw, 0.8438rem);
+    --sf-space-s: clamp(1rem, 0.9617rem + 0.1701vw, 1.125rem);
+    --sf-space-m: clamp(1.5rem, 1.4426rem + 0.2551vw, 1.6875rem);
+    --sf-space-l: clamp(2rem, 1.9235rem + 0.3401vw, 2.25rem);
+    --sf-space-xl: clamp(3rem, 2.8852rem + 0.5102vw, 3.375rem);
+    --sf-space-2xl: clamp(4rem, 3.8469rem + 0.6803vw, 4.5rem);
+    --sf-space-3xl: clamp(6rem, 5.7704rem + 1.0204vw, 6.75rem);
+    --sf-space-4xl: clamp(8rem, 7.6939rem + 1.3605vw, 9rem);
+    --sf-space-3xs-2xs: clamp(0.25rem, 0.1543rem + 0.4252vw, 0.5625rem);
+    --sf-space-2xs-xs: clamp(0.5rem, 0.3948rem + 0.4677vw, 0.8438rem);
+    --sf-space-xs-s: clamp(0.75rem, 0.6352rem + 0.5102vw, 1.125rem);
+    --sf-space-s-m: clamp(1rem, 0.7895rem + 0.9354vw, 1.6875rem);
+    --sf-space-m-l: clamp(1.5rem, 1.2704rem + 1.0204vw, 2.25rem);
+    --sf-space-l-xl: clamp(2rem, 1.5791rem + 1.8707vw, 3.375rem);
+    --sf-space-xl-2xl: clamp(3rem, 2.5408rem + 2.0408vw, 4.5rem);
+    --sf-space-2xl-3xl: clamp(4rem, 3.1582rem + 3.7415vw, 6.75rem);
+    --sf-space-s-l: clamp(1rem, 0.6173rem + 1.7007vw, 2.25rem);
+    --sf-space-m-xl: clamp(1.5rem, 0.926rem + 2.551vw, 3.375rem);
+    --sf-space-l-2xl: clamp(2rem, 1.2347rem + 3.4014vw, 4.5rem);
+    --sf-gutter: var(--sf-space-s-l);
+    --sf-region: var(--sf-space-xl-2xl);
+    --sf-container-max: 90rem;
+    --sf-container-narrow: 48rem;
+    --sf-container-wide: 108rem;
+    --sf-grid-columns: 12;
+
+    --sf-radius-none: 0;
+    --sf-radius-xs: 0.25rem;
+    --sf-radius-sm: 0.375rem;
+    --sf-radius-md: 0.5rem;
+    --sf-radius-lg: 0.75rem;
+    --sf-radius-xl: 1rem;
+    --sf-radius-2xl: 1.25rem;
+    --sf-radius-3xl: 1.5rem;
+    --sf-radius-full: 999rem;
+    --sf-radius-control: var(--sf-radius-md);
+    --sf-radius-panel: var(--sf-radius-lg);
+
+    --sf-colour-neutral-0: oklch(100% 0 0);
+    --sf-colour-neutral-50: oklch(98.6% 0.006 80);
+    --sf-colour-neutral-100: oklch(96.4% 0.011 80);
+    --sf-colour-neutral-200: oklch(90.8% 0.014 78);
+    --sf-colour-neutral-300: oklch(82% 0.018 76);
+    --sf-colour-neutral-400: oklch(68% 0.018 246);
+    --sf-colour-neutral-500: oklch(53% 0.018 244);
+    --sf-colour-neutral-600: oklch(43% 0.02 244);
+    --sf-colour-neutral-700: oklch(34% 0.02 244);
+    --sf-colour-neutral-800: oklch(27% 0.022 246);
+    --sf-colour-neutral-850: oklch(22% 0.024 248);
+    --sf-colour-neutral-900: oklch(18% 0.026 250);
+    --sf-colour-neutral-950: oklch(13.5% 0.03 252);
+    --sf-colour-amber-500: oklch(78% 0.15 82);
+    --sf-colour-amber-700: oklch(54% 0.13 74);
+    --sf-colour-orange-500: oklch(74% 0.17 48);
+    --sf-colour-orange-600: oklch(68% 0.18 44);
+    --sf-colour-orange-700: oklch(58% 0.17 42);
+    --sf-colour-green-500: oklch(62% 0.13 150);
+    --sf-colour-green-600: oklch(54% 0.13 150);
+    --sf-colour-green-700: oklch(44% 0.12 150);
+    --sf-colour-cyan-500: oklch(70% 0.12 205);
+    --sf-colour-cyan-600: oklch(58% 0.12 210);
+    --sf-colour-blue-600: oklch(52% 0.14 250);
+    --sf-colour-red-600: oklch(56% 0.2 28);
+    --sf-colour-red-700: oklch(47% 0.19 28);
+    --sf-colour-background: var(--sf-colour-neutral-50);
+    --sf-colour-foreground: var(--sf-colour-neutral-900);
+    --sf-colour-muted: var(--sf-colour-neutral-700);
+    --sf-colour-subtle: var(--sf-colour-neutral-500);
+    --sf-colour-surface: var(--sf-colour-neutral-0);
+    --sf-colour-surface-alt: var(--sf-colour-neutral-100);
+    --sf-colour-surface-raised: var(--sf-colour-neutral-0);
+    --sf-colour-surface-inset: var(--sf-colour-neutral-100);
+    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
+    --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
+    --sf-colour-primary: var(--sf-colour-orange-600);
+    --sf-colour-primary-hover: var(--sf-colour-orange-700);
+    --sf-colour-primary-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-primary-soft: oklch(68% 0.18 44 / 0.12);
+    --sf-colour-primary-soft-border: oklch(68% 0.18 44 / 0.28);
+    --sf-colour-link: var(--sf-colour-orange-700);
+    --sf-colour-link-hover: var(--sf-colour-orange-600);
+    --sf-colour-accent: var(--sf-colour-cyan-500);
+    --sf-colour-accent-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-success: var(--sf-colour-green-500);
+    --sf-colour-success-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-success-soft: oklch(62% 0.13 150 / 0.12);
+    --sf-colour-warning: var(--sf-colour-amber-500);
+    --sf-colour-warning-foreground: var(--sf-colour-neutral-950);
+    --sf-colour-warning-soft: oklch(78% 0.15 82 / 0.16);
+    --sf-colour-danger: var(--sf-colour-red-600);
+    --sf-colour-danger-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-danger-soft: oklch(56% 0.2 28 / 0.12);
+    --sf-colour-info: var(--sf-colour-cyan-600);
+    --sf-colour-info-foreground: var(--sf-colour-neutral-0);
+    --sf-colour-info-soft: oklch(70% 0.12 205 / 0.14);
+    --sf-colour-ring: var(--sf-colour-orange-600);
+
+    --sf-shadow-sm: 0 0.125rem 0.375rem oklch(0% 0 0 / 0.08);
+    --sf-shadow-md: 0 0.75rem 1.75rem oklch(0% 0 0 / 0.12);
+    --sf-shadow-lg: 0 1.25rem 3rem oklch(0% 0 0 / 0.16);
+    --sf-shadow-xl: 0 1.75rem 4rem oklch(0% 0 0 / 0.18);
+    --sf-shadow-inset: inset 0 0 0 1px var(--sf-colour-border);
+    --sf-shadow-glow: 0 0 2rem oklch(68% 0.18 44 / 0.24);
+    --sf-duration-fast: 150ms;
+    --sf-duration-normal: 220ms;
+    --sf-duration-slow: 360ms;
+    --sf-ease-standard: cubic-bezier(.2, 0, 0, 1);
+    --sf-ease-emphasized: cubic-bezier(.16, 1, .3, 1);
+
+    --sf-button-radius: var(--sf-radius-md);
+    --sf-button-block-size: 2.75rem;
+    --sf-button-padding-inline: var(--sf-space-s);
+    --sf-card-radius: var(--sf-radius-lg);
+    --sf-card-padding: var(--sf-space-m-l);
+    --sf-input-radius: var(--sf-radius-md);
+    --sf-input-block-size: 2.75rem;
+    --sf-input-padding-inline: var(--sf-space-s);
+    --sf-input-border: var(--sf-colour-border);
+    --sf-input-bg: var(--sf-colour-surface);
+    --sf-alert-radius: var(--sf-radius-lg);
+    --sf-alert-padding: var(--sf-space-s-m);
+    --sf-nav-gap: var(--sf-space-xs-s);
+    --sf-nav-link-radius: var(--sf-radius-sm);
+    --sf-icon-size: 1em;
+    --sf-icon-stroke: 2;
+  }
+
+  :where(.sf-theme-light, [data-sf-theme="light"]) {
+    color-scheme: light;
+    --sf-colour-background: var(--sf-colour-neutral-50);
+    --sf-colour-foreground: var(--sf-colour-neutral-900);
+    --sf-colour-muted: var(--sf-colour-neutral-700);
+    --sf-colour-subtle: var(--sf-colour-neutral-500);
+    --sf-colour-surface: var(--sf-colour-neutral-0);
+    --sf-colour-surface-alt: var(--sf-colour-neutral-100);
+    --sf-colour-surface-raised: var(--sf-colour-neutral-0);
+    --sf-colour-surface-inset: var(--sf-colour-neutral-100);
+    --sf-colour-border: oklch(18% 0.026 250 / 0.12);
+    --sf-colour-border-strong: oklch(18% 0.026 250 / 0.22);
+    --sf-colour-link: var(--sf-colour-orange-700);
+    --sf-colour-link-hover: var(--sf-colour-orange-600);
+  }
+
+  :where(.sf-theme-dark, [data-sf-theme="dark"]) {
+    color-scheme: dark;
+    --sf-colour-background: var(--sf-colour-neutral-950);
+    --sf-colour-foreground: oklch(96% 0.008 86);
+    --sf-colour-muted: oklch(78% 0.012 86);
+    --sf-colour-subtle: oklch(64% 0.014 86);
+    --sf-colour-surface: var(--sf-colour-neutral-900);
+    --sf-colour-surface-alt: var(--sf-colour-neutral-850);
+    --sf-colour-surface-raised: var(--sf-colour-neutral-850);
+    --sf-colour-surface-inset: var(--sf-colour-neutral-950);
+    --sf-colour-border: oklch(100% 0 0 / 0.14);
+    --sf-colour-border-strong: oklch(100% 0 0 / 0.24);
+    --sf-colour-link: var(--sf-colour-orange-500);
+    --sf-colour-link-hover: oklch(80% 0.14 50);
+  }
+}
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  *:where(:not(dialog)) { margin: 0; }
+  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+  body { min-block-size: 100%; }
+  img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
+  img, video { block-size: auto; }
+  input, button, textarea, select { font: inherit; }
+  button, input:where([type="button"], [type="submit"], [type="reset"]) { appearance: button; }
+  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
+}
+@layer base {
+  html {
+    background: var(--sf-colour-background);
+    color: var(--sf-colour-foreground);
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background: var(--sf-colour-background);
+    color: var(--sf-colour-foreground);
+    font-family: var(--sf-font-sans);
+    font-size: var(--sf-type-body);
+    line-height: var(--sf-line-height-body);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    color: inherit;
+    font-family: var(--sf-font-display);
+    font-weight: 700;
+    line-height: var(--sf-line-height-tight);
+    text-wrap: balance;
+  }
+
+  :where(h1) { font-size: var(--sf-type-h1); }
+  :where(h2) { font-size: var(--sf-type-h2); }
+  :where(h3) { font-size: var(--sf-type-h3); }
+  :where(h4) { font-size: var(--sf-type-h4); }
+  :where(h5) { font-size: var(--sf-type-h5); }
+  :where(h6) { font-size: var(--sf-type-h6); }
+  :where(p, li, dd, figcaption) { text-wrap: pretty; }
+  :where(a) {
+    color: var(--sf-colour-link);
+    text-decoration-color: color-mix(in oklch, currentColor 55%, transparent);
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: .08em;
+    text-underline-offset: .18em;
+  }
+  :where(a:hover) { color: var(--sf-colour-link-hover); }
+  :where(strong, b) { font-weight: 800; }
+  :where(small) { font-size: var(--sf-step--1); }
+  :where(code, kbd, samp, pre) { font-family: var(--sf-font-mono); }
+  :where(:not(pre) > code, kbd) {
+    background: var(--sf-colour-surface-alt);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-sm);
+    font-size: .9em;
+    padding: .1em .35em;
+  }
+  :where(pre) {
+    background: var(--sf-colour-surface-inset);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    overflow-x: auto;
+    padding: var(--sf-space-s);
+  }
+  :where(hr) {
+    border: 0;
+    border-block-start: 1px solid var(--sf-colour-border);
+    margin-block: var(--sf-space-l);
+  }
+  :where(blockquote) {
+    border-inline-start: 0.25rem solid var(--sf-colour-primary);
+    color: var(--sf-colour-muted);
+    padding-inline-start: var(--sf-space-s);
+  }
+  :where(label) { cursor: pointer; }
+  :where(input, textarea, select) { color: inherit; }
+  :where(textarea) { resize: vertical; }
+  :where(button:not(:disabled), [role="button"]:not(:disabled), a[href]) { cursor: pointer; }
+  :where(button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
+  :where(:focus-visible) { outline: 0.125rem solid var(--sf-colour-ring); outline-offset: .2rem; }
+  :where(:target) { scroll-margin-block: var(--sf-space-l); }
+  ::selection { background: color-mix(in oklch, var(--sf-colour-primary) 28%, transparent); }
+
+  @media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(:focus-visible) {
+      outline: 2px solid Highlight;
+      outline-offset: .2rem;
+    }
+
+    ::selection {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+@layer layout {
+  .sf-container {
+    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-container-max));
+    margin-inline: auto;
+  }
+
+  .sf-container--narrow { --sf-container-max: var(--sf-container-narrow); }
+  .sf-container--wide { --sf-container-max: var(--sf-container-wide); }
+  .sf-container--full { --sf-container-max: 100%; }
+
+  .sf-rail-shell {
+    --sf-rail-size: 4.25rem;
+    min-block-size: 100svh;
+  }
+
+  .sf-rail-shell__body {
+    min-inline-size: 0;
+  }
+
+  .sf-rail-shell__rail {
+    align-items: center;
+    background:
+      repeating-linear-gradient(-45deg, color-mix(in oklch, var(--sf-colour-foreground) 9%, transparent) 0 .0625rem, transparent .0625rem .4375rem),
+      color-mix(in oklch, var(--sf-colour-background) 92%, black);
+    border-inline-end: 1px solid var(--sf-colour-border);
+    display: none;
+    justify-items: center;
+  }
+
+  .sf-rail-shell__mark,
+  .sf-rail-shell__label {
+    color: var(--sf-colour-primary);
+    font-weight: 900;
+  }
+
+  .sf-rail-shell__label {
+    font-family: var(--sf-font-mono);
+    font-size: var(--sf-step--2);
+    letter-spacing: .18em;
+    text-transform: uppercase;
+    transform: rotate(-90deg);
+    white-space: nowrap;
+  }
+
+  .sf-rail-shell__label::before {
+    background: currentColor;
+    block-size: .25rem;
+    border-radius: var(--sf-radius-full);
+    box-shadow: 0 0 .875rem currentColor;
+    content: "";
+    display: inline-block;
+    inline-size: .25rem;
+    margin-inline-end: var(--sf-space-xs);
+  }
+
+  .sf-section { padding-block: var(--sf-section-space, var(--sf-region)); }
+  .sf-section--compact { --sf-section-space: var(--sf-space-l-xl); }
+  .sf-section--spacious { --sf-section-space: var(--sf-space-2xl-3xl); }
+
+  .sf-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-stack-space, var(--sf-space-s));
+  }
+
+  .sf-stack--tight { --sf-stack-space: var(--sf-space-2xs-xs); }
+  .sf-stack--loose { --sf-stack-space: var(--sf-space-m-xl); }
+
+  .sf-flow > * + * { margin-block-start: var(--sf-flow-space, var(--sf-space-s)); }
+
+  .sf-cluster {
+    align-items: var(--sf-cluster-align, center);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-cluster-space, var(--sf-space-s));
+    justify-content: var(--sf-cluster-justify, flex-start);
+  }
+
+  .sf-repel {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-s);
+    justify-content: space-between;
+  }
+
+  .sf-toolbar {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-s);
+    justify-content: space-between;
+  }
+
+  .sf-app-shell {
+    background: var(--sf-colour-background);
+    color: var(--sf-colour-foreground);
+    display: grid;
+    grid-template-columns: minmax(14rem, var(--sf-app-sidebar-width, 16rem)) minmax(0, 1fr);
+    min-block-size: 100dvh;
+  }
+
+  .sf-app-sidebar {
+    align-self: start;
+    background: var(--sf-colour-surface);
+    border-inline-end: 1px solid var(--sf-colour-border);
+    display: flex;
+    flex-direction: column;
+    gap: var(--sf-space-s);
+    max-block-size: 100dvh;
+    min-block-size: 100dvh;
+    overflow: auto;
+    padding: var(--sf-space-s);
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  .sf-app-sidebar__brand {
+    align-items: center;
+    display: flex;
+    gap: var(--sf-space-xs);
+    padding-block-end: var(--sf-space-s);
+  }
+
+  .sf-app-sidebar > footer {
+    border-block-start: 1px solid var(--sf-colour-border);
+    padding-block-start: var(--sf-space-s);
+  }
+
+  .sf-app-main {
+    min-inline-size: 0;
+    padding: var(--sf-app-main-padding, var(--sf-space-m-l));
+  }
+
+  .sf-grid {
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(var(--sf-grid-columns), minmax(0, 1fr));
+  }
+
+  .sf-grid--2 { --sf-grid-columns: 2; }
+  .sf-grid--3 { --sf-grid-columns: 3; }
+  .sf-grid--4 { --sf-grid-columns: 4; }
+
+  .sf-auto-grid {
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-auto-grid-min, 16rem)), 1fr));
+  }
+
+  .sf-auto-grid--xs { --sf-auto-grid-min: 8rem; }
+  .sf-auto-grid--sm { --sf-auto-grid-min: 12rem; }
+  .sf-auto-grid--lg { --sf-auto-grid-min: 20rem; }
+
+  .sf-split {
+    display: grid;
+    gap: var(--sf-split-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-split-min, 24rem)), 1fr));
+  }
+
+  .sf-split--reverse > :first-child { order: 2; }
+  .sf-split--reverse > :last-child { order: 1; }
+
+  .sf-centre {
+    box-sizing: content-box;
+    margin-inline: auto;
+    max-inline-size: var(--sf-centre-size, 65ch);
+  }
+
+  .sf-centre--narrow { --sf-centre-size: 48ch; }
+  .sf-centre--wide { --sf-centre-size: 80ch; }
+
+  .sf-sidebar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-gutter);
+  }
+
+  .sf-sidebar > :first-child {
+    flex-basis: var(--sf-sidebar-width, 20rem);
+    flex-grow: 1;
+  }
+
+  .sf-sidebar > :last-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(100%, var(--sf-sidebar-content-min, 50%));
+  }
+
+  .sf-switcher {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-gutter);
+  }
+
+  .sf-switcher > * {
+    flex-basis: calc((var(--sf-switcher-threshold, 42rem) - 100%) * 999);
+    flex-grow: 1;
+  }
+
+  .sf-frame {
+    aspect-ratio: var(--sf-frame-ratio, 16 / 9);
+    overflow: hidden;
+  }
+
+  .sf-frame > :where(img, video, iframe) {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  .sf-frame--square { --sf-frame-ratio: 1; }
+  .sf-frame--portrait { --sf-frame-ratio: 4 / 5; }
+  .sf-frame--wide { --sf-frame-ratio: 21 / 9; }
+
+  .sf-cover {
+    display: flex;
+    flex-direction: column;
+    min-block-size: var(--sf-cover-min, 100svh);
+    padding-block: var(--sf-region);
+  }
+
+  .sf-cover > :where(:first-child:not(.sf-cover__centre)) { margin-block-end: auto; }
+  .sf-cover > :where(:last-child:not(.sf-cover__centre)) { margin-block-start: auto; }
+
+  .sf-panel-grid {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 18rem)), 1fr));
+  }
+
+  .sf-metric-grid,
+  .sf-pipeline {
+    display: grid;
+    gap: var(--sf-space-s);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-panel-min, 11rem)), 1fr));
+  }
+
+  .sf-pipeline {
+    --sf-panel-min: 10rem;
+  }
+
+  .sf-scroll-viewport,
+  .sf-scroll-snap-y {
+    block-size: var(--sf-scroll-viewport-size, 100svh);
+    overflow-y: auto;
+    scroll-padding-block: var(--sf-scroll-padding, var(--sf-space-l));
+    scroll-snap-type: y proximity;
+  }
+
+  :where(.sf-scroll-viewport, .sf-scroll-snap-y)[data-snap="mandatory"] {
+    --sf-scroll-snap-stop: always;
+    scroll-snap-type: y mandatory;
+  }
+  .sf-scroll-viewport[data-size="preview"] {
+    --sf-scroll-margin: 0;
+    --sf-scroll-padding: 0;
+    --sf-scroll-viewport-size: min(32rem, 80svh);
+    --sf-scroll-panel-min: min(32rem, 80svh);
+  }
+
+  .sf-scroll-panel {
+    align-content: center;
+    display: grid;
+    min-block-size: var(--sf-scroll-panel-min, 100svh);
+    scroll-margin-block: var(--sf-scroll-margin, var(--sf-space-l));
+    scroll-snap-align: start;
+    scroll-snap-stop: var(--sf-scroll-snap-stop, normal);
+  }
+
+  .sf-sticky-top {
+    position: sticky;
+    inset-block-start: var(--sf-sticky-offset, 0);
+    z-index: var(--sf-sticky-z, 20);
+  }
+
+  .sf-media-object {
+    align-items: var(--sf-media-object-align, start);
+    display: grid;
+    gap: var(--sf-space-s-m);
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .sf-aside-rail {
+    display: grid;
+    gap: var(--sf-gutter);
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sf-chapter {
+    align-items: var(--sf-chapter-align, center);
+    display: grid;
+    gap: var(--sf-chapter-gap, var(--sf-space-xl-2xl));
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .sf-chapter__copy {
+    max-inline-size: var(--sf-chapter-copy, 24rem);
+  }
+
+  @media (min-width: 48rem) {
+    .sf-rail-shell {
+      display: grid;
+      grid-template-columns: var(--sf-rail-size) minmax(0, 1fr);
+    }
+
+    .sf-rail-shell__rail {
+      block-size: 100svh;
+      display: grid;
+      grid-template-rows: 3.5rem repeat(var(--sf-rail-items, 5), 1fr);
+      inset-block-start: 0;
+      position: sticky;
+    }
+
+    .sf-aside-rail {
+      grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
+    }
+
+    .sf-aside-rail[data-rail="start"] {
+      grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
+    }
+
+    .sf-chapter {
+      grid-template-columns: minmax(18rem, .42fr) minmax(0, 1fr);
+    }
+  }
+
+  @media (max-width: 56rem) {
+    .sf-app-shell {
+      grid-template-columns: 1fr;
+    }
+
+    .sf-app-main {
+      --sf-app-main-padding: var(--sf-space-s);
+    }
+
+    .sf-app-sidebar {
+      border-block-end: 1px solid var(--sf-colour-border);
+      border-inline-end: 0;
+      max-block-size: none;
+      min-block-size: auto;
+      position: static;
+    }
+
+    .sf-app-sidebar > footer {
+      margin-block-start: 0;
+    }
+  }
+
+  @supports (animation-timeline: view()) {
+    .sf-scroll-panel[data-view-progress] {
+      view-timeline-name: --sf-panel;
+      view-timeline-axis: block;
+    }
+  }
+
+  @container (min-width: 42rem) {
+    .sf-panel-grid[data-density="featured"] > :first-child {
+      grid-column: span 2;
+    }
+  }
+}
+@layer components {
+  .sf-button {
+    align-items: center;
+    background: var(--sf-button-bg, var(--sf-colour-primary));
+    border: 1px solid var(--sf-button-border, color-mix(in oklch, var(--sf-colour-primary) 84%, black));
+    border-radius: var(--sf-button-radius);
+    box-shadow: var(--sf-button-shadow, var(--sf-shadow-sm));
+    color: var(--sf-button-colour, var(--sf-colour-primary-foreground));
+    display: inline-flex;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    gap: var(--sf-space-2xs);
+    justify-content: center;
+    min-block-size: var(--sf-button-block-size);
+    padding-block: .625rem;
+    padding-inline: var(--sf-button-padding-inline);
+    text-decoration: none;
+    transition: background-color var(--sf-duration-normal) var(--sf-ease-standard), border-color var(--sf-duration-normal) var(--sf-ease-standard), box-shadow var(--sf-duration-normal) var(--sf-ease-standard), color var(--sf-duration-normal) var(--sf-ease-standard), transform var(--sf-duration-normal) var(--sf-ease-standard);
+    white-space: nowrap;
+  }
+
+  .sf-button:hover {
+    background: var(--sf-button-bg-hover, var(--sf-colour-primary-hover));
+    transform: translateY(-0.0625rem);
+  }
+
+  .sf-button:disabled,
+  .sf-button[aria-disabled="true"] {
+    opacity: .55;
+    pointer-events: none;
+  }
+
+  :where(.sf-button, .sf-nav__link, .sf-card--interactive, .sf-price-card)[aria-disabled="true"],
+  :where(.sf-link, .sf-link-subtle, .sf-link-plain)[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: .55;
+    pointer-events: none;
+  }
+
+  :where(.sf-button, .sf-nav__link)[aria-expanded="true"],
+  :where(.sf-button, .sf-nav__link)[aria-pressed="true"],
+  :where(.sf-button, .sf-nav__link)[aria-selected="true"],
+  :where(.sf-button, .sf-nav__link)[data-state="open"] {
+    background: var(--sf-colour-surface-alt);
+    border-color: color-mix(in oklch, var(--sf-colour-primary) 34%, var(--sf-colour-border));
+    color: var(--sf-colour-foreground);
+  }
+
+  .sf-button[aria-busy="true"],
+  .sf-button[data-loading="true"] {
+    cursor: progress;
+    opacity: .78;
+    pointer-events: none;
+  }
+
+  .sf-button:focus-visible {
+    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--sf-colour-ring) 22%, transparent);
+  }
+
+  .sf-button--default,
+  .sf-button[data-variant="default"] {
+    --sf-button-bg: var(--sf-colour-primary);
+    --sf-button-bg-hover: var(--sf-colour-primary-hover);
+    --sf-button-border: color-mix(in oklch, var(--sf-colour-primary) 84%, black);
+    --sf-button-colour: var(--sf-colour-primary-foreground);
+  }
+
+  .sf-button--secondary,
+  .sf-button[data-variant="secondary"] {
+    --sf-button-bg: var(--sf-colour-surface-alt);
+    --sf-button-bg-hover: color-mix(in oklch, var(--sf-colour-surface-alt) 86%, var(--sf-colour-primary));
+    --sf-button-border: var(--sf-colour-border);
+    --sf-button-colour: var(--sf-colour-foreground);
+  }
+
+  .sf-button--outline,
+  .sf-button[data-variant="outline"] {
+    --sf-button-bg: transparent;
+    --sf-button-bg-hover: var(--sf-colour-surface-alt);
+    --sf-button-border: var(--sf-colour-border);
+    --sf-button-colour: var(--sf-colour-foreground);
+    --sf-button-shadow: none;
+  }
+
+  .sf-button--ghost,
+  .sf-button[data-variant="ghost"] {
+    --sf-button-bg: transparent;
+    --sf-button-bg-hover: var(--sf-colour-surface-alt);
+    --sf-button-border: transparent;
+    --sf-button-colour: var(--sf-colour-foreground);
+    --sf-button-shadow: none;
+  }
+
+  .sf-button--link,
+  .sf-button[data-variant="link"] {
+    --sf-button-bg: transparent;
+    --sf-button-bg-hover: transparent;
+    --sf-button-border: transparent;
+    --sf-button-colour: var(--sf-colour-primary);
+    --sf-button-shadow: none;
+    min-block-size: auto;
+    padding: 0;
+    text-decoration: underline;
+    text-underline-offset: .25em;
+  }
+
+  .sf-button--link:hover,
+  .sf-button[data-variant="link"]:hover {
+    transform: none;
+  }
+
+  .sf-button--destructive,
+  .sf-button[data-variant="destructive"] {
+    --sf-button-bg: var(--sf-colour-danger);
+    --sf-button-bg-hover: color-mix(in oklch, var(--sf-colour-danger) 86%, black);
+    --sf-button-border: color-mix(in oklch, var(--sf-colour-danger) 84%, black);
+    --sf-button-colour: var(--sf-colour-primary-foreground);
+  }
+
+  .sf-button--sm,
+  .sf-button[data-size="sm"] {
+    --sf-button-block-size: 2.25rem;
+    --sf-button-padding-inline: var(--sf-space-xs);
+  }
+
+  .sf-button--lg,
+  .sf-button[data-size="lg"] {
+    --sf-button-block-size: 3rem;
+    --sf-button-padding-inline: var(--sf-space-m);
+  }
+
+  .sf-button--icon,
+  .sf-icon-button,
+  .sf-button[data-size="icon"] {
+    --sf-button-block-size: 2.75rem;
+    inline-size: 2.75rem;
+    padding-inline: 0;
+  }
+
+  .sf-button--block,
+  .sf-button[data-width="block"] {
+    inline-size: 100%;
+  }
+
+  .sf-button-group {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-2xs);
+  }
+
+  .sf-icon {
+    block-size: var(--sf-icon-size, 1em);
+    color: var(--sf-icon-colour, currentColor);
+    flex: 0 0 auto;
+    inline-size: var(--sf-icon-size, 1em);
+    stroke-width: var(--sf-icon-stroke, 2);
+    vertical-align: -0.125em;
+  }
+
+  .sf-icon--xs { --sf-icon-size: var(--sf-step--1); }
+  .sf-icon--sm { --sf-icon-size: var(--sf-step-0); }
+  .sf-icon--md { --sf-icon-size: var(--sf-step-1); }
+  .sf-icon--lg { --sf-icon-size: var(--sf-step-2); }
+  .sf-icon--xl { --sf-icon-size: var(--sf-step-3); }
+
+  .sf-card {
+    background: var(--sf-card-bg, var(--sf-colour-surface));
+    border: 1px solid var(--sf-card-border, var(--sf-colour-border));
+    border-radius: var(--sf-card-radius);
+    box-shadow: var(--sf-card-shadow, var(--sf-shadow-sm));
+    color: var(--sf-card-colour, var(--sf-colour-foreground));
+    padding: var(--sf-card-padding);
+  }
+
+  .sf-card--flat {
+    --sf-card-shadow: none;
+  }
+
+  .sf-card--raised {
+    --sf-card-bg: var(--sf-colour-surface-raised);
+    --sf-card-shadow: var(--sf-shadow-md);
+  }
+
+  .sf-card--compact {
+    --sf-card-padding: var(--sf-space-s);
+  }
+
+  .sf-card--glass,
+  .sf-card--technical {
+    --sf-card-bg:
+      linear-gradient(180deg, color-mix(in oklch, var(--sf-colour-foreground) 5%, transparent), transparent),
+      color-mix(in oklch, var(--sf-colour-surface) 84%, transparent);
+    --sf-card-border: var(--sf-colour-border-strong);
+    --sf-card-shadow: none;
+    backdrop-filter: blur(1.125rem);
+  }
+
+  .sf-card--accent {
+    --sf-card-border: color-mix(in oklch, var(--sf-colour-primary) 54%, var(--sf-colour-border));
+    --sf-card-shadow: 0 0 2rem color-mix(in oklch, var(--sf-colour-primary) 18%, transparent);
+  }
+
+  .sf-card--center {
+    align-items: center;
+    text-align: center;
+  }
+
+  .sf-card__header,
+  .sf-card__body,
+  .sf-card__footer {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-card__title {
+    font-family: var(--sf-font-display);
+    font-size: var(--sf-step-2);
+    font-weight: 700;
+    line-height: var(--sf-line-height-heading);
+  }
+
+  .sf-card__description {
+    color: var(--sf-colour-muted);
+  }
+
+  .sf-card--interactive {
+    transition: border-color var(--sf-duration-normal) var(--sf-ease-standard), box-shadow var(--sf-duration-normal) var(--sf-ease-standard), transform var(--sf-duration-normal) var(--sf-ease-standard);
+  }
+
+  .sf-card--interactive:hover {
+    border-color: color-mix(in oklch, var(--sf-colour-primary) 32%, var(--sf-colour-border));
+    box-shadow: var(--sf-shadow-md);
+    transform: translateY(-0.125rem);
+  }
+
+  .sf-surface {
+    background: var(--sf-surface-bg, var(--sf-colour-surface));
+    border: 1px solid var(--sf-surface-border, var(--sf-colour-border));
+    border-radius: var(--sf-surface-radius, var(--sf-radius-panel));
+    box-shadow: var(--sf-surface-shadow, none);
+    color: var(--sf-surface-colour, var(--sf-colour-foreground));
+    padding: var(--sf-surface-padding, var(--sf-space-m-l));
+  }
+
+  .sf-surface--alt {
+    --sf-surface-bg: var(--sf-colour-surface-alt);
+  }
+
+  .sf-surface--raised {
+    --sf-surface-bg: var(--sf-colour-surface-raised);
+    --sf-surface-shadow: var(--sf-shadow-md);
+  }
+
+  .sf-code-window {
+    background:
+      linear-gradient(180deg, color-mix(in oklch, var(--sf-colour-foreground) 5%, transparent), transparent),
+      color-mix(in oklch, var(--sf-colour-surface) 86%, transparent);
+    border: 1px solid var(--sf-code-window-border, color-mix(in oklch, var(--sf-colour-primary) 48%, var(--sf-colour-border)));
+    border-radius: var(--sf-radius-panel);
+    box-shadow: var(--sf-code-window-shadow, none);
+    color: var(--sf-colour-muted);
+    overflow: hidden;
+  }
+
+  .sf-code-window--glow,
+  .sf-code-window[data-emphasis="glow"] {
+    --sf-code-window-border: color-mix(in oklch, var(--sf-colour-primary) 62%, var(--sf-colour-border));
+    --sf-code-window-shadow: 0 0 2.5rem color-mix(in oklch, var(--sf-colour-primary) 16%, transparent);
+  }
+
+  .sf-code-window__bar {
+    align-items: center;
+    border-block-end: 1px solid var(--sf-colour-border);
+    color: var(--sf-colour-muted);
+    display: grid;
+    font-family: var(--sf-font-mono);
+    font-size: var(--sf-step--2);
+    gap: var(--sf-space-xs);
+    grid-template-columns: auto 1fr auto;
+    min-block-size: 2rem;
+    padding-inline: var(--sf-space-xs);
+  }
+
+  .sf-code-window__bar > :last-child {
+    justify-self: end;
+  }
+
+  .sf-window-dots {
+    background: var(--sf-colour-danger);
+    block-size: .42rem;
+    border-radius: var(--sf-radius-full);
+    box-shadow:
+      .68rem 0 0 var(--sf-colour-warning),
+      1.36rem 0 0 var(--sf-colour-success);
+    display: inline-block;
+    inline-size: .42rem;
+    margin-inline-end: var(--sf-space-l);
+  }
+
+  .sf-code-lines {
+    color: var(--sf-colour-muted);
+    counter-reset: code;
+    font-family: var(--sf-font-mono);
+    font-size: var(--sf-code-font-size, clamp(.72rem, 1vw, .88rem));
+    line-height: 1.58;
+    list-style: none;
+    margin: 0;
+    padding: var(--sf-code-padding, var(--sf-space-s));
+  }
+
+  .sf-code-lines--compact {
+    --sf-code-font-size: var(--sf-step--2);
+  }
+
+  .sf-code-lines--lg {
+    --sf-code-font-size: var(--sf-step--1);
+    --sf-code-padding: var(--sf-space-s-m) var(--sf-space-m);
+  }
+
+  .sf-code-lines > li {
+    counter-increment: code;
+    display: grid;
+    gap: var(--sf-space-xs);
+    grid-template-columns: 2ch minmax(0, 1fr);
+  }
+
+  .sf-code-lines > li::before {
+    color: var(--sf-colour-subtle);
+    content: counter(code);
+    text-align: right;
+  }
+
+  .sf-code-lines code,
+  .sf-code-block code {
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    color: inherit;
+    padding: 0;
+    white-space: pre-wrap;
+  }
+
+  .sf-code-lines > li:nth-child(4n + 1) code,
+  .sf-code-lines > li:nth-child(4n + 2) code,
+  .sf-command-list__prompt {
+    color: var(--sf-colour-primary);
+  }
+
+  .sf-code-token--punct { color: color-mix(in oklch, var(--sf-colour-muted) 84%, var(--sf-colour-foreground)); }
+  .sf-code-token--tag { color: var(--sf-code-token-tag, oklch(78% 0.09 235)); }
+  .sf-code-token--attr { color: color-mix(in oklch, var(--sf-colour-warning) 72%, var(--sf-colour-foreground)); }
+  .sf-code-token--string { color: color-mix(in oklch, var(--sf-colour-success) 72%, var(--sf-colour-foreground)); }
+  .sf-code-token--class { color: var(--sf-code-token-class, var(--sf-colour-primary-hover, var(--sf-colour-primary))); }
+  .sf-code-token--property { color: var(--sf-code-token-property, var(--sf-colour-primary-hover, var(--sf-colour-primary))); }
+  .sf-code-token--function { color: var(--sf-code-token-function, oklch(78% 0.09 235)); }
+  .sf-code-token--number { color: var(--sf-code-token-number, oklch(83% 0.13 86)); }
+  .sf-code-token--text { color: var(--sf-colour-foreground); }
+  .sf-code-token--comment { color: var(--sf-colour-subtle); font-style: italic; }
+
+  .sf-token-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-xs);
+    padding: var(--sf-space-s) var(--sf-space-s) 0;
+  }
+
+  .sf-token-strip > * {
+    background: var(--sf-token-colour, var(--sf-colour-primary));
+    block-size: 1.25rem;
+    border: 1px solid var(--sf-colour-border-strong);
+    border-radius: var(--sf-radius-xs);
+    inline-size: 2.8rem;
+  }
+
+  .sf-token-strip > :nth-child(2) { --sf-token-colour: var(--sf-colour-accent); }
+  .sf-token-strip > :nth-child(3) { --sf-token-colour: var(--sf-colour-warning); }
+  .sf-token-strip > :nth-child(4) { --sf-token-colour: var(--sf-colour-success); }
+  .sf-token-strip > :nth-child(5) { --sf-token-colour: var(--sf-colour-foreground); }
+  .sf-token-strip > :nth-child(6) { --sf-token-colour: var(--sf-colour-info); }
+
+  .sf-token-strip[data-palette="hdr"] > :nth-child(1) { --sf-token-colour: oklch(69% 0.19 42); }
+  .sf-token-strip[data-palette="hdr"] > :nth-child(2) { --sf-token-colour: oklch(84% 0.17 82); }
+  .sf-token-strip[data-palette="hdr"] > :nth-child(3) { --sf-token-colour: oklch(78% 0.18 145); }
+  .sf-token-strip[data-palette="hdr"] > :nth-child(4) { --sf-token-colour: oklch(78% 0.12 235); }
+  .sf-token-strip[data-palette="hdr"] > :nth-child(5) { --sf-token-colour: oklch(76% 0.13 292); }
+  .sf-token-strip[data-palette="hdr"] > :nth-child(6) { --sf-token-colour: oklch(98% 0.006 80); }
+
+  .sf-marquee {
+    background: color-mix(in oklch, var(--sf-colour-surface) 78%, transparent);
+    border-block: 1px solid var(--sf-colour-border);
+    color: var(--sf-colour-muted);
+    font-family: var(--sf-font-mono);
+    font-size: var(--sf-step--2);
+    font-weight: 800;
+    letter-spacing: .12em;
+    overflow: hidden;
+    padding-block: var(--sf-marquee-padding-block, var(--sf-space-xs));
+    text-transform: uppercase;
+  }
+
+  .sf-marquee__track {
+    align-items: center;
+    animation: sf-marquee-scroll var(--sf-marquee-duration, 28s) linear infinite;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--sf-marquee-gap, var(--sf-space-l));
+    inline-size: max-content;
+    min-inline-size: 100%;
+  }
+
+  .sf-marquee__item {
+    align-items: center;
+    display: inline-flex;
+    flex: 0 0 auto;
+    gap: var(--sf-space-s);
+    white-space: nowrap;
+  }
+
+  .sf-marquee__item::before {
+    background: var(--sf-colour-primary);
+    block-size: .32rem;
+    border-radius: var(--sf-radius-full);
+    box-shadow: 0 0 .9rem var(--sf-colour-primary);
+    content: "";
+    inline-size: .32rem;
+  }
+
+  @keyframes sf-marquee-scroll {
+    to { transform: translateX(-50%); }
+  }
+
+  .sf-command-list {
+    display: grid;
+    font-family: var(--sf-font-mono);
+    font-size: var(--sf-step--1);
+    gap: var(--sf-space-2xs);
+    list-style: none;
+    margin: 0;
+    padding: var(--sf-space-s);
+  }
+
+  .sf-command-list > li {
+    display: flex;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-platform-card {
+    align-items: center;
+    display: grid;
+    gap: var(--sf-space-xs);
+    justify-items: center;
+    min-block-size: var(--sf-platform-card-min, 11rem);
+    text-align: center;
+  }
+
+  .sf-platform-card__logo {
+    block-size: clamp(2rem, 4vw, 2.85rem);
+    filter: drop-shadow(0 0 1.125rem color-mix(in oklch, var(--sf-colour-foreground) 18%, transparent));
+    inline-size: clamp(2rem, 4vw, 2.85rem);
+    object-fit: contain;
+  }
+
+  .sf-hero {
+    align-items: center;
+    display: grid;
+    min-block-size: var(--sf-hero-min, min(42rem, 82svh));
+    padding-block: var(--sf-space-2xl-3xl);
+  }
+
+  .sf-logo-cloud {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-s-m);
+    justify-content: var(--sf-logo-cloud-justify, center);
+  }
+
+  .sf-logo-cloud > * {
+    color: var(--sf-colour-subtle);
+    font-size: var(--sf-step--1);
+    font-weight: 800;
+    letter-spacing: .04em;
+    text-transform: uppercase;
+  }
+
+  .sf-feature {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-feature__icon {
+    align-items: center;
+    background: var(--sf-colour-primary-soft);
+    border: 1px solid var(--sf-colour-primary-soft-border);
+    border-radius: var(--sf-radius-md);
+    color: var(--sf-colour-primary);
+    display: inline-flex;
+    font-weight: 800;
+    inline-size: var(--sf-feature-icon-size, 2.75rem);
+    justify-content: center;
+    min-block-size: var(--sf-feature-icon-size, 2.75rem);
+  }
+
+  .sf-feature__title {
+    font-family: var(--sf-font-display);
+    font-size: var(--sf-step-2);
+    font-weight: 700;
+    line-height: var(--sf-line-height-heading);
+  }
+
+  .sf-feature__text {
+    color: var(--sf-colour-muted);
+  }
+
+  .sf-stats {
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-stat-min, 12rem)), 1fr));
+  }
+
+  .sf-stat {
+    border-block-start: 1px solid var(--sf-colour-border);
+    display: grid;
+    gap: var(--sf-space-2xs);
+    padding-block-start: var(--sf-space-s);
+  }
+
+  .sf-stat__value {
+    font-family: var(--sf-font-display);
+    font-size: var(--sf-step-4);
+    font-weight: 700;
+    line-height: var(--sf-line-height-tight);
+  }
+
+  .sf-stat__label {
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+  }
+
+  .sf-testimonial {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    box-shadow: var(--sf-shadow-sm);
+    display: grid;
+    gap: var(--sf-space-s);
+    padding: var(--sf-space-m-l);
+  }
+
+  .sf-testimonial__quote {
+    font-family: var(--sf-font-display);
+    font-size: var(--sf-step-2);
+    font-weight: 700;
+    line-height: var(--sf-line-height-heading);
+    text-wrap: balance;
+  }
+
+  .sf-testimonial__meta {
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+  }
+
+  .sf-pricing-grid {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--sf-grid-gap, var(--sf-gutter));
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sf-pricing-min, 18rem)), 1fr));
+  }
+
+  .sf-price-card {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-price-card-border, var(--sf-colour-border));
+    border-radius: var(--sf-radius-panel);
+    box-shadow: var(--sf-price-card-shadow, var(--sf-shadow-sm));
+    display: grid;
+    gap: var(--sf-space-s);
+    padding: var(--sf-space-m-l);
+  }
+
+  .sf-price-card[data-featured="true"],
+  .sf-price-card--featured {
+    --sf-price-card-border: color-mix(in oklch, var(--sf-colour-primary) 44%, var(--sf-colour-border));
+    --sf-price-card-shadow: var(--sf-shadow-md);
+  }
+
+  .sf-price {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-2xs);
+  }
+
+  .sf-price__value {
+    font-family: var(--sf-font-display);
+    font-size: var(--sf-step-5);
+    font-weight: 700;
+    line-height: var(--sf-line-height-tight);
+  }
+
+  .sf-price__interval {
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+  }
+
+  .sf-faq {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-faq__item {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-lg);
+    padding: var(--sf-space-s);
+  }
+
+  .sf-faq__item[open] {
+    border-color: color-mix(in oklch, var(--sf-colour-primary) 30%, var(--sf-colour-border));
+    box-shadow: var(--sf-shadow-sm);
+  }
+
+  .sf-faq__item > summary {
+    cursor: pointer;
+    font-weight: 800;
+  }
+
+  .sf-faq__item > summary:focus-visible {
+    border-radius: var(--sf-radius-sm);
+    outline: 0.125rem solid var(--sf-colour-ring);
+    outline-offset: .2rem;
+  }
+
+  .sf-faq__item > :where(p, ul, ol) {
+    color: var(--sf-colour-muted);
+    margin-block-start: var(--sf-space-xs);
+  }
+
+  .sf-cta {
+    align-items: center;
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    box-shadow: var(--sf-shadow-md);
+    display: grid;
+    gap: var(--sf-space-s-m);
+    padding: var(--sf-space-l-xl);
+  }
+
+  @container (min-width: 48rem) {
+    .sf-cta[data-layout="split"] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+  }
+
+  .sf-footer {
+    border-block-start: 1px solid var(--sf-colour-border);
+    color: var(--sf-colour-muted);
+    padding-block: var(--sf-space-l-xl);
+  }
+
+  .sf-section-header {
+    display: grid;
+    gap: var(--sf-space-xs);
+    max-inline-size: var(--sf-section-header-width, 54rem);
+  }
+
+  .sf-section-header[data-align="center"] {
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  .sf-kicker {
+    color: var(--sf-colour-primary);
+    font-size: var(--sf-step--1);
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .sf-badge {
+    align-items: center;
+    background: color-mix(in oklch, var(--sf-colour-primary) 12%, transparent);
+    border: 1px solid color-mix(in oklch, var(--sf-colour-primary) 24%, transparent);
+    border-radius: var(--sf-radius-full);
+    color: var(--sf-colour-primary);
+    display: inline-flex;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    gap: var(--sf-space-3xs);
+    line-height: 1;
+    padding: .45em .75em;
+  }
+
+  .sf-avatar {
+    align-items: center;
+    aspect-ratio: 1;
+    background: color-mix(in oklch, var(--sf-colour-primary) 14%, transparent);
+    border: 1px solid color-mix(in oklch, var(--sf-colour-primary) 28%, transparent);
+    border-radius: var(--sf-radius-full);
+    color: var(--sf-colour-primary);
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: var(--sf-step--1);
+    font-weight: 800;
+    inline-size: var(--sf-avatar-size, 2.25rem);
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .sf-chart {
+    --sf-chart-accent: var(--sf-colour-primary);
+  }
+
+  .sf-chart__plot {
+    background: color-mix(in oklch, var(--sf-colour-surface-alt) 72%, transparent);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-lg);
+    overflow: hidden;
+    padding: var(--sf-space-xs);
+  }
+
+  .sf-chart--wide {
+    --sf-chart-block-size: 14rem;
+  }
+
+  .sf-chart__svg {
+    block-size: var(--sf-chart-block-size, 12rem);
+    display: block;
+    inline-size: 100%;
+  }
+
+  .sf-chart__grid,
+  .sf-chart__axis {
+    fill: none;
+    stroke: var(--sf-colour-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .sf-chart__area {
+    fill: color-mix(in oklch, var(--sf-chart-accent) 18%, transparent);
+  }
+
+  .sf-chart__line {
+    fill: none;
+    stroke: var(--sf-chart-accent);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 3;
+    vector-effect: non-scaling-stroke;
+  }
+
+  .sf-chart__point {
+    fill: var(--sf-chart-accent);
+    stroke: var(--sf-colour-surface);
+    stroke-width: 2;
+  }
+
+  .sf-chart__legend {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-chart__legend-item {
+    align-items: center;
+    color: var(--sf-colour-muted);
+    display: inline-flex;
+    gap: var(--sf-space-3xs);
+  }
+
+  .sf-chart__swatch {
+    aspect-ratio: 1;
+    background: var(--sf-chart-accent);
+    border-radius: var(--sf-radius-full);
+    display: inline-block;
+    inline-size: .75rem;
+  }
+
+  .sf-meter-list {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-meter-row {
+    display: grid;
+    gap: var(--sf-space-3xs);
+  }
+
+  .sf-meter {
+    accent-color: var(--sf-chart-accent, var(--sf-colour-primary));
+    block-size: .625rem;
+    border-radius: var(--sf-radius-full);
+    inline-size: 100%;
+    overflow: hidden;
+  }
+
+  .sf-nav {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-nav-gap);
+    justify-content: space-between;
+  }
+
+  .sf-nav__list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-nav-gap);
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  .sf-nav__link {
+    border-radius: var(--sf-nav-link-radius);
+    color: var(--sf-colour-muted);
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    gap: var(--sf-space-2xs);
+    padding-block: var(--sf-space-3xs);
+    padding-inline: var(--sf-space-2xs);
+    text-decoration: none;
+    transition: background-color var(--sf-duration-fast) var(--sf-ease-standard), color var(--sf-duration-fast) var(--sf-ease-standard);
+  }
+
+  .sf-nav__link:hover,
+  .sf-nav__link[aria-current="page"],
+  .sf-nav__link[aria-current="true"],
+  .sf-nav__link[aria-selected="true"] {
+    background: var(--sf-colour-surface-alt);
+    color: var(--sf-colour-foreground);
+  }
+
+  .sf-app-sidebar .sf-kicker {
+    inline-size: 100%;
+    text-align: start;
+  }
+
+  .sf-app-sidebar .sf-nav {
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .sf-app-sidebar .sf-nav__list {
+    align-items: stretch;
+    flex-direction: column;
+    inline-size: 100%;
+    margin-block: 0;
+    padding-inline-start: var(--sf-space-2xs);
+  }
+
+  .sf-app-sidebar .sf-nav__list > li {
+    inline-size: 100%;
+  }
+
+  .sf-app-sidebar .sf-nav__link {
+    --sf-icon-size: var(--sf-step-0);
+    gap: var(--sf-space-xs);
+    inline-size: 100%;
+    justify-content: flex-start;
+    min-block-size: 2.5rem;
+    padding-block: var(--sf-space-2xs);
+    padding-inline: var(--sf-space-xs);
+    text-align: start;
+  }
+
+  .sf-form {
+    display: grid;
+    gap: var(--sf-form-gap, var(--sf-space-s-m));
+  }
+
+  .sf-fieldset {
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    display: grid;
+    gap: var(--sf-space-s);
+    padding: var(--sf-space-s-m);
+  }
+
+  .sf-fieldset > legend {
+    color: var(--sf-colour-foreground);
+    font-weight: 800;
+    padding-inline: var(--sf-space-2xs);
+  }
+
+  .sf-field {
+    display: grid;
+    gap: var(--sf-space-2xs);
+  }
+
+  .sf-label,
+  .sf-field > label {
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+  }
+
+  .sf-required,
+  .sf-label[aria-required="true"],
+  .sf-field > label:has(+ :required) {
+    color: var(--sf-colour-foreground);
+  }
+
+  .sf-required::after,
+  .sf-label[aria-required="true"]::after,
+  .sf-field > label:has(+ :required)::after {
+    color: var(--sf-colour-danger);
+    content: " *";
+  }
+
+  .sf-help {
+    color: var(--sf-colour-subtle);
+    font-size: var(--sf-step--1);
+    line-height: 1.4;
+  }
+
+  .sf-error {
+    color: var(--sf-colour-danger);
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    line-height: 1.4;
+  }
+
+  .sf-input,
+  .sf-select,
+  .sf-textarea {
+    background: var(--sf-input-bg);
+    border: 1px solid var(--sf-input-border);
+    border-radius: var(--sf-input-radius);
+    color: var(--sf-colour-foreground);
+    inline-size: 100%;
+    min-block-size: var(--sf-input-block-size);
+    padding-inline: var(--sf-input-padding-inline);
+    transition: background-color var(--sf-duration-fast) var(--sf-ease-standard), border-color var(--sf-duration-fast) var(--sf-ease-standard), box-shadow var(--sf-duration-fast) var(--sf-ease-standard);
+  }
+
+  .sf-textarea {
+    min-block-size: var(--sf-textarea-block-size, 8rem);
+    padding-block: var(--sf-space-xs);
+  }
+
+  .sf-select {
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: calc(100% - 1rem) 50%, calc(100% - .7rem) 50%;
+    background-repeat: no-repeat;
+    background-size: .35rem .35rem, .35rem .35rem;
+    padding-inline-end: var(--sf-space-l);
+  }
+
+  :where(.sf-input, .sf-select, .sf-textarea)::placeholder {
+    color: var(--sf-colour-subtle);
+  }
+
+  :where(.sf-input, .sf-select, .sf-textarea):hover {
+    border-color: var(--sf-colour-border-strong);
+  }
+
+  :where(.sf-input, .sf-select, .sf-textarea):focus-visible {
+    border-color: var(--sf-colour-ring);
+    box-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--sf-colour-ring) 18%, transparent);
+    outline: 0.125rem solid color-mix(in oklch, var(--sf-colour-ring) 24%, transparent);
+    outline-offset: 0;
+  }
+
+  :where(.sf-input, .sf-select, .sf-textarea)[aria-invalid="true"],
+  .sf-field[data-invalid="true"] :where(.sf-input, .sf-select, .sf-textarea) {
+    --sf-input-border: var(--sf-colour-danger);
+    border-color: var(--sf-colour-danger);
+    box-shadow: 0 0 0 0.25rem var(--sf-colour-danger-soft);
+  }
+
+  .sf-field[data-invalid="true"] :where(.sf-label, label),
+  .sf-field[data-invalid="true"] .sf-help {
+    color: var(--sf-colour-danger);
+  }
+
+  :where(.sf-input, .sf-select, .sf-textarea):disabled {
+    background: var(--sf-colour-surface-alt);
+    color: var(--sf-colour-subtle);
+    opacity: .72;
+  }
+
+  :where(.sf-input, .sf-select, .sf-textarea)[aria-busy="true"],
+  :where(.sf-input, .sf-select, .sf-textarea)[data-loading="true"] {
+    cursor: progress;
+    opacity: .78;
+  }
+
+  .sf-check {
+    align-items: start;
+    display: grid;
+    gap: var(--sf-space-2xs);
+    grid-template-columns: auto 1fr;
+  }
+
+  .sf-check > :where(input[type="checkbox"], input[type="radio"]) {
+    accent-color: var(--sf-colour-primary);
+    block-size: 1.1em;
+    inline-size: 1.1em;
+    margin-block-start: .2em;
+  }
+
+  .sf-alert {
+    background: var(--sf-alert-bg, var(--sf-colour-info-soft));
+    border: 1px solid var(--sf-alert-border, color-mix(in oklch, var(--sf-colour-info) 32%, transparent));
+    border-radius: var(--sf-alert-radius);
+    color: var(--sf-alert-colour, var(--sf-colour-foreground));
+    display: grid;
+    gap: var(--sf-space-2xs);
+    padding: var(--sf-alert-padding);
+  }
+
+  .sf-alert__title {
+    font-weight: 800;
+  }
+
+  .sf-alert--info,
+  .sf-alert[data-variant="info"] {
+    --sf-alert-bg: var(--sf-colour-info-soft);
+    --sf-alert-border: color-mix(in oklch, var(--sf-colour-info) 32%, transparent);
+  }
+
+  .sf-alert--success,
+  .sf-alert[data-variant="success"] {
+    --sf-alert-bg: var(--sf-colour-success-soft);
+    --sf-alert-border: color-mix(in oklch, var(--sf-colour-success) 32%, transparent);
+  }
+
+  .sf-alert--warning,
+  .sf-alert[data-variant="warning"] {
+    --sf-alert-bg: var(--sf-colour-warning-soft);
+    --sf-alert-border: color-mix(in oklch, var(--sf-colour-warning) 38%, transparent);
+  }
+
+  .sf-alert--danger,
+  .sf-alert[data-variant="danger"] {
+    --sf-alert-bg: var(--sf-colour-danger-soft);
+    --sf-alert-border: color-mix(in oklch, var(--sf-colour-danger) 34%, transparent);
+  }
+
+  .sf-dialog {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    box-shadow: var(--sf-shadow-xl);
+    color: var(--sf-colour-foreground);
+    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-dialog-width, 42rem));
+    max-block-size: min(100% - (var(--sf-gutter) * 2), 42rem);
+    overflow: auto;
+    padding: 0;
+  }
+
+  .sf-dialog::backdrop,
+  .sf-popover::backdrop,
+  .sf-drawer::backdrop {
+    background: oklch(0% 0 0 / 0.48);
+  }
+
+  .sf-dialog__header,
+  .sf-dialog__body,
+  .sf-dialog__footer {
+    padding: var(--sf-space-s-m);
+  }
+
+  .sf-dialog__header,
+  .sf-dialog__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-s);
+    justify-content: space-between;
+  }
+
+  .sf-dialog__header {
+    border-block-end: 1px solid var(--sf-colour-border);
+  }
+
+  .sf-dialog__footer {
+    border-block-start: 1px solid var(--sf-colour-border);
+    justify-content: flex-end;
+  }
+
+  .sf-popover,
+  .sf-menu-popover,
+  .sf-tooltip,
+  .sf-toast,
+  .sf-banner,
+  .sf-drawer {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    box-shadow: var(--sf-shadow-lg);
+    color: var(--sf-colour-foreground);
+    inset: unset;
+    margin: 0;
+    max-block-size: calc(100dvh - (var(--sf-space-s) * 2));
+    overflow: auto;
+    padding: var(--sf-space-s);
+  }
+
+  :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer)[popover] {
+    display: none;
+  }
+
+  :where(.sf-popover, .sf-menu-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer):popover-open {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-popover {
+    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-popover-width, 22rem));
+  }
+
+  .sf-menu-popover,
+  .sf-menu {
+    display: grid;
+    gap: var(--sf-space-2xs);
+    min-inline-size: var(--sf-menu-min, 12rem);
+  }
+
+  .sf-menu :where(a, button),
+  .sf-menu-popover :where(a, button) {
+    border-radius: var(--sf-radius-sm);
+    color: inherit;
+    padding-block: var(--sf-space-3xs);
+    padding-inline: var(--sf-space-2xs);
+    text-align: start;
+    text-decoration: none;
+  }
+
+  .sf-menu :where(a, button):hover,
+  .sf-menu-popover :where(a, button):hover {
+    background: var(--sf-colour-surface-alt);
+  }
+
+  .sf-tooltip {
+    border-radius: var(--sf-radius-md);
+    box-shadow: var(--sf-shadow-md);
+    font-size: var(--sf-step--1);
+    inline-size: max-content;
+    max-inline-size: min(22rem, calc(100vw - (var(--sf-gutter) * 2)));
+    padding-block: var(--sf-space-2xs);
+    padding-inline: var(--sf-space-xs);
+  }
+
+  .sf-tooltip-trigger {
+    border-block-end: 0.08em dotted currentColor;
+    cursor: help;
+    text-decoration: none;
+  }
+
+  .sf-toast {
+    block-size: auto;
+    bottom: auto;
+    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-toast-width, 24rem));
+    left: auto;
+    position: fixed;
+    right: var(--sf-space-s);
+    top: var(--sf-space-s);
+  }
+
+  .sf-banner {
+    block-size: auto;
+    border-radius: var(--sf-radius-lg);
+    bottom: auto;
+    inline-size: min(100% - (var(--sf-gutter) * 2), var(--sf-banner-width, 64rem));
+    left: var(--sf-space-s);
+    margin-inline: auto;
+    position: fixed;
+    right: var(--sf-space-s);
+    top: var(--sf-space-s);
+  }
+
+  .sf-drawer {
+    block-size: 100dvh;
+    border-radius: 0;
+    inline-size: min(100%, var(--sf-drawer-width, 24rem));
+    max-block-size: 100dvh;
+    overflow: auto;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+  }
+
+  .sf-drawer--left {
+    left: 0;
+    right: auto;
+  }
+
+  .sf-drawer--right {
+    left: auto;
+    right: 0;
+  }
+
+  .sf-drawer--bottom {
+    block-size: auto;
+    border-start-start-radius: var(--sf-radius-panel);
+    border-start-end-radius: var(--sf-radius-panel);
+    inline-size: 100%;
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    max-block-size: min(80dvh, 42rem);
+  }
+
+  .sf-drawer--stack {
+    flex-direction: column;
+    gap: var(--sf-space-s);
+  }
+
+  .sf-drawer--stack:not([popover]),
+  .sf-drawer--stack:popover-open {
+    display: flex;
+  }
+
+  @supports (anchor-name: --sf-anchor) {
+    .sf-tooltip-trigger,
+    [data-sf-anchor] {
+      anchor-name: var(--sf-anchor-name, --sf-anchor);
+    }
+
+    .sf-tooltip,
+    .sf-popover,
+    .sf-menu-popover {
+      position-anchor: var(--sf-anchor-name, --sf-anchor);
+      position-area: block-end span-inline-end;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+  }
+
+  .sf-disclosure,
+  .sf-accordion {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-disclosure > details,
+  details.sf-disclosure,
+  .sf-accordion > details {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-lg);
+    padding: var(--sf-space-s);
+  }
+
+  .sf-disclosure summary,
+  .sf-accordion summary {
+    cursor: pointer;
+    font-weight: 800;
+  }
+
+  .sf-disclosure :where(details[open]),
+  details.sf-disclosure[open],
+  .sf-accordion details[open] {
+    border-color: color-mix(in oklch, var(--sf-colour-primary) 30%, var(--sf-colour-border));
+    box-shadow: var(--sf-shadow-sm);
+  }
+
+  .sf-tabs {
+    display: grid;
+    gap: var(--sf-space-s);
+  }
+
+  .sf-tab-list {
+    align-items: center;
+    border-block-end: 1px solid var(--sf-colour-border);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-2xs);
+  }
+
+  .sf-tab {
+    border-block-end: 0.125rem solid transparent;
+    color: var(--sf-colour-muted);
+    display: inline-flex;
+    font-weight: 800;
+    padding-block: var(--sf-space-xs);
+    padding-inline: var(--sf-space-s);
+    text-decoration: none;
+  }
+
+  .sf-tab:hover,
+  .sf-tab[aria-selected="true"],
+  .sf-tab[data-state="active"] {
+    border-block-end-color: var(--sf-colour-primary);
+    color: var(--sf-colour-foreground);
+  }
+
+  .sf-tab-panel {
+    background: var(--sf-colour-surface);
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    padding: var(--sf-space-s-m);
+  }
+
+  .sf-tabs > input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .sf-tabs > input[type="radio"] ~ .sf-tab-panels > .sf-tab-panel {
+    display: none;
+  }
+
+  .sf-tabs > input[type="radio"]:nth-of-type(1):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(1),
+  .sf-tabs > input[type="radio"]:nth-of-type(2):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(2),
+  .sf-tabs > input[type="radio"]:nth-of-type(3):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(3),
+  .sf-tabs > input[type="radio"]:nth-of-type(4):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(4),
+  .sf-tabs > input[type="radio"]:nth-of-type(5):checked ~ .sf-tab-panels > .sf-tab-panel:nth-child(5) {
+    display: block;
+  }
+
+  .sf-nav--mobile {
+    align-items: center;
+    display: flex;
+    gap: var(--sf-space-s);
+    justify-content: space-between;
+  }
+
+  .sf-breadcrumb,
+  .sf-pagination {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sf-space-2xs);
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  .sf-breadcrumb a,
+  .sf-pagination a,
+  .sf-pagination [aria-current="page"] {
+    border-radius: var(--sf-radius-sm);
+    color: var(--sf-colour-muted);
+    display: inline-flex;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    padding-block: var(--sf-space-3xs);
+    padding-inline: var(--sf-space-2xs);
+    text-decoration: none;
+  }
+
+  .sf-breadcrumb li + li::before {
+    color: var(--sf-colour-subtle);
+    content: "/";
+    margin-inline-end: var(--sf-space-2xs);
+  }
+
+  .sf-pagination a:hover,
+  .sf-pagination [aria-current="page"] {
+    background: var(--sf-colour-surface-alt);
+    color: var(--sf-colour-foreground);
+  }
+
+  @media (forced-colors: active) {
+    :where(.sf-button, .sf-card, .sf-surface, .sf-alert, .sf-price-card, .sf-testimonial, .sf-faq__item, .sf-input, .sf-select, .sf-textarea, .sf-dialog, .sf-popover, .sf-tooltip, .sf-toast, .sf-banner, .sf-drawer, .sf-disclosure > details, details.sf-disclosure, .sf-accordion > details, .sf-tab-panel) {
+      border-color: ButtonText;
+      forced-color-adjust: auto;
+    }
+
+    .sf-button {
+      background: ButtonFace;
+      color: ButtonText;
+    }
+
+    .sf-button--default,
+    .sf-button[data-variant="default"] {
+      background: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+    }
+
+    :where(.sf-input, .sf-select, .sf-textarea)[aria-invalid="true"],
+    .sf-field[data-invalid="true"] :where(.sf-input, .sf-select, .sf-textarea) {
+      border-color: Mark;
+      box-shadow: none;
+    }
+  }
+}
+@layer utilities {
+  .sf-text-caption { font-size: var(--sf-step--1); line-height: 1.35; }
+  .sf-text-body { font-size: var(--sf-step-0); line-height: 1.5; }
+  .sf-text-lead { font-size: var(--sf-step-1); line-height: 1.45; }
+  .sf-text-h4 { font-size: var(--sf-step-3); line-height: 1.1; }
+  .sf-text-h3 { font-size: var(--sf-step-4); line-height: 1.05; }
+  .sf-text-h2 { font-size: var(--sf-step-5); line-height: 1; }
+  .sf-text-h1 { font-size: var(--sf-step-6); line-height: 1; }
+  .sf-text-display { font-size: var(--sf-step-7); line-height: .95; }
+
+  .sf-text-balance { text-wrap: balance; }
+  .sf-text-pretty { text-wrap: pretty; }
+  .sf-text-muted { color: var(--sf-colour-muted); }
+  .sf-text-subtle { color: var(--sf-colour-subtle); }
+  .sf-text-primary { color: var(--sf-colour-primary); }
+  .sf-text-success { color: var(--sf-colour-success); }
+  .sf-text-warning { color: var(--sf-colour-warning); }
+  .sf-text-danger { color: var(--sf-colour-danger); }
+
+  .sf-font-sans { font-family: var(--sf-font-sans); }
+  .sf-font-display { font-family: var(--sf-font-display); }
+  .sf-font-mono { font-family: var(--sf-font-mono); }
+
+  .sf-bg-background { background: var(--sf-colour-background); }
+  .sf-bg-surface { background: var(--sf-colour-surface); }
+  .sf-bg-surface-alt { background: var(--sf-colour-surface-alt); }
+  .sf-bg-primary-soft { background: var(--sf-colour-primary-soft); }
+  .sf-bg-success-soft { background: var(--sf-colour-success-soft); }
+  .sf-bg-warning-soft { background: var(--sf-colour-warning-soft); }
+  .sf-bg-danger-soft { background: var(--sf-colour-danger-soft); }
+
+  .sf-border { border: 1px solid var(--sf-colour-border); }
+  .sf-border-strong { border: 1px solid var(--sf-colour-border-strong); }
+  .sf-rounded { border-radius: var(--sf-radius-md); }
+  .sf-rounded-panel { border-radius: var(--sf-radius-panel); }
+  .sf-rounded-full { border-radius: var(--sf-radius-full); }
+  .sf-shadow-sm { box-shadow: var(--sf-shadow-sm); }
+  .sf-shadow-md { box-shadow: var(--sf-shadow-md); }
+  .sf-shadow-lg { box-shadow: var(--sf-shadow-lg); }
+  .sf-shadow-none { box-shadow: none; }
+
+  .sf-push-block-end { margin-block-start: auto; }
+  .sf-push-block-start { margin-block-end: auto; }
+  .sf-push-inline-end { margin-inline-start: auto; }
+  .sf-push-inline-start { margin-inline-end: auto; }
+
+  .sf-prose {
+    max-inline-size: var(--sf-prose-width, 68ch);
+  }
+
+  .sf-prose--blog { --sf-prose-width: 72ch; }
+  .sf-prose--legal { --sf-prose-width: 80ch; }
+
+  :where(.sf-prose--blog, .sf-prose--legal) > * + * {
+    margin-block-start: var(--sf-space-s);
+  }
+
+  :where(.sf-prose--blog, .sf-prose--legal) :where(h2, h3) {
+    margin-block-start: var(--sf-space-l);
+  }
+
+  .sf-meta {
+    align-items: center;
+    color: var(--sf-colour-muted);
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--sf-step--1);
+    font-weight: 700;
+    gap: var(--sf-space-2xs);
+  }
+
+  .sf-figure {
+    display: grid;
+    gap: var(--sf-space-xs);
+  }
+
+  .sf-caption {
+    color: var(--sf-colour-muted);
+    font-size: var(--sf-step--1);
+  }
+
+  .sf-table-wrap {
+    border: 1px solid var(--sf-colour-border);
+    border-radius: var(--sf-radius-panel);
+    overflow-x: auto;
+  }
+
+  .sf-table-wrap table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    min-inline-size: var(--sf-table-min, 42rem);
+  }
+
+  .sf-table-wrap :where(th, td) {
+    border-block-end: 1px solid var(--sf-colour-border);
+    padding: var(--sf-space-xs);
+    text-align: start;
+  }
+
+  .sf-table-wrap :where(th) {
+    background: var(--sf-colour-surface-alt);
+    font-weight: 800;
+  }
+
+  :where(.sf-visually-hidden, .sr-only) {
+    block-size: 0.0625rem;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    inline-size: 0.0625rem;
+    margin: -0.0625rem;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  :where(.sf-not-visually-hidden, .not-sr-only) {
+    block-size: auto;
+    clip: auto;
+    clip-path: none;
+    inline-size: auto;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: static;
+    white-space: normal;
+  }
+
+  .sf-skip-link {
+    background: var(--sf-colour-primary);
+    border-radius: var(--sf-radius-md);
+    box-shadow: var(--sf-shadow-md);
+    color: var(--sf-colour-primary-foreground);
+    inset-block-start: var(--sf-space-s);
+    inset-inline-start: var(--sf-space-s);
+    opacity: 0;
+    padding-block: var(--sf-space-2xs);
+    padding-inline: var(--sf-space-s);
+    pointer-events: none;
+    position: fixed;
+    text-decoration: none;
+    transform: translateY(calc(-100% - var(--sf-space-m)));
+    transition: opacity var(--sf-duration-fast) var(--sf-ease-standard), transform var(--sf-duration-fast) var(--sf-ease-standard);
+    z-index: 999;
+  }
+
+  .sf-skip-link:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  .sf-focus-ring:focus-visible {
+    outline: 0.125rem solid var(--sf-colour-ring);
+    outline-offset: .2rem;
+  }
+
+  .sf-focus-ring-inset:focus-visible {
+    outline: 0.125rem solid var(--sf-colour-ring);
+    outline-offset: -0.125rem;
+  }
+
+  .sf-touch-target {
+    min-block-size: 2.75rem;
+    min-inline-size: 2.75rem;
+  }
+
+  .sf-list-reset {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  .sf-list-disc {
+    list-style: disc;
+    padding-inline-start: var(--sf-space-m);
+  }
+
+  .sf-list-decimal {
+    list-style: decimal;
+    padding-inline-start: var(--sf-space-m);
+  }
+
+  :where(.sf-link, .sf-link-subtle) {
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: .08em;
+    text-underline-offset: .18em;
+  }
+
+  .sf-link { color: var(--sf-colour-primary); }
+
+  .sf-link:hover,
+  .sf-link-subtle:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .sf-link-plain {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .sf-full-bleed {
+    inline-size: 100vw;
+    margin-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+
+  .sf-animate-fade,
+  .sf-animate-rise,
+  .sf-animate-scale,
+  .sf-animate-slide {
+    animation-duration: var(--sf-motion-duration, var(--sf-duration-slow));
+    animation-fill-mode: both;
+    animation-timing-function: var(--sf-motion-ease, var(--sf-ease-emphasized));
+  }
+
+  .sf-animate-fade { animation-name: sf-fade; }
+  .sf-animate-rise { animation-name: sf-rise; }
+  .sf-animate-scale { animation-name: sf-scale; }
+  .sf-animate-slide { animation-name: sf-slide; }
+
+  .sf-animate-stagger > * {
+    animation-delay: calc(var(--sf-stagger-index, 0) * var(--sf-stagger-step, 80ms));
+  }
+
+  @keyframes sf-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes sf-rise {
+    from { opacity: 0; transform: translateY(var(--sf-motion-distance, var(--sf-space-s))); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes sf-scale {
+    from { opacity: 0; transform: scale(.96); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes sf-slide {
+    from { opacity: 0; transform: translateX(var(--sf-motion-distance, var(--sf-space-s))); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(.sf-animate-fade, .sf-animate-rise, .sf-animate-scale, .sf-animate-slide) {
+      animation: none;
+    }
+  }
+}