/* Shared by /install and every /install/<client> page.
 * Extracted from install.html so seven per-client pages cannot drift from
 * the hub. Same tokens and same values as lander-v3: these are marketing
 * surfaces, served verbatim from public/, and share nothing with the app's
 * globals.css. */

/* Same tokens as lander-v3. Standalone by the same convention: these pages
   are served verbatim from public/ and share nothing with the app's CSS. */
:root {
  color-scheme: light;
  --paper: #faf7f1; --card: #fffdf8; --card-2: #f1ede4;
  --ink: #191512; --ink-soft: #57504a; --ink-faint: #8a827a;
  --line: #e2dcd0;
  --coral: #d95738; --coral-deep: #b03d22; --coral-wash: #f7e2d9; --on-coral: #fff6f0;
  --dark: #191512; --dark-card: #26211c; --dark-line: #3a342d;
  --on-dark: #f5f1e9; --on-dark-soft: #b5aca1;
  --dot: rgba(25,21,18,.13);
  --radius: 20px; --radius-sm: 13px; --pill: 999px; --max: 1200px;
  --display: "Gabarito", "Avenir Next", system-ui, sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --shadow: 0 20px 60px rgba(25,21,18,.1);
  --ease: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #171310; --card: #211c17; --card-2: #2b251f;
    --ink: #f3eee6; --ink-soft: #bfb6aa; --ink-faint: #8d857b;
    --line: #383129;
    --coral: #f4744f; --coral-deep: #d95738; --coral-wash: #45261c;
    --dark: #100d0b; --dark-card: #1d1814; --dark-line: #322b24;
    --dot: rgba(243,238,230,.11); --shadow: 0 20px 60px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #171310; --card: #211c17; --card-2: #2b251f;
  --ink: #f3eee6; --ink-soft: #bfb6aa; --ink-faint: #8d857b;
  --line: #383129;
  --coral: #f4744f; --coral-deep: #d95738; --coral-wash: #45261c;
  --dark: #100d0b; --dark-card: #1d1814; --dark-line: #322b24;
  --dot: rgba(243,238,230,.11); --shadow: 0 20px 60px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px;
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 16.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
p { margin: 0; }
section { scroll-margin-top: 92px; }

.wrap { width: min(calc(100% - 44px), var(--max)); margin-inline: auto; }

.skip-link {
  position: fixed; top: 14px; left: 14px; z-index: 60;
  padding: 10px 16px; border-radius: var(--pill);
  background: var(--ink); color: var(--paper); text-decoration: none;
  transform: translateY(-220%); transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: none; }

/* nav */
.nav-shell { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav-pill {
  pointer-events: auto; width: min(calc(100% - 28px), 880px); margin-inline: auto;
  min-height: 58px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 7px 9px 7px 20px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: color-mix(in srgb, var(--card) 84%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: box-shadow 240ms var(--ease);
}
.nav-pill.is-raised { box-shadow: var(--shadow); }
.wordmark {
  display: inline-flex; align-items: baseline;
  font-family: var(--display); font-size: 21px; font-weight: 800;
  letter-spacing: -.03em; text-decoration: none; white-space: nowrap;
}
.wordmark .dot { color: var(--coral); }
.wordmark .cursor {
  display: inline-block; width: .44em; height: .72em; margin-left: .12em;
  border-radius: 2px; background: var(--coral); transform: translateY(.05em);
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.nav-links { display: flex; gap: 22px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.signin { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.theme-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: transparent;
  color: var(--ink-soft); cursor: pointer;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.theme-btn:hover { color: var(--ink); background: var(--card-2); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .sun { display: none; }
.theme-btn[data-active-theme="dark"] .sun { display: block; }
.theme-btn[data-active-theme="dark"] .moon { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: var(--pill);
  font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-ink { background: var(--ink); color: var(--paper); }

/* hero */
.hero {
  padding: clamp(118px, 15vw, 158px) 0 clamp(40px, 5vw, 60px);
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  text-align: center;
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px;
  margin-bottom: 22px; padding: 4px 14px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  color: var(--ink-soft); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
h1 { max-width: 16ch; margin: 0 auto 22px; font-size: clamp(42px, 6.4vw, 82px); text-wrap: balance; }
h1 em { font-style: normal; color: var(--coral); }
.hero-sub { max-width: 620px; margin: 0 auto 26px; color: var(--ink-soft); font-size: clamp(17px,1.6vw,19.5px); text-wrap: balance; }
.client-line { max-width: 640px; margin: 0 auto; color: var(--ink-faint); font-size: 14px; }

.caps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.cap {
  min-height: 32px; display: inline-flex; align-items: center; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--pill);
  background: var(--card); color: var(--ink-soft);
  font-family: var(--mono); font-size: 12px;
}

/* two-servers band */
.split { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.split-half { padding: clamp(34px,4vw,52px) clamp(24px,3vw,44px); }
.split-half + .split-half { border-left: 1px solid var(--line); }
.split-half small {
  display: block; margin-bottom: 10px; color: var(--coral);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.split-half h2 { font-size: clamp(24px,2.6vw,32px); margin-bottom: 10px; max-width: 18ch; }
.split-half p { color: var(--ink-soft); font-size: 15.5px; max-width: 46ch; }

/* sections */
.sec { padding: clamp(70px, 9vw, 108px) 0; }
.sec-head { max-width: 660px; margin-bottom: clamp(32px,4vw,46px); }
.sec-kicker {
  display: block; margin-bottom: 14px; color: var(--coral);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
h2 { font-size: clamp(34px,4.4vw,54px); max-width: 16ch; letter-spacing: -.028em; }
.sec-sub { max-width: 580px; margin-top: 16px; color: var(--ink-soft); font-size: clamp(16px,1.6vw,18px); }

/* client grid */
.clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.client {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 188px; padding: 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); text-decoration: none;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.client:hover { transform: translateY(-3px); border-color: var(--coral); box-shadow: var(--shadow); }
.client-badge {
  align-self: flex-start; padding: 3px 9px;
  border-radius: var(--pill); background: var(--card-2);
  color: var(--ink-faint); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.client-badge.is-oauth { background: var(--coral-wash); color: var(--coral-deep); }
.client h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.client p { color: var(--ink-soft); font-size: 13px; flex: 1; }
.client-go { color: var(--coral); font-size: 13.5px; font-weight: 600; }

/* detail */
.detail { border-top: 1px solid var(--line); padding: clamp(34px,4vw,46px) 0; }
.detail:first-of-type { border-top: 0; }
.detail-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.detail-head h3 { font-size: clamp(24px,2.6vw,30px); font-weight: 700; letter-spacing: -.02em; }
.detail-head .badge {
  padding: 3px 9px; border-radius: var(--pill); background: var(--card-2);
  color: var(--ink-faint); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.detail-lead { max-width: 64ch; margin-bottom: 18px; color: var(--ink-soft); font-size: 15px; }
.steps { margin: 0 0 16px; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.steps li { margin-bottom: 6px; }
.steps code, .detail-lead code, .foot-note code {
  font-family: var(--mono); font-size: .88em;
  background: var(--card-2); padding: 1px 5px; border-radius: 4px; color: var(--ink);
}

.snippet { position: relative; min-width: 0; }
.snippet pre {
  margin: 0; overflow-x: auto; min-width: 0;
  border: 1px solid var(--dark-line); border-radius: 10px;
  padding: 14px 66px 14px 14px;
  background: var(--dark); color: var(--on-dark-soft);
  font-family: var(--mono); font-size: 12px; line-height: 1.7; white-space: pre;
}
.snippet pre b { color: var(--on-dark); font-weight: 600; }
.snippet pre i { color: var(--coral); font-style: normal; }
.copy-button {
  position: absolute; top: 10px; right: 10px;
  min-height: 26px; padding: 0 10px;
  border: 1px solid var(--dark-line); border-radius: var(--pill);
  background: var(--dark-card); color: var(--on-dark-soft);
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.copy-button:hover { color: var(--on-dark); border-color: var(--coral); }
.copy-button[data-copied="true"] { color: var(--coral); border-color: var(--coral); }

.note {
  margin-top: 14px; padding: 12px 14px;
  border-left: 3px solid var(--coral); background: var(--coral-wash);
  color: var(--coral-deep); font-size: 13.5px; border-radius: 0 8px 8px 0;
}
/* fallback band */
.fallback { background: var(--dark); color: var(--on-dark); }
.fallback h2 { max-width: 14ch; }
.fallback .sec-sub { color: var(--on-dark-soft); }
.fallback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.fallback-card {
  min-width: 0; padding: 20px;
  border: 1px solid var(--dark-line); border-radius: var(--radius-sm);
  background: var(--dark-card);
}
.fallback-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.fallback-card p { color: var(--on-dark-soft); font-size: 14px; margin-bottom: 12px; }
.foot-note { margin-top: 22px; color: var(--on-dark-soft); font-size: 13.5px; }
.foot-note a { color: var(--coral); font-weight: 600; }

/* footer */
.site-footer { background: var(--dark); color: var(--on-dark-soft); padding: 30px 0 40px; border-top: 1px solid var(--dark-line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; font-size: 13.5px; }
.site-footer .wordmark { color: var(--on-dark); font-size: 19px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { text-decoration: none; }

@media (max-width: 1040px) { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 940px) {
  .nav-links { display: none; }
  .split-grid { grid-template-columns: 1fr; }
  .split-half + .split-half { border-left: 0; border-top: 1px solid var(--line); }
  .fallback-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wrap { width: min(calc(100% - 28px), var(--max)); }
  .signin { display: none; }
  .clients { grid-template-columns: 1fr; }
  .client { min-height: 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- logos ----------
 * Real marks from simple-icons (CC0), inlined as paths so there is no external
 * request and no CSP surprise. Monochrome via currentColor on purpose: brand
 * colours in a grid fight each other and fight the coral, and currentColor is
 * the one thing that survives a theme flip.
 *
 * ChatGPT and VS Code render a SLOT, not a mark. simple-icons excludes OpenAI
 * and Microsoft because those owners restrict redistribution, and inventing an
 * approximation of someone's trademark is worse than showing nothing. Drop the
 * official SVG in and delete the slot.
 */
.logo { width: 22px; height: 22px; display: block; color: var(--ink); }

.logo-slot {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px dashed var(--ink-faint);
  border-radius: 5px;
  color: var(--ink-faint);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow: hidden;
  line-height: 1;
}

.client-logo { display: block; margin-bottom: 2px; }
.client { position: relative; }

/* per-client page */
.hero-client { padding-bottom: clamp(30px, 4vw, 44px); }
.client-mark {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.client-mark .logo { width: 30px; height: 30px; }
.client-mark .logo-slot { width: 30px; height: 30px; font-size: 8px; }

.wrap-narrow { width: min(calc(100% - 44px), 780px); }
.detail-solo { border-top: 0; padding-top: 0; }
.detail-solo + .detail-solo { margin-top: clamp(34px, 4vw, 48px); border-top: 1px solid var(--line); padding-top: clamp(30px, 3.5vw, 42px); }
.then-title { font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.say-list { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: 15px; }
.say-list li { margin-bottom: 6px; }

.note-muted {
  border-color: var(--ink-faint);
  background: var(--card-2);
  color: var(--ink-soft);
}

.clients-compact { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
.client-sm {
  min-height: 0; gap: 8px; padding: 16px;
  border-color: var(--dark-line); background: var(--dark-card);
}
.client-sm h3 { font-size: 16px; }
.client-sm .logo { color: var(--on-dark); }
.client-sm .logo-slot { border-color: var(--on-dark-soft); color: var(--on-dark-soft); }
.client-sm:hover { border-color: var(--coral); }

@media (max-width: 940px) { .clients-compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .clients-compact { grid-template-columns: 1fr; } }

/* docs hub */
.doc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}
.doc-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  text-decoration: none;
  transition: border-color 160ms var(--ease);
}
.doc-card:hover { border-color: var(--coral); }
.doc-card small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.doc-card h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.doc-card p { color: var(--ink-soft); font-size: 14.5px; }
.doc-list {
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.doc-list li { margin-bottom: 10px; }
.doc-list a { color: var(--coral); font-weight: 600; text-decoration: none; }
.doc-list a:hover { text-decoration: underline; }
.doc-note {
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 3px solid var(--coral);
  color: var(--ink-soft);
  font-size: 14.5px;
}
.doc-label {
  margin: 22px 0 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 720px) { .doc-cards { grid-template-columns: 1fr; } }