/* AIOOS page shell: every page outside the homepage family.

   Loaded after the homepage's own stylesheets, in this order:
     /assets/system-20261012/tokens.css             radius, shadow, type and rhythm tokens (loaded first)
     /assets/i18n-20260909/site-language.css
     /assets/editorial-20260908/style.css           paper, ink, accent, tint, line, .wrap, .button, skip link
     /assets/typography-20260910/typography.css     Manrope reading family, Bebas brand face
     /assets/homepage-conversion-20260910/navigation.css   sticky paper header, compact menu, back-to-top
     /assets/redesign-20260930/footer.css           footer grid, language links, credit
     /assets/country-language-20260911/home.css     language trigger and drawer
     /assets/pages-20261011/shell.css               this file
   So the header, the language drawer and the footer are the homepage's rules, not copies. This file adds the
   few header rules the homepage takes from its own hero.css and trial-home.css, and everything a content page
   needs that the homepage has no counterpart for: page rails, breadcrumbs, heading blocks, buttons, cards, the
   sample invitation band, the long-form article template (contents rail, reading progress, pull quote, byline,
   related links, tables, code), the legal folio, the utility page, motion utilities and print.

   Every selector starts with body.aioos-page, so nothing here reaches the homepage family. Light only, like the
   homepage. Family templates (#119 to #122) build on these classes. */

body.aioos-page {
  --page-wrap: 1440px;
  --page-rail: 232px;
  --page-reading: 760px;
  --page-gap: clamp(32px, 4vw, 64px);
  --page-space: clamp(64px, 7vw, 112px);
  --anchor-offset: calc(var(--navigation-height, 76px) + 28px);
  min-width: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
}
body.aioos-page ::selection { background: var(--accent); color: var(--panel); }
/* Headings wrap whole words. typography.css lets the homepage's h2 and h3 hyphenate; on these pages no heading or
   label breaks inside a word, and a word longer than its line still wraps rather than overflowing. */
body.aioos-page :is(h1, h2, h3, h4) { hyphens: manual; overflow-wrap: break-word; }

/* ---------- header: the homepage's rails and the rules it takes from hero.css and trial-home.css ---------- */
html.aioos-conversion body.aioos-page .site-header {
  width: 100%; max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 1440px) / 2));
}
html.aioos-conversion body.aioos-page .site-header::before { inset-inline: 0; }
html.aioos-conversion body.aioos-page .site-header > .brand img { width: 46px; height: auto; }
html.aioos-conversion body.aioos-page .site-header nav { gap: clamp(13px, 1.6vw, 26px); min-width: 0; }
html.aioos-conversion body.aioos-page .site-header nav a { white-space: normal; overflow-wrap: anywhere; }
html.aioos-conversion body.aioos-page .site-header nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
html.aioos-conversion body.aioos-page .site-header .nav-demo { border-radius: var(--radius-button); transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease); }
body.aioos-page .nav-trial { min-width: 150px; }
@media (max-width: 820px) {
  html.aioos-conversion body.aioos-page .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: auto; min-height: var(--navigation-height); padding-block: 8px;
  }
  html.aioos-conversion.nav-ready body.aioos-page .site-header nav {
    left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: var(--gutter); max-height: calc(100dvh - 100%);
  }
  html.aioos-conversion body.aioos-page .nav-demo { min-width: 0; max-width: 100%; white-space: normal; text-align: center; }
  html.aioos-conversion body.aioos-page .nav-demo > span { flex: 0 0 auto; }
}
@media (max-width: 760px) { body.aioos-page .nav-trial { min-width: 0; } }

/* Reading progress: a 2px rule inside the header's own height, so it never moves the page. */
body.aioos-page .page-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1;
  pointer-events: none; overflow: hidden;
}
body.aioos-page .page-progress[hidden] { display: none; }
body.aioos-page .page-progress > span {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(var(--page-progress, 0)); transform-origin: 0 50%;
}

/* ---------- page frame ---------- */
body.aioos-page .page-main { display: block; min-width: 0; }
body.aioos-page .page-rail { width: min(100% - var(--gutter) * 2, var(--page-wrap)); margin-inline: auto; }
body.aioos-page .page-section { padding-block: var(--page-space); }
body.aioos-page .page-section + .page-section { border-top: 1px solid var(--line-soft); }
@media (max-width: 370px) {
  body.aioos-page { --gutter: 18px; }
}

