/* ---- fonts.css ---- */
/* Self-hosted variable fonts (design-system/fonts, SIL OFL 1.1). The build rewrites these URLs to hashed asset paths. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/InstrumentSans-Variable.2c06538a77.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("/assets/Sora-Variable.d372f2dc5b.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-Variable.c3f7a4ab72.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens.css ---- */
/* Gybe tokens as CSS custom properties, generated from project/tokens.json (the system serves no tokens.css). Light is the default; [data-theme="dark"] switches the semantic tokens, and [data-theme="light"] restores them inside a dark ancestor. */
:root,
[data-theme="light"] {
  /* brand */
  --gybe-blue: #1a56f0;
  --harbor-navy: #0b1638;
  --lagoon: #009e92;
  --white: #ffffff;
  --blue-50: #eef3ff;
  --blue-100: #dce6ff;
  --blue-200: #b6cbff;
  --blue-300: #86a8ff;
  --blue-400: #4f7dfa;
  --blue-500: #1a56f0;
  --blue-600: #1445cc;
  --blue-700: #1137a3;
  --blue-800: #0e2a7a;
  --blue-900: #0b1638;
  --mist: #f3f6fc;
  --cloud: #e3e9f5;
  --slate: #5a6684;
  --success: #0f7f48;
  --warning: #f5a524;
  --danger: #d93a3f;

  /* semantic, light */
  --surface: #ffffff;
  --surface-alt: #f3f6fc;
  --surface-raised: #ffffff;
  --surface-hover: #f3f6fc;
  --surface-selected: #eef3ff;
  --line: #e3e9f5;
  --line-strong: #7e89a6;
  --ink: #0b1638;
  --ink-muted: #5a6684;
  --ink-disabled: #9aa3ba;
  --on-navy: #ffffff;
  --primary: #1a56f0;
  --primary-hover: #1445cc;
  --primary-active: #1137a3;
  --on-primary: #ffffff;
  --primary-soft: #eef3ff;
  --on-primary-soft: #1137a3;
  --link: #1a56f0;
  --link-hover: #1137a3;
  --focus: #1a56f0;
  --accent: #009e92;
  --accent-soft: #ecf8f7;
  --success-soft: #e2f3ea;
  --success-ink: #0c6b3c;
  --warning-soft: #fdf1d8;
  --warning-ink: #7a4b00;
  --danger-soft: #fce9ea;
  --danger-ink: #b3262c;
  --on-danger: #ffffff;
  --code-surface: #0b1638;
  --code-ink: #f3f6fc;
  --code-keyword: #86a8ff;
  --code-string: #009e92;
  --code-number: #f5a524;
  --code-comment: #8d98b8;
  --code-inline: #f3f6fc;
  --logo-ring: #1a56f0;
  --logo-sail: #0b1638;
  --logo-tip: #009e92;
  --logo-word: #0b1638;

  /* type */
  --font-display: "Sora", "Instrument Sans", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* spacing */
  --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-24: 96px;

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --radius-app-icon: 23%;

  /* depth */
  --shadow-sm: 0 1px 2px #0b16380f, 0 1px 3px #0b16381a;
  --shadow-md: 0 4px 8px #0b163814, 0 12px 28px -4px #0b163829;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #1a56f0;
  --focus-halo: 0 0 0 4px #dce6ff;

  /* size */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --row-height: 44px;
  --nav-height: 64px;
  --measure: 72ch;
  --content-max: 1200px;

  /* brand geometry */
  --sail-angle: 37.6deg;
  --pattern-opacity-mist: 0.1;
  --pattern-opacity-navy: 0.35;
}

[data-theme="dark"] {
  --surface: #0b1638;
  --surface-alt: #0f1c44;
  --surface-raised: #13214d;
  --surface-hover: #182957;
  --surface-selected: #1a2f6b;
  --line: #26355f;
  --line-strong: #6b7aa5;
  --ink: #f3f6fc;
  --ink-muted: #a9b3ce;
  --ink-disabled: #5d6a90;
  --primary-soft: #172c6e;
  --on-primary-soft: #b6cbff;
  --link: #86a8ff;
  --link-hover: #b6cbff;
  --focus: #86a8ff;
  --accent-soft: #0a3442;
  --success-soft: #0e3134;
  --success-ink: #5ed39a;
  --warning-soft: #33290f;
  --warning-ink: #f5b848;
  --danger-soft: #3a1a2c;
  --danger-ink: #ff8a8e;
  --code-surface: #070f2a;
  --code-inline: #1a2957;
  --logo-ring: #ffffff;
  --logo-sail: #009e92;
  --logo-word: #ffffff;
  --shadow-sm: 0 1px 3px #00000099;
  --shadow-md: 0 12px 28px -4px #000000b3;
  --focus-ring: 0 0 0 2px #0b1638, 0 0 0 4px #86a8ff;
  --focus-halo: 0 0 0 4px #1a2f6b;
}

