/* GENERATED by `pnpm --filter @siteflect/ui tokens` from src/tokens/tokens.ts — do not edit. */
:root {
  color-scheme: light;
  --sf-color-background: oklch(0.971 0.005 275);
  --sf-color-foreground: oklch(0.18 0.038 272.6);
  --sf-color-card: oklch(1 0 0);
  --sf-color-card-foreground: oklch(0.18 0.038 272.6);
  --sf-color-popover: oklch(1 0 0);
  --sf-color-popover-foreground: oklch(0.18 0.038 272.6);
  --sf-color-primary: oklch(0.18 0.038 272.6);
  --sf-color-primary-foreground: oklch(1 0 0);
  --sf-color-secondary: oklch(0.928 0.013 271.3);
  --sf-color-secondary-foreground: oklch(0.26 0.058 274.7);
  --sf-color-muted: oklch(0.955 0.008 271.3);
  --sf-color-muted-foreground: oklch(0.505 0.033 270);
  --sf-color-accent: oklch(0.945 0.021 286);
  --sf-color-accent-foreground: oklch(0.429 0.167 276.7);
  --sf-color-ai: oklch(0.54 0.184 278.3);
  --sf-color-ai-foreground: oklch(1 0 0);
  --sf-color-destructive: oklch(0.502 0.177 26.4);
  --sf-color-destructive-foreground: oklch(0.99 0.01 27);
  --sf-color-success: oklch(0.46 0.1 163.5);
  --sf-color-success-foreground: oklch(0.99 0.01 150);
  --sf-color-warning: oklch(0.47 0.115 64.3);
  --sf-color-warning-foreground: oklch(0.99 0.01 80);
  --sf-color-info: oklch(0.47 0.16 258.7);
  --sf-color-info-foreground: oklch(0.99 0.01 240);
  --sf-color-border: oklch(0.925 0.011 269.5);
  --sf-color-input: oklch(0.861 0.02 270.2);
  --sf-color-ring: oklch(0.54 0.184 278.3);
  --sf-color-sidebar: oklch(1 0 0);
  --sf-color-sidebar-foreground: oklch(0.18 0.038 272.6);
  --sf-color-sidebar-border: oklch(0.925 0.011 269.5);
  --sf-color-sidebar-accent: oklch(0.955 0.008 271.3);
  --sf-color-sidebar-accent-foreground: oklch(0.18 0.038 272.6);
  --sf-color-brand: oklch(0.208 0.04 265.8);
  --sf-color-brand-surface: oklch(1 0 0);
  --sf-color-hero: oklch(0.17 0.03 272);
  --sf-color-hero-foreground: oklch(0.955 0.008 271.3);
  --sf-color-hero-muted: oklch(0.76 0.02 270);
  --sf-color-overlay: oklch(0.15 0.02 260 / 0.6);
  --sf-space-0: 0rem;
  --sf-space-0-5: 0.25rem;
  --sf-space-1: 0.5rem;
  --sf-space-1-5: 0.75rem;
  --sf-space-2: 1rem;
  --sf-space-3: 1.5rem;
  --sf-space-4: 2rem;
  --sf-space-5: 2.5rem;
  --sf-space-6: 3rem;
  --sf-space-7: 3.5rem;
  --sf-space-8: 4rem;
  --sf-space-10: 5rem;
  --sf-space-12: 6rem;
  --sf-space-16: 8rem;
  --sf-radius-sm: 0.375rem;
  --sf-radius-md: 0.5rem;
  --sf-radius-lg: 0.75rem;
  --sf-radius-xl: 1rem;
  --sf-radius-full: 9999px;
  --sf-font-display: 'Bricolage Grotesque Variable', 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
  --sf-font-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sf-font-mono: 'JetBrains Mono Variable', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --sf-tracking-display: -0.02em;
  --sf-text-xs: 0.75rem;
  --sf-leading-xs: 1rem;
  --sf-text-sm: 0.875rem;
  --sf-leading-sm: 1.25rem;
  --sf-text-md: 1rem;
  --sf-leading-md: 1.5rem;
  --sf-text-lg: 1.25rem;
  --sf-leading-lg: 1.75rem;
  --sf-text-xl: 1.75rem;
  --sf-leading-xl: 2.25rem;
  --sf-text-2xl: 2.5rem;
  --sf-leading-2xl: 2.75rem;
  --sf-weight-regular: 400;
  --sf-weight-medium: 500;
  --sf-weight-semibold: 600;
  --sf-weight-bold: 700;
  --sf-duration-fast: 100ms;
  --sf-duration-base: 150ms;
  --sf-duration-slow: 250ms;
  --sf-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sf-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --sf-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --sf-shadow-sm: 0 1px 2px 0 oklch(0.18 0.04 272 / 0.06), 0 1px 1px 0 oklch(0.18 0.04 272 / 0.04);
  --sf-shadow-md: 0 1px 2px 0 oklch(0.18 0.04 272 / 0.06), 0 8px 24px -12px oklch(0.18 0.04 272 / 0.18);
  --sf-shadow-lg: 0 1px 2px 0 oklch(0.18 0.04 272 / 0.06), 0 16px 40px -18px oklch(0.18 0.04 272 / 0.28);
  --sf-z-sticky: 100;
  --sf-z-overlay: 200;
  --sf-z-modal: 300;
  --sf-z-dropdown: 350;
  --sf-z-toast: 400;
  --sf-z-tooltip: 500;
  --sf-size-control-sm: 2rem;
  --sf-size-control-md: 2.5rem;
  --sf-size-control-lg: 3rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sf-color-background: oklch(0.16 0.018 268.5);
  --sf-color-foreground: oklch(0.955 0.008 271.3);
  --sf-color-card: oklch(0.193 0.023 268.8);
  --sf-color-card-foreground: oklch(0.955 0.008 271.3);
  --sf-color-popover: oklch(0.21 0.025 268.8);
  --sf-color-popover-foreground: oklch(0.955 0.008 271.3);
  --sf-color-primary: oklch(0.955 0.008 271.3);
  --sf-color-primary-foreground: oklch(0.18 0.038 272.6);
  --sf-color-secondary: oklch(0.263 0.033 269.1);
  --sf-color-secondary-foreground: oklch(0.955 0.008 271.3);
  --sf-color-muted: oklch(0.228 0.028 269);
  --sf-color-muted-foreground: oklch(0.663 0.031 268.2);
  --sf-color-accent: oklch(0.265 0.063 278.7);
  --sf-color-accent-foreground: oklch(0.799 0.107 286.7);
  --sf-color-ai: oklch(0.648 0.193 281.6);
  --sf-color-ai-foreground: oklch(0.164 0.028 276.3);
  --sf-color-destructive: oklch(0.736 0.161 21.8);
  --sf-color-destructive-foreground: oklch(0.15 0.03 25);
  --sf-color-success: oklch(0.749 0.129 162.3);
  --sf-color-success-foreground: oklch(0.15 0.03 150);
  --sf-color-warning: oklch(0.806 0.127 74.5);
  --sf-color-warning-foreground: oklch(0.2 0.04 80);
  --sf-color-info: oklch(0.729 0.141 258.3);
  --sf-color-info-foreground: oklch(0.15 0.03 240);
  --sf-color-border: oklch(0.267 0.033 269.1);
  --sf-color-input: oklch(0.323 0.039 268.1);
  --sf-color-ring: oklch(0.648 0.193 281.6);
  --sf-color-sidebar: oklch(0.193 0.023 268.8);
  --sf-color-sidebar-foreground: oklch(0.955 0.008 271.3);
  --sf-color-sidebar-border: oklch(0.267 0.033 269.1);
  --sf-color-sidebar-accent: oklch(0.263 0.033 269.1);
  --sf-color-sidebar-accent-foreground: oklch(0.955 0.008 271.3);
  --sf-color-brand: oklch(0.208 0.04 265.8);
  --sf-color-brand-surface: oklch(1 0 0);
  --sf-color-hero: oklch(0.15 0.025 270);
  --sf-color-hero-foreground: oklch(0.955 0.008 271.3);
  --sf-color-hero-muted: oklch(0.76 0.02 270);
  --sf-color-overlay: oklch(0 0 0 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sf-color-background: oklch(0.16 0.018 268.5);
    --sf-color-foreground: oklch(0.955 0.008 271.3);
    --sf-color-card: oklch(0.193 0.023 268.8);
    --sf-color-card-foreground: oklch(0.955 0.008 271.3);
    --sf-color-popover: oklch(0.21 0.025 268.8);
    --sf-color-popover-foreground: oklch(0.955 0.008 271.3);
    --sf-color-primary: oklch(0.955 0.008 271.3);
    --sf-color-primary-foreground: oklch(0.18 0.038 272.6);
    --sf-color-secondary: oklch(0.263 0.033 269.1);
    --sf-color-secondary-foreground: oklch(0.955 0.008 271.3);
    --sf-color-muted: oklch(0.228 0.028 269);
    --sf-color-muted-foreground: oklch(0.663 0.031 268.2);
    --sf-color-accent: oklch(0.265 0.063 278.7);
    --sf-color-accent-foreground: oklch(0.799 0.107 286.7);
    --sf-color-ai: oklch(0.648 0.193 281.6);
    --sf-color-ai-foreground: oklch(0.164 0.028 276.3);
    --sf-color-destructive: oklch(0.736 0.161 21.8);
    --sf-color-destructive-foreground: oklch(0.15 0.03 25);
    --sf-color-success: oklch(0.749 0.129 162.3);
    --sf-color-success-foreground: oklch(0.15 0.03 150);
    --sf-color-warning: oklch(0.806 0.127 74.5);
    --sf-color-warning-foreground: oklch(0.2 0.04 80);
    --sf-color-info: oklch(0.729 0.141 258.3);
    --sf-color-info-foreground: oklch(0.15 0.03 240);
    --sf-color-border: oklch(0.267 0.033 269.1);
    --sf-color-input: oklch(0.323 0.039 268.1);
    --sf-color-ring: oklch(0.648 0.193 281.6);
    --sf-color-sidebar: oklch(0.193 0.023 268.8);
    --sf-color-sidebar-foreground: oklch(0.955 0.008 271.3);
    --sf-color-sidebar-border: oklch(0.267 0.033 269.1);
    --sf-color-sidebar-accent: oklch(0.263 0.033 269.1);
    --sf-color-sidebar-accent-foreground: oklch(0.955 0.008 271.3);
    --sf-color-brand: oklch(0.208 0.04 265.8);
    --sf-color-brand-surface: oklch(1 0 0);
    --sf-color-hero: oklch(0.15 0.025 270);
    --sf-color-hero-foreground: oklch(0.955 0.008 271.3);
    --sf-color-hero-muted: oklch(0.76 0.02 270);
    --sf-color-overlay: oklch(0 0 0 / 0.7);
  }
}