/* ---------- breadcrumbs ---------- */
body.aioos-page .breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px;
  margin: 0; padding-block: clamp(24px, 3vw, 36px) 0;
  font-size: .875rem; line-height: 1.5; color: var(--muted);
}
body.aioos-page .breadcrumbs a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
}
body.aioos-page .breadcrumbs a:hover { color: var(--accent); text-decoration-color: currentColor; }
body.aioos-page .breadcrumbs > span:last-child { color: var(--muted); }
/* The current title wraps onto further lines at every width; it is never clipped. */
body.aioos-page .breadcrumbs > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- eyebrow and heading block ---------- */
body.aioos-page .page-kicker {
  margin: 0; font-size: .75rem; line-height: 1.5; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
body.aioos-page .page-heading { display: grid; gap: 20px; max-width: 62rem; }
body.aioos-page .page-heading h1,
body.aioos-page .page-title {
  margin: 0; font-family: var(--type-family); font-weight: 650;
  font-size: clamp(2.125rem, 1.35rem + 2.6vw, 3.75rem); line-height: 1.07; letter-spacing: -.045em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
body.aioos-page .page-lead { margin: 0; max-width: 58ch; font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.6; color: var(--muted); }

/* ---------- buttons and links ---------- */
body.aioos-page .page-button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 58px; padding: 16px 22px; border: 1px solid var(--ink); border-radius: var(--radius-button);
  background: var(--ink); color: var(--panel); font-size: 1rem; font-weight: 600; line-height: 1.35;
  text-decoration: none; text-align: start;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
body.aioos-page .page-button > span[aria-hidden] { font-size: 1.375rem; font-weight: 400; line-height: 1; }
body.aioos-page .page-button:hover { background: var(--accent); border-color: var(--accent); color: var(--panel); }
body.aioos-page .page-button:active { transform: none; }
body.aioos-page .page-button--outline { background: transparent; color: var(--ink); border-color: var(--line-ui); }
body.aioos-page .page-button--outline:hover { background: var(--tint); color: var(--ink); border-color: var(--accent); }
body.aioos-page .page-link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--ink); font-size: .9375rem; font-weight: 550;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color 160ms var(--ease);
}
body.aioos-page .page-link:hover { color: var(--accent); }
body.aioos-page .page-link > span[aria-hidden] { font-size: 1.25rem; line-height: 1; }
body.aioos-page .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
body.aioos-page :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ---------- cards ---------- */
body.aioos-page .page-card {
  position: relative; min-width: 0; padding: clamp(22px, 2.4vw, 32px);
  background: var(--panel); border: 1px solid var(--line-card); border-radius: var(--radius-card); color: var(--ink);
}
body.aioos-page .page-card--tint { background: var(--tint); border-color: #473b7033; }
body.aioos-page .page-card--raised { box-shadow: var(--shadow-block); }
body.aioos-page a.page-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
body.aioos-page a.page-card:hover { background: var(--tint); border-color: var(--accent); }
body.aioos-page .page-card h3 { margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
body.aioos-page .page-card p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--muted); }
body.aioos-page .page-card .page-arrow { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 550; }

/* Related links: one link per card, arrow travels 2px on hover. */
body.aioos-page .page-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
body.aioos-page .page-related > li { display: flex; min-width: 0; }
body.aioos-page .page-related > li > a { flex: 1; }

