/* ════════════════════════════════════════════════════════════════
   seo.css — editorial, left-aligned, line-divided section system for
   Paper's templated SEO / landing pages. Built ON TOP of styles.css
   (brand tokens + fonts + nav/footer/pricing/final-cta come from there).

   DESIGN LANGUAGE (approved wireframe):
     • Left-aligned, flat, editorial — NO shadowed/rounded cards.
     • Full-bleed horizontal rules separate the major bands.
     • Continuous vertical side rails frame the hero → split header →
       feature columns as one connected frame.
     • A recurring "split header": title left / one supporting line
       right, vertically centered against each other.
     • Grids are divided by hairlines, not boxed into cards.

   PADDING MODEL: vertical rhythm lives on the INNER .container (not the
   .band section) so the side rails — which are borders on the container
   — run continuously across stacked bands with no gaps. Horizontal band
   rules stay full-bleed (border-top on the full-width .band).

   To template a new page: copy product/voice-to-text.html, swap the
   {{SLOT}} copy + structured data; reuse these classes as-is.
   ════════════════════════════════════════════════════════════════ */

/* ── Bands + container ──────────────────────────────────────────── */
.band {
  border-top: 1px solid var(--hairline); /* full-bleed horizontal rule */
  position: relative;
  z-index: 1;
  scroll-margin-top: 92px; /* clear the sticky nav on #anchor jumps */
}
.band--flush { border-top: 0; }
.container {
  /* ~80% of the viewport so the side gutters stay ~10% on wide screens
     (was a fixed 1080px, which left big gutters). Capped so it doesn't
     over-stretch on very large monitors. Phones go full-width below. */
  width: 80%;
  max-width: 1500px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
/* Vertical rhythm on the container (see PADDING MODEL above). */
.band-pad > .container { padding-top: 172px; padding-bottom: 204px; }
.band-pad--sm > .container { padding-top: 56px; padding-bottom: 56px; }

/* Continuous vertical side rails — added to the framed bands
   (hero → split header → feature columns). Because the padding is on
   the container, these borders meet edge-to-edge down the frame. */
.band--rail > .container {
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
}

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb {
  width: 80%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 22px 24px 0;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--body-font);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--ink-faint); opacity: 0.6; }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; transition: color 0.12s; }
.breadcrumb a:hover { color: var(--ink-heading); }
.breadcrumb [aria-current="page"] { color: var(--ink-soft); }

/* ── Hero — copy + single CTA left, supporting line right ───────── */
.seo-hero > .container { padding-top: 88px; padding-bottom: 104px; }
.seo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 32px;
  /* H1 (row 1, col 1) + the supporting line (row 1, col 2) center against
     each other; the CTA auto-flows to row 2 under the H1. */
  align-items: center;
}
.seo-hero-title {
  font-family: var(--serif-display);
  font-size: clamp(36px, 3.8vw, 43px);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 1.08;
  color: var(--ink-heading);
  margin: 0;
  /* Cap the line width ~20% narrower than the lead column so the
     headline wraps into a tighter block (mobile resets this to none). */
  max-width: 442px;
}
.seo-hero-aside { align-self: center; }
.seo-hero-sub {
  font-family: var(--body-font);
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 480px;
}
/* Hero CTA on SEO pages: ~40% smaller than the shared .hero-cta (the
   homepage button is unchanged). Apple-logo mask scaled to match. */
.seo-hero .hero-cta {
  /* Match the top-nav CTA's size (same chassis as .topnav-cta). */
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 10px;
  justify-self: start; /* it's a direct grid item now — don't stretch */
}

/* ── Split header (title left / supporting line right) ──────────── */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: 48px;
  align-items: center;
}
/* Feature-section header: extra breathing room above + below so the
   two rules around it aren't cramped (+2rem top, +3rem bottom). */
.feature-head > .container { padding-top: 68px; padding-bottom: 84px; }
.section-title {
  font-family: var(--body-font);
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-heading);
  margin: 0;
}
.split-aside {
  font-family: var(--body-font);
  /* Same size/format as .feature-col-text — consistent supporting text
     throughout the page. */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 460px;
}
/* When a section keeps header + content in one band, the header needs
   space below it. */
.band-head { margin-bottom: 46px; }
.band-head .split-aside { max-width: 520px; }
/* Centered, stacked header (title over supporting line) — used where the
   section content below is centered (comparison table, FAQ). */
