/* =========================================================
   Phillux — shared stylesheet for all pages.
   Colours and building blocks from the design system that
   also carries the web interface. Deliberately single-theme,
   light.

   Identical to the block that index.html still carries inline,
   plus the parts only the newer pages use: .lang, .cmp, .prose
   and .rel. index.html can switch over to this file at any time.
   ========================================================= */
:root {
  color-scheme: light;   /* stops browsers from inverting the page on their own */

  --action-900:#004A70; --action-800:#005B88; --action-700:#0072A3;
  --action-600:#0095D3; --action-500:#49AFD9; --action-50:#E1F1F6;
  --indigo:#6870C4; --violet:#9265BC; --indigo-900:#343E6B;

  --n-0:#FFFFFF;  --n-50:#FAFAFA; --n-100:#F4F8FA; --n-200:#EEEEEE;
  --n-300:#DDDDDD; --n-400:#CCCCCC; --n-500:#9A9A9A; --n-600:#737373;
  --n-700:#565656; --n-800:#313131; --n-1000:#000000;
  --dark:#232B45;

  --ink: var(--n-800); --body: var(--n-700); --soft: var(--n-600);

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Clarity City", "Metropolis", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --col: 1200px;
}

* { box-sizing: border-box; }
main { display: block; }   /* the landmark that carries the page content */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--n-0); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

