/* Board FG, "Paper, pills and places", 2026-10-20. Sample board, not final.
   Board F is the base: the paper, the grid, Outfit, the dark pill, the laptop and the sticker cards.
   From board G: the photos of Serbian places, the thread from the hero to the form, the four parts
   with a number, a colour and a shape each, and the map. Logical properties only. */

/* ---------- Font: Outfit, variable weight 100-900 (from board F) ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/outfit-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/outfit-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  /* ground and text, from board F */
  --paper: #f6efe1;        /* the page ground */
  --card: #fffaf1;         /* cards, pills, fields */
  --ink: #201d19;          /* text, edges, the thread: 14.67:1 on paper */
  --ink-mute: #5c544a;     /* secondary text: 6.50:1 on paper */
  --cream-mute: #b5ad9f;   /* secondary text on ink: 7.55:1 */
  --grid: rgb(32 29 25 / 0.055);
  --line: rgb(32 29 25 / 0.14);

  /* the four parts, from board G: number n, colour n and shape n travel together.
     A solid is a mark (a badge, a glyph, a map dot). A tint is a surface with ink text on it:
     board F's pastels, reduced from seven to four and turned to the hue of their part. */
  --p1: #fccd03;           /* 01 Set up in Serbia. Circle. The live yellow of rndm.rs. */
  --p2: #2c6e49;           /* 02 Run your business. Quarter circle. */
  --p3: #1f5fa0;           /* 03 Technology. Square. Also the rivers. */
  --p4: #b0402a;           /* 04 Expo 2027, an add-on. Half circle. Also Belgrade. */
  --p1-tint: #fde589;
  --p2-tint: #b9e0c0;
  --p3-tint: #b9d5f4;
  --p4-tint: #f5c3b1;
  --river: #8fb8e6;        /* the 03 blue on a dark ground */

  --font: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --pad: clamp(24px, 3.9vw, 56px);          /* the page gutter */
  --rail: calc(var(--pad) / 2);             /* the x of the thread, in the middle of the gutter */
  --sec: clamp(72px, 9vw, 128px);           /* the space above a section */
  --cross: calc(var(--sec) * 0.7);          /* the height of a thread crossing */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-padding-block-start: 16px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: clip; color: var(--ink); font: 400 1.125rem/1.55 var(--font);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 0.16em; text-decoration-thickness: 0.07em; }
a:hover { text-decoration-thickness: 0.13em; }
svg { display: block; }
img { display: block; max-inline-size: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.dark :focus-visible { outline-color: var(--p1); }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; }
.skip:focus { inset-block-start: 12px; }
.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Part badges and glyphs ---------- */
.pt {
  --s: 3rem; display: inline-grid; place-items: center; flex: none; inline-size: var(--s); block-size: var(--s);
  border: 1.5px solid var(--ink); font: 650 calc(var(--s) * 0.36)/1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pt-1 { background: var(--p1); color: var(--ink); border-radius: 50%; }
.pt-2 { background: var(--p2); color: var(--paper); border-start-start-radius: 100%; place-items: end; padding-inline-end: calc(var(--s) * 0.14); padding-block-end: calc(var(--s) * 0.12); }
.pt-3 { background: var(--p3); color: var(--paper); border-radius: 3px; }
.pt-4 { background: var(--p4); color: var(--paper); block-size: calc(var(--s) * 0.56); border-radius: 999px 999px 0 0; place-items: end center; padding-block-end: calc(var(--s) * 0.04); font-size: calc(var(--s) * 0.3); }
.pt-xs { --s: 1.875rem; font-size: 0.75rem; }
.pt-xs.pt-4 { font-size: 0.625rem; }
.gl { display: inline-block; flex: none; inline-size: 0.7em; block-size: 0.7em; border: 1.5px solid var(--ink); }
.gl-1 { background: var(--p1); border-radius: 50%; }
.gl-2 { background: var(--p2); border-start-start-radius: 100%; }
.gl-3 { background: var(--p3); border-radius: 2px; }
.gl-4 { background: var(--p4); block-size: 0.38em; border-radius: 999px 999px 0 0; }

/* ---------- The thread: one ink line from the top of the page to the form ----------
   Each block carries its own pieces. A run is a vertical piece on a rail; a cross is an S-curve
   between two x positions. preserveAspectRatio="none" and a non-scaling stroke keep the line 2 px
   wide at every size. Inline SVG is a replaced element, so each piece gets an explicit size. */
.th { position: absolute; z-index: 0; overflow: visible; pointer-events: none; }
.th path { fill: none; stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.th-run { inline-size: 2px; inset-block-start: var(--t, 0px); block-size: calc(var(--e, 100%) - var(--t, 0px)); }
.th-l { inset-inline-start: calc(var(--rail) - 1px); }
.th-r { inset-inline-end: calc(var(--rail) - 1px); }
.th-cross { inset-block-start: var(--t, 0px); block-size: var(--h, var(--cross)); inset-inline-start: var(--rail); inline-size: calc(100% - 2 * var(--rail)); }
[dir="rtl"] .th-cross, [dir="rtl"] .th-in { transform: scaleX(-1); }
.th-after-cross { --t: var(--cross); }
.th-hero, .th-head { --t: var(--node-y); }
.th-to-photo { --e: var(--sec); }
.th-band { --t: var(--sec); --h: calc(100% - var(--sec)); }
.th-to-end { --e: var(--end-y); }
.th-node {
  position: absolute; z-index: 1; inline-size: 16px; block-size: 16px; inset-inline-start: calc(var(--rail) - 8px);
  border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
}
.th-start { inset-block-start: calc(var(--node-y) - 8px); }
.th-end {
  inline-size: 20px; block-size: 20px; inset-inline-start: calc(var(--rail) - 10px); inset-block-start: calc(var(--end-y) - 10px);
  background: var(--p1); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--ink);
}
/* the cream copy of a crossing, inside a photo; it lines up with the ink crossing behind the photo */
.th-in {
  position: absolute; z-index: 1; overflow: visible; pointer-events: none;
  inset-block-start: -1.5px; block-size: calc(100% + 3px);
  inset-inline-start: calc(var(--rail) - var(--pad) - 1.5px); inline-size: calc(100% + 2 * (var(--pad) - var(--rail)) + 3px);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
}
.th-in path { fill: none; stroke: var(--paper); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linecap: round; }

/* ---------- Buttons (board F) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 52px; padding: 10px 26px;
  border-radius: 999px; border: 1.5px solid var(--ink); text-decoration: none; text-align: start;
  font: 600 1.0625rem/1.15 var(--font); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.btn svg { inline-size: 18px; block-size: 18px; flex: none; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--card); color: var(--ink); }
.btn-yellow { background: var(--p1); color: var(--ink); }
.dark .btn-yellow { border-color: var(--p1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.dark .btn:hover { box-shadow: 0 4px 0 var(--p1-tint); }
.text-link { font-weight: 600; }

/* ---------- Header (board F) ---------- */
.bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; padding: 18px var(--pad); }
.logo { display: flex; align-items: center; min-block-size: 44px; color: var(--ink); flex: none; }
.logo svg { inline-size: 100px; block-size: auto; }
.nav { display: flex; gap: 4px; margin-inline: auto; padding: 5px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; }
.nav a { padding: 9px 18px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav a:hover, .nav a[aria-current], .nav a.is-section { background: var(--ink); color: var(--paper); }
.bar-end { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--card); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.bar .btn { min-block-size: 44px; padding: 0 20px; font-size: 0.9375rem; }
.burger { display: grid; gap: 4px; }
.burger i { display: block; inline-size: 16px; block-size: 2px; background: currentColor; border-radius: 2px; }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; align-items: center; min-block-size: 24px; margin-block-end: clamp(18px, 2.4vw, 32px); font-size: 0.9375rem; color: var(--ink-mute); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; padding: 0; line-height: 24px; }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; inline-size: 7px; block-size: 7px; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); }
[dir="rtl"] .crumbs li + li::before { transform: rotate(-45deg); }
.crumbs a { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* ---------- Kicker, H1 and the dark pill (board F) ---------- */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding-block: 7px; padding-inline: 8px 14px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--ink); font-size: 0.9375rem; font-weight: 500; line-height: 22px; }
.kicker > i { inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--p1); border: 1.5px solid var(--ink); }
.kicker-part { padding-inline-start: 5px; font-weight: 600; }
.kicker-part .pt { --s: 28px; margin-block: -3px; font-size: 11px; }
.h1 { margin: 0; font: 650 clamp(46px, 5.9vw, 88px)/1.02 var(--font); letter-spacing: -0.035em; }
.h1 .key {
  display: inline-block; white-space: nowrap; margin-block-start: 0.08em; padding: 0.02em 0.34em 0.1em; border-radius: 999px;
  background: var(--ink); color: var(--paper); transform: rotate(-1.5deg);
}
.h1 .key i { display: inline-block; inline-size: 0.42em; block-size: 0.42em; margin-inline-start: 0.18em; border-radius: 50%; background: var(--p1); vertical-align: 0.12em; }

/* ---------- Home hero (board F, with the Đerdap arch of board G behind the laptop) ---------- */
.hero {
  --hero-top: clamp(20px, 3vw, 40px); --node-y: calc(var(--hero-top) + 20px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 32px clamp(32px, 4vw, 64px);
  align-items: center; padding: var(--hero-top) var(--pad) 0;
}
.hero-sub { margin: 26px 0 0; max-inline-size: 34rem; font-size: clamp(1.125rem, 1.4vw, 1.3125rem); line-height: 1.5; color: var(--ink-mute); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px; }

.stage { position: relative; padding-block-start: clamp(96px, 8.6vw, 124px); }
.arch-photo {
  position: absolute; z-index: 0; inset-block-start: 0; inset-inline-end: 0; inline-size: 44%; aspect-ratio: 3 / 4; margin: 0;
  overflow: hidden; border: 1.5px solid var(--ink); border-radius: 999px 999px 0 0; background: var(--p3-tint);
}
.arch-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 42%; }
.stage-cap { margin: 18px 0 0; margin-inline-start: auto; max-inline-size: 44%; text-align: end; font-size: 0.8125rem; color: var(--ink-mute); }   /* under the arch, clear of the report card */

