@charset "UTF-8";
/* ─────────────────────────────────────────────────────────────────────────
   User guide — /user-guide

   Built entirely from the site's existing tokens and the .glass / .faq /
   .btn / .cta primitives in styles.css, so it cannot drift from the brand.
   Only /user-guide loads this file.

   Nothing below the header reveals on scroll. A reader who jumps to a topic
   from the contents list or the search box should find it already there, not
   fading in a beat after they arrive.
   ───────────────────────────────────────────────────────────────────────── */

/* The nav is fixed at top:18px, so a plain .section would start under it.
   Same top-padding trick the legal and pricing pages use. */
.guide-page { padding-top: clamp(7rem, 12vw, 9rem); }

/* Prose links are underlined here. On a page this dense the green alone is
   not enough of a cue next to body text (WCAG 1.4.1). :where() keeps this at
   element-level specificity, so the contents, topic tiles and search results
   — all links inside list items — can opt out with a single class. */
:where(.guide-page) :is(p, li, dd, td) a {
  text-decoration: underline;
  text-decoration-color: rgba(141, 240, 106, .45);
  text-underline-offset: .18em;
}
:where(.guide-page) :is(p, li, dd, td) a:hover { text-decoration-color: currentColor; }

/* ── Header ────────────────────────────────────────────────────────────── */
.guide-hero { max-width: 46rem; margin: 0 auto; text-align: center; }
.guide-hero h1 { font-size: var(--fs-h2); line-height: 1.02; }
.guide-hero .lead { margin: 1.25rem auto 0; max-width: 38rem; }
.guide-meta { margin-top: 1rem; font-size: .8125rem; color: var(--ink-muted); }

/* ── Search ────────────────────────────────────────────────────────────── */
/* It needs JavaScript to do anything. The page hides it with a <noscript>
   style when scripting is off — not with .no-js, which would hide it on every
   load until main.js ran and then pop it in above the fold. */
.guide-search { max-width: 36rem; margin: clamp(1.75rem, 4vw, 2.25rem) auto 0; text-align: left; }
.guide-search__field {
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem;
  border-radius: var(--r-pill);
  background: rgba(8, 30, 18, .72);
  border: 1px solid rgba(234, 246, 238, .18);
  box-shadow: inset 0 1px 0 rgba(226, 255, 236, .10), 0 20px 50px -30px rgba(0, 0, 0, .9);
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t-mid) var(--ease-soft);
}
.guide-search__field svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink-muted); }
/* The focus ring moves from the bare input to the whole pill: an outline
   hugging the text box inside a rounded field reads as a rendering fault. */
.guide-search__field:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(141, 240, 106, .22);
}
.guide-search input {
  flex: 1; min-width: 0;
  padding: 1rem 0;
  background: none; border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;   /* 16px or more, or iOS zooms the page on focus */
}
.guide-search input:focus-visible { outline: none; }
.guide-search input::placeholder { color: var(--ink-muted); opacity: 1; }

.guide-search__status {
  min-height: 1.25rem;
  margin-top: .75rem; padding-inline: 1.25rem;
  font-size: .875rem; color: var(--ink-muted);
}
.guide-results {
  list-style: none;
  margin: .5rem 0 0; padding: .5rem;
  border-radius: var(--r-lg);
  display: grid; gap: .125rem;
}
.guide-results[hidden] { display: none; }
.guide-results a {
  display: block;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
  color: var(--ink); font-weight: 500; line-height: 1.35;
  text-decoration: none;
}
.guide-results a:hover { background: rgba(141, 240, 106, .10); color: var(--green); }
.guide-results__group {
  display: block; margin-top: .2rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-60);
}

/* ── Layout: contents + body ───────────────────────────────────────────── */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.guide-body { min-width: 0; max-width: 50rem; }

/* Contents. A sticky sidebar where there is room for one; above the guide,
   as a plain list of the main sections, where there is not. */
.guide-toc { padding: 1.25rem; border-radius: var(--r-lg); align-self: start; }
.guide-toc__title {
  margin-bottom: .75rem; padding-inline: .75rem;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-60);
}
.guide-toc ol { list-style: none; margin: 0; padding: 0; }
.guide-toc > ol { display: grid; gap: .125rem; }
.guide-toc a {
  display: block;
  padding: .4rem .75rem;
  border-radius: var(--r-sm);
  color: var(--ink-70); font-size: .9rem; line-height: 1.35;
  text-decoration: none;
}
.guide-toc a:hover { color: var(--ink); background: rgba(234, 246, 238, .05); }
.guide-toc a[aria-current] { color: var(--green); background: rgba(141, 240, 106, .09); }
.guide-toc ol ol {
  margin: .125rem 0 .375rem .75rem; padding-left: .5rem;
  border-left: 1px solid rgba(234, 246, 238, .10);
}
.guide-toc ol ol a { padding-block: .3rem; font-size: .84rem; color: var(--ink-60); }

