/* The search pages (scripts/build-seo-pages.mjs). They use the homepage's
   styles.css for the masthead, buttons, download cards, questions and footer.
   This adds only what those pages have and the homepage doesn't: a smaller hero
   and a column of reading text. */

.guide-hero {
  margin-inline: var(--frame);
  padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 88px);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg);
  color: var(--ink);
}

.guide-crumbs {
  margin-bottom: clamp(20px, 3vw, 36px);
  color: var(--muted);
  font-size: var(--fs-small);
}
.guide-crumbs a {
  display: inline-block;
  padding-block: 12px;
}

/* Same type as the homepage's headline (.headline in styles.css), a little
   smaller because these headlines are longer. */
.guide-hero__title {
  max-width: 16em;
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.045em;
  text-wrap: balance;
}
/* The homepage has no Apple Podcasts sticker, so it's defined here, in the
   app's purple. */
[data-svc="applePodcasts"] { --svc: #9933cc; --svc-ink: #fff; }

.guide-hero__lead {
  max-width: 34em;
  margin: clamp(20px, 2.5vw, 32px) 0 clamp(24px, 3vw, 36px);
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.35;
}

.guide,
.guide-more {
  margin: var(--frame) var(--frame) 0;
  padding-block: clamp(40px, 6vw, 80px);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}

.guide__body {
  display: grid;
  gap: clamp(36px, 4.5vw, 60px);
}
.guide__body > section {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}

.guide h2,
.guide-more h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.guide p,
.guide li {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.5;
}
.guide p { margin: 0 0 14px; }
.guide ul { margin: 0 0 14px; padding-left: 22px; }
.guide li { margin-block: 8px; }
.guide a, .guide-more a { font-weight: 600; }

.guide__steps {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.guide li:where(.guide__steps > li) {
  position: relative;
  margin-block: 14px;
  padding-left: 46px;
  counter-increment: step;
}
.guide__steps > li::before {
  content: counter(step);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 16px;
  font-weight: 700;
}

/* Wide tables scroll inside their own box, never the whole page. */
.guide__table {
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 18px;
}
.guide__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.35;
}
.guide__table th,
.guide__table td {
  padding: 13px 16px;
  text-align: left;
  vertical-align: top;
}
.guide__table thead th {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}
.guide__table tbody th { width: 30%; font-weight: 600; white-space: nowrap; }
.guide__table tbody tr + tr > * { border-top: 2px solid rgba(20, 17, 15, .14); }

.guide ul.guide__links,
.guide__links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 10px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.guide li:where(.guide__links > li) { margin: 0; }
.guide__links a {
  display: block;
  min-height: 44px;
  height: 100%;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.3;
  text-decoration: none;
  transition: background .2s ease;
}
.guide__links a:hover { background: var(--butter); }

/* The homepage's footer runs flush to the page's end under its big wordmark;
   here it stands alone, so it gets a little air. */
.footer { padding-top: 12px; }