@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0102, U+0103, U+0150, U+0151, U+015E, U+015F, U+0162, U+0163, U+0170, U+0171, U+0218, U+0219, U+021A, U+021B, U+1E9E;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0102, U+0103, U+0150, U+0151, U+015E, U+015F, U+0162, U+0163, U+0170, U+0171, U+0218, U+0219, U+021A, U+021B, U+1E9E;
}


:root {
  /* Layout only: every colour, font, radius and shadow is a Siteflect UI token (tokensCss). */
  --gutter: 1rem;
  --section: 4rem;
  --glow: color-mix(in oklch, var(--sf-color-ai) 20%, transparent);
}
@media (min-width: 48rem) {
  :root { --gutter: 2rem; --section: 6rem; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--sf-color-background); color: var(--sf-color-foreground);
  font: 400 1rem/1.5rem var(--sf-font-sans); text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--sf-font-display); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 20; padding: 0.5rem 1rem;
  background: var(--sf-color-primary); color: var(--sf-color-primary-foreground); border-radius: var(--sf-radius-lg); text-decoration: none;
}
.skip:focus { top: 0.5rem; }
:focus-visible { outline: 2px solid var(--sf-color-ai); outline-offset: 2px; border-radius: 0.25rem; }
.container { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }

/* Header */
.header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklch, var(--sf-color-background) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid color-mix(in oklch, var(--sf-color-border) 70%, transparent);
}
.header__bar { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font: 700 1.125rem/1 var(--sf-font-display); letter-spacing: -0.02em; }
.brand svg { width: 2rem; height: 2rem; }
.nav { display: none; margin-left: auto; gap: 0.25rem; }
.nav a { white-space: nowrap; text-decoration: none; color: var(--sf-color-muted-foreground); font-weight: 500; font-size: 0.9375rem; padding: 0.5rem 0.75rem; border-radius: var(--sf-radius-lg); }
.nav a:hover { color: var(--sf-color-foreground); background: var(--sf-color-muted); }
.header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.lang { display: none; font-size: 0.875rem; font-weight: 600; color: var(--sf-color-muted-foreground); text-decoration: none; padding: 0.5rem; border-radius: var(--sf-radius-lg); }
.lang:hover { color: var(--sf-color-foreground); }
.header__actions .signin { display: none; }
/* On a phone the header keeps the brand and the menu; the call is in the hero just below. */
.header__actions .header__start { display: none; }
@media (min-width: 30rem) { .header__actions .header__start { display: inline-flex; } }
.menu__open {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-lg); color: var(--sf-color-foreground);
}
.menu__open svg { width: 1.25rem; height: 1.25rem; }
/* The phone's menu: the whole screen, big words a finger hits, the calls at the foot. */
.sheet__anchor { position: fixed; top: 0; left: 0; }
.sheet { display: none; }
#menu:target + .sheet {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; overflow-y: auto;
  background: var(--sf-color-background); padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