/* ---- kit.css ---- */
/* Gybe components. Reads tokens.css custom properties only; every value below that is not a var() is geometry. */

body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }

/* ---------- layout helpers ---------- */
.gy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.gy-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.gy-pad { padding: var(--space-6); }
.gy-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); margin: 0; }
.gy-code { font-variant-ligatures: none; font-family: var(--font-mono); font-size: 0.875em; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--code-inline); color: var(--ink); }
.gy-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Logo ---------- */
.gy-logo { display: inline-block; vertical-align: middle; flex: none; }
.gy-logo .gy-r { fill: var(--gy-lr, var(--logo-ring)); }
.gy-logo .gy-s { fill: var(--gy-ls, var(--logo-sail)); }
.gy-logo .gy-t { fill: var(--gy-lt, var(--logo-tip)); }
.gy-logo .gy-w { fill: var(--gy-lw, var(--logo-word)); }
.gy-scheme-primary { --gy-lr: var(--gybe-blue); --gy-ls: var(--harbor-navy); --gy-lt: var(--lagoon); --gy-lw: var(--harbor-navy); }
.gy-scheme-alt { --gy-lr: var(--gybe-blue); --gy-ls: var(--lagoon); --gy-lt: var(--lagoon); --gy-lw: var(--harbor-navy); }
.gy-scheme-reversed { --gy-lr: var(--white); --gy-ls: var(--lagoon); --gy-lt: var(--lagoon); --gy-lw: var(--white); }
.gy-scheme-white { --gy-lr: var(--white); --gy-ls: var(--white); --gy-lt: var(--white); --gy-lw: var(--white); }
.gy-scheme-navy { --gy-lr: var(--harbor-navy); --gy-ls: var(--harbor-navy); --gy-lt: var(--harbor-navy); --gy-lw: var(--harbor-navy); }
.gy-scheme-black { --gy-lr: #000000; --gy-ls: #000000; --gy-lt: #000000; --gy-lw: #000000; }

/* ---------- ProductLockup ---------- */
.gy-lockup { display: inline-block; white-space: nowrap; line-height: 1; color: var(--gy-lw, var(--logo-word)); }
.gy-lockup .gy-logo { vertical-align: baseline; }
.gy-lockup__name { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.gy-lockup--compact .gy-lockup__name { font-weight: 600; }

/* ---------- SailMarker ---------- */
.gy-sail { display: inline-block; flex: none; vertical-align: -0.05em; fill: currentColor; }
.gy-tone-ink { color: var(--ink); }
.gy-tone-muted { color: var(--ink-muted); }
.gy-tone-primary { color: var(--primary); }
.gy-tone-accent { color: var(--accent); }
.gy-tone-success { color: var(--success-ink); }
.gy-tone-warning { color: var(--warning-ink); }
.gy-tone-danger { color: var(--danger-ink); }
.gy-sail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.gy-sail-list li { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); }

/* ---------- WakeLines ---------- */
.gy-wake { display: block; flex: none; }
.gy-wake .gy-wake__top { fill: var(--accent); }
.gy-wake .gy-wake__bar { fill: var(--ink); }
.gy-wake--primary .gy-wake__bar { fill: var(--primary); }
.gy-wake--animated rect { transform-box: fill-box; transform-origin: right center; animation: gy-wake 1.4s cubic-bezier(.2,.7,.2,1) infinite; }
.gy-wake--animated rect:nth-child(2) { animation-delay: .12s; }
.gy-wake--animated rect:nth-child(3) { animation-delay: .24s; }
@keyframes gy-wake { 0% { transform: scaleX(0.15); } 45% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .gy-wake--animated rect { animation: none; } }

/* ---------- Button ---------- */
.gy-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; height: var(--control-md); padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 120ms, border-color 120ms, color 120ms; }
.gy-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gy-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); }
.gy-btn--lg { height: var(--control-lg); padding: 0 var(--space-6); font-size: 16px; line-height: 24px; }
.gy-btn--block { display: flex; width: 100%; }
.gy-btn--primary { background: var(--primary); color: var(--on-primary); }
.gy-btn--primary:hover { background: var(--primary-hover); }
.gy-btn--primary:active { background: var(--primary-active); }
.gy-btn--secondary { background: var(--surface-raised); border-color: var(--line-strong); color: var(--ink); }
.gy-btn--secondary:hover { background: var(--surface-hover); }
.gy-btn--ghost { background: transparent; color: var(--link); }
.gy-btn--ghost:hover { background: var(--primary-soft); color: var(--on-primary-soft); }
.gy-btn--danger { background: var(--danger); color: var(--on-danger); }
.gy-btn--danger:hover { filter: brightness(0.9); }
.gy-btn--inverse { background: var(--white); color: var(--harbor-navy); }
.gy-btn--inverse:hover { background: var(--mist); }
.gy-btn--inverse-outline { background: transparent; border-color: var(--on-navy); color: var(--on-navy); }
.gy-btn--inverse-outline:hover { background: var(--white); color: var(--harbor-navy); }
.gy-btn--inverse:focus-visible, .gy-btn--inverse-outline:focus-visible { box-shadow: 0 0 0 2px var(--harbor-navy), 0 0 0 4px var(--white); }
.gy-btn:disabled, .gy-btn[aria-disabled="true"] { background: var(--surface-alt); border-color: var(--line); color: var(--ink-disabled); cursor: not-allowed; }
.gy-btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- Fields ---------- */
.gy-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gy-field__label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.gy-field__optional { font-weight: 400; color: var(--ink-muted); }
.gy-field__hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.gy-field__error { margin: 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--danger-ink); }
.gy-control { position: relative; display: flex; align-items: center; }
.gy-input, .gy-select { box-sizing: border-box; width: 100%; height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 20px; transition: border-color 120ms, box-shadow 120ms; }
.gy-input::placeholder { color: var(--ink-muted); opacity: 1; }
.gy-input:hover, .gy-select:hover { border-color: var(--ink-muted); }
.gy-input:focus, .gy-select:focus { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus), var(--focus-halo); }
.gy-input--sm, .gy-select--sm { height: var(--control-sm); }
.gy-input--mono { font-family: var(--font-mono); font-size: 13px; }
.gy-input--lead { padding-left: 36px; }
.gy-control__lead { position: absolute; left: var(--space-3); width: 16px; height: 16px; color: var(--ink-muted); pointer-events: none; }
.gy-field--invalid .gy-input, .gy-field--invalid .gy-select { border-color: var(--danger-ink); }
.gy-field--invalid .gy-input:focus, .gy-field--invalid .gy-select:focus { box-shadow: inset 0 0 0 1px var(--danger-ink), 0 0 0 4px var(--danger-soft); }
.gy-input:disabled, .gy-select:disabled { background: var(--surface-alt); border-color: var(--line); color: var(--ink-disabled); cursor: not-allowed; }
.gy-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.gy-control__chevron { position: absolute; right: var(--space-3); width: 16px; height: 16px; color: var(--ink-muted); pointer-events: none; }