/* ---------- the sample invitation band: the homepage's closing composition with its pricing invitation copy ---------- */
body.aioos-page .page-cta {
  position: relative; overflow: hidden; margin-top: var(--page-space);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 32px;
  padding-block: 56px 48px;
  padding-inline: max(var(--gutter), calc((100% - 1440px) / 2));
  background: var(--tint);
  background: linear-gradient(115deg, color-mix(in srgb, var(--panel) 22%, var(--tint)), var(--tint) 48%, color-mix(in srgb, var(--lilac) 25%, var(--tint)));
}
body.aioos-page .page-cta__end { position: absolute; top: 56px; right: max(var(--gutter), calc((100% - 1440px) / 2)); margin: 0; }
body.aioos-page .page-cta__copy { min-width: 0; }
body.aioos-page .page-cta h2 {
  margin: 38px 0 0; max-width: 15ch; font-family: var(--type-family); font-weight: 550;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.1; letter-spacing: -.04em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
body.aioos-page :is(.page-cta__lead, .page-cta__accent) { display: block; }
body.aioos-page .page-cta__accent { color: var(--accent); }
body.aioos-page .page-cta__intro { margin: 24px 0 0; max-width: 46ch; font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.5; }
body.aioos-page .page-cta__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 24px; margin-top: 28px; }
body.aioos-page .page-cta__actions .page-button { grid-column: 1 / -1; width: min(100%, 540px); font-size: clamp(1rem, 1.25vw, 1.125rem); }
body.aioos-page .page-cta__actions .page-link { justify-self: start; font-size: .875rem; }
body.aioos-page .page-cta__terms { margin: 16px 0 0; max-width: 63ch; font-size: .8125rem; line-height: 1.65; color: var(--muted); }
body.aioos-page .page-cta__terms a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
body.aioos-page .page-cta__terms a:hover { color: var(--accent); }
body.aioos-page .page-cta__signature { position: relative; align-self: center; height: clamp(180px, 20vw, 300px); margin-top: 28px; min-width: 0; color: var(--accent); }
body.aioos-page .page-cta__word {
  position: absolute; right: 0; bottom: 0; width: max-content;
  font-family: var(--display); font-weight: 400; font-size: clamp(180px, 22vw, 340px); line-height: .83; letter-spacing: -.015em; white-space: nowrap;
}
body.aioos-page .page-cta__curve { position: absolute; left: 43%; top: 40%; width: 14%; height: 29%; color: var(--accent); pointer-events: none; }
body.aioos-page .page-cta__curve svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 1100px) {
  body.aioos-page .page-cta__end { display: none; }
  body.aioos-page .page-cta h2 { font-size: clamp(2rem, 4.7vw, 3.25rem); }
  body.aioos-page .page-cta__word { font-size: 22vw; }
  body.aioos-page .page-cta__signature { height: 20vw; }
  body.aioos-page .page-cta__curve { left: 48%; top: 48%; width: 12%; height: 20%; }
  body.aioos-page .page-cta__actions { grid-template-columns: minmax(0, 1fr); }
  body.aioos-page .page-cta__actions .page-button { grid-column: auto; }
}
@media (max-width: 760px) {
  body.aioos-page .page-cta { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 34px var(--gutter) 28px; }
  body.aioos-page .page-cta h2 { margin-top: 24px; font-size: clamp(2rem, 7.5vw, 2.75rem); }
  body.aioos-page .page-cta__actions .page-button { width: 100%; }
  body.aioos-page .page-cta__signature { width: 100%; height: clamp(100px, 31vw, 208px); margin-top: 0; }
  body.aioos-page .page-cta__word { font-size: clamp(120px, 37vw, 250px); }
  body.aioos-page .page-cta__curve { left: 0; top: auto; bottom: 40px; width: 24%; height: clamp(72px, 22vw, 125px); }
}

/* ---------- footer: the homepage's footer (footer.css), with the band before it ---------- */
body.aioos-page .site-footer { margin-top: var(--page-space); }
body.aioos-page .page-cta + .site-footer { margin-top: 0; }
body.aioos-page .site-footer .footer-grid nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- long-form article: contents rail beside one reading column ---------- */
body.aioos-page .page-article {
  display: grid; grid-template-columns: var(--page-rail) minmax(0, var(--page-reading));
  grid-template-areas: "crumbs crumbs" "toc body" "toc after";
  column-gap: var(--page-gap); justify-content: start; align-items: start;
  width: min(100% - var(--gutter) * 2, var(--page-wrap)); margin-inline: auto;
}
body.aioos-page .page-article > :is(.breadcrumbs, .page-docnav) { grid-area: crumbs; padding-bottom: clamp(28px, 3vw, 44px); }
body.aioos-page .page-article > .page-toc { grid-area: toc; }
body.aioos-page .page-article > .page-toc-mobile { display: none; }
body.aioos-page .page-article > article,
body.aioos-page .page-article > .page-body { grid-area: body; min-width: 0; }
body.aioos-page .page-article > :not(.breadcrumbs, .page-docnav, .page-toc, .page-toc-mobile, article, .page-body) { grid-column: 2; min-width: 0; }
body.aioos-page .page-article.page-article--no-toc { grid-template-columns: minmax(0, var(--page-reading)); grid-template-areas: "crumbs" "body" "after"; }
body.aioos-page .page-article.page-article--no-toc > :not(.breadcrumbs, .page-docnav, article, .page-body) { grid-column: 1; }