html:has(#menu:target) { overflow: hidden; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 4rem; }
.sheet__nav { display: grid; margin-top: 1rem; }
.sheet__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem;
  border-bottom: 1px solid var(--sf-color-border); color: var(--sf-color-foreground); text-decoration: none;
  font: 700 clamp(1.75rem, 1.25rem + 2.5vw, 2.5rem)/1.15 var(--sf-font-display); letter-spacing: -0.02em;
}
.sheet__nav svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--sf-color-muted-foreground); }
.sheet__actions { display: grid; gap: 0.75rem; margin-top: auto; padding-top: 2rem; }
.sheet__lang { justify-self: center; padding: 0.75rem 1rem; color: var(--sf-color-muted-foreground); font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  #menu:target + .sheet { animation: sheet-in 180ms ease-out; }
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-0.5rem); } }
/* The whole menu fits on one line from 75rem; below, it is the menu button's. */
@media (min-width: 75rem) {
  .nav { display: flex; }
  .header__actions { margin-left: 1rem; }
  .header__actions .signin { display: inline-flex; }
  .lang { display: inline-flex; }
  .menu__open, #menu:target + .sheet { display: none; }
}

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.5rem; border-radius: var(--sf-radius-lg); font-weight: 600;
  font-size: 1rem; text-decoration: none; white-space: nowrap; border: 1px solid transparent;
  transition: background-color 150ms, border-color 150ms, transform 150ms;
}
.button svg { width: 1.125rem; height: 1.125rem; }
.button--primary { background: var(--sf-color-primary); color: var(--sf-color-primary-foreground); }
.button--primary:hover { background: color-mix(in oklch, var(--sf-color-primary) 86%, var(--sf-color-ai)); }
.button--secondary { background: var(--sf-color-card); color: var(--sf-color-foreground); border-color: var(--sf-color-border); }
.button--secondary:hover { border-color: color-mix(in oklch, var(--sf-color-border) 50%, var(--sf-color-foreground)); }
.button--small { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9375rem; }
.button--block { width: 100%; }

/* Sections */
.section { padding-block: var(--section); }
.section--band { background: var(--sf-color-muted); border-block: 1px solid var(--sf-color-border); }
.section__head { display: grid; gap: 1rem; max-width: 44rem; margin-bottom: 3rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-color-accent-foreground);
}
/* The hero's line above the title: a quiet pill, one line on a phone. */
.eyebrow--pill {
  justify-self: start; padding: 0.375rem 0.75rem; border-radius: var(--sf-radius-full);
  background: var(--sf-color-accent); border: 1px solid color-mix(in oklch, var(--sf-color-accent-foreground) 18%, transparent);
  font-size: 0.6875rem; line-height: 1.35; letter-spacing: 0.05em; text-wrap: balance;
}
.eyebrow--pill svg { width: 0.875rem; height: 0.875rem; flex: none; }
@media (min-width: 40rem) { .eyebrow--pill { font-size: 0.75rem; padding: 0.375rem 0.875rem; } }
/* Google's measure, green, as the portfolio's cards and the hero show it. */
.score { display: inline-flex; align-items: center; gap: 0.375rem; justify-self: start; font-size: 0.8125rem; line-height: 1.35; font-weight: 600; color: var(--sf-color-success); text-wrap: balance; }
.score svg { width: 1rem; height: 1rem; flex: none; }
.h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); line-height: 1.12; font-weight: 700; }
.lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--sf-color-muted-foreground); }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: 3rem 4rem; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto 40%; height: 40rem; z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
.hero__grid { display: grid; gap: 3rem; align-items: center; }
.hero__copy { display: grid; gap: 1.5rem; }
.hero__title { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem); line-height: 1.04; font-weight: 750; }
/* The promise of the title, on a line of its own, in the brand's colour: ready in minutes. */
.hero__ready { display: block; margin-top: 0.125em; font-size: 0.78em; color: var(--sf-color-ai); }
.hero__lead { font-size: 1.125rem; line-height: 1.75rem; color: var(--sf-color-muted-foreground); max-width: 36rem; }
.hero__score { font-size: 0.9375rem; margin-top: -0.5rem; }
/* On a phone the calls take the whole width, one under the other. */
.hero__actions { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .hero__actions { display: flex; flex-wrap: wrap; } }
.hero__note { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--sf-color-muted-foreground); }
.hero__note svg { width: 1rem; height: 1rem; color: var(--sf-color-success); flex: none; }
@media (min-width: 64rem) {
  .hero { padding-block: 5rem 6rem; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; }
}