/* ---------- Checkbox & Switch ---------- */
.gy-check, .gy-switch { position: relative; display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: 14px; line-height: 20px; color: var(--ink); }
.gy-check__input, .gy-switch__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gy-check__box { flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center; transition: background-color 120ms, border-color 120ms; }
.gy-check__box svg { width: 12px; height: 12px; color: var(--on-primary); opacity: 0; }
.gy-check:hover .gy-check__box { border-color: var(--ink-muted); }
.gy-check__input:checked + .gy-check__box, .gy-check__input:indeterminate + .gy-check__box { background: var(--primary); border-color: var(--primary); }
.gy-check__input:checked + .gy-check__box svg, .gy-check__input:indeterminate + .gy-check__box svg { opacity: 1; }
.gy-check__input:focus-visible + .gy-check__box { box-shadow: var(--focus-ring); }
.gy-check__text, .gy-switch__text { display: flex; flex-direction: column; }
.gy-check__desc, .gy-switch__desc { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.gy-switch__track { flex: none; box-sizing: border-box; position: relative; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--line-strong); transition: background-color 120ms; }
.gy-switch__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--white); box-shadow: var(--shadow-sm); transition: transform 120ms; }
.gy-switch__input:checked + .gy-switch__track { background: var(--primary); }
.gy-switch__input:checked + .gy-switch__track .gy-switch__thumb { transform: translateX(16px); }
.gy-switch__input:focus-visible + .gy-switch__track { box-shadow: var(--focus-ring); }
.gy-check--disabled, .gy-switch--disabled { cursor: not-allowed; color: var(--ink-disabled); }
.gy-check--disabled .gy-check__box, .gy-switch--disabled .gy-switch__track { opacity: .45; }

