/* The guides' shared page style (every guide except the index), linked
   after /site.css. Bump ?v= on the guide pages' links together when this
   changes. */
/* Archivo, the brand face, self-hosted from /fonts (see fonts/README.md for
   why it is not a Google Fonts link). Four weights, latin, woff2. */
:root {
  color-scheme: light;
  /* The brand ramp is split: 500-700 are FILLS that carry ink text (white on
     #E07638 is 3.09:1 and fails AA), 800 is TEXT on light. Borrowing one for
     the other's job breaks it. Mirrors web/tailwind.config.js. */
  --brand-50: #FBF1EA;
  --brand-500: #E07638;
  --brand-600: #CE6D34;
  --brand-700: #C56831;
  --brand-800: #A94E1C;
  --ink: #0F1620;
  --green-600: #16a34a;
  --paper: #F1EFEC;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;
}
body {
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  color: var(--gray-900);
  line-height: 1.65;
}
/* Horizontal padding stated HERE, not inherited: this element is
   class="wrap nav", and this rule's padding shorthand overrides .wrap's —
   `0.8rem 0` silently zeroed the side padding, which ran the header
   edge-to-edge on every phone (found on launch day, fixing the hidden
   Sign in link beside it). */
/* 620px, not 480: with every link shown the row needs ~590px, so between
   480 and 600 the old rule overflowed the header sideways — the section
   links hide until the row genuinely fits. Sign in stays at every width. */
main { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.crumb { font-size: 0.9rem; color: var(--gray-500); margin-bottom: 1.2rem; }
.crumb a { color: var(--gray-500); }
.crumb a:hover { color: var(--gray-900); }
h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.4rem; }
.promise { color: var(--gray-600); font-size: 1.05rem; margin-bottom: 1rem; }
.meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; }
.meta span {
  font-size: 0.8rem; font-weight: 600; padding: 0.2rem 0.7rem;
  border-radius: 999px; background: var(--brand-50); color: var(--brand-800);
}
.meta span.time { background: var(--gray-100); color: var(--gray-600); }
h2 { font-size: 1.25rem; letter-spacing: -0.01em; margin: 2.4rem 0 0.7rem; }
p, ul, ol { margin-bottom: 0.9rem; color: var(--gray-700); }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: 0.45rem; }
b, strong { color: var(--gray-900); }
.summary {
  background: var(--brand-50); border: 1px solid rgba(224, 118, 56, 0.35);
  border-radius: 0.8rem; padding: 1.3rem 1.4rem; margin-bottom: 1rem;
}
.summary h2 { margin-top: 0; font-size: 1.05rem; color: var(--brand-800); }
.summary p:last-child, .summary ul:last-child { margin-bottom: 0; }
/* Numbered steps: a blue circle per step, the action in bold up front. */
ol.steps { list-style: none; padding-left: 0; counter-reset: step; margin: 1.4rem 0; }
ol.steps > li {
  counter-increment: step; position: relative;
  padding-left: 3rem; margin-bottom: 1.6rem;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.05rem;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--brand-500); color: var(--ink);
  font-weight: 700; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
ol.steps > li > ul { margin-top: 0.5rem; }
figure.shot { margin: 1rem 0 0.4rem; }
figure.shot img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--gray-200); border-radius: 0.8rem;
  box-shadow: 0 12px 30px -18px rgba(30, 41, 59, 0.35);
}
figure.shot.phone img { width: 100%; max-width: 21rem; margin: 0 auto; }
figure.shot figcaption { font-size: 0.85rem; color: var(--gray-500); margin-top: 0.5rem; }
.know {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 0.8rem; padding: 1.3rem 1.4rem; margin: 2rem 0;
}
.know h2 { margin-top: 0; font-size: 1.05rem; }
.know ul:last-child { margin-bottom: 0; }
.pn {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  border-top: 1px solid var(--gray-200); margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: 0.95rem;
}
.pn a { text-decoration: none; font-weight: 600; }
.pn small { display: block; font-weight: 400; color: var(--gray-500); font-size: 0.8rem; }
.pn .next { text-align: right; margin-left: auto; }