/* Voronda: What we do (redesigned 2026-11-01).

   What we do loads this file, and so do the four Use cases pages (which share its boxes, tabs,
   sector cards and demo panel); always after tokens, base, site and app. It holds the parts this page has that no other page has: the "what we build" lead,
   the three modes with their skills, the four steps as boxes of different sizes, and the
   comparison, and this page's own free demo panel. Everything else is the site's own: the centred opening (.intro--center), the red
   button with the petal, the V notch, the tab list (.tour__*), the app window that opens the demo
   (.peek, .mini) and the closing panel. Square corners, hairlines, no shadows, as everywhere. */

/* ---------- what we build: one heading, one line, where it runs, the app to try ---------- */
.wm-lead { display: grid; gap: var(--s-7) var(--s-8); align-items: center; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); }
.wm-runs { margin-top: var(--s-6); gap: var(--s-3); font-weight: var(--w-strong); }

/* ---------- who we build for: schools large on the left, the other three as rows ----------
   Each box links to its Use cases page and carries the site's own drawing for that sector. */
.wm-who { display: grid; gap: var(--s-4); margin: var(--s-7) 0 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr); }
.wm-who > li:first-child { grid-row: 1 / span 3; }
.wm-who--3 > li:first-child { grid-row: 1 / span 2; }
.wm-who__card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: center; height: 100%; padding: var(--s-5); border: var(--hairline); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease-out-quart); }
.wm-who__card img { grid-row: 1 / span 3; width: 100%; height: auto; background: var(--c-blush); }
.wm-who__t { font-size: var(--t-h3); font-weight: var(--w-display); letter-spacing: var(--track-h); line-height: 1.15; }
.wm-who__p { color: var(--ink-muted); }
.wm-who__go { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--w-strong); }
.wm-who > li:first-child .wm-who__card { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-4); padding: var(--s-6); background: var(--c-blush); }
.wm-who > li:first-child .wm-who__card img { grid-row: auto; max-width: 26rem; background: transparent; }
.wm-who > li:first-child .wm-who__t { font-size: var(--t-h2); }
.wm-who > li:first-child .wm-who__p { font-size: var(--t-lead); line-height: 1.45; color: var(--ink); max-width: 30ch; }
.wm-who__card:hover, .wm-who__card:focus-visible { border-color: var(--accent); }
.wm-who__card:hover .petal, .wm-who__card:focus-visible .petal { transform: rotate(14deg); }

/* ---------- how you can use AI: three ways, one at a time ----------
   The tab says what you do; the mode's own name sits small above it. */
