/* Generated by deploy/build-content.mjs from lib/theme.mjs.
 * Do not edit by hand — edit the theme, or the block at the bottom of the
 * builder, and run `npm run content`. */
/* Shared tokens for fieldstub.com, the capture form, and the Office app.
 *
 * THE TWEAKCN BLOCK is the paste target. Export from
 * https://tweakcn.com/editor/theme (zinc, New York) and replace everything
 * between the TWEAKCN markers. Capture inlines this file; Office imports it;
 * `npm run content` copies it into site/assets/fieldstub.css.
 *
 * Capture never gets class="dark". Office may.
 * Capture ignores any font-face TweakCN adds — system stack only on the jobsite.
 */

/* === TWEAKCN PASTE START === */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.1450 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.1450 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.1450 0 0);
  --primary: oklch(0.6717 0.2205 37.8643);
  --primary-foreground: oklch(0.9850 0 0);
  --secondary: oklch(0.9700 0 0);
  --secondary-foreground: oklch(0.2050 0 0);
  --muted: oklch(0.9700 0 0);
  --muted-foreground: oklch(0.5560 0 0);
  --accent: oklch(0.9700 0 0);
  --accent-foreground: oklch(0.2050 0 0);
  --destructive: oklch(0.5770 0.2450 27.3250);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9220 0 0);
  --input: oklch(0.9220 0 0);
  --ring: oklch(0.7080 0 0);
  --chart-1: oklch(0.8100 0.1000 252);
  --chart-2: oklch(0.6200 0.1900 260);
  --chart-3: oklch(0.5500 0.2200 263);
  --chart-4: oklch(0.4900 0.2200 264);
  --chart-5: oklch(0.4200 0.1800 266);
  --sidebar: oklch(0.9850 0 0);
  --sidebar-foreground: oklch(0.1450 0 0);
  --sidebar-primary: oklch(0.2050 0 0);
  --sidebar-primary-foreground: oklch(0.9850 0 0);
  --sidebar-accent: oklch(0.9700 0 0);
  --sidebar-accent-foreground: oklch(0.2050 0 0);
  --sidebar-border: oklch(0.9220 0 0);
  --sidebar-ring: oklch(0.7080 0 0);
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Intel One Mono, ui-monospace, monospace;
  --radius: 0.35rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
}

.dark {
  /* Layered dark mode (Hulu-style): a charcoal base, then elevated surfaces
     a step lighter so sidebar / cards / inputs cast a visible shadow on it. */
  --background: oklch(0.185 0 0);
  --foreground: oklch(0.9850 0 0);
  --card: oklch(0.255 0 0);
  --card-foreground: oklch(0.9850 0 0);
  --popover: oklch(0.285 0 0);
  --popover-foreground: oklch(0.9850 0 0);
  /* Keep Fieldstub orange in dark. TweakCN zinc flips primary to near-white,
     which reads as an unbranded gray CTA. */
  --primary: oklch(0.6717 0.2205 37.8643);
  --primary-foreground: oklch(0.9850 0 0);
  --secondary: oklch(0.285 0 0);
  --secondary-foreground: oklch(0.9850 0 0);
  --muted: oklch(0.255 0 0);
  --muted-foreground: oklch(0.7080 0 0);
  --accent: oklch(0.32 0 0);
  --accent-foreground: oklch(0.9850 0 0);
  --destructive: oklch(0.7040 0.1910 22.2160);
  --destructive-foreground: oklch(0.9850 0 0);
  --border: oklch(0.34 0 0);
  --input: oklch(0.36 0 0);
  --ring: oklch(0.5560 0 0);
  --chart-1: oklch(0.8100 0.1000 252);
  --chart-2: oklch(0.6200 0.1900 260);
  --chart-3: oklch(0.5500 0.2200 263);
  --chart-4: oklch(0.4900 0.2200 264);
  --chart-5: oklch(0.4200 0.1800 266);
  --sidebar: oklch(0.255 0 0);
  --sidebar-foreground: oklch(0.9850 0 0);
  --sidebar-primary: oklch(0.4880 0.2430 264.3760);
  --sidebar-primary-foreground: oklch(0.9850 0 0);
  --sidebar-accent: oklch(0.30 0 0);
  --sidebar-accent-foreground: oklch(0.9850 0 0);
  --sidebar-border: oklch(0.34 0 0);
  --sidebar-ring: oklch(0.4390 0 0);
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Intel One Mono, ui-monospace, monospace;
  --radius: 0.35rem;
  --shadow-x: 0;
  --shadow-y: 2px;
  --shadow-blur: 8px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.45;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 2px 0px oklch(0 0 0 / 0.35);
  --shadow-xs: 0 1px 3px 0px oklch(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.55);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 20px -6px oklch(0 0 0 / 0.55);
  --shadow-md: 0 2px 4px oklch(0 0 0 / 0.35), 0 12px 28px -8px oklch(0 0 0 / 0.6);
  --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.3), 0 18px 40px -12px oklch(0 0 0 / 0.65);
  --shadow-xl: 0 8px 16px oklch(0 0 0 / 0.3), 0 24px 48px -12px oklch(0 0 0 / 0.7);
  --shadow-2xl: 0 12px 24px 0px oklch(0 0 0 / 0.55);
}
/* === TWEAKCN PASTE END === */