.split.band-head--center {
  display: block;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.band-head--center .split-aside {
  max-width: 560px;
  margin: 14px auto 0;
}
/* Left-aligned, stacked header (title over supporting line) — for
   sections whose content is left-aligned (e.g. the how-to steps). */
.split.band-head--stack { display: block; }
.band-head--stack .split-aside { max-width: 560px; margin-top: 14px; }

/* ── Feature row — 3 line-divided columns ───────────────────────────
   No outer border: the continuous side rails (.band--rail) are the
   outer verticals; only the inter-column dividers live here. */
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.feature-col { padding: 54px 36px; }
.feature-col:first-child { padding-left: 0; }
.feature-col:last-child { padding-right: 0; }
.feature-col + .feature-col { border-left: 1px solid var(--hairline); }
.feature-col-title {
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.18px;
  color: var(--ink-heading);
  margin: 0 0 14px;
}
.feature-col-text {
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.1px;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Use-case grid — flat bordered line grid ────────────────────── */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.usecase-card {
  display: block;
  padding: 28px 24px 32px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
}
a.usecase-card { transition: background 0.14s ease; }
a.usecase-card:hover { background: rgba(0, 0, 0, 0.02); }
.usecase-card-title {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.16px;
  color: var(--ink-heading);
  margin: 0 0 8px;
}
.usecase-card-text {
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin: 0;
}

/* ── How-to steps — left-aligned, serif numerals ────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  /* It's an <ol> for HowTo semantics — hide the default "1." markers
     since .step-num renders the numeral. */
  list-style: none;
  margin: 0;
  padding: 0;
}
.step-num {
  font-family: var(--mono-font);
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink-heading);
  display: block;
  margin-bottom: 16px;
}
.step-title {
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.18px;
  color: var(--ink-heading);
  margin: 0 0 8px;
}
.step-text {
  font-family: var(--body-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Comparison table — flat, squared ───────────────────────────── */
.compare {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--hairline);
  overflow: hidden;
  background: var(--card);
}
.compare table { width: 100%; border-collapse: collapse; }
.compare th,
.compare td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--body-font);
  font-size: 15px;
  letter-spacing: -0.14px;
  color: var(--ink-soft);
  vertical-align: middle;
}
.compare tbody tr:last-child td,
.compare tbody tr:last-child th { border-bottom: 0; }
.compare thead th {
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  background: rgba(0, 0, 0, 0.015);
}
.compare tbody th { font-weight: 500; color: var(--ink-heading); width: 46%; }
.compare .col-paper {
  background: rgba(215, 213, 175, 0.2);
  color: var(--ink-heading);
  font-weight: 500;
  text-align: center;
  width: 27%;
}
.compare .col-other { text-align: center; width: 27%; color: var(--ink-faint); }
.compare .ico-yes { color: #2c7a4b; font-weight: 600; }
.compare .ico-no { color: var(--ink-faint); }

/* ── FAQ accordion — native <details>, line-divided ─────────────── */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--body-font);
  font-size: 17.5px;
  font-weight: 500;
  letter-spacing: -0.18px;
  color: var(--ink-heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-marker { flex-shrink: 0; width: 18px; height: 18px; position: relative; }
.faq-marker::before,
.faq-marker::after { content: ""; position: absolute; background: var(--ink-soft); border-radius: 2px; }
.faq-marker::before { top: 8px; left: 0; width: 18px; height: 2px; }
.faq-marker::after { top: 0; left: 8px; width: 2px; height: 18px; transition: transform 0.2s ease; }
.faq-item[open] .faq-marker::after { transform: rotate(90deg); }
.faq-answer {
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.14px;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 0 24px;
  max-width: 68ch;
}
.faq-answer a { color: var(--ink-heading); text-decoration: underline; text-underline-offset: 2px; }

/* ── Related pages — flat bordered line grid (hub & spoke) ───────── */
/* Hub intro paragraph — topical/ranking copy under the hub hero. */
.hub-intro {
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.18px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 680px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
/* A grid trimmed to a single live card (avoids the broken
   3-col-with-1-card look until more pages exist). */
.related-grid--solo { grid-template-columns: minmax(0, 360px); }
.related-card {
  display: block;
  padding: 26px 26px 30px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  transition: background 0.14s ease;
}
.related-card:hover { background: rgba(0, 0, 0, 0.02); }
.related-card-eyebrow {
  display: block;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.related-card-title {
  font-family: var(--body-font);
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.17px;
  color: var(--ink-heading);
  margin: 0 0 7px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.related-card-title .arr { color: var(--ink-faint); transition: transform 0.14s ease; }
.related-card:hover .related-card-title .arr { transform: translate(2px, -2px); }
.related-card-text {
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
/* Trim related/hub cards to eyebrow + title only: hide the ↗ arrow glyph
   and the one-line description (kept in markup, easy to restore). */
.related-card-title .arr,
.related-card-text { display: none; }
.related-card-title { margin-bottom: 0; }

/* ── Final CTA — closing band ───────────────────────────────────── */
.seo-final { text-align: center; }
.seo-final .final-cta-title { margin-top: 0; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 920px) {
  /* Drop the side rails — at narrow widths they hug the screen edge. */
  .band--rail > .container { border-left: 0; border-right: 0; }
  .feature-head > .container { padding-top: 72px; padding-bottom: 72px; }

  .seo-hero-grid { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .seo-hero-title { max-width: none; }
  .seo-hero-sub { max-width: 560px; }

  .split { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .band-head { margin-bottom: 38px; }

  /* 3-col line grid → stacked rows divided by horizontal rules. */
  .feature-row { grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
  .feature-col { padding: 34px 0; border-bottom: 1px solid var(--hairline); }
  .feature-col:first-child, .feature-col:last-child { padding-left: 0; padding-right: 0; }
  .feature-col + .feature-col { border-left: 0; }

  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; gap: 26px; max-width: 520px; }
  .step { display: grid; grid-template-columns: 48px 1fr; align-items: start; column-gap: 18px; row-gap: 5px; }
  .step-num { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .step-title, .step-text { grid-column: 2; }
}
@media (max-width: 560px) {
  /* Phones: go full-width (the % gutter would otherwise eat content). */
  .container, .breadcrumb { width: 100%; }
  .band-pad > .container { padding-top: 56px; padding-bottom: 56px; }
  .seo-hero > .container { padding-top: 44px; }
  .usecase-grid { grid-template-columns: 1fr; }
  .compare th, .compare td { padding: 13px 12px; font-size: 13.5px; }
}

/* Honour reduced-motion for the hover transitions added here. */
@media (prefers-reduced-motion: reduce) {
  a.usecase-card, .related-card, .related-card-title .arr, .faq-marker::after { transition: none !important; }
}