.wm-modes { margin-top: var(--s-6); }
.wm-mode { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s-1); }
.wm-stage { border-top: var(--hairline); padding-top: var(--s-6); }
.wm-panel[hidden] { display: none; }
.wm-panel__h { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint-text); }
.wm-panel__p { max-width: 46ch; margin-bottom: var(--s-6); font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.wm-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.wm-chip { padding: var(--s-3) var(--s-4); border: var(--hairline); font-size: var(--t-small); font-weight: var(--w-ui); line-height: 1.2; color: var(--ink); }
.wm-chip--more { border-style: dashed; color: var(--ink-muted); }

/* ---------- how we work: four boxes, two sizes, 7 + 5 over 5 + 7 ----------
   Each box its own light tint from the palette (petal, white, blush, warm grey) and a line icon in
   crimson. The free first step gets a big box and the red rule with the V at its start. All the
   text is ink, not grey: this is the part people read to decide. Ink on every tint is 9:1 or more. */
.wm-steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.wm-step { position: relative; display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); background: var(--tint); color: var(--ink); }
.wm-step:nth-child(4n+1) { --tint: var(--c-blush-2); }
.wm-step:nth-child(4n+2) { --tint: oklch(99.4% 0.002 17); outline: var(--hairline-soft); outline-offset: calc(var(--hair) * -1); }
.wm-step:nth-child(4n+3) { --tint: var(--c-blush); }
.wm-step:nth-child(4n+4) { --tint: oklch(93.6% 0.007 60); }
.wm-step__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.wm-step__ico { flex: none; width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wm-step:nth-child(4n+1) .wm-step__ico, .wm-step:nth-child(4n+4) .wm-step__ico { width: 3.25rem; height: 3.25rem; }
.wm-step:nth-child(4n+1), .wm-step:nth-child(4n+4) { grid-column: span 7; }
.wm-step:nth-child(4n+2), .wm-step:nth-child(4n+3) { grid-column: span 5; }
.wm-step__n { font-size: var(--t-h1); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: 1; color: var(--ink); }
.wm-step h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: var(--w-display); letter-spacing: var(--track-h); line-height: 1.12; max-width: 18ch; text-wrap: balance; }
.wm-step p { max-width: 44ch; color: var(--ink); }
.wm-step:nth-child(4n+1) h3, .wm-step:nth-child(4n+4) h3 { font-size: var(--t-h2); }
.wm-step:nth-child(4n+1) p, .wm-step:nth-child(4n+4) p { font-size: var(--t-lead); line-height: 1.5; }
.wm-step:nth-child(4n+1) .wm-step__n, .wm-step:nth-child(4n+4) .wm-step__n { font-size: var(--t-display); line-height: var(--lh-display); }
/* On the Use cases pages the boxes are examples: a small red label instead of a number, and for
   companies two short lines instead of a paragraph. Any number of boxes keeps the 7 + 5 / 5 + 7 rhythm. */
.wm-step__k { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-text); }
.wm-step__list { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-lead); font-weight: var(--w-ui); }
.wm-step__list li { padding-top: var(--s-2); border-top: var(--hairline-soft); }
.wm-step { padding-top: var(--s-7); }
/* The red rule with the V at its start sits on the box in use. Click a box (a button laid over
   the whole box, js/wwd.js) and it moves there, drawn from the left. */
.wm-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-out-expo); }
.wm-step::after { content: ""; position: absolute; top: 3px; left: 0; width: var(--v-tick); height: calc(var(--v-tick) * var(--v-depth)); background: var(--accent); clip-path: var(--v-cut); opacity: 0; transition: opacity 200ms var(--ease-out-quart); }
.wm-step.is-on::before { transform: none; }
.wm-step.is-on::after { opacity: 1; }
.wm-step__hit { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.wm-step__hit:focus-visible { outline: var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .wm-step:not(.is-on):hover::before { transform: scaleX(0.18); }
}
html:not(.js) .wm-step__hit { display: none; }

/* ---------- five things it will never do ---------- */
.wm-never { display: grid; gap: var(--s-6) var(--s-9); align-items: start; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
.wm-never__list { margin: 0; padding: 0; list-style: none; border-top: var(--hairline); }
.wm-never__list li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: var(--s-4); align-items: center; padding-block: var(--s-5); border-bottom: var(--hairline-soft); font-size: var(--t-lead); font-weight: var(--w-ui); line-height: 1.35; }
.wm-x { position: relative; width: 1.25rem; height: 1.25rem; }
.wm-x::before, .wm-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 2px; background: var(--accent); }
.wm-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.wm-x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- the comparison ---------- */
.wm-vs { width: 100%; margin-top: var(--s-7); border-collapse: collapse; table-layout: fixed; }
.wm-vs th, .wm-vs td { padding: var(--s-5) var(--s-4); text-align: left; vertical-align: middle; border-top: var(--hairline-soft); }
.wm-vs thead th { border-top: 0; padding-block: var(--s-4); font-weight: var(--w-strong); color: var(--ink-muted); }
.wm-vs thead th:first-child { width: 46%; }
.wm-vs tbody th { font-size: var(--t-body); font-weight: var(--w-strong); }
.wm-vs .is-us { background: var(--bg-raised); }
.wm-vs thead .is-us { border-top: 3px solid var(--accent); font-size: var(--t-h3); font-weight: var(--w-display); letter-spacing: var(--track-h); color: var(--ink); }
.wm-vs tbody .is-us { border-top-color: var(--rule); }
.wm-vs .petal { width: 0.8rem; height: 1.3rem; }
.wm-no { display: inline-block; width: 1.1rem; height: 0; border-top: 2px solid var(--ink-faint); vertical-align: middle; }