/* The laptop, drawn in CSS (board F) */
.device { position: relative; z-index: 1; margin-inline-end: 16%; padding-block: 14px 0; }
.lid { position: relative; margin-inline: 6%; padding: 14px 14px 18px; background: #26221d; border-radius: 22px 22px 6px 6px; box-shadow: 0 0 0 1.5px var(--ink), 0 30px 60px -30px rgb(32 29 25 / .45); }
.lid::before { content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 50%; inline-size: 6px; block-size: 6px; margin-inline-start: -3px; border-radius: 50%; background: #4a443c; }
.screen { display: grid; grid-template-columns: 112px minmax(0, 1fr); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #fffdf8; color: var(--ink); font-size: 11px; line-height: 1.3; }
.base { position: relative; block-size: 16px; background: linear-gradient(#e4dccc, #c4baa8); border-radius: 2px 2px 16px 16px; border: 1.5px solid var(--ink); border-block-start: 0; }
.base::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; inline-size: 92px; block-size: 6px; margin-inline-start: -46px; border-radius: 0 0 8px 8px; background: #b3a996; }
.side { padding: 12px 10px; background: #f3ecdd; border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.side svg { inline-size: 46px; block-size: auto; margin: 2px 4px 12px; color: var(--ink); }
.side span { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 999px; font-weight: 500; }
.side span::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 2px; background: var(--ink-mute); }
.side span.on { background: var(--ink); color: var(--paper); }
.side span.on::before { background: var(--p1); }
.app { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-top b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.app-top span { padding: 3px 9px; border-radius: 999px; background: var(--p1); font-weight: 600; font-size: 10px; border: 1px solid var(--ink); white-space: nowrap; }
.pay { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-block-end: 1px solid var(--line); }
.pay-row:last-child { border-block-end: 0; }
.pay-head { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); background: #faf5ea; }
.pay-row .what { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-row .due { color: var(--ink-mute); white-space: nowrap; }
.st { justify-self: end; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; border: 1px solid var(--ink); white-space: nowrap; }
.st-approve { background: var(--p1); } .st-ok { background: var(--p2-tint); } .st-plan { background: var(--p3-tint); } .st-paid { background: #fff; color: var(--ink-mute); border-color: var(--line); }
.app-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
.mini small { display: block; color: var(--ink-mute); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.mini b { font-size: 15px; font-weight: 650; }
.report {
  position: absolute; z-index: 2; inset-inline-start: -9%; inset-block-end: -64px; inline-size: 236px;
  padding: 16px 16px 14px; border-radius: 20px; background: var(--card); border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink); transform: rotate(-3deg); font-size: 0.875rem;
}
.report p { margin: 0 0 10px; color: var(--ink-mute); font-size: 0.8125rem; }
.report .report-h { margin: 0 0 2px; color: var(--ink); font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
.report ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.report li { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.report li::before { content: ""; flex: none; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--p2-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23201d19' stroke-width='1.8'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid var(--ink); }
.report-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.8125rem; }
.toast {
  position: absolute; z-index: 2; inset-inline-start: 4%; inset-block-start: -62px; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding-block: 9px; padding-inline: 10px 16px; border-radius: 999px; background: var(--p2-tint); border: 1.5px solid var(--ink);
  font-weight: 600; font-size: 0.9375rem; white-space: nowrap; transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--ink);
  animation: bob 2.4s ease-in-out 2;   /* two rises, 4.8 s, then it rests: WCAG 2.2.2 allows no auto motion past 5 s without a pause control */
}
.toast i { inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--ink); color: var(--p2-tint); display: grid; place-items: center; }
@keyframes bob { 50% { transform: rotate(-3deg) translateY(-6px); } }

/* The pills under the hero: each one takes the tint and the shape of its part */
.tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 12px; padding: 64px 0 8px; }
.tags-label { flex-basis: 100%; text-align: center; margin: 0 0 6px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.tag {
  display: inline-flex; align-items: center; gap: 10px; padding-block: 11px; padding-inline: 14px 20px; border-radius: 999px;
  background: var(--c); border: 1.5px solid var(--ink); font-size: 1.125rem; font-weight: 500; white-space: nowrap;
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(var(--r, 0deg)) translateY(var(--y, 0));
}
.tag .gl { inline-size: 20px; block-size: 20px; }
.t1 { --c: var(--p1-tint); } .t2 { --c: var(--p2-tint); } .t3 { --c: var(--p3-tint); }

/* ---------- Sections (board F) ---------- */
.sec { position: relative; padding: var(--sec) var(--pad) 0; }
/* a block holds its children's margins, so the thread pieces of two blocks meet with no gap */
.sec, .band, .form-sec, .page-head, .closing-wrap { display: flow-root; }
.sec-inner { --sec: clamp(64px, 7vw, 104px); }
/* --cross is computed where it is declared, so a block that changes --sec declares it again */
.sec-inner, .sec-inner + .band, .band-slim, .form-sec, .guide-facts, .read, .guide-related { --cross: calc(var(--sec) * 0.7); }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; margin-block-end: clamp(28px, 4vw, 48px); }
.label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding-block: 6px; padding-inline: 8px 14px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--ink); font-weight: 600; font-size: 0.9375rem; }
.label i { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.h2 { margin: 0; font: 650 clamp(38px, 4.6vw, 68px)/1.04 var(--font); letter-spacing: -0.035em; max-inline-size: 16ch; }
h2, h3 { text-wrap: balance; }
.h2-page { font-size: clamp(30px, 3.6vw, 52px); max-inline-size: 22ch; }
.knot { display: inline-block; inline-size: 0.3em; block-size: 0.3em; margin-inline-end: 0.28em; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); vertical-align: 0.2em; }
.nobr { white-space: nowrap; }
.h2-small { margin: 0 0 18px; font: 650 clamp(22px, 2vw, 28px)/1.15 var(--font); letter-spacing: -0.02em; }
.sec-lede { margin: 0; max-inline-size: 30rem; color: var(--ink-mute); }

/* ---------- Home: what we handle, grouped by part ---------- */
.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 2.6vw, 40px); }
.part { display: grid; align-content: start; gap: 18px; padding-block-start: 18px; border-block-start: 1.5px solid var(--ink); }
.part-head { display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 650; letter-spacing: -0.01em; }
.svc { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: 12px; }
.svc a {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--ink); text-decoration: none;
  font-size: clamp(1.1875rem, 1.7vw, 1.625rem); font-weight: 550; letter-spacing: -0.02em; line-height: 1.1;
  transition: background-color .2s ease, transform .2s ease;
}
.svc .arw { inline-size: 0.85em; block-size: 0.85em; flex: none; }
.s1 { --c: var(--p1-tint); } .s2 { --c: var(--p2-tint); } .s3 { --c: var(--p3-tint); }
.svc a:hover, .svc a.is-hover { background: var(--c); transform: rotate(-1.5deg); }
.addon {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-block-start: 6px;
  padding: 14px 24px; border: 1.5px dashed var(--ink); border-radius: 28px;
}
.addon-head { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 650; font-size: 1.125rem; }
.addon-plus { font-size: 1.5rem; font-weight: 500; line-height: 1; }
.addon .pt { --s: 2.5rem; }
.addon-text { margin: 0; flex: 1 1 30rem; font-size: 1rem; color: var(--ink-mute); }
.addon-text strong { color: var(--ink); font-weight: 600; }
.addon-text a { color: var(--ink); font-weight: 600; }

/* ---------- Photo postcards, with the thread across them ---------- */
.band { position: relative; padding: var(--sec) var(--pad) 0; }
.sec-inner + .band, .band-slim { --sec: clamp(64px, 7vw, 104px); }
.postcard {
  position: relative; z-index: 1; margin: 0; block-size: clamp(300px, 36vw, 540px); overflow: hidden;
  border: 1.5px solid var(--ink); border-radius: clamp(24px, 3vw, 40px); background: var(--ink);
}
.band-slim .postcard { block-size: clamp(240px, 26vw, 400px); }
.postcard img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pc-uvac img { object-position: 50% 55%; }
.pc-belgrade img { object-position: 50% 62%; }
.postcard figcaption {
  position: absolute; z-index: 2; inset-inline-start: clamp(14px, 2vw, 28px); inset-block-end: clamp(14px, 2vw, 28px);
  display: grid; gap: 2px; max-inline-size: min(80%, 460px); padding-block: 12px; padding-inline: 18px 20px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink);
}
.place { font-weight: 650; font-size: clamp(1.0625rem, 1.5vw, 1.375rem); letter-spacing: -0.015em; line-height: 1.15; }
.meta { font-size: 0.875rem; color: var(--ink-mute); }
.meta a { color: var(--ink); }
.coords {
  position: absolute; z-index: 2; inset-block-start: clamp(14px, 2vw, 24px); inset-inline-end: clamp(14px, 2vw, 24px); margin: 0;
  padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
}

/* ---------- Home: tiers (board F, with the badge of each tier's part) ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 28px; background: var(--card); border: 1.5px solid var(--ink); }
.tier-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-end: 8px; }
.tier-part { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9375rem; font-weight: 600; }
.tier-part .pt { --s: 3.25rem; }
.tier-tag { padding: 6px 12px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.tier h3, .tier h2 { margin: 0; font-size: clamp(28px, 2.4vw, 34px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; }
.tier-for { margin: 0; color: var(--ink-mute); font-size: 1rem; }
.tier ul { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; gap: 10px; }
.tier li { position: relative; padding-inline-start: 28px; font-size: 1rem; }
.k1 { --c: var(--p1); } .k2 { --c: var(--p2-tint); } .k3 { --c: var(--p3-tint); } .k4 { --c: var(--p4-tint); }
.tier li::before, .checks li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc((1lh - 18px) / 2); box-sizing: border-box; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--c, var(--p1)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23201d19' stroke-width='1.8'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.tier .btn { margin-block-start: auto; justify-content: space-between; }
.tier-dark { background: var(--ink); color: var(--paper); transform: translateY(-14px); box-shadow: 8px 8px 0 var(--p2); }
.tier-dark .tier-for { color: var(--cream-mute); }
.tier-dark .pt { border-color: var(--paper); }
.tier-dark .btn-yellow { border-color: var(--p1); }

/* ---------- Home: testimonial (board F) ---------- */
.sec-quote { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px clamp(32px, 5vw, 80px); align-items: center; }
.note {
  position: relative; margin: 0; padding: clamp(32px, 4vw, 48px); background: var(--p1); border: 1.5px solid var(--ink);
  border-radius: 6px 28px 28px 28px; transform: rotate(-1.5deg); box-shadow: 8px 8px 0 var(--ink);
}
.note::before { content: ""; position: absolute; inset-block-start: -16px; inset-inline-start: 50%; inline-size: 120px; block-size: 30px; margin-inline-start: -60px; background: rgb(255 250 241 / .75); border: 1px solid var(--line); transform: rotate(3deg); }
.note blockquote { margin: 0; }
.note blockquote p { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.375rem); line-height: 1.18; font-weight: 550; letter-spacing: -0.025em; }
.note figcaption { margin-block-start: 22px; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 1rem; }
.note figcaption i { inline-size: 40px; block-size: 40px; flex: none; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: var(--p1); font-style: normal; font-weight: 700; font-size: 26px; line-height: 1; padding-block-start: 10px; }
.sample { display: inline-block; margin: 0 0 18px; padding: 3px 10px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Dark cards: the closing, the forms. A quiet diagonal kilim on the 32 px grid. ---------- */
.dark { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='%23f6efe1' fill-opacity='.075'%3E%3Crect x='0' y='14' width='2' height='2'/%3E%3Crect x='0' y='16' width='2' height='2'/%3E%3Crect x='2' y='12' width='2' height='2'/%3E%3Crect x='2' y='18' width='2' height='2'/%3E%3Crect x='4' y='10' width='2' height='2'/%3E%3Crect x='4' y='20' width='2' height='2'/%3E%3Crect x='6' y='8' width='2' height='2'/%3E%3Crect x='6' y='22' width='2' height='2'/%3E%3Crect x='8' y='6' width='2' height='2'/%3E%3Crect x='8' y='24' width='2' height='2'/%3E%3Crect x='10' y='4' width='2' height='2'/%3E%3Crect x='10' y='26' width='2' height='2'/%3E%3Crect x='11' y='15' width='2' height='2'/%3E%3Crect x='12' y='2' width='2' height='2'/%3E%3Crect x='12' y='28' width='2' height='2'/%3E%3Crect x='13' y='13' width='2' height='2'/%3E%3Crect x='13' y='15' width='2' height='2'/%3E%3Crect x='13' y='17' width='2' height='2'/%3E%3Crect x='14' y='0' width='2' height='2'/%3E%3Crect x='14' y='30' width='2' height='2'/%3E%3Crect x='15' y='11' width='2' height='2'/%3E%3Crect x='15' y='13' width='2' height='2'/%3E%3Crect x='15' y='15' width='2' height='2'/%3E%3Crect x='15' y='17' width='2' height='2'/%3E%3Crect x='15' y='19' width='2' height='2'/%3E%3Crect x='16' y='0' width='2' height='2'/%3E%3Crect x='16' y='30' width='2' height='2'/%3E%3Crect x='17' y='13' width='2' height='2'/%3E%3Crect x='17' y='15' width='2' height='2'/%3E%3Crect x='17' y='17' width='2' height='2'/%3E%3Crect x='18' y='2' width='2' height='2'/%3E%3Crect x='18' y='28' width='2' height='2'/%3E%3Crect x='19' y='15' width='2' height='2'/%3E%3Crect x='20' y='4' width='2' height='2'/%3E%3Crect x='20' y='26' width='2' height='2'/%3E%3Crect x='22' y='6' width='2' height='2'/%3E%3Crect x='22' y='24' width='2' height='2'/%3E%3Crect x='24' y='8' width='2' height='2'/%3E%3Crect x='24' y='22' width='2' height='2'/%3E%3Crect x='26' y='10' width='2' height='2'/%3E%3Crect x='26' y='20' width='2' height='2'/%3E%3Crect x='28' y='12' width='2' height='2'/%3E%3Crect x='28' y='18' width='2' height='2'/%3E%3Crect x='30' y='14' width='2' height='2'/%3E%3Crect x='30' y='16' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 32px 32px; color: var(--paper); }

/* ---------- Home: closing card, where the thread ends ---------- */
.closing-wrap {
  --card-pad: clamp(32px, 5vw, 72px); --close-h2: clamp(44px, 6vw, 92px);
  --end-y: calc(var(--sec) + var(--card-pad) + var(--close-h2) * 0.5);
  position: relative; padding: var(--sec) var(--pad) 0;
}
.closing {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px clamp(32px, 6vw, 96px); align-items: center;
  padding: var(--card-pad); border-radius: 40px;
}
.closing h2 { margin: 0; font: 650 var(--close-h2)/1 var(--font); letter-spacing: -0.04em; }
.closing h2 span:not(.nobr, .nobr-run) { display: inline-block; padding: 0 0.3em 0.06em; border-radius: 999px; background: var(--p1); color: var(--ink); transform: rotate(2deg); }
.closing p { margin: 18px 0 28px; max-inline-size: 34ch; color: var(--cream-mute); }

/* ---------- The map (board G, with Kosovo inside the outline of Serbia) ---------- */
.map-fig { margin: 0; inline-size: 100%; max-inline-size: 300px; justify-self: end; }
.map { inline-size: 100%; block-size: auto; overflow: visible; }
.map .map-grid { fill: none; stroke: var(--paper); stroke-opacity: 0.12; stroke-width: 1; stroke-dasharray: 2 5; }
.map .map-land { fill: rgb(246 239 225 / 0.06); stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
.map .map-river { fill: none; stroke: var(--river); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.map .map-river-danube, .map .map-river-sava { stroke-width: 3; }
.map .map-towns circle { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.map text { font-family: var(--font); font-size: 15px; font-weight: 500; fill: var(--cream-mute); }
.map .map-places path { fill: var(--p1); stroke: var(--ink); stroke-width: 1.5; }
.map .map-ring { fill: none; stroke: var(--paper); stroke-width: 2; }
.map .map-dot { fill: var(--p4); stroke: var(--paper); stroke-width: 1.5; }
.map .map-capital-label { font-size: 21px; font-weight: 650; fill: var(--paper); }
.map .map-scale path, .map .map-north path { fill: none; stroke: var(--cream-mute); stroke-width: 1.5; }
.map-plain .map-places { display: none; }

/* ---------- Inner pages: the head ---------- */
.page-head { --head-top: clamp(16px, 2vw, 28px); --node-y: calc(var(--head-top) + 12px); position: relative; padding: var(--head-top) var(--pad) 0; }
.head-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 32px clamp(32px, 5vw, 88px); align-items: end; }
.h1-page { font-size: clamp(40px, 5vw, 72px); }
.answer { margin: 26px 0 0; max-inline-size: 38rem; font-size: clamp(1.125rem, 1.35vw, 1.3125rem); line-height: 1.5; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-start: 28px; }
.head-photo { margin: 0; display: grid; gap: 12px; justify-items: start; }
.head-photo img {
  inline-size: 100%; block-size: auto; max-inline-size: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%;
  border: 1.5px solid var(--ink); border-radius: 999px 999px 0 0; box-shadow: 8px 8px 0 var(--p1);
}
.head-photo figcaption { font-size: 0.8125rem; color: var(--ink-mute); }
/* the creator of a photo is microdata only (decision point 46): its span makes no box, so a grid figure gets no extra row */
[itemprop="creator"] { display: contents; }

/* ---------- Service page ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-inline-start: 32px; }
.checks a { font-weight: 600; }
.checks-cols {
  display: block; columns: 2 24rem; column-gap: clamp(32px, 4vw, 72px);
  padding: clamp(24px, 3vw, 40px); background: var(--card); border: 1.5px solid var(--ink); border-radius: 28px;
}
.checks-cols li { break-inside: avoid; margin-block-end: 18px; }
.checks-cols li:last-child { margin-block-end: 0; }

/* How it works: the thread leaves the rail, carries the six steps, and crosses to the other rail */
.how { --line-x: calc(var(--pad) + 26px); --indent: 84px; padding-block-end: var(--cross); }
.how .th-into-line { inline-size: calc(var(--line-x) - var(--rail)); }
.how .th-x { inset-inline-start: calc(var(--line-x) - 1px); --t: var(--cross); --e: calc(100% - var(--cross)); }
.how .th-out-of-line { --t: calc(100% - var(--cross)); inset-inline-start: var(--line-x); inline-size: calc(100% - var(--line-x) - var(--rail)); }
.how-body { padding-inline-start: var(--indent); }
.steps { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; gap: clamp(24px, 2.8vw, 36px); counter-reset: step; }
.steps li { position: relative; z-index: 1; counter-increment: step; display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 38rem); gap: 6px 40px; align-items: baseline; }
.steps li::before {
  content: counter(step); position: absolute; inset-inline-start: calc(-1 * var(--indent)); inset-block-start: -10px;
  inline-size: 52px; block-size: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--card); border: 2px solid var(--ink); font: 650 1.25rem/1 var(--font);
}
.steps li:first-child::before { background: var(--p1); }
.steps h3 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.steps p { margin: 0; }

/* Key facts table; under 720 px each row becomes a block with labels */
.facts { inline-size: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; overflow: hidden; font-size: 1rem; line-height: 1.45; }
.facts th, .facts td { text-align: start; vertical-align: top; padding: 14px 20px; border-block-end: 1px solid var(--line); }
.facts thead th { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); background: #faf2e2; border-block-end: 1.5px solid var(--ink); }
.facts tbody th { font-weight: 600; inline-size: 30%; }
.facts .basis { color: var(--ink-mute); font-size: 0.9375rem; inline-size: 26%; }
.facts tbody tr:last-child > * { border-block-end: 0; }
.facts .num { font-weight: 650; white-space: nowrap; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pair-card { padding: clamp(24px, 3vw, 40px); background: var(--card); border: 1.5px solid var(--ink); border-radius: 28px; }
.pair-card.scope { background: var(--p1-tint); box-shadow: 8px 8px 0 var(--ink); }
.pair-card p { margin: 0 0 16px; }
.boxes, .options { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.boxes li, .options li { display: flex; gap: 14px; align-items: baseline; }
.boxes li::before { content: ""; flex: none; inline-size: 18px; block-size: 18px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--card); transform: translateY(3px); }
.options li { padding: 14px 18px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; }
.options li::before { content: ""; flex: none; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); transform: translateY(2px); }

.offer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 36px clamp(32px, 5vw, 80px); align-items: center; }
.offer-card { padding: clamp(28px, 3.4vw, 48px); border-radius: 32px; box-shadow: 8px 8px 0 var(--p1); }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; }
.offer-top .pt { --s: 3.25rem; }
.offer-lead { margin: 0 0 20px; font-size: clamp(1.375rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.mark { display: inline-block; padding: 0 0.3em 0.06em; border-radius: 999px; background: var(--p1); color: var(--ink); transform: rotate(-2deg); }
.on-dark li::before { border-color: var(--p1); }
.offer-side p { margin: 0 0 14px; max-inline-size: 34rem; }
.offer-note { font-weight: 600; }

.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.qa-item { padding: clamp(22px, 2.6vw, 32px); background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; }
.qa-item h3 { margin: 0 0 10px; font-size: clamp(1.1875rem, 1.6vw, 1.4375rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.qa-item p { margin: 0; }
.qa a { font-weight: 600; }

.related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 80px); }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pills a {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; padding: 8px 18px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--ink); text-decoration: none; font-weight: 550; font-size: 1.0625rem; line-height: 1.2;
}
.pills a:hover { background: var(--c, var(--p1-tint)); }
.pills .arw { inline-size: 16px; block-size: 16px; flex: none; }
.pills .gl { inline-size: 16px; block-size: 16px; }
.pills .gl-4 { block-size: 8px; }

/* ---------- The form, at the end of an inner page; the thread ends beside its heading ---------- */
.form-sec {
  --sec: clamp(64px, 7vw, 104px); --card-pad: clamp(26px, 4vw, 56px); --form-h2: clamp(30px, 3.4vw, 50px);
  --end-y: calc(var(--sec) + var(--card-pad) + var(--form-h2) * 0.525);
  position: relative; padding: var(--sec) var(--pad) 0;
}
.form-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 40px clamp(40px, 6vw, 96px); align-items: start; padding: var(--card-pad); border-radius: 40px; }
.form-card-solo { max-inline-size: 62rem; grid-template-columns: minmax(0, 40rem); }
.form-card h2 { margin: 0 0 26px; font: 650 var(--form-h2)/1.05 var(--font); letter-spacing: -0.03em; }
.form { display: grid; gap: 20px; max-inline-size: 40rem; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.hint { font-size: 0.9375rem; color: var(--cream-mute); }
.opt { margin-inline-start: 6px; font-weight: 400; font-size: 0.875rem; color: var(--cream-mute); }
.field input, .field textarea, .field select {
  inline-size: 100%; min-block-size: 52px; padding: 12px 16px; color: var(--ink); background-color: var(--card);
  border: 1.5px solid var(--card); border-radius: 16px;
}
.field textarea { min-block-size: 140px; resize: vertical; }
.field select {
  appearance: none; padding-inline-end: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23201d19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: right 18px center;
}
[dir="rtl"] .field select { background-position: left 18px center; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--p1); outline-offset: 2px; border-radius: 16px; }
.check-field { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 0.9375rem; }
.check-field input { inline-size: 22px; block-size: 22px; margin: 2px 0 0; accent-color: var(--p1); }
.notice { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--cream-mute); }
.notice a { color: var(--paper); }
.form .btn { justify-self: start; }

