/* Shared stylesheet for the static guide pages.
   ------------------------------------------------------------------
   These pages are deliberately NOT part of the React app. They exist to be
   crawled and to load fast, so they ship as plain HTML with this one small
   stylesheet and no JavaScript at all. Nothing here is imported by the app,
   and the app imports nothing from here, so a mistake in this file cannot
   reach the product.

   The tokens mirror src/index.css so the pages read as the same brand:
   Inter for text, Poppins for headings, the blue-to-green sweep, and the
   deliberately blue-biased ink ramp (a true grey looks muddy on this cool
   ground -- see the note in src/index.css).
   ------------------------------------------------------------------ */

:root {
  --ink-900: #0b1729;
  --ink-600: #35485f;
  --ink-400: #5c7086;
  --line: #d6e3f2;
  --bg: #e8eff8;
  --bg-soft: #eff4fb;
  --white: #fff;
  --blue: #1d4ed8;
  --green: #16a34a;
  --grad: linear-gradient(135deg, #1d4ed8 0%, #0e8f80 52%, #16a34a 100%);
  --max: 760px;
  --r: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font: 400 17px/1.7 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── header ───────────────────────────────────────────────────────── */
.g-top {
  background: rgba(255, 255, 255, .86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.g-top-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.g-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink-900);
}

.g-logo img { width: 34px; height: 34px; border-radius: 8px; }

.g-brand {
  font: 700 17px/1 'Poppins', sans-serif;
  letter-spacing: -.01em;
}

.g-top-cta {
  margin-left: auto;
  background: var(--grad);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── page body ────────────────────────────────────────────────────── */
main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 36px 20px 8px;
}

.g-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}

h1 {
  font: 700 clamp(27px, 5.4vw, 39px)/1.22 'Poppins', sans-serif;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-wrap: balance;
}

.g-lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink-600);
  margin: 0 0 30px;
}

h2 {
  font: 700 clamp(21px, 3.4vw, 26px)/1.3 'Poppins', sans-serif;
  letter-spacing: -.01em;
  margin: 40px 0 12px;
  text-wrap: balance;
}

h3 {
  font: 600 18px/1.4 'Poppins', sans-serif;
  margin: 26px 0 8px;
}

p { margin: 0 0 16px; color: var(--ink-600); }
strong { color: var(--ink-900); font-weight: 600; }

a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: #16307e; }

ul, ol { margin: 0 0 18px; padding-left: 22px; color: var(--ink-600); }
li { margin-bottom: 9px; }

/* ── step ladder ──────────────────────────────────────────────────── */
.g-steps { list-style: none; padding: 0; margin: 0 0 22px; counter-reset: s; }

.g-steps li {
  counter-increment: s;
  position: relative;
  padding: 0 0 0 46px;
  margin-bottom: 20px;
}

.g-steps li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font: 700 14px/30px 'Poppins', sans-serif;
  text-align: center;
}

.g-steps b { display: block; color: var(--ink-900); margin-bottom: 3px; }

/* ── callout ──────────────────────────────────────────────────────── */
.g-note {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r);
  padding: 16px 18px;
  margin: 0 0 22px;
}

.g-note p:last-child { margin-bottom: 0; }

/* ── table ────────────────────────────────────────────────────────── */
.g-table-wrap { overflow-x: auto; margin: 0 0 22px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 15.5px;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th { font-weight: 700; background: var(--bg-soft); color: var(--ink-900); }
tr:last-child td { border-bottom: 0; }

/* ── closing CTA ──────────────────────────────────────────────────── */
.g-cta {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px;
  text-align: center;
  margin: 38px 0 8px;
}

.g-cta h2 { margin: 0 0 8px; }
.g-cta p { margin: 0 auto 18px; max-width: 46ch; }

.g-btn {
  display: inline-block;
  background: var(--grad);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 26px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(29, 78, 216, .28);
}

.g-free { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-400); }

/* ── other guides ─────────────────────────────────────────────────── */
.g-more { margin: 34px 0 0; }
.g-more h2 { margin-top: 0; }

.g-more-list { list-style: none; padding: 0; margin: 0; }

.g-more-list li { margin-bottom: 10px; }

.g-more-list a {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 16px;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink-900);
}

.g-more-list a:hover { border-color: #9dbde3; }

/* ── footer ───────────────────────────────────────────────────────── */
.g-foot {
  background: #0f1c2f;
  color: #a7b8cd;
  margin-top: 44px;
  font-size: 14px;
}

.g-foot-in { max-width: var(--max); margin: 0 auto; padding: 30px 20px 26px; }

.g-foot-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7f95ae;
  display: block;
  margin-bottom: 7px;
}

.g-foot p { color: #a7b8cd; margin: 0 0 14px; line-height: 1.6; }
.g-foot a { color: #cfe0f3; }

.g-foot-base {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-top: 15px;
  font-size: 13px;
  color: #7f95ae;
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  main { padding-top: 26px; }
  .g-top-cta { font-size: 13px; padding: 8px 13px; }
  .g-brand { font-size: 16px; }
}

/* ── language switcher ────────────────────────────────────────────────
   Sits above the heading on every guide page. Plain links to the same page
   in another language, so it works with no JavaScript, exactly like the
   rest of these pages. The current language is a span, not a link, so it
   cannot be clicked to itself. */
.g-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.g-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--ink-400);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.g-langs a:hover,
.g-langs a:focus-visible {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.g-lang-on {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-weight: 700;
  color: var(--ink-900);
}