h1,h2,h3,h4 { margin: 0; color: var(--ink); font-weight: 200; letter-spacing: -.005em; line-height: 1.18; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
a { color: var(--action-700); }
:focus-visible { outline: 2px solid var(--action-600); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; padding: 0 22px; height: 42px;
  border-radius: 3px; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn--solid { background: var(--action-800); color: #fff; border-color: var(--action-800); }
.btn--solid:hover { background: var(--action-900); border-color: var(--action-900); }
.btn--outline { background: #fff; color: var(--action-700); border-color: var(--action-700); }
.btn--outline:hover { background: var(--action-50); }
.btn--onDark { background: transparent; color: #fff; border-color: #fff; }
.btn--onDark:hover { background: rgba(255,255,255,.14); }
.btn--sm { height: 36px; font-size: .75rem; padding: 0 16px; }

/* ---------- Header ---------- */
.utility { background: var(--n-200); font-size: .8rem; }
.utility__in { height: 34px; display: flex; align-items: center; justify-content: flex-end; }
.utility a { color: var(--n-700); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.utility a:hover { color: var(--action-700); }
.utility svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

.top { position: sticky; top: 0; z-index: 80; background: var(--n-0); }
.top__in { height: 68px; display: flex; align-items: center; }
.top__mark { display: flex; color: var(--n-1000); flex: none; text-decoration: none; }
.top__mark svg { height: 16px; width: auto; }
.top__nav { display: flex; align-items: center; gap: 42px; font-size: .95rem; margin-inline: auto; }
.top__nav a { color: var(--n-700); text-decoration: none; }
.top__nav a:hover { color: var(--action-700); }
.top__end { display: flex; align-items: center; gap: 18px; }
.top__burger { display: none; place-items: center; background: none; border: 0; cursor: pointer; color: var(--n-700); padding: 8px; }
.top__burger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.mnav { display: none; border-top: 1px solid var(--n-300); background: var(--n-0); }
/* The open menu is its own scroll area, not extra page. On a phone this list is
   longer than the screen; without a height of its own the header simply grew, the
   page scrolled underneath it and the last entries were unreachable.
   svh, not vh: with vh the browser's own bar is not counted and the bottom entry
   stays hidden behind it. overscroll-behavior stops the page from scrolling on
   once the list is at its end. */
.mnav[data-open] { display: block; max-height: calc(100vh - 68px); max-height: calc(100svh - 68px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mnav a { display: block; padding: 15px 24px; font-size: 1rem; color: var(--action-700); text-decoration: none; border-bottom: 1px solid var(--n-200); }
.mnav a:last-child { border-bottom: 0; }
@media (max-width: 1000px) { .top__nav { display: none; } .top__end { margin-left: auto; } .top__burger { display: grid; } }

.stripe { height: 4px; background: linear-gradient(90deg, var(--action-700), var(--action-500) 30%, var(--indigo) 66%, var(--violet)); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero__diag { position: absolute; inset: 0 0 0 auto; width: 62%; background: linear-gradient(118deg, var(--action-600), var(--action-800) 52%, var(--indigo-900)); clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%); }
@media (max-width: 980px) { .hero__diag { display: none; } }
.hero__in { position: relative; padding-block: 26px 46px; }
.crumb { font-size: .85rem; color: var(--soft); display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 34px; }
.crumb a { color: var(--action-700); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb svg { width: 9px; height: 9px; stroke: var(--n-500); fill: none; stroke-width: 2.5; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(26px,4vw,54px); align-items: center; }
@media (max-width: 980px) { .hero__grid { grid-template-columns: minmax(0,1fr); } }
.hero__sub { font-size: 1.06rem; color: var(--body); max-width: 48ch; margin-top: 18px; font-weight: 300; }
.hero__sub strong { color: var(--ink); font-weight: 500; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- Section navigation ---------- */
.subnav { position: sticky; top: 68px; z-index: 70; background: var(--n-0); box-shadow: 0 1px 0 var(--n-300), 0 3px 6px -4px rgba(0,0,0,.18); }
/* "safe center" is the whole point: plain `center` centres the row even when it
   is wider than the bar, and the items that fall off the left edge can then not
   be scrolled to at all — they are simply gone. "safe" falls back to flex-start
   as soon as the content overflows, so nothing becomes unreachable. */
.subnav__in { display: flex; overflow-x: auto; scrollbar-width: none; justify-content: safe center; }
.subnav__in::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 18px 16px; font-size: 1rem; color: var(--action-700); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; }
.subnav a:hover { color: var(--action-900); }
.subnav a[data-active] { border-bottom-color: var(--action-700); color: var(--ink); }

/* ---------- Sections ---------- */
.band { padding-block: clamp(54px, 7vw, 86px); }
.band--tint { background: var(--n-100); }
.band__head { text-align: center; max-width: 900px; margin: 0 auto 44px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.band__sub { color: var(--soft); font-size: 1.05rem; font-weight: 300; }
.band__acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* ---------- Screenshots ----------
   A real screenshot of the interface. The frame keeps the
   aspect ratio so nothing jumps while the image loads.
   ------------------------------------------------------------ */
/* <picture> only picks the file format; it must not become a box of its own,
   otherwise the centring of .bild--dlg loses its reference. */
picture { display: block; }

.bild { display: block; width: 100%; height: auto; border: 1px solid var(--n-400); border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* A dialogue, not a whole page. These captures are only 575–875 px wide;
   stretched to the full column they would go soft. So they keep their own
   size and sit centred instead. */
.bild--dlg { width: auto; max-width: 100%; margin-inline: auto; box-shadow: 0 2px 10px rgba(0,0,0,.10); }

/* ---------- A series of dialogues, one step per card ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; align-items: start; }
.shot { background: var(--n-0); border: 1px solid var(--n-300); border-radius: 3px; padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .18s; }
.shot:hover { box-shadow: 0 3px 10px rgba(0,0,0,.13); }
.shot__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--action-800); color: #fff; font-size: .78rem; font-weight: 600; flex: none; }
.shot__t { font-size: 1.1rem; font-weight: 200; color: var(--ink); line-height: 1.25; }
.shot__hd { display: flex; align-items: center; gap: 12px; }
.shot__d { font-size: .91rem; color: var(--body); font-weight: 300; line-height: 1.55; }
.shot .bild { border-color: var(--n-300); }

/* ---------- Cards ---------- */
.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.vcard { background: var(--n-0); border: 1px solid var(--n-300); border-radius: 3px; padding: 34px 30px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .18s; }
.vcard:hover { box-shadow: 0 3px 10px rgba(0,0,0,.13); }
.vcard__ico svg { width: 66px; height: 66px; fill: var(--action-800); }
.vcard__t { font-size: 1.35rem; font-weight: 200; color: var(--ink); line-height: 1.25; }
.vcard__d { font-size: .95rem; color: var(--body); line-height: 1.55; }

.grid9 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); gap: 26px; }
.fcard { background: var(--n-0); border: 1px solid var(--n-300); border-radius: 3px; padding: 28px 26px; display: grid; grid-template-columns: 46px 1fr; column-gap: 18px; row-gap: 12px; align-content: start; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .18s; }
.fcard:hover { box-shadow: 0 3px 10px rgba(0,0,0,.13); }
.fcard__ico svg { width: 42px; height: 42px; fill: var(--action-800); }
.fcard__t { grid-column: 2; align-self: center; font-size: 1.16rem; font-weight: 200; color: var(--ink); line-height: 1.24; }
.fcard__d { grid-column: 1 / -1; font-size: .92rem; color: var(--body); line-height: 1.55; }

/* The way from a card to the page behind it. Sits at the foot of the card so
   the eye finds it in the same place on every one of them. */
.cardmore { grid-column: 1 / -1; margin-top: 2px; align-self: end; display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; letter-spacing: .04em; color: var(--action-700); text-decoration: none; }
.cardmore:hover { color: var(--action-900); text-decoration: underline; }
.cardmore svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fcard { align-content: space-between; }

/* ---------- Beyond the basics ----------
   Cards with a picture on top. The picture is the point, so the slot keeps its
   height even where no screenshot has been taken yet — .mcard__soon fills it
   and says so. Swapping a placeholder for a <picture> then changes nothing
   about the layout. */
.mgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 30px; }
.mcard { background: var(--n-0); border: 1px solid var(--n-300); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .18s; }
.mcard:hover { box-shadow: 0 3px 10px rgba(0,0,0,.13); }
.mcard__media { aspect-ratio: 16 / 9; background: var(--n-100); border-bottom: 1px solid var(--n-300); overflow: hidden; }
.mcard__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
/* A dialogue is nearly square — cropping it to 16:9 would cut its buttons off.
   Full views are cropped, dialogues are fitted in whole. */
.mcard__media--dlg { padding: 16px 16px 0; }
.mcard__media--dlg img { object-fit: contain; object-position: bottom center; }
/* A wide strip out of the interface — a panel, a device row. Cropping it to
   16:9 would leave a fragment of the middle, so it is fitted in whole. */
.mcard__media--fit { padding: 14px; }
.mcard__media--fit img { object-fit: contain; object-position: center; }
.mcard__soon { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--n-100); }
.mcard__soon svg { width: 30px; height: 30px; fill: none; stroke: var(--n-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mcard__soon span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--n-600); }
.mcard__b { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.mcard__t { font-size: 1.16rem; font-weight: 200; color: var(--ink); line-height: 1.24; }
.mcard__d { font-size: .92rem; color: var(--body); line-height: 1.55; }

/* The hero image slot of a subpage that has no capture yet. Same frame as a
   screenshot so the page keeps its balance; the placeholder inside is the one
   from the cards. */
.shotsoon { aspect-ratio: 16 / 10; border: 1px solid var(--n-300); border-radius: 3px; background: var(--n-100); box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* A whole card is the link on the topic grid. Same frame as the cards above, so
   there is one kind of card on this site and not two that nearly match. */
a.mcard { text-decoration: none; color: inherit; }
a.mcard:hover .mcard__t { color: var(--action-700); }
.mcard__go { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: 7px; font-size: .84rem; letter-spacing: .04em; color: var(--action-700); }
.mcard__go svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
a.mcard:hover .mcard__go { text-decoration: underline; }

/* ---------- Demos ---------- */
.demo { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .demo { grid-template-columns: minmax(0,1fr); } }
.demo__list { display: flex; flex-direction: column; border-left: 1px solid var(--n-400); }
.demo__btn { appearance: none; background: none; border: 0; border-left: 3px solid transparent; margin-left: -1px; text-align: left; font-family: var(--sans); font-size: 1.05rem; color: var(--action-700); padding: 17px 16px; cursor: pointer; display: flex; align-items: center; gap: 14px; line-height: 1.3; transition: color .15s, border-color .15s; }
.demo__btn:hover { color: var(--action-900); }
.demo__btn[aria-selected="true"] { border-left-color: var(--action-700); color: var(--ink); }
.demo__btn svg { margin-left: auto; width: 13px; height: 13px; stroke: var(--n-500); fill: none; stroke-width: 2.4; flex: none; }
.demo__panel[hidden] { display: none; }
.demo__panel { animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.demo__cap { margin-top: 26px; }
.demo__cap h3 { margin-bottom: 10px; }
.demo__cap p { font-size: .98rem; color: var(--body); max-width: 64ch; font-weight: 300; }

/* ---------- Use cases ---------- */
.use { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px,4vw,56px); align-items: center; }
.use + .use { margin-top: clamp(38px,5vw,60px); }
.use__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.use__copy p { color: var(--body); max-width: 46ch; font-weight: 300; }
.use--flip .use__art { order: -1; }
@media (max-width: 760px) { .use--flip .use__art { order: 0; } }

/* ---------- Editions ---------- */
.eds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(296px, 100%), 1fr)); gap: 26px; align-items: stretch; }
.ed { position: relative; background: var(--n-0); border: 1px solid var(--n-300); border-radius: 3px; padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ed--hi { border: 2px solid var(--action-700); padding-top: 40px; }
.ed__tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--action-700); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 4px 16px; border-radius: 0 0 3px 3px; white-space: nowrap; }
.ed__n { font-size: 1.55rem; font-weight: 200; color: var(--ink); text-align: center; }
.ed--hi .ed__n { color: var(--action-700); }
.ed__d { font-size: .95rem; color: var(--body); line-height: 1.55; font-weight: 300; }
/* The list is long on purpose — it is the argument that no function is locked
   in any edition. Tighter spacing so the point can be made in full without
   the card turning into a page of its own. */
.ed__list { list-style: disc; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ed__list li { font-size: .875rem; color: var(--body); line-height: 1.4; }
.ed__list li[data-off] { color: var(--n-500); list-style-type: "–  "; }
.ed__foot { font-size: .88rem; color: var(--soft); padding-top: 14px; border-top: 1px solid var(--n-300); }
/* The card is a column, so stretching the item is what makes the button run the
   full width — a fixed width would come apart the moment an edition is renamed. */
.ed__buy { align-self: stretch; }

/* ---------- Support ----------
   A second decision under the editions — deliberately not a fourth edition.
   Hence the rule above it and the room around it, so the eye reads a break
   rather than a continuation; hence the same card language as the editions,
   so it is clearly the same kind of choice; and hence no buy button, because
   a fourth button in a row of cards is read as a fourth tier. Support is
   ordered with the licence, and the line underneath says so.
   ------------------------------------------------------------ */
.sup { margin-top: 66px; padding-top: 54px; border-top: 1px solid var(--n-300); }
.sup__head { text-align: center; max-width: 700px; margin: 0 auto 36px; display: flex; flex-direction: column; gap: 12px; }
.sup__head h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 200; color: var(--ink); line-height: 1.25; margin: 0; }
.sup__head p { color: var(--body); font-weight: 300; font-size: 1rem; line-height: 1.6; margin: 0; }

.sup__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; align-items: stretch; }
.sup__card {
  background: var(--n-0); border: 1px solid var(--n-300); border-top: 3px solid var(--action-500);
  border-radius: 3px; padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
/* The middle one is the one most people should take, marked the way the
   recommended edition is marked: by the colour of the top edge, not by shouting. */
.sup__card--pick { border-top-color: var(--action-700); }
.sup__n { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--action-700); font-weight: 600; }
/* Baseline alignment, so "290 €" and "per year" sit on one line without the
   small text dragging the big number off its own baseline. */
.sup__p { display: flex; align-items: baseline; gap: 8px; font-size: 1.9rem; font-weight: 200; color: var(--ink); line-height: 1; }
.sup__p small { font-size: .78rem; font-weight: 400; color: var(--soft); letter-spacing: .05em; }
.sup__d { font-size: .91rem; color: var(--body); line-height: 1.55; font-weight: 300; margin: 0; }
.sup__note { text-align: center; margin: 28px auto 0; max-width: 62ch; font-size: .9rem; color: var(--soft); line-height: 1.6; }

/* ---------- Highlighted box at the end of a section ---------- */
.panel {
  margin-top: 40px; background: var(--n-0); border: 1px solid var(--n-300);
  border-top: 3px solid var(--action-700); border-radius: 3px;
  padding: 34px 32px; text-align: center; max-width: 780px; margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.panel--tint { background: var(--n-100); }
.panel__t { font-size: 1.5rem; font-weight: 200; color: var(--ink); }
.panel__d { font-size: .98rem; color: var(--body); font-weight: 300; max-width: 62ch; }

/* ---------- Requirements ---------- */
.reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(246px, 100%), 1fr)); gap: 26px; }
.req { background: var(--n-0); border: 1px solid var(--n-300); border-radius: 3px; padding: 26px 24px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.req__k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--action-700); font-weight: 600; }
.req__v { font-weight: 400; font-size: 1.05rem; color: var(--ink); }
.req__d { font-size: .89rem; color: var(--body); line-height: 1.52; }

/* ---------- FAQ ---------- */
.faq { max-width: 1000px; margin-inline: auto; }
.faq__tools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 4px; }
.faq__tools button { appearance: none; background: none; border: 0; color: var(--action-700); font-family: var(--sans); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; padding: 8px 6px; }
.faq__tools button:hover { text-decoration: underline; }
.faq__tools span { color: var(--n-400); }
.faq details { border-top: 1px solid var(--n-300); }
.faq details:last-of-type { border-bottom: 1px solid var(--n-300); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 46px 22px 20px; position: relative; font-size: 1.02rem; font-weight: 300; color: var(--action-700); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--action-900); }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--n-600); border-bottom: 2px solid var(--n-600); transform: translateY(-70%) rotate(-45deg); transition: transform .22s; }
.faq details[open] summary { color: var(--ink); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(45deg); }
.faq__a { padding: 0 46px 26px 20px; color: var(--body); font-size: .96rem; font-weight: 300; max-width: 84ch; }

