/* ==========================================================================
   Productze — static build
   Hand-compiled from the original Tailwind v4 + TanStack source.
   Design tokens are copied verbatim from src/styles.css; every utility below
   reproduces the exact declarations Tailwind v4 emits for the classes the
   markup actually uses. Nothing about the design has been changed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme tokens  (from @theme inline + :root in src/styles.css)
   -------------------------------------------------------------------------- */
:root {
  --spacing: 0.25rem;
  --radius: 0.75rem;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);

  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Editorial monochrome system:
     #FFFFFF canvas · #222222 ink · #7B7B7B secondary · #F8F8F8 tertiary */
  --background: oklch(1 0 0);
  --foreground: oklch(0.24 0 0); /* #222222 */
  --card: oklch(0.985 0 0); /* #F8F8F8 */
  --card-foreground: oklch(0.24 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.24 0 0);
  --primary: oklch(0.24 0 0);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.24 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.57 0 0); /* #7B7B7B */
  --accent: oklch(0.955 0 0);
  --accent-foreground: oklch(0.24 0 0);
  --destructive: oklch(0.55 0.2 25);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0 0 0 / 10%);
  --input: oklch(0 0 0 / 14%);
  --ring: oklch(0.24 0 0);

  --violet: oklch(0.24 0 0);
  --electric: oklch(0.57 0 0);
  --magenta: oklch(0.24 0 0);

  --chart-1: oklch(0.24 0 0);
  --chart-2: oklch(0.45 0 0);
  --chart-3: oklch(0.57 0 0);
  --chart-4: oklch(0.72 0 0);
  --chart-5: oklch(0.85 0 0);

  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.24 0 0);
  --sidebar-primary: oklch(0.24 0 0);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(0.955 0 0);
  --sidebar-accent-foreground: oklch(0.24 0 0);
  --sidebar-border: oklch(0 0 0 / 10%);
  --sidebar-ring: oklch(0.24 0 0);

  --gradient-brand: linear-gradient(180deg, oklch(0.28 0 0), oklch(0.2 0 0));
  --gradient-text: none;
  --glow-violet: 0 1px 2px oklch(0 0 0 / 0.06);
  --glow-strong: 0 18px 40px -24px oklch(0 0 0 / 0.35);
  --glass: oklch(0.985 0 0);

  /* @theme inline aliases */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-violet: var(--violet);
  --color-magenta: var(--magenta);
  --color-electric: var(--electric);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

/* --------------------------------------------------------------------------
   2. Preflight  (Tailwind v4 base reset)
   -------------------------------------------------------------------------- */
*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

body {
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:-moz-focusring {
  outline: auto;
}

progress {
  vertical-align: baseline;
}

summary {
  display: list-item;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

::file-selector-button {
  margin-inline-end: 4px;
}

::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentColor 50%, transparent);
}