/* ---------- Guide: a long read ---------- */
.guide-head { padding-block-end: 0; }
.kicker-guide { margin-block-end: 20px; }
.h1-guide { font-size: clamp(32px, 4.4vw, 62px); line-height: 1.06; max-inline-size: 15em; }
.answer-guide { max-inline-size: 34em; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.55; }
.guide-facts, .read, .guide-related { --sec: clamp(56px, 6vw, 88px); }
.guide-facts > *:not(.th), .guide-related > *:not(.th) { max-inline-size: 62rem; }
.h2-guide-top { margin: 0 0 20px; font: 650 clamp(26px, 2.6vw, 36px)/1.1 var(--font); letter-spacing: -0.025em; }
.facts-guide tbody th { inline-size: 27%; }
.facts-guide .basis { inline-size: 28%; }

/* 32.5em of Outfit at 19 px holds about 72 characters (0.447 em a character, measured on the text of this guide
   from the hmtx table of the font with _work/textwidth.js); a filled line averages about 67 */
.read {
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  display: grid; grid-template-columns: minmax(0, 32.5em) minmax(15rem, 17rem); grid-template-areas: "body toc";
  column-gap: clamp(40px, 5vw, 80px); align-items: start;
}
.toc { grid-area: toc; position: sticky; inset-block-start: 20px; padding: 20px 22px 16px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; font-size: 1rem; }
.toc h2 { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 8px; margin-inline: -8px; border-radius: 12px; text-decoration: none; font-size: 0.9375rem; line-height: 1.35; }
.toc a::before { content: counter(toc); display: grid; place-items: center; inline-size: 26px; block-size: 26px; margin-block-start: -3px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 0.75rem; font-weight: 650; }
.toc a:hover { background: var(--p1-tint); }
.read-body { grid-area: body; min-inline-size: 0; counter-reset: h2; }
.read-body > section { counter-increment: h2; }
.read-body h2 {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline;
  margin: 2.2em 0 0.7em; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.18;
}
.read-body > section:first-child h2 { margin-block-start: 0; }
.read-body h2::before {
  content: counter(h2); display: grid; place-items: center; inline-size: 34px; block-size: 34px; transform: translateY(-3px);
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--card); font-size: 0.9375rem; font-weight: 650; letter-spacing: 0;
}
.read-body p { margin: 0 0 1em; line-height: 1.65; }
.read-body a { font-weight: 600; }
.dots { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 0.55em; }
.dots li { position: relative; padding-inline-start: 1.5em; line-height: 1.6; }
.dots li::before { content: ""; position: absolute; inset-inline-start: 0.3em; inset-block-start: 0.6em; inline-size: 0.42em; block-size: 0.42em; background: var(--ink); transform: rotate(45deg); }
/* RNDM-31, variant A (Toni, 2026-10-21): the label "STEP 1" in the style of the CONTENTS label, and a small ink dot on the
   dotted rail, so a step never repeats the circled number of a section. build.py writes the label (.step-n) from guide.step
   of shared.md. The axis of the rail is 17 px, the centre of the 34 px section circle; the text starts at 48 px, where the
   H2 text starts. One strip on the axis draws the dot beside the label and the rail down to the next dot. Both layers sit
   at "center", so the strip needs no physical value for a right-to-left page. */
