/* ═══════════════════════════════════════════════════════════════
   Relay Me — shared marketing styles
   Ported from design/website-3. Every page loads this first, then its
   own sheet (home.css / pricing.css / docs.css / blog.css) for the
   blocks that are genuinely page-specific.

   The four mockups were standalone files and each carried its own copy
   of the tokens, reset, nav, buttons and footer. That duplication lives
   here once.

   Fonts are the system stack: website-3 links Inter and JetBrains Mono
   from Google Fonts, but this binary makes no third-party requests (see
   the package comment in main.go). --sans/--mono are the single place to
   change if the faces are ever self-hosted.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Relay Me foundation tokens. Dashboard and operator console use the same
     canvas, action, semantic and geometry values. The short aliases remain so
     page-specific styles can migrate without a flag day. */
  --rm-canvas: #1f2733;
  --rm-canvas-raised: #27303c;
  --rm-action: #2f67ff;
  --rm-action-strong: #1f50f2;
  --rm-success: #6ee7a0;
  --rm-warning: #f5b86a;
  --rm-danger: #ff7a7a;
  --rm-text: #e6eaf2;
  --rm-text-secondary: #b6bfce;
  --rm-radius-sm: 8px;
  --rm-radius: 12px;
  --rm-radius-lg: 16px;

  --dark-1: var(--rm-canvas-raised);
  --dark-2: var(--rm-canvas);
  --blue-1: var(--rm-action);
  --blue-2: var(--rm-action-strong);
  --green: var(--rm-success);

  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--sans);
  background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-2) 100%);
  color: #e6eaf2;
  min-height: 100vh;
  /* `clip` (not `hidden`) keeps overflow from creating a scroll container,
     which would otherwise break `position: sticky` deep in the tree — e.g.
     the docs sidebar. Only the x axis is clipped so the document's vertical
     scrollbar still works. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(142, 177, 255, 0.55);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── NAV ── */
.nav {
  padding: 24px 0;
  position: relative;
  z-index: 10;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(45deg, var(--blue-1) 0%, var(--blue-2) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px -6px rgba(31, 80, 242, 0.6);
  flex-shrink: 0;
}

.logo-mark svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 0.95rem;
  color: #aab3c2;
}