body.aioos-page .page-toc {
  position: sticky; top: calc(var(--navigation-height, 76px) + 28px);
  max-height: calc(100dvh - var(--navigation-height, 76px) - 56px); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 6px 12px 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
body.aioos-page .page-toc__title {
  margin: 0 0 10px; padding-left: 14px; font-size: .75rem; line-height: 1.5; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
body.aioos-page .page-toc ol,
body.aioos-page .page-toc-mobile ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
body.aioos-page .page-toc a,
body.aioos-page .page-toc-mobile a {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: 8px 10px 8px 14px; border-radius: var(--radius-xs);
  color: var(--ink); font-size: .875rem; line-height: 1.45; font-weight: 450; text-decoration: none;
  overflow-wrap: break-word; hyphens: manual; transition: background 160ms var(--ease), color 160ms var(--ease);
}
/* Numbered chapters: the number hangs in its own column, so wrapped labels align with the first word. */
body.aioos-page :is(.page-toc, .page-toc-mobile) a:has(> .page-toc__n) { align-items: baseline; padding-block: 12px; }
body.aioos-page :is(.page-toc, .page-toc-mobile) a > .page-toc__n { flex: 0 0 2.25em; font-variant-numeric: tabular-nums; color: var(--muted); }
body.aioos-page :is(.page-toc, .page-toc-mobile) a > .page-toc__n + span { flex: 1 1 auto; min-width: 0; }
body.aioos-page .page-toc a[aria-current="location"] > .page-toc__n { color: inherit; }
body.aioos-page :is(.page-toc, .page-toc-mobile) ol:has(.page-toc__n) a:not(:has(> .page-toc__n)) { padding-left: calc(14px + 2.25em); }
body.aioos-page .page-toc a::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: transparent;
  transition: background 160ms var(--ease);
}
body.aioos-page .page-toc a:hover,
body.aioos-page .page-toc-mobile a:hover { background: var(--tint); color: var(--accent); }
body.aioos-page .page-toc a[aria-current="location"] { background: var(--tint); color: var(--accent); font-weight: 600; }
body.aioos-page .page-toc a[aria-current="location"]::before { background: var(--accent); }
body.aioos-page .page-toc a:focus-visible,
body.aioos-page .page-toc-mobile a:focus-visible { outline-offset: -3px; }

body.aioos-page .page-toc-mobile {
  margin: 0 0 32px; border: 1px solid var(--line-card); border-radius: var(--radius-disclosure); background: var(--panel);
}
body.aioos-page .page-toc-mobile > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 18px;
  font-size: .9375rem; font-weight: 600; cursor: pointer; list-style: none;
}
body.aioos-page .page-toc-mobile > summary::-webkit-details-marker { display: none; }
body.aioos-page .page-toc-mobile > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--accent); }
body.aioos-page .page-toc-mobile[open] > summary::after { content: "\2212"; }
body.aioos-page .page-toc-mobile[open] > summary { border-bottom: 1px solid var(--line-soft); }
body.aioos-page .page-toc-mobile ol { padding: 8px; }

@media (max-width: 1000px) {
  body.aioos-page .page-article { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "toc" "body" "after"; }
  body.aioos-page .page-article > .page-toc { display: none; }
  body.aioos-page .page-article > .page-toc-mobile { display: block; grid-area: toc; }
  body.aioos-page .page-article > :not(.breadcrumbs, .page-docnav, .page-toc, .page-toc-mobile, article, .page-body) { grid-column: 1; }
  body.aioos-page .page-article > article,
  body.aioos-page .page-article > .page-body { max-width: var(--page-reading); }
}

