/* Authored presentation for native Astro pages. Shared tokens live in site.css. */
.native-page {
  --native-border-strong: #afcec8;
  --native-shadow: 0 5px 16px #0437450d;
  --native-gold-ink: #875b10;
  --native-coral-ink: #a64b27;
  color: var(--ink);
  font-family: var(--font-body);
  padding-bottom: 26px;
  color-scheme: light;
}
.native-page .page-content :where(p, h2, h3, h4, figure) { margin: 0; }
.native-page :where(h2, h3, h4) { font-family: var(--font-display); font-weight: 400; letter-spacing: -.018em; line-height: 1.2; text-wrap: pretty; }
.native-page h2 { font-size: clamp(25px, 2.3vw, 32px); }
.native-page h3 { font-size: 21px; }
.native-page h4 { font-size: 17px; }
.native-page :where(button, input, select) { font: inherit; }
.native-page :where(input, select, button) { max-width: 100%; }
.native-page :where(input, select) { accent-color: var(--ocean-ink); }
.native-page :focus-visible { outline: 3px solid var(--ocean-600); outline-offset: 3px; }
.native-page :where([hidden]) { display: none !important; }
.native-page :where(.muted) { color: var(--muted); }
.native-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Paper shells use the same width and inset as directory and detail pages. */
.native-page .page-content > :is(.section, .section-sm) {
  position: relative;
  width: min(calc(100% - 32px), var(--max));
  margin: 18px auto 0;
  padding: 25px;
  border: 1px solid #ffffffd9;
  border-radius: 17px;
  background: var(--paper);
  box-shadow: var(--shadow);
  font-size: 15px;
  line-height: 1.65;
}
.native-page > header + .page-body .page-content > :is(.section, .section-sm):first-child { z-index: 3; margin-top: -28px; }
.native-page .page-content > :is(.section, .section-sm) > .container { width: 100%; }
.native-page .article-narrow { max-width: 940px; margin-inline: auto; }
.native-page .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 24px; }
.native-page :is(.article-layout, .cards-2, .calculator-layout) > * { min-width: 0; }
.native-page .section-heading { margin-bottom: 20px; }
.native-page .compact-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.native-page .compact-heading > a { color: var(--ocean-ink); font-size: 14px; font-weight: 850; }
.native-page .eyebrow { margin: 0 0 8px; color: var(--ocean-ink); font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.native-page .cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.native-page .feature-panel { padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--native-shadow); }
.native-page .feature-panel > p:not(.eyebrow) { margin-top: 12px; color: var(--muted); }
.native-page .feature-panel .button { margin-top: 20px; }
.native-page .card-title { font-size: 22px; }
.native-page .mini-list { margin: 18px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.native-page .mini-list li { margin-block: 7px; padding-left: 3px; }

/* Reading rhythm matches the updated guides. */
.native-page .prose { min-width: 0; }
.native-page .prose > * + * { margin-top: 17px; }
.native-page .prose h2 { margin-top: 32px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: clamp(25px, 2.3vw, 30px); }
.native-page .prose > h2:first-child { margin-top: 0; }
.native-page .prose h3 { margin-top: 24px; }
.native-page .prose :is(p, li) { overflow-wrap: anywhere; color: var(--muted); }
.native-page .prose .lede { color: var(--ink); font-size: 17px; line-height: 1.65; }
.native-page .prose :is(ul, ol) { padding-left: 23px; }
.native-page .prose li { margin-block: 7px; padding-left: 3px; }
.native-page .prose :is(p, li) > a { color: var(--ocean-ink); text-decoration: underline; text-underline-offset: 3px; }
.native-page .prose :is(p, li) > a:hover { color: var(--navy-900); }
.native-page .prose code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--ocean-ink); background: var(--paper-2); font-size: .9em; }
.native-page .source-note { padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.native-page .callout { margin-block: 20px; padding: 16px 18px; border: 1px solid #b4d8d1; border-left: 4px solid var(--ocean-700); border-radius: 10px; background: #eef8f4; }
.native-page .callout strong { color: var(--ink); }
.native-page .callout p { margin-top: 5px; font-size: 14px; }
.native-page .callout a { color: var(--ocean-ink); text-decoration: underline; text-underline-offset: 3px; }
.native-page .callout-warning { border-color: #ead29b; border-left-color: #dc9d26; background: #fff8e8; }
.native-page .tag-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.native-page .tag-cloud span { padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 12px; }

/* Buttons, cards and tables retain existing class hooks used by page scripts. */
.native-page .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 900; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.native-page .button:hover { transform: translateY(-2px); box-shadow: 0 5px 14px #0437451f; }
.native-page .button-primary { color: #3c2e11; border-color: #f7cb57; background: linear-gradient(#ffdd70, var(--gold)); box-shadow: 0 3px 0 #c2881a; }
.native-page .button-ghost { color: var(--ocean-ink); border-color: #b3d4ce; background: #eef7f3; }
.native-page .button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.native-page .text-link { color: var(--ocean-ink); font-size: 14px; font-weight: 900; text-decoration: none; }
.native-page .text-link:hover { color: var(--navy-900); text-decoration: underline; text-underline-offset: 3px; }
.native-page .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.native-page .stat-panel { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.native-page .stat-panel span { display: block; color: var(--ocean-ink); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.native-page .stat-panel strong { display: block; margin-top: 5px; color: var(--navy-900); font-family: var(--font-display); font-size: 27px; font-weight: 400; line-height: 1.2; }
.native-page .stat-panel small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.native-page .table-wrap { overflow-x: auto; margin-top: 20px; border: 1px solid var(--line); border-radius: 10px; }
.native-page .data-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.5; }
.native-page .data-table :is(th, td) { padding: 12px 13px; border-bottom: 1px solid #e1ece8; text-align: left; vertical-align: top; }
.native-page .data-table thead th { color: var(--muted); background: #f0f7f2; font-size: 12px; font-weight: 900; }
.native-page .data-table tbody tr:last-child > * { border-bottom: 0; }
.native-page .data-table tbody th { color: var(--ink); }
.native-page .data-table a { color: var(--ocean-ink); text-decoration: underline; text-underline-offset: 3px; }
.native-page .status-label { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 850; white-space: nowrap; }
.native-page .status-yes { color: #246649; background: #daf2df; }
.native-page .status-partial { color: var(--native-gold-ink); background: #fff1cb; }
.native-page .status-no { color: var(--muted); background: #eef4f1; }
.native-page .sticky-card { position: sticky; top: 98px; overflow: hidden; padding-bottom: 19px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--native-shadow); }
.native-page .sticky-card > img { display: block; width: 100%; }
.native-page .sticky-card > :not(img) { margin-inline: 18px; }
.native-page .sticky-card h2 { margin-top: 18px; font-size: 23px; }
.native-page .sticky-card > p { margin-top: 10px; color: var(--muted); font-size: 14px; }
.native-page .sticky-card .button { width: calc(100% - 36px); margin-top: 17px; }
.native-page .sticky-card .button + .button { margin-top: 10px; }
.native-page .sticky-card dl { margin-top: 18px; }
.native-page .sticky-card dl div { padding-block: 9px; border-top: 1px solid var(--line); }
.native-page .sticky-card dt { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.native-page .sticky-card dd { margin: 3px 0 0; font-size: 14px; }
.native-page .text-card { padding-top: 20px; }
.native-page :is(.source-cards, .promise-grid) { display: grid; gap: 12px; }
.native-page .source-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.native-page .promise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.native-page :is(.source-cards, .promise-grid) article { padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.native-page :is(.source-cards, .promise-grid) h3 { margin: 0; font-size: 21px; }
.native-page :is(.source-cards, .promise-grid) p { margin-top: 8px; font-size: 14px; }
.native-page .promise-grid span { display: block; margin-bottom: 10px; color: var(--ocean-ink); font-size: 12px; font-weight: 900; }

/* Accordions keep their native semantics and open state. */
.native-page .faq-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 30px; }
.native-page .faq-layout > div:first-child > p:last-child { margin-top: 12px; color: var(--muted); }
.native-page :is(.faq-list, .issue-list) { border-top: 1px solid var(--line); }
.native-page :is(.faq-list, .issue-list) details { border-bottom: 1px solid var(--line); }
.native-page :is(.faq-list, .issue-list) summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: var(--ink); cursor: pointer; list-style: none; font-size: 15px; font-weight: 850; }
.native-page :is(.faq-list, .issue-list) summary::-webkit-details-marker { display: none; }
.native-page :is(.faq-list, .issue-list) summary :is(span, b) { display: grid; flex: 0 0 22px; place-items: center; width: 22px; height: 22px; color: var(--ocean-ink); font-size: 21px; line-height: 1; transition: transform .15s; }
.native-page :is(.faq-list, .issue-list) details[open] summary :is(span, b) { transform: rotate(45deg); }
.native-page :is(.faq-list, .issue-list) details p { padding: 0 24px 17px 0; overflow-wrap: anywhere; color: var(--muted); font-size: 14px; }

/* Media and utility pages. */
.native-page .video-library { display: grid; gap: 30px; }
.native-page .video-entry { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 26px; }
.native-page .video-entry + .video-entry { padding-top: 30px; border-top: 1px solid var(--line); }
.native-page .video-entry > div:last-child > p:not(.eyebrow) { margin-top: 12px; color: var(--muted); }
.native-page .video-entry .text-link { display: inline-block; margin-top: 16px; }
.native-page .video-shell { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: 12px; background: var(--navy-950); box-shadow: var(--native-shadow); }
.native-page .video-shell > img, .native-page .video-shell iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.native-page .video-shell::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #031d34a1, transparent 65%); }
.native-page .video-shell button { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 62px; height: 62px; padding: 0; border: 2px solid #ffedb5; border-radius: 50%; color: #3c2e11; background: var(--gold); box-shadow: 0 5px 20px #031d3459; cursor: pointer; transform: translate(-50%, -50%); }
.native-page .video-shell button:hover { background: #ffdb71; }
.native-page .video-shell button span { margin-left: 4px; font-size: 22px; }
.native-page .video-external { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 15px; border: 1px solid #f7cb57; border-radius: 9px; color: #3c2e11; background: var(--gold); font-size: 14px; font-weight: 900; text-align: center; text-decoration: none; }
.native-page .screenshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.native-page .screenshot-grid a { overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: 10px; }
.native-page .screenshot-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.native-page .screenshot-grid a:hover img { transform: scale(1.035); }
.native-page .not-found { width: min(calc(100% - 32px), 1100px); min-height: 480px; display: grid; place-items: center; margin: 30px auto; padding: 55px 20px; border: 1px solid #ffffffd9; border-radius: 17px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.native-page .not-found .container { width: 100%; }
.native-page .not-found span { color: var(--ocean-ink); font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.native-page .not-found h1 { max-width: 750px; margin: 14px auto 0; font-size: clamp(34px, 4vw, 48px); line-height: 1.12; }
.native-page .not-found p { margin-top: 18px; color: var(--muted); }
.native-page .not-found div div { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }

/* Story routes: the stage colors are dark enough to read on paper. */
.native-page .stage-jump { position: sticky; top: 78px; z-index: 20; width: min(calc(100% - 32px), var(--max)); margin: -20px auto 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--native-shadow); }
.native-page .stage-jump > div { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.native-page .stage-jump a { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 14px 8px; color: var(--navy-900); font-size: 13px; font-weight: 850; text-decoration: none; }
.native-page .stage-jump a:hover { color: var(--ocean-ink); background: var(--paper-2); }
.native-page .stage-jump span { color: var(--ocean-ink); }
.native-page .quick-answer { padding: 18px; border: 1px solid #bed9cd; border-radius: 11px; background: #eef8f2; }
.native-page :is(.quick-answer, .stage-objective, .stage-notes) :is(small, span) { display: block; color: var(--ocean-ink); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.native-page .quick-answer strong { display: block; margin-top: 7px; font-size: 16px; }
.native-page .quick-answer p { margin-top: 8px; font-size: 14px; }
.native-page .walkthrough-stage { position: relative; margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-left: 4px solid var(--ocean-700); border-radius: 12px; background: #fff; scroll-margin-top: 160px; }
.native-page .walkthrough-stage:nth-child(2) { border-left-color: #2c8456; }
.native-page .walkthrough-stage:nth-child(3) { border-left-color: #c59220; }
.native-page .walkthrough-stage:nth-child(4) { border-left-color: #b96735; }
.native-page .walkthrough-stage:nth-child(5) { border-left-color: #9062a8; }
.native-page .walkthrough-stage header > span { color: var(--ocean-ink); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.native-page .walkthrough-stage header h2 { margin-top: 5px; padding: 0; border: 0; }
.native-page .walkthrough-stage header p { margin-top: 5px; font-size: 14px; }
.native-page .stage-objective { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); }
.native-page .stage-objective strong { display: block; margin-top: 4px; color: var(--ink); }
.native-page .walkthrough-stage ol { margin-top: 20px; padding: 0; counter-reset: route; list-style: none; }
.native-page .walkthrough-stage ol li { position: relative; padding-left: 34px; }
.native-page .walkthrough-stage ol li::before { counter-increment: route; content: counter(route); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: var(--ocean-ink); background: #e4f3ef; font-size: 12px; font-weight: 900; }
.native-page .stage-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.native-page .stage-notes article { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); }
.native-page .stage-notes p { margin-top: 5px; font-size: 14px; }
.native-page .stage-notes .danger-note { border-color: #ecd3ba; background: #fff7eb; }
.native-page .danger-note small { color: var(--native-coral-ink); }
.native-page .walkthrough-stage > .text-link { display: inline-block; margin-top: 18px; }
.native-page .next-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.native-page .next-actions a { display: grid; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-decoration: none; }
.native-page .next-actions span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.native-page .next-actions b { margin-top: 5px; color: var(--ocean-ink); }

/* Calculator and search results remain keyboard-accessible and responsive. */
.native-page .calculator-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.native-page :is(.calculator, .calc-output) { padding: 24px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.native-page .calculator { display: grid; gap: 18px; }
.native-page .calc-field label, .native-page .calculator legend { display: block; margin-bottom: 7px; color: var(--ocean-ink); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.native-page .calc-field :is(input, select) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--native-border-strong); border-radius: 8px; color: var(--ink); background: #fff; }
.native-page .calc-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.native-page .input-suffix { position: relative; }
.native-page .input-suffix input { padding-right: 36px; }
.native-page .input-suffix span { position: absolute; right: 14px; top: 50%; color: var(--muted); transform: translateY(-50%); }
.native-page .calculator fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.native-page .calculator legend { grid-column: 1 / -1; }
.native-page .choice { position: relative; }
.native-page .choice input { position: absolute; opacity: 0; }
.native-page .choice span { display: flex; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--paper-2); cursor: pointer; }
.native-page .choice input:checked + span { border-color: var(--ocean-ink); color: var(--ink); background: #e6f4ef; box-shadow: 0 0 0 1px var(--ocean-700); }
.native-page .choice input:focus-visible + span { outline: 3px solid var(--ocean-600); outline-offset: 3px; }
.native-page .calc-output { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, #fffbee, #eef8f3); }
.native-page .calc-output > p { color: var(--ocean-ink); font-size: 13px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.native-page .calc-output > strong { max-width: 100%; margin-top: 15px; overflow-wrap: anywhere; color: var(--navy-900); font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); font-weight: 400; line-height: 1.1; }
.native-page .calc-output > span { color: var(--muted); font-weight: 800; }
.native-page .calc-output > div { max-width: 100%; margin-top: 20px; padding: 10px 13px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 14px; }
.native-page .calc-output button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 15px; padding: 10px 16px; border: 1px solid #f7cb57; border-radius: 8px; color: #3c2e11; background: var(--gold); font-size: 14px; font-weight: 900; cursor: pointer; }
.native-page .calc-output small { max-width: 330px; margin-top: 20px; color: var(--muted); font-size: 13px; }
.native-page .search-page { max-width: 960px; }
.native-page .search-page form > label { display: block; margin-bottom: 8px; color: var(--ocean-ink); font-size: 13px; font-weight: 850; }
.native-page .search-page form > div { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--native-border-strong); border-radius: 10px; background: #fff; }
.native-page .search-page svg { flex: 0 0 21px; width: 21px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.native-page .search-page input { min-width: 0; min-height: 40px; flex: 1; border: 0; color: var(--ink); background: none; }
.native-page .search-page button { min-height: 42px; padding: 9px 16px; border: 1px solid #f7cb57; border-radius: 8px; color: #3c2e11; background: var(--gold); font-weight: 900; cursor: pointer; }
.native-page .search-summary { margin: 22px 0 12px; color: var(--muted); font-size: 14px; }
.native-page .search-results { display: grid; gap: 10px; }
.native-page .search-results > a { display: grid; padding: 17px 19px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.native-page .search-results > a:hover { border-color: var(--ocean-ink); box-shadow: var(--native-shadow); }
.native-page .search-results span { color: var(--ocean-ink); font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.native-page .search-results b { margin-top: 5px; font-family: var(--font-display); font-size: 22px; font-weight: 400; }
.native-page .search-results p { margin-top: 6px; color: var(--muted); font-size: 14px; }
.native-page .empty-result { padding: 28px; border: 1px dashed var(--native-border-strong); border-radius: 11px; background: #fff; text-align: center; }
.native-page .empty-result p { margin-top: 6px; color: var(--muted); }

@media (max-width: 1024px) {
  .native-page .article-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; }
  .native-page .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .native-page .page-content > :is(.section, .section-sm) { padding: 20px; }
  .native-page :is(.article-layout, .faq-layout, .calculator-layout, .video-entry) { grid-template-columns: minmax(0, 1fr); }
  .native-page .sticky-card { position: static; }
  .native-page .video-entry { gap: 18px; }
  .native-page .screenshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .native-page .promise-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .native-page { padding-bottom: 16px; }
  .native-page .page-content > :is(.section, .section-sm) { width: calc(100% - 24px); margin-top: 14px; padding: 15px; border-radius: 13px; }
  .native-page .compact-heading { align-items: start; flex-direction: column; gap: 12px; }
  .native-page :is(.cards-2, .source-cards, .screenshot-grid, .stage-notes, .next-actions) { grid-template-columns: minmax(0, 1fr); }
  .native-page .stats-grid { gap: 8px; }
  .native-page .stat-panel { padding: 13px; }
  .native-page .feature-panel { padding: 18px; }
  .native-page .stage-jump { top: 70px; width: calc(100% - 24px); overflow: hidden; }
  .native-page .stage-jump > div { overflow-x: auto; }
  .native-page .stage-jump a { min-width: 108px; }
  .native-page .walkthrough-stage { padding: 18px 15px; }
  .native-page :is(.calculator, .calc-output) { padding: 18px; }
  .native-page .calc-output { min-height: 300px; }
  .native-page .search-page form > div { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .native-page .search-page button { grid-column: 1 / -1; }
  .native-page .not-found { width: calc(100% - 24px); min-height: 420px; }
  .native-page .not-found div div { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .native-page *, .native-page *::before, .native-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}