@syncedco/flow 0.1.0

package/components.css

@@ -0,0 +1,1392 @@
+/* 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 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;
+    }
+  }
+}