/* Generated SEO pages and hubs (scripts/seo_render.py). Loaded after slate.css.
   The section, card and Q&A styles are the ones the hand-written landing pages
   use inline (apple-watch-voice-recorder.html), so generated pages look the same. */

/* ================= HERO ================= */
.sp-hero { padding: 40px 0 72px; }
.sp-hero h1 { margin-top: 28px; max-width: 920px; font-size: clamp(40px, 5.4vw, 76px); }
.sp-lede { margin-top: 24px; max-width: 640px; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.sp-lede a { text-decoration: underline; text-underline-offset: 3px; color: var(--violet); }
.sp-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
@media (max-width: 560px) { .sp-hero { padding: 24px 0 48px; } .sp-lede { font-size: 17px; } }

/* Breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font: 500 12.5px/1.4 var(--mono); letter-spacing: .02em; color: var(--graphite); }
.crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .5; }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }

/* ================= Language facts (transcribe pages) ================= */
.sp-facts-sec { padding-bottom: 96px; }
.sp-facts-h { font-size: clamp(26px, 2.6vw, 36px); }
.sp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0 0; }
.sp-facts > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 20px 22px; }
.sp-facts dt { font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.sp-facts dd { margin: 8px 0 0; font: 650 17px/1.35 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.sp-facts-note { margin-top: 14px; font-size: 14px; color: var(--graphite); }
.sp-facts-note a { text-decoration: underline; text-underline-offset: 3px; color: var(--violet); }
@media (max-width: 560px) { .sp-facts-sec { padding-bottom: 64px; } }

/* ================= Q&A sections ================= */
.sp-sec { padding-top: 0; }
.qa { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.qa + .qa { margin-top: 96px; padding-top: 96px; border-top: 1px solid var(--rule); }
.qa h2 { font-size: clamp(32px, 3.6vw, 50px); margin-top: 18px; }
.qa-body > p { color: var(--ink-2); font-size: 18px; }
.qa-body > p + p { margin-top: 16px; }
.qa-body a { text-decoration: underline; text-underline-offset: 3px; color: var(--violet); }
.ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; font-size: 16px; color: var(--ink-2); }
.ticks li::before { content: "✓"; font-weight: 800; color: var(--violet); }
@media (max-width: 900px) {
  .qa { grid-template-columns: 1fr; gap: 20px; }
  .qa + .qa { margin-top: 64px; padding-top: 64px; }
}

/* FAQ heading (the .faq block itself is in slate.css) */
.faq { padding-top: 0; }
.sp-faq-h { margin-top: 18px; font-size: clamp(30px, 3.4vw, 46px); }
.faq details p a { text-decoration: underline; text-underline-offset: 3px; color: var(--violet); }

/* ================= Related pages and hub cards ================= */
.rel-sec { padding: 0 0 120px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.sp-hub .rel-grid { margin-top: 0; }
.rel-grid a { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.rel-grid a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.rel-grid b { display: block; font: 700 18px/1.2 var(--display); letter-spacing: -0.02em; }
.rel-grid b::after { content: " →"; color: var(--violet); }
.rel-grid small { display: block; margin-top: 6px; font-size: 14.5px; color: var(--graphite); }
@media (max-width: 900px) { .rel-grid { grid-template-columns: 1fr 1fr; } .rel-sec { padding-bottom: 72px; } }
@media (max-width: 560px) { .rel-grid { grid-template-columns: 1fr; } }

.sp-updated { margin-block: 0 28px; }

/* ================= Comparisons (compare and alternatives pages) =================
   Slate first and in the brand colour; the competitor's side quieter. One rhythm (.sp-band)
   for every section, so the page reads as a short sequence rather than a long document. */
.sp-band { padding: 72px 0; }
.sp-hero + .sp-band { padding-top: 8px; }
.sp-h2 { font-size: clamp(28px, 3vw, 40px); }
.sp-note { margin-top: 10px; max-width: 640px; font-size: 14.5px; color: var(--graphite); }
.sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) { .sp-band { padding: 48px 0; } }

/* Compare pages follow photoai.com/compare: verdict first, a counted scoreboard, then a grouped
   ✓/✕ table. --sp-ok is the one colour slate.css doesn't have (a green that passes 4.5:1 on --card);
   ✕ uses the existing --live red. */
:root { --sp-ok: #17803d; }

.sp-vs-hero { padding-bottom: 8px; }
.sp-vs-hero h1 { font-size: clamp(34px, 4.4vw, 60px); }
.sp-vs-sub { margin-top: 16px; max-width: 760px; font-size: 18px; color: var(--graphite); }
.sp-vs-sub a, .sp-tldr a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.sp-tldr { margin-top: 28px; max-width: 920px; background: var(--lilac); border: 1px solid var(--lilac-2); border-radius: var(--r-lg); padding: 24px 28px; }
.sp-tldr p { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.sp-tldr p + p { margin-top: 12px; }
.sp-tldr p:first-child { font-size: 17.5px; color: var(--ink); }
.sp-tldr b { color: var(--violet-deep); }

/* Scoreboard: counted from the ✓/✕ rows (seo_render.score) */
.sp-score-sec { padding-top: 40px; padding-bottom: 0; }
.sp-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 920px; }
.sp-score > div { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--card); padding: 18px; text-align: center; }
.sp-score b { display: block; font: 800 40px/1 var(--display); letter-spacing: -0.03em; }
.sp-score span { display: block; margin-top: 6px; font-size: 14px; color: var(--graphite); }
.sp-score .win { background: var(--lilac); border-color: var(--lilac-2); }
.sp-score .win b { color: var(--violet); }
.sp-score .tie b { color: var(--graphite); }
.sp-score .lose b { color: var(--graphite-2); }

/* The grouped ✓/✕ table */
.sp-matrix-sec { padding-top: 24px; }
.sp-matrix-box:focus-visible { outline: 3px solid var(--violet-2); outline-offset: 3px; }
.sp-matrix-box { max-width: 920px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); overflow-x: auto; }
.sp-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.4; }
.sp-matrix th, .sp-matrix td { padding: 11px 18px; text-align: left; vertical-align: middle; border-top: 1px solid var(--rule); }
.sp-matrix thead th { border-top: 0; padding-top: 16px; padding-bottom: 12px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.sp-matrix thead th:first-child { width: 46%; }
.sp-matrix thead th.us { color: var(--violet-deep); }
.sp-matrix td { text-align: center; color: var(--ink-2); }
.sp-matrix tbody th { font-weight: 500; color: var(--ink); }
.sp-matrix .us { background: rgba(235, 230, 255, .6); }
.sp-matrix td.us { font-weight: 600; color: var(--ink); }
.sp-matrix .sp-grp th { padding-top: 14px; padding-bottom: 8px; background: var(--paper-2); font: 700 13px/1.2 var(--body); letter-spacing: .02em; color: var(--ink); text-align: left; }
.sp-matrix .txt { font-size: 14px; }
.sp-matrix .muted { color: var(--graphite-2); }
.sp-matrix sup { font: 500 10px/1 var(--mono); color: var(--graphite-2); }
.sp-yes, .sp-no { font-size: 17px; font-weight: 800; }
.sp-yes { color: var(--sp-ok); }
.sp-q { font-size: 12.5px; color: var(--graphite); }
.sp-no { color: var(--live); }
.sp-matrix-sec .sp-note { max-width: 920px; }
@media (max-width: 640px) {
  .sp-matrix { font-size: 14px; }
  .sp-matrix th, .sp-matrix td { padding: 10px 10px; }
  .sp-matrix .txt { font-size: 12.5px; line-height: 1.35; text-align: left; }
  .sp-matrix thead th:first-child { width: 44%; }
  .sp-matrix:has(thead th:nth-child(4)) { min-width: 400px; font-size: 13px; }  /* Apple: two competitor columns */
  .sp-score b { font-size: 32px; }
  .sp-score span { font-size: 12.5px; }
}

/* Other comparisons */
.sp-more { padding-top: 24px; }
.sp-h3 { font-size: clamp(22px, 2.2vw, 28px); }
.sp-more .more-link + .sp-h3 { margin-top: 32px; }
.sp-vs-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sp-vs-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: 14.5px; color: var(--ink); background: var(--card); }
.sp-vs-links a:hover { border-color: var(--violet); color: var(--violet); }

/* The FAQ (slate.css) keeps its layout but takes the band rhythm here */
.sp-matrix-sec + .faq, .sp-detail + .faq { padding: 24px 0 72px; }
.sp-alt a, .sp-detail a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }

/* The hand-written sections, as one readable column */
.sp-detail .wrap { max-width: 800px; }
.sp-block + .sp-block { margin-top: 48px; }
.sp-block h2 { font-size: clamp(24px, 2.4vw, 30px); }
.sp-block p { margin-top: 12px; font-size: 17px; color: var(--ink-2); }

/* Closing download band */
.sp-cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; background: var(--ink); color: var(--paper); border-radius: var(--r-lg); padding: 44px 48px; }
.sp-cta-card h2 { color: var(--paper); font-size: clamp(30px, 3.4vw, 44px); }
.sp-cta-card p { margin-top: 8px; color: rgba(246, 243, 236, .72); }
.sp-cta .sp-cta-card p a { color: var(--lilac-2); }
.sp-cta .sp-dl { margin-top: 0; }
.sp-cta .btn-line { color: var(--paper); border-color: rgba(246, 243, 236, .3); }
.sp-cta .btn-line:hover { background: rgba(246, 243, 236, .08); }
@media (max-width: 640px) { .sp-cta-card { padding: 32px 24px; } }

.sp-alts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 24px; }
.sp-alt { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 22px; }
.sp-alt.us { background: var(--lilac); }
.sp-alt h3 { font-size: 20px; }
.sp-alt > p { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.sp-alt-facts { display: grid; gap: 10px; margin: 16px 0 0; }
.sp-alt-facts dt { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.sp-alt-facts dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.4; }
.sp-alt-checked { margin-top: 14px; font: 500 11.5px/1.3 var(--mono); color: var(--graphite-2); }

.sp-sources { padding-top: 0; }
.sources { font-size: 13px; color: var(--graphite); }
.sources h3 { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.sources ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.sources a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sources p { margin-top: 12px; }