/* ============================================================
   Public pages — the sticker world, everywhere else.

   The landing page had a designed world (cream paper, Fraunces,
   1.5px ink outlines, hard offset shadows) and every other public
   page had the Tailwind CDN default: white ground, Manrope bold,
   centred text, and a leftover `h-20 bg-slate-900` band from a nav
   that stopped being dark. Three visual worlds on one domain.

   This sheet carries the landing's world to the rest of the site.
   It is loaded on EVERY public page from base_public.html.twig, so:

   - The browser-surface block at the top is deliberately global.
     Selection, caret, focus ring and scrollbar ship with defaults
     that belong to no design system; theming them is the cheapest
     way a page stops reading as assembled.
   - Everything else is scoped under `.st-page`, which only the
     non-landing pages carry. The landing keeps styles.css and is
     untouched by this file.

   Tailwind's CDN script injects its preflight AFTER these <link>s,
   and that preflight contains `h1..h6 { font-size: inherit }` plus
   `ul,ol { list-style: none }`. A bare element selector loses that
   race. Every rule here is class-qualified for exactly that reason
   — see the same note in styles-sections.css.

   Bump ?v= in base_public.html.twig on every change: Cloudflare
   caches these for four hours.
   ============================================================ */

:root{
  --st-blue:      #1E3A8A;
  --st-blue-d:    #14266A;
  --st-amber:     #F4B860;
  --st-rust:      #A33C10;   /* the one orange that may carry text on cream */
  --st-green:     #22C55E;
  --st-red:       #EF4444;
  --st-tint-amber: #FFF4E0;
  --st-tint-blush: #FFE8E3;
  --st-tint-sky:   #EAF0FE;
  --st-tint-ember: #FFE7DA;
  --st-font-hand:  "Caveat", "Kalam", cursive;
  --st-radius-sm: 10px;
  --st-radius:    18px;
  --st-radius-lg: 28px;
}

/* ============================================================
   Browser surfaces — global, every public page including landing
   ============================================================ */

::selection{ background: #FFD9C6; color: #1F1A14; }

html{ scrollbar-color: var(--st-line-2) var(--st-paper); }
body::-webkit-scrollbar{ width: 12px; height: 12px; }
body::-webkit-scrollbar-track{ background: var(--st-paper); }
body::-webkit-scrollbar-thumb{
  background: var(--st-line-2);
  border: 3px solid var(--st-paper);
  border-radius: 999px;
}
body::-webkit-scrollbar-thumb:hover{ background: var(--st-ink-3); }

/* One focus ring for the whole public site. Ink, not the browser blue,
   and offset so it reads as a second sheet of paper rather than a glow. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2.5px solid var(--st-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Page ground
   ============================================================ */

/* Column layout with the footer pushed down, so a short page (an empty blog, a
   submitted support form, /download) still fills the window instead of ending
   in a band of bare body background. 82px is the nav's rendered height. */
.st-page{
  background: var(--st-paper);
  color: var(--st-ink);
  font-family: var(--st-font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 82px);
}
.st-page > .st-foot{ margin-top: auto; }

/* The same turbulence grain the landing uses, so the paper is the same
   paper. Fixed, multiply, above content but never interactive. */
.st-page::before{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.st-page .wrap{ max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative; }
.st-page .wrap-narrow{ max-width: 940px; }
/* A `.wrap` that is a DIRECT child of the page is a flex item, and `margin-inline: auto`
   on a flex item makes it shrink-to-fit. The masthead rule lives in one of those and has
   no content, so it was computing to zero width and the line never appeared. */
.st-page > .wrap{ width: 100%; }

/* Zero-specificity reset. Written as `.st-page a` it scored (0,2,0) and quietly beat
   every single-class component colour below it — `.pg-store` rendered ink-on-ink and
   the store buttons came out blank. `:where()` makes this a default that any component
   rule can override, which is what a reset is supposed to be. */
:where(.st-page a){ color: inherit; text-decoration: none; }
.st-page p{ margin: 0; }
.st-page h1, .st-page h2, .st-page h3, .st-page h4{
  margin: 0;
  font-family: var(--st-font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.st-page em{ font-style: italic; }

/* Numbers in dates, counts and pagination line up column to column. */
.st-page time, .st-page .pg-num{ font-variant-numeric: tabular-nums; }

/* ============================================================
   Masthead — how every secondary page opens
   ============================================================ */

.pg-head{
  padding: clamp(40px, 5vw, 68px) 0 clamp(30px, 4vw, 46px);
  position: relative;
}
.pg-head-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 40px;
  align-items: end;
}
.pg-head-grid.no-art{ grid-template-columns: minmax(0, 1fr); }

.pg-crumbs{
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-family: var(--st-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--st-ink-3);
  margin-bottom: 22px;
}
.pg-crumbs a{ color: var(--st-ink-2); transition: color .15s ease; }
.pg-crumbs a:hover{ color: var(--st-orange); }
.pg-crumbs-here{ color: var(--st-ink); }

.pg-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--st-font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-ink);
  margin-bottom: 16px;
}
.pg-eyebrow::before{
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-orange);
  flex: 0 0 auto;
}

/* 1.12, not the 1.0 this started at: Fraunces hangs its descenders well below the line box,
   and at 72px the lead paragraph was landing on the tails of the "pp" in "Support" and the
   "y" in "(mostly)". */
.st-page .pg-head h1{
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.12;
}
.st-page .pg-head h1 em{ color: var(--st-orange); }

.pg-lead{
  margin-top: 26px;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--st-ink-2);
  max-width: 56ch;
}

.pg-stamp{
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--st-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--st-ink-3);
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: 2px 2px 0 var(--st-ink);
}

