/* Geist and Geist Mono are bundled locally (SIL Open Font License, see fonts/OFL.txt) */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Formula — shared tokens and components.
   Follows exact.agency: a pale atmospheric field (cyan, lilac, peach) under film grain,
   white glass, ink pill buttons, mono camera labels. Dark is Exact's night field. */

:root {
  --ink-rgb: 15, 22, 38;
  --shadow-rgb: 20, 38, 80;

  --bg: #EDF1F7;
  --bg-2: #E6EAF1;
  --bg-3: #E0E4EA;
  --fg: #0F1626;
  --fg-2: #313A4E;
  --muted: #5A667E;
  --faint: rgba(15, 22, 38, 0.42);
  --line: rgba(15, 22, 38, 0.08);
  --line-2: rgba(15, 22, 38, 0.14);
  --line-3: rgba(15, 22, 38, 0.26);

  --glass: rgba(255, 255, 255, 0.46);
  --glass-2: rgba(255, 255, 255, 0.42);
  --glass-3: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.62);
  --glass-top: rgba(255, 255, 255, 0.88);
  --surface: var(--glass);
  --surface-solid: #F7F9FC;
  --surface-sunk: rgba(15, 22, 38, 0.04);
  --glass-edge: var(--glass-line);
  --field-input: rgba(255, 255, 255, 0.66);

  --primary: #3074CC;
  --primary-hover: #2963AD;
  --primary-ink: #2963AD;
  --primary-soft: #D6E2F2;
  --on-primary: #FFFFFF;
  --accent: #3074CC;
  --accent-rgb: 48, 116, 204;
  --on-accent: #FFFFFF;

  --rec: #E5131D;
  --rec-ink: #B72F47;
  --rec-soft: #EEDCE5;
  --ok: #0A6F4D;
  --ok-soft: #D2EAE9;
  --warn: #7E6012;
  --warn-soft: #EFEBDE;

  --grain: 0.05;
  --field: linear-gradient(180deg, #EEF3F8 0%, #E9EEF6 40%, #F2EFF3 100%);
  --f1: rgba(104, 214, 236, 0.50);
  --f1b: rgba(126, 171, 255, 0.26);
  --f2: rgba(171, 138, 255, 0.36);
  --f2b: rgba(214, 166, 255, 0.20);
  --f3: rgba(255, 166, 128, 0.42);
  --f3b: rgba(255, 152, 190, 0.22);
  --f4: rgba(120, 205, 235, 0.34);
  --f-vig: rgba(20, 34, 64, 0.14);

  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 180ms;
  --shadow-float: 0 10px 30px -14px rgba(var(--shadow-rgb), 0.8);
  --shadow-panel: 0 30px 60px -30px rgba(var(--shadow-rgb), 0.45);
  --shadow-glass: inset 0 1px 0 var(--glass-top), 0 22px 50px -34px rgba(var(--shadow-rgb), 0.4);
  --shadow-cta: 0 24px 60px -30px rgba(var(--shadow-rgb), 0.9);

  color-scheme: light;
}