/* ---------- StatusChip ---------- */
.gy-chip { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 24px; padding: 0 10px; border-radius: var(--radius-full); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; background: var(--surface-hover); color: var(--ink-muted); }
.gy-chip--info { background: var(--primary-soft); color: var(--on-primary-soft); }
.gy-chip--success { background: var(--success-soft); color: var(--success-ink); }
.gy-chip--warning { background: var(--warning-soft); color: var(--warning-ink); }
.gy-chip--danger { background: var(--danger-soft); color: var(--danger-ink); }
.gy-chip--accent { background: var(--accent-soft); color: var(--ink); }
.gy-chip--accent .gy-sail { color: var(--accent); }

/* ---------- Alert ---------- */
.gy-alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-4); border-radius: var(--radius-md); background: var(--primary-soft); color: var(--ink); font-size: 14px; line-height: 20px; }
.gy-alert .gy-sail { margin-top: 4px; color: var(--on-primary-soft); }
.gy-alert--success { background: var(--success-soft); }
.gy-alert--success .gy-sail { color: var(--success-ink); }
.gy-alert--warning { background: var(--warning-soft); }
.gy-alert--warning .gy-sail { color: var(--warning-ink); }
.gy-alert--danger { background: var(--danger-soft); }
.gy-alert--danger .gy-sail { color: var(--danger-ink); }
.gy-alert__title { margin: 0; font-weight: 600; }
.gy-alert__body { margin: 0; }
.gy-alert__title + .gy-alert__body { margin-top: 2px; }
.gy-alert__actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.gy-alert__close { appearance: none; border: 0; background: transparent; color: var(--ink-muted); width: 28px; height: 28px; margin: -4px -4px 0 0; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.gy-alert__close:hover { color: var(--ink); }
.gy-alert__close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gy-alert__close svg { width: 16px; height: 16px; }

/* ---------- Card ---------- */
.gy-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-raised); color: var(--ink); }
.gy-card--tinted { background: var(--surface-alt); border-color: transparent; }
.gy-card--navy { background: var(--harbor-navy); border-color: transparent; color: var(--on-navy); }
[data-theme="dark"] .gy-card--navy { border-color: var(--line); }
.gy-card--navy .gy-card__desc { color: var(--cloud); }
.gy-card--navy .gy-eyebrow { color: var(--lagoon); }
.gy-card--interactive { cursor: pointer; transition: box-shadow 120ms, border-color 120ms; text-decoration: none; }
.gy-card--interactive:hover { box-shadow: var(--shadow-sm); border-color: var(--line-strong); }
.gy-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gy-card__title { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; }
.gy-card__title--lg { font-size: 22px; line-height: 30px; letter-spacing: -0.01em; }
.gy-card__desc { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gy-card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Tabs ---------- */
.gy-tabs__list { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--line); overflow-x: auto; }
.gy-tab { appearance: none; position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0; border: 0; background: transparent; font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.gy-tab:hover { color: var(--ink); }
.gy-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.gy-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); }
.gy-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.gy-tab:disabled { color: var(--ink-disabled); cursor: not-allowed; }
.gy-tab__count { font-family: var(--font-mono); font-size: 12px; line-height: 16px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-hover); color: var(--ink-muted); }
.gy-tabs__panel { padding-top: var(--space-5); }
.gy-tabs__panel:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Table ---------- */
.gy-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: auto; background: var(--surface-raised); }
.gy-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--ink); }
.gy-table th { height: 40px; padding: 0 var(--space-4); text-align: left; background: var(--surface-alt); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.gy-table td { height: var(--row-height); padding: 0 var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.gy-table tbody tr:last-child td { border-bottom: 0; }
.gy-table tbody tr:hover td { background: var(--surface-hover); }
.gy-table tbody tr[aria-selected="true"] td { background: var(--surface-selected); }
.gy-table--clickable tbody tr { cursor: pointer; }
.gy-table .gy-num { text-align: right; font-variant-numeric: tabular-nums; }
.gy-table .gy-mono { font-family: var(--font-mono); font-size: 13px; }
.gy-table__muted { color: var(--ink-muted); }
.gy-table--compact td { height: 36px; }

/* ---------- CodeBlock ---------- */
.gy-codeblock { border-radius: var(--radius-lg); background: var(--code-surface); color: var(--code-ink); overflow: hidden; border: 1px solid var(--line); }
.gy-codeblock__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 40px; padding: 0 var(--space-2) 0 var(--space-4); border-bottom: 1px solid #ffffff1f; }
.gy-codeblock__title { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--code-comment); }
.gy-codeblock__copy { appearance: none; border: 0; background: transparent; color: var(--code-ink); font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.gy-codeblock__copy:hover { background: #ffffff1a; }
.gy-codeblock__copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--blue-300); }
.gy-codeblock pre { font-variant-ligatures: none; margin: 0; padding: var(--space-4) var(--space-4); overflow: auto; font-family: var(--font-mono); font-size: 14px; line-height: 22px; tab-size: 2; }
.gy-codeblock code { font-family: inherit; }
.gy-codeblock__ln { display: inline-block; width: 2.5ch; margin-right: var(--space-4); text-align: right; color: var(--code-comment); user-select: none; }
.gy-tk-k { color: var(--code-keyword); }
.gy-tk-s { color: var(--code-string); }
.gy-tk-n { color: var(--code-number); }
.gy-tk-c { color: var(--code-comment); font-style: italic; }

/* ---------- ProgressRing ---------- */
.gy-ring { display: inline-flex; align-items: center; gap: var(--space-5); }
.gy-ring__figure { position: relative; flex: none; }
.gy-ring__figure svg { display: block; width: 100%; height: 100%; }
.gy-ring__track { fill: var(--line); }
.gy-ring__arc { fill: var(--primary); }
.gy-ring--accent .gy-ring__arc { fill: var(--accent); }
.gy-ring--success .gy-ring__arc { fill: var(--success); }
.gy-ring__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.gy-ring__text { display: flex; flex-direction: column; }
.gy-ring__title { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gy-ring__detail { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* ---------- EmptyState ---------- */
.gy-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-8) var(--space-6); }
.gy-empty--center { align-items: center; text-align: center; }
.gy-empty .gy-wake { margin-bottom: var(--space-4); }
.gy-empty__title { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); }
.gy-empty__desc { margin: 0; max-width: 44ch; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.gy-empty__actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

/* ---------- NavBar ---------- */
.gy-nav { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-8); height: var(--nav-height); padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--line); }
.gy-nav--navy { background: var(--harbor-navy); border-bottom-color: transparent; }
.gy-nav__brand { display: inline-flex; align-items: center; text-decoration: none; border-radius: var(--radius-sm); }
.gy-nav__brand:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gy-nav__links { display: flex; align-items: center; gap: var(--space-6); margin: 0 0 0 auto; padding: 0; list-style: none; }
.gy-nav__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-sm); }
.gy-nav__link:hover, .gy-nav__link[aria-current="page"] { color: var(--ink); }
.gy-nav__link .gy-sail { color: var(--accent); }
.gy-nav__link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gy-nav--navy .gy-nav__link { color: var(--cloud); }
.gy-nav--navy .gy-nav__link:hover, .gy-nav--navy .gy-nav__link[aria-current="page"] { color: var(--on-navy); }
.gy-nav--navy .gy-nav__link:focus-visible, .gy-nav--navy .gy-nav__brand:focus-visible { box-shadow: 0 0 0 2px var(--harbor-navy), 0 0 0 4px var(--white); }
.gy-nav__actions { display: flex; align-items: center; gap: var(--space-3); }

