/* Guides, product and comparison pages (2026-10-27). Loads after landing.css and uses its tokens,
   header, footer, buttons, plans and questions. Only page-specific pieces live here. */
.page-hero{padding:72px 0 48px;border-bottom:1px solid var(--line)}
.page-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
.page-hero h1{font-size:48px;line-height:1.1}
.page-hero .hero-copy{max-width:760px}

/* At a glance: four short facts, quiet and in sentence case */
.glance{display:grid;grid-template-columns:1fr 1fr;margin:0;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card);overflow:hidden}
.glance div{padding:16px 18px;border-top:1px solid var(--line)}
.glance div:nth-child(-n+2){border-top:0}
.glance div:nth-child(odd){border-right:1px solid var(--line)}
.glance dt{font-size:var(--size-label);font-weight:600;color:var(--muted)}
.glance dd{margin:2px 0 0;font-size:var(--size-body);font-weight:600}

/* Reading column */
.prose-wrap{padding-top:64px;padding-bottom:64px}
.prose{max-width:760px;display:grid;gap:48px}
.prose section{display:grid;gap:14px}
.prose h2{font-size:28px;line-height:1.25}
.prose p{color:var(--ink-2)}
.prose .ticks{margin-top:4px}

/* Comparison table */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card)}
.comparison table{width:100%;border-collapse:collapse;font-size:var(--size-small);line-height:1.43}
.comparison th,.comparison td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.comparison thead th{border-top:0;font-weight:600;color:var(--muted);background:var(--subtle)}
.comparison tbody th{font-weight:600;width:28%}
.comparison td{color:var(--ink-2)}

/* Plans on the pricing page */
.page-plans{max-width:1280px;margin:0 auto;padding:0 var(--gutter) 64px;display:grid;gap:20px}

/* Guides index */
.guide-list{display:grid;gap:20px}
.guide-list ul{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.guide-list a{display:grid;gap:8px;height:100%;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card);text-decoration:none;align-content:start}
.guide-list a:hover{border-color:var(--ink)}
.guide-list h3{font-size:var(--size-h3);line-height:1.4}
.guide-list p{font-size:var(--size-small);line-height:1.5;color:var(--muted)}
.guide-list .text-link{margin-top:4px;font-size:var(--size-small)}
.journal-callout{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border-radius:var(--radius-card);background:var(--subtle)}
.journal-callout h2{font-size:var(--size-h3);line-height:1.4}
.journal-callout p{margin-top:4px;color:var(--muted)}
.prose:has(.guide-list){max-width:none}

/* Keep reading */
.related{padding:0 0 64px;display:grid;gap:12px;max-width:760px}
.related h2{font-size:var(--size-h3);line-height:1.4}
.related ul{border-top:1px solid var(--line)}
.related li{border-bottom:1px solid var(--line)}
.related a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;text-decoration:none;font-weight:600}
.related a:hover span{text-decoration:underline;text-underline-offset:3px}

/* Closing call to action */
.page-close{background:var(--card);border-top:1px solid var(--line)}
.close-row{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:64px;padding-bottom:64px}
.close-row h2{font-size:var(--size-h2)}
.close-row .lead{margin-top:8px}

@media (max-width:1040px){
  .page-hero-grid{grid-template-columns:1fr;gap:32px;align-items:start}
}
@media (max-width:720px){
  .page-hero{padding:32px 0 32px}
  .page-hero h1{font-size:34px}
  .prose h2{font-size:24px}
  .prose-wrap{padding-top:40px;padding-bottom:40px}
  .guide-list ul{grid-template-columns:1fr}
  .journal-callout,.close-row{flex-direction:column;align-items:flex-start}
  .close-row .button{width:100%}
}