/* The mascot stands on the masthead rule rather than floating in the middle of a
   column of air — the same "peeking" placement it gets on the landing page, at the
   world's small deliberate angle. */
.pg-head-art{ display: flex; justify-content: center; align-items: flex-end; }
.pg-head-art img{
  width: min(238px, 100%);
  height: auto;
  margin-bottom: -14px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 22px 28px rgba(31, 26, 20, .16));
}

/* The masthead ends on an ink rule, the way a section ends on the landing. */
.pg-rule{
  height: 0;
  border: 0;
  border-top: 1.5px solid var(--st-ink);
  margin: 0;
  opacity: .9;
}

/* ============================================================
   Body block
   ============================================================ */

.pg-body{ flex: 1; padding: clamp(40px, 5.5vw, 72px) 0 clamp(56px, 7vw, 104px); }
.pg-body-tight{ padding-top: clamp(28px, 3.5vw, 44px); }

/* ============================================================
   Long-form reading — privacy, terms, AI transparency, letters
   ============================================================ */

.pg-read{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.pg-read.no-toc{ grid-template-columns: minmax(0, 1fr); }

.pg-toc{
  position: sticky; top: 108px;
  border-inline-start: 1.5px solid var(--st-line-2);
  padding-inline-start: 18px;
}
.pg-toc-label{
  font-family: var(--st-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-ink-3);
  margin-bottom: 14px;
}
.pg-toc ol{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pg-toc a{
  display: block;
  font-size: 13.5px; line-height: 1.35;
  color: var(--st-ink-2);
  border-inline-start: 2px solid transparent;
  padding-inline-start: 10px;
  margin-inline-start: -12px;
  transition: color .15s ease, border-color .15s ease;
}
.pg-toc a:hover{ color: var(--st-ink); border-inline-start-color: var(--st-orange); }

.pg-prose{ max-width: 68ch; }
.pg-prose > section{ scroll-margin-top: 104px; }
.pg-prose > section + section{
  margin-top: 44px;
  padding-top: 40px;
  border-top: 1px dashed var(--st-line-2);
}
.st-page .pg-prose h2{
  font-size: clamp(25px, 2.6vw, 33px);
  margin-bottom: 16px;
}
.st-page .pg-prose h3{
  font-size: 21px;
  margin: 30px 0 10px;
}
.pg-prose p,
.pg-prose li{
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--st-ink-2);
}
.pg-prose p + p, .pg-prose ul + p, .pg-prose ol + p{ margin-top: 16px; }
.pg-prose ul, .pg-prose ol{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pg-prose ul > li{ padding-inline-start: 26px; position: relative; }
.pg-prose ul > li::before{
  content: "";
  position: absolute;
  inset-inline-start: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--st-orange);
}
.pg-prose ol{ counter-reset: pl; }
.pg-prose ol > li{ counter-increment: pl; padding-inline-start: 30px; position: relative; }
.pg-prose ol > li::before{
  content: counter(pl) ".";
  position: absolute; inset-inline-start: 0; top: 0;
  font-family: var(--st-font-display);
  color: var(--st-rust);
}
.pg-prose strong, .pg-prose b{ color: var(--st-ink); font-weight: 600; }
.pg-prose a{
  color: var(--st-rust);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(163, 60, 16, .35);
  transition: text-decoration-color .15s ease;
}
.pg-prose a:hover{ text-decoration-color: var(--st-rust); }
.pg-prose code{
  font-family: var(--st-font-mono);
  font-size: .88em;
  background: var(--st-tint-amber);
  border: 1px solid var(--st-line);
  border-radius: 6px;
  padding: 1px 6px;
}
.pg-prose hr{
  height: 0; border: 0;
  border-top: 1px dashed var(--st-line-2);
  margin: 32px 0;
}
.pg-prose table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 15px;
}
.pg-prose th, .pg-prose td{
  text-align: start;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--st-line-2);
  color: var(--st-ink-2);
}
.pg-prose th{
  font-family: var(--st-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--st-ink-3);
}

/* ============================================================
   Sticker card
   ============================================================ */

.pg-card{
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius-lg);
  box-shadow: 4px 4px 0 var(--st-ink);
  padding: 26px;
}
.pg-card-sm{ border-radius: var(--st-radius); box-shadow: 3px 3px 0 var(--st-ink); padding: 20px 22px; }
.pg-card-amber{ background: var(--st-tint-amber); }
.pg-card-sky{ background: var(--st-tint-sky); }
.pg-card-blush{ background: var(--st-tint-blush); }

.st-page .pg-card h2{ font-size: 26px; }
.st-page .pg-card h3{ font-size: 21px; }
.pg-card p{ color: var(--st-ink-2); line-height: 1.6; }

.pg-card-tag{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--st-font-mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--st-ink-3);
  background: rgba(0, 0, 0, .04);
  border-radius: 999px;
  padding: 5px 11px;
  margin-bottom: 14px;
}

/* The AI-disclosure specimens on /ai-transparency. Spacing only: the notices
   themselves are styled by ai-disclosure.css, which is deliberately independent
   of the Tailwind CDN, and must look here exactly as they look in the wild. */
.pg-specimens{ display: grid; gap: 14px; margin-top: 20px; }

/* A card that ends a page by handing the reader somewhere to go next. */
.pg-callout{
  margin-top: 44px;
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
}
.pg-callout-text{ max-width: 46ch; }
.pg-callout-h{
  font-family: var(--st-font-display);
  font-size: 26px; font-weight: 500; line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--st-ink);
}
.pg-callout p + p{ margin-top: 8px; }

/* ============================================================
   Buttons — the world's pills, outside the nav
   ============================================================ */

.st-page .btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--st-font-sans);
  font-size: 16px; font-weight: 500;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.st-page .btn-orange{
  background: var(--st-orange); color: #fff;
  box-shadow: 0 4px 0 0 var(--st-orange-d), 0 8px 20px rgba(232, 84, 27, .28);
}
.st-page .btn-orange:hover{ transform: translateY(-1px); }
.st-page .btn-orange:active{ transform: translateY(2px); box-shadow: 0 2px 0 0 var(--st-orange-d); }
.st-page .btn-primary{
  background: var(--st-ink); color: var(--st-paper);
  box-shadow: 0 4px 0 0 var(--st-blue-d), 0 8px 20px rgba(31, 26, 20, .18);
}
.st-page .btn-primary:hover{ transform: translateY(-1px); }
.st-page .btn-primary:active{ transform: translateY(2px); box-shadow: 0 2px 0 0 var(--st-blue-d); }
.st-page .btn-ghost{
  background: transparent; color: var(--st-ink);
  border-color: var(--st-line-2);
}
.st-page .btn-ghost:hover{ background: var(--st-paper-2); border-color: var(--st-ink-3); }
.st-page .btn-sm{ padding: 10px 18px; font-size: 14px; }
.st-page .btn-wide{ width: 100%; }

/* ============================================================
   Store badges — sticker versions of the two store buttons
   ============================================================ */

.pg-stores{ display: flex; flex-wrap: wrap; gap: 14px; }
.pg-store{
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--st-ink); color: var(--st-paper);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  padding: 13px 22px 13px 18px;
  box-shadow: 4px 4px 0 var(--st-line-2);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pg-store:hover{ transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--st-line-2); }
.pg-store:active{ transform: translate(0, 0); box-shadow: 2px 2px 0 var(--st-line-2); }
.pg-store svg{ width: 26px; height: 26px; flex: 0 0 auto; }
.pg-store-kicker{
  font-family: var(--st-font-mono);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251, 246, 236, .62);
  display: block;
}
.pg-store-name{
  font-family: var(--st-font-display);
  font-size: 20px; font-weight: 500; line-height: 1.1;
  display: block;
}

/* ============================================================
   Download — the funnel's last screen
   ============================================================ */

.pg-dl{ flex: 1; padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 112px); }
.pg-dl-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.st-page .pg-dl h1{ font-size: clamp(38px, 5.4vw, 68px); line-height: 1.12; }
.pg-dl-stores{ margin-top: 34px; }
.pg-dl-hint{ margin-top: 26px; max-width: 52ch; }
.pg-dl-art{ display: flex; justify-content: center; }
.pg-dl-art img{
  width: min(340px, 100%); height: auto;
  filter: drop-shadow(0 26px 34px rgba(31, 26, 20, .18));
}
@media (max-width: 860px){
  .pg-dl-grid{ grid-template-columns: minmax(0, 1fr); }
  .pg-dl-art{ order: -1; }
  .pg-dl-art img{ width: min(220px, 60%); }
}

/* ============================================================
   Disclosure — the FAQ sticker, same component as the landing
   ============================================================ */

/* Columns, not a two-column grid. In a grid every row is as tall as its tallest cell,
   so opening one answer punched a matching hole in the card beside it. Column flow
   packs each side independently and the open state stays tidy. */
.pg-faq{ column-count: 2; column-gap: 14px; }
.pg-faq-item{
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  box-shadow: 3px 3px 0 var(--st-ink);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 14px;
}
.pg-faq-item summary{
  list-style: none; cursor: pointer;
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.pg-faq-item summary::-webkit-details-marker{ display: none; }
/* The question is a real <h3> inside the summary (see faq.html.twig): a disclosure control
   and a document heading at the same time. Sized here so it reads as a card title, not as
   the page's heading scale. */
.st-page .pg-faq-item summary h3{
  font-size: 19px; font-weight: 500;
  line-height: 1.25;
  color: var(--st-ink);
  letter-spacing: -.01em;
}

/* /faq: one column of questions per topic, beside the topic list. Two columns of cards next
   to the list left each question a few words per line. */
.pg-faq-sections{ max-width: 780px; }
.pg-faq-section{ scroll-margin-top: 104px; }
.pg-faq-section + .pg-faq-section{ margin-top: 48px; }
.st-page .pg-faq-section > h2{
  font-size: clamp(25px, 2.6vw, 33px);
  margin-bottom: 18px;
}
.pg-faq-list{ column-count: 1; }
.pg-faq-item{ scroll-margin-top: 104px; }
.pg-faq-item summary::after{
  content: "+";
  font-family: var(--st-font-display);
  font-size: 28px; line-height: 1; color: var(--st-orange);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.pg-faq-item[open] summary::after{ transform: rotate(45deg); }
.pg-faq-a{
  padding: 0 22px 22px;
  color: var(--st-ink-2);
  font-size: 15px; line-height: 1.6;
}
.pg-faq-a a{
  color: var(--st-rust);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Chips — blog categories, filters
   ============================================================ */

.pg-chips{ display: flex; flex-wrap: wrap; gap: 10px; }
.pg-chip{
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: 999px;
  padding: 8px 15px;
  box-shadow: 2px 2px 0 var(--st-ink);
  font-family: var(--st-font-mono);
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--st-ink-2);
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease, color .15s ease;
}
.pg-chip:hover{ transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--st-ink); background: var(--st-tint-amber); }
.pg-chip.is-active{ background: var(--st-orange); color: #fff; box-shadow: 3px 3px 0 var(--st-ink); }
.pg-chip-count{ color: var(--st-ink-3); }
.pg-chip.is-active .pg-chip-count{ color: rgba(255, 255, 255, .7); }

/* ============================================================
   Form controls
   ============================================================ */

.pg-form{ display: grid; gap: 20px; }
.pg-field{ display: grid; gap: 8px; }
.pg-label{
  font-family: var(--st-font-mono);
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--st-ink-2);
}
.pg-label .req{ color: var(--st-orange); }
.st-page .pg-input,
.st-page .pg-select,
.st-page .pg-textarea{
  width: 100%;
  font-family: var(--st-font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--st-ink);
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius-sm);
  padding: 13px 16px;
  box-shadow: 2px 2px 0 var(--st-line-2);
  transition: box-shadow .15s ease, transform .15s ease;
}
.st-page .pg-textarea{ resize: vertical; min-height: 150px; }
.st-page .pg-input::placeholder,
.st-page .pg-textarea::placeholder{ color: var(--st-ink-3); }
.st-page .pg-input:focus,
.st-page .pg-select:focus,
.st-page .pg-textarea:focus{
  outline: none;
  box-shadow: 3px 3px 0 var(--st-orange);
  transform: translate(-1px, -1px);
}
/* The focus ring above replaces the global one on these three, so bring
   keyboard focus back explicitly rather than losing it. */
.st-page .pg-input:focus-visible,
.st-page .pg-select:focus-visible,
.st-page .pg-textarea:focus-visible{
  outline: 2.5px solid var(--st-ink);
  outline-offset: 3px;
}
.st-page .pg-select{
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231F1A14' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-inline-end: 42px;
}
[dir="rtl"] .st-page .pg-select{ background-position: left 16px center; }

.pg-hint{ font-size: 13px; color: var(--st-ink-3); }

.pg-support-form{ padding: clamp(24px, 3.5vw, 34px); }
.pg-support-form .pg-note{ margin-bottom: 22px; }
/* Name and email are short answers and sit side by side; a 40-character field
   stretched to 800px is a text area pretending to be an input. */
.pg-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pg-captcha{ display: flex; justify-content: flex-start; }
.pg-support-done{ display: grid; gap: 22px; justify-items: start; }
@media (max-width: 620px){
  .pg-form-row{ grid-template-columns: minmax(0, 1fr); }
  .pg-captcha{ justify-content: center; }
}

/* ============================================================
   Certificate verification
   ============================================================ */

.pg-cert{ flex: 1; padding: clamp(48px, 6vw, 84px) 0; display: flex; align-items: center; }
.pg-cert-card{
  max-width: 560px; margin: 0 auto;
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius-lg);
  box-shadow: 6px 6px 0 var(--st-ink);
  overflow: hidden;
}
.pg-cert-band{
  padding: 30px 32px 26px;
  text-align: center;
  border-bottom: 1.5px solid var(--st-ink);
}
.pg-cert-band-ok{ background: #EAF7E8; }
.pg-cert-band-bad{ background: var(--st-tint-blush); }
.pg-cert-seal{
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--st-ink);
  box-shadow: 2px 2px 0 var(--st-ink);
  margin-bottom: 14px;
  color: #fff;
}
.pg-cert-band-ok .pg-cert-seal{ background: var(--st-green); }
.pg-cert-band-bad .pg-cert-seal{ background: var(--st-red); }
.st-page .pg-cert-band h1{ font-size: 30px; }
.pg-cert-band p{ margin-top: 6px; color: var(--st-ink-2); font-size: 15px; }

.pg-cert-body{ padding: 30px 32px; display: grid; gap: 26px; }
.pg-cert-row{ display: grid; gap: 5px; }
.pg-cert-name{ font-family: var(--st-font-display); font-size: 28px; line-height: 1.1; }
.pg-cert-val{ font-size: 16px; color: var(--st-ink-2); font-variant-numeric: tabular-nums; }
.pg-cert-code{
  font-family: var(--st-font-mono); font-size: 14px;
  letter-spacing: .12em; color: var(--st-ink-2);
  word-break: break-all;
}
.pg-cert-level{
  display: flex; align-items: center; gap: 16px;
  background: var(--st-tint-amber);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  box-shadow: 3px 3px 0 var(--st-ink);
  padding: 16px 20px;
}
.pg-cert-level-mark{
  font-family: var(--st-font-display);
  font-size: 34px; line-height: 1; font-style: italic;
  color: var(--st-orange);
}
.pg-cert-level-t{ display: block; font-weight: 500; }
.pg-cert-level-s{ display: block; font-size: 14px; color: var(--st-ink-2); margin-top: 2px; }
.pg-cert-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pg-cert-foot{
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 20px 32px;
  background: var(--st-paper-2);
  border-top: 1px dashed var(--st-line-2);
}
.pg-cert-brand{ display: inline-flex; align-items: center; gap: 9px; font-family: var(--st-font-display); font-size: 17px; }
.pg-cert-brand img{ border-radius: 7px; }
@media (max-width: 560px){
  .pg-cert-grid{ grid-template-columns: minmax(0, 1fr); }
  .pg-cert-body, .pg-cert-band, .pg-cert-foot{ padding-inline: 22px; }
}

/* ============================================================
   Notes — success, error, advisory
   ============================================================ */

.pg-note{
  display: flex; gap: 14px; align-items: flex-start;
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  padding: 16px 18px;
  box-shadow: 3px 3px 0 var(--st-ink);
  font-size: 15px; line-height: 1.55;
  color: var(--st-ink-2);
  background: var(--st-card);
}
.pg-note-mark{
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: #fff;
}
.pg-note-ok{ background: #F1FBEF; }
.pg-note-ok .pg-note-mark{ background: var(--st-green); }
.pg-note-bad{ background: var(--st-tint-blush); }
.pg-note-bad .pg-note-mark{ background: var(--st-red); }
.pg-note-info{ background: var(--st-tint-amber); }
.pg-note-info .pg-note-mark{ background: var(--st-orange); }
.pg-note strong{ color: var(--st-ink); font-weight: 600; }

/* ============================================================
   Empty state — a sticker with the mascot, never an emoji
   ============================================================ */

.pg-empty{
  display: grid; justify-items: center; text-align: center; gap: 14px;
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius-lg);
  box-shadow: 4px 4px 0 var(--st-ink);
  padding: 52px 32px;
  max-width: 560px;
  margin: 0 auto;
}
.pg-empty img{
  width: 132px; height: auto;
  filter: drop-shadow(0 16px 20px rgba(31, 26, 20, .14));
}
.st-page .pg-empty h2{ font-size: 27px; }
.pg-empty p{ color: var(--st-ink-2); max-width: 40ch; }

/* ============================================================
   Article cards — blog index and category
   ============================================================ */

.pg-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Separates the card grid from the filter chips above it. */
.pg-grid-spaced{ margin-top: 40px; }
.pg-post{
  display: flex; flex-direction: column;
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius-lg);
  box-shadow: 4px 4px 0 var(--st-ink);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pg-post:hover{ transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--st-ink); }
.pg-post-media{
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--st-paper-2);
  border-bottom: 1.5px solid var(--st-ink);
}
.pg-post-media img{ width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.pg-post:hover .pg-post-media img{ transform: scale(1.04); }
.pg-post-fallback{
  display: flex; align-items: center; justify-content: center; height: 100%;
  background: radial-gradient(circle at 50% 35%, var(--st-tint-amber), var(--st-paper-2));
}
.pg-post-fallback img{ width: 44%; height: auto; object-fit: contain; }
.pg-post-body{ flex: 1; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.pg-post-meta{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--st-font-mono);
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--st-ink-3);
}
.pg-post-cat{
  margin-inline-start: auto;
  background: var(--st-amber); color: var(--st-ink);
  border: 1px solid var(--st-ink);
  border-radius: 999px;
  padding: 3px 10px;
  letter-spacing: .08em;
}
.st-page .pg-post h2,
.st-page .pg-post h3{
  font-size: 22px; line-height: 1.18;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-post h2 a:hover, .pg-post h3 a:hover{ color: var(--st-orange); }
.pg-post-excerpt{
  font-size: 15px; line-height: 1.6; color: var(--st-ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-post-more{
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--st-rust);
}
.pg-post-more svg{ transition: transform .15s ease; }
.pg-post:hover .pg-post-more svg{ transform: translateX(3px); }
[dir="rtl"] .pg-post-more svg{ transform: scaleX(-1); }
[dir="rtl"] .pg-post:hover .pg-post-more svg{ transform: scaleX(-1) translateX(3px); }

/* ============================================================
   Article page — chrome only. The body of a post is styled by the
   `.blog-content` / `.app-cta` block in blog/show.html.twig, which
   has its own documented specificity contract. Nothing here reaches
   inside `.blog-content`.
   ============================================================ */

.st-page .pg-article-title{
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.06;
  margin-bottom: 22px;
}
.pg-article-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-bottom: 26px;
  font-family: var(--st-font-mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--st-ink-3);
}
.pg-article-meta-item{ display: inline-flex; align-items: center; gap: 7px; }
.pg-article-meta-item svg{ opacity: .75; }
.pg-article-cat{
  background: var(--st-amber); color: var(--st-ink);
  border: 1px solid var(--st-ink);
  border-radius: 999px;
  padding: 4px 11px;
  letter-spacing: .08em;
  transition: transform .15s ease;
}
.pg-article-cat:hover{ transform: translateY(-1px); }

.pg-article-toc{
  background: var(--st-paper-2);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  box-shadow: 3px 3px 0 var(--st-ink);
  padding: 20px 24px;
  margin-bottom: 34px;
}
.pg-article-toc.hidden{ display: none; }
.pg-article-toc ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pg-article-toc a{
  display: inline-flex; gap: 8px;
  font-size: 14.5px; line-height: 1.4;
  color: var(--st-ink-2);
}
.pg-article-toc a:hover{ color: var(--st-orange); }
.pg-article-toc .toc-h3 a{ padding-inline-start: 20px; font-size: 13.5px; color: var(--st-ink-3); }
.pg-article-toc .toc-num{ color: var(--st-rust); font-family: var(--st-font-mono); font-size: 11px; }

.pg-related{ background: var(--st-paper-2); padding: clamp(48px, 6vw, 80px) 0; border-top: 1.5px solid var(--st-ink); }
.st-page .pg-related-h{ font-size: clamp(26px, 3vw, 36px); margin-bottom: 34px; }
.pg-related-all{ margin-top: 34px; display: flex; justify-content: center; }
.pg-browse{ padding: clamp(36px, 4.5vw, 56px) 0; }

/* ============================================================
   Pagination
   ============================================================ */

.pg-pager{ margin-top: 44px; display: flex; justify-content: center; }
.pg-pager-inner{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pg-pager a, .pg-pager span.pg-page{
  min-width: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 14px;
  font-family: var(--st-font-mono); font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--st-ink);
  color: var(--st-ink-2);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pg-pager a:hover{ transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--st-ink); color: var(--st-ink); }
/* Must out-rank `.pg-pager span.pg-page` above, or the current page renders
   like every other number. Ink, not white: white on --st-orange is 2.8:1. */
.pg-pager span.pg-page.is-current{ background: var(--st-orange); color: var(--st-ink); font-weight: 700; }
.pg-pager .pg-gap{ color: var(--st-ink-3); padding: 0 4px; font-family: var(--st-font-mono); }

/* ============================================================
   Closing CTA — the world, not a gradient
   ============================================================ */

.pg-cta{
  background: var(--st-ink);
  color: var(--st-paper);
  border-top: 1.5px solid var(--st-ink);
  padding: clamp(56px, 7vw, 92px) 0;
  position: relative;
  overflow: hidden;
}
.pg-cta-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 40px; align-items: center;
}
.st-page .pg-cta h2{
  color: var(--st-paper);
  font-size: clamp(32px, 4.4vw, 54px);
}
.st-page .pg-cta h2 em{ color: var(--st-orange); }
.pg-cta p{
  color: rgba(251, 246, 236, .72);
  font-size: 17px; line-height: 1.6;
  max-width: 48ch;
  margin-top: 16px;
}
.pg-cta-actions{ margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.pg-cta .pg-store{ box-shadow: 4px 4px 0 rgba(251, 246, 236, .28); border-color: rgba(251, 246, 236, .4); }
.pg-cta .pg-store:hover{ box-shadow: 6px 6px 0 rgba(251, 246, 236, .28); }
.pg-cta-art{ display: flex; justify-content: center; }
.pg-cta-art img{ width: min(260px, 100%); height: auto; }

/* ============================================================
   Footer — shared, ink, the landing's footer for every page
   ============================================================ */

.st-foot{
  background: var(--st-ink);
  color: var(--st-paper);
  font-family: var(--st-font-sans);
  padding: 32px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  position: relative;
  z-index: 1;
}
.st-foot .wrap{ max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.st-foot-nav{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  padding-block-end: 28px;
  border-block-end: 1px solid rgba(255, 255, 255, .12);
}
/* Two classes on purpose. The footer sits inside `.st-page` on most pages, where
   `.st-page h2` (0,1,1) sets display type; on the landing it meets a bare
   `h2{ clamp(40px…) }`; and Tailwind preflight flattens bare headings. (0,2,0) wins all three. */
.st-foot .st-foot-h{
  margin: 0 0 10px;
  font-family: var(--st-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  color: rgba(255, 255, 255, .55);
}
.st-foot .st-foot-note{ margin: -4px 0 8px; font-size: 12px; color: rgba(255, 255, 255, .45); }
.st-foot-list{ list-style: none; margin: 0; padding: 0; }
.st-foot-list a{
  display: inline-block;
  padding-block: 5px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .15s ease;
}
.st-foot-list a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.st-foot-bottom{
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
  padding-block-start: 24px;
}
.st-foot-logo{ display: flex; align-items: center; gap: 10px; font-family: var(--st-font-display); font-size: 20px; }
.st-foot-logo img{ width: 32px; height: 32px; border-radius: 8px; }
.st-foot .st-foot-official{ flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.st-foot-official a{ color: rgba(255, 255, 255, .85); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.st-foot-social{ display: flex; gap: 14px; align-items: center; margin-block-start: 14px; }
.st-foot-social a{
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.st-foot-social a:hover{ background: var(--st-orange); color: #fff; transform: translateY(-2px); }
.st-foot-meta{ font-size: 13px; color: rgba(255, 255, 255, .6); }
.st-foot-tag{
  width: 100%; text-align: center;
  font-family: var(--st-font-hand); font-size: 18px;
  color: rgba(255, 255, 255, .55);
  margin-top: 18px;
}

/* ============================================================
   Cookie consent

   Global, not under `.st-page`: the banner is a sibling of the page wrapper and
   ships on the landing page too. It is the first surface a visitor sees, so it
   is the last place that should be wearing a framework default.
   ============================================================ */

.ck-bar{
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: 9999;
  background: var(--st-paper);
  border-top: 1.5px solid var(--st-ink);
  box-shadow: 0 -6px 0 0 rgba(31, 26, 20, .06);
  font-family: var(--st-font-sans);
  /* Closed means hidden, not only slid out of view. Since iOS 26, Safari draws the page in the
     strip under its floating toolbar, below the area a fixed `bottom: 0` is measured against, so
     a bar that was only pushed down sat in that strip: every visitor who had already answered
     saw its title and first lines there for good, without the buttons. Visibility flips after
     the slide, so closing still animates. */
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s;
}
.ck-bar.is-open{ transform: translateY(0); visibility: visible; transition-delay: 0s; }
/* Its own width and gutters rather than the page's `.wrap`, which means something different on
   every page: the landing's `.wrap{ padding: 0 28px }` loads after this file and wiped the
   vertical padding, so the buttons sat on the bottom edge of the screen, and the other pages
   have no global `.wrap`, so there the text ran into the window edges. */
.ck-bar-inner{
  box-sizing: border-box;
  max-width: 1240px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 18px 28px;
}
.ck-bar-text{ flex: 1 1 380px; min-width: 0; }
.ck-bar-text h3{
  margin: 0 0 4px;
  font-family: var(--st-font-display);
  font-size: 20px; font-weight: 500; letter-spacing: -.02em;
  color: var(--st-ink);
}
.ck-bar-text p{ margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--st-ink-2); max-width: 78ch; }
.ck-bar-text a{
  color: var(--st-rust);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.ck-bar-actions{ display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.ck-btn{
  font-family: var(--st-font-sans);
  font-size: 14px; font-weight: 500;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.ck-btn-quiet{
  background: var(--st-card);
  color: var(--st-ink);
  border: 1.5px solid var(--st-line-2);
}
.ck-btn-quiet:hover{ background: var(--st-paper-2); border-color: var(--st-ink-3); }
.ck-btn-accept{
  background: var(--st-orange);
  color: #fff;
  border: 1.5px solid transparent;
  padding-inline: 24px;
  box-shadow: 0 4px 0 0 var(--st-orange-d);
}
.ck-btn-accept:hover{ transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--st-orange-d); }
.ck-btn-accept:active{ transform: translateY(2px); box-shadow: 0 2px 0 0 var(--st-orange-d); }

.ck-modal{ position: fixed; inset: 0; z-index: 10000; }
.ck-modal.hidden{ display: none; }
.ck-modal-veil{ position: absolute; inset: 0; background: rgba(31, 26, 20, .55); }
.ck-modal-wrap{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ck-sheet{
  position: relative;
  width: 100%; max-width: 540px; max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--st-paper);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius-lg);
  box-shadow: 6px 6px 0 var(--st-ink);
  font-family: var(--st-font-sans);
  overflow: hidden;
}
.ck-sheet-head{ padding: 24px 26px 20px; border-bottom: 1.5px solid var(--st-ink); }
.ck-sheet-head-row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ck-sheet-head h2{
  margin: 0;
  font-family: var(--st-font-display);
  font-size: 24px; font-weight: 500; letter-spacing: -.02em;
  color: var(--st-ink);
}
.ck-sheet-head p{ margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--st-ink-2); }
.ck-close{
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--st-line-2);
  border-radius: 50%;
  background: var(--st-card);
  color: var(--st-ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ck-close:hover{ background: var(--st-ink); color: var(--st-paper); border-color: var(--st-ink); }

.ck-sheet-body{ padding: 20px 26px; display: grid; gap: 12px; overflow-y: auto; }
.ck-row{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  box-shadow: 2px 2px 0 var(--st-ink);
  padding: 16px 18px;
}
.ck-row-locked{ background: var(--st-paper-2); }
.ck-row-text{ min-width: 0; }
.ck-row-text h3{
  margin: 0;
  font-family: var(--st-font-display);
  font-size: 17px; font-weight: 500;
  color: var(--st-ink);
}
.ck-row-text p{ margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--st-ink-2); }
.ck-row-control{ flex: 0 0 auto; display: grid; justify-items: center; gap: 5px; }

.ck-switch{
  width: 46px; height: 26px;
  display: inline-flex; align-items: center;
  padding: 2px;
  border: 1.5px solid var(--st-ink);
  border-radius: 999px;
  background: var(--st-line-2);
  cursor: pointer;
  transition: background .18s ease;
}
.ck-switch .toggle-dot{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.ck-switch.is-on{ background: var(--st-orange); }
.ck-switch.is-on .toggle-dot{ transform: translateX(20px); }
[dir="rtl"] .ck-switch.is-on .toggle-dot{ transform: translateX(-20px); }
.ck-switch.is-locked{ cursor: not-allowed; opacity: .72; }
.ck-always{
  font-family: var(--st-font-mono);
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--st-ink-3);
}

.ck-sheet-foot{
  padding: 18px 26px;
  border-top: 1.5px solid var(--st-ink);
  background: var(--st-paper-2);
  display: flex; justify-content: flex-end;
}

@media (max-width: 720px){
  .ck-bar-inner{ padding-inline: 20px; }
  .ck-bar-actions{ width: 100%; }
  .ck-bar-actions .ck-btn{ flex: 1 1 auto; justify-content: center; text-align: center; }
  .ck-btn-accept{ flex-basis: 100%; order: -1; }
}

@media (prefers-reduced-motion: reduce){
  .ck-bar, .ck-switch, .ck-switch .toggle-dot{ transition-duration: .01ms; }
  .ck-bar{ transition-delay: 0s; }
}

/* ============================================================
   Responsive — the site's named widths, not a token scale
   ============================================================ */

@media (max-width: 1080px){
  .pg-read{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pg-toc{
    position: static;
    border-inline-start: 0;
    border-top: 1.5px solid var(--st-line-2);
    padding-inline-start: 0;
    padding-top: 18px;
    order: 2;
  }
  .pg-toc ol{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-prose{ order: 1; max-width: none; }
  /* /faq keeps its topic list above the questions: with close to fifty closed rows, the
     list is how a phone reader reaches the one they came for. */
  .pg-toc.pg-faq-toc{
    order: 0;
    border-top: 0;
    border-bottom: 1.5px solid var(--st-line-2);
    padding-top: 0;
    padding-bottom: 18px;
  }
}

@media (max-width: 960px){
  .pg-head-grid{ grid-template-columns: minmax(0, 1fr); }
  .pg-head-art{ display: none; }
  .pg-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-cta-grid{ grid-template-columns: minmax(0, 1fr); }
  .pg-cta-art{ display: none; }
}

@media (max-width: 800px){
  .pg-faq{ column-count: 1; }
}

@media (max-width: 720px){
  .st-page .wrap{ padding: 0 20px; }
  .st-foot .wrap{ padding: 0 20px; }
  .pg-grid{ grid-template-columns: minmax(0, 1fr); }
  .pg-toc ol{ grid-template-columns: minmax(0, 1fr); }
  .pg-toc.pg-faq-toc ol{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-card{ padding: 22px; }
  .pg-empty{ padding: 40px 24px; }
  .pg-stores{ flex-direction: column; align-items: stretch; }
  .pg-store{ justify-content: flex-start; }
  .st-page .pg-prose h2{ font-size: 24px; }
  .pg-prose p, .pg-prose li{ font-size: 16px; }
  .st-foot-nav{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .st-foot-bottom{ justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .st-page *,
  .st-page *::before,
  .st-page *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── KNM practice test (/knm-test) ─────────────────────────────────────────────
   Same sticker world as the FAQ cards: paper ground, ink border, hard shadow.
   Written without a single utility class because the public site has no build
   step and the Tailwind Play CDN is a runtime dependency a 40-question page
   should not wait on. Logical properties throughout so the Arabic locale flips
   without a second stylesheet. */
.pg-quiz{
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  counter-reset: knmq;
}
.pg-quiz-item{
  background: var(--st-card);
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  box-shadow: 3px 3px 0 var(--st-ink);
  padding: 20px 22px;
  margin-bottom: 18px;
  counter-increment: knmq;
}
.pg-quiz-q{
  font-family: var(--st-font-display);
  font-size: 19px;
  line-height: 1.35;
  color: var(--st-ink);
  margin: 0 0 14px;
}
/* The number belongs to the question, not to a separate column: a 40-item list
   with a gutter reads as a table of contents on a phone. */
.pg-quiz-q::before{
  content: counter(knmq) ". ";
  color: var(--st-orange);
  font-weight: 600;
}
.pg-quiz-img{
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius-sm);
  margin: 0 0 16px;
}
.pg-quiz-opts{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pg-quiz-opts li{
  border: 1.5px solid var(--st-line);
  border-radius: var(--st-radius-sm);
  background: var(--st-paper);
}
.pg-quiz-opts label{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  line-height: 1.4;
}
.pg-quiz-opts input[type="radio"]{
  margin-block-start: 3px;
  accent-color: var(--st-orange);
  flex: 0 0 auto;
}
.pg-quiz-opts li:has(input:checked){
  border-color: var(--st-ink);
  background: var(--st-tint-amber);
}
/* Review state has no <label>, because there is nothing left to click. The padding
   therefore has to sit on the row itself, or every option collapses to bare text
   against its own border. */
.pg-quiz-opts li:not(:has(label)){
  padding: 12px 14px;
  line-height: 1.4;
}
/* Colour is never the only signal: the correct row also carries a text label from
   the template, so this reads without colour vision. */
.pg-quiz-opts li.is-answer{
  border-color: var(--st-green);
  background: color-mix(in srgb, var(--st-green) 12%, var(--st-paper));
}
.pg-quiz-opts li.is-picked{
  border-color: var(--st-red);
  background: var(--st-tint-blush);
}
.pg-quiz-tag{
  font-family: var(--st-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--st-ink-2);
  margin-inline-start: 8px;
}
.pg-quiz-why{
  margin: 14px 0 0;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--st-amber);
  color: var(--st-ink-2);
  line-height: 1.55;
}
.pg-quiz-item.is-wrong{ border-color: var(--st-red); }
/* The review heading. Sized explicitly because the base .st-page rule sets family,
   weight and leading but no size, and the Tailwind Play CDN's preflight resets a bare
   h2 to body size — so a heading that inherits reads as a paragraph. Spaced to clear
   the score card's hard shadow above it. */
.st-page .pg-quiz-heading{
  font-size: clamp(23px, 2.4vw, 28px);
  margin-block: 36px 0;
}
.pg-quiz-form button[type="submit"]{ margin-block-start: 8px; }
/* The download CTA that follows is an ink band with no top margin of its own, so the
   submit button's hard shadow otherwise sits flush on it. */
.pg-quiz-form{ margin-block-end: clamp(40px, 5vw, 64px); }

@media (max-width: 560px){
  .pg-quiz-item{ padding: 16px 16px; }
  .pg-quiz-q{ font-size: 17px; }
}

/* ── Word pages (/woord/{slug}) ────────────────────────────────────────────────
   The headword carries its article, because "de fiets" is how the word is learned
   and how it is searched. Sizes are explicit: the base .st-page rule sets family
   and leading but no size, and the Tailwind CDN's preflight flattens a bare
   heading to body text. */
.st-page .pg-word-h1{
  font-size: clamp(38px, 6vw, 58px);
  margin-bottom: 10px;
}
.pg-word-art{
  color: var(--st-orange);
  font-style: italic;
}
.pg-word-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.pg-word-chip{
  font-family: var(--st-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--st-ink-2);
  border: 1.5px solid var(--st-line);
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--st-paper);
}
.pg-word-example{ margin-block-end: 20px; }
.pg-word-example-nl{
  font-family: var(--st-font-display);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.35;
  color: var(--st-ink);
  margin: 0;
}
.pg-word-example-en{
  margin: 10px 0 0;
  color: var(--st-ink-2);
  line-height: 1.5;
}
.pg-word-block{ margin-block-end: 20px; }
.st-page .pg-word-h2{
  font-size: clamp(21px, 2.2vw, 25px);
  margin-block-end: 10px;
}
.pg-word-forms{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 0;
}
.pg-word-forms dt{
  font-family: var(--st-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--st-ink-3);
  margin-block-end: 3px;
}
.pg-word-forms dd{
  font-family: var(--st-font-display);
  font-size: 20px;
  color: var(--st-ink);
  margin: 0;
}

/* Word-page links under a blog post. Lives outside .blog-content, so it needs its
   own type rather than inheriting the article's. */
.pg-word-links{
  border: 1.5px solid var(--st-ink);
  border-radius: var(--st-radius);
  background: var(--st-card);
  box-shadow: 3px 3px 0 var(--st-ink);
  padding: 18px 22px;
  margin-block: 8px 24px;
  font-family: var(--st-font-sans);
}
.pg-word-links-h{
  font-family: var(--st-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--st-ink-3);
  margin: 0 0 8px;
}
.pg-word-links ul{ list-style: none; margin: 0; padding: 0; }
.pg-word-links li + li{ margin-block-start: 6px; }
.pg-word-links a{
  font-family: var(--st-font-display);
  font-size: 18px;
  color: var(--st-ink);
  text-decoration-color: var(--st-orange);
  text-underline-offset: 3px;
}
.pg-word-links a:hover{ color: var(--st-orange); }