/* ---------- Hero ---------- */
.gy-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--harbor-navy); color: var(--on-navy); isolation: isolate; }
[data-theme="dark"] .gy-hero:not(.gy-hero--flush) { border: 1px solid var(--line); }
.gy-hero--light { background: var(--surface-alt); color: var(--ink); }
.gy-hero--flush { border-radius: 0; }
.gy-hero__sail { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; z-index: -1; }
.gy-hero__sail .gy-hero__l1 { fill: var(--gybe-blue); }
.gy-hero__sail .gy-hero__l2 { fill: var(--harbor-navy); }
.gy-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); max-width: 640px; padding: var(--space-12); }
.gy-hero--light .gy-hero__body { max-width: min(640px, 50%); }
.gy-hero .gy-eyebrow { color: var(--lagoon); }
.gy-hero--light .gy-eyebrow { color: var(--link); }
.gy-hero__title { margin: 0; font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.03em; }
.gy-hero__title--h1 { font-size: 44px; line-height: 50px; letter-spacing: -0.025em; }
.gy-hero__subtitle { margin: 0; max-width: 52ch; font-size: 18px; line-height: 28px; }
.gy-hero--light .gy-hero__subtitle { color: var(--ink-muted); }
.gy-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 720px) {
  .gy-hero__body { padding: var(--space-10) var(--space-6); }
  .gy-hero__title { font-size: 44px; line-height: 50px; letter-spacing: -0.025em; }
  .gy-hero__title--h1 { font-size: 32px; line-height: 38px; }
  .gy-nav__links { display: none; }
}

