/* seo-blocks.css — the three server-rendered blocks added by the SEO port:
   the /tools and /alternatives directories and the related-links band.
   They shipped with no styling at all, which meant an unstyled h2 + bullet
   list on both hubs and above the footer of ~700 detail pages. */
.tools-directory,.alternatives-directory{padding:2.5rem 0}
.tools-directory__heading,.alternatives-directory__heading{font-size:1.5rem;margin:0 0 1.5rem}
.tools-directory__group,.alternatives-directory__group{margin:0 0 2rem}
.tools-directory__category,.alternatives-directory__category{font-size:1.05rem;font-weight:600;margin:0 0 .75rem;opacity:.85}
/* The category heading is now an anchor to the category page. Inherit the h3's
   colour and weight so the block looks unchanged; the underline appears on hover
   only. `a::before` carries a site-wide indigo underline-glow that bleeds onto
   non-standard anchors, so it is cleared here (see CLAUDE.md). */
.alternatives-directory__category-link{color:inherit;font:inherit;text-decoration:none}
.alternatives-directory__category-link:hover{text-decoration:underline}
.alternatives-directory__category-link::before{border-bottom-color:transparent!important}
.tools-directory__grid,.alternatives-directory__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.6rem;list-style:none;margin:0;padding:0}
.tools-directory__item,.alternatives-directory__item{margin:0}
.tools-directory__link,.alternatives-directory__link{display:block;padding:.7rem .9rem;border:1px solid rgba(0,0,0,.1);border-radius:8px;height:100%;line-height:1.35}
.tools-directory__link:hover,.alternatives-directory__link:hover{border-color:rgba(46,91,255,.5)}
.tools-directory__name{display:block;font-weight:600}
.tools-directory__desc{display:block;margin-top:.25rem;font-size:.85rem;opacity:.75}
.tools-directory__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1rem}

.related-links{padding:2rem 0;border-top:1px solid rgba(0,0,0,.08)}
.related-links__heading{font-size:1.15rem;margin:0 0 1rem}
.related-links__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;list-style:none;margin:0;padding:0}
.related-links__item{margin:0}
.related-links__link{display:block;padding:.5rem .75rem;border-radius:6px;line-height:1.35}
.related-links__link:hover{background:rgba(46,91,255,.06)}
@media screen and (max-width:40em){
  .tools-directory__grid,.alternatives-directory__grid,.related-links__list{grid-template-columns:1fr}
}

/* ── Compare pages: text-only hero ────────────────────────────────────────
   .flex-left-min sets min-height:600px because it is built for a hero with a
   .flex-right visual beside it — that is how the tool and alternatives detail
   pages use it, always alongside .has-image. The compare hub and the ten pair
   pages have no visual, so the 600px is empty.

   Measured on the live pages 2026-08-22 at a 1512px viewport: the block was
   600px tall around 118px of content, leaving 482px of void between the
   headline and the first real section, on all eleven pages. With the rule
   below the hero goes 756px -> 429px and the dead space 482px -> 155px, which
   is the H2's own margins.

   Scoped to body.compare-page so the tool and alternatives heroes, where the
   600px floor is doing real work, are untouched. */
body.compare-page .flex-left.flex-left-min {
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 36px;
}

body.compare-page section.overlayall.hero.large {
    min-height: 0;
}

/* ── Compare pages: readability ───────────────────────────────────────────
   Measured on the live hub at a 1440px viewport, 2026-08-22, before this:

     body copy   1092px wide at 16px  =  ~137 characters per line
     h1 / h2     54px/700  vs  44.8px/800   (the SUBHEADING was bolder)
     h3          23.8px at weight 400       (lighter than the body emphasis)
     ul          14.4px, list-style:none, padding-left:0  (no bullets at all)

   137 cpl is roughly double a comfortable measure; the research range is
   60-80. Constraining the prose to 68ch brings it to 76 while leaving the
   comparison table full width, which is what a table wants.

   The heading scale was inverted rather than merely large: an h2 at 44.8px
   sits 9px off the h1 and carried MORE weight, so the page read as a stack of
   competing titles. 54 / 30 / 20 at 700 / 700 / 600 restores the hierarchy.

   Applies to the ten pair pages as well as the hub - same body class, same
   two defects. */
body.compare-page main .small-12.columns > p,
body.compare-page main .small-12.columns > ul {
    max-width: 68ch;
}

body.compare-page main h2 {
    font-size: 30px;
    font-weight: 700;
    margin-top: 44px;
    margin-bottom: 14px;
}

body.compare-page main h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 26px;
    margin-bottom: 8px;
}

body.compare-page main .small-12.columns > ul {
    list-style: disc outside;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.55;
}

body.compare-page main .small-12.columns > ul li {
    margin-bottom: 8px;
}

/* Wide content scrolls inside its own container rather than pushing the page
   sideways. The tables fit at 390px today, so this is a guard against a
   future column rather than a fix for a measured overflow. */
body.compare-page .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 18px;
}