/* Readable, indexable Roadwise study pages. Loaded after the app's shared type and tokens. */
body.seo-page {
  --seo-muted: #606d60;
  --seo-border: #d8decf;
  margin: 0;
  background: var(--paper, #f8f7f1);
  color: var(--ink, #273d33);
  font-family: var(--sans, 'DM Sans', sans-serif);
  font-size: 16px;
  line-height: 1.75;
}
.seo-page a { text-underline-offset: 4px; }
.seo-page a:focus-visible, .seo-page button:focus-visible, .seo-page summary:focus-visible {
  outline: 3px solid var(--rust, #b45139);
  outline-offset: 5px;
}
.seo-page img { height: auto; max-width: 100%; }
.seo-page h1, .seo-page h2, .seo-page h3 { color: var(--green, #244d3f); overflow-wrap: break-word; }
.seo-page h1 { font-family: var(--serif, Fraunces, Georgia, serif); font-size: clamp(38px, 5.1vw, 65px); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; margin: 0 0 23px; }
.seo-page h2 { font-family: var(--serif, Fraunces, Georgia, serif); font-size: clamp(29px, 3vw, 39px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; margin: 0 0 21px; }
.seo-page h3 { font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; margin: 0 0 12px; }
.seo-page p { margin: 0 0 20px; }
.seo-page .muted { color: var(--seo-muted); }
.seo-page .small { font-size: 13px; }
.seo-header {
  width: min(100% - 64px, 1200px);
  min-height: 100px;
  margin: 0 auto;
  padding: 24px 0;
  border-bottom: 1px solid var(--seo-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.seo-header .brand { flex: none; font-size: 28px; }
.seo-brand { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; display: inline-flex; align-items: center; gap: 10px; }
.seo-brand svg { width: 34px; height: 38px; }
.seo-nav { display: flex; align-items: center; justify-content: flex-end; gap: 25px; flex-wrap: wrap; font-size: 14px; line-height: 1.4; }
.seo-nav a { padding: 8px 0; min-height: 36px; display: inline-flex; align-items: center; }
.seo-nav a:hover, .seo-breadcrumbs a:hover { color: var(--rust, #b45139); }
.seo-nav a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--rust, #b45139); text-underline-offset: 8px; }
.seo-nav .seo-button, .seo-nav .button { padding: 11px 17px; min-height: 43px; font-size: 13px; }
.seo-main { width: min(100% - 64px, 1140px); margin: 0 auto; padding: 29px 0 85px; min-height: 65vh; }
.seo-breadcrumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; font-size: 12px; line-height: 1.7; color: var(--seo-muted); margin: 0 0 38px; overflow-wrap: anywhere; }
.seo-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.seo-breadcrumbs li { display: inline; }
.seo-breadcrumbs li + li::before { content: '/'; color: #8b9482; padding-right: 10px; }
.seo-breadcrumbs [aria-current='page'] { color: var(--ink, #273d33); }
.seo-hero { padding: 20px 0 45px; max-width: 940px; }
.seo-hero h1 { max-width: 900px; }
.seo-hero:has(.seo-hero-art) { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 50px; align-items: center; max-width: none; }
.seo-hero > div { min-width: 0; }
.seo-hero-art { background: #e3e9d9; border: 1px solid #d5ddc7; border-radius: 15px; overflow: hidden; }
.seo-hero-art img { width: 100%; aspect-ratio: 1.08; height: auto; object-fit: cover; }
.seo-eyebrow { display: block; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase; color: var(--rust, #b45139); margin: 0 0 17px; }
.seo-copy { font-size: 18px; line-height: 1.8; color: var(--seo-muted); max-width: 750px; }
.seo-copy p, p.seo-copy { margin: 0 0 24px; }
.seo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 17px; margin-top: 27px; }
.seo-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 49px; border: 1px solid var(--green, #244d3f); border-radius: 7px; padding: 12px 22px; background: var(--green, #244d3f); color: #fffefa; font-size: 14px; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; transition: background .15s ease, border-color .15s ease; }
.seo-button:hover { background: #32614e; border-color: #32614e; color: #fffefa; }
.seo-button-secondary { color: var(--green, #244d3f); background: transparent; border-color: #bec8b5; }
.seo-button-secondary:hover { color: var(--green, #244d3f); background: #e9ede1; border-color: #8c9d7c; }
.seo-actions .text-link { font-size: 14px; min-height: 44px; }
.seo-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 57px; padding: 26px 0; border-block: 1px solid var(--seo-border); }
.seo-facts:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seo-facts > div, .seo-facts > li { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 0 28px; border-left: 1px solid var(--seo-border); }
.seo-facts > :first-child { border-left: 0; padding-left: 0; }
.seo-facts dt, .seo-facts small, .seo-facts span { font-family: var(--sans, 'DM Sans', sans-serif); font-size: 13px; font-weight: 400; color: var(--seo-muted); line-height: 1.5; }
.seo-facts dd { margin: 0; overflow-wrap: anywhere; }
.seo-facts strong, .seo-facts b, .seo-facts dd { font-family: var(--serif, Fraunces, Georgia, serif); font-size: clamp(24px, 3vw, 35px); line-height: 1.3; font-weight: 400; letter-spacing: -.035em; color: var(--green, #244d3f); }
.seo-facts dt + dd { margin-top: 6px; }
.seo-facts strong + span, .seo-facts strong + small, .seo-facts b + span { margin-top: 7px; }
.seo-section { margin: 0 0 62px; scroll-margin-top: 30px; min-width: 0; }
.seo-section > p { max-width: 780px; color: var(--seo-muted); }
.seo-section > .seo-eyebrow { margin-bottom: 13px; }
.seo-section > h2 + p { margin-top: -6px; margin-bottom: 27px; }
.seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.seo-card { min-width: 0; border: 1px solid var(--seo-border); border-radius: 13px; background: var(--white, #fffefa); padding: 27px; display: flex; flex-direction: column; align-items: flex-start; }
.seo-card h2, .seo-card h3 { font-family: var(--serif, Fraunces, Georgia, serif); font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; margin: 0 0 15px; }
.seo-card p { color: var(--seo-muted); font-size: 15px; line-height: 1.75; margin: 0 0 22px; }
.seo-card .seo-eyebrow { font-size: 10px; margin-bottom: 18px; }
.seo-card > a:last-child, .seo-card > .text-link:last-child, .seo-card > .seo-button:last-child { margin-top: auto; }
.seo-card .text-link { min-height: 36px; font-size: 13px; }
.seo-card > .seo-toc { width: 100%; margin: 0; padding: 15px 0 0; background: transparent; border: 0; border-top: 1px solid var(--seo-border); border-radius: 0; list-style: none; }
.seo-card > .seo-toc li { margin: 3px 0; }
.seo-card > .seo-toc a { display: block; padding: 6px 0; }
.seo-card ul { padding-left: 20px; margin: 0 0 20px; color: var(--seo-muted); font-size: 14px; }
a.seo-card { transition: background .15s, border-color .15s; }
a.seo-card:hover { background: #eef1e5; border-color: #a6b296; }
.seo-state-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; padding: 0; margin: 24px 0 0; list-style: none; }
.seo-state-grid > li { min-width: 0; }
.seo-state-link { min-height: 55px; padding: 14px 0; border-bottom: 1px solid var(--seo-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--green, #244d3f); font-size: 15px; line-height: 1.5; }
.seo-state-link:hover { color: var(--rust, #b45139); border-bottom-color: #aa785e; }
.seo-state-link span, .seo-state-link small { min-width: 0; }
.seo-state-link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.seo-state-link > span:first-child { flex: none; align-self: flex-start; margin-top: 3px; }
.seo-state-link > span:last-child { flex: none; align-self: center; }
.seo-state-link strong { display: block; font-weight: 500; line-height: 1.55; overflow-wrap: break-word; }
.seo-state-link small { display: block; line-height: 1.65; letter-spacing: 0; white-space: normal; }
.seo-state-link small, .seo-state-link .seo-state-code { font-size: 11px; letter-spacing: .06em; color: var(--seo-muted); flex: none; }
.seo-prose { max-width: 760px; margin: 0 auto 48px; font-size: 17px; line-height: 1.9; min-width: 0; overflow-wrap: break-word; }
.seo-prose > p, .seo-prose > ul, .seo-prose > ol { margin-bottom: 25px; }
.seo-prose h2 { font-size: 34px; line-height: 1.25; margin-top: 42px; margin-bottom: 20px; }
.seo-prose h3 { font-size: 21px; font-weight: 600; line-height: 1.4; margin-top: 32px; margin-bottom: 15px; }
.seo-prose ul, .seo-prose ol { padding-left: 23px; }
.seo-prose li { padding-left: 4px; margin-bottom: 10px; }
.seo-prose a:not(.seo-button):not(.button) { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #8f9e82; }
.seo-prose a:not(.seo-button):not(.button):hover { color: var(--rust, #b45139); }
.seo-prose figure { padding: 24px; margin: 30px 0; border: 1px solid var(--seo-border); border-radius: 10px; background: var(--white, #fffefa); }
.seo-prose figure img { max-height: 330px; object-fit: contain; margin: 0 auto; }
.seo-prose figcaption { color: var(--seo-muted); font-size: 13px; line-height: 1.6; text-align: center; margin-top: 15px; }
.seo-prose blockquote { margin: 28px 0; padding: 22px 27px; border-left: 3px solid #799069; background: #e9efdf; }
.seo-prose blockquote p:last-child { margin-bottom: 0; }
.seo-lesson-block { margin: 27px 0; min-width: 0; }
.seo-lesson-block p:last-child { margin-bottom: 0; }
.seo-lesson-block.seo-rule, .seo-lesson-block.rule, .seo-lesson-block[data-type='rule'], .seo-lesson-rule { border-left: 3px solid #799069; background: #e9efdf; padding: 23px 27px; }
.seo-lesson-block.seo-tip, .seo-lesson-block.tip, .seo-lesson-block[data-type='tip'], .seo-lesson-tip { background: #f1e8cd; padding: 22px 25px; border-radius: 8px; font-size: 16px; }
.seo-lesson-block.seo-term, .seo-lesson-block.term, .seo-lesson-block[data-type='term'], .seo-lesson-term { border: 1px solid var(--seo-border); border-radius: 9px; padding: 24px; }
.seo-lesson-block.seo-number, .seo-lesson-block.number, .seo-lesson-block[data-type='number'], .seo-lesson-number { border-block: 1px solid var(--seo-border); padding: 24px 0; display: flex; align-items: center; gap: 24px; }
.seo-lesson-block.seo-number > strong, .seo-lesson-block.number > strong, .seo-lesson-number > strong { font-family: var(--serif, Fraunces, Georgia, serif); font-size: 49px; color: var(--rust, #b45139); font-weight: 400; line-height: 1.1; flex: none; }
.seo-lesson-block.seo-example, .seo-lesson-block.example, .seo-lesson-block[data-type='example'], .seo-lesson-example { border-left: 2px solid var(--rust, #b45139); padding-left: 23px; }
.seo-lesson-block.table, .seo-lesson-block[data-type='table'], .seo-table-wrap, .seo-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.seo-page table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.65; text-align: left; }
.seo-page th, .seo-page td { padding: 13px 15px; border: 1px solid var(--seo-border); vertical-align: top; }
.seo-page th { font-size: 13px; background: var(--sage, #e5eadc); font-weight: 600; }
.seo-source { display: block; font-size: 13px; line-height: 1.7; color: var(--seo-muted); margin-top: 15px; overflow-wrap: anywhere; }
a.seo-source, .seo-source a { text-decoration: underline; text-underline-offset: 4px; }
.seo-source + .seo-source { margin-top: 7px; }
aside.seo-source { border-top: 1px solid var(--seo-border); padding-top: 24px; margin-top: 38px; }
.seo-source p { margin: 0 0 12px; }
.seo-source summary { cursor: pointer; color: var(--green, #244d3f); padding: 6px 0; }
.seo-source details > p { margin-top: 12px; }
.seo-caption { color: var(--seo-muted); font-size: 13px; line-height: 1.7; text-align: center; margin-top: 12px; }
.seo-related { border-top: 1px solid var(--seo-border); padding-top: 36px; margin-top: 46px; }
.seo-related ul { padding-left: 22px; }
.seo-related a:not(.seo-button) { color: var(--green, #244d3f); text-decoration: underline; text-decoration-color: #b2bfa5; }
.seo-prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 27px; margin-top: 38px; border-top: 1px solid var(--seo-border); }
.seo-prev-next > a { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--seo-border); border-radius: 9px; color: var(--green, #244d3f); line-height: 1.6; }
.seo-prev-next > a:hover { background: #edf0e4; border-color: #a0b08f; }
.seo-prev-next > a:last-child { text-align: right; }
.seo-prev-next small { color: var(--seo-muted); font-size: 12px; }
.seo-empty { border: 1px solid var(--seo-border); border-radius: 11px; padding: 30px; background: #edf0e4; color: var(--seo-muted); }
.seo-questions { display: grid; gap: 16px; margin-top: 25px; }
.seo-question { min-width: 0; padding: 25px 27px; background: var(--white, #fffefa); border: 1px solid var(--seo-border); border-radius: 10px; }
.seo-question h2, .seo-question h3 { font-family: var(--sans, 'DM Sans', sans-serif); font-size: 19px; font-weight: 600; line-height: 1.5; margin: 0 0 15px; letter-spacing: -.02em; }
.seo-question p { margin: 0 0 16px; }
.seo-question p:last-child { margin-bottom: 0; }
.seo-question ul, .seo-question ol { padding-left: 24px; margin: 15px 0 21px; }
.seo-question li { margin-bottom: 9px; padding-left: 5px; }
.seo-question img { max-width: min(100%, 260px); max-height: 190px; object-fit: contain; margin: 18px auto 23px; }
.seo-question summary { cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.65; padding: 0 4px 0 0; }
.seo-question summary + * { margin-top: 20px; }
.seo-question details { padding-top: 16px; border-top: 1px solid var(--seo-border); }
details.seo-question[open] > summary { padding-bottom: 19px; border-bottom: 1px solid var(--seo-border); margin-bottom: 20px; }
.seo-question .seo-answer, .seo-question .correct-answer { background: #eaf0e1; border-radius: 6px; padding: 14px 17px; color: var(--green, #244d3f); }
.seo-toc { padding: 25px 28px; background: #edf0e4; border: 1px solid var(--seo-border); border-radius: 11px; margin: 0 0 37px; }
.seo-toc h2, .seo-toc h3 { font-family: var(--sans, 'DM Sans', sans-serif); font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.seo-toc ul, .seo-toc ol { padding: 0; margin: 0; list-style: none; }
.seo-toc:is(ol, ul) { list-style: none; }
.seo-toc small { display: block; font-size: 12px; line-height: 1.6; color: var(--seo-muted); margin: 2px 0 9px; }
.seo-toc li { padding: 0; margin: 7px 0; }
.seo-toc a { display: inline-block; padding: 5px 0; color: var(--green, #244d3f); font-size: 14px; line-height: 1.65; text-decoration: underline; text-decoration-color: #b8c3ad; }
.seo-toc a:hover { color: var(--rust, #b45139); }
.seo-sign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 27px; }
.seo-sign-card { min-width: 0; border: 1px solid var(--seo-border); background: var(--white, #fffefa); border-radius: 12px; padding: 25px; }
.seo-sign-card img { width: 160px; height: 120px; object-fit: contain; margin: 8px auto 24px; }
.seo-sign-card h2, .seo-sign-card h3 { font-family: var(--sans, 'DM Sans', sans-serif); font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 13px; }
.seo-sign-card p { font-size: 15px; line-height: 1.75; margin-bottom: 15px; color: var(--seo-muted); }
.seo-sign-card p:last-child { margin-bottom: 0; }
.seo-sign-card strong { color: var(--green, #244d3f); }
.seo-footer { width: min(100% - 64px, 1200px); margin: 0 auto; padding: 29px 0 35px; border-top: 1px solid var(--seo-border); display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; font-size: 13px; line-height: 1.7; color: var(--seo-muted); }
.seo-footer > p { max-width: 640px; margin: 0; }
.seo-footer .brand, .seo-footer .seo-brand { color: var(--green, #244d3f); font-size: 22px; }
.seo-footer nav, .seo-footer > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-left: auto; }
.seo-footer a:hover { color: var(--rust, #b45139); }
@media (min-width: 1440px) {
  .seo-hero { padding-top: 32px; padding-bottom: 52px; }
  .seo-main { padding-top: 34px; }
}
@media (max-width: 1000px) {
  .seo-header, .seo-footer { width: calc(100% - 48px); }
  .seo-main { width: calc(100% - 48px); }
  .seo-header { gap: 24px; }
  .seo-nav { gap: 20px; font-size: 13px; }
  .seo-hero:has(.seo-hero-art) { gap: 32px; }
  .seo-hero:has(.seo-hero-art) h1 { font-size: 49px; }
  .seo-grid { gap: 17px; }
  .seo-card { padding: 23px; }
  .seo-card h2, .seo-card h3 { font-size: 24px; }
  .seo-state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 23px; }
  .seo-sign-grid { gap: 16px; }
  .seo-sign-card { padding: 23px 21px; }
}
@media (max-width: 760px) {
  .seo-header { min-height: 87px; gap: 20px; padding: 21px 0; flex-wrap: wrap; }
  .seo-header .brand, .seo-brand { font-size: 25px; }
  .seo-nav { gap: 12px 20px; font-size: 13px; }
  .seo-main { padding-top: 24px; padding-bottom: 58px; }
  .seo-breadcrumbs { margin-bottom: 27px; font-size: 12px; }
  .seo-hero { padding-top: 14px; padding-bottom: 34px; }
  .seo-hero:has(.seo-hero-art) { grid-template-columns: 1fr; gap: 30px; }
  .seo-hero:has(.seo-hero-art) h1 { font-size: clamp(39px, 7vw, 51px); }
  .seo-hero-art { max-width: 540px; }
  .seo-hero-art img { aspect-ratio: 1.5; max-height: 340px; }
  .seo-copy { font-size: 17px; line-height: 1.8; }
  .seo-facts, .seo-facts:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; margin-bottom: 43px; padding: 23px 0; }
  .seo-facts > :nth-child(odd) { border-left: 0; padding-left: 0; }
  .seo-facts > div, .seo-facts > li { padding: 0 20px; }
  .seo-facts > :first-child { padding-left: 0; }
  .seo-facts dt, .seo-facts small, .seo-facts span { font-size: 12px; }
  .seo-section { margin-bottom: 45px; }
  .seo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 25px; }
  .seo-prose { font-size: 16px; line-height: 1.85; }
  .seo-prose h2 { font-size: 30px; margin-top: 35px; }
  .seo-prose h3 { font-size: 20px; }
  .seo-sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-footer { align-items: flex-start; gap: 17px; }
  .seo-footer > p { flex-basis: 100%; order: 2; }
  .seo-footer nav, .seo-footer > div { font-size: 12px; }
}
@media (max-width: 500px) {
  .seo-header, .seo-footer, .seo-main { width: calc(100% - 40px); }
  .seo-header { padding: 20px 0 16px; row-gap: 17px; }
  .seo-header .brand { font-size: 26px; }
  .seo-nav { width: 100%; justify-content: flex-start; gap: 9px 20px; border-top: 1px solid var(--seo-border); padding-top: 12px; }
  .seo-nav a { font-size: 12px; min-height: 38px; }
  .seo-nav .seo-button, .seo-nav .button { min-height: 38px; font-size: 12px; padding: 8px 13px; }
  .seo-main { padding-top: 22px; padding-bottom: 45px; }
  .seo-breadcrumbs { font-size: 11px; gap: 3px 8px; margin-bottom: 24px; }
  .seo-breadcrumbs ol { gap: 3px 8px; }
  .seo-breadcrumbs li + li::before { padding-right: 8px; }
  .seo-eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 14px; }
  .seo-hero { padding: 8px 0 31px; }
  .seo-page h1 { font-size: 39px; line-height: 1.12; margin-bottom: 21px; }
  .seo-copy { font-size: 16px; line-height: 1.85; }
  .seo-actions { margin-top: 22px; gap: 12px; align-items: stretch; }
  .seo-actions .seo-button { flex: 1 1 180px; }
  .seo-button { min-height: 48px; font-size: 13px; padding: 12px 17px; }
  .seo-facts { gap: 0; margin-bottom: 37px; padding: 20px 0; }
  .seo-facts > div, .seo-facts > li { padding: 0 12px; }
  .seo-facts > :first-child { padding-left: 0; }
  .seo-facts > :last-child { padding-right: 0; }
  .seo-facts strong, .seo-facts b, .seo-facts dd { font-size: 25px; }
  .seo-facts dt, .seo-facts small, .seo-facts span { font-size: 11px; line-height: 1.5; }
  .seo-section { margin-bottom: 39px; }
  .seo-page h2 { font-size: 30px; line-height: 1.25; }
  .seo-section > h2 + p { margin-top: 0; }
  .seo-grid { grid-template-columns: 1fr; gap: 14px; }
  .seo-card { padding: 25px; }
  .seo-card h2, .seo-card h3 { font-size: 26px; }
  .seo-state-grid { gap: 0 20px; }
  .seo-state-link { font-size: 14px; min-height: 56px; padding: 13px 0; gap: 7px; }
  .seo-prose { font-size: 16px; line-height: 1.85; }
  .seo-prev-next { grid-template-columns: 1fr; gap: 12px; }
  .seo-prev-next > a:last-child { text-align: left; }
  .seo-prose h2 { font-size: 29px; }
  .seo-prose h3 { font-size: 19px; }
  .seo-prose figure { padding: 20px; margin: 25px 0; }
  .seo-prose figure img { max-height: 260px; }
  .seo-prose blockquote, .seo-lesson-block.seo-rule, .seo-lesson-block.rule, .seo-lesson-block[data-type='rule'], .seo-lesson-rule { padding: 21px 20px; }
  .seo-lesson-block.seo-tip, .seo-lesson-block.tip, .seo-lesson-block[data-type='tip'], .seo-lesson-tip { padding: 21px; }
  .seo-lesson-block.seo-term, .seo-lesson-block.term, .seo-lesson-block[data-type='term'], .seo-lesson-term { padding: 21px; }
  .seo-lesson-block.seo-number, .seo-lesson-block.number, .seo-lesson-block[data-type='number'], .seo-lesson-number { gap: 20px; }
  .seo-lesson-block.seo-number > strong, .seo-lesson-block.number > strong, .seo-lesson-number > strong { font-size: 42px; }
  .seo-page th, .seo-page td { padding: 10px 12px; }
  .seo-page table { font-size: 13px; }
  .seo-question { padding: 22px 20px; }
  .seo-question h2, .seo-question h3 { font-size: 18px; }
  .seo-question p, .seo-question li { font-size: 15px; }
  .seo-question summary { font-size: 15px; }
  .seo-toc { padding: 22px; }
  .seo-sign-grid { gap: 13px; }
  .seo-sign-card { padding: 20px 17px; }
  .seo-sign-card img { width: 130px; height: 100px; margin: 4px auto 19px; }
  .seo-sign-card h2, .seo-sign-card h3 { font-size: 16px; line-height: 1.45; }
  .seo-sign-card p { font-size: 14px; line-height: 1.75; }
  .seo-footer { padding: 24px 0 28px; font-size: 12px; }
  .seo-footer nav, .seo-footer > div { width: 100%; margin: 0; gap: 9px 19px; }
  .seo-footer > p { order: initial; }
}
@media (max-width: 359px) {
  .seo-header, .seo-footer, .seo-main { width: calc(100% - 32px); }
  .seo-page h1 { font-size: 36px; }
  .seo-nav { gap: 8px 16px; }
  .seo-facts, .seo-facts:has(> :nth-child(4)) { grid-template-columns: 1fr; gap: 17px; }
  .seo-facts > div, .seo-facts > li { border-left: 0; border-top: 1px solid var(--seo-border); padding: 16px 0 0; }
  .seo-facts > :first-child { border-top: 0; padding-top: 0; }
  .seo-facts strong, .seo-facts b, .seo-facts dd { font-size: 29px; }
  .seo-facts dt, .seo-facts small, .seo-facts span { font-size: 12px; }
  .seo-state-grid { grid-template-columns: 1fr; }
  .seo-sign-grid { grid-template-columns: 1fr; }
  .seo-sign-card { padding: 25px; }
  .seo-sign-card img { width: 160px; height: 120px; }
  .seo-sign-card h2, .seo-sign-card h3 { font-size: 19px; }
  .seo-sign-card p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-page * { scroll-behavior: auto !important; transition: none !important; }
}
/* Keep the mobile masthead to two useful rows, including a full touch target for each link. */
@media (max-width: 600px) {
  .seo-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 12px;
    min-height: 0;
    padding: 14px 0 10px;
  }
  .seo-header > .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: 25px;
    gap: 0;
  }
  .seo-header > .brand .brand-mark { width: 32px; height: 36px; margin-right: 7px; }
  .seo-header > .brand .brand-mark svg { width: 26px; height: 26px; }
  .seo-header > a.seo-button {
    grid-column: 2;
    grid-row: 1;
    min-height: 44px;
    padding: 9px 11px;
    gap: 7px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
  }
  .seo-header > .seo-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0 5px;
    width: 100%;
    margin: 0;
    padding: 6px 0 0;
    border-top: 1px solid var(--seo-border);
  }
  .seo-header > .seo-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 5px 2px;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }
}
@media (max-width: 380px) {
  .seo-header { column-gap: 8px; }
  .seo-header > .brand { font-size: 22px; }
  .seo-header > .brand .brand-mark { width: 29px; height: 34px; margin-right: 6px; }
  .seo-header > .brand .brand-mark svg { width: 24px; height: 24px; }
  .seo-header > a.seo-button { font-size: 10px; padding: 9px 10px; gap: 5px; }
  .seo-header > .seo-nav a { font-size: 11px; }
}
/* Apply the same action color and shape scale to the reading pages. */
.seo-page .seo-eyebrow{color:var(--seo-muted)}.seo-page a:not(.seo-button):not(.button):hover{color:var(--green)}.seo-button{border-radius:var(--radius-8,8px)}.seo-card,.seo-question,.seo-sign-card,.seo-toc{border-radius:var(--radius-12,12px)}.seo-hero-art{border-radius:var(--radius-20,20px)}