.steps-g { --axis: 17px; --dot: 9px; --label-lh: 20px; list-style: none; margin: 1.2em 0 1.4em; padding: 0; }
.steps-g li { position: relative; padding-inline-start: 48px; padding-block-end: 1.15em; line-height: 1.6; }
.steps-g li:last-child { padding-block-end: 0; }
.steps-g .step-n {
  display: block; margin-block-end: 2px; font-size: 0.8125rem; font-weight: 600; line-height: var(--label-lh); letter-spacing: 0.12em;
  text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink-mute);
}
.steps-g li::after {
  content: ""; position: absolute; inset-inline-start: calc(var(--axis) - 5px); inset-block: 0; inline-size: 10px;
  background:
    radial-gradient(circle closest-side, var(--ink) calc(100% - 1px), transparent) center calc((var(--label-lh) - var(--dot)) / 2) / var(--dot) var(--dot) no-repeat,
    repeating-linear-gradient(to bottom, var(--ink) 0 2px, transparent 2px 5px) center var(--label-lh) / 2px calc(100% - var(--label-lh)) no-repeat;
}
.steps-g li:last-child::after {
  background: radial-gradient(circle closest-side, var(--ink) calc(100% - 1px), transparent) center calc((var(--label-lh) - var(--dot)) / 2) / var(--dot) var(--dot) no-repeat;
}
.rndm-card { padding: clamp(22px, 3vw, 34px); background: var(--card); border: 1.5px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--p1); }
.rndm-card p { line-height: 1.6; }
.read-body .rndm-part { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 0.8125em; font-weight: 600; }
.rndm-part .pt { --s: 2.25rem; }
.rndm-card .cta-row { margin-block-start: 6px; font-size: 1rem; }
.rndm-card .btn { line-height: 1.25; }
.sources > p { color: var(--ink-mute); }
.sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sources li { padding-inline-start: 14px; border-inline-start: 2px solid var(--line); font-size: 0.875em; line-height: 1.5; }
.sources .src-name { display: block; }
.read-body .sources a { font-weight: 400; color: var(--ink-mute); overflow-wrap: anywhere; }
.guide-related .h2-small { margin-block-end: 14px; }

/* ---------- What we do (level 1): the eight services on one line ----------
   The thread leaves the rail, carries the three parts and their eight services, and comes back
   to the rail before the form. A part shows its numbered badge on the line; a service shows the
   shape and the colour of its part. The four "Contact us" blocks are stickers beside the line. */
.kicker-parts { padding-inline-start: 10px; }
.kicker-parts .gls { display: inline-flex; align-items: center; gap: 4px; }
.kicker-parts .gl { inline-size: 15px; block-size: 15px; }
.h1-wwd .key { margin-block-start: 0.1em; }
/* a level-1 head has no buttons under its answer, so its text sits in the middle of the arch */
.page-wwd .head-grid, .page-contact .head-grid, .page-tiers .head-grid, .page-about .head-grid, .page-expo .head-grid, .page-hub .head-grid { align-items: center; }

.sec-index { --sec: clamp(48px, 5vw, 72px); }
.wwd-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 2.6vw, 40px); }
.wwd-index .part { gap: 16px; }
.wwd-index .pills { gap: 8px; }
.wwd-index .pills a { min-block-size: 44px; padding: 6px 16px; font-size: 1rem; }

.wwd { --lx: 26px; --line-x: calc(var(--pad) + var(--lx)); --indent: 84px; --mark: 38px; --svc-h2: clamp(26px, 2.6vw, 38px); padding-block-end: var(--cross); }
.wwd .th-into-line { inline-size: calc(var(--line-x) - var(--rail)); }
.wwd .th-x { inset-inline-start: calc(var(--line-x) - 1px); --t: var(--cross); --e: calc(100% - var(--cross)); }
.wwd .th-back { --t: calc(100% - var(--cross)); inline-size: calc(var(--line-x) - var(--rail)); }
.wwd-body { padding-inline-start: var(--indent); }
.wwd-part { position: relative; display: flex; align-items: center; min-block-size: 3rem; margin: 0 0 14px; font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 650; letter-spacing: -0.015em; }
.wwd-part:not(:first-child) { margin-block-start: clamp(56px, 6vw, 88px); }
.wwd-part .pt { position: absolute; z-index: 1; inset-inline-start: calc(var(--lx) - var(--indent) - var(--s) / 2); inset-block-start: calc(50% - var(--s) / 2); box-shadow: 0 0 0 5px var(--paper); }
.svc-row {
  position: relative; display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 38rem); gap: 14px clamp(32px, 4.4vw, 72px);
  padding-block: 26px 34px; border-block-start: 1.5px solid var(--ink);
}
.svc-row h2 { margin: 0; font: 650 var(--svc-h2)/1.1 var(--font); letter-spacing: -0.03em; }
.svc-text p { margin: 0 0 18px; }
.svc-mark {
  position: absolute; z-index: 1; inline-size: var(--mark); block-size: var(--mark);
  inset-inline-start: calc(var(--lx) - var(--indent) - var(--mark) / 2); inset-block-start: calc(26px + (1.1 * var(--svc-h2) - var(--mark)) / 2);
  border: 1.5px solid var(--ink); box-shadow: 0 0 0 5px var(--paper);
}
.sm-1 { background: var(--p1); border-radius: 50%; }
.sm-2 { background: var(--p2); border-start-start-radius: 100%; }
.sm-3 { background: var(--p3); border-radius: 4px; }
.svc-link {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: 46px; padding: 8px 18px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; line-height: 1.2;
  transition: background-color .2s ease;
}
.svc-link .arw { inline-size: 16px; block-size: 16px; flex: none; }
.svc-link:hover { background: var(--c); }
.nudge {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
  max-inline-size: 62rem; margin-block: 4px 40px; padding-block: 14px; padding-inline: 30px 14px;
  border: 1.5px solid var(--ink); border-radius: 999px; box-shadow: 5px 5px 0 var(--ink); transform: rotate(-0.8deg);
}
.nudge p { margin: 0; flex: 1 1 20rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.4; }
.nudge strong { font-weight: 650; }
.nudge-1 { background: var(--p1-tint); }
.nudge-2 { transform: rotate(0.6deg); box-shadow: 5px 5px 0 var(--p1); }
.wwd-end { margin: 8px 0 0; }
.form-lede { margin: -14px 0 26px; color: var(--cream-mute); }