/* The product picture: a desktop window and a phone in front of it */
.stage { position: relative; padding-bottom: 2rem; }
.window {
  border-radius: var(--sf-radius-xl); overflow: hidden; background: var(--sf-color-card);
  border: 1px solid var(--sf-color-border); box-shadow: var(--sf-shadow-lg);
}
.window__bar { display: flex; gap: 0.375rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--sf-color-border); }
.window__bar span { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--sf-color-border); }
.window img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.phone {
  position: absolute; right: -0.5rem; bottom: 0; width: 34%; max-width: 11rem;
  border-radius: 1.5rem; overflow: hidden; border: 0.375rem solid var(--sf-color-hero); background: var(--sf-color-hero);
  box-shadow: var(--sf-shadow-lg);
}
.phone img { width: 100%; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; border-radius: 1.125rem; }

/* Proof strip */
.proof { padding-block: var(--section); border-block: 1px solid var(--sf-color-border); overflow: hidden; }
.proof__head { display: grid; gap: 1rem; max-width: 40rem; margin-bottom: 3rem; }
/* A customer's path: four stops, each joined to the next by a stretch of line that draws as the
   page reaches it, one after the other, brighter towards the call. On a phone the line runs down
   the left, through the marks; from a desktop across, above the words. */
.proof__path { position: relative; display: grid; gap: 2.5rem; padding-left: 4rem; view-timeline: --proof block; }
.proof__stop { position: relative; display: grid; gap: 0.5rem; align-content: start; }
.proof__stop:not(:last-child)::after {
  content: ""; position: absolute; left: -2.5625rem; top: 3rem; bottom: -2.5rem; width: 2px;
  background: color-mix(in oklch, var(--sf-color-ai) var(--reach, 45%), var(--sf-color-border)); transform-origin: top;
}
.proof__stop:nth-child(2)::after { --reach: 70%; }
.proof__stop:nth-child(3)::after { --reach: 100%; }
.proof__mark {
  position: absolute; left: -4rem; top: 0; display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--sf-radius-full); background: var(--sf-color-background); border: 1px solid var(--sf-color-border);
}
.proof__mark svg { width: 1.25rem; height: 1.25rem; }
/* The path ends where the business wanted it to: the call, in the brand's colour. */
.proof__stop:last-child .proof__mark {
  background: var(--sf-color-ai); color: var(--sf-color-ai-foreground); border-color: transparent;
  box-shadow: 0 0 0 0.5rem var(--glow);
}
.proof__index { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.08em; color: var(--sf-color-muted-foreground); font-variant-numeric: tabular-nums; }
.proof__word { font: 700 clamp(1.75rem, 1rem + 1.2vw, 2.25rem)/1.05 var(--sf-font-display); letter-spacing: -0.03em; white-space: nowrap; }
.proof__value { margin-top: 0.5rem; font: 700 clamp(2.5rem, 1.75rem + 1.4vw, 2.75rem)/1 var(--sf-font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.proof__body { max-width: 20rem; color: var(--sf-color-muted-foreground); }
.proof__note { margin-top: 3rem; font-size: 0.875rem; color: var(--sf-color-muted-foreground); }
@media (min-width: 64rem) {
  .proof__path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-left: 0; padding-top: 5rem; }
  .proof__stop:not(:last-child)::after { left: 3rem; right: -2rem; top: -3.5625rem; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .proof__mark { left: 0; top: -5rem; }
  /* The four columns share their rows: every word, every figure, every line on one baseline. */
  .proof__path { grid-template-rows: repeat(4, auto); row-gap: 0; }
  .proof__stop { grid-row: span 4; grid-template-rows: subgrid; gap: 0; }
  .proof__word { margin-top: 0.5rem; }
  .proof__body { margin-top: 0.5rem; }
}
/*
 * The line is drawn as the reader reaches each stop, and is whole whenever its end is in sight
 * (owner, 2026-10-22: the last stretch stayed half drawn on a laptop, where the whole path fits
 * the screen, and on a phone until the page went past the call). On a phone each stretch follows
 * the stop it leads to, done once that stop's mark has come in; on a wide screen the four stand
 * on one row and the line is done as the row has come in whole.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .proof__path { timeline-scope: --proof-2, --proof-3, --proof-4; }
    .proof__stop:nth-child(2) { view-timeline: --proof-2 block; }
    .proof__stop:nth-child(3) { view-timeline: --proof-3 block; }
    .proof__stop:nth-child(4) { view-timeline: --proof-4 block; }
    .proof__stop:not(:last-child)::after { animation: proof-draw-down linear both; animation-range: entry 0% entry 30%; }
    .proof__stop:nth-child(1)::after { animation-timeline: --proof-2; }
    .proof__stop:nth-child(2)::after { animation-timeline: --proof-3; }
    .proof__stop:nth-child(3)::after { animation-timeline: --proof-4; }
    @media (min-width: 64rem) {
      .proof__stop:not(:last-child)::after { animation-name: proof-draw-across; animation-timeline: --proof; }
      .proof__stop:nth-child(1)::after { animation-range: entry 0% entry 40%; }
      .proof__stop:nth-child(2)::after { animation-range: entry 40% entry 70%; }
      .proof__stop:nth-child(3)::after { animation-range: entry 70% entry 100%; }
    }
  }
}
@keyframes proof-draw-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes proof-draw-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Steps */
.steps { display: grid; gap: 1rem; counter-reset: step; }
.step { display: grid; gap: 0.75rem; align-content: start; padding: 1.5rem; background: var(--sf-color-card); border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-xl); }
.step__number {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--sf-color-accent); color: var(--sf-color-accent-foreground); font: 700 1rem/1 var(--sf-font-display);
}
.step__title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.step p, .feature p { color: var(--sf-color-muted-foreground); }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* Features */
.features { display: grid; gap: 1rem; }
.feature { display: grid; gap: 0.75rem; align-content: start; padding: 1.5rem; border-radius: var(--sf-radius-xl); background: var(--sf-color-card); border: 1px solid var(--sf-color-border); }
.feature__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--sf-radius-lg); background: var(--sf-color-muted); border: 1px solid var(--sf-color-border); }
.feature__icon svg { width: 1.25rem; height: 1.25rem; }
.feature__title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* Showcase: a strip that scrolls on its own, snapping to each direction */
.showcase {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin;
}
.showcase figure { margin: 0; scroll-snap-align: start; display: grid; gap: 0.75rem; }
.showcase img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--sf-radius-xl); border: 1px solid var(--sf-color-border); background: var(--sf-color-card); }
.showcase figcaption { font-size: 0.9375rem; font-weight: 600; }
@media (min-width: 40rem) { .showcase { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (min-width: 64rem) { .showcase { grid-auto-columns: calc((100% - 3rem) / 3); gap: 1.5rem; } }
.showcase__note { margin-top: 1rem; font-size: 0.875rem; color: var(--sf-color-muted-foreground); }

/* Editor */
.editor { display: grid; gap: 3rem; align-items: center; }
.chat { display: grid; gap: 0.75rem; padding: 1.5rem; border-radius: var(--sf-radius-xl); background: var(--sf-color-card); border: 1px solid var(--sf-color-border); box-shadow: var(--sf-shadow-lg); }
.chat__bubble {
  display: flex; gap: 0.5rem; align-items: flex-start; max-width: 88%; padding: 0.75rem 1rem;
  font-size: 0.9375rem; line-height: 1.375rem;
}
.chat__bubble svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1875rem; color: var(--sf-color-ai); }
.chat__bubble--owner { justify-self: end; border-radius: 1rem 1rem 0.25rem 1rem; background: var(--sf-color-primary); color: var(--sf-color-primary-foreground); }
.chat__bubble--chat { justify-self: start; border-radius: 1rem 1rem 1rem 0.25rem; background: var(--sf-color-muted); color: var(--sf-color-foreground); border: 1px solid var(--sf-color-border); }
.points { display: grid; gap: 1rem; margin-top: 2rem; }
.point { display: flex; gap: 0.75rem; align-items: flex-start; }
.point svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.125rem; color: var(--sf-color-success); }
@media (min-width: 64rem) { .editor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }

/* Modules: one aligned list, two columns from tablets on */
/* The modules as cards, each with its scene above its name (launch plan L5). */
.modules { display: grid; gap: 1.5rem; }
.module { display: grid; align-content: start; gap: 1rem; padding: 1rem; background: var(--sf-color-card); border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-xl); }
.module__text { display: grid; gap: 0.25rem; min-width: 0; }
.module__head { display: flex; gap: 0.5rem; align-items: center; }
.module__head svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--sf-color-muted-foreground); }
.module__name { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 700; }
.module__description { color: var(--sf-color-muted-foreground); font-size: 0.9375rem; }
.module__plans { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--sf-color-accent-foreground); font-weight: 600; }
@media (min-width: 48rem) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .modules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* A module's scene: drawn shapes on the muted ground, tokens only, no words. */
.scene { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 1rem; overflow: hidden; background: var(--sf-color-muted); border-radius: var(--sf-radius-lg); }
.scene svg { width: 1rem; height: 1rem; }
.scene__panel { display: grid; align-content: start; gap: 0.5rem; padding: 0.75rem; width: 100%; background: var(--sf-color-card); border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-lg); box-shadow: var(--sf-shadow-sm); }
.scene__split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; align-items: start; }
.scene__line { display: block; height: 0.5rem; border-radius: var(--sf-radius-full); background: color-mix(in oklch, var(--sf-color-muted-foreground) 30%, transparent); }
.scene__line--w50 { width: 50%; } .scene__line--w55 { width: 55%; } .scene__line--w60 { width: 60%; } .scene__line--w65 { width: 65%; } .scene__line--w70 { width: 70%; }
.scene__line--w75 { width: 75%; } .scene__line--w80 { width: 80%; } .scene__line--w85 { width: 85%; } .scene__line--w90 { width: 90%; } .scene__line--w95 { width: 95%; }
.scene__line--strong { background: color-mix(in oklch, var(--sf-color-foreground) 55%, transparent); }
.scene__field { display: block; height: 1rem; border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-md); background: var(--sf-color-background); }
.scene__field--tall { height: 1.5rem; }
.scene__send { display: block; width: 50%; height: 1rem; border-radius: var(--sf-radius-md); background: var(--sf-color-primary); }
.scene__list { gap: 0.25rem; }
.scene__row { display: flex; gap: 0.25rem; align-items: center; padding: 0.25rem; border-radius: var(--sf-radius-md); }
.scene__row--new { background: color-mix(in oklch, var(--sf-color-ai) 14%, transparent); }
.scene__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--sf-radius-full); background: var(--sf-color-ai); }
.scene__calendar { grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
.scene__day { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--sf-radius-md); background: var(--sf-color-muted); }
.scene__day--taken { background: var(--sf-color-ai); color: var(--sf-color-ai-foreground); }
.scene__chat { gap: 0.5rem; }
.scene__bubble { display: grid; gap: 0.25rem; padding: 0.5rem; width: 75%; border-radius: var(--sf-radius-lg); }
.scene__bubble--visitor { background: var(--sf-color-muted); border-bottom-left-radius: var(--sf-radius-sm); }
.scene__bubble--assistant { justify-self: end; background: color-mix(in oklch, var(--sf-color-ai) 16%, transparent); border-bottom-right-radius: var(--sf-radius-sm); }
.scene__typing { display: none; gap: 0.25rem; }
.scene__typing span { width: 0.375rem; height: 0.375rem; border-radius: var(--sf-radius-full); background: var(--sf-color-ai); }
.scene__answer { display: grid; gap: 0.25rem; }
.scene__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; width: 100%; }
.scene__tile { display: block; aspect-ratio: 16 / 10; border-radius: var(--sf-radius-md); }
.scene__tile--0 { background: color-mix(in oklch, var(--sf-color-ai) 45%, var(--sf-color-card)); }
.scene__tile--1 { background: color-mix(in oklch, var(--sf-color-primary) 35%, var(--sf-color-card)); }
.scene__tile--2 { background: color-mix(in oklch, var(--sf-color-accent) 70%, var(--sf-color-card)); }
.scene__letters { grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; }
.scene__letters .scene__icon { grid-row: span 3; width: 2rem; height: 2rem; color: var(--sf-color-ai); }
.scene__letter { display: block; height: 1rem; border-radius: var(--sf-radius-md); border: 1px solid var(--sf-color-border); background: var(--sf-color-background); }
.scene__page { gap: 0.5rem; padding-top: 0; overflow: hidden; }
.scene__banner { display: block; height: 1rem; margin: 0 -0.75rem 0.25rem; background: var(--sf-color-ai); }
.scene__document { grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.scene__document .scene__icon { width: 2rem; height: 2rem; color: var(--sf-color-success); }
.scene__lines { display: grid; gap: 0.5rem; }
.scene__post { gap: 0.5rem; padding: 0.5rem; }
.scene__review { gap: 0.5rem; }
.scene__stars { display: flex; gap: 0.25rem; color: var(--sf-color-ai); }
.scene__stars svg { fill: currentColor; }
.scene__menu { gap: 0.5rem; }
.scene__dish { display: flex; gap: 0.5rem; align-items: center; }
.scene__dish-name { flex: 0 0 35%; height: 0.5rem; border-radius: var(--sf-radius-full); background: color-mix(in oklch, var(--sf-color-foreground) 55%, transparent); }
.scene__dish-name--long { flex-basis: 50%; }
.scene__leader { flex: 1; border-bottom: 2px dotted var(--sf-color-border); }
.scene__price { flex: none; width: 1.5rem; height: 0.5rem; border-radius: var(--sf-radius-full); background: var(--sf-color-ai); }
.scene__week { gap: 0.25rem; }
.scene__hour { display: flex; justify-content: space-between; gap: 0.5rem; }
.scene__weekday { width: 25%; height: 0.375rem; border-radius: var(--sf-radius-full); background: color-mix(in oklch, var(--sf-color-foreground) 45%, transparent); }
.scene__time { width: 35%; height: 0.375rem; border-radius: var(--sf-radius-full); background: color-mix(in oklch, var(--sf-color-muted-foreground) 35%, transparent); }
.scene__hour--closed .scene__time { width: 20%; background: color-mix(in oklch, var(--sf-color-destructive) 45%, transparent); }
/* Each scene moves once in a while, a few seconds a loop; never for a visitor who asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .scene__row--new { animation: scene-arrive 4s ease-in-out infinite; }
  .scene__day--taken { animation: scene-take 4s ease-in-out infinite; }
  .scene__typing { display: flex; animation: scene-typing 5s steps(1) infinite; }
  .scene__typing span { animation: scene-dot 1s ease-in-out infinite; }
  .scene__typing span:nth-child(2) { animation-delay: 0.15s; }
  .scene__typing span:nth-child(3) { animation-delay: 0.3s; }
  .scene__answer { animation: scene-answer 5s steps(1) infinite; }
  .scene__tile--0 { animation: scene-breathe 6s ease-in-out infinite; }
  .scene__letter { animation: scene-send 4s ease-in-out infinite; }
  .scene__letter:nth-of-type(2) { animation-delay: 0.3s; }
  .scene__letter:nth-of-type(3) { animation-delay: 0.6s; }
  .scene__banner { animation: scene-drop 5s ease-in-out infinite; }
  .scene__stars svg { animation: scene-star 4s ease-in-out infinite; }
  .scene__stars svg:nth-child(2) { animation-delay: 0.1s; }
  .scene__stars svg:nth-child(3) { animation-delay: 0.2s; }
  .scene__stars svg:nth-child(4) { animation-delay: 0.3s; }
  .scene__stars svg:nth-child(5) { animation-delay: 0.4s; }
}
@keyframes scene-arrive { 0%, 10% { opacity: 0; transform: translateY(-0.5rem); } 25%, 100% { opacity: 1; transform: none; } }
@keyframes scene-take { 0%, 20% { background: var(--sf-color-muted); color: transparent; } 35%, 100% { background: var(--sf-color-ai); color: var(--sf-color-ai-foreground); } }
@keyframes scene-typing { 0% { display: flex; } 40%, 100% { display: none; } }
@keyframes scene-answer { 0% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes scene-dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes scene-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }
@keyframes scene-send { 0%, 15% { opacity: 0; transform: translateX(-1rem); } 35%, 100% { opacity: 1; transform: none; } }
@keyframes scene-drop { 0%, 10% { transform: translateY(-100%); } 25%, 100% { transform: none; } }
@keyframes scene-star { 0%, 20% { opacity: 0.25; } 35%, 100% { opacity: 1; } }

/* Niches */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--sf-color-border); background: var(--sf-color-card); font-size: 0.9375rem; }

