@import "./fonts.css";

/* Ruta — legal pages.
   One stylesheet, shared by every document in every language.
   Values are taken verbatim from the Claude Design prototype
   ("Legal Page - Terms.dc.html"); see legal-src/README.md. */

:root {
  --canvas: #f7f7f5;
  --card: #ffffff;
  --ink: #0a0a0a;
  --ink-body: #3f4045;
  --ink-soft: #4a4a4a;
  --muted: #797979;
  --subtle: #9a9ca3;
  --hairline: rgba(0, 0, 0, 0.07);
  --border-input: rgba(0, 0, 0, 0.18);
  --accent: #f0efef;
  --accent-hover: #e4e2e2;
  --rule-ahead: #d6d4d6;
  --rule-behind: rgba(10, 10, 10, 0.18);
  --ring: rgba(10, 10, 10, 0.12);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shell: 124rem;

  /* Petrona has no Cyrillic. Listing Fixel Text next means Ukrainian headings
     fall through to it per-glyph rather than to a system serif. */
  --display: Petrona, "Fixel Text", Georgia, serif;
}

* { box-sizing: border-box; }

/* The root font-size is the single proportion control for this whole page:
   everything below is sized in rem, so moving it scales type, padding, gaps
   and radii together, in step.

   Desktop is the prototype's own ramp, untouched — 11px at 1440, rising to
   12.65px on very wide screens.

   Below 1000px that ramp's floor would pin a phone at 11px -- desktop type in
   a phone-width column, ~29 characters per line.

   The phone ramp is the landing page's own, converted into this file's scale.
   mobile.html uses clamp(12px, 3.72vw, 18px) with body copy at 0.95rem; body
   here is 1.7rem, so the same rendered size is clamp(6.71px, 2.079vw, …) --
   13.8px body at 390px, matching mobile.html to the pixel.

   The cap is this file's 11px rather than mobile.html's equivalent, so the
   curve rises continuously into the desktop ramp and meets it at 529px.
   tablet.html is deliberately NOT used: its artboard scale renders body at
   21.4px, larger than desktop's 18.7px, which is coherent across three
   device-routed files but would make type grow from phone to tablet and then
   shrink again in a single responsive document. */
html { font-size: clamp(11px, 0.7639vw, 12.65px); }

@media (max-width: 1160px) {
  html { font-size: clamp(6.71px, 2.079vw, 11px); }
  /* (above ~529px this equals the desktop ramp, so the breakpoint move is
     invisible in type size -- it only changes the layout.) */
}
html, body { margin: 0; }

body {
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Fixel Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #000; color: #fff; }

a { color: var(--ink); }
a:hover { color: var(--ink-soft); }

:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---------------------------------------------------------------- shell -- */

.ln-header {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2.6rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.ln-logo { display: block; text-decoration: none; }
.ln-logo svg { height: 4rem; width: auto; display: block; overflow: visible; }

.ln-main {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 6.4rem 4rem 0;
}

/* ------------------------------------------------------- language links -- */

/* The design's dropdown, built from three real links rather than a <select>:
   each language is its own address, so it can be cited, shared, opened in a
   new tab and crawled (KAN-332 rule 2). <details> supplies the disclosure
   behaviour natively, so the control still works with JavaScript off. */
/* Visually hidden, still announced. */
.ln-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ln-langs {
  position: relative;
  flex-shrink: 0;
}

.ln-langs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-width: 14rem;
  /* the hidden label must not push the visible one off-centre */
  text-align: left;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.8rem;
  padding: 0.9rem 1.4rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.ln-langs summary::-webkit-details-marker { display: none; }
.ln-langs summary::marker { content: ""; }
.ln-langs summary:hover { background: var(--accent); }

.ln-langs summary:focus-visible {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--ring);
}

.ln-langs summary svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}

.ln-langs[open] summary svg { transform: rotate(180deg); }

.ln-langs-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 20;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 0.8rem;
  padding: 0.6rem;
  box-shadow: 0 4px 16px rgba(10, 13, 18, 0.08);
}

