/* FBCing — /guide/ the product page.
   Loads after /styles.css, which supplies the tokens, self-hosted IBM Plex
   Sans, the shell, the type scale, .rows and .button. This file adds only
   the top band, the title pair, the purchase block and the inline link.
   No inline styles anywhere; the CSP's style-src 'self' is unchanged. */

.guide-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.guide-main {
  flex: 1 0 auto;
  padding-block: var(--gap-rule-content) var(--gap-section);
}

.guide-main h2 {
  margin-block-start: var(--gap-section);
}

/* ---------- TOP BAND ---------- */

.guide-top {
  background-color: var(--ink);
  color: var(--paper);
  padding-block: var(--s-3);
}

.guide-mark { display: inline-block; line-height: 0; }
.guide-mark svg { display: block; width: 136px; height: auto; }
.guide-mark:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }

/* ---------- TITLE ---------- */

.guide-title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: var(--measure-body);
  text-wrap: balance;
}

.guide-lead {
  margin-block-start: var(--s-2);
  margin-block-end: var(--gap-rule-content);
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--slate);
}

.guide-main p + p { margin-block-start: var(--gap-paragraph); }
.row__desc + .row__desc { margin-block-start: var(--s-2); }

/* ---------- PURCHASE ---------- */

.guide-buy {
  max-width: var(--measure-body);
  margin-block-start: var(--gap-section);
  padding-block-start: var(--gap-rule-content);
  border-block-start: 1px solid var(--rule);
}

.guide-price strong {
  font-size: 24px;
  font-weight: 600;
}

.guide-buy .button {
  margin-block-start: var(--gap-rule-content);
}

.guide-after {
  font-size: 17px;
  color: var(--slate);
}

.guide-buy .button + .guide-after {
  margin-block-start: var(--gap-rule-content);
}

.guide-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.guide-link:focus-visible { outline: 2px solid var(--ledger); outline-offset: 2px; }