.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: linear-gradient(45deg, var(--blue-1) 0%, var(--blue-2) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 8px 24px -8px rgba(31, 80, 242, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(31, 80, 242, 0.7);
}

/* ── HERO primitives ── */
.hero {
  position: relative;
  padding: 80px 0 120px;
  text-align: center;
}

.glow {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(closest-side, rgba(47, 103, 255, 0.35), transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  color: #c8d0dd;
  margin-bottom: 28px;
}

/* Marks a surface that is announced but not yet available, so it reads as
   "not yet" rather than "broken". */
.badge-soon {
  color: #d8b66a;
  border-color: rgba(216, 182, 106, 0.3);
  background: rgba(216, 182, 106, 0.1);
}

.badge-recommended {
  color: #7fd089;
  border-color: rgba(110, 194, 122, 0.4);
  background: rgba(110, 194, 122, 0.12);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-1);
  box-shadow: 0 0 12px var(--blue-1);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
}

h1 .gradient {
  background: linear-gradient(45deg, var(--blue-1) 0%, var(--blue-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: #aab3c2;
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(45deg, var(--blue-1) 0%, var(--blue-2) 100%);
  color: #fff;
  box-shadow: 0 12px 30px -10px rgba(31, 80, 242, 0.6);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(31, 80, 242, 0.7);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: #e6eaf2;
  border-color: rgba(255, 255, 255, 0.1);
}

.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }

.arrow {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── SECTION HEAD ── */
.section-head {
  text-align: center;
  margin-bottom: 60px;
}

.eyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-1);
  margin-bottom: 12px;
}

.section-head h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.section-head p {
  color: #aab3c2;
  max-width: 560px;
  margin: 0 auto;
}

/* ── CTA ── */
.cta-section { padding: 80px 0 120px; }

.cta-box {
  position: relative;
  padding: 60px 40px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  overflow: hidden;
}

.cta-box::before {
  content: "";
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(closest-side, rgba(47, 103, 255, 0.25), transparent 70%);
  pointer-events: none;
}

/* Three slowly drifting, blurred dots floating behind the CTA copy. They live
   inside the box so they never escape its rounded edges. */
.cta-box::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 30%, rgba(110, 194, 255, 0.55) 0, transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(110, 130, 255, 0.5) 0, transparent 16%),
    radial-gradient(circle at 55% 80%, rgba(47, 103, 255, 0.55) 0, transparent 20%);
  filter: blur(48px);
  animation: cta-drift 18s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes cta-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  33%  { transform: translate3d( 4%,  1%, 0) scale(1.05); }
  66%  { transform: translate3d(-2%,  3%, 0) scale(0.97); }
  100% { transform: translate3d( 3%, -3%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-box::after { animation: none; }
}

.cta-box h2 {
  position: relative;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.cta-box p {
  position: relative;
  color: #aab3c2;
  max-width: 520px;
  margin: 0 auto 28px;
}

.cta-box .btn { position: relative; }

/* ── FOOTER ── */
footer {
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  color: #6b7585;
  font-size: 0.9rem;
}
.foot-brand,
.foot-links {
  display: flex;
  align-items: center;
}
.foot-brand { gap: 12px; }
.foot-brand span + span::before {
  content: "·";
  margin-right: 12px;
}
.foot-links { gap: 22px; }
.foot a {
  color: #8a93a4;
  transition: color 180ms ease, text-shadow 180ms ease;
}
.foot a:hover,
.foot a:focus-visible {
  color: #e6ecff;
  text-shadow: 0 0 14px rgba(142, 177, 255, 0.55);
}
.foot .foot-contact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: 10px;
  border: 1px solid rgba(142, 177, 255, 0.28);
  background: rgba(47, 103, 255, 0.1);
  color: #c4d6ff;
  font-weight: 600;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.foot .foot-contact:hover {
  transform: translateY(-1px);
  background: rgba(47, 103, 255, 0.18);
  border-color: rgba(142, 177, 255, 0.48);
  color: #fff;
}
.foot-contact svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── DROPDOWN MENU ── */
.pop-menu {
  position: absolute;
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  background: #2a3340;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
  animation: menuIn 0.15s ease;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.pop-menu.open { display: block; }
.pop-menu .item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 0.88rem;
  color: #c8d0dd;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}
.pop-menu .item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.pop-menu .item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pop-menu .sep { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 4px 2px; }
.pop-menu .label { padding: 6px 10px 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7585; }

/* ── TOAST ── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 16px; border-radius: 10px;
  background: #2a3340; border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff; font-size: 0.88rem; font-weight: 500;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 300;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 14px; height: 14px; stroke: var(--green); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── MOBILE NAV ──────────────────────────────────────────────────
   The nav collapses into a disclosure button rather than disappearing.
   The mockups were desktop comps and simply hid .nav-links below 720px,
   which left phones with no way to reach Pricing or Docs at all. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  place-items: center;
}
.nav-toggle svg {
  width: 18px; height: 18px;
  stroke: #c8d0dd; fill: none; stroke-width: 2; stroke-linecap: round;
}
.nav-toggle .close-icon { display: none; }
.nav-toggle[aria-expanded="true"] .open-icon { display: none; }
.nav-toggle[aria-expanded="true"] .close-icon { display: block; }

/* ── RESPONSIVE ── */
@media (max-width: 720px) {
  .nav-toggle { display: grid; }
  .nav-inner { flex-wrap: wrap; gap: 12px; }
  /* The CTA is the one action worth keeping in the bar itself. It keeps a
     44px height like every other target rather than shrinking to fit. */
  .nav-cta { padding: 0 16px; min-height: 44px; font-size: 0.88rem; }

  .nav-links {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 12px 4px;
    /* 44px is the minimum comfortable touch target; padding plus line-height
       gets these there without changing how they look on desktop. */
    min-height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  .nav-links a:last-child { border-bottom: none; }
}

/* Keep the bar to one row: the wordmark gives up width first, since the
   tile alone still identifies the site. */
@media (max-width: 480px) {
  .logo { font-size: 1rem; gap: 8px; min-width: 0; }
  .logo-mark { width: 30px; height: 30px; }
  .nav-inner { gap: 8px; }
  .nav-cta { padding: 0 12px; font-size: 0.84rem; }
  .nav { padding: 16px 0; }
}

@media (max-width: 600px) {
  .foot { flex-direction: column; gap: 12px; text-align: center; }
  .foot-brand { flex-direction: column; gap: 4px; }
  .foot-brand span + span::before { content: none; }
  .foot-links { flex-wrap: wrap; justify-content: center; gap: 12px 20px; }
  .foot-contact { flex-basis: 100%; justify-content: center; }
  .container { padding: 0 18px; }
  .hero { padding: 48px 0 64px; }
  .cta-section { padding: 48px 0 64px; }
  .cta-box { padding: 36px 22px; border-radius: 18px; }
  .section-head { margin-bottom: 36px; }
  /* Buttons go full-width so they are not a small target in the middle of
     a wide screen. */
  .btn { width: 100%; justify-content: center; }
  .cta-row { flex-direction: column; align-items: stretch; }
}

/* Nothing on any page may force the document wider than the screen. */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: clip; }
  pre, code { word-break: break-word; white-space: pre-wrap; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── CONSENT BANNER ──────────────────────────────────────────────
   Rendered hidden and revealed by consent.js only when there is no prior
   answer, so someone who already decided never sees it flash on load.
   Fixed to the bottom rather than covering the page: a banner that blocks
   the content is a dark pattern in the direction of "accept to continue". */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 400;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 20px;
  border-radius: 14px;
  background: #2a3340;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.consent[hidden] { display: none; }

.consent-text {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #c8d0dd;
}
.consent-text a { color: #8eb1ff; text-decoration: underline; }

.consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
/* Both buttons get the same size and weight. Making "accept" louder than
   "decline" is the pattern regulators object to, and it is not worth it. */
.consent-actions button {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e6eaf2;
  transition: background 0.15s ease;
}
.consent-actions button:hover { background: rgba(255, 255, 255, 0.1); }
.consent-actions .consent-yes {
  background: linear-gradient(45deg, var(--blue-1) 0%, var(--blue-2) 100%);
  border-color: transparent;
  color: #fff;
}

@media (max-width: 600px) {
  .consent { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .consent-actions { width: 100%; }
  .consent-actions button { flex: 1; }
}

/* ── copy buttons ───────────────────────────────────────────────────
   Shared by every "copy this" affordance (install commands, the sales
   address). copy.js owns the label and the .copied state; this only
   describes what the two states look like. */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e6eaf2;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.1); }
.copy-btn.copied {
  color: #7ee2a8;
  border-color: rgba(126, 226, 168, 0.4);
  background: rgba(126, 226, 168, 0.1);
}