[data-theme="dark"] {
  --ink-rgb: 231, 236, 247;
  --shadow-rgb: 0, 0, 0;

  --bg: #0B1020;
  --bg-2: #10162A;
  --bg-3: #161D35;
  --fg: #E7ECF7;
  --fg-2: #C4CBDC;
  --muted: #8C96AE;
  --faint: rgba(231, 236, 247, 0.42);
  --line: rgba(231, 236, 247, 0.08);
  --line-2: rgba(231, 236, 247, 0.14);
  --line-3: rgba(231, 236, 247, 0.26);

  --glass: rgba(255, 255, 255, 0.075);
  --glass-2: rgba(255, 255, 255, 0.08);
  --glass-3: rgba(255, 255, 255, 0.12);
  --glass-line: rgba(255, 255, 255, 0.13);
  --glass-top: rgba(255, 255, 255, 0.16);
  --surface-solid: #121931;
  --surface-sunk: rgba(255, 255, 255, 0.04);
  --field-input: rgba(255, 255, 255, 0.05);

  --primary: #4F8BDB;
  --primary-hover: #6A9DE2;
  --primary-ink: #8FB6E8;
  --primary-soft: rgba(143, 182, 232, 0.16);
  --accent: #8FB6E8;
  --accent-rgb: 143, 182, 232;
  --on-accent: #0B1020;

  --rec-ink: #FF8A92;
  --rec-soft: rgba(229, 19, 29, 0.18);
  --ok: #4ADE9F;
  --ok-soft: rgba(16, 185, 129, 0.15);
  --warn: #FBC54A;
  --warn-soft: rgba(251, 191, 36, 0.13);

  --grain: 0.085;
  --field: linear-gradient(180deg, #0B1020 0%, #090D1A 42%, #120E1E 100%);
  --f1: rgba(56, 189, 248, 0.34);
  --f1b: rgba(99, 140, 255, 0.20);
  --f2: rgba(167, 139, 250, 0.40);
  --f2b: rgba(190, 140, 255, 0.22);
  --f3: rgba(251, 146, 60, 0.26);
  --f3b: rgba(244, 114, 182, 0.20);
  --f4: rgba(94, 214, 235, 0.24);
  --f-vig: rgba(0, 0, 0, 0.50);

  color-scheme: dark;
}

/* Black: the dark theme on true black, with the colour field switched off (the Exact site's third mode).
   Surfaces lose their navy and the glass is a shade quieter, so panels read as layers of black. */
:root.theme-black[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #0A0A0B;
  --bg-3: #121214;
  --surface-solid: #0E0E10;
  --surface-sunk: rgba(255, 255, 255, 0.035);
  --field-input: rgba(255, 255, 255, 0.045);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.06);
  --glass-3: rgba(255, 255, 255, 0.1);
  --glass-line: rgba(255, 255, 255, 0.12);
  --glass-top: rgba(255, 255, 255, 0.14);
  --on-accent: #000000;
  --field: #000000;
  --f1: transparent;
  --f1b: transparent;
  --f2: transparent;
  --f2b: transparent;
  --f3: transparent;
  --f3b: transparent;
  --f4: transparent;
  --f-vig: transparent;
}
:root.theme-black[data-theme="dark"],
:root.theme-black[data-theme="dark"] body { background: #000000; }
/* The theme button's disc fills in on black */
:root.theme-black [data-theme-toggle] circle { fill: currentColor; }


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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Film grain over everything, as on exact.agency */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The atmosphere: Exact's four soft light fields and a vignette, fixed behind the page */
.atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--field);
}
.atmos::before,
.atmos::after {
  content: "";
  position: absolute;
  inset: -10%;
  animation: atmos-drift 46s ease-in-out infinite alternate;
}
.atmos::before {
  background:
    radial-gradient(circle 36vw at 24% 18%, var(--f1) 0%, var(--f1b) 42%, transparent 72%),
    radial-gradient(circle 32vw at 82% 22%, var(--f2) 0%, var(--f2b) 45%, transparent 70%);
}
.atmos::after {
  background:
    radial-gradient(39vw 35vw at 26% 92%, var(--f3) 0%, var(--f3b) 40%, transparent 70%),
    radial-gradient(circle 28vw at 80% 86%, var(--f4) 0%, transparent 68%),
    radial-gradient(120% 80% at 50% 40%, transparent 40%, var(--f-vig) 100%);
  animation-duration: 58s;
  animation-direction: alternate-reverse;
}
@keyframes atmos-drift {
  to { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection { background: var(--primary-soft); }

.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-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.mono { font-family: var(--font-mono); }

/* Camera labels — Exact's "[ 24 FPS ]" voice */
.hud {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--faint);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Eyebrow — dot + tracked mono, as above Exact's headlines */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), 0.62);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* The logo: a white disc with the V cut out of it. The hole is real, so whatever is behind shows through. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--fg);
  min-height: 44px;
}
.logo {
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
  fill: #FFFFFF;
  filter: drop-shadow(0 1px 1px rgba(var(--ink-rgb), 0.16)) drop-shadow(0 8px 16px rgba(var(--shadow-rgb), 0.22));
}
[data-theme="dark"] .logo { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5)); }
.wordmark__mark { display: block; width: 28px; height: auto; fill: currentColor; }
/* The Formula ring, as the Formula app draws its mark: a circle whose band is 16.5% of its size,
   swept violet → blue → cyan → violet from the top so the seam never shows */
