/* ============================================================
   Guide-page styles (guides/*.html). app.css supplies theme
   tokens, fonts and .btn styles; this file is the article shell.
   Loaded after app.css so the html/body scroll override wins.
   ============================================================ */
html, body { height: auto; min-height: 100%; overflow: visible; }
body {
  background:
    radial-gradient(900px 420px at 75% -120px, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
}

.guide {
  --sheet-line: color-mix(in srgb, var(--ink) 14%, transparent);
  /* Match .land's width so the site header/footer line up across pages. */
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px calc(84px + env(safe-area-inset-bottom));
}
/* The article itself keeps its reading measure: 720px is what the old
   760px wrapper yielded inside its 20px side padding. */
.guide main, .guide .crumbs {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 769px) {
  .guide { padding-bottom: 48px; }
}

/* --- marketing button scale ---------------------------------- */
/* app.css's .btn/.btn-lg fixed heights (28/36px) are built for the app's
   compact UI. Marketing pages use a comfortable three-step scale instead:
   header 40px, primary CTAs 48px, sticky mobile CTA 56px. */
.guide .btn, .sticky-cta .btn { height: auto; border-radius: var(--r-3); }
.guide .site-head .btn { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.guide .cta-box .btn { min-height: 48px; padding: 10px 26px; font-size: 16px; }

/* --- header / footer (mirrors the landing page) -------------- */
.site-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 0 14px;
}
.site-head__brand {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none;
  font-weight: 650; letter-spacing: -0.01em; font-size: 17px;
}
.site-head__brand svg { color: var(--accent); }
.site-head__spacer { flex: 1; }
.site-head__nav { display: inline-flex; }
.site-head__nav a {
  color: var(--muted); text-decoration: none;
  font-size: 14.5px; font-weight: 500; padding: 8px 12px;
}
.site-head__nav a:hover, .site-head__nav a[aria-current="page"] { color: var(--ink); }
.site-head__open { display: none; }
@media (min-width: 769px) {
  .site-head__open { display: inline-flex; }
}
.site-foot {
  margin-top: 56px; padding: 22px 0 8px;
  border-top: 1px solid var(--sheet-line);
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: 13px; color: var(--muted);
}
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--ink); }
.site-foot__spacer { flex: 1; }

.crumbs {
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--muted); margin: 18px 0 0;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* --- article typography -------------------------------------- */
.guide article { margin-top: 14px; }
.guide h1 {
  font-size: clamp(28px, 4.6vw, 40px); line-height: 1.12;
  letter-spacing: -0.025em; margin: 0 0 14px; color: var(--ink);
}
.guide .standfirst {
  font-size: 16.5px; line-height: 1.65; color: var(--muted); margin: 0 0 26px;
}
.guide .standfirst strong { color: var(--ink); font-weight: 600; }
.guide h2 {
  font-size: 22px; letter-spacing: -0.015em; margin: 40px 0 12px; color: var(--ink);
}
.guide h3 { font-size: 17px; margin: 26px 0 8px; color: var(--ink); }
.guide p, .guide li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2, var(--ink)); }
.guide p { margin: 0 0 14px; }
.guide ul, .guide ol { margin: 0 0 14px; padding-left: 24px; }
.guide li { margin-bottom: 6px; }
.guide li::marker { color: var(--accent); }
.guide a { color: var(--accent-ink); }
.guide a:hover { color: var(--accent); }
/* .guide a out-specifies .btn's colors — restore button ink on buttons */
.guide a.btn, .guide a.btn:hover { color: var(--ink); text-decoration: none; }
.guide a.btn-primary, .guide a.btn-primary:hover { color: var(--accent-on); }
.guide strong { color: var(--ink); }
.guide .mono-val { font-family: var(--ff-mono); font-size: 0.92em; }

/* numbered how-to steps */
.guide ol.steps {
  list-style: none; counter-reset: step; padding: 0; margin: 18px 0 20px;
  display: grid; gap: 12px;
}
.guide ol.steps > li {
  counter-increment: step; position: relative;
  border: 1px solid var(--sheet-line); border-radius: 10px;
  padding: 14px 16px 14px 58px; margin: 0;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.guide ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 16px; top: 15px;
  font-family: var(--ff-mono); font-size: 13px; color: var(--accent-ink);
}
.guide ol.steps > li strong:first-child { display: block; margin-bottom: 4px; }

/* callouts */
.guide .callout {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 12px 16px; margin: 0 0 14px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.guide .callout p:last-child { margin-bottom: 0; }
.guide .callout--plain {
  border-color: var(--sheet-line); border-left-color: var(--muted);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* tables (scale reference) */
.guide .tbl-wrap { overflow-x: auto; margin: 0 0 14px; }
.guide table {
  border-collapse: collapse; width: 100%; font-size: 14.5px;
}
.guide th, .guide td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--sheet-line);
  vertical-align: top;
}
.guide th {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-ink); font-weight: 500;
}
.guide td:first-child { font-family: var(--ff-mono); font-size: 13.5px; white-space: nowrap; }

/* in-article CTA */
.guide .cta-box {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 12px; padding: 22px 20px; margin: 34px 0 0;
  text-align: center;
  background:
    linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent), transparent),
    color-mix(in srgb, var(--ink) 3%, transparent);
}
.guide .cta-box p { margin: 0 0 14px; color: var(--muted); }
.guide .cta-box p strong { color: var(--ink); }

/* FAQ + more-guides */
.guide .faq { display: grid; gap: 10px; margin: 18px 0 0; }
.guide .faq details {
  border: 1px solid var(--sheet-line); border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}
.guide .faq summary {
  cursor: pointer; padding: 13px 16px; font-weight: 600; font-size: 15px;
  color: var(--ink); list-style: none; display: flex; gap: 10px; align-items: center;
}
.guide .faq summary::-webkit-details-marker { display: none; }
.guide .faq summary::before {
  content: "+"; font-family: var(--ff-mono); color: var(--accent);
  width: 14px; flex: 0 0 auto;
}
.guide .faq details[open] summary::before { content: "–"; }
.guide .faq details > p { margin: 0; padding: 0 16px 14px 40px; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

.guide .more {
  margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 10px;
}
.guide .more li {
  border: 1px solid var(--sheet-line); border-radius: 10px; padding: 0; margin: 0;
}
.guide .more a {
  display: block; padding: 13px 16px; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: 15px;
}
.guide .more a span {
  display: block; margin-top: 3px; color: var(--muted); font-weight: 400; font-size: 13.5px;
}
.guide .more a:hover { color: var(--accent-ink); }
.guide .more--index { margin-top: 6px; gap: 12px; }
.guide .more--index a { padding: 16px 18px; font-size: 16px; }
.guide .more--index a span { font-size: 14px; margin-top: 5px; }

/* sticky mobile CTA (same as landing) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--sheet-line);
}
.sticky-cta .btn { width: 100%; justify-content: center; font-size: 16.5px; padding: 10px 20px; min-height: 56px; }
@media (min-width: 769px) { .sticky-cta { display: none; } }