/* ---- site.css ---- */
/* Gybe website: site-level styles shared by every artboard. Theme tokens come from ds/gybe/tokens.css. */
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Site navigation: the hairline runs the full width on the wrapper; the bar fills the page column */
.site-nav .gy-nav { width: 100%; border-bottom: 0; background: transparent; }
.site-nav__menu-toggle { display: none; }
.site-nav__panel { display: none; }
@media (max-width: 720px) {
  .site-nav__menu-toggle { display: inline-flex; }
  .site-nav__panel { display: flex; }
}

/* Active page link: a Gybe Blue underline on the bar's bottom edge instead of the sail marker */
.site-nav .gy-nav > nav { align-self: stretch; display: flex; }
.site-nav .gy-nav__links { align-items: stretch; }
.site-nav .gy-nav__links > li { display: flex; }
.site-nav .gy-nav__link { position: relative; }
.site-nav .gy-nav__link .gy-sail { display: none; }
.site-nav .gy-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--primary); }

/* Hero: on narrow screens the sail becomes a corner below the actions, so text and buttons stay on navy */
@media (max-width: 960px) {
  .gy-hero__body { padding-bottom: 112px; }
  .gy-hero__sail { height: 128px; }
}

/* Framework architecture diagram: full width at every size, four modules on a phone */
.fw-diagram { display: grid; grid-template-columns: 132px repeat(5, minmax(0, 1fr)); gap: 8px; }
.fw-diagram__module { font-family: var(--font-display); font-size: 16px; line-height: 24px; font-weight: 600; padding: 0 4px; }
.fw-diagram__layer { display: flex; flex-direction: column; }
.fw-diagram__tech { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.fw-diagram__block { display: block; box-sizing: border-box; height: 52px; border-radius: 8px; }
@media (max-width: 720px) {
  .fw-diagram { grid-template-columns: 56px repeat(4, minmax(0, 1fr)); gap: 6px; }
  .fw-diagram__wide { display: none; }
  .fw-diagram__module { font-size: 12px; line-height: 16px; padding: 0; }
  .fw-diagram__layer { font-size: 12px; line-height: 16px; }
  .fw-diagram__block { height: 36px; border-radius: 6px; }
  .fw-diagram__notes .fw-diagram__gap:not(:first-child), .fw-diagram__note-new { display: none; }
  .fw-diagram__note-slice { grid-column: 2 / -1; }
}

/* LogicBuilder illustrations, in the redesigned editor's language: numbered steps on a rail, variable path chips, function boxes, result types */
.lb-steps { position: relative; display: flex; flex-direction: column; }
.lb-rail { position: absolute; width: 1.5px; background: var(--line-strong); }
.lb-num { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: none; width: 24px; height: 24px; border-radius: 9999px; border: 1.5px solid var(--line-strong); background: var(--surface-raised); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); }
.lb-num--sm { width: 20px; height: 20px; }
.lb-num--add { border-style: dashed; color: var(--link); }
.lb-chip { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--tint-line); background: var(--tint); color: var(--ink); font: inherit; white-space: nowrap; }
.lb-chip svg { flex: none; }
.lb-chip strong { font-weight: 600; }
.lb-chip--sm { height: 24px; padding: 0 8px; gap: 4px; }
.lb-chip--open { background: var(--primary-soft); border-color: var(--primary); color: var(--on-primary-soft); }
.lb-sep { color: var(--ink-muted); }
.lb-op { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface-raised); font-weight: 600; color: var(--ink); white-space: nowrap; }
.lb-op--sm { height: 24px; padding: 0 8px; }
.lb-word { color: var(--ink-muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.lb-type { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-raised); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink); white-space: nowrap; }
.lb-fx { font-family: var(--font-display); font-style: italic; font-weight: 600; }
.lb-fn { color: var(--link); }
/* Compact step lists (home card, AI section, DocumentBuilder properties): the number keeps its own column, wrapped content stays beside it, and each step draws its own connector to the next */
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.lb-row > .lb-num { margin-top: 2px; }
.lb-row:not(:last-child)::before { content: ""; position: absolute; left: 9.25px; top: 12px; bottom: -20px; width: 1.5px; background: var(--line-strong); }
.lb-row__body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.lb-row__body > * { max-width: 100%; }
.lb-row__body .lb-chip { min-width: 0; }
.lb-row__body .lb-chip strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Larger step list for the phone version of the editor: 24px numbers, 32px controls, 12px between steps */
.lb-list--lg { gap: 12px; }
.lb-row--lg { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
.lb-row--lg > .lb-num { margin-top: 4px; }
.lb-row--lg:not(:last-child)::before { left: 11.25px; top: 16px; bottom: -28px; }

/* LogicBuilder page: the full editor on wider screens, the phone version at 720px and below */
.lb-editor-compact { display: none; }
@media (max-width: 720px) {
  .lb-editor-wide { display: none; }
  .lb-editor-compact { display: block; }
}

/* Illustration tints that follow the theme */
:root,
[data-theme="light"] {
  color-scheme: light;
  --tint-strong: #dce6ff;
  --tint: #eef3ff;
  --tint-plain: #ffffff;
  --tint-muted: #e3e9f5;
  --tint-line: #b6cbff;
  --slice-1: #1a56f0;
  --slice-2: #1445cc;
  --slice-3: #1137a3;
  --slice-4: #0b1638;
}

[data-theme="dark"] {
  color-scheme: dark;
  --tint-strong: #22408f;
  --tint: #172c6e;
  --tint-plain: #13214d;
  --tint-muted: #26355f;
  --tint-line: #34509f;
  --slice-1: #4f7dfa;
  --slice-2: #1a56f0;
  --slice-3: #1445cc;
  --slice-4: #1137a3;
}

/* Email signup feedback: short, decisive entrances (200 ms ease-out); with reduced motion, fades without movement */
@keyframes site-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes site-sail-in { from { opacity: 0; transform: translateX(-10px) rotate(-12deg); } to { opacity: 1; transform: none; } }
.site-rise { animation: site-rise 200ms ease-out both; }
.site-rise--2 { animation-delay: 60ms; }
.site-rise--3 { animation-delay: 120ms; }
.site-sail-in { animation: site-sail-in 240ms ease-out 80ms both; }
@keyframes site-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes site-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .site-rise, .site-sail-in { animation: site-fade 240ms ease-out both; }
  .site-rise--2 { animation-delay: 80ms; }
  .site-rise--3 { animation-delay: 160ms; }
  .site-sail-in { animation-delay: 80ms; }
  .gy-wake--animated { animation: site-pulse 1.2s ease-in-out infinite; }
}