/* ---------- Closing + footer ---------- */
.final { background: var(--dark); color: #fff; text-align: center; padding-block: clamp(58px,7vw,92px); }
.final h2 { color: #fff; }
.final p { color: #B9C2D6; max-width: 58ch; margin: 18px auto 0; font-weight: 300; }
.final__acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* The bottom padding leaves room for the fixed "Top" button — without it the
   button sits over the imprint link at the very end of the page. */
.foot { background: var(--n-0); padding-block: 52px 92px; }
.foot__grid { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1fr; gap: 34px; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); } }
.foot__mark { display: flex; color: var(--n-1000); margin-bottom: 16px; }
.foot__mark svg { height: 13px; width: auto; }
.foot__blurb { font-size: .86rem; color: var(--soft); max-width: 30ch; }
/* h3, not h4: the level has to follow on from the h2 of the last section
   without skipping one, otherwise screen readers report a gap in the outline. */
.foot h3 { font-size: 1.25rem; font-weight: 200; color: var(--ink); margin-bottom: 20px; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.foot li a { font-size: .89rem; color: var(--n-700); text-decoration: none; }
.foot li a:hover { color: var(--action-700); text-decoration: underline; }
.foot__link { display: inline-flex; align-items: center; gap: 10px; }
.foot__link svg { width: 16px; height: 16px; fill: var(--action-700); flex: none; }
.foot__copy { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--n-300); display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; justify-content: center; font-size: .8rem; color: var(--soft); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.foot__legal a { color: var(--n-700); text-decoration: none; }
.foot__legal a:hover { color: var(--action-700); text-decoration: underline; }

.toTop { position: fixed; right: 20px; bottom: 62px; z-index: 90; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border-radius: 3px; cursor: pointer; background: var(--action-800); color: #fff; border: 0; font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s, background .15s; }
.toTop.on { opacity: 1; pointer-events: auto; transform: none; }
.toTop:hover { background: var(--action-900); }
.toTop svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.promo { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 95; background: var(--action-800); color: #fff; border-radius: 3px 3px 0 0; display: flex; align-items: center; gap: 14px; padding: 11px 20px; font-size: .8rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; max-width: calc(100vw - 24px); }
.promo a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.promo button { appearance: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 2px; display: grid; place-items: center; }
.promo button svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.promo[hidden] { display: none; }

/* ---------- Narrow screens ---------- */
@media (max-width: 700px) {
  .wrap { padding-inline: 16px; }
  .band { padding-block: 44px; }
  .band__head { margin-bottom: 30px; }
  .top__in { height: 58px; }
  .subnav { top: 58px; }
  .subnav a { padding: 13px 16px; font-size: .92rem; }
  html { scroll-padding-top: 106px; }
  .hero__in { padding-block: 18px 32px; }
  .crumb { margin-bottom: 20px; }
  .hero__acts .btn, .band__acts .btn, .final__acts .btn, .use__copy .btn { width: 100%; }
  .vcard, .fcard, .ed, .req { padding: 24px 20px; }
  .ed--hi { padding-top: 32px; }
  .fcard { grid-template-columns: 1fr; row-gap: 10px; }
  .fcard__t { grid-column: 1; }
  .faq summary { padding: 18px 40px 18px 0; font-size: .96rem; }
  .faq summary::after { right: 8px; }
  .faq__a { padding: 0 8px 22px 0; }
  .demo__btn { font-size: .98rem; padding: 14px; }
  .foot__cols { grid-template-columns: 1fr; }
  .toTop { bottom: 58px; right: 12px; }
  .promo { font-size: .7rem; padding: 9px 12px; }
}

/* ---------- Language switcher ---------- */
.lang { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; letter-spacing: .06em; }
.lang a { color: var(--action-700); text-decoration: none; }
.lang a:hover { text-decoration: underline; }
.lang [aria-current] { color: var(--ink); font-weight: 500; }
.lang [aria-hidden] { color: var(--n-400); }
@media (max-width: 380px) { .lang { display: none; } }

/* ---------- Comparison table ----------
   Wide on a desktop, and on a phone it becomes a stack of
   labelled rows instead of forcing the page to scroll sideways.
   ------------------------------------------------------------ */
.cmp { max-width: 1000px; margin-inline: auto; overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp caption { caption-side: bottom; margin-top: 16px; font-size: .84rem; color: var(--soft); text-align: left; font-weight: 300; line-height: 1.5; }
.cmp thead th { background: var(--n-100); color: var(--ink); font-weight: 500; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 15px 18px; border-bottom: 2px solid var(--action-700); }
.cmp thead th:first-child { width: 22%; }
.cmp tbody th { text-align: left; font-weight: 400; color: var(--ink); padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--n-300); background: var(--n-50); }
.cmp tbody td { padding: 16px 18px; vertical-align: top; color: var(--body); font-weight: 300; line-height: 1.55; border-bottom: 1px solid var(--n-300); }
.cmp tbody tr:hover th, .cmp tbody tr:hover td { background: var(--action-50); }
.cmp tbody td:first-of-type { border-left: 3px solid var(--action-500); }

@media (max-width: 760px) {
  .cmp { overflow-x: visible; }
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp tbody tr { border: 1px solid var(--n-300); border-radius: 3px; margin-bottom: 18px; overflow: hidden; }
  .cmp tbody th { border-bottom: 1px solid var(--n-300); font-weight: 500; }
  .cmp tbody td { border-bottom: 1px solid var(--n-200); border-left: 3px solid var(--action-500); padding-top: 10px; }
  .cmp tbody td:last-child { border-bottom: 0; border-left-color: var(--n-400); }
  .cmp tbody td::before { content: attr(data-col); display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--action-700); font-weight: 600; margin-bottom: 5px; }
}

/* ---------- Running text ---------- */
.prose { max-width: 74ch; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; }
.prose h2 { margin-bottom: 4px; }
.prose h3 { margin-top: 14px; }
.prose p { color: var(--body); font-weight: 300; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.prose ul li { position: relative; padding-left: 26px; color: var(--body); font-weight: 300; line-height: 1.6; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--action-600); }

/* ---------- Read on ---------- */
.rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.rel a { background: var(--n-0); border: 1px solid var(--n-300); border-left: 3px solid var(--action-700); border-radius: 3px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .18s, border-color .18s; }
.rel a:hover { box-shadow: 0 3px 10px rgba(0,0,0,.13); border-left-color: var(--action-500); }
.rel__t { font-size: 1.16rem; font-weight: 200; color: var(--ink); line-height: 1.25; }
.rel a:hover .rel__t { color: var(--action-700); }
.rel__d { font-size: .9rem; color: var(--body); font-weight: 300; line-height: 1.55; }

/* ---------- Download ----------
   The card holding the actual link, the facts about the file below
   it, and the command blocks in the instructions. All of it lives
   here and not in one of the pages: the download page exists twice,
   once per language, and a rule that sits in only one of them is
   exactly how the two versions drifted apart before.
   ------------------------------------------------------------ */
.dl {
  max-width: 820px; margin-inline: auto; background: var(--n-0);
  border: 1px solid var(--n-300); border-top: 3px solid var(--action-700);
  border-radius: 3px; padding: 34px 32px; box-shadow: 0 1px 3px rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 22px; align-items: center;
}
.dl__act { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.dl__act .btn { font-size: 1.02rem; padding: 16px 34px; }
.dl__note { font-size: .86rem; color: var(--soft); text-align: center; line-height: 1.6; max-width: 62ch; }

/* The file's own particulars. A definition list, because that is what
   they are — and the checksum gets to break anywhere, otherwise it
   pushes the card sideways on a telephone. */
.facts {
  width: 100%; margin: 0; padding-top: 22px; border-top: 1px solid var(--n-200);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 18px 26px;
}
.facts > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.facts dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--action-700); font-weight: 600; }
.facts dd { margin: 0; font-size: .93rem; color: var(--ink); font-weight: 300; }
.facts .hash { grid-column: 1 / -1; }
.facts .hash dd { font-family: var(--mono); font-size: .76rem; color: var(--body); line-height: 1.55; word-break: break-all; }

/* Two entries, not seven. The grid would push them to the outer edges of the
   card with a hole in the middle; a centred row keeps them under the button
   they belong to, and still wraps on a telephone. */
.facts--few { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 64px; }
.facts--few > div { align-items: center; text-align: center; }

/* Commands to be typed. white-space: pre keeps them as written, and
   the box scrolls on its own so the page never scrolls sideways. */
.cmd {
  margin: 0; background: var(--dark); color: #E8EDF6; border-radius: 3px;
  padding: 16px 18px; overflow-x: auto; font-family: var(--mono);
  font-size: .82rem; line-height: 1.7;
}
.cmd code { font: inherit; color: inherit; white-space: pre; }
.cmd .c { color: #A8BAD0; }

/* A command named inside running text — smaller than the surrounding
   font, because monospace at the same size reads as bigger. */
code { font-family: var(--mono); font-size: .88em; background: var(--n-100); border: 1px solid var(--n-200); border-radius: 2px; padding: 1px 5px; color: var(--ink); }
.cmd code { background: none; border: 0; padding: 0; }

/* Something that destroys data if it is misread. Loud enough to be
   seen before the button is pressed, not after. */
.warn {
  max-width: 820px; margin: 26px auto 0; background: #FDF4E9;
  border: 1px solid #E3C79E; border-left: 3px solid #B24A00; border-radius: 3px;
  padding: 22px 26px; display: flex; flex-direction: column; gap: 9px;
}
.warn__t { font-weight: 500; font-size: 1.02rem; color: #7E3400; }
.warn p { margin: 0; font-size: .91rem; color: var(--body); font-weight: 300; line-height: 1.62; }
.warn strong { color: #7E3400; font-weight: 500; }

/* ---------- Reveal on scroll ----------
   Only ever hidden when the small script in the document head has
   set data-rv. Without JavaScript the flag never appears and the
   text stays readable instead of staying invisible.
   ------------------------------------------------------------ */
html[data-rv] .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
html[data-rv] .rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html[data-rv] .rv { opacity: 1 !important; transform: none !important; }
}