/* =========================================================================
   GUIDE GATE — email sign-up layer shown over the guide until a visitor
   signs up. Built from the "Guide Landing" Claude Design file and its
   Onyx Cyan design system (tokens, base, components).

   Everything is scoped to .vcb-gate. The guide's own stylesheet uses some of
   the same custom property names (--text-primary, --text-secondary), so the
   design system's tokens must never land on :root.
   ========================================================================= */

/* --- Visibility: the head script adds html.vcb-gated before first paint --- */
.vcb-gate { display: none; }
html.vcb-gated .vcb-gate { display: block; }
html.vcb-gated,
html.vcb-gated body { overflow: hidden !important; }

/* --- Tokens (Onyx Cyan design system), scoped ---------------------------- */
.vcb-gate {
  /* Primitives */
  --cyan-600: #0098C0;
  --cyan-500: #2BB5DE;
  --cyan-400: #4DC8F0;
  --cyan-300: #8BDDFB;
  --blue-600: #2A8FD4;
  --gradient-brand: linear-gradient(135deg, #4DC8F0 0%, #2A8FD4 100%);
  --n-1000: #000000;
  --n-900: #0A0D12;
  --n-450: #6A7E92;
  --n-400: #818E9A;
  --n-300: #9EADBB;
  --n-200: #C1CCD7;
  --n-500: #66727D;
  --red-400: #EF6661;
  --glass-cyan: rgba(77, 200, 240, 0.05);
  --glass-white: rgba(255, 255, 255, 0.05);
  --glass-white-2: rgba(255, 255, 255, 0.03);
  --border-cyan: rgba(77, 200, 240, 0.14);
  --border-white: rgba(255, 255, 255, 0.07);
  --border-white-2: rgba(255, 255, 255, 0.12);
  --press-white: rgba(255, 255, 255, 0.085);

  /* Semantic */
  --text-primary: #F4F7FA;
  --text-secondary: var(--n-200);
  --text-tertiary: var(--n-300);
  --text-muted: var(--n-400);
  --text-faint: var(--n-450);
  --text-disabled: var(--n-500);
  --text-link: var(--cyan-400);
  --text-link-hover: var(--cyan-300);
  --surface: var(--n-900);
  --border-subtle: var(--border-white);
  --border-default: var(--border-white-2);
  --border-brand: var(--border-cyan);
  --action-primary: var(--cyan-400);
  --action-primary-hover: var(--cyan-300);
  --action-primary-text: var(--n-1000);
  --action-secondary: var(--glass-white);
  --action-secondary-hover: var(--press-white);
  --action-secondary-text: var(--text-primary);
  --status-danger-text: var(--red-400);
  --status-danger-bg: rgba(239, 102, 97, 0.10);
  --status-danger-border: rgba(239, 102, 97, 0.24);
  --focus-ring: var(--cyan-400);

  /* Type */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --tracking-display: -0.03em;
  --tracking-heading: -0.018em;
  --tracking-body: -0.008em;
  --tracking-mono: 0.02em;

  /* Space, radius, motion */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --duration-instant: 90ms;
  --duration-fast: 140ms;
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- Layer ---------------------------------------------------------------- */
.vcb-gate {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: #000;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.45;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
  text-align: left;
}

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

.vcb-gate h1,
.vcb-gate h2,
.vcb-gate h3,
.vcb-gate p {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.vcb-gate a { color: var(--text-link); text-decoration: none; }
.vcb-gate a:hover { color: var(--text-link-hover); }
.vcb-gate :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.vcb-gate ::selection { background: rgba(77, 200, 240, 0.3); color: #fff; }

/* Ambient wash and grain (fixed to the layer, behind content) */
.vcb-gate__wash,
.vcb-gate__grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.vcb-gate__wash {
  background:
    radial-gradient(70rem 46rem at 10% -12%, rgba(77, 200, 240, 0.22), transparent 62%),
    radial-gradient(60rem 42rem at 95% 4%, rgba(42, 143, 212, 0.20), transparent 64%),
    radial-gradient(80rem 50rem at 50% 115%, rgba(42, 143, 212, 0.14), transparent 60%),
    linear-gradient(180deg, #000 0%, #030A12 55%, #000 100%);
}

.vcb-gate__grain {
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* State switching: gate.js toggles the hidden attribute on [data-when] blocks */
.vcb-gate [hidden] { display: none !important; }

/* --- Components (Onyx Cyan) ---------------------------------------------- */
.vcb-gate .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  padding: 0 var(--space-4);
  background: var(--action-secondary);
  color: var(--action-secondary-text);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-body);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}

.vcb-gate .btn:active { transform: scale(0.985); }
.vcb-gate .btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.vcb-gate .btn--primary { background: var(--action-primary); color: var(--action-primary-text); border-color: transparent; }
.vcb-gate .btn--primary:not(:disabled):hover { background: var(--action-primary-hover); color: var(--action-primary-text); }
.vcb-gate .btn--secondary:not(:disabled):hover { background: var(--action-secondary-hover); border-color: var(--border-brand); color: var(--action-secondary-text); }
.vcb-gate .btn--sm { height: 30px; font-size: var(--text-sm); padding: 0 var(--space-3); border-radius: var(--radius-sm); }
.vcb-gate .btn--lg { height: 46px; font-size: var(--text-base); padding: 0 var(--space-5); border-radius: var(--radius-lg); }
.vcb-gate .btn--block { width: 100%; }

.vcb-gate .field { display: flex; flex-direction: column; gap: var(--space-2); }
.vcb-gate .field__label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.vcb-gate .field__error { font-size: var(--text-xs); color: var(--status-danger-text); }
.vcb-gate .field__error:empty { display: none; }

.vcb-gate .input {
  width: 100%;
  height: 38px;
  padding: 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px; /* 16px stops iOS from zooming into the field */
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.vcb-gate .input::placeholder { color: var(--text-disabled); }
.vcb-gate .input:hover { border-color: var(--border-brand); }
.vcb-gate .input:focus { border-color: var(--cyan-600); }
.vcb-gate .input[aria-invalid="true"] { border-color: var(--status-danger-text); }

.vcb-gate .choice { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-md); color: var(--text-secondary); }
.vcb-gate .choice input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--surface);
  border: 1px solid var(--border-white-2);
  border-radius: var(--radius-xs);
  display: grid;
  place-content: center;
  cursor: pointer;
}

.vcb-gate .choice input:checked { background: var(--action-primary); border-color: var(--action-primary); }
.vcb-gate .choice input:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--n-1000);
  border-bottom: 2px solid var(--n-1000);
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Alert. The design system's version has a 3px left stroke; the site uses
   even borders on every card, so this one does too. */
.vcb-gate .alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--status-danger-border);
  border-radius: var(--radius-md);
  background: var(--status-danger-bg);
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.vcb-gate .alert__title { display: block; margin-bottom: 2px; color: var(--text-primary); font-weight: 600; }