/* ---------- prose: reading type for articles, guides, glossary entries and legal documents ---------- */
body.aioos-page .page-prose { font-size: clamp(1rem, .94rem + .25vw, 1.125rem); line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
body.aioos-page .page-prose > * { max-width: 100%; }
body.aioos-page .page-prose h1 {
  margin: 0 0 24px; font-family: var(--type-family); font-weight: 650;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3.5rem); line-height: 1.08; letter-spacing: -.045em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
body.aioos-page .page-prose h2 {
  margin: clamp(48px, 5vw, 72px) 0 18px; font-family: var(--type-family); font-weight: 650;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); line-height: 1.16; letter-spacing: -.035em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual; scroll-margin-top: var(--anchor-offset);
}
body.aioos-page .page-prose h3 {
  margin: 36px 0 12px; font-family: var(--type-family); font-weight: 600;
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem); line-height: 1.3; letter-spacing: -.02em;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual; scroll-margin-top: var(--anchor-offset);
}
body.aioos-page .page-prose h4 { margin: 28px 0 8px; font-size: 1.0625rem; font-weight: 650; line-height: 1.4; }
body.aioos-page .page-prose h2 + h3 { margin-top: 20px; }
body.aioos-page .page-prose p { margin: 0 0 1.05em; }
body.aioos-page .page-prose :is(ul, ol) { margin: 0 0 1.25em; padding-left: 1.35em; }
body.aioos-page .page-prose li { margin: 0 0 .5em; padding-left: .2em; }
body.aioos-page .page-prose li::marker { color: var(--accent); }
body.aioos-page .page-prose strong, body.aioos-page .page-prose b { font-weight: 650; }
body.aioos-page .page-prose a {
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
body.aioos-page .page-prose a:hover { text-decoration-thickness: 2px; }
body.aioos-page .page-prose hr { height: 0; margin: clamp(40px, 4vw, 56px) 0 0; border: 0; border-top: 1px solid var(--line-soft); }
body.aioos-page .page-prose hr + h2 { margin-top: clamp(32px, 3.4vw, 48px); }
body.aioos-page .page-prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); color: var(--ink); }
body.aioos-page .page-prose code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .875em; }
body.aioos-page .page-prose pre {
  margin: 28px 0; padding: 20px 22px; overflow-x: auto; background: var(--panel); border: 1px solid var(--line-card);
  border-radius: var(--radius-disclosure); font-size: .8125rem; line-height: 1.55; color: var(--ink); tab-size: 2;
}
body.aioos-page .page-prose pre code { font-size: inherit; white-space: pre; }
body.aioos-page .page-prose img { height: auto; border-radius: var(--radius-card); }
body.aioos-page .page-prose figure { margin: 32px 0; }
body.aioos-page .page-prose figcaption { margin-top: 10px; font-size: .8125rem; color: var(--muted); }
body.aioos-page .page-prose > :first-child { margin-top: 0; }

/* Tables: a hairline sheet; first row reads as the header row. Wide tables scroll inside their own frame. */
body.aioos-page .page-table {
  position: relative; margin: 28px 0; overflow-x: auto; border: 1px solid var(--line-card); border-radius: var(--radius-card);
  background: var(--panel); scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
body.aioos-page .page-table:focus-visible { outline-offset: 2px; }
body.aioos-page .page-prose table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9375rem; line-height: 1.55; }
body.aioos-page .page-prose .page-table--wide table { min-width: 640px; }
body.aioos-page .page-prose :is(th, td) { padding: 14px 16px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--line-soft); }
body.aioos-page .page-prose :is(th, td) + :is(th, td) { border-left: 1px solid var(--line-soft); }
body.aioos-page .page-prose tr:last-child > :is(th, td) { border-bottom: 0; }
body.aioos-page .page-prose thead th { background: var(--tint); color: var(--ink); font-weight: 650; font-size: .875rem; line-height: 1.45; }
body.aioos-page .page-prose tbody th { font-weight: 650; }
@media (max-width: 600px) {
  body.aioos-page .page-prose table { font-size: .875rem; }
  body.aioos-page .page-prose :is(th, td) { padding: 12px; }
}

