/* OFL-1.1, unchanged pinned binaries and licenses: docs/design/fonts.json. */
@font-face {
  font-family: "Archivo";
  src: url("/design/fonts/archivo-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/design/fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/design/fonts/jetbrains-mono-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* weneed design tokens v1.2 — single source of truth.
   Semantic names follow shadcn/ui so components pick them up unchanged.
   Rule: product code uses semantic tokens only. Primitives exist to define them. */

/* Offline adaptation: no remote font request. Supply reviewed self-hosted fonts separately. */

:root {
  /* Primitives — neutral */
  --wn-ink: #0a0a0a;
  --wn-neutral-900: #171717;
  --wn-neutral-800: #262626;
  --wn-neutral-700: #404040;
  --wn-neutral-600: #525252;
  --wn-neutral-500: #737373;
  --wn-neutral-400: #a3a3a3;
  --wn-neutral-300: #d4d4d4;
  --wn-neutral-200: #e5e5e5;
  --wn-neutral-100: #f0f0f0;
  --wn-paper: #fafafa;
  --wn-white: #ffffff;

  /* Primitives — functional */
  --wn-success-500: #23a15c; /* indicator */
  --wn-success-700: #1e7b45; /* text */
  --wn-success-50: #eef7f1;
  --wn-warning-400: #e5b700; /* indicator */
  --wn-warning-800: #765600; /* text */
  --wn-warning-50: #fff7d6;
  --wn-error-500: #e23b2e; /* indicator */
  --wn-error-600: #c4291c; /* text */
  --wn-error-50: #fcefed;

  /* Primitives — brand accent (never a state, never the logo) */
  --wn-lavender-600: #6b4fa8;
  --wn-lavender-700: #4f3a80;
  --wn-lavender-200: #dcd2f2;

  /* Semantic — surfaces & text */
  --background: var(--wn-paper);
  --foreground: var(--wn-ink);
  --card: var(--wn-white);
  --card-foreground: var(--wn-ink);
  --popover: var(--wn-white);
  --popover-foreground: var(--wn-ink);
  --muted: var(--wn-neutral-100);
  --muted-foreground: var(--wn-neutral-600);
  --border: var(--wn-neutral-200);
  --rule: var(--wn-neutral-300);
  --input: var(--wn-neutral-300);
  --ring: var(--wn-lavender-600);

  /* Semantic — brand accent: focus, links, marketing highlights */
  --brand-accent: var(--wn-lavender-600);
  --brand-accent-hover: var(--wn-lavender-700);
  --brand-accent-highlight: var(--wn-lavender-200);
  --link: var(--brand-accent);

  /* Semantic — actions */
  --primary: var(--wn-ink);
  --primary-foreground: var(--wn-white);
  --secondary: var(--wn-neutral-100);
  --secondary-foreground: var(--wn-ink);
  --accent: var(--wn-neutral-100);
  --accent-foreground: var(--wn-ink);

  /* Semantic — status (maps to message states) */
  /* *-foreground-ish text colour, *-indicator for dots/bars/meters */
  --success: var(--wn-success-700); /* delivered, verified */
  --success-indicator: var(--wn-success-500);
  --success-surface: var(--wn-success-50);
  --warning: var(--wn-warning-800); /* deferred, pending DNS, near cap */
  --warning-indicator: var(--wn-warning-400);
  --warning-surface: var(--wn-warning-50);
  --destructive: var(--wn-error-600); /* bounced, complained, failed */
  --destructive-indicator: var(--wn-error-500);
  --destructive-surface: var(--wn-error-50);
  --destructive-foreground: var(--wn-white);

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-display: 96px;
  --leading-display: 0.9;
  --tracking-display: -0.045em;
  --text-h1: 48px;
  --leading-h1: 1.05;
  --tracking-h1: -0.03em;
  --text-h2: 28px;
  --leading-h2: 1.2;
  --tracking-h2: -0.02em;
  --text-h3: 18px;
  --leading-h3: 1.3;
  --text-body: 15px;
  --leading-body: 1.5;
  --text-small: 13px;
  --leading-small: 1.45;
  --text-label: 11px;
  --tracking-label: 0.24em;
  --text-code: 13px;

  /* Space — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Shape — sharp by default */
  --radius: 4px; /* controls, tags */
  --radius-none: 0px; /* cards, tables, panels */
  --border-width: 1px;
}

.dark {
  --background: var(--wn-ink);
  --foreground: var(--wn-neutral-100);
  --card: var(--wn-neutral-900);
  --card-foreground: var(--wn-neutral-100);
  --popover: var(--wn-neutral-900);
  --popover-foreground: var(--wn-neutral-100);
  --muted: var(--wn-neutral-800);
  --muted-foreground: var(--wn-neutral-400);
  --border: var(--wn-neutral-800);
  --rule: var(--wn-neutral-700);
  --input: var(--wn-neutral-700);
  --ring: #a58fe0;
  --brand-accent: #a58fe0;
  --brand-accent-hover: #c2b3ee;
  --brand-accent-highlight: #3a2d5c;
  --link: var(--brand-accent);
  --primary: var(--wn-white);
  --primary-foreground: var(--wn-ink);
  --secondary: var(--wn-neutral-800);
  --secondary-foreground: var(--wn-neutral-100);
  --accent: var(--wn-neutral-800);
  --accent-foreground: var(--wn-neutral-100);
  --success: #5fc48a;
  --success-indicator: #34c26f;
  --success-surface: #10261a;
  --warning: #f2cf4a;
  --warning-indicator: #f2c200;
  --warning-surface: #2a2206;
  --destructive: #f2766b;
  --destructive-indicator: #ef4a3d;
  --destructive-surface: #2c1210;
}

/* Shared EJS foundation. designStyles loads fonts and tokens first; apply wn to the owner. */
.wn {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.wn *,
.wn *::before,
.wn *::after {
  box-sizing: border-box;
}
.wn :focus-visible {
  outline: calc(var(--border-width) * 2) solid var(--ring);
  outline-offset: var(--border-width);
}
.wn a {
  color: var(--link);
  text-underline-offset: 0.2em;
}
.wn a:hover {
  color: var(--brand-accent-hover);
}
.wn h1 {
  font-size: clamp(var(--text-h2), 5vw, var(--text-h1));
  line-height: var(--leading-h1);
  font-weight: 800;
  letter-spacing: var(--tracking-h1);
  overflow-wrap: anywhere;
}
.wn h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: 700;
}
.wn code,
.wn pre,
.wn-mono {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  overflow-wrap: anywhere;
}
.wn pre {
  max-width: 100%;
  overflow-x: auto;
}
.wn-brand {
  display: inline-flex;
  min-width: calc(var(--space-24));
  color: var(--foreground);
  gap: 0;
  line-height: 1;
  padding: var(--space-1);
  white-space: nowrap;
}
.wn-brand-parent {
  font-weight: 900;
  letter-spacing: var(--tracking-h1);
}
.wn-brand-extension {
  font-weight: 500;
}
.dark .wn-brand {
  color: var(--primary);
}
.wn-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-1));
  max-width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--primary);
  color: var(--primary-foreground);
  border: var(--border-width) solid var(--primary);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: normal;
}
.wn-button-secondary {
  background: var(--card);
  color: var(--card-foreground);
  border-color: var(--muted-foreground);
}
.wn-button-destructive {
  background: var(--card);
  color: var(--destructive);
  border-color: var(--destructive);
}
/* A link styled as a button keeps the button's colours, not the link colour and underline. */
.wn a.wn-button {
  color: var(--primary-foreground);
  text-decoration: none;
}
.wn a.wn-button-secondary {
  color: var(--card-foreground);
}
.wn a.wn-button-destructive {
  color: var(--destructive);
}
.wn-button-sm {
  min-height: var(--space-8);
}
.wn-button-lg {
  min-height: calc(var(--space-8) + var(--space-3));
}
.wn-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.wn-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-4);
}
.wn-field label {
  font-weight: 600;
}
.wn-field input,
.wn-field select,
.wn-field textarea {
  width: 100%;
  max-width: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--muted-foreground);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  font: inherit;
}
.wn-field textarea {
  resize: vertical;
}
.wn-muted {
  color: var(--muted-foreground);
  font-size: var(--text-small);
}
.wn-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--text-small);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.wn-status-dot {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.wn-status-success {
  color: var(--success);
  background: var(--success-surface);
}
.wn-status-success .wn-status-dot {
  background: var(--success-indicator);
}
.wn-status-warning {
  color: var(--warning);
  background: var(--warning-surface);
}
.wn-status-warning .wn-status-dot {
  background: var(--warning-indicator);
}
.wn-status-destructive {
  color: var(--destructive);
  background: var(--destructive-surface);
}
.wn-status-destructive .wn-status-dot {
  background: var(--destructive-indicator);
}
.wn-simulated {
  display: inline-block;
  border: var(--border-width) dashed var(--input);
  padding: var(--space-1) var(--space-2);
  color: var(--muted-foreground);
  border-radius: var(--radius);
  font-size: var(--text-small);
}
.wn-notice {
  padding: var(--space-4);
  border: var(--border-width) solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  overflow-wrap: anywhere;
}
.wn-notice p {
  margin-block: var(--space-2) 0;
}
.wn-notice-warning {
  background: var(--warning-surface);
  color: var(--warning);
}
.wn-notice-destructive {
  background: var(--destructive-surface);
  color: var(--destructive);
}
.wn-panel,
.wn-table {
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-none);
  background: var(--card);
}
.wn-panel {
  padding: var(--space-4);
}
.wn-table {
  border-collapse: collapse;
  width: 100%;
}
.wn-table thead {
  border-bottom: var(--border-width) solid var(--foreground);
}
.wn-table th,
.wn-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: var(--border-width) solid var(--border);
}
.wn-empty {
  text-align: left;
  padding-block: var(--space-6);
}
@media (prefers-reduced-motion: reduce) {
  .wn *,
  .wn *::before,
  .wn *::after {
    animation: none;
    transition: none;
  }
}