.vcb-gate .avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  color: var(--n-1000);
  display: grid;
  place-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* --- Landing layout ------------------------------------------------------- */
.vcb-gate__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--text-muted);
}

.vcb-gate__label--brand { color: var(--cyan-400); }

.vcb-gate__header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 32px;
  background: rgba(0, 0, 0, 0.72);
  border-bottom: 1px solid var(--border-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.vcb-gate__brand { font-size: 17px; font-weight: 800; letter-spacing: var(--tracking-display); }
.vcb-gate__byline { margin-left: auto; }

.vcb-gate__main {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 96px;
}

.vcb-gate__hero {
  padding-top: 88px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 64px;
  align-items: start;
}

.vcb-gate__intro { padding-top: 8px; }

.vcb-gate__title {
  margin-top: 16px !important;
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.vcb-gate__gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.vcb-gate__lede {
  max-width: 52ch;
  margin-top: 24px !important;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.vcb-gate__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border-white);
}

.vcb-gate__panel {
  scroll-margin-top: 88px;
  background: var(--glass-cyan);
  border: 1px solid var(--border-cyan);
  border-radius: var(--radius-xl);
  padding: 32px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.vcb-gate__form,
.vcb-gate__success { display: flex; flex-direction: column; gap: 20px; }

.vcb-gate__panel-title { margin-top: 10px !important; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: var(--tracking-heading); }
.vcb-gate__success .vcb-gate__panel-title { font-size: 28px; line-height: 1.22; }
.vcb-gate__panel-copy { margin-top: 8px !important; font-size: 15px; line-height: 1.55; color: var(--text-tertiary); }
.vcb-gate__strong { color: var(--text-primary); }
.vcb-gate__fine { font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.vcb-gate__fine a { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 2px; }

/* Honeypot: off-screen for people, visible to naive bots */
.vcb-gate__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vcb-gate__next { padding-top: 20px; border-top: 1px solid var(--border-white); }
.vcb-gate__next-title { font-size: 15px; font-weight: 600; letter-spacing: var(--tracking-heading); }
.vcb-gate__next-copy { margin: 6px 0 12px !important; font-size: 14px; line-height: 1.55; color: var(--text-tertiary); }

.vcb-gate__section { padding-top: 96px; }
.vcb-gate__section--first { padding-top: 112px; }
.vcb-gate__h2 { margin-top: 12px !important; font-size: 32px; font-weight: 600; line-height: 1.22; letter-spacing: var(--tracking-heading); }
.vcb-gate__body { max-width: 62ch; margin-top: 12px !important; font-size: 16px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.vcb-gate__body--after { margin-top: 20px !important; font-size: 15px; color: var(--text-tertiary); }

.vcb-gate__parts { margin-top: 32px; border-top: 1px solid var(--border-white); }
.vcb-gate__part {
  display: grid;
  grid-template-columns: 56px minmax(0, 220px) minmax(0, 1fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-white);
}

.vcb-gate__part-title { font-size: 17px; font-weight: 600; letter-spacing: var(--tracking-heading); }
.vcb-gate__part-topics { font-size: 15px; line-height: 1.55; color: var(--text-tertiary); }

.vcb-gate__arc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin-top: 32px;
}

.vcb-gate__arc-card {
  background: var(--glass-white-2);
  border: 1px solid var(--border-white);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vcb-gate__arc-name { font-size: 20px; font-weight: 600; letter-spacing: var(--tracking-heading); }
.vcb-gate__arc-job { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.vcb-gate__arc-out { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-white); font-size: 14px; line-height: 1.5; color: var(--text-tertiary); }
.vcb-gate__arc-out .vcb-gate__label { font-size: 11px; }

.vcb-gate__author {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px 64px;
  align-items: start;
  padding-top: 48px;
  border-top: 1px solid var(--border-white);
}

.vcb-gate__author-id { display: flex; gap: 20px; align-items: center; }
.vcb-gate__author-name { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: var(--tracking-display); }
.vcb-gate__author-role { margin-top: 2px; font-size: 15px; color: var(--text-tertiary); }
.vcb-gate__author-bio { max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.vcb-gate__motto { margin-top: 16px !important; font-size: 16px; font-weight: 600; letter-spacing: var(--tracking-heading); }

.vcb-gate__cta {
  background: var(--glass-white-2);
  border: 1px solid var(--border-white);
  border-radius: var(--radius-xl);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  align-items: center;
  justify-content: space-between;
}

.vcb-gate__cta-group { display: contents; }
.vcb-gate__cta-title { font-size: 26px; font-weight: 600; line-height: 1.22; letter-spacing: var(--tracking-heading); }
.vcb-gate__cta-copy { max-width: 46ch; margin-top: 8px !important; font-size: 16px; line-height: 1.6; color: var(--text-secondary); }

.vcb-gate__footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border-white);
  padding: 40px 32px 56px;
}

.vcb-gate__footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-faint);
}

.vcb-gate__footer-links { display: flex; gap: 20px; }
.vcb-gate__footer-links a { color: var(--text-tertiary); }

/* --- Small screens --------------------------------------------------------- */
@media (max-width: 640px) {
  .vcb-gate__header { padding: 12px 16px; gap: 12px; }
  .vcb-gate__byline { display: none; }
  .vcb-gate__header .btn { margin-left: auto; }
  .vcb-gate__main { padding: 0 16px 64px; }
  .vcb-gate__hero { padding-top: 48px; gap: 40px; }
  .vcb-gate__panel { padding: 24px; }
  .vcb-gate__section { padding-top: 72px; }
  .vcb-gate__part { grid-template-columns: 1fr; gap: 4px; }
  .vcb-gate__cta { padding: 28px 24px; }
  .vcb-gate__footer { padding: 32px 16px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .vcb-gate { scroll-behavior: auto; }
  .vcb-gate * { transition-duration: 0.01ms !important; }
}