.ln-langs-menu a {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.9rem 1.2rem;
  border-radius: 0.5rem;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.ln-langs-menu a:hover { background: var(--accent); color: var(--ink); }

.ln-langs-menu a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  background: var(--accent);
}

/* ------------------------------------------------------------- masthead -- */

.ln-masthead { max-width: 82rem; }

.ln-kicker {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
}

.ln-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: 4.8rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1.6rem 0 0;
  text-wrap: balance;
}

.ln-intro {
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 2rem 0 0;
  max-width: 58ch;
  text-wrap: pretty;
}

/* The version label and effective date are page content, never a comment —
   an acceptance record is worthless if its wording cannot be produced. */
.ln-meta {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-wrap: wrap;
  margin-top: 3.2rem;
  font-size: 1.4rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ln-meta b { color: var(--ink); font-weight: 500; }
.ln-meta .ln-sep { color: var(--rule-ahead); }

/* --------------------------------------------------------------- layout -- */

.ln-layout {
  display: grid;
  grid-template-columns: 28rem minmax(0, 1fr);
  gap: 8rem;
  align-items: start;
  margin-top: 7.2rem;
  padding-bottom: 10rem;
}

/* ------------------------------------------------------------------ toc -- */

/* On desktop the disclosure is always open and its summary is hidden: the
   sidebar has room, so there is nothing to collapse. */
.ln-toc-wrap {
  position: sticky;
  top: 4rem;
}

.ln-toc-wrap > summary { display: none; }

.ln-toc {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-right: 1rem;
}

/* The roadmap motif: solid rule behind where you are, dashed ahead. */
.ln-toc a {
  display: grid;
  /* auto, not a fixed 2.4rem: a marker wider than the column used to overflow
     it and collide with the title. */
  grid-template-columns: minmax(2.4rem, auto) 1fr;
  gap: 0.6rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  padding: 0.8rem 0 0.8rem 1.8rem;
  border-left: 2px dashed var(--rule-ahead);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ln-toc a > span:first-child { color: var(--subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-toc a.is-behind { border-left: 2px solid var(--rule-behind); }
.ln-toc a.is-active { color: var(--ink); font-weight: 500; border-left: 2px solid var(--ink); }
.ln-toc a.is-active > span:first-child { color: var(--ink); }

/* -------------------------------------------------------------- article -- */

.ln-article {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 2.4rem;
  padding: 6.4rem 7.2rem 7.2rem;
}

.ln-sec { scroll-margin-top: 4rem; }

.ln-sec + .ln-sec {
  margin-top: 6.4rem;
  padding-top: 6.4rem;
  border-top: 1px solid var(--hairline);
}

.ln-sec h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: 5rem 1fr;
}

.ln-sec h2 > span:first-child { color: var(--subtle); font-variant-numeric: tabular-nums; }
.ln-sec h2.ln-h2-plain { display: block; margin: 1.2rem 0 2rem; }

.ln-sec h3 {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 3.2rem 0 1.2rem;
  letter-spacing: -0.01em;
}

.ln-sec > h3:first-child { margin-top: 0; }

.ln-sec p {
  font-size: 1.7rem;
  line-height: 1.62;
  color: var(--ink-body);
  margin: 0 0 1.6rem;
  text-wrap: pretty;
}

.ln-sec > :last-child { margin-bottom: 0; }

.ln-sec strong { font-weight: 600; color: var(--ink); }

/* ---------------------------------------------------------------- lists -- */

.ln-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  counter-reset: ln-item;
}

.ln-list li {
  position: relative;
  padding-left: 2.4rem;
  font-size: 1.7rem;
  line-height: 1.62;
  color: var(--ink-body);
  text-wrap: pretty;
}

.ln-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--subtle);
}

.ln-list--nested {
  margin: 1.2rem 0 0;
  gap: 0.8rem;
}

