/* Content.
   .card, .card-flex, .card-icon-flow, .card-icon-feature – cards; .icon, .icon-heading – icons
   .btn, .btn-secondary – buttons; .badge – pill label
   .media (+ -square, -wide, -rounded), .media-link – image frames; --media-radius overrides their rounding
   .disclosure – native <details> accordion; .toc, .section-nav, .breadcrumbs – in-page navigation
   .specs – definition list of properties; .data-table, .table-wrap – tables
   .hero, .callout, .section-heading, .eyebrow, .price, .prose-action, .related-list, .code
   .fill / .fill-art – art that fills the height left next to text (see comment below) */
@layer components {
  .card { padding: var(--card-space); border: .1rem solid var(--line); border-radius: var(--radius); background: var(--paper); }
  .card-flex { display: flex; flex-direction: column; gap: 1.5rem; }
  .card-flex > :last-child { margin-block-start: auto; }
  .btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 4.4rem; padding: 1rem 2rem; font-size: var(--button-size); line-height: 1.3; border: .1rem solid transparent; border-radius: var(--radius); color: var(--on-accent); background: var(--accent); text-decoration: none; text-align: center; max-inline-size: 100%; }
  .btn-secondary { color: var(--accent); background: var(--paper); border-color: var(--line); }
  .btn[disabled] { opacity: .6; cursor: not-allowed; }
  .media { display: block; inline-size: 100%; aspect-ratio: var(--media-ratio, 4 / 3); border-radius: var(--media-radius, var(--radius)); background: var(--surface); }
  .media-wide { --media-ratio: 16 / 9; }
  .media-square { --media-ratio: 1; }
  .media-rounded { --media-radius: 1rem; }
  .disclosure { border-block-end: .1rem solid var(--line); padding-block: 1rem; }
  .disclosure > summary { padding-block: 1rem; min-block-size: 4.4rem; }
  .disclosure > :not(summary) { margin-block: 1rem; }
  .toc a { display: block; padding-block: .8rem; }
  .breadcrumbs { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; font-size: var(--small-size); }
  .breadcrumbs li + li::before { content: '/'; margin-inline-end: .8rem; color: var(--muted); }
  .badge { display: inline-block; padding: .4rem 1rem; border: .1rem solid var(--line); border-radius: 3rem; font-size: var(--small-size); }
  .specs { margin: 0; }
  .specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-block-end: .1rem solid var(--line); }
  .specs dt { color: var(--muted); }
  .specs dd { margin: 0; }
  .aligned > .card > ul { list-style: none; padding: 0; }
  .lead, .card > p:not(.eyebrow, .sample-label, .paragraph-sample, .price), .card-flex > p { text-wrap: pretty; }
  .eyebrow { font-size: var(--small-size); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
  .hero { align-items: center; }
  .section-heading { margin-block-end: 3rem; }
  .callout { background: var(--accent); color: var(--on-accent); }
  .callout a:not(.btn) { color: inherit; }
  .callout .btn { background: var(--paper); color: var(--accent); }
  .price { font-size: 3.2rem; font-weight: 650; }
  .icon { display: block; inline-size: 4rem; block-size: 4rem; flex: none; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .icon-heading { display: flex; align-items: flex-start; gap: 1rem; }
  .icon-heading .icon { inline-size: 2.8rem; block-size: 2.8rem; }
  .icon-heading > span { min-inline-size: 0; }
  .icon-heading-reserved { align-items: center; }
  .icon-heading-reserved .icon { inline-size: 4rem; block-size: 5.75rem; }
  .card-icon-flow > p { display: flow-root; text-align: justify; text-align-last: start; text-wrap: wrap; }
  .card-icon-flow p .icon { float: inline-start; inline-size: 2.4rem; block-size: 2.4rem; margin-inline-end: .8rem; margin-block-start: .08rem; }
  .card-icon-feature { text-align: center; }
  .card-icon-feature > .icon { inline-size: 9rem; block-size: 9rem; align-self: center; margin-block: 1rem; }
  .card-icon-feature > a { align-self: center; }
  .prose-action { display: inline-block; }
  .section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2.5rem; }
  .section-nav a { display: inline-flex; align-items: center; min-block-size: 3.6rem; }
  .section-nav > .small { color: var(--muted); }
  .related-list { display: grid; gap: 1.5rem; padding: 0; list-style: none; }
  .related-list li { padding-block: 1.5rem; border-block-start: .1rem solid var(--line); }
  .related-list p { margin-block-start: .5rem; font-size: var(--small-size); color: var(--muted); }
  .prose .related-list { padding: 0; }
  .prose .related-list li + li { margin-block-start: 0; }
  .code { max-inline-size: 100%; margin: 0; padding: 2rem; border: .1rem solid var(--line); border-radius: var(--radius); background: var(--paper); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--small-size); }
  .media-link { display: block; inline-size: 100%; line-height: 0; border-radius: var(--radius); }
  .media-link > .media { display: block; }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :where(.btn, .brand, .desktop-nav a, .mobile-nav > summary, .mobile-nav nav a, .footer-links a, .catalog-nav a, .card a, .media-link) { transition: transform .16s ease; }
    .card a:not(.btn), .footer-links a { display: inline-block; }
    :where(.btn, .brand, .desktop-nav a, .mobile-nav > summary, .mobile-nav nav a, .footer-links a, .catalog-nav a, .card a, .media-link):not(:disabled):hover { transform: scale(1.03); }
    .brand { transform-origin: left center; }
    .brand:dir(rtl) { transform-origin: right center; }
    .mobile-nav > summary, .mobile-nav nav a, .language-control { transform-origin: right center; }
    :is(.mobile-nav > summary, .mobile-nav nav a, .language-control):dir(rtl) { transform-origin: left center; }
  }
  .contact-facts { margin: 0; }
  .contact-facts > div { padding-block: 1.5rem; border-block-end: .1rem solid var(--line); }
  .contact-facts dt { font-weight: 650; }
  .contact-facts dd { margin: .5rem 0 0; }
  .table-wrap { overflow-x: auto; }
  .data-table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .data-table caption { padding-block-end: 1rem; text-align: start; color: var(--muted); font-size: var(--small-size); }
  .data-table :is(th, td) { padding: .8rem 1.2rem; border-block-end: .1rem solid var(--line); text-align: start; }
  .data-table thead th { border-block-end-width: .2rem; font-size: var(--small-size); color: var(--muted); }
  .data-table .num { text-align: end; }
  /* Fill: an illustration takes the height left in a column next to taller content, anchored to the bottom.
     --fill-min / --fill-max bound its height; --fill-overlap lets it rise into the padding of the block above
     (never over its text, never under it); --fill-bleed lets it run into the container's padding, e.g. to sit on
     the next section's edge. If the column is too short, the row grows instead of the art shrinking below min.
     Give the SVG preserveAspectRatio="xMinYMax meet" so a width-limited drawing still sits on the bottom edge. */
  .fill { --fill-min: 12rem; --fill-max: 40rem; --fill-overlap: 0rem; --fill-bleed: 0rem; position: relative; display: grid; grid-template-rows: auto minmax(max(0rem, calc(var(--fill-min) - var(--fill-overlap) - var(--fill-bleed))), 1fr); align-self: stretch; }
  .fill-art { position: absolute; z-index: 1; grid-row: 2; inset-block-end: calc(-1 * var(--fill-bleed)); inset-inline-start: 0; block-size: min(var(--fill-max), calc(100% + var(--fill-overlap) + var(--fill-bleed))); inline-size: auto; max-inline-size: 100%; }
  @media (width <= 50em) {
    .icon-heading-reserved .icon { block-size: 6.44rem; }
    .grid-compact .card { --card-space: 1.5rem; }
    .grid-compact h3 { font-size: 2.5rem; }
  }
  @media (width > 50em) {
    .callout > div:last-child { display: flex; justify-content: center; align-items: center; }
    .prose-action { margin-block-start: 2rem; }
    .section-nav.section { padding-block: 1.2rem; }
    .disclosure { padding-block: .6rem; }
    .prose > .disclosure + .disclosure { margin-block-start: .5rem; }
    .disclosure > summary { display: flex; align-items: center; gap: 1.5rem; list-style: none; padding-block: .4rem; min-block-size: 3.6rem; }
    .disclosure > summary::-webkit-details-marker { display: none; }
    .disclosure > summary::marker { content: ''; }
    .disclosure > summary::before { content: ''; inline-size: .8rem; block-size: .8rem; border-block-start: .16rem solid currentColor; border-inline-end: .16rem solid currentColor; transform: rotate(45deg); flex: none; }
    .disclosure:dir(rtl) > summary::before { transform: rotate(225deg); }
    .disclosure[open] > summary::before { transform: rotate(135deg); }
  }
  @media print {
    .btn { display: none; }
    .card { break-inside: avoid; }
  }
}