textarea {
  resize: vertical;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-date-and-time-value {
  min-height: 1lh;
  text-align: inherit;
}

::-webkit-datetime-edit {
  display: inline-flex;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

button,
input:where([type="button"], [type="reset"], [type="submit"]),
::file-selector-button {
  appearance: button;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

/* Shadow / ring composition variables (Tailwind's mechanism, so that
   `ring-*` and `shadow-*` on the same element compose instead of clashing) */
*,
::before,
::after,
::backdrop {
  --tw-ring-color: currentColor;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: transparent;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}

/* --------------------------------------------------------------------------
   3. Base layer  (@layer base in src/styles.css)
   -------------------------------------------------------------------------- */
* {
  border-color: var(--color-border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* --------------------------------------------------------------------------
   4. Custom utilities  (@utility blocks in src/styles.css)
   -------------------------------------------------------------------------- */

/* Secondary ink used inside headlines — editorial, never decorative. */
.gradient-text {
  color: var(--muted-foreground);
}

.gradient-brand {
  background-image: var(--gradient-brand);
}

/* Flat tertiary surface with a hairline rule — the reference card language. */
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
}

.glow-ring {
  box-shadow: var(--glow-violet);
}

.mono-photo {
  filter: grayscale(1) contrast(1.05);
}

.grid-pattern {
  background-image:
    linear-gradient(oklch(0 0 0 / 4%) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0 0 0 / 4%) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 50% at 50% 0%, black 30%, transparent 100%);
}

/* --------------------------------------------------------------------------
   5. Utilities
   -------------------------------------------------------------------------- */

/* --- display / layout --- */
.block { display: block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.place-items-center { place-items: center; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-1 { grid-column: span 1 / span 1; }

.gap-px { gap: 1px; }
.gap-0\.5 { gap: calc(var(--spacing) * 0.5); }
.gap-1 { gap: calc(var(--spacing) * 1); }
.gap-2 { gap: calc(var(--spacing) * 2); }
.gap-2\.5 { gap: calc(var(--spacing) * 2.5); }
.gap-3 { gap: calc(var(--spacing) * 3); }
.gap-4 { gap: calc(var(--spacing) * 4); }
.gap-6 { gap: calc(var(--spacing) * 6); }
.gap-10 { gap: calc(var(--spacing) * 10); }

.space-y-2 > * + * { margin-top: calc(var(--spacing) * 2); }
.space-y-3 > * + * { margin-top: calc(var(--spacing) * 3); }
.space-y-4 > * + * { margin-top: calc(var(--spacing) * 4); }

/* --- position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.inset-0 { inset: calc(var(--spacing) * 0); }
.inset-x-0 { inset-inline: calc(var(--spacing) * 0); }
.top-0 { top: calc(var(--spacing) * 0); }
.top-4 { top: calc(var(--spacing) * 4); }
.top-8 { top: calc(var(--spacing) * 8); }
.-top-3 { top: calc(var(--spacing) * -3); }
.-top-24 { top: calc(var(--spacing) * -24); }
.bottom-0 { bottom: calc(var(--spacing) * 0); }
.-bottom-24 { bottom: calc(var(--spacing) * -24); }
.left-0 { left: calc(var(--spacing) * 0); }
.left-4 { left: calc(var(--spacing) * 4); }
.left-1\/2 { left: 50%; }
.-left-10 { left: calc(var(--spacing) * -10); }
.right-0 { right: calc(var(--spacing) * 0); }
.right-10 { right: calc(var(--spacing) * 10); }

.z-50 { z-index: 50; }
.-z-10 { z-index: -10; }

/* --- sizing --- */
.h-1 { height: calc(var(--spacing) * 1); }
.h-3 { height: calc(var(--spacing) * 3); }
.h-3\.5 { height: calc(var(--spacing) * 3.5); }
.h-4 { height: calc(var(--spacing) * 4); }
.h-5 { height: calc(var(--spacing) * 5); }
.h-6 { height: calc(var(--spacing) * 6); }
.h-8 { height: calc(var(--spacing) * 8); }
.h-9 { height: calc(var(--spacing) * 9); }
.h-10 { height: calc(var(--spacing) * 10); }
.h-11 { height: calc(var(--spacing) * 11); }
.h-12 { height: calc(var(--spacing) * 12); }
.h-14 { height: calc(var(--spacing) * 14); }
.h-56 { height: calc(var(--spacing) * 56); }
.h-64 { height: calc(var(--spacing) * 64); }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-h-\[34rem\] { max-height: 34rem; }

.w-1 { width: calc(var(--spacing) * 1); }
.w-3 { width: calc(var(--spacing) * 3); }
.w-3\.5 { width: calc(var(--spacing) * 3.5); }
.w-4 { width: calc(var(--spacing) * 4); }
.w-5 { width: calc(var(--spacing) * 5); }
.w-6 { width: calc(var(--spacing) * 6); }
.w-8 { width: calc(var(--spacing) * 8); }
.w-9 { width: calc(var(--spacing) * 9); }
.w-10 { width: calc(var(--spacing) * 10); }
.w-11 { width: calc(var(--spacing) * 11); }
.w-12 { width: calc(var(--spacing) * 12); }
.w-14 { width: calc(var(--spacing) * 14); }
.w-56 { width: calc(var(--spacing) * 56); }
.w-64 { width: calc(var(--spacing) * 64); }
.w-full { width: 100%; }
.min-w-0 { min-width: calc(var(--spacing) * 0); }

.max-w-xs { max-width: 20rem; }
.max-w-md { max-width: 28rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }

/* --- spacing --- */
.mx-auto { margin-inline: auto; }
.ml-auto { margin-left: auto; }
.mt-1 { margin-top: calc(var(--spacing) * 1); }
.mt-1\.5 { margin-top: calc(var(--spacing) * 1.5); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mt-3 { margin-top: calc(var(--spacing) * 3); }
.mt-4 { margin-top: calc(var(--spacing) * 4); }
.mt-5 { margin-top: calc(var(--spacing) * 5); }
.mt-6 { margin-top: calc(var(--spacing) * 6); }
.mt-8 { margin-top: calc(var(--spacing) * 8); }
.mt-10 { margin-top: calc(var(--spacing) * 10); }
.mt-12 { margin-top: calc(var(--spacing) * 12); }
.mt-14 { margin-top: calc(var(--spacing) * 14); }
.mt-20 { margin-top: calc(var(--spacing) * 20); }
.mt-24 { margin-top: calc(var(--spacing) * 24); }
.mb-1\.5 { margin-bottom: calc(var(--spacing) * 1.5); }

.p-4 { padding: calc(var(--spacing) * 4); }
.p-5 { padding: calc(var(--spacing) * 5); }
.p-6 { padding: calc(var(--spacing) * 6); }
.p-7 { padding: calc(var(--spacing) * 7); }
.p-8 { padding: calc(var(--spacing) * 8); }
.px-3 { padding-inline: calc(var(--spacing) * 3); }
.px-4 { padding-inline: calc(var(--spacing) * 4); }
.px-5 { padding-inline: calc(var(--spacing) * 5); }
.px-6 { padding-inline: calc(var(--spacing) * 6); }
.py-1 { padding-block: calc(var(--spacing) * 1); }
.py-2 { padding-block: calc(var(--spacing) * 2); }
.py-2\.5 { padding-block: calc(var(--spacing) * 2.5); }
.py-3 { padding-block: calc(var(--spacing) * 3); }
.py-4 { padding-block: calc(var(--spacing) * 4); }
.py-6 { padding-block: calc(var(--spacing) * 6); }
.py-14 { padding-block: calc(var(--spacing) * 14); }
.py-16 { padding-block: calc(var(--spacing) * 16); }
.py-24 { padding-block: calc(var(--spacing) * 24); }
.pt-3 { padding-top: calc(var(--spacing) * 3); }
.pt-5 { padding-top: calc(var(--spacing) * 5); }
.pt-32 { padding-top: calc(var(--spacing) * 32); }
.pt-36 { padding-top: calc(var(--spacing) * 36); }
.pb-1 { padding-bottom: calc(var(--spacing) * 1); }
.pb-10 { padding-bottom: calc(var(--spacing) * 10); }
.pb-16 { padding-bottom: calc(var(--spacing) * 16); }

/* --- typography --- */
.text-xs { font-size: 0.75rem; line-height: calc(1 / 0.75); }
.text-sm { font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
.text-base { font-size: 1rem; line-height: calc(1.5 / 1); }
.text-lg { font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
.text-xl { font-size: 1.25rem; line-height: calc(1.75 / 1.25); }
.text-3xl { font-size: 1.875rem; line-height: calc(2.25 / 1.875); }
.text-4xl { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }
.text-\[1\.05rem\] { font-size: 1.05rem; }
.text-\[3\.5rem\] { font-size: 3.5rem; }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.leading-\[0\.9\] { line-height: 0.9; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-\[-0\.04em\] { letter-spacing: -0.04em; }
.tracking-\[-0\.05em\] { letter-spacing: -0.05em; }
.tracking-\[0\.28em\] { letter-spacing: 0.28em; }

.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- colours --- */
.text-foreground { color: var(--color-foreground); }
.text-foreground\/90 { color: color-mix(in oklab, var(--color-foreground) 90%, transparent); }
.text-background { color: var(--color-background); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.text-muted-foreground\/40 { color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent); }
.text-primary { color: var(--color-primary); }
.text-primary\/40 { color: color-mix(in oklab, var(--color-primary) 40%, transparent); }
.text-primary-foreground { color: var(--color-primary-foreground); }
.text-magenta { color: var(--color-magenta); }

.bg-background { background-color: var(--color-background); }
.bg-background\/60 { background-color: color-mix(in oklab, var(--color-background) 60%, transparent); }
.bg-background\/85 { background-color: color-mix(in oklab, var(--color-background) 85%, transparent); }
.bg-card { background-color: var(--color-card); }
.bg-border { background-color: var(--color-border); }
.bg-foreground { background-color: var(--color-foreground); }
.bg-primary { background-color: var(--color-primary); }
.bg-primary\/30 { background-color: color-mix(in oklab, var(--color-primary) 30%, transparent); }
.bg-accent\/30 { background-color: color-mix(in oklab, var(--color-accent) 30%, transparent); }
.bg-accent\/40 { background-color: color-mix(in oklab, var(--color-accent) 40%, transparent); }
.bg-magenta\/25 { background-color: color-mix(in oklab, var(--color-magenta) 25%, transparent); }

.fill-foreground { fill: var(--color-foreground); }
.fill-magenta { fill: var(--color-magenta); }
.stroke-background { stroke: var(--color-background); }

.border-border { border-color: var(--color-border); }
.border-input { border-color: var(--color-input); }

/* --- gradients --- */
.bg-gradient-to-t {
  background-image: linear-gradient(
    to top,
    var(--tw-gradient-from, transparent) 0%,
    var(--tw-gradient-via, transparent) 50%,
    var(--tw-gradient-to, transparent) 100%
  );
}
.from-background { --tw-gradient-from: var(--color-background); }
.via-background\/40 { --tw-gradient-via: color-mix(in oklab, var(--color-background) 40%, transparent); }
.to-transparent { --tw-gradient-to: transparent; }

/* --- borders --- */
.border { border-style: var(--tw-border-style, solid); border-width: 1px; }
.border-t { border-top-style: var(--tw-border-style, solid); border-top-width: 1px; }

.rounded-md { border-radius: var(--radius-md); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: 9999px; border-radius: calc(infinity * 1px); }
.rounded-\[2rem\] { border-radius: 2rem; }

/* --- effects --- */
.overflow-hidden { overflow: hidden; }
.opacity-70 { opacity: 0.7; }
.pointer-events-none { pointer-events: none; }
.outline-none { --tw-outline-style: none; outline-style: none; }
.object-cover { object-fit: cover; }
.object-top { object-position: top; }
.origin-left { transform-origin: left; }
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.blur-\[100px\] { filter: blur(100px); }

.ring-1 {
  --tw-ring-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
    0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
  --tw-ring-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
    0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-primary\/30 { --tw-ring-color: color-mix(in oklab, var(--color-primary) 30%, transparent); }
.ring-primary\/40 { --tw-ring-color: color-mix(in oklab, var(--color-primary) 40%, transparent); }

.shadow-\[var\(--glow-violet\)\] {
  --tw-shadow: var(--glow-violet);
  box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-\[var\(--glow-strong\)\] {
  --tw-shadow: var(--glow-strong);
  box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
}

/* --- transforms (individual properties, as Tailwind v4 emits) --- */
.-translate-x-1\/2 { --tw-translate-x: -50%; translate: var(--tw-translate-x) var(--tw-translate-y, 0); }
.-rotate-90 { rotate: -90deg; }

/* --- transitions --- */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.transition-colors {
  transition-property: color, background-color, border-color, outline-color, text-decoration-color,
    fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.transition-transform {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.duration-300 { transition-duration: 0.3s; }
.duration-500 { transition-duration: 0.5s; }

/* --------------------------------------------------------------------------
   6. Variants  (must follow the base utilities they override)
   -------------------------------------------------------------------------- */
.group-hover\:scale-105:is(:where(.group):hover *) { scale: 1.05; }
.group-hover\:gradient-brand:is(:where(.group):hover *) { background-image: var(--gradient-brand); }

.hover\:bg-accent:hover { background-color: var(--color-accent); }
.hover\:bg-accent\/30:hover { background-color: color-mix(in oklab, var(--color-accent) 30%, transparent); }
.hover\:bg-card:hover { background-color: var(--color-card); }
.hover\:bg-primary\/90:hover { background-color: color-mix(in oklab, var(--color-primary) 90%, transparent); }
.hover\:text-foreground:hover { color: var(--color-foreground); }
.hover\:opacity-85:hover { opacity: 0.85; }
.hover\:-translate-y-0\.5:hover { --tw-translate-y: calc(var(--spacing) * -0.5); translate: var(--tw-translate-x, 0) var(--tw-translate-y); }
.hover\:-translate-y-1\.5:hover { --tw-translate-y: calc(var(--spacing) * -1.5); translate: var(--tw-translate-x, 0) var(--tw-translate-y); }
.hover\:shadow-\[var\(--glow-strong\)\]:hover {
  --tw-shadow: var(--glow-strong);
  box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
}

.focus\:border-primary:focus { border-color: var(--color-primary); }

.focus-visible\:outline-none:focus-visible { --tw-outline-style: none; outline-style: none; }
.focus-visible\:ring-2:focus-visible {
  --tw-ring-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
    0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-shadow), var(--tw-shadow);
}
.focus-visible\:ring-ring:focus-visible { --tw-ring-color: var(--color-ring); }
.focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; }
.focus-visible\:ring-offset-background:focus-visible { --tw-ring-offset-color: var(--color-background); }

.disabled\:opacity-50:disabled { opacity: 0.5; }

/* --------------------------------------------------------------------------
   7. Responsive  (sm 40rem · md 48rem · lg 64rem)
   -------------------------------------------------------------------------- */
@media (min-width: 40rem) {
  .sm\:flex { display: flex; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-start { align-items: flex-start; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:gap-6 { gap: calc(var(--spacing) * 6); }
  .sm\:mt-0 { margin-top: calc(var(--spacing) * 0); }
  .sm\:px-6 { padding-inline: calc(var(--spacing) * 6); }
  .sm\:px-12 { padding-inline: calc(var(--spacing) * 12); }
  .sm\:pt-4 { padding-top: calc(var(--spacing) * 4); }
  .sm\:pt-40 { padding-top: calc(var(--spacing) * 40); }
  .sm\:pt-44 { padding-top: calc(var(--spacing) * 44); }
  .sm\:text-sm { font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
  .sm\:text-base { font-size: 1rem; line-height: calc(1.5 / 1); }
  .sm\:text-lg { font-size: 1.125rem; line-height: calc(1.75 / 1.125); }
  .sm\:text-4xl { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
  .sm\:text-5xl { font-size: 3rem; line-height: 1; }
  .sm\:text-\[5\.5rem\] { font-size: 5.5rem; }
}

@media (min-width: 48rem) {
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:text-5xl { font-size: 3rem; line-height: 1; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 64rem) {
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-\[1\.05fr_0\.95fr\] { grid-template-columns: 1.05fr 0.95fr; }
  .lg\:grid-cols-\[1fr_1\.4fr\] { grid-template-columns: 1fr 1.4fr; }
  .lg\:p-10 { padding: calc(var(--spacing) * 10); }
  .lg\:text-\[7rem\] { font-size: 7rem; }
  .lg\:-translate-y-3 { --tw-translate-y: calc(var(--spacing) * -3); translate: var(--tw-translate-x, 0) var(--tw-translate-y); }
}

/* --------------------------------------------------------------------------
   8. Static-port runtime pieces
      Replaces framer-motion (reveal animations) and sonner (toast) with
      dependency-free equivalents. Visual result is unchanged.
   -------------------------------------------------------------------------- */

/* Reveal targets start hidden; script.js animates them with the Web
   Animations API using the same durations/delays as the original
   framer-motion props. Using `transform` (not `translate`) keeps this
   composable with utilities such as `lg:-translate-y-3`. */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Mobile nav: the button swaps icons via [data-open] */
[data-menu-icon="close"] { display: none; }
[data-open="true"] [data-menu-icon="close"] { display: block; }
[data-open="true"] [data-menu-icon="open"] { display: none; }

/* Toast — mirrors sonner's default light theme, top-center */
.toaster {
  position: fixed;
  top: 1rem;
  left: 50%;
  translate: -50% 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  width: 356px;
  max-width: calc(100vw - 2rem);
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--popover);
  border: 1px solid var(--border);
  box-shadow:
    0 4px 12px oklch(0 0 0 / 0.08),
    0 1px 2px oklch(0 0 0 / 0.06);
  color: var(--popover-foreground);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 500;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-100%) scale(0.96);
  transition:
    opacity 0.35s cubic-bezier(0.21, 1.02, 0.73, 1),
    transform 0.35s cubic-bezier(0.21, 1.02, 0.73, 1);
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast svg {
  flex-shrink: 0;
  height: 1.125rem;
  width: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; }
  .toast { transition: none; }
}