/* ============================================================
   Snag — layout for the GENERATED pSEO pages
   Linked by pseo/shell.mjs, alongside /styles.css.

   Why this file exists at all: the eight hand-written marketing pages each
   carry their own inline <style> block defining .wrap, section padding,
   h1.title, .grad, .lede and .sublede — those rules were NEVER part of the
   design system, and tokens/base.css deliberately zeroes every heading and
   paragraph margin. The generated pages link styles.css and nothing else, so
   until this file existed they rendered as an unspaced, edge-to-edge wall of
   text with an uncoloured <span class="grad">. Recovered from the deleted
   public/jam-alternative.html (git show 3d455e0^) so the ported page looks
   like the page it replaced.

   ONE stylesheet, not an inline copy per page: this repo has a documented
   history of per-page copies drifting apart, and a generated page set is
   exactly where that would multiply.

   Everything here is token-driven and theme-aware through those tokens —
   no literal colours, one accent (coral), sentence case, no emoji.
   ============================================================ */

/* --- page frame ---------------------------------------------------------- */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* base.css zeroes heading/paragraph margins, so vertical rhythm is entirely
   the section's job. Without this every heading sits directly on the
   paragraph above it. */
section { padding: 56px 0; }
section + section { padding-top: 0; }

/* --- sticky nav ---------------------------------------------------------- */
/* Same markup prerenderBlock() emits for every page, so the generated pages
   and the pre-hydration paint of the hand-written ones look identical. */

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--surface-page) 78%, transparent);
  border-bottom: 1px solid var(--divider-subtle);
}
.nav__in { display: flex; align-items: center; gap: 26px; height: 60px; }
.nav__links { display: flex; gap: 22px; margin-left: 10px; flex-wrap: wrap; }
.nav__links a, .nav__actions a {
  font-size: 14px; color: var(--fg-muted);
  transition: var(--transition-colors); text-decoration: none;
  white-space: nowrap;
}
.nav__links a:hover, .nav__actions a:hover { color: var(--fg-default); }
@media (max-width: 1366px) { .nav__links { gap: 16px; } }
.nav__sp { flex: 1; }
.nav__actions { display: flex; align-items: center; gap: 14px; }

/* --- headings and body copy ---------------------------------------------- */

h1.title {
  font-size: 48px; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--fg-strong); margin: 26px 0 0; font-weight: 700;
}
/* The one accent. Without this rule the hero's second clause renders in body
   colour and the page has no accent at all. */
h1.title .grad, .grad { color: var(--brand-primary); }

main h2 { font-size: 32px; letter-spacing: -0.02em; color: var(--fg-strong); margin: 12px 0 0; font-weight: 700; }
main h3 { font-size: 18px; color: var(--fg-strong); margin: 24px 0 0; font-weight: 600; }

.lede { font-size: 18px; line-height: 1.6; color: var(--fg-muted); margin: 18px 0 0; max-width: 44em; }
.sublede { font-size: 16px; line-height: 1.6; color: var(--fg-muted); margin: 12px 0 0; max-width: 44em; }
.seclabel {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brand-primary);
}

main a { color: var(--brand-primary); text-decoration: none; }
main a:hover { text-decoration: underline; }

/* --- comparison table ---------------------------------------------------- */
/* Wide content scrolls inside its own container so the page body never scrolls
   horizontally on a phone. */

.pseo-table-scroll {
  overflow-x: auto; margin: 24px 0;
  border: 1px solid var(--divider); border-radius: var(--radius-xl);
}
.pseo-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; min-width: 640px; }
/* The caption repeats the h2 immediately above it word for word, so it is
   hidden from sight and kept for assistive tech and crawlers — a <table> that
   loses its caption loses the only thing tying it to its heading. */
.pseo-table caption {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.pseo-table th, .pseo-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--divider-subtle);
  vertical-align: top; line-height: 1.5;
}
.pseo-table thead th { background: var(--surface); font-weight: 600; color: var(--fg-strong); }
.pseo-table tbody th { font-weight: 600; color: var(--fg-strong); background: var(--surface); }
.pseo-table td { color: var(--fg-muted); }
.pseo-table tbody tr:last-child th, .pseo-table tbody tr:last-child td { border-bottom: none; }
/* The verdict colours the row without asserting a winner in text. One accent
   only: our column reads coral, theirs reads neutral-informational. */
.pseo-table tr[data-verdict="snag"] td:nth-of-type(1) { background: var(--brand-primary-soft); color: var(--fg-default); }
.pseo-table tr[data-verdict="vendor"] td:nth-of-type(2) { background: var(--info-soft); color: var(--fg-default); }
.pseo-cite { display: block; margin-top: 6px; font-size: 12px; color: var(--fg-subtle); }
main a.pseo-cite:hover { color: var(--fg-muted); }

/* --- hub body ------------------------------------------------------------ */
/* .pseo-index is the list of member pages (expanded mode);
   .pseo-record__title heads a record the hub has absorbed and carries the
   anchor a collapsed family's 301s land on — scroll-margin keeps that heading
   clear of the sticky nav when they do. */

.pseo-index { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.pseo-index li {
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-xl); padding: 18px 20px;
}
.pseo-index a { font-weight: 600; font-size: 17px; }
.pseo-index__lede { display: block; margin-top: 6px; font-size: 14px; color: var(--fg-muted); }
.pseo-record__title { scroll-margin-top: 88px; }

/* --- closing call to action ---------------------------------------------- */

/* The band carries its own bottom margin, so the section must not add a second
   one on top of it. */
.pseo-cta { padding-bottom: 0; }
.ctaband {
  text-align: center;
  background: linear-gradient(180deg, var(--surface), var(--surface-page));
  border: 1px solid var(--divider); border-radius: var(--radius-2xl);
  padding: 48px 24px; margin-bottom: 60px;
}
.ctaband .sublede { margin: 12px auto 24px; }
.ctaband__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Plain anchors, not the React Button: these pages never hydrate, so a CTA
   that needed JavaScript to navigate would be dead for every reader and
   invisible to every crawler. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: var(--transition-colors);
}
main a.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand-primary); color: var(--fg-on-brand); }
/* Beats `.nav__actions a` and `main a`, which are both more specific than a
   bare class — without this the nav's primary button reads muted grey on
   coral. */
main a.btn--primary, .nav__actions a.btn--primary { color: var(--fg-on-brand); }
.btn--primary:hover { background: var(--brand-primary-strong); }
.btn--outline { border-color: var(--divider-strong); color: var(--fg-default); }
main a.btn--outline { color: var(--fg-default); }
.btn--outline:hover { background: var(--surface-interactive); }

/* --- footer -------------------------------------------------------------- */

footer { border-top: 1px solid var(--divider-subtle); margin-top: 48px; color: var(--fg-subtle); }
footer a { color: var(--fg-muted); transition: var(--transition-colors); }
footer a:hover { color: var(--fg-default); }
.footer__col { font-weight: 600; color: var(--fg-strong); }

/* --- narrow viewports ---------------------------------------------------- */

@media (max-width: 900px) {
  h1.title { font-size: 36px; }
  main h2 { font-size: 26px; }
  section { padding: 40px 0; }
  .wrap { padding: 0 20px; }
}