/* Fieldstub extras. Not from TweakCN. Capture constraints live here.
 *
 * Type: UI on a 12/14/16 ladder. --text-md is the iOS input floor (smaller
 * zooms the page). --text-prose is the reading size on site and capture.
 * Display clamps are named so marketing and docs do not invent a third pair.
 *
 * Space: 4px grid. Office uses Tailwind's matching scale (p-4 ≡ --space-4).
 * Radius: one Tailwind-named scale. Office @theme points at these vars.
 *
 * Inverse: --foreground canvases (hero close, capture header, code pre).
 * Aliases --inverse to --foreground so a TweakCN paste still inverts.
 */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-prose: 17px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-h3: 19px;
  --text-h2: clamp(28px, 3.6vw, 36px);
  --text-h1: clamp(40px, 6.2vw, 64px);
  --text-h2-docs: clamp(22px, 2.6vw, 28px);
  --text-h1-docs: clamp(32px, 4.6vw, 44px);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --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);

  --tap: 44px;
  --max: 1080px;
  --measure: 70ch;
  --nav-height: 64px;
  --capture-max: 640px;
  --capture-bar: 128px;

  --inverse: var(--foreground);
  --inverse-foreground: var(--background);
  --inverse-muted: oklch(0.7600 0 0);

  /* Short migration aliases. Do not alias --muted: in shadcn it is a surface;
     in the old palette it was text. Pages still using --muted as colour will
     look wrong until they move to --muted-foreground. */
  --ink: var(--foreground);
  --ink-2: var(--foreground);
  --body: var(--muted-foreground);
  --bg: var(--background);
  --bg-2: var(--muted);
  --bg-3: var(--secondary);
  --line: var(--border);
  --line-strong: var(--input);
  --faint: var(--border);
  --sel: var(--ring);
  --sel-bg: var(--accent);
  --sel-line: var(--border);
  /* --amber is gone, not aliased: it pointed at --primary-foreground, which
     is near-white, and every accent that borrowed it (hero button, pricing
     ticks, the dark-section wordmark) silently vanished into the background.
     Accents say var(--primary) now. */
  --amber-ink: var(--primary);
  --danger: var(--destructive);
  --danger-bg: var(--muted);
  --danger-line: var(--destructive);
  --ok: var(--foreground);
  --ok-bg: var(--muted);
  --ok-line: var(--border);
  --r-sm: var(--radius-sm);
  --r: var(--radius);
  --r-lg: var(--radius-xl);

  /* Office surfaces that are not in the TweakCN kit. Paper is always light
     so a signature PNG (dark ink, transparent) can invert in dark mode. */
  --paper: oklch(1 0 0);
  --paper-foreground: oklch(0.1450 0 0);
  --overlay: oklch(0 0 0 / 0.8);
  --overlay-soft: oklch(0 0 0 / 0.5);
  --scrim: oklch(0 0 0);
  --scrim-foreground: oklch(1 0 0);
  --sidebar-selected: oklch(0.9220 0 0);
  --sidebar-selected-foreground: oklch(0.1450 0 0);
  --warning: oklch(0.75 0.16 70);
  --warning-foreground: oklch(0.28 0.07 55);
  --warning-muted: oklch(0.97 0.04 85);
  --pad-back: oklch(0.78 0.08 150);
  --pad-mid: oklch(0.9 0.09 85);

  --warn-ink: var(--warning-foreground);
  --warn-bg: var(--warning-muted);
  --warn-line: var(--warning);
}