/* Preserve readable policy columns on narrow customer and operator screens. */
.wn-policy-table {
  min-width: 40rem;
}
.wn-policy-table th {
  min-width: 12rem;
  overflow-wrap: normal;
}

/* Native shared shell mechanics. Owning surfaces supply their layout, never authority. */
body.wn {
  margin: 0;
  min-width: 0;
}
.wn main {
  min-width: 0;
}
.wn img,
.wn svg {
  max-width: 100%;
  height: auto;
}
.wn-skip {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  transform: translateY(-200%);
  background: var(--card);
  color: var(--card-foreground);
  padding: var(--space-3);
  z-index: 10;
}
.wn-skip:focus {
  transform: none;
}
.wn-table-scroll {
  max-width: 100%;
  overflow-x: auto;
}
.wn-table-scroll:focus-visible {
  outline: calc(var(--border-width) * 2) solid var(--ring);
}
.wn-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.wn-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.wn :is(p, dd, dt, li, td, th, input, textarea) {
  overflow-wrap: anywhere;
}
.wn :is(input, select, textarea, button) {
  min-width: 0;
}
.wn .wn-button,
.wn a.wn-button:hover,
.wn a.wn-button:visited {
  color: var(--primary-foreground);
}
.wn .wn-button-secondary,
.wn a.wn-button-secondary:hover,
.wn a.wn-button-secondary:visited {
  color: var(--card-foreground);
}
.wn .wn-button-destructive,
.wn a.wn-button-destructive:hover,
.wn a.wn-button-destructive:visited {
  color: var(--destructive);
}

