/* Word Safari SEO landing pages — shared stylesheet for all 20 pages.
   Pulls in every existing token, font and component class from the main
   landing (tokens, .btn/.btn-primary/.btn-ghost, .site-header, .site-footer,
   .band/.band-soft/.band-head/.band-lede, .inside-grid/.inside-card,
   .trust-grid/.trust-item, .hero/.hero-cta, .final-cta) and adds ONLY the
   new component classes these text-forward pages need on top. Never
   redeclare a token here — if a value already exists in styles.css, reuse
   it via var(...).

   DELIBERATE SIMPLIFICATION vs the homepage: no parallax scene, no
   scene.css/scene.js, no script.js. These pages sit on the plain --bg
   background body.css already sets, which keeps them fast, fully static,
   and calmer to read — see landing/seo.css's own callers (the SEO page
   HTML files) for the head/script list this implies. */

@import url('styles.css');

/* ------------------------------------------------------------ seo-article
   The prose column: "Why this fits", the stage ladder, comparisons and the
   FAQ block all sit inside one of these per section, so paragraph measure
   stays readable at the same --maxw the rest of the site uses for its own
   content bands. */
.seo-article {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.seo-article h2 {
  font-size: var(--fs-lg);
  color: var(--ink);
  margin-top: var(--space-xl);
}

.seo-article h2:first-child {
  margin-top: 0;
}

.seo-article h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--ink);
  margin: 1.4em 0 0.4em;
}

.seo-article p {
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.6;
  max-width: 68ch;
  margin: 0 0 1em;
}

.seo-article ul,
.seo-article ol {
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.6;
  max-width: 68ch;
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.seo-article li + li {
  margin-top: 0.35em;
}

/* A larger intro paragraph, the SEO-page equivalent of .band-lede, used
   right under a section heading before the body copy narrows to .seo-article
   p's own size. */
.seo-lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 1em;
  line-height: 1.55;
}

/* ------------------------------------------------------------ stage-ladder
   A simple named list of Cambridge stages, rendered as stacked rows (never a
   dense data table) so it reads calmly on a phone. The one row a page is
   licensed to single out (see the wording guardrail) gets
   .stage-ladder-highlight; every other row stays neutral. */
.stage-ladder {
  list-style: none;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 68ch;
}

.stage-ladder li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8em var(--space-sm);
}

.stage-ladder li b {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: var(--fs-base);
}

.stage-ladder li span {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

.stage-ladder-highlight {
  border-color: var(--accent-deep);
  background: var(--accent-wash);
}

/* -------------------------------------------------------------- compare
   Two-column, non-disparaging comparison. Never names a competitor product;
   each column is simply "what X is for" stated plainly. */
.compare-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
}

@media (min-width: 640px) {
  .compare-block {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-block > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  box-shadow: var(--shadow);
}

.compare-block h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--accent-deep);
  margin: 0 0 0.4em;
}

.compare-block p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-base);
  line-height: 1.5;
  max-width: none;
}

/* ------------------------------------------------------------- faq-list
   Native <details>/<summary>, zero JS. A plain "+"/"−" indicator swapped via
   the [open] attribute selector, no icon asset. */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 68ch;
}

.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  color: var(--accent-deep);
  font-size: 1.3em;
  line-height: 1;
  flex-shrink: 0;
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-item p {
  margin: 0.6em 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-base);
  line-height: 1.55;
  max-width: none;
}

/* -------------------------------------------------------------- related
   The "Keep exploring" pill list right before the footer — where the
   interlinking mesh is physically realized on the page, not just in
   metadata. */
.related-links {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  text-align: center;
}

.related-links h2 {
  font-size: var(--fs-md);
  color: var(--ink);
  margin: 0 0 var(--space-sm);
}

.related-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-links-list a {
  display: inline-flex;
  align-items: center;
  padding: 0.6em 1.2em;
  border-radius: var(--radius-pill);
  background: var(--accent-wash);
  border: 1px solid var(--line);
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  text-decoration: none;
  min-height: 44px;
}

.related-links-list a:hover {
  background: var(--accent-deep);
  color: #fff;
}