@media (min-width: 1100px) {
  .guide-layout { grid-template-columns: 15.5rem minmax(0, 1fr); align-items: start; }
  .guide-toc {
    position: sticky; top: calc(var(--nav-h) + 40px);
    max-height: calc(100vh - var(--nav-h) - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
@media (max-width: 1099px) {
  /* The per-feature links are left to the topic grid in "Feature guides" —
     on a phone, twelve more rows here would push the guide itself a whole
     screen down. */
  .guide-toc > ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-toc ol ol { display: none; }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.guide-section + .guide-section { margin-top: clamp(4rem, 8vw, 5.5rem); }
/* Headings at the global h2 size would be poster type on a reference page;
   this is the same step down the pricing page takes for its own h2s. */
.guide-section > h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.08; }
.guide-intro { margin-top: .9rem; max-width: 44rem; color: var(--ink-70); font-size: 1.0625rem; line-height: 1.7; }
.guide-intro + .guide-intro { margin-top: .75rem; }

/* ── Quick start ───────────────────────────────────────────────────────── */
.qs {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.25rem) 0 0; padding: 0;
  display: grid; gap: .875rem;
}
.qs__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.125rem;
  padding: clamp(1.25rem, 2.6vw, 1.625rem);
}
.qs__num {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
  color: var(--bg-base); background: var(--grad-green);
}
.qs__step h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.02em; margin-top: .4rem; }
.qs__step p { margin-top: .5rem; color: var(--ink-70); font-size: .975rem; line-height: 1.65; }

/* ── Topic grid (the feature index) ────────────────────────────────────── */
/* Hairline tiles in the .chip vocabulary rather than more glass: twelve
   blurred panes in a row is a lot of GPU for a list of links. */
.guide-topics {
  list-style: none;
  margin: 1.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .75rem;
}
.guide-topics a {
  display: block; height: 100%;
  padding: 1rem 1.125rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(234, 246, 238, .12);
  background: rgba(234, 246, 238, .03);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-soft), background-color var(--t-fast) var(--ease-soft);
}
.guide-topics a:hover { border-color: rgba(141, 240, 106, .45); background: rgba(141, 240, 106, .06); color: var(--ink); }
.guide-topics strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.guide-topics span { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.45; color: var(--ink-60); }

/* ── Permissions ───────────────────────────────────────────────────────── */
.perm-group { margin-top: 2rem; }
.perm-group h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.02em; }
.perm-group > p { margin-top: .4rem; color: var(--ink-60); font-size: .95rem; line-height: 1.6; }
.perm-list { margin: .9rem 0 0; display: grid; gap: .625rem; }
.perm {
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(234, 246, 238, .10);
  background: rgba(234, 246, 238, .03);
}
.perm dt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; font-weight: 600; color: var(--ink); }
.perm dd { margin: .35rem 0 0; color: var(--ink-70); font-size: .95rem; line-height: 1.6; }

/* A status label that is always words, never only a colour. */
.guide-tag {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(234, 246, 238, .22);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-70);
}
.guide-tag--req { border-color: rgba(141, 240, 106, .38); background: rgba(141, 240, 106, .08); color: var(--green); }

/* ── Feature and troubleshooting cards ─────────────────────────────────── */
.guide-card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.guide-card + .guide-card { margin-top: 1rem; }
.guide-topics + .guide-card { margin-top: clamp(2rem, 4vw, 2.75rem); }
.guide-card .eyebrow { margin-bottom: .6rem; }
.guide-card h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.22; letter-spacing: -.025em; }
.guide-answer { margin-top: .875rem; color: var(--ink); font-size: 1.0625rem; line-height: 1.65; }
.guide-why { margin-top: .75rem; color: var(--ink-70); font-size: .975rem; line-height: 1.65; }
.guide-why strong, .guide-answer strong { color: var(--ink); font-weight: 600; }

.guide-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(234, 246, 238, .08); }
/* Small uppercase labels on glass use --ink-60, not --ink-muted: the tokens
   were tuned against the bare page, and the lit top-left corner of a pane is
   light enough to pull --ink-muted just under 4.5:1. */