.dark {
  /* TweakCN's dark --sidebar-primary is a leftover violet. Selected
     sidebar items and the mark use this; keep it gray. */
  --sidebar-primary: oklch(0.9220 0 0);
  --sidebar-primary-foreground: oklch(0.2050 0 0);
  /* One step above --sidebar (layer 1) so the selected chip still reads as lift. */
  --sidebar-selected: oklch(0.34 0 0);
  --sidebar-selected-foreground: oklch(0.9850 0 0);
  --warning: oklch(0.75 0.14 70);
  --warning-foreground: oklch(0.93 0.04 85);
  --warning-muted: oklch(0.28 0.05 55);
  --pad-back: oklch(0.52 0.08 150);
  --pad-mid: oklch(0.58 0.1 85);
  /* Inverse is a --foreground canvas, so in .dark it is light. Muted type on
     that canvas has to be dark, not the light-gray used on the dark bar. */
  --inverse-muted: oklch(0.4400 0 0);
}


  *, *::before, *::after { box-sizing: border-box }

  /* One visible focus style everywhere. :focus-visible rather than :focus so a
     mouse click does not leave a ring, but every keyboard and switch user can
     always see where they are. The queue is used by people who live on a
     keyboard in Outlook all day. */
  :focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* Only ever removed where a custom ring replaces it. */
  :focus:not(:focus-visible) { outline: none }

  /* Motion is decoration. Anyone who has asked for less gets none, and the
     capture form is used by people who are already moving. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Bright sun on a cheap panel washes out mid greys. When the device reports
     a preference for more contrast, stop being subtle. Capture stays light. */
  @media (prefers-contrast: more) {
    :root {
      --muted-foreground: oklch(0.37 0 0);
      --border: oklch(0.55 0 0);
      --input: oklch(0.55 0 0);
    }
  }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Keyboard users should not have to tab the whole rail to reach content. */
  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--foreground); color: var(--background); padding: 12px 18px;
    border-radius: 0 0 var(--radius) 0; font-weight: 650; text-decoration: none;
  }
  .skip:focus { left: 0 }


html { scroll-behavior: smooth }
body {
  background: var(--bg); color: var(--ink);
  font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; margin: 0;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px }
a { color: inherit }
h1, h2, h3 { letter-spacing: -.021em; line-height: 1.14; margin: 0 }
h1 { font-size: clamp(38px, 6.2vw, 62px); font-weight: 800 }
h2 { font-size: clamp(27px, 3.6vw, 37px); font-weight: 750 }
h3 { font-size: 19px; font-weight: 700; line-height: 1.3 }
p { margin: 0 }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--amber-ink);
}

nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px }
nav .links { display: flex; gap: 26px; align-items: center; font-size: 15px }
nav a { text-decoration: none; color: var(--body) }
nav a:hover { color: var(--ink) }
@media (max-width: 700px) { nav .links a:not(.btn) { display: none } }

.logo { font-weight: 800; letter-spacing: -.03em; font-size: 19px; text-decoration: none }
/* One wordmark colour on every ground. The old split (--amber-ink on white,
   --amber on the dark hero) died with the amber palette: the primary carries
   enough ink for the bold wordmark on white and clears 5.8:1 on the dark
   sections. */
.logo span { color: var(--primary) }

.btn {
  display: inline-block; min-height: var(--tap); padding: 13px 22px;
  border-radius: var(--r); font-weight: 650; font-size: 16px;
  text-decoration: none; border: 1.5px solid transparent; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease;
}
/* The primary action is --primary everywhere — capture's submit bar and every
   shadcn button in the office already are. The hover mixes toward ink instead
   of hard-coding a darker hex, so it follows the next TweakCN paste; the old
   ink-to-#000 hover was invisible, which read as a dead button. */
.btn-primary { background: var(--primary); color: var(--primary-foreground) }
.btn-primary:hover { background: color-mix(in oklch, var(--primary) 85%, var(--foreground)) }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: #fff }
.btn-ghost:hover { border-color: var(--ink) }
nav .btn { min-height: 0; padding: 9px 16px; font-size: 15px }

footer { padding: 52px 0 30px; font-size: 14px; color: var(--body); border-top: 1px solid var(--line); background: var(--bg-2) }
.fgrid { display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: 44px; align-items: start }
.fbrand p { margin: 12px 0 0; max-width: 30ch; line-height: 1.55; color: var(--body) }
.fcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 26px 18px }
.fcol { display: flex; flex-direction: column; gap: 9px }
/* --muted-foreground, never --muted: in this palette --muted is a SURFACE
   (near-white), and headings coloured with it vanish. That shipped once. */
.fcol h3 { margin: 0 0 3px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground) }
.fcol a { color: var(--body); text-decoration: none }
.fcol a:hover { color: var(--ink) }
.fbase { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted-foreground) }
@media (max-width: 900px) {
  .fgrid { grid-template-columns: 1fr; gap: 34px }
}