/* Guide pages: the landing page's design system (site.css) plus a reading column. Guides read like a clean
   memo from the same paper world: Archivo for structure, Caslon for anything that is contract language. */
.masthead nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.article { max-width: 46rem; padding-block: clamp(20px, 4vw, 48px) clamp(64px, 9vw, 112px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-sm); color: var(--graphite); }
.crumbs a { color: inherit; }
.article h1 {
  margin-top: 18px; font: 800 clamp(2.125rem, 1.35rem + 3.2vw, 3.25rem)/1.02 var(--sans);
  font-variation-settings: "wdth" 108; letter-spacing: -0.025em;
}
.updated { margin-top: 14px; font: italic 400 var(--t-sm)/1.4 var(--serif); color: var(--graphite); }
.article .answer { margin-top: 26px; font-size: var(--t-md); line-height: 1.5; }
.article h2 {
  margin-top: clamp(44px, 6vw, 64px); font: 800 var(--t-lg)/1.15 var(--sans);
  font-variation-settings: "wdth" 105; letter-spacing: -0.015em;
}
.article p, .article ul, .article ol { margin-top: 14px; }
.article ul, .article ol { padding-left: 1.3em; display: grid; gap: 10px; }
.article li::marker { font-weight: 700; }
.article a:not(.btn) { text-underline-offset: 3px; }
.article .faq { margin-top: 18px; }
.article .faq details p { margin-top: 0; }
.article .actions { margin-top: 18px; align-items: center; }

.table-scroll { margin-top: 18px; overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); line-height: 1.45; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
table.data th { font-weight: 700; border-bottom: 2px solid var(--ink); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

.clause-sheet {
  margin-top: 26px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 30px 60px -36px var(--shadow);
  padding: clamp(20px, 4vw, 36px) clamp(18px, 4vw, 36px) clamp(20px, 4vw, 36px) clamp(26px, 5vw, 48px);
  font: 400 var(--t-base)/1.7 var(--serif);
}
.clause-sheet p { margin-top: 0; }
.clause-sheet b { margin-right: 0.35em; }

.calc {
  margin-top: 26px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--rule); background: var(--paper);
  display: grid; gap: 22px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.cta-block { margin-top: clamp(52px, 7vw, 80px); padding: clamp(22px, 4vw, 36px); background: var(--desk); }
.cta-block h2 { margin-top: 0; }

.related h2 { margin-top: clamp(52px, 7vw, 72px); }

/* Guide list: on the home page and under each guide. */
.guide-list { list-style: none; padding: 0; margin-top: 28px; display: grid; border-top: 2px solid var(--ink); }
.guide-list li { border-bottom: 1px solid var(--rule); padding-block: 18px; display: grid; gap: 4px; }
.guide-list a { font: 700 var(--t-md)/1.25 var(--sans); text-decoration: none; }
.guide-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.guide-list span { color: var(--graphite); max-width: 62ch; }
.article .guide-list { padding-left: 0; gap: 0; }

.site-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-links a { color: var(--graphite); }
.site-links a:hover { color: var(--ink); }

@media (max-width: 720px) {
  .masthead nav a[aria-current="page"]:not(.signin) { display: none; }
}