.ring-mark {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #8C5CFF, #4D80FA, #29CCDB, #8C5CFF);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(67% - 0.5px), #000 67%);
  mask: radial-gradient(farthest-side, transparent calc(67% - 0.5px), #000 67%);
}
/* The ring in white, as the footer shows it: the shadow sits on the ring's parent, since a mask would cut it off */
.ring-mark--white { background: #FFFFFF; }
.footer__mark { filter: drop-shadow(0 1px 1px rgba(var(--ink-rgb), 0.16)) drop-shadow(0 8px 16px rgba(var(--shadow-rgb), 0.22)); }
.footer__mark .ring-mark { width: 30px; height: 30px; }
[data-theme="dark"] .footer__mark { filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5)); }
/* A wordmark set as text: Geist Mono, capitals, medium, widely spaced ("F O R M U L A"). Nothing uses it now:
   the logo is the ring */
.wordmark__text {
  display: block;
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Buttons — Exact's ink pills, mono and tracked */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--fg);
  color: var(--bg);
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn:focus-visible { outline-offset: 3px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* The light sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.btn:hover:not([disabled])::after { transform: translateX(420%) skewX(-18deg); transition: transform 1s var(--ease); }

.btn--primary, .btn--dark { background: var(--fg); color: var(--bg); box-shadow: var(--shadow-cta); }
.btn--primary:hover:not([disabled]), .btn--dark:hover:not([disabled]) { background: rgba(var(--ink-rgb), 0.88); }

/* Arrow cell, split from the label by a hairline (Exact's "START A PROJECT | ↗") */
.btn--kc { padding: 0 0 0 24px; gap: 0; }
.btn__kc {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  margin-left: 18px;
  padding: 0 18px 0 15px;
  border-left: 1px solid color-mix(in srgb, var(--bg) 24%, transparent);
}
.btn__kc svg, .link-arrow svg { width: 12px; height: 12px; transition: transform .6s var(--ease); }
.btn:hover .btn__kc svg, .link-arrow:hover svg { transform: translate(2px, -2px); }

.btn--ghost {
  background: var(--glass-3);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--glass-top);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.btn--ghost::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); }
.btn--ghost:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--line-3), inset 0 1px 0 var(--glass-top); }

.btn--danger { background: var(--rec); color: #FFFFFF; }
.btn--danger:hover:not([disabled]) { background: #C40F18; }

.btn--quiet {
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
}
.btn--quiet::after { content: none; }
.btn--quiet:hover:not([disabled]) { color: var(--fg); }

.btn--sm { min-height: 38px; padding: 0 16px; font-size: 10.5px; }

.btn .key {
  display: inline-block;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid currentColor;
  opacity: 0.6;
}

/* Text link with an arrow cell (Exact's "SEE OUR WORK | ↗") */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 500 11.5px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
}
.link-arrow > span:last-child:not(:first-child) { display: inline-flex; padding-left: 12px; border-left: 1px solid rgba(var(--ink-rgb), 0.28); }
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 38px;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity .6s var(--ease);
}
.link-arrow:hover::after { opacity: 0.85; }

/* Round icon button — Exact's glass circle */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass-3);
  color: var(--fg);
  box-shadow: inset 0 1px 0 var(--glass-top), 0 6px 16px -10px rgba(var(--shadow-rgb), 0.6);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--glass-top); }
[data-theme="dark"] .icon-btn:hover { background: rgba(255, 255, 255, 0.2); }
.icon-btn svg { width: 17px; height: 17px; }

/* Glass surface */
.glass {
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-glass);
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--line);
  color: var(--fg-2);
}
.badge--review { background: var(--primary-soft); color: var(--primary-ink); }
.badge--approved { background: var(--ok-soft); color: var(--ok); }
.badge--rejected { background: var(--rec-soft); color: var(--rec-ink); }
.badge--queued { background: var(--warn-soft); color: var(--warn); }
.badge--solid { background: var(--rec); color: #FFFFFF; }

/* Live / REC dot */
.rec-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rec);
  flex: none;
}
.rec-dot--pulse { animation: rec-pulse 1.6s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: 0.25; } }

/* Panel — a glass card with a mono label */
.panel {
  position: relative;
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-xl);
  background: var(--glass);
  box-shadow: var(--shadow-glass);
  padding: 20px;
}
.panel__legend {
  display: block;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 14px;
}

/* Form fields */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--field-input);
  color: var(--fg);
  font-size: 15px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A667E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5 12 15l5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}
.textarea { resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 4px var(--primary-soft); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}