/* ---------- Contact (level 1): the full form, the next steps and the company details ---------- */
.answer-more { margin: 14px 0 0; max-inline-size: 38rem; color: var(--ink-mute); }
.answer-more a { color: var(--ink); font-weight: 600; }
.form-card-full { display: block; }
.form-full { max-inline-size: none; gap: 30px; }
.ff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(32px, 5vw, 80px); align-items: start; }
.ff-col { display: grid; gap: 22px; align-content: start; min-inline-size: 0; }
.choice { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.choice legend { padding: 0; margin-block-end: 10px; font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-pill {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; padding-block: 8px; padding-inline: 12px 16px;
  border: 1.5px solid var(--cream-mute); border-radius: 999px; cursor: pointer; font-size: 0.9375rem; line-height: 1.25;
}
.opt-pill input { appearance: none; flex: none; inline-size: 18px; block-size: 18px; margin: 0; border: 1.5px solid var(--paper); border-radius: 50%; background: transparent; cursor: pointer; }
.opt-pill input[type="checkbox"] { border-radius: 5px; }
.opt-pill input:focus-visible { outline: none; }
.opt-pill:has(input:focus-visible) { outline: 3px solid var(--p1); outline-offset: 2px; }
.opt-pill:hover { border-color: var(--paper); }
.opt-pill:has(input:checked) { border-color: var(--p1); }
.opt-pill input[type="radio"]:checked { border-color: var(--p1); background: var(--p1); box-shadow: inset 0 0 0 3.5px var(--ink); }
.s0 { --c: var(--card); }
/* a chosen service takes the tint of its part; .is-demo shows that state on the board */
.opts-services .opt-pill:has(input:checked), .opts-services .opt-pill.is-demo { background: var(--c); color: var(--ink); border-color: var(--c); }
.opts-services input:checked, .opts-services .is-demo input {
  border-color: var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.3l2.6 2.6 5.8-5.8' fill='none' stroke='%23f6efe1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.ff-end { margin-block-start: 6px; padding-block-start: 28px; border-block-start: 1px solid rgb(246 239 225 / 0.18); }
/* the place of the security check (Turnstile); the board draws only its outline */
.captcha { display: inline-flex; align-items: center; gap: 12px; justify-self: start; min-block-size: 56px; padding-block: 10px; padding-inline: 14px 20px; border: 1.5px dashed var(--cream-mute); border-radius: 14px; color: var(--cream-mute); font-size: 0.9375rem; }
.captcha-box { inline-size: 24px; block-size: 24px; border: 1.5px solid var(--cream-mute); border-radius: 6px; }
/* The full form posts to /api/lead (RNDM-33). The real slot of the widget keeps the height of the widget free, so
   the button does not move when /form.js renders it, and spans the column, so that form.js can measure it. */
.form .captcha[data-sitekey] { display: block; justify-self: stretch; min-block-size: 65px; padding: 0; border: 0; }
/* an error line under a field and the line of the form stay empty, and so hidden, until form.js writes an answer */
.field-err, .form-msg { margin: 0; color: var(--p4-tint); font-weight: 600; }
.field-err:empty, .form-msg:empty { display: none; }
.field [aria-invalid="true"] { border-color: var(--p4); box-shadow: inset 0 0 0 1.5px var(--p4); }
/* on 200 the "Thank you" block takes the place of the form */
.form-full[hidden] { display: none; }
.form-sent h3 { margin: 0 0 12px; font: 650 clamp(1.75rem, 2.4vw, 2.25rem)/1.1 var(--font); letter-spacing: -0.02em; }
.form-sent p { margin: 0; max-inline-size: 40rem; font-size: 1.125rem; line-height: 1.5; }
.form-sent-to { font-weight: 600; overflow-wrap: anywhere; }

.after-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px clamp(40px, 6vw, 104px); align-items: start; }
.after-form .h2-page { margin-block-end: clamp(24px, 3vw, 36px); }
.next-steps { list-style: none; counter-reset: n; margin: 0; padding: 0; }
.next-steps li { position: relative; counter-increment: n; min-block-size: 48px; padding-block: 9px 30px; padding-inline-start: 68px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.45; }
.next-steps li:last-child { padding-block-end: 0; }
.next-steps li::before {
  content: counter(n); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 46px; block-size: 46px;
  display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--card); font: 650 1.125rem/1 var(--font);
}
.next-steps li:first-child::before { background: var(--p1); }
.next-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 22px; inset-block: 52px 6px; border-inline-start: 2px dotted var(--ink); }
.biz {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 24px 32px; align-items: center;
  padding: clamp(24px, 3vw, 40px); background: var(--card); border: 1.5px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--p1);
}
.biz-logo { display: block; margin-block-end: 22px; color: var(--ink); }
.biz-logo svg { inline-size: 84px; block-size: auto; }
.details { margin: 0; display: grid; gap: 12px; }
.details div { display: grid; gap: 1px; }
.details dt { font-size: 0.875rem; font-weight: 600; color: var(--ink-mute); }
.details dd { margin: 0; font-weight: 550; }
.details a { font-weight: 600; }
.map-fig-biz { max-inline-size: 200px; }
/* the map on paper: the outline, the rivers and Belgrade only */
.map-light .map-grid { stroke: var(--ink); stroke-opacity: 0.16; }
.map-light .map-land { fill: rgb(32 29 25 / 0.04); stroke: var(--ink); }
.map-light .map-river { stroke: var(--p3); }
.map-light .map-towns, .map-light .map-labels, .map-light .map-scale, .map-light .map-north { display: none; }
.map-light .map-ring { stroke: var(--ink); }
.map-light .map-dot { stroke: var(--ink); }
.map-light .map-capital-label { font-size: 30px; fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 7px; stroke-linejoin: round; }

/* ---------- The menu: the full-screen overlay, shown here as its own page ----------
   Ink with the kilim, as the dark cards. The thread runs through the six level-1 pages and ends
   at Contact, where the form is; Expo 2027 hangs below it as an add-on. */
.page-menu { background-color: var(--ink); background-image: none; }
.overlay { --menu-fs: clamp(42px, 5.4vw, 80px); display: flex; flex-direction: column; min-block-size: 100svh; }
.overlay .logo { color: var(--paper); }
.close { margin-inline-start: auto; gap: 12px; padding-inline: 18px 6px; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.close .x { position: relative; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--ink); }
.close .x::before, .close .x::after { content: ""; position: absolute; inset-inline-start: 9px; inset-block-start: 15px; inline-size: 14px; block-size: 2px; border-radius: 2px; background: var(--paper); transform: rotate(45deg); }
.close .x::after { transform: rotate(-45deg); }
.menu-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); gap: 40px clamp(40px, 6vw, 112px); align-items: center; padding: 12px var(--pad) 40px; }
.menu-list { --list-in: 0px; list-style: none; margin: 0; padding: 0; padding-inline-start: var(--list-in); }
.menu-list li { position: relative; padding-block: 4px; }
.menu-list a {
  display: inline-flex; align-items: center; padding: 4px 0.38em; margin-inline-start: -0.38em; border-radius: 999px; text-decoration: none;
  font: 600 var(--menu-fs)/1.06 var(--font); letter-spacing: -0.035em; transition: background-color .2s ease, color .2s ease;
}
.menu-list .t { display: block; }
.menu-list a:hover { background: var(--paper); color: var(--ink); }
.menu-list a[aria-current] .t::after { content: ""; display: inline-block; inline-size: 0.3em; block-size: 0.3em; margin-inline-start: 0.16em; border-radius: 50%; background: var(--p1); vertical-align: 0.08em; }
.overlay .th path { stroke: var(--paper); }
.menu-list .th-l { inset-inline-start: calc(var(--rail) - var(--pad) - var(--list-in) - 1px); }
.th-m-first { --t: 50%; }
.th-m-last { --e: 50%; }
.menu-list .th-node { inset-block-start: calc(50% - 8px); inset-inline-start: calc(var(--rail) - var(--pad) - var(--list-in) - 8px); background: var(--ink); border-color: var(--paper); }
.menu-list .th-end { inline-size: 20px; block-size: 20px; inset-block-start: calc(50% - 10px); inset-inline-start: calc(var(--rail) - var(--pad) - var(--list-in) - 10px); background: var(--p1); box-shadow: 0 0 0 4px var(--ink), 0 0 0 5.5px var(--paper); }
.th-knot { position: absolute; z-index: 1; inline-size: 12px; block-size: 12px; inset-block-start: calc(50% - 6px); inset-inline-start: calc(var(--rail) - var(--pad) - var(--list-in) - 6px); border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); }
.menu-addon { margin: 30px 0 0; }
.menu-addon a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-block: 10px; padding-inline: 16px 24px; border: 1.5px dashed var(--cream-mute); border-radius: 32px; text-decoration: none; }
.menu-addon a:hover { border-style: solid; border-color: var(--paper); }
.menu-addon .addon-plus { font-size: 1.5rem; font-weight: 500; line-height: 1; }
.menu-addon .pt { --s: 2.5rem; border-color: var(--paper); }
.addon-name { font-weight: 650; font-size: 1.25rem; }
.addon-line { color: var(--cream-mute); font-size: 0.9375rem; }
.menu-side { display: grid; gap: 24px; align-content: center; }
.menu-photo { margin: 0; display: grid; gap: 10px; }
.menu-photo img { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 11; object-fit: cover; object-position: 58% 50%; border: 1.5px solid var(--paper); border-radius: 999px 999px 0 0; }
.menu-photo figcaption { font-size: 0.8125rem; color: var(--cream-mute); }
.menu-photo figcaption a { color: var(--paper); }
.menu-card { padding: 22px 24px 24px; border-radius: 28px; background: var(--p1); color: var(--ink); border: 1.5px solid var(--p1); transform: rotate(-1.5deg); box-shadow: 6px 6px 0 var(--paper); }
.menu-card p { margin: 0 0 16px; font-size: 1.125rem; line-height: 1.35; }
.menu-card strong { display: block; margin-block-end: 6px; font-size: 1.625rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.1; }
.menu-card .btn { inline-size: 100%; justify-content: space-between; }
.langs h2 { margin: 0 0 12px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-mute); }
.langs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.langs a { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--cream-mute); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.langs a:hover { border-color: var(--paper); }
.langs a[aria-current] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.menu-foot { padding: 18px var(--pad) 24px; border-block-start: 1px solid rgb(246 239 225 / 0.16); color: var(--cream-mute); font-size: 0.9375rem; }
.menu-foot p { margin: 0; }
.menu-foot strong { color: var(--paper); font-weight: 600; }
.menu-foot a { margin-inline-start: 0.3em; color: var(--paper); }