.guide-block h4 {
  font-family: var(--font-body); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-60);
}

/* Numbered steps. The counter is drawn, so the list keeps role="list" in the
   markup: Safari drops list semantics from a list with no visible markers. */
.guide-steps {
  counter-reset: step;
  list-style: none;
  margin: .75rem 0 0; padding: 0;
  display: grid; gap: .625rem;
}
.guide-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.25rem;
  color: var(--ink-70); line-height: 1.6;
}
.guide-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .75rem;
  color: var(--green); background: rgba(141, 240, 106, .12);
}
.guide-steps strong, .guide-notes strong, .perm dd strong, .guide-problems dd strong { color: var(--ink); font-weight: 600; }

.guide-notes {
  list-style: disc;
  margin: .75rem 0 0; padding-left: 1.15rem;
  display: grid; gap: .5rem;
  color: var(--ink-70); line-height: 1.6;
}
.guide-notes li::marker { color: var(--green); }

.guide-problems { margin: .75rem 0 0; display: grid; gap: .875rem; }
.guide-problems dt { font-weight: 600; color: var(--ink); line-height: 1.45; }
.guide-problems dd { margin: .25rem 0 0; color: var(--ink-70); line-height: 1.6; }

/* A short reference table. It is written to wrap rather than scroll at phone
   width; overflow-x is only the backstop for a very narrow screen. */
.guide-table {
  margin-top: .875rem;
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid rgba(234, 246, 238, .10);
}
.guide-table table { width: 100%; border-collapse: collapse; }
.guide-table th, .guide-table td {
  padding: .65rem .9rem;
  text-align: left; vertical-align: top;
  font-size: .9rem; line-height: 1.45;
  border-bottom: 1px solid rgba(234, 246, 238, .08);
}
.guide-table thead th {
  font-size: .72rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-60);
  background: rgba(234, 246, 238, .03);
}
.guide-table tbody th { color: var(--ink); font-weight: 600; }
.guide-table td { color: var(--ink-70); }
.guide-table tbody tr:last-child > * { border-bottom: 0; }

/* ── FAQ (reuses the .faq accordion from styles.css) ───────────────────── */
.guide-faq.faq { max-width: none; margin: clamp(1.75rem, 4vw, 2.25rem) 0 0; }
/* Each question sits in an h3 so the page outline lists it. The heading is
   reset to its parent's type so the button inside looks exactly like the
   home page's accordion. */
.faq__h { margin: 0; font: inherit; letter-spacing: inherit; text-wrap: inherit; }
/* A collapsed answer is out of sight, so it must be out of the tab order
   too — these answers carry links, and a keyboard user should never land on
   one they cannot see. visibility waits for the collapse to finish. */
.guide-faq .faq__a > div { visibility: hidden; transition: visibility 0s linear var(--t-mid); }
.guide-faq .faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }
/* .faq__item clips its overflow for the rounded glass, which would cut the
   keyboard focus ring down to one edge. Draw it inside the item instead. */
.guide-faq .faq__q:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }
/* Without JavaScript every answer is shown — see the <noscript> style in the
   page head for why that is not a .no-js rule here. */

/* ── Closing CTA (reuses .cta) ─────────────────────────────────────────── */
.guide-help .cta h2 { font-size: clamp(2rem, 4.4vw, 3.25rem); }

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .guide-toc { padding: 1rem; }
  .qs__step { gap: .875rem; }
  .qs__num { width: 2.125rem; height: 2.125rem; font-size: 1rem; }
  .guide-card { padding: 1.25rem 1.125rem; }
  .guide-answer { font-size: 1rem; }
  .perm { padding: .875rem 1rem; }
}
@media (max-width: 380px) {
  .guide-toc > ol { grid-template-columns: minmax(0, 1fr); }
}

/* ── Print ─────────────────────────────────────────────────────────────── */
/* People print setup guides. Show every answer, drop the controls, and put
   the pale-on-dark text back to ink on paper. */
@media print {
  .guide-search, .guide-toc, .guide-help .cta__actions { display: none !important; }
  .guide-layout { display: block; margin-top: 1.5rem; }
  .guide-faq .faq__a { grid-template-rows: 1fr; }
  .guide-faq .faq__a > div { visibility: visible; }
  .guide-page :is(h1, h2, h3, h4, p, li, dt, dd, span, strong, .faq__q) { color: #111 !important; }
  .guide-topics a, .perm { border-color: #ccc; }
}