.ln-list--number > li::before {
  counter-increment: ln-item;
  content: counter(ln-item) ".";
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- figures -- */

.ln-callout {
  background: var(--accent);
  border-radius: 1.6rem;
  padding: 2.8rem 3.2rem;
  margin: 0 0 2.4rem;
}

.ln-callout p {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.ln-panel {
  border: 1px solid var(--hairline);
  border-radius: 1.6rem;
  padding: 3.2rem 3.6rem;
  margin: 0 0 2.4rem;
}

.ln-panel > :last-child { margin-bottom: 0; }

.ln-quote {
  margin: 0 0 2rem;
  padding: 0 0 0 2.8rem;
  border-left: 2px solid var(--ink);
}

.ln-quote > :last-child { margin-bottom: 0; }

/* A blank the owner has still to supply. Shaded so it is visibly unfinished. */
.ln-blank {
  background: var(--accent);
  border-radius: 0.4rem;
  padding: 0 0.5rem;
  color: var(--ink-soft);
}

/* An editorial note — a decision for the lawyer, not a value to type in. */
.ln-note {
  background: var(--accent);
  border-radius: 0.4rem;
  padding: 0 0.5rem;
  color: var(--ink-soft);
}

.ln-sec a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3rem; }

/* --------------------------------------------------------------- tables -- */

.ln-table {
  border: 1px solid var(--hairline);
  border-radius: 1.2rem;
  overflow: hidden;
  margin: 0 0 2.4rem;
}

/* --ln-cols is set on each table by the renderer, from the table's own content. */
.ln-thead, .ln-row { display: grid; grid-template-columns: var(--ln-cols, 1fr 1fr 1fr); }
.ln-thead { background: var(--accent); }

.ln-thead span {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 1.4rem 2rem;
}

.ln-row { border-top: 1px solid var(--hairline); }

.ln-row span {
  overflow-wrap: anywhere;   /* a long email address wraps inside its column */
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ink-body);
  padding: 1.8rem 2rem;
}

.ln-row span.is-verdict { color: var(--ink); font-weight: 600; }

/* A table too wide for the article (more than four columns: the cookie
   inventory) is a stack of cards: one per row, each value beside its label,
   the row's first value as the card's heading. */
.ln-table--cards .ln-thead { display: none; }
.ln-table--cards .ln-row { grid-template-columns: 1fr; padding: 1.4rem 0; }
.ln-table--cards .ln-row span {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 2.4rem;
  padding: 0.7rem 2.4rem;
  overflow-wrap: break-word;
}
.ln-table--cards .ln-row span::before {
  content: attr(data-th);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
  padding-top: 0.35rem;
}
.ln-table--cards .ln-row span:first-child { color: var(--ink); font-weight: 600; }

/* Annex I — the model withdrawal form's blank rules. */
.ln-formrows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.ln-formrows li {
  display: grid;
  grid-template-columns: minmax(0, 24rem) 1fr;
  gap: 1.2rem;
  align-items: end;
  font-size: 1.6rem;
  color: var(--ink-body);
}

.ln-formrows li span:last-child { border-bottom: 1px solid var(--border-input); height: 2.2rem; }

/* ------------------------------------------------------- pending wording -- */

.ln-pending {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 2.4rem;
  padding: 6.4rem 7.2rem;
  max-width: 82rem;
  margin-top: 7.2rem;
}

.ln-pending h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.6rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 1.6rem 0 0;
}

.ln-pending p {
  font-size: 1.7rem;
  line-height: 1.62;
  color: var(--ink-body);
  margin: 1.6rem 0 0;
  text-wrap: pretty;
}