/* ---------- the free demo, said for this page ----------
   The site's oxblood panel and V notch; inside, the ask on the left and what happens next on the
   right, three numbered lines on the panel's own hairlines. */
.wm-demo__grid { display: grid; gap: var(--s-7) var(--s-9); align-items: end; grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr); }
.wm-demo__main { display: grid; gap: var(--s-5); justify-items: start; }
.wm-demo__h { font-size: var(--t-h1); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.wm-demo__p { max-width: 40ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.wm-demo__label { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-muted); }
.wm-demo__list { margin: var(--s-4) 0 0; padding: 0; list-style: none; border-top: var(--hairline); }
.wm-demo__list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding-block: var(--s-4); border-bottom: var(--hairline-soft); font-weight: var(--w-ui); }
.wm-demo__n { font-weight: var(--w-display); color: var(--accent); }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .wm-stage { order: 5; margin-top: var(--s-6); }
}
@media (max-width: 900px) {
  .wm-lead, .wm-demo__grid { grid-template-columns: minmax(0, 1fr); }
  .wm-step:nth-child(4n+1), .wm-step:nth-child(4n+2), .wm-step:nth-child(4n+3), .wm-step:nth-child(4n+4) { grid-column: 1 / -1; }
  .wm-step { padding: var(--s-6) var(--s-5) var(--s-5); }
  .wm-never, .wm-who { grid-template-columns: minmax(0, 1fr); }
  .wm-who > li:first-child { grid-row: auto; }
}
@media (max-width: 640px) {
  .wm-vs, .wm-vs tbody, .wm-vs tr, .wm-vs th, .wm-vs td { display: block; }
  .wm-vs thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wm-vs tr { padding-block: var(--s-3); border-top: var(--hairline); }
  .wm-vs th, .wm-vs td { padding: var(--s-2) 0; border: 0; }
  .wm-vs td { display: grid; grid-template-columns: 8.5rem 1.3rem; align-items: center; gap: var(--s-3); }
  .wm-vs td::before { content: attr(data-label); font-size: var(--t-small); color: var(--ink-muted); }
  .wm-vs .is-us { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-step::before, .wm-step::after { transition: none; }
}

/* ---------- the small loops (2026-11-02) ----------
   Small documents glide in and land in one place, then it starts again: the app window under
   "What we build for you", the four step icons, and one scene on each Use cases page (the scenes
   themselves are in css/industry.css). All CSS; js/loops.js only pauses a loop (.is-off) while it is
   off screen. A card is placed where it lands (--x, --y) and flies in from (--sx, --sy) to wait at
   (--hx, --hy), both measured from there, in its stage's container units (cqw) so a loop scales with
   its box. The base rules are the still frame shown with reduced motion. Only transform and opacity
   move. The cards carry no words: a line drawing says what each one is. */
.lp { position: relative; overflow: hidden; container-type: inline-size; pointer-events: none; }
.lp-doc { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: block; width: var(--w, 9cqw); aspect-ratio: var(--ar, 3 / 4);
  overflow: hidden; translate: -50% -50%; transform: translate(var(--hx, 0px), var(--hy, 0px)) rotate(var(--hr, 0deg));
  border-radius: 0.5cqw; background: #fff;
  box-shadow: 0 0 0 1px oklch(31.8% 0.005 67.7 / 0.14), 0 0.8cqw 1.6cqw -0.8cqw oklch(31.8% 0.005 67.7 / 0.4); }
.lp-doc svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--c-charcoal); stroke-width: 0.9;
  stroke-linecap: round; stroke-linejoin: round; }