/* Byline, pull quote, author and date block, demo invitation panel. */
body.aioos-page .page-byline { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .875rem; line-height: 1.6; color: var(--muted); }
body.aioos-page .page-byline em { font-style: normal; }
body.aioos-page .page-byline a { color: var(--ink); }
body.aioos-page .page-prose .page-byline { margin: 0 0 1.4em; }
body.aioos-page .pull-quote {
  margin: clamp(36px, 4vw, 56px) 0; padding: 8px 0 8px clamp(20px, 2.4vw, 32px); border-left: 3px solid var(--accent);
  font-size: clamp(1.625rem, 1.2rem + 1.3vw, 2.375rem); font-weight: 550; line-height: 1.22; letter-spacing: -.03em; color: var(--ink);
  text-wrap: balance;
}
body.aioos-page .pull-quote p { margin: 0; }
body.aioos-page .page-author { display: grid; gap: 8px; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line-card); border-radius: var(--radius-card); background: var(--panel); }
body.aioos-page .page-author > strong { font-size: 1.125rem; font-weight: 650; }
body.aioos-page .page-author > p { margin: 0; font-size: .9375rem; color: var(--muted); }

body.aioos-page .cta-box {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: clamp(48px, 5vw, 72px) 0 0;
  padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line-card); border-radius: var(--radius-card); background: var(--panel);
}
body.aioos-page .cta-box h3 { margin: 0; font-family: var(--type-family); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 650; line-height: 1.18; letter-spacing: -.035em; text-wrap: balance; }
body.aioos-page .cta-box p { margin: 0; max-width: 56ch; font-size: 1rem; line-height: 1.65; color: var(--muted); }
body.aioos-page .cta-box > div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
body.aioos-page .cta-box > div > a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 14px 24px;
  border: 1px solid var(--line-ui); border-radius: var(--radius-button); background: transparent; color: var(--ink);
  font-size: .9375rem; font-weight: 600; text-decoration: none; transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
body.aioos-page .cta-box > div > a::after { content: "\2197"; margin-left: 14px; font-size: 1.25rem; font-weight: 400; line-height: 1; }
body.aioos-page .cta-box > div > a:hover { background: var(--tint); border-color: var(--accent); }
@media (min-width: 761px) {
  body.aioos-page .cta-box { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 40px; align-items: start; }
  body.aioos-page .cta-box h3 { grid-row: 1 / 3; }
}

/* Document navigation between the legal documents: separate pages, not tabs. */
body.aioos-page .page-docnav {
  display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2.2vw, 28px);
  padding-top: clamp(20px, 2.4vw, 28px); font-size: .875rem; font-weight: 500;
}
body.aioos-page .page-docnav a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent; transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
body.aioos-page .page-docnav a:hover { color: var(--accent); border-bottom-color: var(--line); }
body.aioos-page .page-docnav a[aria-current="page"] { color: var(--accent); font-weight: 650; border-bottom-color: var(--accent); }
/* Phones and small tablets: one row with a hairline under it; it scrolls inside itself, never the page. */
@media (max-width: 760px) {
  body.aioos-page .page-docnav {
    flex-wrap: nowrap; gap: 0 22px; margin-bottom: 4px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: none;
    box-shadow: inset 0 -1px 0 var(--line-soft);
  }
  body.aioos-page .page-article > .page-docnav { padding-top: 24px; padding-bottom: 0; margin-bottom: clamp(24px, 6vw, 32px); }
  body.aioos-page .page-docnav::-webkit-scrollbar { display: none; }
  body.aioos-page .page-docnav a { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
  body.aioos-page .page-docnav a:first-child { margin-left: 3px; }
  body.aioos-page .page-docnav a:last-child { margin-right: 3px; }
  body.aioos-page .page-docnav a:focus-visible { outline-offset: -3px; }
}

/* ---------- legal folio: one raised paper sheet beside the contents rail ---------- */
body.aioos-page .page-doc {
  min-width: 0; padding: clamp(28px, 4.4vw, 64px) clamp(22px, 4.4vw, 64px) clamp(28px, 3.4vw, 48px);
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-card);
  box-shadow: 4px 0 0 var(--tint);
}
body.aioos-page .page-doc h1 { font-size: clamp(1.875rem, 1.3rem + 1.9vw, 3.25rem); }
/* Whole words wrap. Only on the narrowest phones, where a long German compound is wider than the line, may a heading
   break it with a hyphen; elsewhere the few such compounds carry soft hyphens at their joints. */