/* ---------- Footer (the IA footer, in board F's dress) ---------- */
.foot { padding: clamp(72px, 8vw, 112px) var(--pad) 32px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; padding-block-end: 28px; border-block-end: 1.5px solid var(--ink); }
.foot-top .logo svg { inline-size: 84px; }
.foot-tag { margin: 0; flex: 1 1 26rem; max-inline-size: 44rem; font-size: 1.0625rem; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; padding-block: 30px; }
.foot-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 650; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.9375rem; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-expo { display: inline-flex; align-items: center; gap: 8px; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block-start: 20px; border-block-start: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-mute); }
.foot-bottom p { margin: 0; }
.foot-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; }
.foot-bottom a { color: var(--ink); }
.foot-langs a[aria-current] { font-weight: 650; }
.board-note { margin: 18px 0 0; font-size: 0.8125rem; color: var(--ink-mute); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .nav { display: none; }
  .bar-end { margin-inline-start: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .stage { max-inline-size: 640px; }
  .tiers { grid-template-columns: minmax(0, 1fr); max-inline-size: 560px; }
  .tier-dark { transform: none; }
  .sec-quote { grid-template-columns: minmax(0, 1fr); }
  .report { inset-inline-start: 0; }   /* HE-1: in one column the card starts at the gutter, not past the screen edge */
  .langs a { min-block-size: 44px; }   /* MN-2 */
}
@media (max-width: 1000px) {
  .parts { grid-template-columns: minmax(0, 1fr); }
  .wwd-index { grid-template-columns: minmax(0, 1fr); }
  .read { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "body"; row-gap: 40px; }
  .read-body { max-inline-size: 32.5em; }
  .toc { position: static; max-inline-size: 34rem; }
  .toc ol { gap: 0; }                  /* GD-1: 44 px targets in the contents card above the text */
  .toc a { padding-block: 11px; }
}
@media (max-width: 900px) {
  .head-grid, .pair, .offer, .qa, .related, .closing, .form-card { grid-template-columns: minmax(0, 1fr); }
  .head-photo img { max-inline-size: 320px; aspect-ratio: 1; }
  .map-fig { justify-self: start; max-inline-size: 280px; }
  .steps li { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-row { grid-template-columns: minmax(0, 1fr); }
  .ff-grid, .after-form { grid-template-columns: minmax(0, 1fr); }
  .menu-body { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 40px; }
  .menu-side { max-inline-size: 34rem; }
  .menu-photo { display: none; }
  .notice { font-size: 0.9375rem; max-inline-size: 30rem; }   /* FM-3: under a one-column form, about 70 characters a line */
}
@media (max-width: 720px) {
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; inline-size: auto; }
  .facts tbody th, .facts .basis, .facts-guide tbody th, .facts-guide .basis { inline-size: auto; }
  .facts thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .facts tbody tr { padding: 14px 18px; border-block-end: 1px solid var(--line); }
  .facts tbody tr:last-child { border-block-end: 0; }
  .facts tbody th, .facts td { padding: 0; border: 0; }
  .facts tbody th { margin-block-end: 6px; font-size: 1.0625rem; }
  .facts td + td { margin-block-start: 8px; }
  .facts td::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-mute); }
}
@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .bar { gap: 8px; padding-block: 14px; }
  .bar .logo svg { inline-size: 84px; }
  .chip.lang { display: none; }
  .bar .btn { padding: 0 14px; }
  .chip.menu { padding: 0 13px; }
  .chip.menu > span:first-child { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .hero .h1 { font-size: 12.2vw; }
  .hero-cta .btn, .cta-row .btn { flex: 1 1 100%; justify-content: space-between; }
  .stage { padding-block-start: 92px; }
  .arch-photo { inline-size: 42%; }
  .device { margin-inline-end: 20%; padding-block-start: 0; }
  .lid { margin-inline: 0; padding: 8px 8px 10px; border-radius: 14px 14px 4px 4px; }
  .screen { grid-template-columns: 64px minmax(0, 1fr); font-size: 8px; }
  .side { padding: 8px 5px; }
  .side svg { inline-size: 32px; margin-block-end: 6px; }
  .side span { padding: 4px 5px; gap: 4px; }
  .app { padding: 8px; gap: 6px; }
  .app-top b { font-size: 10px; }
  .app-top span, .st { font-size: 7px; padding: 1px 5px; }
  .pay-row { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 6px; gap: 4px; }
  .pay-row > :nth-child(2) { display: none; }   /* HE-4: no due date column, so each name fits */
  .pay-head { font-size: 6.5px; }
  .app-row { display: none; }
  .report { position: relative; inset: auto; inline-size: auto; margin-block: 26px 0; margin-inline: 0 8px; transform: rotate(-1.5deg); }
  .toast { inset-block-start: -78px; inset-inline-start: 0; font-size: 0.8125rem; }
  .stage-cap { display: none; }   /* HE-3: under the report card it would read as its caption; the alt names the place */
  .tags { padding-block-start: 44px; gap: 10px 8px; }
  .tag { font-size: 0.9375rem; padding-block: 8px; padding-inline: 10px 14px; gap: 8px; white-space: normal; }
  .tag .gl { inline-size: 16px; block-size: 16px; }
  .svc a { padding-inline: 18px; }
  .addon { border-radius: 22px; padding: 14px 18px; }
  /* PB-1, PB-2: the caption goes under the photo in muted text, so it covers none of it, and the
     thread passes behind the photo with no paper copy across it */
  .th-in { display: none; }
  .postcard, .band-slim .postcard { block-size: auto; overflow: visible; border: 0; border-radius: 0; background: none; }
  .postcard img { block-size: 300px; border: 1.5px solid var(--ink); border-radius: 24px; }
  .band-slim .postcard img { block-size: 220px; }
  .postcard figcaption {
    position: static; max-inline-size: none; margin-block-start: 10px; padding: 0; padding-inline-end: 28px; padding-block-end: 8px;
    background: none; border: 0; border-radius: 0; box-shadow: none; text-wrap: pretty;
  }
  .postcard .place { font-size: 0.9375rem; font-weight: 500; color: var(--ink-mute); }
  .coords { display: none; }
  .note { padding-block-start: 64px; }
  .closing { border-radius: 28px; }
  .h1-page { font-size: clamp(27px, 8.2vw, 32px); }
  .h1-guide { font-size: clamp(28px, 8.2vw, 34px); }
  .how { --line-x: calc(var(--pad) + 20px); --indent: 58px; }
  .steps li::before { inline-size: 40px; block-size: 40px; inset-block-start: -7px; font-size: 1.0625rem; }
  .facts { border-radius: 20px; }
  .pair-card.scope { box-shadow: 5px 5px 0 var(--ink); }
  .offer-card { box-shadow: 5px 5px 0 var(--p1); }
  .rndm-card { box-shadow: 5px 5px 0 var(--p1); }
  .head-photo img { max-inline-size: 240px; box-shadow: 5px 5px 0 var(--p1); }   /* HE-5 */
  .page-contact .head-photo { display: none; }   /* HE-2: the form of Contact starts on the first screen */
  .form-card { border-radius: 28px; }
  .wwd { --lx: 20px; --indent: 58px; --mark: 30px; }
  .wwd-part .pt { --s: 2.25rem; font-size: 0.8125rem; }
  .svc-row { padding-block: 22px 28px; }
  .svc-mark { inset-block-start: calc(22px + (1.1 * var(--svc-h2) - var(--mark)) / 2); }
  .nudge { border-radius: 24px; padding: 18px; transform: rotate(-0.6deg); }
  .nudge-2 { transform: rotate(0.6deg); }
  .nudge .btn { flex: 1 1 100%; justify-content: space-between; }
  .opt-pill { font-size: 0.9375rem; }
  .biz { grid-template-columns: minmax(0, 1fr); box-shadow: 5px 5px 0 var(--p1); }
  .map-fig-biz { max-inline-size: 160px; }
  .next-steps li { padding-inline-start: 60px; }
  .menu-addon a { border-radius: 24px; }
  .menu-list { --list-in: 14px; }
  .wwd-index { gap: 22px; }
  .wwd-index .part { gap: 12px; padding-block-start: 14px; }
  .wwd-index .pt { --s: 2.5rem; font-size: 0.875rem; }
  .wwd-index .pills { gap: 8px; }
  .wwd-index .pills a { min-block-size: 44px; padding: 4px 14px; font-size: 0.9375rem; }
  .svc-link { padding-inline: 16px; font-size: 0.9375rem; }
  .close { padding-inline-start: 14px; }
  .th-end { inline-size: 14px; block-size: 14px; inset-inline-start: calc(var(--rail) - 7px); inset-block-start: calc(var(--end-y) - 7px); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  /* tap targets of 44 px: the footer links (FT-1, FT-2), the breadcrumb (HD-2), the links outside running text (CD-3).
     A negative margin keeps the line of a padded link where it was. */
  .foot-cols ul { gap: 0; }
  .foot-cols a { display: flex; align-items: center; gap: 8px; min-block-size: 44px; }
  .foot-bottom ul { gap: 0 20px; }
  .foot-bottom ul a { display: inline-flex; align-items: center; min-block-size: 44px; }
  .crumbs a, .details a { padding-block: 12px; margin-block: -12px; }
  .crumbs a { padding-inline: 4px; margin-inline: -4px; }   /* "Home" is 40 px wide */
  .text-link { padding-block: 10px; margin-block: -10px; }   /* 10 px: under a full-width button it stays out of the 10 px row gap */
  .form-card .map-fig { display: none; }   /* FM-2: no map under the Send button; About, Contact, the hub and 404 keep theirs */
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .th, .th-node, .th-in, .bar, .foot, .form-sec, .toc, .postcard { display: none; }
  body { background: #fff; }
  .read { display: block; }
}

/* =====================================================================================
   The whole English site (RNDM-24, 2026-10-20): the components of the new pages.
   Same tokens, same paper, same thread. Each block below names its page or template.
   ===================================================================================== */

/* ---------- Language switcher: a native details element, no script ---------- */
.lang-switch { position: relative; }
.lang-switch > summary { list-style: none; cursor: pointer; gap: 6px; padding-inline: 14px 12px; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch .chev { inline-size: 14px; block-size: 14px; transition: transform .2s ease; }
.lang-switch[open] .chev { transform: rotate(180deg); }
.lang-list {
  position: absolute; z-index: 20; inset-inline-end: 0; inset-block-start: calc(100% + 8px); min-inline-size: 200px;
  list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink);
}
.lang-list a { display: flex; align-items: center; min-block-size: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.lang-list a:hover { background: var(--p1-tint); }
.lang-list a[aria-current] { background: var(--ink); color: var(--paper); }

/* ---------- Home: the hero without a kicker; the thread starts beside the first line of the H1 ---------- */
.hero-v2 {
  --text-top: clamp(0px, 3vw, 44px); --h1fs: clamp(46px, 5.9vw, 88px);
  --node-y: calc(var(--hero-top) + var(--text-top) + var(--h1fs) * 0.52);
  align-items: start;
}
.hero-v2 .hero-text { padding-block-start: var(--text-top); }
.hero-v2 .h1 { font-size: var(--h1fs); }

/* Home: what we handle, each service a sticker card in the tint of its part */
.part-head { line-height: 1.2; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.svc-item {
  position: relative; padding: 16px 20px 18px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px;
  box-shadow: 4px 4px 0 var(--ink); transition: background-color .2s ease, transform .2s ease;
}
.svc-item:hover, .svc-item:focus-within { background: var(--c); transform: rotate(-1deg); }
.svc-name {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: clamp(1.1875rem, 1.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
}
/* the title is the one link of the card, and its ::after makes the whole card the target */
.svc-name::after, .gcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }
.svc-name .gl { inline-size: 18px; block-size: 18px; }
.svc-name .arw { inline-size: 0.8em; block-size: 0.8em; flex: none; }
.svc-item p { margin: 8px 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-mute); }

/* Home: why companies call us, three taped stickers */
.reasons { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 2.6vw, 36px); }
.reason {
  position: relative; padding: clamp(26px, 3vw, 36px); padding-block-start: 36px; background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink);
}
.reason::before { content: ""; position: absolute; inset-block-start: -15px; inset-inline-start: 50%; inline-size: 96px; block-size: 28px; margin-inline-start: -48px; background: rgb(255 250 241 / .8); border: 1px solid var(--line); transform: rotate(-3deg); }
.r1 { transform: rotate(-1.2deg); }
.r2 { transform: rotate(0.8deg); background: var(--p1-tint); }
.r3 { transform: rotate(-0.5deg); }
.reason h3 { margin: 0 0 12px; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.reason p { margin: 0; }

/* Home and Tiers: the tier cards with no price; the billing line sits in the price slot */
.tier .tier-top { justify-content: start; }
.tier-bill { margin: 0; align-self: start; padding: 6px 14px; border-radius: 999px; background: var(--p1-tint); border: 1.5px solid var(--ink); font-size: 0.875rem; line-height: 1.3; }
.tier-bill strong { font-weight: 600; }
.tier-dark .tier-bill { background: var(--p1); border-color: var(--p1); color: var(--ink); }
.tier-lab { margin: 4px 0 0; font-size: 1rem; }
.tier-lab strong { font-weight: 650; }
.tier-plus { margin: 4px 0 0; font-size: 1rem; font-weight: 600; }
.tier ul + .tier-lab { margin-block-start: -4px; }
.tiers-more { margin: 36px 0 0; }
.tiers-full .tier { gap: 14px; }
.tiers-full .tier ul { margin-block-end: 6px; }
.tiers-full .tier .btn { margin-block-start: auto; }
.tiers-full .tier-lab + .btn, .tiers-full .tier-lab ~ .btn { margin-block-start: 18px; }

/* Home: in their words, three sample notes */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 44px); align-items: start; padding-block-start: 16px; }
.notes .note { padding: clamp(26px, 3vw, 38px); }
.notes .note blockquote p { font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.22; }
.note-2 { background: var(--card); transform: rotate(1deg); margin-block-start: 36px; }
.note-3 { background: var(--p1-tint); transform: rotate(-0.6deg); }
.notes .note figcaption { margin-block-start: 18px; }

/* The add-on: Expo 2027 is never a fourth part, so it stays a dashed note with a plus */
.sec-addon { --sec: clamp(56px, 6vw, 88px); }
.addon-head .pt { --s: 2.5rem; }