.lp-doc .lp-q { stroke: oklch(31.8% 0.005 67.7 / 0.4); }
.lp-doc .lp-r { stroke: var(--c-red); }
.lp-doc .lp-f { fill: var(--c-red); stroke: none; }
.lp-doc--mail { --w: 12cqw; --ar: 7 / 5; }
.lp-doc--scan { background: oklch(96.5% 0.012 70); }
.lp-doc--cal, .lp-doc--note { --w: 10cqw; --ar: 1; }
.lp-doc--note { background: var(--c-blush-2); }
.lp-doc--slip { --w: 13cqw; --ar: 3 / 2; }
.lp-doc--plan { --w: 11cqw; --ar: 6 / 5; }
.lp-doc--id { --w: 14cqw; --ar: 31 / 20; }
/* Held while off screen. !important because each loop sets its animation with the shorthand. */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* In, wait, drop: the card glides in from the side, waits with a small drift, then drops into its
   place, shrinking as it goes. It lands at 49% of the loop. */
@keyframes lp-fly {
  0% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  6% { opacity: 1; }
  16% { transform: translate(var(--hx), var(--hy)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: ease-in-out; }
  40% { opacity: 1; transform: translate(var(--hx), calc(var(--hy) - 0.6cqw)) rotate(var(--hr, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  45% { opacity: 1; }
  49%, 100% { opacity: 0; transform: translate(0px, 0px) rotate(0deg) scale(0.35); }
}

/* What we build: an email, a PDF, a scanned letter and an invite drop into the app, each into a
   row of its sidebar; then the greeting appears. 8 s. Still frame: the app as it was, no cards. */
.mini--in .lp-in { position: absolute; inset: 0; z-index: 2; }
.mini--in .lp-doc { opacity: 0; }
.mini--in .lp-in1 { --x: 20.3cqw; --y: 23.2cqw; --sx: -32cqw; --sy: 1cqw; --hx: 29.7cqw; --hy: -4.2cqw; --sr: -7deg; --hr: -2deg; }
.mini--in .lp-in2 { --x: 20.3cqw; --y: 29.2cqw; --sx: 92cqw; --sy: -15cqw; --hx: 51.7cqw; --hy: -11.2cqw; --sr: 7deg; --hr: 3deg; }
.mini--in .lp-in3 { --x: 20.3cqw; --y: 35.2cqw; --sx: -32cqw; --sy: 7cqw; --hx: 31.7cqw; --hy: -2.2cqw; --sr: -5deg; --hr: 2deg; }
.mini--in .lp-in4 { --x: 20.3cqw; --y: 41.2cqw; --sx: 92cqw; --sy: 3cqw; --hx: 53.7cqw; --hy: -7.2cqw; --sr: 6deg; --hr: -2deg; }
@keyframes lp-row { 0%, 45% { opacity: 0.25; } 50%, 94% { opacity: 1; } 99%, 100% { opacity: 0.25; } }
@keyframes lp-hello { 0%, 64% { opacity: 0; transform: translateY(1.5cqw); } 70%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }

/* How we work: the icons move a little. Typing dots, then the message; the tick; the click; the
   server's lights. Still frame: the icons as drawn. */
.wm-step__ico { overflow: visible; }
.wm-ico__dot, .wm-ico__ring { opacity: 0; }
.wm-ico__ring { stroke-width: 1; }
.wm-ico__tick, .wm-ico__ring { transform-box: fill-box; transform-origin: center; }
.wm-ico__ptr { transform-box: fill-box; transform-origin: 0 0; }
@keyframes wm-dot { 0% { opacity: 0.25; } 8% { opacity: 1; } 16% { opacity: 0.25; } 24% { opacity: 1; } 32% { opacity: 0.25; } 40% { opacity: 1; } 48% { opacity: 0.25; } 52%, 100% { opacity: 0; } }
@keyframes wm-txt { 0%, 54% { opacity: 0; } 60%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes wm-tick { 0%, 34% { opacity: 0; transform: scale(0.4); } 42% { opacity: 1; transform: scale(1.1); } 48%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes wm-ptr { 0% { transform: translate(2.5px, 2.5px) scale(1); } 30% { transform: translate(0px, 0px) scale(1); } 36% { transform: translate(0px, 0px) scale(0.86); } 44%, 78% { transform: translate(0px, 0px) scale(1); } 100% { transform: translate(2.5px, 2.5px) scale(1); } }
@keyframes wm-ring { 0%, 35% { opacity: 0; transform: scale(0.3); } 38% { opacity: 1; } 64%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes wm-led { 0%, 20%, 54%, 100% { opacity: 1; } 10%, 62% { opacity: 0.15; } 70% { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .mini--in .lp-doc { animation: lp-fly 8s linear infinite both; }
  .mini--in .lp-in2 { animation-delay: 450ms; }
  .mini--in .lp-in3 { animation-delay: 900ms; }
  .mini--in .lp-in4 { animation-delay: 1350ms; }
  .mini--in .mini__row { animation: lp-row 8s linear infinite backwards; }
  .mini--in .mini__row:nth-of-type(2) { animation-delay: 450ms; }
  .mini--in .mini__row:nth-of-type(3) { animation-delay: 900ms; }
  .mini--in .mini__row:nth-of-type(4) { animation-delay: 1350ms; }
  .mini--in .mini__hello { animation: lp-hello 8s ease-out infinite; }

  .wm-ico__txt { animation: wm-txt 4.8s linear infinite; }
  .wm-ico__dot { animation: wm-dot 4.8s linear infinite backwards; }
  .wm-ico__dot--2 { animation-delay: 160ms; }
  .wm-ico__dot--3 { animation-delay: 320ms; }
  .wm-ico__tick { animation: wm-tick 4.8s ease-out infinite; }
  .wm-ico__ptr { animation: wm-ptr 3.6s ease-in-out infinite; }
  .wm-ico__ring { animation: wm-ring 3.6s ease-out infinite; }
  .wm-ico__led { animation: wm-led 3.2s linear infinite; }
  .wm-ico__led--2 { animation-delay: -1.3s; }
}

/* The comparison with words in both columns, the list sections and their links. */
.wm-vs--text thead th:first-child { width: 26%; }
.wm-vs--text th, .wm-vs--text td { vertical-align: top; }
.wm-vs--text td { font-size: var(--t-small); line-height: 1.5; }
.wm-never__list .petal { width: 0.8rem; height: 1.3rem; }
.wm-list { margin-top: var(--s-6); max-width: 48rem; }
.wm-more { margin-top: var(--s-6); }
@media (max-width: 640px) {
  .wm-vs--text td { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: start; }
}

/* What it costs: what is fixed, and what is quoted separately. */
.wm-cost { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-3); max-width: 52rem; margin-top: var(--s-6); }
.wm-cost__part { display: grid; align-content: end; gap: var(--s-2); min-height: 9rem; padding: var(--s-5); }
.wm-cost__part--fixed { background: var(--c-red); color: var(--c-white); }
.wm-cost__part--open { border: 2px dashed var(--ink-muted); }
.wm-cost__k { font-size: var(--t-label); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; }
.wm-cost__part--open .wm-cost__k { color: var(--ink-muted); }
.wm-cost__v { font-size: var(--t-h3); font-weight: var(--w-display); letter-spacing: var(--track-h); line-height: 1.15; }

/* Who is behind Voronda and What it is not, side by side. */
.wm-duo { display: grid; gap: var(--s-8); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.wm-limits { margin-top: var(--s-6); }

/* Quiet outline petals at the edges of some sections. */
.wm-has-deco { position: relative; overflow: clip; }
.wm-has-deco > .shell { position: relative; z-index: 1; }
.wm-deco { position: absolute; z-index: 0; width: 7rem; height: 14rem; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; opacity: 0.32; pointer-events: none; }
.wm-deco--3 { top: 2.5rem; right: 4rem; width: 5rem; height: 10rem; transform: rotate(-14deg); }
.wm-deco--4 { top: 4rem; right: 3rem; transform: rotate(160deg); }
.wm-deco--5 { bottom: 2.5rem; left: 3rem; transform: rotate(196deg); }

@media (max-width: 900px) {
  .wm-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wm-cost { grid-template-columns: minmax(0, 1fr); }
  .wm-cost__part { min-height: 6.5rem; }
  .wm-deco { width: 4rem; height: 8rem; opacity: 0.22; }
}

/* One icon set: smooth 24 px glyphs, rounded strokes of one weight, sitting in square tiles. */
.wm-ico { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wm-ico--lg { width: 2rem; height: 2rem; }
.wm-tile { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none; background: var(--bg-raised); color: var(--accent); box-shadow: inset 0 0 0 1px var(--rule); }
.wm-tile--sm { width: 2.25rem; height: 2.25rem; }
.wm-tile--sm .wm-ico { width: 1.25rem; height: 1.25rem; }

/* Your data: six facts, each with its icon. */
.wm-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.wm-feat__cell { display: grid; align-content: start; gap: var(--s-4); padding-top: var(--s-5); border-top: var(--hairline); }
.wm-feat__cell p { margin: 0; max-width: 34ch; line-height: 1.5; }

/* What it costs: icons in the two parts. */
.wm-cost__part .wm-ico { margin-bottom: auto; }
.wm-cost__part--fixed .wm-ico { color: var(--c-white); }
.wm-cost__part--open .wm-ico { color: var(--ink-muted); }
.wm-cost__part { align-content: stretch; grid-template-rows: 1fr auto auto; }

/* Who is behind Voronda: the two places. What it is not: one icon per line. */
.wm-limits li { grid-template-columns: 2.25rem minmax(0, 1fr); }

@media (max-width: 900px) {
  .wm-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wm-feat { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* Who is behind Voronda: a dotted map of Europe that fades out past Berlin and Madrid.
   As it scrolls in, it settles from close up back to the air view. */
.wm-map { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 482 / 480; margin-top: var(--s-5); overflow: clip; }
.wm-map img { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 48%;
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 48%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 72% at 50% 48%, #000 55%, transparent 100%);
  transition: transform 1.8s var(--ease-out-quart); }
.js .wm-map:not(.is-in) img { transform: scale(1.14); }
.wm-map__pin { position: absolute; display: flex; align-items: center; gap: var(--s-2); transform: translate(-0.45rem, -50%); font-size: var(--t-small); font-weight: var(--w-strong); }
.wm-map__pin::before { content: ""; flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0.35rem rgb(198 6 5 / 0.18); }
.wm-map__pin span { padding: 0.25rem 0.55rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--rule); }
.wm-map__pin--ber { left: 78%; top: 17.4%; flex-direction: row-reverse; transform: translate(calc(-100% + 0.45rem), -50%); }
.wm-map__pin--mad { left: 21%; top: 77.9%; }
@media (prefers-reduced-motion: reduce) { .wm-map img { transition: none; } .js .wm-map:not(.is-in) img { transform: none; } }

/* The comparison folds to its first half behind a fade; the button opens the rest. Without scripts it all shows. */
.wm-vs-wrap { position: relative; }
.wm-vs-wrap.is-collapsed tbody tr:nth-child(n+7) { display: none; }
.wm-vs-wrap.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; }
.wm-vs-more { margin-top: var(--s-5); }
.wm-more--row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }