/* Oak & Mason, the reference pages (Questions, Tax explained, Selling, Resources and its articles, Privacy, Terms and
   the 404 page), v3 draft. Built on 27 Sep 2026 for launch from existing v3 parts, without a canvas. Builds on
   om-tokens.css, om.css and inner.css (the contents strip). Class prefix om-; these move into om.css once signed off. */

[id] { scroll-margin-top: 24px; }

/* First screen: the page title on paper beside its lead, as the inner pages open, without a photograph */
.om-dochero { padding: 104px 0 0; }
.om-dochero__grid { display: grid; gap: 22px; }
.om-dochero__head { display: grid; gap: 18px; justify-items: start; }
.om-dochero__title { margin: 0; max-width: 13em; font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 42px; letter-spacing: -0.03em; font-variation-settings: 'opsz' 72; color: var(--slate-deep); text-wrap: balance; }
.om-dochero__side { display: grid; gap: 22px; align-content: end; justify-items: start; }
.om-dochero__lead { margin: 0; max-width: 32em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
.om-dochero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.om-dochero__meta { margin: 0; font: 400 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
@media (min-width: 1024px) {
  .om-dochero { padding-top: 136px; }
  .om-dochero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: end; }
  .om-dochero__title { font-size: 64px; line-height: 68px; }
  .om-dochero__lead { font-size: 18px; line-height: 29px; }
}
@media (prefers-reduced-motion: no-preference) {
  .om-dochero__grid > * { animation: om-rise .9s var(--om-ease) both; }
  .om-dochero__grid > :nth-child(2) { animation-delay: .08s; }
}
/* A page without a contents strip: a rule under the first screen */
.om-dochero--ruled .om-dochero__grid { padding-bottom: 40px; border-bottom: 1px solid var(--line); }

/* Long-form text (Privacy, Terms, the short reads): a contents list beside the text on desktop */
.om-doc { display: grid; gap: 40px; }
.om-doc__nav { display: none; }
@media (min-width: 1024px) {
  .om-doc { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 80px; align-items: start; }
  .om-doc__nav { display: grid; gap: 12px; position: sticky; top: 112px; padding-top: 6px; }
}
.om-doc__nav a { font: 500 15px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; border-radius: 2px; }
.om-doc__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.om-prose { max-width: 720px; }
.om-prose > * { margin: 0; }
.om-prose > * + * { margin-top: 18px; }
.om-prose h2 { margin-top: 56px; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-variation-settings: 'opsz' 60; color: var(--slate-deep); scroll-margin-top: 96px; text-wrap: balance; }
.om-prose > h2:first-child { margin-top: 0; }
.om-prose h3 { margin-top: 32px; font: 500 20px/28px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.om-prose p, .om-prose li { font: 400 17px/28px var(--font-sans); color: var(--ink-soft); text-wrap: pretty; }
.om-prose ul, .om-prose ol { padding-left: 22px; }
.om-prose li + li { margin-top: 8px; }
.om-prose a { color: var(--ink); text-underline-offset: 3px; }
.om-prose .om-risk--inline { margin-top: 32px; }
@media (min-width: 1024px) { .om-prose h2 { font-size: 34px; line-height: 40px; } }

/* A ruled list of links, two by two on desktop (as on Contact) */
.om-linklist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.om-linklist > li { border-bottom: 1px solid var(--line); }
.om-linklist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 22px 0 24px; color: var(--ink); text-decoration: none; }
.om-linklist__title { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; color: var(--slate-deep); }
.om-linklist__text { grid-column: 1; font: 400 16px/25px var(--font-sans); color: var(--ink-muted); }
.om-linklist .om-chip { grid-column: 2; grid-row: 1 / span 2; color: var(--ink); }
.om-linklist a:hover .om-linklist__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 1024px) { .om-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } }

/* How long selling takes: ruled rows of a route and its timing */
.om-timeline { width: 100%; max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line-strong); }
.om-timeline__row { display: grid; gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.om-timeline__row dt { font: 500 17px/26px var(--font-sans); color: var(--ink); }
.om-timeline__row dd { margin: 0; font: 400 17px/26px var(--font-sans); color: var(--ink-muted); }
@media (min-width: 768px) { .om-timeline__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: baseline; } }
.om-timeline-note { max-width: 900px; margin: 0 auto; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }

/* Still have a question: a stone band before the footer */
.om-ask { display: grid; gap: 24px; box-sizing: border-box; padding: 32px 24px; border-radius: var(--radius-lg); background: var(--stone); }
@media (min-width: 900px) { .om-ask { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 48px 56px; } }
.om-ask__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; color: var(--slate-deep); }
.om-ask__text { margin: 10px 0 0; max-width: 36em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.om-ask__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* The last section before the footer: no closing panel, so the footer's own top space is enough (as on Contact) */
.om-section--end { padding-bottom: 0; }

/* Resources: the two guides as cards, as at the foot of the guide pages */
.om-guidecards { display: grid; gap: var(--space-2); }
@media (min-width: 1024px) { .om-guidecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.om-guidecards .om-other { height: 100%; }
@media (min-width: 768px) { .om-guidecards .om-other { grid-template-columns: 110px minmax(0, 1fr); } .om-guidecards .om-other > .om-link { grid-column: 2; } }