/* ---------- Inner pages ---------- */
.head-solo { grid-template-columns: minmax(0, 1fr); }
.head-solo .head-text { max-inline-size: 60rem; }
.answer-lead { margin: 24px 0 0; font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.answer-lead + .answer { margin-block-start: 12px; }
.answer a { font-weight: 600; }
.steps li > .step-only { grid-column: 1 / -1; font-weight: 600; }
.steps li:has(> h3:only-child) h3 { grid-column: 1 / -1; }
.offer-text { margin: 0 0 14px; }
.offer-side .dots { font-size: 1rem; }
.table-wrap { inline-size: 100%; }
code { font: 0.86em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 0.06em 0.36em; border-radius: 6px; background: rgb(32 29 25 / 0.07); overflow-wrap: anywhere; }

/* A section that is one paragraph, or a few paragraphs and a numbered list */
.prose-card {
  max-inline-size: 54rem; padding: clamp(24px, 3vw, 40px); background: var(--card); border: 1.5px solid var(--ink);
  border-radius: 28px; box-shadow: 8px 8px 0 var(--p1); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55;
}
.prose-card p { margin: 0 0 14px; }
.prose-card p:last-child { margin-block-end: 0; }
.prose { max-inline-size: 62rem; }
.prose > p { margin: 0 0 1em; max-inline-size: 44rem; }
.num-list { list-style: none; counter-reset: q; margin: 0 0 1.4em; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.num-list li {
  counter-increment: q; position: relative; display: flex; align-items: center; min-block-size: 64px;
  padding-block: 14px; padding-inline: 64px 18px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px;
  font-size: 1.125rem; font-weight: 600; line-height: 1.3;
}
.num-list li::before {
  content: counter(q); position: absolute; inset-inline-start: 14px; inset-block-start: calc(50% - 18px);
  display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--paper); font-size: 1rem; font-weight: 650;
}
.num-list li:first-child::before { background: var(--p1); }

/* ---------- Guides hub ---------- */
.hub-row { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: start; }
.hub-h2 { font-size: clamp(28px, 2.9vw, 42px); }
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 28px); background: var(--card);
  border: 1.5px solid var(--ink); border-radius: 24px; transition: box-shadow .2s ease, transform .2s ease;
}
.gcard:hover, .gcard:focus-within { box-shadow: 6px 6px 0 var(--ink); transform: translate(-2px, -2px); }
.gcard h3 { margin: 0; font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 650; line-height: 1.2; letter-spacing: -0.015em; }
.gcard h3 a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.gcard h3 a:hover { text-decoration: underline; }
.gcard .arw { inline-size: 0.75em; block-size: 0.75em; flex: none; }
.gc-answer { margin: 0; font-size: 1rem; line-height: 1.5; }
.gc-date { margin: auto 0 0; padding-block-start: 6px; }
.sec-index .sec-head { margin-block-end: clamp(20px, 3vw, 36px); }
.closing-wrap-inner { --sec: clamp(64px, 7vw, 104px); --close-h2: clamp(38px, 4.6vw, 66px); }
.closing-wrap-inner .closing, .nf-card { align-items: start; }

/* ---------- The review date (IA 4.1, 4.3, 4.5), 2026-10-20: one quiet line in muted ink, with the dot of
   the hub cards, so the three places read as one mark. The last-checked line ends the main content,
   before the form; a guide also shows the date under its answer, and the hub on each guide card. ---------- */
/* one run of text (the date is a <time> inside it), so the dot hangs in the indent and a wrapped line
   starts under the text, not under the dot */
.reviewed, .gc-date { --dot-top: 0px; position: relative; padding-inline-start: 18px; font-size: 0.875rem; line-height: 1.45; color: var(--ink-mute); }
.reviewed::before, .gc-date::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--dot-top) + (1.45em - 10px) / 2);
  inline-size: 10px; block-size: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--p1);
}
.gc-date { --dot-top: 6px; }
.reviewed time, .gc-date time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reviewed { margin: 0; }
.reviewed-guide { margin-block-start: 20px; }
.sec-checked { --sec: clamp(32px, 3.6vw, 48px); }
.legal-end .reviewed { margin-block-start: 2.25em; }
.erase-sec .reviewed { margin-block-start: 26px; }

/* ---------- Legal: a calm long read; the numbers of the sections run on into the last block ---------- */
.legal-main { counter-reset: h2; }
.read-body.legal-body { counter-reset: none; }
.legal-head .head-text { max-inline-size: 54rem; }
.answer-legal { max-inline-size: 40rem; }
.read-legal { grid-template-columns: minmax(0, 36em) minmax(15rem, 17rem); }
.read-solo { display: flow-root; }
.read-solo .read-body { max-inline-size: 48rem; }
.read-solo .read-body > section > p, .read-solo + .legal-end .read-body > p { max-inline-size: 36em; }
.legal-body h3 { margin: 1.7em 0 0.5em; font-size: 1.1875em; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }
.legal-body > section > h2 + h3, .legal-body > section > h2 + p + h3 { margin-block-start: 1em; }
.legal-body p strong { font-weight: 650; }
.legal-body .table-wrap { margin: 0.4em 0 1.3em; }
.facts-legal { font-size: 0.9375rem; }
.facts-legal tbody th { inline-size: 26%; }
.addr { list-style: none; margin: 0.2em 0 1.2em; padding: 18px 22px; display: grid; gap: 4px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px; font-size: 0.9375em; line-height: 1.45; }
.addr li:first-child { font-weight: 650; }
.addr a { font-weight: 600; }
.legal-end {
  --sec: clamp(28px, 3vw, 44px); --h2fs: clamp(1.5rem, 1.1rem + 1vw, 1.875rem);
  --end-y: calc(var(--sec) + var(--h2fs) * 0.59 - 1px);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
}
.legal-end .read-body { max-inline-size: 36em; }
.legal-end .read-body > h2 { counter-increment: h2; margin-block-start: 0; font-size: var(--h2fs); }
.read-solo + .legal-end .read-body { max-inline-size: 48rem; }

/* Photo credits (RNDM-27): one card per photo, a small copy of the photo beside its record */
.credits { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.credit {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 16px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 20px;
}
.credit img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border: 1.5px solid var(--ink); border-radius: 12px; }
.legal-body .credit h3 { margin: 0 0 8px; font-size: 1.0625em; }
.credit-facts { margin: 0; display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.45; }
.credit-facts div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 10px; }
.credit-facts dt { color: var(--ink-mute); }
.credit-facts dd { margin: 0; overflow-wrap: anywhere; }

/* Cookie settings: the consent controls; a switch is a checkbox, so it works with no script */
.cc { margin: 0.2em 0 1.2em; padding: 6px 22px 22px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 var(--p1); font-size: 1rem; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 62px; border-block-end: 1px solid var(--line); }
.cc-name { font-weight: 650; font-size: 1.0625rem; }
.cc-state { padding: 4px 12px; border-radius: 999px; background: var(--p2-tint); border: 1.5px solid var(--ink); font-size: 0.875rem; font-weight: 600; }
.cc-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; font-size: 0.875rem; font-weight: 600; }
.cc-switch input { position: absolute; z-index: 1; inset-block-start: calc(50% - 15px); inset-inline-start: 0; inline-size: 54px; block-size: 30px; margin: 0; opacity: 0; cursor: pointer; }
.cc-track { position: relative; flex: none; inline-size: 54px; block-size: 30px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); transition: background-color .2s ease; }
.cc-track::before { content: ""; position: absolute; inset-block-start: 3.5px; inset-inline-start: 4px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--ink); transition: transform .2s ease; }
.cc-switch input:checked + .cc-track { background: var(--p1); }
.cc-switch input:checked + .cc-track::before { transform: translateX(24px); }
[dir="rtl"] .cc-switch input:checked + .cc-track::before { transform: translateX(-24px); }
.cc-switch input:focus-visible + .cc-track { outline: 3px solid var(--ink); outline-offset: 3px; }
.cc-on { display: none; }
.cc-switch:has(input:checked) .cc-on { display: inline; }
.cc-switch:has(input:checked) .cc-off { display: none; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 20px; }
.cc-actions .btn { min-block-size: 46px; padding: 8px 20px; font-size: 1rem; }
.cc-saved { margin: 14px 0 0; font-weight: 600; }

/* The consent banner (RNDM-30): a card at the bottom end corner of the view. It is not modal and it traps no focus.
   /consent.js removes its hidden attribute while no choice is stored, and sets --cb to its height plus 24 px, so
   that the end of the page scrolls clear of it and no focused link stays under it (WCAG 2.2 SC 2.4.11). */
.cb {
  position: fixed; z-index: 30; inset-inline: 16px; inset-block-end: 16px; max-inline-size: 31rem; margin-inline-start: auto;
  padding: 20px 22px 10px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px;
  box-shadow: 6px 6px 0 var(--ink); font-size: 0.9375rem; line-height: 1.45;
}
.cb[hidden] { display: none; }
.cb-title { margin: 0 0 6px; font-weight: 650; font-size: 1.0625rem; }
.cb-text { margin: 0 0 14px; }
.cb-actions { display: flex; gap: 10px; }
.cb-actions .btn { flex: 1 1 0; min-block-size: 46px; padding: 8px 18px; font-size: 1rem; }   /* Accept all (ink) and Reject all (paper): the same size, in one row */
/* Details (decision point 51): a native details element in one row with the two links. Open, it takes the full
   width, its facts stand under it, and the links move to the next row. A banner that grows past the view scrolls. */
.cb:has(.cb-details[open]) { max-block-size: calc(100dvh - 32px); overflow-y: auto; }
.cb-more { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 22px; margin-block-start: 4px; }
.cb-details[open] { flex-basis: 100%; }
.cb-details > summary { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; list-style: none; cursor: pointer; font-weight: 600; }
.cb-details > summary::-webkit-details-marker { display: none; }
.cb-details .chev { inline-size: 14px; block-size: 14px; transition: transform .2s ease; }
.cb-details[open] .chev { transform: rotate(180deg); }
.cb-facts { padding-block-end: 4px; }
.cb-facts p { margin: 0 0 8px; }
.cb-facts ul { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.cb-facts b { font-weight: 650; }
.cb-links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; font-weight: 600; }
.cb-links a { display: inline-flex; align-items: center; min-block-size: 44px; }
html:has(.cb:not([hidden])) { scroll-padding-block-end: var(--cb, 0px); }
body:has(> .cb:not([hidden])) { padding-block-end: var(--cb, 0px); }
@media (max-width: 560px) {
  .cb { inset-inline: 10px; inset-block-end: 10px; padding: 16px 16px 6px; box-shadow: 5px 5px 0 var(--ink); }
}
@media print {
  .cb { display: none; }
}

/* The consent gate (RNDM-34): it stands in the place of a part that needs one consent category, with a text that
   names the category and one Accept. /consent.js removes its hidden attribute while the category is off, and puts
   the part of its template in its place when the category is on. A frame of a part fills the width at 16:9. */
.cg { display: grid; justify-items: start; gap: 14px; margin: 0.4em 0 1.2em; padding: 20px 22px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; font-size: 1rem; }
.cg[hidden] { display: none; }
.cg-text { margin: 0; max-inline-size: 36em; }
.cg .btn { min-block-size: 46px; padding: 8px 22px; font-size: 1rem; }
.cg-part:focus-visible { border-radius: 16px; }
.cg-frame { display: block; inline-size: 100%; aspect-ratio: 16 / 9; margin: 0.4em 0 1.2em; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--card); }
@media (max-width: 560px) {
  .cg { padding: 16px; }
}