/* ---- layout.css ---- */
/* Page layout and the site's recurring patterns. Values mirror the inline styles in design-source/*.dc.html (HANDOFF §3–§5). */

[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { padding-bottom: 8px; }

/* Code blocks scroll sideways on narrow screens, so their <pre> takes keyboard focus. */
.gy-codeblock pre:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue-300); }

/* site.css colours every link; keep the kit's button label colours on hover. */
.gy-btn--primary:hover, .gy-btn--primary:active { color: var(--on-primary); }
.gy-btn--secondary:hover { color: var(--ink); }

.skip-link { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; outline: none; box-shadow: var(--focus-ring), var(--shadow-md); }
.skip-link:hover { color: var(--ink); }

/* ---------- Site navigation (HANDOFF §5.1) ---------- */
.site-nav { position: relative; z-index: 20; font-family: var(--font-sans); color: var(--ink); background: var(--surface); border-bottom: 1px solid var(--line); }
.site-nav__bar { max-width: 1248px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.site-nav__actions { display: flex; align-items: center; gap: 4px; padding-right: 12px; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: inline; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }
.site-nav__panel { position: absolute; left: 0; right: 0; top: 100%; box-sizing: border-box; padding: 8px 12px 16px; flex-direction: column; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); }
.site-nav__item { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 8px; font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; color: var(--ink); background: transparent; }
.site-nav__item:hover { color: var(--ink); background: var(--surface-hover); }
.site-nav__item[aria-current="page"] { background: var(--surface-selected); font-weight: 600; }
.site-nav__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Page column and sections (HANDOFF §3.3) ---------- */
.page-col { max-width: 1248px; box-sizing: border-box; margin: 0 auto; padding: 0 24px; }
.hero-wrap { padding-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.section { max-width: 1248px; box-sizing: border-box; margin: 0 auto; padding: 96px 24px 0; }
.section--illustration { padding-top: 48px; }
.section--utility { padding-top: 48px; }
.section--stack { display: flex; flex-direction: column; gap: 48px; }
.section--tight { gap: 40px; }
.section-header { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }

.title-2 { margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.title-3 { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.title-4 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 600; }
.lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); max-width: 62ch; }
.text-muted { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.text-small { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 300px), 100%), 1fr)); gap: 24px; }
.feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 48px 64px; align-items: center; }