/* Public landing shared by customer and founder runtimes; canonical tokens own the voice. */
.site {
  padding-inline: var(--space-6);
}
.site-header,
.site main,
.site-footer {
  width: min(100%, 76rem);
  margin-inline: auto;
}
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: var(--border-width) solid var(--border);
}
.site-header > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--foreground);
  text-decoration: none;
}
.site-header .wn-brand {
  font-size: var(--text-h2);
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.site-text-link,
.site-footer > a,
.site-header nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
}
.site .wn-button {
  min-height: 44px;
}
.site-label {
  margin: 0 0 var(--space-4);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--muted-foreground);
}
.site-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: var(--space-16);
  padding-block: var(--space-24);
}
.site h1 {
  margin: 0 0 var(--space-6);
  font-size: clamp(var(--text-h1), 5.8vw, 80px);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.site-lede {
  font-size: var(--text-h3);
  max-width: 32rem;
}
.site-intro > p:not(.site-label) {
  max-width: 34rem;
}
.site-intro .wn-actions {
  margin-block: var(--space-8) var(--space-4);
  gap: var(--space-6);
}
.site-fine {
  color: var(--muted-foreground);
  font-size: var(--text-small);
}
.site-illustration {
  width: 100%;
  max-width: 32rem;
  justify-self: center;
}
.site-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}
.site-art-paper {
  fill: var(--background);
  stroke: var(--foreground);
  stroke-width: 2;
  stroke-linejoin: round;
}
.site-art-ink {
  fill: var(--foreground);
}
.site-art-line {
  fill: none;
  stroke: var(--foreground);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-art-trail {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
  stroke-linecap: round;
}
/* Loop the quiet motion without changing the authored SVG transforms.
   Reduced-motion readers keep static art. */
@media (prefers-reduced-motion: no-preference) {
  .site-illustration .site-art-envelope {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: site-envelope-float 4.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .site-illustration .site-art-application {
    animation: site-application-drift 4.2s 0.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .site-illustration .site-art-orbit {
    animation: site-orbit-breathe 4.6s ease-in-out infinite;
  }
}
@keyframes site-envelope-float {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  40% {
    transform: translateY(calc(0px - var(--space-2))) rotate(0.65deg);
  }
}
@keyframes site-application-drift {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(var(--space-1));
  }
}
@keyframes site-orbit-breathe {
  0%,
  100% {
    opacity: 1;
  }
  40% {
    opacity: 0.65;
  }
}
.site h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h3);
  line-height: var(--leading-h2);
}
.site-section {
  padding-block: var(--space-16);
  border-top: var(--border-width) solid var(--border);
}
.site-section h2 {
  margin-block: 0 var(--space-4);
  letter-spacing: var(--tracking-h2);
}
.site-section-heading {
  max-width: 38rem;
  margin-bottom: var(--space-8);
}
.site-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
}
.site-columns p:last-child {
  margin-bottom: 0;
}
.site-setup {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-setup li {
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border);
}
.site-contact p:last-child {
  margin-bottom: 0;
}
.site-honesty {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}
.site-honesty > div > p:first-child {
  margin-top: 0;
}
.site-honesty > div > p:last-child {
  margin-bottom: 0;
}
.site-questions details {
  border-bottom: var(--border-width) solid var(--border);
  padding-block: var(--space-4);
}
.site-questions summary {
  cursor: pointer;
  font-weight: 600;
  min-height: 44px;
  display: list-item;
  align-content: center;
}
.site-questions details p {
  max-width: 46rem;
}
.site-contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  padding-block: var(--space-6);
  font-size: var(--text-small);
}
.site-footer span {
  display: block;
  color: var(--muted-foreground);
}
@media (max-width: 60rem) {
  .site-hero {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding-block: var(--space-16);
  }
  .site h1 {
    font-size: clamp(var(--text-h1), 8vw, 80px);
  }
  .site-columns {
    gap: var(--space-6);
  }
  .site-honesty {
    gap: var(--space-8);
  }
}
@media (max-width: 40rem) {
  .site {
    padding-inline: var(--space-4);
  }
  .site-header {
    padding-block: var(--space-4);
  }
  .site-header nav {
    gap: var(--space-4);
  }
  .site-hero {
    padding-block: var(--space-12);
  }
  .site h1 {
    font-size: clamp(38px, 10vw, var(--text-h1));
  }
  .site-section {
    padding-block: var(--space-12);
  }
  .site-columns,
  .site-honesty {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-intro .wn-actions {
    gap: var(--space-3);
  }
}