/* ---------- Delete my data: the ready state as the page, the other states as small cards under it ---------- */
.erase-head, .nf-head { --h1fs: clamp(40px, 5vw, 72px); --node-y: calc(var(--head-top) + var(--h1fs) * 0.55); }
.erase-head .h1, .nf-head .h1 { font-size: var(--h1fs); }
.erase-sec {
  --sec: clamp(32px, 4vw, 56px); --card-pad: clamp(24px, 3vw, 40px);
  --end-y: calc(var(--sec) + var(--card-pad) + clamp(1.125rem, 1.35vw, 1.3125rem) * 0.75);
  position: relative; display: flow-root; padding: var(--sec) var(--pad) 0;
}
.erase-card { max-inline-size: 46rem; padding: var(--card-pad); background: var(--card); border: 1.5px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--p1); }
.erase-card .answer { margin: 0 0 22px; }
.erase-sum { margin: 0 0 26px; border-block-start: 1px solid var(--line); }
.erase-sum div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px 20px; padding-block: 12px; border-block-end: 1px solid var(--line); }
.erase-sum dt { font-size: 0.875rem; font-weight: 600; color: var(--ink-mute); }
.erase-sum dd { margin: 0; font-size: 1rem; }
.erase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.erase-states { --sec: clamp(48px, 5vw, 72px); }
.states {
  list-style: none; margin: 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 18px;
  border-block-start: 1.5px dashed rgb(32 29 25 / 0.3);
}
.state { position: relative; display: flex; flex-direction: column; align-items: start; gap: 14px; padding: 60px 22px 22px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; font-size: 1rem; line-height: 1.5; }
.state p { margin: 0; }
.state .btn { min-block-size: 46px; padding: 8px 20px; font-size: 1rem; }
.state-icon { position: absolute; inset-block-start: 18px; inset-inline-start: 22px; inline-size: 28px; block-size: 28px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper) center / 16px no-repeat; }
.state-done .state-icon { background-color: var(--p2-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23201d19' stroke-width='1.8'/%3E%3C/svg%3E"); }
.state-clock .state-icon { background-color: var(--p1-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5V8l2.4 1.6' fill='none' stroke='%23201d19' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.state-fail .state-icon { background-color: var(--p4-tint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23201d19' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.state-spin .state-icon { background-color: var(--p3-tint); }
.btn.is-busy { cursor: progress; }
.btn.is-busy:hover { transform: none; box-shadow: none; }
.spinner { flex: none; inline-size: 16px; block-size: 16px; border-radius: 50%; border: 2px solid rgb(246 239 225 / 0.35); border-block-start-color: var(--paper); animation: spin 1s linear 4; }   /* four turns, 4 s (WCAG 2.2.2); the status text stays */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 404 ---------- */
.nf-wrap {
  --sec: clamp(32px, 4vw, 56px); --card-pad: clamp(28px, 4vw, 56px); --nf-fs: clamp(1.25rem, 1.8vw, 1.625rem);
  --end-y: calc(var(--sec) + var(--card-pad) + var(--nf-fs) * 0.7);
}
.nf-card { grid-template-columns: minmax(0, 1fr) minmax(0, 180px); }
.nf-card .map-fig { max-inline-size: 180px; }
.nf-card .nf-lead { margin: 0 0 28px; max-inline-size: 30ch; font-size: var(--nf-fs); line-height: 1.4; color: var(--paper); }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- Forms: the "Which one?" field shows when the visitor picks "AI assistant" ---------- */
.field-ai { display: none; }
.form:has(#f-source option[value="ai"]:checked) .field-ai { display: grid; }
.form .captcha { justify-self: start; }

/* ---------- What we do: the Expo 2027 add-on on the line ---------- */
.svc-addon { display: block; padding-block: 22px 26px; border-block-start: 1.5px dashed var(--ink); }
.svc-addon .addon-text { margin: 0; max-inline-size: 52rem; color: var(--ink-mute); font-size: 1.0625rem; }
.svc-addon .addon-text strong { color: var(--ink); font-weight: 650; }
.svc-addon .addon-text a { color: var(--ink); font-weight: 600; }
.addon-mark { position: absolute; z-index: 1; inset-inline-start: calc(var(--lx) - var(--indent) - 1.5rem); inset-block-start: 22px; display: inline-flex; align-items: center; }
.addon-mark .addon-plus { position: absolute; inset-inline-end: calc(100% + 4px); font-size: 1.375rem; font-weight: 500; line-height: 1; }
.addon-mark .pt { box-shadow: 0 0 0 5px var(--paper); }

/* ---------- Tiers: the add-ons ---------- */
.addon-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.addon-card { padding: 20px 22px 22px; border: 1.5px dashed var(--ink); border-radius: 24px; background: rgb(255 250 241 / 0.7); }
.addon-card p { margin: 0; font-size: 1rem; line-height: 1.5; }
.addon-card .addon-name { display: flex; align-items: center; gap: 8px; margin-block-end: 10px; font-size: 1.125rem; line-height: 1.25; }
.addon-name .addon-plus { font-size: 1.375rem; }
.addon-name .gl { inline-size: 16px; block-size: 16px; }
.addon-name strong { font-weight: 650; }

/* ---------- About ---------- */
.who { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-wrap: wrap; gap: 18px 12px; }
.who .tag { white-space: normal; font-size: clamp(1rem, 1.3vw, 1.1875rem); padding-inline: 20px; }
.a1 { --c: var(--p1-tint); --r: -1.5deg; } .a2 { --c: var(--card); --r: 1deg; --y: 6px; } .a3 { --c: var(--p1-tint); --r: -0.6deg; --y: -3px; }
.big-text { max-inline-size: 52rem; font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.45; letter-spacing: -0.01em; }
.big-text p { margin: 0; }
.big-text a { font-weight: 600; }
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.promise { position: relative; padding: 64px 24px 26px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; }
.promise::before {
  content: ""; position: absolute; inset-block-start: 22px; inset-inline-start: 24px; inline-size: 26px; block-size: 26px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--p1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23201d19' stroke-width='1.8'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.promise { box-shadow: 4px 4px 0 var(--ink); }
.promise h3 { margin: 0 0 8px; font-size: clamp(1.1875rem, 1.6vw, 1.375rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.promise p { margin: 0; font-size: 1rem; line-height: 1.5; }
.details-sec.sec .h2-page { margin-block-end: clamp(24px, 3vw, 36px); }
.details-sec.sec .biz { max-inline-size: 54rem; }

/* ---------- Expo 2027 ---------- */
.kicker-expo { padding-inline-start: 10px; }
.kicker-expo .addon-plus { font-size: 1.125rem; }
.kicker-expo .pt-4 { --s: 30px; margin-block: 0; }
.dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dates li { display: grid; gap: 6px; align-content: start; padding: 22px 24px 24px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 24px; }
.dates li:last-child { background: var(--p4-tint); }
.date { font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.date-what { font-size: 1.0625rem; }
.checks-expo { columns: 3 16rem; }
.sec-after { margin: 30px 0 0; max-inline-size: 42rem; }
.sec-after a { font-weight: 600; }

/* ---------- Narrower screens, for the components above ---------- */
@media (max-width: 1100px) {
  .reasons { grid-template-columns: minmax(0, 1fr); max-inline-size: 640px; }
  .notes { grid-template-columns: minmax(0, 1fr); max-inline-size: 640px; }
  .note-2 { margin-block-start: 0; }
  .addon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-list a { min-block-size: 44px; }   /* HD-3 */
}
@media (max-width: 1000px) {
  .hub-row { grid-template-columns: minmax(0, 1fr); }
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dates { grid-template-columns: minmax(0, 1fr); max-inline-size: 560px; }
  .read-legal { grid-template-columns: minmax(0, 1fr); }
  .legal-end .read-body, .read-legal .read-body { max-inline-size: 36em; }
}
@media (max-width: 900px) {
  .num-list { grid-template-columns: minmax(0, 1fr); }
  .nf-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .facts-legal tbody th { inline-size: auto; }
  .gcards, .addon-cards, .promises { grid-template-columns: minmax(0, 1fr); }
  .cc-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .hero-v2 { --h1fs: 12.2vw; --text-top: 0px; }
  .lang-switch { display: none; }
  .svc-item { padding: 14px 16px 16px; }
  .reason { padding: 30px 22px 24px; }
  .notes .note { padding: 26px 22px; }
  .tiers-more .btn, .sec-after .btn { inline-size: 100%; justify-content: space-between; }
  .erase-head, .nf-head { --h1fs: clamp(27px, 8.2vw, 32px); }
  .erase-card { box-shadow: 5px 5px 0 var(--p1); }
  .erase-sum div { grid-template-columns: minmax(0, 1fr); }
  .nf-links .btn { flex: 1 1 100%; justify-content: space-between; }
  .prose-card { box-shadow: 5px 5px 0 var(--p1); }
  .cc { padding-inline: 16px; box-shadow: 5px 5px 0 var(--p1); }
  .who .tag { padding-inline: 14px 16px; }
  .addon-mark { inset-inline-start: calc(var(--lx) - var(--indent) - 1.5rem); }
  /* TH-2: the "+" stands above the 04 badge, clear of the screen edge */
  .addon-mark .addon-plus { inset-inline-end: auto; inset-inline-start: 50%; inset-block-end: calc(100% + 2px); transform: translateX(-50%); padding-inline: 2px; background: var(--paper); }
  [dir="rtl"] .addon-mark .addon-plus { transform: translateX(50%); }
  .legal-end .read-body > h2 { padding-inline-start: 6px; }   /* TH-1: the end node clear of the number */
  .facts-legal { font-size: 1rem; }   /* LG-2 */
  .credit { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .credit-facts div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .credit-facts a { display: inline-block; padding-block: 11px; margin-block: -11px; }   /* a 44 px target, as CD-3 */
}
@media print {
  .lang-switch, .erase-states { display: none; }
}

/* =====================================================================================
   The additions of the Astro port (RNDM-37, 2026-10-21). The build writes them after
   src/assets/styles.css, which stays the file of the design work.
   ===================================================================================== */

/* The photos come from astro:assets as <picture> with an AVIF source and a WebP <img>. The picture makes no box,
   so the <img> keeps its place in the grid and the flex boxes of the photo slots, and the <source> makes none either,
   or it would take a cell of the grid of .credit and a row of .head-photo and .menu-photo. */
picture { display: contents; }
picture > source { display: none; }

/* View transitions between the pages (decision point 51): the browser's cross-document view transitions, with no
   script, so every page stays a static page and /consent.js and /form.js run on each load as before. The header
   stays in place while the page under it changes, and the menu comes down over the page and goes up again. With
   prefers-reduced-motion: reduce, or in a browser without the feature, a link loads the next page as before. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .bar:not(.menu-bar) { view-transition-name: rndm-bar; }
  .overlay { view-transition-name: rndm-menu; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }
  ::view-transition-new(rndm-menu) { animation: rndm-menu-in 0.3s ease-out both; }
  ::view-transition-old(rndm-menu) { animation: rndm-menu-out 0.25s ease-in both; }
  @keyframes rndm-menu-in { from { opacity: 0; transform: translateY(-3%); } }
  @keyframes rndm-menu-out { to { opacity: 0; transform: translateY(-3%); } }
}