@media (max-width: 359px) {
  body.aioos-page :is(h1, h2, h3),
  body.aioos-page :is(.page-prose, .page-heading, .page-doc, .page-cta, .page-utility__copy) :is(h1, h2, h3) { hyphens: auto; }
}
body.aioos-page .page-doc h2 { margin: clamp(28px, 3.4vw, 44px) 0 14px; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-soft); font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); }
body.aioos-page .page-doc h3 { font-size: 1.1875rem; }
body.aioos-page .page-doc .muted { margin-top: clamp(40px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: .8125rem; line-height: 1.65; color: var(--muted); }
body.aioos-page .page-doc .draft {
  display: block; margin: 0 0 28px; padding: 16px 20px; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;
  background: var(--tint); color: var(--ink); font-size: .875rem; font-weight: 600; line-height: 1.55;
}
body.aioos-page .page-doc .ph {
  padding: 1px 6px; border-radius: var(--radius-xs); background: var(--tint); color: var(--accent); font-weight: 600;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
body.aioos-page .page-doc .note { margin-bottom: 0; color: var(--muted); }
body.aioos-page .page-doc .summary { margin: 0 0 1.4em; padding: 20px 24px; border-radius: var(--radius-card); background: var(--tint); }
body.aioos-page .page-doc .summary > :last-child { margin-bottom: 0; }
body.aioos-page .page-doc .summary b { display: block; margin-bottom: 6px; }
body.aioos-page .page-doc .doc-tools { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 24px; }
@media (max-width: 600px) {
  body.aioos-page .page-doc { padding: 0; background: transparent; border: 0; box-shadow: none; }
}

/* ---------- utility page (404) ---------- */
body.aioos-page .page-utility {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px;
  width: min(100% - var(--gutter) * 2, var(--page-wrap)); margin-inline: auto; padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
}
body.aioos-page .page-utility__copy { display: grid; gap: 24px; min-width: 0; }
/* The numeral beside the copy already shows the status; screen readers still hear it once from this label. */
body.aioos-page .page-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body.aioos-page .page-utility__copy h1 {
  margin: 0; font-family: var(--type-family); font-weight: 600; font-size: clamp(1.875rem, 1.1rem + 2.7vw, 4rem);
  line-height: 1.08; letter-spacing: -.05em; text-wrap: balance; overflow-wrap: break-word;
}
body.aioos-page .page-utility__copy > p:not(.page-kicker) { margin: 0; max-width: 58ch; font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.6; color: var(--ink); }
body.aioos-page .page-utility__copy .page-actions { margin-top: 4px; }
body.aioos-page .page-utility__copy .page-button { min-width: 224px; }
body.aioos-page .page-utility__art {
  display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 640 / 450; max-height: 450px;
  font-family: var(--display); font-weight: 400; font-size: clamp(150px, 19vw, 300px); line-height: .8; letter-spacing: .01em;
  color: var(--accent); text-shadow: 10px 13px 0 var(--lilac); user-select: none;
}
@media (max-width: 960px) {
  body.aioos-page .page-utility { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.aioos-page .page-utility__art { order: -1; justify-content: flex-start; aspect-ratio: auto; height: clamp(150px, 30vw, 260px); font-size: clamp(132px, 30vw, 240px); text-shadow: 7px 9px 0 var(--lilac); }
}
@media (max-width: 760px) {
  body.aioos-page .page-utility__copy .page-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  body.aioos-page .page-utility__copy .page-button { width: 100%; }
  body.aioos-page .page-utility__copy .page-link { align-self: flex-start; }
}

/* ---------- motion utilities. Content is visible without them; reduced motion turns every one off. ---------- */
/* Lift: a 2px rise on fine-pointer hover only. */
@media (hover: hover) and (pointer: fine) {
  body.aioos-page .motion-lift:hover { transform: translateY(-2px); }
  body.aioos-page .motion-lift:active { transform: translateY(0); transition-duration: 80ms; }
}
/* Arrow nudge: the decorative arrow inside a link travels 2px towards its destination. */
body.aioos-page .motion-arrow > span[aria-hidden] { display: inline-block; transition: transform 160ms var(--ease); }
body.aioos-page .motion-arrow:hover > span[aria-hidden] { transform: translate(2px, -2px); }
/* Route draw: an SVG path with pathLength="100" draws once when shell.js marks it; without script it is drawn. */
body.aioos-page .route-track { fill: none; stroke: var(--accent); stroke-width: 1.35; opacity: .18; vector-effect: non-scaling-stroke; }
body.aioos-page .route-trace { fill: none; stroke: var(--accent); stroke-width: 2.75; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; }
body.aioos-page [data-route-draw].route-pending .route-trace { stroke-dashoffset: 100; }
body.aioos-page [data-route-draw].route-drawn .route-trace { stroke-dashoffset: 0; transition: stroke-dashoffset var(--route-duration, 900ms) var(--ease); }
/* Fade in: answer text of a disclosure, after the native expansion; never used to hide content at rest. */
body.aioos-page details[open] > .motion-fade { animation: page-fade 180ms var(--ease); }
@keyframes page-fade { from { opacity: .6; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body.aioos-page *, body.aioos-page *::before, body.aioos-page *::after { transition-duration: 0ms !important; animation: none !important; }
  body.aioos-page .motion-lift:hover, body.aioos-page .motion-arrow:hover > span[aria-hidden], body.aioos-page .page-button:hover { transform: none; }
  body.aioos-page [data-route-draw].route-pending .route-trace { stroke-dashoffset: 0; }
  body.aioos-page .page-progress { display: none; }
}

/* ---------- forced colours ---------- */
@media (forced-colors: active) {
  body.aioos-page .page-button, body.aioos-page .cta-box > div > a { border: 1px solid ButtonText; }
  body.aioos-page .page-toc a[aria-current="location"] { outline: 1px solid Highlight; }
  body.aioos-page .page-card, body.aioos-page .page-doc, body.aioos-page .page-table, body.aioos-page .page-toc-mobile { border: 1px solid CanvasText; }
  body.aioos-page .page-cta { background: Canvas; border-block: 1px solid CanvasText; }
  body.aioos-page .page-utility__art, body.aioos-page .page-cta__signature, body.aioos-page .page-cta__curve { display: none; }
  body.aioos-page .page-progress { display: none; }
}

/* ---------- print: the document, not the chrome ---------- */
@media print {
  @page { size: A4; margin: 18mm; }
  html.aioos-conversion body.aioos-page { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.5; }
  body.aioos-page :is(.site-header, .skip-link, .page-toc, .page-toc-mobile, .page-progress, .page-cta, .footer-grid, .back-to-top, .home-language-drawer, .breadcrumbs, .cta-box > div) { display: none !important; }
  body.aioos-page .site-footer { margin-top: 12mm; }
  body.aioos-page .page-article { display: block; width: auto; }
  body.aioos-page .page-article > article, body.aioos-page .page-article > .page-body { max-width: none; }
  body.aioos-page .page-doc, body.aioos-page .page-card, body.aioos-page .cta-box, body.aioos-page .page-table { padding: 0; border: 0; box-shadow: none; background: none; }
  body.aioos-page .page-prose { font-size: 10.5pt; color: #000; }
  body.aioos-page .page-prose h1 { font-size: 24pt; }
  body.aioos-page .page-prose h2 { font-size: 14pt; margin-top: 8mm; break-after: avoid; }
  body.aioos-page .page-prose h3 { font-size: 12pt; break-after: avoid; }
  body.aioos-page .page-prose :is(p, li) { orphans: 3; widows: 3; }
  body.aioos-page .page-prose a { color: #000; }
  body.aioos-page .page-prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; overflow-wrap: anywhere; }
  body.aioos-page .page-prose table { font-size: 9pt; min-width: 0 !important; }
  body.aioos-page .page-prose thead { display: table-header-group; }
  body.aioos-page .page-prose tr { break-inside: avoid; }
  body.aioos-page .page-prose pre { white-space: pre-wrap; border: 1px solid #999; }
  body.aioos-page .page-doc .draft, body.aioos-page .page-doc .ph, body.aioos-page .page-prose thead th { background: none; }
  body.aioos-page .page-utility__art { display: none; }
}