.ln-pending .ln-other { margin-top: 3.2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.ln-pending .ln-other a { font-size: 1.5rem; color: var(--ink-soft); }

/* ------------------------------------------------------------ doc index -- */

.ln-index {
  display: grid;
  /* Four documents sit as 2x2 rather than 3+1. */
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 2.4rem;
  margin-top: 5.6rem;
  padding-bottom: 10rem;
}

.ln-index a {
  display: block;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 1.6rem;
  padding: 3.2rem 3.6rem;
  text-decoration: none;
  transition: border-color 0.15s var(--ease);
}

.ln-index a:hover { border-color: var(--border-input); }

.ln-index h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.ln-index p { font-size: 1.5rem; line-height: 1.55; color: var(--muted); margin: 0.8rem 0 0; }
.ln-index .ln-state { font-size: 1.3rem; color: var(--subtle); margin-top: 1.6rem; display: block; }

/* --------------------------------------------------------------- footer -- */

.ln-footer { background: var(--card); border-top: 1px solid var(--hairline); }
.ln-footer > div { max-width: var(--shell); width: 100%; margin: 0 auto; padding: 0 4rem; }

.ln-footgrid {
  padding: 5.6rem 0 0;
  display: grid;
  grid-template-columns: minmax(24rem, 1.1fr) minmax(0, 0.6fr) minmax(0, 0.8fr);
  gap: 4.8rem;
  align-items: start;
}

.ln-footgrid svg { height: 3.2rem; width: auto; display: block; overflow: visible; }
.ln-footgrid nav { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }

.ln-footgrid nav a {
  font-size: 1.4rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ln-footgrid nav a:hover { color: var(--ink); }
.ln-footgrid nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.ln-colophon {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 3.4rem;
  padding: 2.4rem 0 3.2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.4rem;
  flex-wrap: wrap;
}

/* KAN-306 -- the permanent disclaimer.

   Plain text: no link, no "read more", no tooltip, nothing to close, and
   nothing that remembers having been read (AC-3, AC-4).

   Full ink, not the muted grey the rest of the footer chrome uses. On the
   footer's white that measures about 19:1 where AC-5 asks for 4.5:1, and it
   is what makes the notice outrank the copyright line below it rather than
   read as more boilerplate.

   The size carries an absolute floor as well as its rem value. The phone ramp
   bottoms out at 6.71px, where 1.5rem would render at 10.1px on a 320px
   screen -- under the 12px AC-5 requires. The floor is the product side's
   13px, so a phone reader sees the same size in both repositories. */
.ln-disclaimer {
  /* The colophon is a right-aligned flex row. Taking a whole flex line puts
     the notice on its own row inside it, with the copyright wrapping to the
     line below and staying right; the row's 2.4rem gap is the space between
     them. Same arrangement as the landing artboards. */
  flex: 1 1 100%;
  /* The row is justify-content: flex-end, so a notice narrower than the line
     would be pushed right, away from the logo and nav columns it sits under.
     The auto right margin holds it at the start. */
  margin: 0 auto 0 0;
  max-width: 96ch;
  font-size: max(1.5rem, 13px);
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

/* Demoted below the disclaimer, in both size and colour, so the legal notice
   plainly outranks the boilerplate. Floored at 11px so it stays legible on a
   narrow phone even though it is the least important line on the page.

   It takes a whole flex line of its own so it sits below the notice rather
   than beside it: the notice is capped at a readable measure, which would
   otherwise leave room for the copyright on the same line. */
.ln-colophon > span {
  flex: 1 1 100%;
  text-align: right;
  font-size: max(1.25rem, 11px);
  color: var(--subtle);
}

/* ---------------------------------------------------------- laptop -- */

/* The two-column proportions are drawn for 1440. Between the breakpoint and
   ~1360 the 28rem sidebar, 8rem gutter and 7.2rem card padding leave the
   article at ~42 characters a line -- shorter than the phone. Tighten the
   chrome so the measure stays in range across the whole two-column span. */
@media (min-width: 1161px) and (max-width: 1360px) {
  .ln-layout { grid-template-columns: 24rem minmax(0, 1fr); gap: 5.6rem; }
  .ln-article { padding: 5.6rem 4.8rem 6.4rem; }
}

/* ------------------------------------------------------------ narrow -- */

/* The layout breakpoint is 1160px, not 1000px: a 28rem sidebar plus gutter
   does not leave the article a readable line until about there. Stacked, the
   article caps its own width instead. */

@media (max-width: 1160px) {
  .ln-header, .ln-main { padding-left: 2rem; padding-right: 2rem; }
  .ln-footer > div { padding-left: 2rem; padding-right: 2rem; }

  .ln-layout { grid-template-columns: 1fr; gap: 4rem; margin-top: 4.8rem; }

  /* Below the breakpoint the TOC stacks above the document, where 23 links is a wall
     a phone reader must scroll past before reaching clause 1. It becomes a
     collapsed disclosure instead -- shipped open, closed by script, so with
     JavaScript off it degrades to the plain stacked list. */
  .ln-toc-wrap { position: static; }

  .ln-toc-wrap > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 0.8rem;
    padding: 1.4rem 1.8rem;
    cursor: pointer;
    list-style: none;
  }

  .ln-toc-wrap > summary::-webkit-details-marker { display: none; }
  .ln-toc-wrap > summary::marker { content: ""; }

  .ln-toc-wrap > summary svg {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.3s var(--ease);
  }

  .ln-toc-wrap[open] > summary svg { transform: rotate(180deg); }

  .ln-toc {
    max-height: none;
    overflow: visible;
    padding-right: 0;
    margin-top: 1.6rem;
  }

  /* Stacked, the article would otherwise run the full width of a small laptop
     and reach ~71 characters a line. Cap it at a readable measure and centre. */
  .ln-article, .ln-pending {
    padding: 3.6rem 2.8rem 4.8rem;
    border-radius: 1.6rem;
    max-width: 74rem;
    margin-inline: auto;
  }

  /* Tables become label/value rows: the column header moves onto each cell. */
  .ln-thead { display: none; }
  .ln-row { grid-template-columns: 1fr; }
  .ln-row span { padding: 0.6rem 1.8rem; }
  .ln-row span:first-child { padding-top: 1.8rem; }
  .ln-row span:last-child { padding-bottom: 1.8rem; }
  .ln-table--cards .ln-row { padding: 0; }
  .ln-table--cards .ln-row span { display: block; padding: 0.6rem 1.8rem; }
  .ln-table--cards .ln-row span:first-child { padding-top: 1.8rem; }
  .ln-table--cards .ln-row span:last-child { padding-bottom: 1.8rem; }

  .ln-row span[data-th]::before {
    content: attr(data-th);
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--subtle);
    margin-bottom: 0.3rem;
  }

  .ln-formrows li { grid-template-columns: 1fr; gap: 0.4rem; }
  .ln-footgrid { grid-template-columns: 1fr; gap: 3.2rem; }
  .ln-index { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- phone -- */

@media (max-width: 640px) {
  .ln-header, .ln-main { padding-left: 2rem; padding-right: 2rem; }
  .ln-footer > div { padding-left: 2rem; padding-right: 2rem; }

  /* The card goes full-bleed. A rounded card inset by 8px on a 390px screen
     is not reading as a card any more, it is reading as a border -- and it
     was costing ~40px of every line. The white ground still does the work of
     separating document from canvas; the radius and side rules do not. */
  .ln-article, .ln-pending {
    margin-inline: -2rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 3.6rem 2rem 4.4rem;
  }

  /* Version, effective date and last-updated stack rather than wrap: inline
     they break mid-row and leave a separator dangling at the start of a line. */
  .ln-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 2.8rem;
  }

  .ln-meta .ln-sep { display: none; }

  .ln-callout { padding: 2.2rem 2rem; }
  .ln-panel { padding: 2.4rem 2rem; }
  .ln-quote { padding-left: 1.8rem; }
}

/* ---------------------------------------------------------------- print -- */

@media print {
  body { background: #fff; }
  .ln-toc, .ln-langs { display: none; }
  .ln-layout { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
  .ln-article { border: 0; border-radius: 0; padding: 0; }
  .ln-sec { break-inside: avoid-page; }
}