/* Step cards (StepCard) */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; }
.step-num { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 500; color: var(--link); }

/* Home product cards (ProductCard) */
.product-card__text { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.product-card__cta { margin-top: auto; padding-top: 8px; }

/* Home platform list */
.platform { border-top: 1px solid var(--line); padding-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px 64px; align-items: start; }
.platform__list { margin: 0; display: flex; flex-direction: column; }
.platform__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.platform__row--last { border-bottom: 0; }
.platform__row > dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.platform__row > dd.platform__next { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
.platform__detail { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* Framework page */
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--primary-soft); color: var(--on-primary-soft); }
.and-more { margin: -16px 0 0; font-family: var(--font-display); font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink-muted); }
.cross-link { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; }
.cross-link > p { margin: 0; flex: 1 1 360px; font-size: 16px; line-height: 24px; }
.cross-link__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Illustrations (HANDOFF §3.3, §6.4) ---------- */
.stage { border-radius: 12px; background: var(--surface-alt); padding: clamp(16px, 3vw, 40px); }
.stage--clip { overflow: hidden; }
.stage--compact { padding: clamp(20px, 3vw, 32px); }
.window { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); overflow: hidden; }
.fit__inner { transform-origin: 0 0; }
[inert] { cursor: default; }

/* ---------- Email signup band (HANDOFF §5.2, §6.2) ---------- */
.notify { background: var(--surface-alt); border-radius: 12px; padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; justify-content: space-between; }
.notify__intro { flex: 1 1 420px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.notify__action { flex: 1 1 380px; min-width: 0; max-width: 520px; display: flex; flex-direction: column; gap: 24px; }
.notify__wake { align-self: flex-end; }
.notify__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin: 0; }
.notify__caption { margin: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
/* Turnstile runs invisibly; its box only takes space when it needs the visitor to interact. */
.notify__turnstile { flex: 1 1 100%; min-width: 0; }
.notify__turnstile:not(.is-visible) { height: 0; margin-top: -12px; overflow: hidden; }
.panel, .notify__done { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--line); }
.panel--roomy { gap: 16px; }
.notify__done-head { display: flex; align-items: center; gap: 12px; }
.notify__badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 9999px; background: var(--accent-soft); }
.notify__email { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- Footer (HANDOFF §5.3) ---------- */
.site-footer { max-width: 1248px; box-sizing: border-box; margin: 0 auto; padding: 64px 24px 40px; font-family: var(--font-sans); color: var(--ink); }
.site-footer__top { border-top: 1px solid var(--line); padding-top: 40px; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.site-footer__brand > p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.site-footer__logo { display: inline-flex; align-self: flex-start; border-radius: var(--radius-sm); }
.site-footer__logo:focus-visible, .site-footer__group a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 64px; }
.site-footer__group { display: flex; flex-direction: column; gap: 12px; }
.site-footer__group > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 500; }
.site-footer__group a { text-decoration: none; }
.site-footer__legal { margin: 40px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); }