/* Portfolio */
.portfolio { display: grid; gap: 1.5rem; }
.work { display: grid; gap: 0.75rem; text-decoration: none; }
.work__window { display: block; box-shadow: var(--sf-shadow-md); transition: box-shadow 250ms, transform 250ms; }
.work:hover .work__window { box-shadow: var(--sf-shadow-lg); transform: translateY(-2px); }
.work__window img { display: block; height: auto; background: var(--sf-color-muted); }
.work__name { font-weight: 700; font-size: 1.125rem; }
.work__meta { font-size: 0.875rem; color: var(--sf-color-muted-foreground); }

@media (prefers-reduced-motion: reduce) { .work__window { transition: none; } .work:hover .work__window { transform: none; } }
@media (min-width: 40rem) { .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.portfolio__all { margin-top: 2rem; }

/* Pricing: the period is a radio pair; the prices of the other period hide with CSS */
.period { display: inline-flex; padding: 0.25rem; gap: 0.25rem; border-radius: var(--sf-radius-lg); background: var(--sf-color-card); border: 1px solid var(--sf-color-border); margin: 0 auto 2rem; }
.period label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 1rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; color: var(--sf-color-muted-foreground); }
.period__save { font-size: 0.75rem; font-weight: 600; color: var(--sf-color-success); }
.pricing__toggle { display: flex; justify-content: center; }
#period-month:checked ~ .pricing__toggle label[for='period-month'],
#period-year:checked ~ .pricing__toggle label[for='period-year'] { background: var(--sf-color-primary); color: var(--sf-color-primary-foreground); }
#period-year:checked ~ .pricing__toggle label[for='period-year'] .period__save { color: inherit; }
#period-month:focus-visible ~ .pricing__toggle label[for='period-month'],
#period-year:focus-visible ~ .pricing__toggle label[for='period-year'] { outline: 2px solid var(--sf-color-ai); outline-offset: 2px; }
#period-month:checked ~ .plans .price--year,
#period-year:checked ~ .plans .price--month { display: none; }
.plans { display: grid; gap: 1.5rem; align-items: start; }
.plan { position: relative; display: grid; gap: 1.5rem; padding: 2rem 1.5rem; border-radius: var(--sf-radius-xl); background: var(--sf-color-card); border: 1px solid var(--sf-color-border); }
.plan--recommended { border-color: var(--sf-color-primary); box-shadow: var(--sf-shadow-lg); }
.plan__badge { position: absolute; top: -0.875rem; left: 1.5rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--sf-color-primary); color: var(--sf-color-primary-foreground); font-size: 0.8125rem; font-weight: 600; }
.plan__name { font-size: 1.25rem; font-weight: 700; }
.price { display: flex; align-items: baseline; gap: 0.25rem; }
.price__amount { font: 750 2.5rem/1 var(--sf-font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price__period { color: var(--sf-color-muted-foreground); }
.plan__launch { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin-top: -1rem; font-size: 0.9375rem; font-weight: 600; }
.price__was { color: var(--sf-color-muted-foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
.plan__bonus { padding: 0.75rem 1rem; border-radius: var(--sf-radius-lg); background: var(--sf-color-accent); color: var(--sf-color-accent-foreground); font-weight: 600; font-size: 0.9375rem; }
.plan__list { display: grid; gap: 0.75rem; }
.plan__list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; }
.plan__list svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.1875rem; color: var(--sf-color-success); }
.plan__modules { font-size: 0.875rem; color: var(--sf-color-muted-foreground); }
.plan__modules strong { display: block; color: var(--sf-color-foreground); margin-bottom: 0.25rem; }
@media (min-width: 64rem) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.credits { display: grid; gap: 1.5rem; margin-top: 3rem; }
.credits__box { display: grid; gap: 0.5rem; padding: 1.5rem; border-radius: var(--sf-radius-xl); border: 1px solid var(--sf-color-border); background: var(--sf-color-card); }
.credits__box h3 { font-size: 1.125rem; }
.credits__box p, .credits__box li { color: var(--sf-color-muted-foreground); font-size: 0.9375rem; }
@media (min-width: 48rem) { .credits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.included { display: grid; gap: 0.75rem; margin-bottom: 3rem; }
@media (min-width: 48rem) { .included { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Questions: native disclosure */
.faq { display: grid; gap: 0.75rem; max-width: 48rem; margin-inline: auto; }
.faq details { border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-xl); background: var(--sf-color-card); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; font-weight: 600; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 1.25rem; height: 1.25rem; flex: none; transition: transform 150ms; color: var(--sf-color-muted-foreground); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq p { padding: 0 1.5rem 1.5rem; color: var(--sf-color-muted-foreground); }

/* Final call */
.final { text-align: center; }
.final__box { display: grid; gap: 1.5rem; justify-items: center; padding: 3rem 1.5rem; border-radius: 1.5rem; background: var(--sf-color-primary); color: var(--sf-color-primary-foreground); position: relative; overflow: hidden; }
.final__box::before { content: ''; position: absolute; inset: auto -20% -60% -20%; height: 30rem; background: radial-gradient(closest-side, color-mix(in oklch, var(--sf-color-ai) 45%, transparent), transparent); pointer-events: none; }
.final__box > * { position: relative; }
.final__box .lead { color: color-mix(in oklch, var(--sf-color-primary-foreground) 72%, transparent); max-width: 36rem; }
.final__box .button--primary { background: var(--sf-color-primary-foreground); color: var(--sf-color-primary); }
@media (min-width: 48rem) { .final__box { padding: 4rem 3rem; } }

/* Footer */
.footer { padding-block: 3rem; border-top: 1px solid var(--sf-color-border); font-size: 0.9375rem; }
.footer__grid { display: grid; gap: 2rem; }
.footer__tagline { color: var(--sf-color-muted-foreground); margin-top: 0.75rem; max-width: 22rem; }
.footer h2 { font: 600 0.8125rem/1rem var(--sf-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-color-muted-foreground); margin-bottom: 0.75rem; }
.footer ul { display: grid; gap: 0.5rem; }
.footer a { text-decoration: none; color: var(--sf-color-foreground); }
.footer a:hover { text-decoration: underline; }
.footer__base { display: grid; gap: 0.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--sf-color-border); color: var(--sf-color-muted-foreground); font-size: 0.875rem; }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

/* Page heads below the home page */
.page-head { padding-block: 3rem 1rem; }
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.08; font-weight: 750; }
.page-head .lead { margin-top: 1rem; max-width: 44rem; }
.section--tight { padding-block: 2rem var(--section); }

/* The phone app: what it does beside two of its screens, and the stores. */
.mobile { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 64rem) { .mobile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.mobile__points { display: grid; gap: 1rem; margin-top: 2rem; }
.mobile__points .point svg { color: var(--sf-color-ai); }
.mobile__stores { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.store { display: inline-flex; border-radius: 0.5rem; }
.store img { height: 3rem; width: auto; }
.mobile__note { margin-top: 1rem; font-size: 0.875rem; color: var(--sf-color-muted-foreground); }
.mobile__phones { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 1rem; padding-block: 1rem; }
.mobile__phones::before {
  content: ''; position: absolute; inset: 10% 0; z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
.app-phone {
  width: min(46%, 15rem); border-radius: 2rem; overflow: hidden; border: 0.5rem solid var(--sf-color-hero);
  background: var(--sf-color-hero); box-shadow: var(--sf-shadow-lg);
}
.app-phone--2 { margin-top: 3rem; }
.app-phone img { width: 100%; height: auto; aspect-ratio: 1320 / 2868; object-fit: cover; border-radius: 1.5rem; }

/* Legal pages: the contents beside the text from a laptop, above it on a phone. */
.legal__updated { margin-top: 1rem; font-size: 0.875rem; color: var(--sf-color-muted-foreground); }
.legal { display: grid; gap: 2rem; }
.legal__toc { align-self: start; padding: 1.5rem; border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-xl); background: var(--sf-color-card); }
.legal__toc h2 { font: 600 0.8125rem/1rem var(--sf-font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-color-muted-foreground); margin-bottom: 1rem; }
.legal__toc ol { display: grid; gap: 0.5rem; counter-reset: toc; }
.legal__toc li { counter-increment: toc; display: flex; gap: 0.5rem; font-size: 0.9375rem; }
.legal__toc li::before { content: counter(toc) '.'; color: var(--sf-color-muted-foreground); font-variant-numeric: tabular-nums; min-width: 1.5rem; }
.legal__toc a { text-decoration: none; color: var(--sf-color-foreground); }
.legal__toc a:hover { text-decoration: underline; }
@media (min-width: 64rem) {
  .legal { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; }
  .legal__toc { position: sticky; top: 5.5rem; }
}
.prose { display: grid; gap: 2.5rem; max-width: 44rem; min-width: 0; }
.prose section { display: grid; gap: 1rem; scroll-margin-top: 5.5rem; }
.prose h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.prose p, .prose li { color: color-mix(in oklch, var(--sf-color-foreground) 86%, var(--sf-color-muted-foreground)); line-height: 1.75rem; overflow-wrap: anywhere; }
.prose__list { display: grid; gap: 0.5rem; }
.prose__list li { position: relative; padding-left: 1.5rem; }
.prose__list li::before { content: ''; position: absolute; left: 0.25rem; top: 0.75rem; width: 0.375rem; height: 0.375rem; border-radius: var(--sf-radius-full); background: var(--sf-color-muted-foreground); }

/* Contact: the form alone (owner, 2026-10-22: „doar o pagină de contact simplă cu formular”). */
.contact { display: grid; gap: 3rem; }
.contact__form { display: grid; gap: 1.5rem; align-content: start; max-width: 40rem; min-width: 0; }
.field { display: grid; gap: 0.5rem; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field input, .field textarea {
  width: 100%; font: inherit; color: var(--sf-color-foreground); background: var(--sf-color-card);
  border: 1px solid var(--sf-color-input); border-radius: var(--sf-radius-lg); padding: 0.75rem 1rem; min-height: 3rem;
}
.field textarea { resize: vertical; min-height: 10rem; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sf-color-ring); outline-offset: 1px; border-color: var(--sf-color-ring); }
.field__hint { font-size: 0.875rem; color: var(--sf-color-muted-foreground); }
.check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.5rem; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0.125rem 0 0; flex: none; accent-color: var(--sf-color-primary); }
.contact__form .button { justify-self: start; }
.contact__trap { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
/* The robot check holds its place before it is drawn: the button under it never jumps. */
.contact__check { min-height: 4.0625rem; }
.notice { display: none; padding: 1rem 1.25rem; border-radius: var(--sf-radius-lg); font-weight: 500; border: 1px solid; scroll-margin-top: 6rem; }
.notice:target { display: block; }
/* Sent: the form gives way to its thanks, with nothing left to fill in or send twice. */
.contact__form:has(#contact-sent:target) > :not(#contact-sent) { display: none; }
.notice--success { color: var(--sf-color-success); border-color: color-mix(in oklch, var(--sf-color-success) 40%, transparent); background: color-mix(in oklch, var(--sf-color-success) 8%, var(--sf-color-background)); }
.notice--error { color: var(--sf-color-destructive); border-color: color-mix(in oklch, var(--sf-color-destructive) 40%, transparent); background: color-mix(in oklch, var(--sf-color-destructive) 8%, var(--sf-color-background)); }