/* SKEN — the sorich.hr v3 design system, as a small verbatim kit for a separate internal web tool.
 *
 * WHAT THIS IS
 *   The stylesheet that makes sorich.hr look the way it does, cut down to what an internal page
 *   needs: tokens, the light and dark role sets, base elements, layout wrappers, type, the header and
 *   its phone sheet, buttons, chips / tags / tabs, form fields, cards and panels, tables and rows,
 *   notes, lists, FAQ rows, the icon tile, the footer and the press layer (hover / press / focus).
 *   Class names are the site's (s3-...), unchanged. The markup that goes with it is MARKUP.md; the
 *   wordmark is wordmark.svg (inline it; see MARKUP.md); fonts/ holds the four self-hosted files;
 *   modul-glyphs.json holds the site's icon paths.
 *
 * SOURCE (read-only), copied 2026-10-09 from brochure-cms/src/components/sorich-v3/:
 *   assets/site.css            the base stylesheet (fonts, tokens, roles, base, layout, type, buttons,
 *                              chips, surfaces, forms, tables, prose ...)
 *   assets/css/10-modul.css    the icon tile
 *   assets/css/20-chrome.css   the header, its nav, the phone sheet
 *   assets/css/40-footer.css   the footer
 *   assets/css/70-work.css     the filter box (chips + count line)
 *   assets/css/75-pages.css    tabs, product card, small head, glance list, state module
 *   assets/css/90-press.css    the press layer: every hover, press and focus answer
 *   src/lib/sorich-v3/chrome.ts   `NOSCRIPT` (see adaptation 2)
 *   The site serves site.css followed by css/*.css in filename order as ONE file. This kit keeps that
 *   order, so the cascade is the site's. Every run of copied blocks is preceded by a marker
 *   "[kit] <file> L<from>-<to>" naming its place in the source; every other comment in this file is the
 *   source's own, copied with its block. Nothing outside a [kit] marker was written for this file.
 *
 * COPIED VERBATIM. RE-COPY, DO NOT HAND-EDIT: `node assets/sken/rebuild.mjs` writes this file, and
 *   `node assets/sken/rebuild.mjs --check` proves it is current. Line endings are LF (the source working
 *   copy is CRLF); nothing else about a copied block changed, except where a [kit] ADAPTED marker says so.
 *
 * THE ADAPTATIONS. The tool has NO JavaScript and no theme toggle, so two things the site does with a
 *   script are done here with the same text in a different place:
 *   1. THE THEME. The site switches with `:root[data-theme="dark"]`, which only its script sets (light is
 *      the default, the OS preference is not followed). Here the DARK role set sits inside
 *      `@media (prefers-color-scheme: dark) { :root { ... } }`, so the tool follows the OS. Every other
 *      rule that names the attribute follows the same mapping: the rules for the DARK theme are wrapped in
 *      that media query with `:root[data-theme="dark"]` written as `:root`; the rules that are for the
 *      LIGHT theme only (`html:not([data-theme="dark"]) ...`: the statement's mist ground, and the paper
 *      card on a statement) are wrapped in `@media not all and (prefers-color-scheme: dark)` with their
 *      selectors untouched (the :not() is then always true; the media query is the guard).
 *      The extra selectors of the two role sets that serve parts that are not in the kit (a card's back,
 *      a logo's ground, the inverse surface, the lightbox) are left out of those two rules.
 *   2. THE SCRIPTING-OFF STATE OF THE CHROME. chrome.ts ships `NOSCRIPT` inside <noscript>: with scripting
 *      off the phone sheet opens in the page's flow and the burger goes. The kit has no scripts, so the
 *      same text is applied always (last section of this file).
 *
 * LEFT OUT (needs JS, or is not an internal-page part): the QR art and its motion, the printed card, the
 *   map, the work gallery and desks, the home / product / order-shell page parts, the 3D phone and mocks,
 *   reveal and scroll motion, the theme wipe and the page cut, the share popover, toast, dialogs, the
 *   floating button, the split WhatsApp button and the header's mega menus, the reading line, the
 *   quantity stepper, print rules. MARKUP.md lists what the tool may want that sorich.hr does not have.
 *
 * Made by sorich.hr (https://sorich.hr/#top)
 */

/* [kit] ======== 0 · THE SOURCE'S OWN HEADER (kept for its rules in prose; the partial list in it describes the site's build, not this kit) ======== */

/* [kit] site.css L1-75 */
/* sorich.hr v3 — the BASE stylesheet: the design system "SKEN" (QR redesign, the design-system
 * phase, 2026-09-24; the concept is docs/HANDOFFS/sorich-v3-upgrade/09-qr-dizajn.md).
 *
 * ⚠ THIS FILE IS THE FIRST OF SEVERAL. The stylesheet a page receives is this file followed by
 * every `assets/css/*.css` partial in filename order (`siteCss()` in src/lib/sorich-v3/html.ts
 * joins them; the bake ships the result as ONE `assets/site.css`). A later partial wins a tie
 * against anything here, which is why the press layer is the highest-numbered partial.
 *   10-modul.css   the icon tile and the bare glyph (the MODUL glyphs are inline SVG, html.ts)
 *   20-chrome.css  the header (translucent, the one blur), its three menus, the split WhatsApp
 *                  button, the reading line, the phone sheet and the floating button
 *   30-qr.css      the QR motif and the module motion: the code's tile sizes and viewfinder, M1 the
 *                  assembly, M3 the flip card (the one component for every card that turns to show a
 *                  code: the body turns, a QR button on the front, an X on the back), Q2 a section's code, Q10 the
 *                  order page's code, M4 the wipe, M5 the shimmer (QR redesign, the motif phase)
 *   40-footer.css  the slim footer: the wordmark and the contact links, the legal line
 *   50-card.css    the printed card: the 1 mm object, its turn, and a still card's face buttons
 *   60-reveal.css  M2 the resolve: a section's content comes out of QR modules as it enters
 *   70-work.css    the NFC hero's tiles, the card beside the profile, the deck, a client's desk and
 *                  page, the /radovi/ filter, the full-screen opener
 *   72-map.css     the 3D map on /radovi/ (its colours are the `--m3-*` tokens below)
 *   75-pages.css   the pages: the home hero column, the home services' three category blocks, the
 *                  product card, the work band, the folds, the speed race and readout, the AI reader
 *                  and its tabs, the blog, the /pravno/ network panel, "Skenirajte me"
 *   80-viewer.css  the full-screen view, PRODUCT-STANDARD §8
 *   85-order.css   the order's channels, honeypot and phone shell
 *   90-press.css   the press layer and every pointer-only hover
 * (Archived by this phase: 10-icons.css — the stroked mask icons — and 15-atmos.css / 15-atmos.js
 * — the aurora and the grain; `_archive/sorich-v3-qr/assets/`. The TOČKA files as they were:
 * `_archive/sorich-v3-qr/tocka-skin/`.)
 *
 * ⚠ SKEN IN ONE PARAGRAPH. The site is a QR code: black, white, square cells and ONE signal colour,
 * the green of the channel that brings the work (WhatsApp `#25d366`) — the only chromatic value on
 * the site, besides the gold ".hr" of the wordmark, which is the printed cards' logo colour and never
 * anything else (2026-09-25, THE CHROME). LIGHT is the default (the OS preference is not followed); the dark theme is black. A
 * STATEMENT (`.s3-sea` — the name is historical — and `.s3-sec--statement`) takes the THEME's
 * statement ground: MIST `#ececf0` in the light theme, black in the dark (every section follows the
 * theme since 2026-09-24; until then a statement was black in both). Every card that stands on one is
 * PAPER (white) in the light theme and the dark card in the dark theme, like every other. Type is
 * Inter everywhere; Fraunces is kept for reading prose only. Every card has an edge in both themes (a
 * hairline, plus a shadow in the light theme). Icons are modules (10-modul.css). Logos are never
 * recoloured: the thing that holds a logo takes the ground the mark was drawn for.
 *
 * ⚠ DARK IS DARK (Ante, 2026-09-24: "promjena moda iz light u dark bi trebala cijelu stranicu
 * promijeniti … light je light, može neki mali dio biti dark, ali dark je dark"). The switch repaints
 * EVERY surface: no card, back, frame, bar or screen stays white in the dark theme. Exactly two things
 * keep a light ground there, and only as SMALL PLATES that hug what they carry — and since 2026-09-25
 * both are DIMMED to `--plate-d` rather than white: a QR code (dark modules on its light plate and
 * quiet zone — `--qr-plate`, the polarity `--qr-field` unmoved; an inverted code fails on many
 * scanners) and a logo
 * drawn dark for a light page (`--plate`, a small tile or plate round the mark inside the dark card —
 * never a whole white card, never a filter).
 *
 * ⚠ EVERY SECTION FOLLOWS THE THEME (Ante, 2026-09-24: "smeta me što je hero uvijek ista pozadinska
 * boja — da se sve sekcije pozadinske boje mijenjaju s light i dark modom"). No section keeps one
 * ground in both themes: the statements (the home hero, "Skenirajte me", "Cijene ukratko", the NFC
 * hero, a product's price and order block, the order and /provjera/ heads, the CTA band, the 404) are
 * light in the light theme and black in the dark. THE STATEMENT'S GROUND (below THE ROLES) is the one
 * rule; its seams (THE GROUNDS) draw the statement's own ground into its neighbour in either theme.
 *
 * ⚠ THE DEFENSIVE CSS CONTRACT (09-qr-dizajn.md §10) is the acceptance bar for every rule here and
 * in every partial: min-width 0 on every grid/flex child that holds text; `overflow-wrap:anywhere`
 * and `hyphens:auto` from the body (a price or a table cell uses `break-word`, so a column never
 * shrinks to one letter); nothing variable is `nowrap`; auto-fit grids with `min(100%, …)`; an
 * `aspect-ratio` in a stretched row also gets `width:100%` + `min-width:0`; card titles and prices
 * sized in `cqi` (`.s3-cq` is a container); every text colour a role token whose contrast was
 * computed (09 §2.3) in BOTH themes; no filter, blend, opacity or background on an `img`; ≥ 44px
 * tap targets; no backdrop filter anywhere (the header is solid since 2026-09-24); reduced motion
 * and no-JS keep everything visible.
 *
 * Every colour after the token blocks is a token. The class names `.s3-btn--gold` / `--glass` are
 * the first build's and stay (the scripts look for `.s3-btn--gold`): they mean PRIMARY (the signal
 * fill) and SECONDARY (the outlined button) now.
 *
 * Made by sorich.hr (https://sorich.hr/#top)
 */

/* [kit] ======== 1 · FONTS (the url()s are already relative to this file: fonts/...) ======== */

/* [kit] site.css L77-115 */
/* ── Fonts — self-hosted, two families, latin + latin-ext. ─────────────────────────── */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, 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;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/fraunces-var-latin.woff2) format("woff2");
  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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, 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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-var-latin.woff2) format("woff2");
  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;
}

/* [kit] ======== 2 · THE CONSTANTS (raw tokens: palette, type, motion, space, radii, measures) ======== */

/* [kit] site.css L117-267 */
/* ══════════ THE CONSTANTS — the same in both themes (09 §2.1, §3, §4, §6) ══════════
 * A theme block below never restates one of these; it only points the theme's ROLES at them. */
:root {
  /* ── the palette: two tones and one signal ── */
  --k: #000000; /* ink; the QR module; the dark theme's statement ground */
  --w: #ffffff; /* paper; the QR field; the light ground */
  --fog: #f5f5f7; /* the light theme's alternate section */
  /* THE LIGHT THEME'S STATEMENT GROUND (every section follows the theme, 2026-09-24). A THIRD tone,
   * because a statement always stands between one white and one fog section (the alternation skips
   * statements, so its two neighbours are consecutive in the count): neither white nor fog could differ
   * from both. 1.18:1 against white and 1.08 against fog — the same step as white/fog (1.09) — and the
   * lightest inks still hold on it: `#000` 17.82, `#4a4a50` 7.47, `#6a6a70` 4.56, `#0e7a3e` 4.60
   * (scratchpad/contrast-stmt.mjs, WCAG 2.x). Never darker: `#e8e8ed` would take the third ink to 4.40. */
  --mist: #ececf0;
  --inset-l: #ebebef; /* the light theme's control well */
  --coal: #111113; /* the dark theme's alternate section */
  --card-d: #1c1c1e; /* the dark theme's card */
  --raise-d: #2a2a2e; /* the dark theme's control well */
  --t2-l: #4a4a50; /* light second text: 8.80 on white, 7.40 on the well */
  --t3-l: #6a6a70; /* light third text: 5.37 on white, 4.52 on the well */
  --t2-d: #a1a1a6; /* dark second text: 8.16 on black, 5.56 on the well */
  --t3-d: #8a8a90; /* dark third text: 6.12 on black, 4.96 on a card — NEVER on the dark well (4.17) */
  --sig: #25d366; /* the signal FILL: black words on it 10.59; never a text colour on white (2.0) */
  --sig-hi: #3ddc78; /* hovered fill (black 11.71) */
  --sig-lo: #1fbd5a; /* pressed fill (black 8.48) */
  --sig-deep: #0e7a3e; /* the signal as TEXT on white 5.42, fog 4.98, the light well 4.56 */
  --sig-soft: rgb(37 211 102 / 28%); /* a halo of the signal round a chosen mark (never a ground for words) */
  --sig-deep-soft: rgb(14 122 62 / 26%); /* the same halo in the deep green, for the light set */
  --q: 22px; /* the module of every transition (the theme wipe's cell) */
  --r-m: 2px; /* a module's corner — nearly square */
  /* THE DEEP SIGNAL'S OWN TWO STATES (2026-09-25, when the light theme's fill became the deep
   * green): the same hue (146.7°) and saturation, one step of lightness either way, and WHITE words
   * legible on all three — 5.42 at rest, 4.54 hovered, 6.53 pressed. `--accent-fill` / `--on-fill`
   * used to be declared here and read by nothing; they are ROLES now, in the two blocks below. */
  --sig-deep-hi: #108845;
  --sig-deep-lo: #0c6c37;
  --qr-field: var(--w); /* a code is dark modules on a light field in BOTH themes */
  --qr-module: var(--k);
  /* THE SMALL LIGHT PLATE (dark is dark, 2026-09-24): the one light ground the dark theme keeps
   * besides a code's field — hugging a logo drawn dark for a light page, inside a dark card. */
  --plate: var(--w);
  /* THE SAME PLATE WITH THE LIGHTS DOWN (Ante 2026-09-25: *"it needs dimmed lighting on all
   * elements qr on light and dark"*). On a black page a pure white plate is the brightest object
   * there is — the home's "Skenirajte me" is up to 480px of 21:1 — so in the DARK theme THE TWO PLATES
   * THAT CARRY SOMETHING, a code's (`--qr-plate`) and a mark's (`--plate`), are lit at 79% of white
   * instead (the small logo tiles take their white from `--bg-card` and are deliberately left alone:
   * they are tiny and they hug the mark): Y 0.794, L* 91.4, still paper and
   * not grey, black modules on it 16.87:1 where a scanner asks for 3 and ISO/IEC 15415 grade A for
   * 70% symbol contrast (this is 93.97%). Not a new colour: the next step down the light palette's
   * own cool ramp, `#f5f5f7` → `#ececf0` → `#ebebef` → `#e6e6ea`, the same R = G, B + 4. NEVER WARM:
   * every ground in this file is cool or neutral, and on /radovi/ and on the deck a warm plate
   * would stand beside the photographed printed cards' real white paper and read as a mistake. */
  --plate-d: #e6e6ea;
  --ph-body: #000000; /* THE PHONE: body and island are a phone's in both themes; its screen */
  --ph-island: #000000; /* follows the theme (`--ph-screen`, THE PICTURES' GROUNDS below) */
  /* The printed card's cut edge darkens toward its core (50-card.css): white with 8% ink. */
  --card-core: #ebebeb;

  /* ── type (09 §3): Inter is the grid, Fraunces is the human ── */
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-read: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* The first build's display face token: every heading is Inter now, so any rule that still says
   * `--f-disp` sets Inter. */
  --f-disp: var(--f-ui);
  --disp-wt: 700;
  --fig-wt: 600;
  --fs-d1: clamp(2.625rem, 1.5rem + 5.6vw, 6rem); /* 42 → 96: the home H1, a statement's line, the 404 */
  --fs-d2: clamp(2rem, 1.25rem + 3.5vw, 4rem); /* 32 → 64: every other page H1 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); /* 28 → 44: section heads */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* 20 → 26: card and tile titles */
  --fs-h4: 1.1875rem; /* 19, held: dense heads (menu groups, labels, questions) */
  --fs-lead: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); /* 18 → 24 */
  --fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16 → 18 */
  --fs-ui: 0.9375rem; /* 15: controls, rows, chips */
  --fs-xs: 0.8125rem; /* 13: the floor — nothing smaller */
  --fs-fig: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); /* 24 → 36: a price that stands alone */
  --fs-prose: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem); /* the articles, /pravno/, quotations */
  /* INSIDE A CARD a title and a price size to the CARD (`.s3-cq` is a container, contract §4): a
   * long name or a long price line shrinks with its card and then wraps — it can never escape. The
   * `cqi` resolves where the token is used, against that element's own container. */
  --fs-card-h: clamp(1.125rem, 6cqi, 1.625rem);
  --fs-card-fig: clamp(1.125rem, 7cqi, 1.75rem);
  /* The first build's names, pointed at SKEN's scale so nothing that still reads one falls back to a
   * browser default. */
  --fs-h1: var(--fs-d2);
  --fs-hero: var(--fs-d1);
  --fs-label: var(--fs-h4);
  --fs-sm: var(--fs-ui);
  --fs-md: var(--fs-ui);

  /* ── motion (09 §6, the ladder kept) ── */
  --t-press: 90ms;
  --t-1: 160ms;
  --t-2: 250ms;
  --t-3: 400ms;
  --t-4: 630ms;
  --t-5: 1000ms;
  --t-6: 1600ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* ⚠ Written exactly in this form: the map's script parses the four numbers out of it. */
  --ease-settle: cubic-bezier(0.22, 0.9, 0.2, 1);
  --lift: -4px;
  --lift-sm: -2px;
  --rise: 14px;
  --reveal-from: 0.56;
  --stagger: 60ms;
  --stagger-max: 6;

  /* ── space, radii, measures (09 §4) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --u: 32px;
  --r-1: 12px;
  --r-2: 20px;
  --r-3: 28px;
  --r-pill: 999px;
  --wrap: 1200px;
  --wrap-text: 720px;
  --wrap-wide: 1440px;
  --gut: clamp(16px, 4vw, 48px); /* the 16px phone gutter is the floor */
  --y: clamp(80px, 12vh, 160px); /* air above and below a section */
  --y-big: clamp(112px, 18vh, 240px); /* a statement */
  --y-seam: clamp(56px, 8vh, 112px); /* where two sections of one ground meet */
  --y-head: clamp(24px, 4vh, 48px); /* head to proof */
  --gap-card: clamp(16px, 2vw, 24px);
  --gap-tile: 16px;
  --pad-pane: 24px;
  /* EXACT: the bar is sized by it, and the sheet's top, the menus, the hash landing and the home
   * hero's first screen are computed from it. */
  --hdr-h: 64px;

  /* ── the QR tiles (09 §5): ≥ 4 CSS px per module, by the biggest code each may carry ── */
  --qr-s: 164px;
  --qr-m: clamp(200px, 40vw, 320px);
  --qr-l: clamp(232px, min(56vh, 52vw), 480px);
}

@media (min-width: 1100px) {
  :root {
    --hdr-h: 72px;
  }
}

/* [kit] ======== 3 · THE ROLES: LIGHT (the default) · DARK (@media prefers-color-scheme) · the statement's ground ======== */

/* [kit] site.css L269-406 */
/* ══════════ THE ROLES — LIGHT (the default) and every PAPER surface (09 §2.2) ══════════
 * The root with no theme attribute IS the light theme: a first visit, scripting off and a visitor
 * who chose light all get it; `[data-theme="dark"]` (below) is the only way out of it.
 *
 * ⚠ THE SAME SET IS WORN BY EVERY PAPER SURFACE — IN THE LIGHT THEME ONLY (dark is dark, 2026-09-24;
 * until then these were paper in both themes, and the dark theme was a black page full of white
 * cards): `.s-pap` (a card's back), a logo's ground drawn for a dark mark (`[data-s3-ground="paper"]`
 * — a partner card, a capture's name frame), and EVERY CARD THAT STANDS ON A STATEMENT OR ON `.s-inv`
 * (the long list, 09 §8.5). A light statement (THE STATEMENT'S GROUND, below) moves only `--bg` and
 * `--bg-well`; the list puts a card on it back on the page's own values, so a card is the same white
 * card on a statement as on a proof section. In the dark theme none of them matches: each inherits the
 * dark theme's set and is the dark card. A custom property inherits, so everything inside such a card
 * — a price, an option, a chip — speaks the card's ink.
 * ⚠ THE ONE EXCEPTION, BOTH THEMES: the SMALL LOGO TILES under a dark mark (`.s3-logo-tile` 44–56px,
 * `.s3-client-logo` 72px, the map's pin and card tiles) stay paper in the dark theme too — each is the
 * small light plate that hugs a logo drawn dark for a light page (contract §6).
 * ⚠ `color` IS RESTATED WITH THE ROLES: an inherited `color` is the PARENT'S computed colour, so a
 * white card inside a black `.s-inv` would keep white words without it.
 * ⚠ `--inv-*` IS "THE MODULE TURNED": the ground and the ink a CHOSEN control takes on this surface
 * (a chosen chip, tab or option, the current menu row) — black on paper, white on black. Custom
 * properties are never swapped in place, so a chosen control reads these and nothing else.
 * (The order page's head in the phone shell stood in this list until 2026-09-24; it is THE
 * STATEMENT'S GROUND's own exception now, below.) */

/* [kit] ADAPTED (theme, 1 of 3): the light role set is the page's own, `:root`. The source rule's other three selectors
 * serve a card's back, a logo's ground, and the paper card on a statement/inverse surface; the first two are not in the kit and
 * the third is the next rule. The declarations are the source's, character for character. */
:root {
  color-scheme: light;
  color: var(--fg);
  --bg: var(--w);
  --bg-alt: var(--fog);
  --bg-card: var(--w);
  --bg-well: var(--inset-l);
  --fg: var(--k);
  --fg-2: var(--t2-l);
  --fg-3: var(--t3-l);
  --accent-t: var(--sig-deep);
  --focus: var(--sig-deep);
  --accent-halo: var(--sig-deep-soft); /* the ring round a chosen mark follows the theme's green (sorich-hr-032) */
  /* ONE GREEN PER SCREEN (Ante 2026-09-25: *"moraju bit iste na ekranu uvik — a cijene nisu iste kao
   * botun piši na WhatsApp na light modu"*). Until today the FILL was not a role at all: the button
   * hard-named `--sig`, so in daylight it was `#25d366` while every green TEXT beside it was
   * `#0e7a3e` — 41 ΔE apart, the fill 3.34× the light of the price, and the two stand side by side in
   * every order summary and at the foot of every category. The bright green cannot be the one that
   * wins: as TEXT it is 1.98:1 on white, 1.82 on fog, 1.68 on a statement's mist — 09 §2.3 already
   * records it as "a fill only, never text". So in the LIGHT theme the whole signal is the deep
   * green and the words ON it turn WHITE: black on `#0e7a3e` is 3.87 and fails, white is 5.42 and
   * passes, and the fill still clears 4.60 against the mist the home hero's button stands on.
   * ⚠ A ROLE AND NOT A THEME RULE, which is the whole point: `.s-inv` — a dark surface in daylight —
   * wears the DARK set below, so a button on a statement stays bright with black words, and `.s-pap`
   * at night takes these lines. The SURFACE decides, never the page. */
  --accent-fill: var(--sig-deep);
  --accent-fill-hi: var(--sig-deep-hi);
  --accent-fill-lo: var(--sig-deep-lo);
  --on-fill: var(--w);
  --line: rgb(0 0 0 / 10%);
  --line-2: rgb(0 0 0 / 6%);
  /* A text link's underline: a quieter ink than the words, never a gold. */
  --line-link: rgb(0 0 0 / 34%);
  /* The small washes: a table's zebra row, a menu row's hover, a drawing's fill. Not a surface. */
  --wash: rgb(0 0 0 / 4%);
  --wash-2: rgb(0 0 0 / 7%);
  /* A card's shadow at rest, lifted, and a pane that floats over the page. In the light theme a
   * card is told from white or fog by its hairline AND this shadow (contract §5). */
  --drop: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 32px -12px rgb(0 0 0 / 18%);
  --drop-lift: 0 2px 4px rgb(0 0 0 / 6%), 0 22px 44px -18px rgb(0 0 0 / 26%);
  --drop-pop: 0 2px 6px rgb(0 0 0 / 8%), 0 28px 60px -24px rgb(0 0 0 / 32%);
  /* M5 (30-qr.css §7): the strength of the band of modules that crosses a card under a pointer, in
   * the card's own ink — never text, never a ground at rest. */
  --shim: 0.12;
  --inv-bg: var(--k);
  --inv-fg: var(--w);
  --inv-fg-2: var(--t2-d);
  --inv-accent: var(--sig);
  /* THE PRINTED CARD (50-card.css): the 1 mm edge is white in both themes; a STILL card on a light
   * ground gets a hairline and the card shadow, so a white card never vanishes on white. */
  --card-edge: var(--w);
  --card-pool: 34%;
  --card-line: rgb(0 0 0 / 12%);
  --card-drop: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 32px -12px rgb(0 0 0 / 18%);
  /* A CODE'S PLATE (09 §2.2, §5; 30-qr.css §1). `--qr-field` is the POLARITY CONTRACT — a light field,
   * the same in both themes, never inverted, and the glyph controls borrow it; the PLATE is that
   * field as THIS theme lights it, and only the plate is a role. In the LIGHT theme the plate stays
   * `--w`, because tone cannot work here: a code stands on white (`--bg`, `--bg-card`), on fog and on
   * a statement's mist, and those three already occupy the whole range a dimmed white would land in
   * (a `#f5f5f7` plate on a fog section is 1.00:1). So the light theme's answer is the one the
   * PRINTED CARD above already gives — a hairline AND a shadow, neither of which depends on what is
   * under it — which is what §2.2 has specified for a `.s-pap` tile since the first build and what
   * the CSS never gave it: the hairline was built, the shadow was dropped, and a white plate on a
   * white card was left with 1.25:1 of hair (Ante 2026-09-25: *"in some cases you can see it in some
   * you cant"*). The hairline is one notch over a card's 12% because a plate is small and usually
   * stands INSIDE a card: at 14% it composites to `#dbdbdb`, 1.385:1 on the plate. The drop is the
   * card's own grammar drawn tighter — a contact layer and a short ambient pool — so a sheet LIES ON
   * the page instead of being printed into it. */
  --qr-plate: var(--qr-field);
  --qr-line: rgb(0 0 0 / 14%);
  --qr-drop: 0 1px 2px rgb(0 0 0 / 8%), 0 10px 22px -12px rgb(0 0 0 / 22%);
  /* The message bubble (an order's live message, the AI demo's question). */
  --bubble: var(--inset-l);
  --bubble-fg: var(--k);
  /* The static map of Dalmatia (the /radovi/ fallback): land in the well's grey, a coastline. */
  --map-land: var(--inset-l);
  --map-edge: rgb(0 0 0 / 28%);
  /* THE PHONE's metal band and its drop: the lighter metal on a light page. */
  --ph-band: #c7c7cc;
  --ph-edge: rgb(255 255 255 / 18%);
  --ph-drop: 0 32px 60px -30px rgb(0 0 0 / 38%), 0 10px 20px -12px rgb(0 0 0 / 24%);
  /* (The header's glass, `--hdr-glass` — the ground at 80% under a blur — is gone: the bar is SOLID
   * since 2026-09-24, 20-chrome.css.) */
}

/* [kit] ADAPTED (theme, 2 of 3): the source's fourth selector (a paper card standing on a STATEMENT puts the page's own
 * light values back, because the statement changes --bg and --bg-well) is for the LIGHT theme only
 * (`html:not([data-theme="dark"])`). Same selector, same declarations (repeated: CSS cannot share one declaration
 * block between a plain rule and a media-scoped one); the media query is the guard. In the dark theme none of it
 * applies and the card is the dark card. */
@media not all and (prefers-color-scheme: dark) {
html:not([data-theme="dark"])
  :is(.s-inv, .s3-sea, .s3-sec--statement)
  :is(
    .s3-card,
    .s3-door,
    .s3-nfc-tile,
    .s3-pcard,
    .s3-cost-wrap,
    .s3-pricecat,
    .s3-q,
    .s3-sum,
    .s3-client,
    .s3-src,
    .s3-aicard,
    .s3-race,
    .s3-netp,
    .s3-steps li,
    .s3-posts a,
    .s3-pkg > div,
    .s3-calc3,
    .s3-empty,
    .s3-work-item,
    .s3-art-close,
    .s3-figure,
    .s3-have a,
    .s3-have-plain,
    .s3-learn a,
    .s3-contact-list a
  ) {
  color-scheme: light;
  color: var(--fg);
  --bg: var(--w);
  --bg-alt: var(--fog);
  --bg-card: var(--w);
  --bg-well: var(--inset-l);
  --fg: var(--k);
  --fg-2: var(--t2-l);
  --fg-3: var(--t3-l);
  --accent-t: var(--sig-deep);
  --focus: var(--sig-deep);
  --accent-halo: var(--sig-deep-soft); /* the ring round a chosen mark follows the theme's green (sorich-hr-032) */
  /* ONE GREEN PER SCREEN (Ante 2026-09-25: *"moraju bit iste na ekranu uvik — a cijene nisu iste kao
   * botun piši na WhatsApp na light modu"*). Until today the FILL was not a role at all: the button
   * hard-named `--sig`, so in daylight it was `#25d366` while every green TEXT beside it was
   * `#0e7a3e` — 41 ΔE apart, the fill 3.34× the light of the price, and the two stand side by side in
   * every order summary and at the foot of every category. The bright green cannot be the one that
   * wins: as TEXT it is 1.98:1 on white, 1.82 on fog, 1.68 on a statement's mist — 09 §2.3 already
   * records it as "a fill only, never text". So in the LIGHT theme the whole signal is the deep
   * green and the words ON it turn WHITE: black on `#0e7a3e` is 3.87 and fails, white is 5.42 and
   * passes, and the fill still clears 4.60 against the mist the home hero's button stands on.
   * ⚠ A ROLE AND NOT A THEME RULE, which is the whole point: `.s-inv` — a dark surface in daylight —
   * wears the DARK set below, so a button on a statement stays bright with black words, and `.s-pap`
   * at night takes these lines. The SURFACE decides, never the page. */
  --accent-fill: var(--sig-deep);
  --accent-fill-hi: var(--sig-deep-hi);
  --accent-fill-lo: var(--sig-deep-lo);
  --on-fill: var(--w);
  --line: rgb(0 0 0 / 10%);
  --line-2: rgb(0 0 0 / 6%);
  /* A text link's underline: a quieter ink than the words, never a gold. */
  --line-link: rgb(0 0 0 / 34%);
  /* The small washes: a table's zebra row, a menu row's hover, a drawing's fill. Not a surface. */
  --wash: rgb(0 0 0 / 4%);
  --wash-2: rgb(0 0 0 / 7%);
  /* A card's shadow at rest, lifted, and a pane that floats over the page. In the light theme a
   * card is told from white or fog by its hairline AND this shadow (contract §5). */
  --drop: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 32px -12px rgb(0 0 0 / 18%);
  --drop-lift: 0 2px 4px rgb(0 0 0 / 6%), 0 22px 44px -18px rgb(0 0 0 / 26%);
  --drop-pop: 0 2px 6px rgb(0 0 0 / 8%), 0 28px 60px -24px rgb(0 0 0 / 32%);
  /* M5 (30-qr.css §7): the strength of the band of modules that crosses a card under a pointer, in
   * the card's own ink — never text, never a ground at rest. */
  --shim: 0.12;
  --inv-bg: var(--k);
  --inv-fg: var(--w);
  --inv-fg-2: var(--t2-d);
  --inv-accent: var(--sig);
  /* THE PRINTED CARD (50-card.css): the 1 mm edge is white in both themes; a STILL card on a light
   * ground gets a hairline and the card shadow, so a white card never vanishes on white. */
  --card-edge: var(--w);
  --card-pool: 34%;
  --card-line: rgb(0 0 0 / 12%);
  --card-drop: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 32px -12px rgb(0 0 0 / 18%);
  /* A CODE'S PLATE (09 §2.2, §5; 30-qr.css §1). `--qr-field` is the POLARITY CONTRACT — a light field,
   * the same in both themes, never inverted, and the glyph controls borrow it; the PLATE is that
   * field as THIS theme lights it, and only the plate is a role. In the LIGHT theme the plate stays
   * `--w`, because tone cannot work here: a code stands on white (`--bg`, `--bg-card`), on fog and on
   * a statement's mist, and those three already occupy the whole range a dimmed white would land in
   * (a `#f5f5f7` plate on a fog section is 1.00:1). So the light theme's answer is the one the
   * PRINTED CARD above already gives — a hairline AND a shadow, neither of which depends on what is
   * under it — which is what §2.2 has specified for a `.s-pap` tile since the first build and what
   * the CSS never gave it: the hairline was built, the shadow was dropped, and a white plate on a
   * white card was left with 1.25:1 of hair (Ante 2026-09-25: *"in some cases you can see it in some
   * you cant"*). The hairline is one notch over a card's 12% because a plate is small and usually
   * stands INSIDE a card: at 14% it composites to `#dbdbdb`, 1.385:1 on the plate. The drop is the
   * card's own grammar drawn tighter — a contact layer and a short ambient pool — so a sheet LIES ON
   * the page instead of being printed into it. */
  --qr-plate: var(--qr-field);
  --qr-line: rgb(0 0 0 / 14%);
  --qr-drop: 0 1px 2px rgb(0 0 0 / 8%), 0 10px 22px -12px rgb(0 0 0 / 22%);
  /* The message bubble (an order's live message, the AI demo's question). */
  --bubble: var(--inset-l);
  --bubble-fg: var(--k);
  /* The static map of Dalmatia (the /radovi/ fallback): land in the well's grey, a coastline. */
  --map-land: var(--inset-l);
  --map-edge: rgb(0 0 0 / 28%);
  /* THE PHONE's metal band and its drop: the lighter metal on a light page. */
  --ph-band: #c7c7cc;
  --ph-edge: rgb(255 255 255 / 18%);
  --ph-drop: 0 32px 60px -30px rgb(0 0 0 / 38%), 0 10px 20px -12px rgb(0 0 0 / 24%);
  /* (The header's glass, `--hdr-glass` — the ground at 80% under a blur — is gone: the bar is SOLID
   * since 2026-09-24, 20-chrome.css.) */
}
}

/* [kit] site.css L408-485 */
/* ══════════ THE ROLES — DARK, and every INVERSE surface ══════════
 * The dark theme is BLACK (09 §2.2), sections alternating with coal `#111113`, cards `#1c1c1e` —
 * which is 1.11:1 against coal by tone, so the white 14% hairline is mandatory, never optional (no
 * shadow reads on black). The same set is worn, in BOTH themes, by every INVERSE surface: `.s-inv`, a
 * logo's ground drawn for a gold, cream or white mark (`[data-s3-ground="ink"]`) and the full-screen
 * view's dark room (`.s3-lb`). In the dark theme it is also, by inheritance, every surface the light
 * set names only for the light theme (a card on a statement, a card's back, a partner card): dark is
 * dark.
 * ⚠ A STATEMENT IS NO LONGER ON THIS LIST (every section follows the theme, 2026-09-24): `.s3-sea` and
 * `.s3-sec--statement` wore this set in both themes, which kept the home hero black in the light
 * theme. They take the THEME's set now, and their own ground (THE STATEMENT'S GROUND, below). */

/* [kit] ADAPTED (theme, 3 of 3): the dark role set, the site's `:root[data-theme="dark"]`, is the OS's dark here.
 * The set's other selectors (.s-inv, [data-s3-ground="ink"], .s3-lb) are inverse surfaces the kit does not use.
 * The declarations are the source's, character for character. */
@media (prefers-color-scheme: dark) {
:root {
  color-scheme: dark;
  color: var(--fg);
  --bg: var(--k);
  --bg-alt: var(--coal);
  --bg-card: var(--card-d);
  --bg-well: var(--raise-d);
  --fg: var(--w);
  --fg-2: var(--t2-d);
  --fg-3: var(--t3-d);
  --accent-t: var(--sig);
  --focus: var(--sig);
  --accent-halo: var(--sig-soft);
  /* ON BLACK THE SIGNAL IS ALREADY ONE GREEN: `--accent-t` is `--sig` here, so a price, the logo's
   * ".hr", a heading's module, the reading line and the fill are one `#25d366`. Nothing changes for
   * the eye — these four lines only say as ROLES what the button used to hard-name, so a LIGHT
   * surface at night (`.s-pap`: a chosen chip, a ledger card on a statement) now correctly takes the
   * light set instead of this one. */
  --accent-fill: var(--sig);
  --accent-fill-hi: var(--sig-hi);
  --accent-fill-lo: var(--sig-lo);
  --on-fill: var(--k);
  --line: rgb(255 255 255 / 14%);
  --line-2: rgb(255 255 255 / 8%);
  --line-link: rgb(255 255 255 / 40%);
  --wash: rgb(255 255 255 / 5%);
  --wash-2: rgb(255 255 255 / 9%);
  /* ⚠ A TRANSPARENT ZERO SHADOW, NEVER `none`: `none` inside a shadow list makes the whole
   * declaration invalid, and every rule that joins these with an edge would lose both. */
  --drop: 0 0 0 0 transparent;
  --drop-lift: 0 22px 44px -22px rgb(0 0 0 / 80%);
  --drop-pop: 0 28px 64px -24px rgb(0 0 0 / 85%);
  --shim: 0.16;
  --inv-bg: var(--w);
  --inv-fg: var(--k);
  --inv-fg-2: var(--t2-l);
  --inv-accent: var(--sig-deep);
  --card-edge: var(--w);
  --card-pool: 62%;
  --card-line: rgb(255 255 255 / 16%);
  --card-drop: 0 0 0 0 transparent;
  /* A CODE'S PLATE, DARK — the opposite half of the same idea. No shadow reads on black (`--drop`
   * above is a deliberate transparent zero), so the light theme's lift does nothing here and the
   * plate is DIMMED instead: `--plate-d`, 79% of white, the one move that takes the glare off a
   * 480px plate without touching polarity (dark modules on a light field, an inverted code still
   * refused, 09 §10 rule 12). The hairline is INK in this theme too, and that is why it is a token
   * of its own: `--line` here is a WHITE 14% hair, which does nothing round a near-white plate and
   * would fringe the dimmed one BRIGHTER. At 30% ink it is invisible on the black statement (1.00:1,
   * as intended), a contact shadow on a card (`#141415` on `#1c1c1e`), and the plate's only edge if
   * a code ever lands on a light capture. `--plate` follows: a logo's plate (`.s3-partner-mark`,
   * `.s3-client-shot-name`) is the same white slab with the same problem, and a NEUTRAL dim shifts
   * no client's brand hue — only its lighting. */
  --plate: var(--plate-d);
  --qr-plate: var(--plate-d);
  --qr-line: rgb(0 0 0 / 30%);
  --qr-drop: 0 0 0 0 transparent;
  --bubble: var(--raise-d);
  --bubble-fg: var(--w);
  --map-land: var(--raise-d);
  --map-edge: rgb(255 255 255 / 34%);
  --ph-band: #3a3a3c;
  --ph-edge: rgb(255 255 255 / 13%);
  --ph-drop: 0 42px 70px -30px rgb(0 0 0 / 72%), 0 14px 26px -14px rgb(0 0 0 / 50%);
}
}

/* [kit] site.css L487-505 */
/* ══════════ THE STATEMENT'S GROUND — every section follows the theme (Ante, 2026-09-24) ══════════
 * A STATEMENT (`.s3-sea`, `.s3-sec--statement`: the home hero, "Skenirajte me", "Cijene ukratko", the
 * NFC hero, a product's price and order block, the order and /provjera/ heads, the CTA band, the 404)
 * speaks the THEME's role set like every section, and only its GROUND is its own:
 *   · LIGHT — MIST `#ececf0` (THE CONSTANTS: a third tone, never equal to either neighbour), the
 *     light theme's inks on it (`#000` 17.82, `#4a4a50` 7.47, `#6a6a70` 4.56, `#0e7a3e` 4.60), and
 *     its well WHITE: `#ebebef` would all but vanish on mist (1.01:1), so a Share module or a
 *     secondary button's hover directly on a statement is a white module (black on it 21.00). The
 *     cards on it are put back on the page's own values by the light set's list (above);
 *   · DARK — the dark theme's own set, black: nothing to restate. Its edges are 09's hairline seams
 *     where its neighbour is black too (THE GROUNDS).
 * `--bg` IS RESTATED, NOT A NEW ROLE: everything inside a statement that paints `var(--bg)` or
 * `var(--ground)` — the 404's wrap, an in-page order's two bars, the section's own `--ground` —
 * paints the statement's ground in either theme, exactly as it painted the statement's black before.
 * `color` needs no restating: the statement's words are the theme's words, inherited from the body. */

/* [kit] ADAPTED (theme): light theme only, as its selector says; the :not() is always true here, the media query is the guard. */
@media not all and (prefers-color-scheme: dark) {
html:not([data-theme="dark"]) :is(.s3-sea, .s3-sec--statement) {
  --bg: var(--mist);
  --bg-well: var(--w);
}
}

/* [kit] ======== 4 · THE CHROME'S GROUND AND THE WORDMARK'S TWO CLASSES ======== */

/* [kit] site.css L611-648 */
/* ══════════ THE CHROME — the header, the phone sheet and the footer follow the theme ══════════
 * All three are the page's own SOLID ground — white in the light theme, black in the dark — never
 * see-through (the header's glass went on 2026-09-24: nothing may show through or behind the bar,
 * 20-chrome.css). `.s3-hdr` is named rather than given a class so the `/c/` pages' own header
 * follows without a markup change.
 * THE WORDMARK IS BLACK OR WHITE, AND THE ".hr" IS THE SIGNAL (Ante 2026-09-25, second word on it:
 * "vrati ovu promjenu na logu… neka budu crni ili bijeli i ako mos stavit zelenu šta je hint na
 * cijeloj stranici u to obojano .hr"). The gold of the printed cards lasted one morning
 * (`--wm-gold`, deleted with this): the mark is the site's own two tones again — the word in the
 * words' ink (`currentColor`: black on the light theme, white on the dark) — and the one hue on it
 * is the one hue on the site, its signal, on the ".hr".
 * `--accent-t`, not the flat `--sig`: that token IS the signal per theme (`--sig-deep` #0e7a3e on
 * white, 5.42:1; `--sig` #25d366 on black, 10.2:1), so the ".hr" stays readable on both grounds
 * instead of glowing thin on white the way the gold did (2.35:1). A logo is exempt from the text
 * rule, but a mark nobody can read is not a mark.
 * No state — hover, focus, the current page — recolours either path (the logo link's focus ring is
 * the site's ring round the link, not a colour on the mark). Here, the footer, the `/c/` pages' header
 * and — since 2026-09-25 — THE BRAND DEMO on the brand product page (`.s3-brandset`, three dark plates
 * showing the mark as delivered): it carried the file's own cream and GOLD, which is the one place the
 * morning's deleted gold survived, and Ante's rule is that even the light mark is always the same
 * green. Its plates are `data-s3-ground="ink"`, so the word is white and the ".hr" is `--sig`
 * there, whatever the page's theme (chrome.ts `WM` classes both paths).
 * Since 2026-10-07 the wordmark is Inter Black with the headings' module as its stop (chrome.ts
 * `WM`): `.s3-wm-word` is all its letters, "hr" included, and `.s3-wm-hr` is the MODULE alone, so the
 * signal sits on the stop exactly as it does on a heading's. The two rules below are unchanged. */
.s3-hdr,
.s3-chrome {
  background-color: var(--bg);
  color: var(--fg);
}

:is(.s3-hdr, .s3-chrome, .s3-brandset) .s3-wm-word {
  fill: currentColor;
}

:is(.s3-hdr, .s3-chrome, .s3-brandset) .s3-wm-hr {
  fill: var(--accent-t);
}

/* [kit] ======== 5 · BASE ELEMENTS (box-sizing, html, body, [hidden], img, a, the focus ring, headings, selection) ======== */

/* [kit] site.css L650-767 */
/* ── Base ───────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + 16px);
  background-color: var(--bg);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* THE BODY PAINTS THE GROUND (the fixed atmosphere layer is gone, 09 §10.21) and carries the two
 * wrapping rules every text block inherits (contract §1): a word too long for its box — a URL, an
 * e-mail, a compound word — breaks inside itself instead of escaping, and the language the page
 * declares hyphenates. `overflow-x: clip` (never `hidden`, which would make the body a scroll
 * container and un-pin the sticky header) keeps a phone from scrolling sideways at 320px. */
body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--fg);
  font: 400 var(--fs-body) / 1.55 var(--f-ui);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ⚠ THE [hidden] REPAIR: an author `display` beats the user-agent `[hidden]` rule, so this one is
 * `!important` and stands for every component below (contract §17). */
[hidden][hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* A table cell keeps its words whole unless one alone is wider than the cell: `anywhere` (the body's)
 * would let the auto table layout shrink a column to one letter. */
td,
th {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-link);
}

@media (hover: hover) {
  a:hover {
    text-decoration-color: currentColor;
  }
}

/* The focus ring: 2px of the text-safe signal, 2px off the element. It never changes the element's
 * own corner. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* A selection is a FILL with words on it, so it takes the fill role and its own ink — the deep
 * green with white words in daylight, the bright green with black words at night (2026-09-25). */
::selection {
  background: var(--accent-fill);
  color: var(--on-fill);
}

/* [kit] ======== 6 · SCREEN-READER TEXT · SKIP LINK · THE WRAP · THE CARD CONTAINER ======== */

/* [kit] site.css L782-830 */
.s3-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.s3-skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-1);
  background: var(--accent-fill);
  color: var(--on-fill);
  font-weight: 600;
  text-decoration: none;
}

.s3-skip:focus {
  top: 12px;
}

.s3-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.s3-narrow {
  max-width: calc(var(--wrap-text) + 2 * var(--gut));
}

/* THE CONTAINER HOOK (contract §4): every card is `.s3-cq` (the structure phase put it in the
 * markup), so its title and its price size to the CARD in `cqi`. Every element that carries it is a
 * grid or flex item with a definite track or basis, or a block — never a box sized by its own
 * content, which inline-size containment would collapse. ⚠ It also makes the card the containing
 * block of any `position: fixed` inside it: nothing fixed ever lives in a card (rule 19). */
.s3-cq {
  container-type: inline-size;
  min-width: 0;
}

/* [kit] ======== 7 · TYPE (headings, the module dot, the small head, lede, muted, price) ======== */

/* [kit] site.css L832-936 */
/* ── Type (09 §3) ───────────────────────────────────────────────────────────────────── */

.s3-h1,
.s3-h2,
.s3-h3 {
  font-family: var(--f-ui);
  color: var(--fg);
  min-width: 0;
}

/* Display 2 — every page H1 (the home H1 is Display 1, 75-pages.css §1). */
.s3-h1 {
  font-size: var(--fs-d2);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.s3-h2 {
  font-size: var(--fs-h2);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.s3-h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.012em;
}

/* A card's title sizes to its card (contract §4). */
.s3-cq .s3-h3 {
  font-size: var(--fs-card-h);
}

/* THE HEADING'S DOT IS A MODULE (09 §3): `hd()` still writes the logo's full stop; on a Display or an
 * H2 it is drawn as one QR module — a square of the text-safe signal a fifth of an em wide (inside
 * the full stop's own advance), sitting on the baseline where the full stop sat — and on every smaller
 * heading (a card title, a label, a menu head) it is not drawn at all (never on a card title). The
 * character stays in the document: copied, the heading still ends in its full stop.
 * ⚠ IT STAYS TEXT, NEVER AN INLINE-BLOCK: a full stop may not start a line (UAX #14 LB13), so the
 * module can never be orphaned on a line of its own — an atomic inline-block could (it breaks like an
 * ideograph). The glyph is made transparent and the module is its BACKGROUND, sized in `em` and set on
 * the baseline from Inter's own metrics (the inline box runs 0.24em below the baseline). */
.s3-dot {
  display: none;
}

:is(.s3-h1, .s3-h2) > .s3-dot,
:is(.s3-article, .s3-art-close) > h2 > .s3-dot {
  display: inline;
  color: transparent;
  font-weight: inherit;
  background-image: linear-gradient(var(--accent-t), var(--accent-t));
  background-repeat: no-repeat;
  background-size: 0.2em 0.2em;
  background-position: 0.03em calc(100% - 0.24em);
}

.s3-nw {
  white-space: nowrap;
}

/* THE SMALL HEAD (the first build's "label tier", Q11): a dense heading — a product page block's
 * title, a menu group, a blog group — set in Inter 600 at the held H4 size, in the words' own ink.
 * A real heading element wherever it titles a block of the page (`labelHd()`); the ONE exception is
 * the header's menu column head, the same class on a `<p>` (chrome.ts `menuHead`, 2026-09-25: the
 * header comes before the page's H1, so it holds no heading element). No ALL-CAPS, ever. */
.s3-label {
  margin: 0;
  font: 600 var(--fs-h4) / 1.3 var(--f-ui);
  letter-spacing: -0.01em;
  color: var(--fg);
  text-transform: none;
  min-width: 0;
}

.s3-lede {
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--fg-2);
  max-width: 44ch;
}

.s3-muted {
  color: var(--fg-3);
}

.s3-small {
  font-size: var(--fs-ui);
}

/* A PRICE WRAPS (contract §1): "osnovni uz karticu, puni od 250 €" is a variable string. `break-word`,
 * not the body's `anywhere`: a price in a grid track or a table cell must not shrink its column to one
 * letter. Tabular figures on every price (09 §3). */
.s3-price {
  font-family: var(--f-ui);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
  color: var(--accent-t);
  overflow-wrap: break-word;
}

/* [kit] ======== 8 · BUTTONS (primary .s3-btn--gold · secondary .s3-btn--glass · tertiary .s3-btn--quiet · small .s3-btn--sm · icon .s3-icon-btn) ======== */

/* [kit] site.css L938-1021 */
/* ── Buttons (09 §8.9) ──────────────────────────────────────────────────────────────────
 * PRIMARY (`.s3-btn--gold`, the name is the first build's): the signal fill with BLACK words
 * (10.59:1), 48px, the card's `--r-1` corner, Inter 600 15px. ONE per screen (Q26, kept): the header
 * WhatsApp, the home hero's WhatsApp, "Skenirajte me"'s "Spremi kontakt", an order's send, the
 * shell's bottom control, the FAB's "Naruči", the `/c/` header's WhatsApp — and while another is
 * on screen the header's goes quiet (`data-s3-quiet`, 20-chrome.css).
 * SECONDARY (`.s3-btn--glass`): transparent, a 1px hairline of the words' own ink at full strength,
 * the words in `--fg` — a black outline in the light theme (on white, fog or a statement's mist), a
 * white one in the dark. A pointer fills it with the well (90-press.css; on a light statement the
 * well is white).
 * TERTIARY (`.s3-btn--quiet`): words only, in the second ink.
 * ⚠ A LABEL WRAPS (contract §1): a button's words are variable ("Digitalni profil: osnovni uz
 * karticu, puni od 250 €", a client's domain), so it is `inline-flex` with `max-width: 100%` and
 * centred words — never `nowrap`. Every button is at least 44px tall (contract §16). */
.s3-btn {
  --b-pad: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  min-width: 0;
  max-width: 100%;
  padding: var(--b-pad);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font: 600 var(--fs-ui) / 1.25 var(--f-ui);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-1) var(--ease),
    border-color var(--t-1) var(--ease),
    color var(--t-1) var(--ease),
    transform var(--t-press) var(--ease);
}

.s3-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.s3-btn > span {
  min-width: 0;
}

.s3-btn--gold {
  background-color: var(--accent-fill);
  color: var(--on-fill);
}

.s3-btn--glass {
  background-color: transparent;
  border-color: var(--fg);
  color: var(--fg);
}

.s3-btn--quiet {
  --b-pad: 10px 12px;
  min-height: 44px;
  background-color: transparent;
  color: var(--fg-2);
}

.s3-btn--sm {
  --b-pad: 9px 16px;
  min-height: 44px;
}

.s3-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.s3-btns > * {
  min-width: 0;
}

/* [kit] site.css L1023-1048 */
/* ── Small controls the chrome and the pop-ups share ──────────────────────────────────
 * The header itself is 20-chrome.css. What stays here are the controls that are not the header's
 * alone: site.js writes `.s3-icon-btn` as the close of the share popover and of every dialog. */

/* The square icon button — a module: the theme switch, the burger, a pop-up's close. */
.s3-icon-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background-color: transparent;
  color: var(--fg);
  transition:
    background-color var(--t-1) var(--ease),
    color var(--t-1) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.s3-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* [kit] site.css L1063-1070 */
/* The disclosure caret (MODUL `caret`): the three header menus, the sheet's groups, the split
 * button's arrow. Each owner turns it when its disclosure is open. */
.s3-caret {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform var(--t-2) var(--ease);
}

/* [kit] ======== 9 · CHIPS AND TAGS (the tab rules come further down, from 75-pages.css) ======== */

/* [kit] site.css L1072-1140 */
/* ── Chips and tabs (09 §8.10) ─────────────────────────────────────────────────────────
 * A CHIP: a pill of the well with the words in `--fg`, at least 44px tall; the words WRAP ("Narudžbe
 * i rezervacije na WhatsApp" is wider than a 320px row). The /radovi/ and /blog/ filters and the trade
 * doors ("Za koga"). The CHOSEN one is the module turned (THE CHOSEN STATE, below). A tab is
 * 75-pages.css §2. (No chip row stands above a section any more: the home category tabs and the
 * /cijene/ jumps went on 2026-09-25.)
 * ⚠ The count beside a chip's name is `--fg-2`, never `--fg-3`: the third ink on the dark well is
 * 4.17:1 (09 §2.3). */
.s3-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background-color: var(--bg-well);
  color: var(--fg);
  font: 500 var(--fs-ui) / 1.25 var(--f-ui);
  text-align: left;
  text-decoration: none;
  overflow-wrap: break-word;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-1) var(--ease),
    border-color var(--t-1) var(--ease),
    color var(--t-1) var(--ease);
}

a.s3-chip {
  text-decoration: none;
}

.s3-chip-n {
  font-weight: 500;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.s3-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

/* A row of TAGS (a client card's services, a map card's): quiet, not controls — a hairline pill with
 * the second ink, no well. */
.s3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.s3-chips li {
  min-width: 0;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font-size: var(--fs-xs);
  line-height: 1.35;
}

/* [kit] ======== 10 · SECTIONS · THE GROUNDS · THE STATEMENT AND ITS SEAMS ======== */

/* [kit] site.css L1142-1175 */
/* ── Sections: rhythm (Q13) ─────────────────────────────────────────────────────────────
 * A section is as tall as what it holds plus `--y` above and below; where two sections of the
 * proof grounds meet, both halves trim to `--y-seam`. A STATEMENT keeps the full air. */
.s3-sec {
  position: relative;
  padding: var(--y) 0;
}

.s3-sec--tight {
  padding: var(--y-seam) 0;
}

.s3-sec--statement {
  padding: var(--y-big) 0;
}

:is(.s3-sec, .s3-p-hero, .s3-hero):not(.s3-sea, .s3-sec--statement) + .s3-sec:not(.s3-sea, .s3-sec--statement) {
  padding-top: var(--y-seam);
}

.s3-sec:not(.s3-sea, .s3-sec--statement):has(+ .s3-sec:not(.s3-sea, .s3-sec--statement)) {
  padding-bottom: var(--y-seam);
}

/* The form under an order page's or /provjera/'s statement head (the page-blueprint phase): the head has
 * already said what this is, so the questions start close under it. */
main > .s3-sec.s3-sec--form {
  padding-top: clamp(32px, 5vh, 56px);
}

/* The wide measure (09 §4: header, hero, work band, map) — /radovi/'s map section. */
.s3-wrap--wide {
  max-width: var(--wrap-wide);
}

/* [kit] site.css L1177-1205 */
/* ══════════ THE GROUNDS (09 §2.2, §4, §10.21) ══════════
 * Every child of <main> PAINTS ITS OWN GROUND — no section is transparent, there is no layer behind
 * the page any more. The proof sections alternate the theme's two grounds — white · fog on light,
 * black · coal on dark — counted over the children that are not statements, so a statement never
 * breaks the alternation (`:nth-child(… of S)`; an engine without it drops that rule alone and every
 * section stays `--bg`, still correct). A STATEMENT (`.s3-sea`, `.s3-sec--statement`) paints the
 * THEME's statement ground (THE STATEMENT'S GROUND, after THE ROLES): mist in the light theme, black in
 * the dark — every section follows the theme since 2026-09-24. Never put a bare `.s3-wrap` straight
 * into <main>. */
main > * {
  --ground: var(--bg);
  background-color: var(--ground);
}

main > :nth-child(even of :not(.s3-sea, .s3-sec--statement, [hidden], script, template)) {
  --ground: var(--bg-alt);
}

/* `--ground` (the page-blueprint phase) is the colour THIS section paints, resolved on the section and
 * inherited by everything in it: a sticky bar inside a section (an in-page order's two bars) paints `var(--ground)` and so is always the ground it stands on — white or fog, black or
 * coal, a statement's mist or black — never a white bar on a fog section. Outside `<main>` it is
 * unset, and those users fall back to `--bg`. A statement's `--bg` IS its own ground (THE STATEMENT'S
 * GROUND), so this one rule paints it in both themes; `.s-inv` stays the inverse black in both. */
.s3-sea,
.s3-sec--statement,
.s-inv {
  --ground: var(--bg);
  background-color: var(--bg);
}

/* [kit] site.css L1215-1237 */
/* THE STATEMENT'S EDGES (every section follows the theme, 2026-09-24). In the LIGHT theme a statement's
 * mist is never its neighbour's white or fog, so the tone and the module row (below) are the edge — no
 * hairline. In the DARK theme a statement is black and its neighbours are black (the odd proof
 * sections) or coal (the even ones): where the two grounds are EQUAL — a black neighbour, or the black
 * footer under the last section — a hairline seam is the edge (09 §4: "a statement's two edges are
 * hairline seams in the dark theme"); where the neighbour is coal the grounds differ (1.11:1, the proof
 * sections' own step), the module row is the edge and no hairline stands under it. A statement's two
 * neighbours are consecutive in the alternation — one odd, one even — so at most one of the two rules
 * after the first applies. Each stands alone: an engine without `:has()` or `of S` drops that rule only
 * and keeps the hairline (and no row) on that edge. */

/* [kit] ADAPTED (theme): the dark theme's statement hairlines. `:root[data-theme="dark"]` is `:root` inside the dark media query. */
@media (prefers-color-scheme: dark) {
:root main > :is(.s3-sea, .s3-sec--statement) {
  box-shadow:
    inset 0 1px 0 var(--line),
    inset 0 -1px 0 var(--line);
}

:root main > :nth-child(even of :not(.s3-sea, .s3-sec--statement, [hidden], script, template)) + :is(.s3-sea, .s3-sec--statement) {
  box-shadow: inset 0 -1px 0 var(--line);
}

:root main > :is(.s3-sea, .s3-sec--statement):has(+ :nth-child(even of :not(.s3-sea, .s3-sec--statement, [hidden], script, template))) {
  box-shadow: inset 0 1px 0 var(--line);
}
}

/* [kit] site.css L1239-1277 */
/* THE STATEMENT'S SEAM (the page-blueprint phase; 09 §5; bodies.ts `seamRow`): one row of 22px modules
 * on each edge of a statement, reaching 22px into its neighbour — the page breaking into a code's
 * modules at the one place two grounds meet.
 * ⚠ DRAWN IN THE STATEMENT'S OWN GROUND (every section follows the theme, 2026-09-24): `--ground`,
 * inherited from the statement, so the row reads as the statement's edge dissolving into modules over
 * its neighbour — mist over white (1.18:1) or fog (1.08) in the light theme, black over coal (1.11) in
 * the dark: the transition between the two grounds, in either theme. Until then it was black in both
 * themes — a black stripe between two light grounds once the statement turned light, and nothing at
 * all on the dark theme's black. WHERE THE TWO GROUNDS ARE EQUAL (a black neighbour in the dark theme)
 * the row is not painted (`fill: transparent`) and the hairline above is the edge.
 * Placed in the neighbour's air (every section keeps at least 32px of it), above the neighbour's ground
 * (`z-index: 1`), never over a word. The row is the section's width and clips the rest (contract §20).
 * Not drawn where there is no neighbour — the top of the page's first section stands under the header
 * — nor in print or the order's phone shell: those stay `display: none`, and the dark theme's choice is
 * made with the FILL, so it never out-weighs them. */
.s3-sea,
.s3-sec--statement {
  position: relative;
}

svg.s3-seam {
  position: absolute;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: 22px;
  fill: var(--ground);
  pointer-events: none;
}

.s3-seam--t {
  bottom: 100%;
}

.s3-seam--b {
  top: 100%;
}

/* [kit] ADAPTED (theme): the seam rows of the dark theme. `:root[data-theme="dark"]` is `:root` inside the dark media query. */
@media (prefers-color-scheme: dark) {
:root svg.s3-seam {
  fill: transparent;
}

:root main > :nth-child(even of :not(.s3-sea, .s3-sec--statement, [hidden], script, template)) + :is(.s3-sea, .s3-sec--statement) > .s3-seam--t {
  fill: var(--ground);
}

:root main > :is(.s3-sea, .s3-sec--statement):has(+ :nth-child(even of :not(.s3-sea, .s3-sec--statement, [hidden], script, template))) > .s3-seam--b {
  fill: var(--ground);
}
}

/* [kit] site.css L1291-1310 */
main > :first-child > .s3-seam--t {
  display: none;
}

/* ⚠ A SEAM NEVER STANDS UNDER THE HEADER (dark is dark, 2026-09-24): the top row of the first
 * section that paints anything is hidden even when something invisible — an island, a template, a
 * hidden block — comes before it in <main>. On its own, so an engine that cannot read a complex
 * `:not()` drops this rule alone and keeps the one above. Once scrolled, every other row passes under
 * the SOLID bar (20-chrome.css, `z-index: 40` over the rows' 1) and is never seen through it. */
main > :not(:is(section, article, div, aside, nav, form):not([hidden]) ~ *) > .s3-seam--t {
  display: none;
}

/* A seam is a child of its section, so the section's resolve (M2, 60-reveal) carries it in with the
 * rest; it has no motion of its own. */
@media print {
  svg.s3-seam {
    display: none;
  }
}

/* [kit] ======== 11 · THE SECTION HEAD · A STATEMENT PAGE HEAD · BUTTON ROWS · GRIDS · THE PAGE HEAD ======== */

/* [kit] site.css L1338-1445 */
/* ── The section head (09 §4 pattern B) ──────────────────────────────────────────────────
 * LEFT-ALIGNED, as a product company's page heads are: the words held to `--wrap-text`, and anything
 * the head carries beside them (a "see all" button; the section QR the motif phase adds) at its
 * right, WRAPPING under the words before anything overlaps (contract §19: the text block
 * `flex: 1 1 32ch; min-width: 0`, the other items `flex: 0 0 auto`).
 * On a STATEMENT the head is centred (09 §4 pattern A: content centred), the extra item under it. */
.s3-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin: 0 0 var(--y-head);
  text-align: left;
}

.s3-sec-head > div {
  flex: 1 1 32ch;
  min-width: 0;
  max-width: var(--wrap-text);
}

.s3-sec-head > :not(div) {
  flex: 0 0 auto;
  max-width: 100%;
}

.s3-sec-head .s3-lede {
  margin: var(--sp-4) 0 0;
}

:is(.s3-sea, .s3-sec--statement) .s3-sec-head {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

:is(.s3-sea, .s3-sec--statement) .s3-sec-head > div {
  flex: none;
  width: 100%;
}

:is(.s3-sea, .s3-sec--statement) .s3-sec-head > div,
:is(.s3-sea, .s3-sec--statement) .s3-sec-head .s3-lede {
  margin-left: auto;
  margin-right: auto;
}

/* A statement's section head speaks at Display 2: one line, one lede (09 §4 A). */
:is(.s3-sea, .s3-sec--statement) .s3-sec-head .s3-h2 {
  font-size: var(--fs-d2);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

/* "Skenirajte me." is the one statement besides the hero whose line is Display 1 (09 §8.14): the
 * sentence the whole site is about. */
.s3-sec--statement .s3-sec-head .s3-h2 {
  font-size: var(--fs-d1);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

/* The page head of every single-column page (09 §4 B): LEFT, the H1 and its Share on one row. A
 * statement page head (the NFC hero, /provjera/'s form sits after its head) is centred. */
.s3-p-hero.s3-sea > .s3-wrap:not(.s3-narrow) {
  text-align: center;
}

.s3-p-hero.s3-sea > .s3-wrap:not(.s3-narrow) :is(.s3-lede, .s3-note) {
  margin-left: auto;
  margin-right: auto;
}

.s3-p-hero.s3-sea > .s3-wrap:not(.s3-narrow) :is(.s3-btns, .s3-p-price, .s3-h-row) {
  justify-content: center;
}

.s3-p-hero.s3-sea > .s3-wrap:not(.s3-narrow) .s3-note {
  max-width: 62ch;
  text-align: left;
}

/* A row of buttons, a "read more" line — under the content, on the head's side. */
.s3-btns--after {
  margin-top: var(--sp-6);
}

.s3-more {
  margin: var(--sp-6) 0 0;
}

:is(.s3-sea, .s3-sec--statement) > .s3-wrap > :is(.s3-btns, .s3-more) {
  justify-content: center;
  text-align: center;
}

/* On a statement the ledger and its terms line stand centred as a block under the centred head,
 * held to a reading measure, so a label and its price are never a page-width apart. */
:is(.s3-sea, .s3-sec--statement) > .s3-wrap > :is(.s3-cost-wrap, .s3-terms, .s3-prices-inline) {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

:is(.s3-sea, .s3-sec--statement) > .s3-wrap > .s3-terms {
  text-align: center;
}

/* [kit] site.css L1456-1475 */
.s3-grid {
  display: grid;
  gap: var(--gap-card);
}

.s3-grid > * {
  min-width: 0;
}

.s3-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.s3-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.s3-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* [kit] site.css L1477-1496 */
/* ══════════ THE PAGE BLUEPRINTS' PATTERNS (QR redesign, the page-blueprint phase; 09 §4, §9) ══════════
 * Five small layouts every page is now built from. Each obeys the contract: every grid or flex child
 * `min-width: 0`, rows that wrap before they overlap, no fixed width on anything that holds words.
 *
 * B · THE PAGE HEAD (bodies.ts `pageHead`): the words at the left (`flex: 1 1 32ch`), and — painted
 * by 30-qr.js §2 from 1280px — the page's own code at the right (`flex: 0 0 auto`); the row wraps
 * the code under the words before it could touch them (contract §19). */
.s3-phead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-8);
}

.s3-phead-t {
  flex: 1 1 32ch;
  min-width: 0;
  max-width: 820px;
}

/* [kit] ======== 12 · THE SURFACES (card / pop / well) · THE CHOSEN STATE · THE CARD ======== */

/* [kit] site.css L1690-1819 */
/* ══════════ THE SURFACES — one list per kind (the first build's "material", in SKEN) ══════════
 * A component rule below owns its layout and never restates a ground, an edge or a shadow.
 *   CARD   the pane every block of content sits on: `--bg-card`, a hairline, the resting shadow
 *          (white on white, fog or a statement's mist with an ink hairline and a two-layer shadow;
 *          `#1c1c1e` with a white 14% hairline on the dark theme — on its black statements too — the
 *          roles list at the top names every card that can stand on a statement).
 *   POP    what floats over the page: the order summary, the menu panels, the share popover, the
 *          dialogs, the split button's menu — the card, on the longer shadow.
 *   WELL   a control INSIDE a card: an order option, the stepper, a calculator column, a contact
 *          row inside "Tko sam" — the well, a quiet hairline, no shadow (the card's shadow is the
 *          card's). An input is a well too (the forms, below). */
.s3-card,
.s3-door,
.s3-nfc-tile,
.s3-pcard,
.s3-cost-wrap,
.s3-pricecat,
.s3-q,
.s3-client,
.s3-map,
.s3-figure,
.s3-posts a,
.s3-pkg > div,
.s3-calc3,
.s3-art-close,
.s3-empty,
.s3-work-item,
.s3-aicard,
.s3-src,
.s3-race,
.s3-netp,
.s3-steps li,
.s3-have a,
.s3-have-plain,
.s3-learn a,
.s3-contact-list a,
.s3-stage,
.s3-howcard,
.s3-reader,
.s3-speedo--big,
.s3-c-biz,
.s3-pricetable.s3-facts {
  background-color: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--drop);
}

.s3-sum,
.s3-mega-panel,
.s3-pop,
.s3-dialog,
.s3-cta-menu {
  background-color: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: var(--drop-pop);
}

.s3-opt,
.s3-qty,
.s3-calc3-cols > div,
.s3-who .s3-contact-list a {
  background-color: var(--bg-well);
  border: 1px solid var(--line-2);
  box-shadow: none;
}

/* ══════════ THE CHOSEN STATE — the module turned (09 §8.10) ══════════
 * A chosen chip, tab, order option, AI-view tab and the current row of a
 * menu (the card's pill went with the flip card, 2026-09-24; its X is 30-qr.css's): the INVERSE of its ground — black on the light
 * theme's paper, white on black — with its words, its second ink and its signal restated for that
 * ground (`--inv-*`, every role set). One list, one look, everywhere. In the dark theme it is a small
 * white module: a STATE on one control (a chip, a tab, an option), never a surface — dark is dark.
 * ⚠ WRAPPED IN `:is()`: its selector list is forgiving, so an engine that cannot read `:has()` drops
 * the option's line and keeps the rest (a plain list would be dropped whole). */
:is(
    .s3-opt:has(input:checked),
    .s3-chip[aria-pressed="true"],
    .s3-tab[aria-selected="true"],
    .s3-ai-tabs button[aria-selected="true"],
    .s3-mega-row[aria-current="page"]
  ) {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
  --fg: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
  --fg-3: var(--inv-fg-2);
  --accent-t: var(--inv-accent);
}

/* ── The card — the resting pane ────────────────────────────────────────────────────── */
.s3-card {
  position: relative;
  min-width: 0;
  border-radius: var(--r-2);
  padding: clamp(20px, 2.4vw, 28px);
  text-align: start;
}

.s3-card h3 {
  margin-bottom: 8px;
}

.s3-card p {
  color: var(--fg-2);
}

.s3-card p:last-child {
  margin-bottom: 0;
}

/* A card whose heading, text and buttons stack with the same air between each (the "Javite se"
 * close of a page, /o-meni/'s contact card, a /c/ person). */
.s3-card--stack {
  display: grid;
  gap: 16px;
}

.s3-card--stack > * {
  margin: 0;
}

a.s3-card {
  display: block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--t-3) var(--ease-settle),
    transform var(--t-3) var(--ease-settle);
}

/* [kit] ======== 13 · A HEADING AND ITS ROW · THE PAGE HEAD · THE PRICE FIGURE ======== */

/* [kit] site.css L1872-1883 */
/* A heading and the Share beside it: the Share stays beside the heading's first line; a heading too
 * long for the row wraps under itself and never pushes the Share out. */
.s3-h-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}

.s3-h-row > :first-child {
  flex: 0 1 auto;
  min-width: 0;
}

/* [kit] site.css L2319-2361 */
/* ── Product page ───────────────────────────────────────────────────────────────────── */

/* The page head opens the page itself (no breadcrumbs, fix C6), so it keeps its own air under the
 * header. */
.s3-p-hero {
  padding: clamp(40px, 7vh, 88px) 0 clamp(40px, 6vw, 72px);
}

.s3-p-hero .s3-lede {
  margin-top: 16px;
}

.s3-p-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 22px;
}

.s3-p-price > * {
  min-width: 0;
}

.s3-p-price .s3-price {
  font-size: var(--fs-fig);
}

/* /provjera/'s price is a word ("Besplatno"), set as the figure it stands in for. */
.s3-price--free {
  display: block;
  font-size: var(--fs-fig);
  margin-top: 14px;
}

.s3-p-price small {
  color: var(--fg-3);
  font-size: var(--fs-ui);
}

.s3-p-hero .s3-btns {
  margin-top: 24px;
}

/* [kit] ======== 14 · LISTS (check / not included) · THE NOTE · STEPS ======== */

/* [kit] site.css L2363-2454 */
/* A list of things included or needed: a check MODULE in the text-safe signal (a state), and for
 * the not-included list the cross in the third ink. Masks of the MODUL glyphs' own shapes, so they
 * take the colour of the ground they stand on in either theme. */
.s3-list-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.s3-list-check li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--fg-2);
}

.s3-list-check li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 0.15em;
  background-color: var(--accent-t);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.75 13.45 5.45 11.75 9.4 15.7 18.75 6.35 20.45 8.05 9.4 19.1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.75 13.45 5.45 11.75 9.4 15.7 18.75 6.35 20.45 8.05 9.4 19.1Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.s3-list-x li::before {
  background-color: var(--fg-3);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 4.95 19.05 17.5 17.5 19.05 4.95 6.5ZM17.5 4.95 19.05 6.5 6.5 19.05 4.95 17.5Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 4.95 19.05 17.5 17.5 19.05 4.95 6.5ZM17.5 4.95 19.05 6.5 6.5 19.05 4.95 17.5Z'/%3E%3C/svg%3E");
}

/* A note: a quiet wash with a 2px rule of the words' own ink on its left — the words carry the note,
 * not a colour. */
.s3-note {
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 2px solid var(--fg);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  background-color: var(--wash);
  color: var(--fg);
  font-weight: 500;
}

/* Steps — the only numbered list on a page. The numeral is a MODULE: a 40px tile of the well with
 * the number in the words' ink, the icon tile's own shape (10-modul.css). */
.s3-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: s3-step;
  display: grid;
  gap: var(--gap-card);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.s3-steps li {
  counter-increment: s3-step;
  position: relative;
  min-width: 0;
  padding: 22px 22px 20px;
  border-radius: var(--r-2);
}

.s3-steps li::before {
  content: counter(s3-step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  font: 700 var(--fs-ui) / 1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

.s3-steps b {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.s3-steps p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

/* [kit] ======== 15 · THE COST TABLE (the ledger, a real <table>) · THE TERMS LINE ======== */

/* [kit] site.css L2456-2608 */
/* ── The cost table (a LEDGER, 09 §4 D) ─────────────────────────────────────────────────
 * In a card (on a statement, a white card). A heavier hairline under the head, a zebra wash, the
 * figures tabular. ⚠ ON A PHONE THE COLUMNS FOLD, THEY NEVER SCROLL (fix C16): below 640px each row
 * is a small stack — the item, then each value with its column's name beside it (`data-l`,
 * `buildCost()`); the head is hidden VISUALLY only. */
.s3-cost {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.s3-cost-wrap {
  border-radius: var(--r-2);
  overflow: hidden;
}

.s3-cost th,
.s3-cost td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
  text-align: left;
}

.s3-cost th:first-child,
.s3-cost td:first-child {
  padding-left: 20px;
}

.s3-cost th:last-child,
.s3-cost td:last-child {
  padding-right: 20px;
}

.s3-cost thead th {
  font: 600 var(--fs-xs) / 1.3 var(--f-ui);
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}

.s3-cost tbody tr:nth-child(even) td {
  background-color: var(--wash);
}

.s3-cost td + td,
.s3-cost th + th {
  text-align: right;
}

.s3-cost td + td {
  color: var(--fg);
  font-weight: 500;
}

.s3-cost tbody tr:last-child td {
  border-bottom: 0;
}

.s3-cost tfoot td {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--fg);
}

.s3-cost tfoot td + td {
  color: var(--accent-t);
}

@media (max-width: 640px) {
  .s3-cost thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .s3-cost,
  .s3-cost tbody,
  .s3-cost tfoot,
  .s3-cost tr {
    display: block;
  }

  .s3-cost tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-2);
  }

  .s3-cost tbody tr:nth-child(even) {
    background-color: var(--wash);
  }

  .s3-cost tbody tr:nth-child(even) td {
    background-color: transparent;
  }

  .s3-cost tbody tr:last-child {
    border-bottom: 0;
  }

  .s3-cost tfoot tr {
    border-bottom: 0;
    border-top: 1px solid var(--line);
  }

  .s3-cost td,
  .s3-cost th:first-child,
  .s3-cost td:first-child,
  .s3-cost th:last-child,
  .s3-cost td:last-child {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 3px 0;
    border: 0;
  }

  .s3-cost td > * {
    min-width: 0;
  }

  .s3-cost td:first-child {
    display: block;
    padding-bottom: 6px;
    font-weight: 600;
    color: var(--fg);
  }

  .s3-cost tfoot td {
    border-top: 0;
  }

  .s3-cost td[data-l]::before {
    content: attr(data-l);
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--fg-3);
    text-align: left;
  }
}

.s3-terms {
  margin-top: 14px;
  max-width: 78ch;
  color: var(--fg-3);
  font-size: var(--fs-ui);
}

/* [kit] ======== 16 · A LIST OF ROWS (label left, price right) ======== */

/* [kit] site.css L2638-2667 */
/* A price list under a section: label left, price right, a hairline between — the ledger row
 * (09 §4 D): the label takes what is left and wraps, the price at most half the row, wrapping by
 * words. Held to the reading measure. */
.s3-prices-inline {
  list-style: none;
  max-width: var(--wrap-text);
  margin: 14px 0 0;
  padding: 0;
  display: grid;
}

.s3-prices-inline li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(48%);
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}

.s3-prices-inline li > :last-child {
  text-align: right;
}

@media (max-width: 479px) {
  .s3-prices-inline li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* [kit] ======== 17 · EMPTY RESULT · FAQ ROWS · LINK CARDS ======== */

/* [kit] site.css L2750-2879 */
/* ══════════ AN EMPTY RESULT ALWAYS OFFERS A WAY OUT (fix C17) ══════════ */
.s3-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 24px;
  border-radius: var(--r-2);
  text-align: center;
}

.s3-empty p {
  margin: 0;
  color: var(--fg-2);
}

.s3-empty .s3-btns {
  justify-content: center;
}

/* ══════════ THE FAQ (09 §8.11) ══════════
 * `<details>` rows between hairlines; the question is the summary, an H4, and beside it a PLUS
 * drawn from two modules that turns 45° into a cross when the row opens. Real `<details>`, so it
 * works with scripting off, and a `#pitanje-N` link opens its row (site.js §15). */
.s3-faq {
  max-width: 860px;
  border-top: 1px solid var(--line);
  text-align: left;
}

.s3-faq details {
  border-bottom: 1px solid var(--line);
}

/* ⚠ BOTH MARKER SUPPRESSIONS: Safari draws the triangle through `::-webkit-details-marker` and
 * ignores `list-style`; every other engine does the opposite. */
.s3-faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 20px 0;
  cursor: pointer;
  color: var(--fg);
  font: 600 var(--fs-h4) / 1.35 var(--f-ui);
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}

.s3-faq summary > span {
  min-width: 0;
}

.s3-faq summary::-webkit-details-marker {
  display: none;
}

.s3-faq-mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--t-1) var(--ease);
}

.s3-faq-mark::before,
.s3-faq-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background-color: var(--fg);
}

.s3-faq-mark::after {
  transform: rotate(90deg);
}

.s3-faq details[open] .s3-faq-mark {
  transform: rotate(45deg);
}

.s3-faq details > div {
  max-width: 68ch;
  padding: 0 0 24px;
  color: var(--fg-2);
}

.s3-faq details > div p:last-child {
  margin-bottom: 0;
}

/* "Kako to radi" — links to explainers, as cards. */
.s3-learn {
  display: grid;
  gap: var(--gap-card);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.s3-learn a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: var(--r-2);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--t-3) var(--ease-settle),
    transform var(--t-3) var(--ease-settle);
}

.s3-learn b {
  font: 600 var(--fs-body) / 1.3 var(--f-ui);
  letter-spacing: -0.01em;
}

.s3-learn span {
  font-size: var(--fs-ui);
  color: var(--fg-3);
}

/* [kit] ======== 18 · FORMS (the order / check form: the form, question cards, options, fields, the summary card) ======== */

/* [kit] site.css L3357-3360 */
/* ── Order flow (09 §8.12) ──────────────────────────────────────────────────────────────
 * The form and its summary. Below 960px on a phone with scripting on, the same markup becomes the
 * app shell (85-order.css). 960px is the edge there too. Every question is a card; an option is a
 * MODULE TILE of the well, the chosen one turned (THE CHOSEN STATE); the summary is a POP card. */

/* [kit] site.css L3365-3398 */
.s3-order {
  display: grid;
  gap: 24px;
  align-items: start;
  text-align: left;
}

.s3-order > * {
  min-width: 0;
}

@media (min-width: 960px) {
  .s3-order {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 36px;
  }

  .s3-order-side {
    position: sticky;
    top: calc(var(--hdr-h) + 20px);
  }
}

.s3-order-form {
  display: grid;
  gap: 16px;
  min-width: 0;
  text-align: left;
}

/* "Nothing is required" — the first line of every order form. */
.s3-order-note {
  margin: 0;
}

/* [kit] site.css L3400-3516 */
.s3-q {
  min-width: 0;
  margin: 0;
  padding: 20px 20px 18px;
  border-radius: var(--r-2);
  text-align: left;
}

.s3-q legend,
.s3-q > label.s3-q-l {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 0;
  font: 600 var(--fs-body) / 1.35 var(--f-ui);
  letter-spacing: -0.01em;
}

/* ⚠ A FLOATED LEGEND IS NOT A "RENDERED LEGEND": it leaves the card's top hairline whole (a rendered
 * legend sits ON the fieldset's border and cuts it) and wraps inside the card like any heading. What
 * follows it starts on its own line under it. */
.s3-q legend {
  float: left;
}

.s3-q legend + * {
  clear: both;
}

.s3-q-hint {
  margin: -4px 0 12px;
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

/* A hint that follows the options rather than introducing them. */
.s3-q-hint--after {
  margin: 10px 0 0;
}

.s3-opts {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.s3-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: var(--r-1);
  color: var(--fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-1) var(--ease),
    border-color var(--t-1) var(--ease),
    color var(--t-1) var(--ease);
}

.s3-opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.s3-opt > span {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-ui);
}

.s3-opt small {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  color: var(--accent-t);
  font-size: var(--fs-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: break-word;
}

.s3-opt:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The mark: a ring for "one of", a module for "several" — in the words' own ink, so a chosen
 * (turned) option's mark turns with it; chosen, it fills with a ring of the tile's own ground. */
.s3-opt::before {
  content: "";
  order: -1;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.s3-opt[data-kind="many"]::before {
  border-radius: var(--r-m);
}

.s3-opt:has(input:checked)::before {
  background-color: currentColor;
  box-shadow: inset 0 0 0 3px var(--inv-bg);
}

/* [kit] site.css L3559-3606 */
.s3-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.s3-field > span {
  min-width: 0;
  color: var(--fg);
  font-size: var(--fs-ui);
  font-weight: 500;
}

/* An input is a WELL, 48px, the card's corner, a hairline; the focus ring replaces the hairline. The
 * placeholder is the SECOND ink: the third on the dark well would be 4.17:1. */
.s3-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  font-size: var(--fs-ui);
}

.s3-input::placeholder {
  color: var(--fg-2);
  opacity: 1;
}

.s3-input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: transparent;
}

textarea.s3-input {
  min-height: 110px;
  resize: vertical;
}

.s3-details-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* [kit] site.css L3608-3636 */
/* The summary — a POP card, the pane nearest the reader. */
.s3-sum {
  min-width: 0;
  padding: 20px;
  border-radius: var(--r-2);
  text-align: left;
}

.s3-sum-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-2);
}

.s3-sum-total > * {
  min-width: 0;
}

.s3-sum-total b {
  font-weight: 600;
}

.s3-sum-total .s3-price {
  font-size: var(--fs-fig);
}

/* [kit] site.css L3646-3666 */
.s3-sum-lines {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
}

.s3-sum-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(48%);
  gap: 12px;
}

.s3-sum-lines li span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* [kit] site.css L3674-3683 */
.s3-sum h3 {
  margin: 16px 0 8px;
  color: var(--fg-3);
  font: 600 var(--fs-xs) / 1.3 var(--f-ui);
  letter-spacing: 0;
}

.s3-sum .s3-btn {
  width: 100%;
}

/* [kit] ======== 19 · THE CONTACT ROWS (a tile, a name, a value) ======== */

/* [kit] site.css L3889-3932 */
/* THE CONTACT ROWS — here and on /o-meni/. One line, at least 56px: the small tile with the
 * channel's mark, the channel's name, and the value right-aligned in the second ink, tabular. A
 * value too long for a narrow phone wraps under the name, still right-aligned — never clipped, never
 * widening the column. A card on /o-meni/, a well inside "Tko sam" (THE SURFACES). */
.s3-contact-list {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.s3-contact-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--r-1);
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--t-1) var(--ease),
    border-color var(--t-1) var(--ease);
}

.s3-contact-k {
  min-width: 0;
  font: 600 var(--fs-ui) / 1.3 var(--f-ui);
}

.s3-contact-v {
  margin-left: auto;
  min-width: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

/* [kit] ======== 20 · PROSE (the reading face) · THE META LINE · THE TOPIC TAG ======== */

/* [kit] site.css L4178-4259 */
/* ── Articles — the reading face (09 §3) ────────────────────────────────────────────────
 * The prose is Fraunces 400 at the reading size, 1.6, held to 64ch; the headings in it are Inter. */
.s3-prose {
  text-align: left;
}

.s3-prose .s3-lede {
  max-width: none;
}

/* An article's H1 is a sentence, not a name: a step under Display 2 so a long question does not fill
 * a phone's screen. */
.s3-h1--article {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  line-height: 1.08;
}

/* A reading page that ends without a section after it (/pravno/). */
.s3-article--end {
  padding-bottom: var(--y);
}

.s3-article {
  font: 400 var(--fs-prose) / 1.6 var(--f-read);
  font-optical-sizing: auto;
}

.s3-article > * {
  max-width: 64ch;
}

.s3-article > * + * {
  margin-top: 1.1em;
}

.s3-article h2 {
  margin-top: 1.8em;
  font: 700 clamp(1.5rem, 1.25rem + 1vw, 2rem) / 1.15 var(--f-ui);
  letter-spacing: -0.02em;
}

.s3-article p {
  margin: 0;
  color: var(--fg-2);
}

.s3-article strong {
  color: var(--fg);
  font-weight: 650;
}

.s3-article ul,
.s3-article ol {
  padding-left: 1.2em;
  color: var(--fg-2);
}

.s3-article li + li {
  margin-top: 0.4em;
}

.s3-article blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--fg);
  color: var(--fg);
  font: 500 var(--fs-lead) / 1.5 var(--f-read);
}

/* The article's own inserts speak the site's UI face: a note, the tables, the panels. */
.s3-article :is(.s3-note, .s3-pricetable, .s3-netp, .s3-calc3, .s3-figure, .s3-btns, .s3-speedo) {
  font-family: var(--f-ui);
}

.s3-article .s3-note {
  font-size: var(--fs-ui);
}

.s3-article a {
  color: var(--fg);
  text-decoration-color: var(--accent-t);
}

/* [kit] site.css L4309-4322 */
/* The meta line: the topic as a quiet tag, the reading time, the date — one wrapping row. */
.s3-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 14px;
  color: var(--fg-3);
  font-size: var(--fs-ui);
}

.s3-art-meta > * {
  min-width: 0;
}

/* [kit] site.css L4444-4453 */
/* An article's topic as a quiet TAG (the tag row's look: a hairline pill in the second ink) — on a
 * post card and in an article's meta line. */
.s3-post-topic {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--fg-2);
  font: 500 var(--fs-xs) / 1.35 var(--f-ui);
}

/* [kit] ======== 21 · THE PRICE LEDGER (a card with a two-column <table>) AND THE TEN THINGS CHECKED ======== */

/* [kit] site.css L4512-4623 */
/* ── Pricing (09 §8.5, the LEDGER) ──────────────────────────────────────────────────────
 * Each price table is a card of the theme's card ground (the page-blueprint phase: /cijene/ is a
 * proof ground now, 09 §9), held to a reading measure and LEFT under the page head, one after another; the
 * figures in the text-safe signal, tabular. ⚠ ON A PHONE A ROW NEVER SCROLLS: below 480px it stacks,
 * the price under its label, right-aligned. */
.s3-pricecat {
  max-width: 920px;
  margin-left: 0;
  margin-right: 0;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3.4vw, 36px) clamp(12px, 2vw, 20px);
  border-radius: var(--r-2);
  text-align: left;
}

.s3-pricecat + .s3-pricecat {
  margin-top: 32px;
}

/* Each category's name heads its table, with its own Share beside it (DEC 2026-09-23 row 22). */
.s3-pricecat .s3-h-row {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.s3-pricetable {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.s3-pricetable td {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}

.s3-pricetable td:last-child {
  width: 46%;
  padding-left: 16px;
  color: var(--accent-t);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.s3-pricetable tr:last-child td {
  border-bottom: 0;
}

.s3-pricetable td a {
  text-decoration: none;
}

@media (max-width: 479px) {
  .s3-pricetable,
  .s3-pricetable tbody,
  .s3-pricetable tr,
  .s3-pricetable td {
    display: block;
  }

  .s3-pricetable tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-2);
  }

  .s3-pricetable tr:last-child {
    border-bottom: 0;
  }

  .s3-pricetable td {
    padding: 0;
    border-bottom: 0;
  }

  .s3-pricetable td:last-child {
    width: auto;
    padding: 4px 0 0;
  }
}

/* The same table carries the business facts on /pravno/, where the right-hand column is an address
 * or an e-mail, not a price: set as text, in the words' ink. */
.s3-article .s3-pricetable td:last-child {
  color: var(--fg);
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* …AS A LEDGER CARD (the page-blueprint phase, 09 §9 "/pravno/: … the facts ledger"): the card's
 * ground, edge and corner (THE SURFACES) on the table itself — `separate` borders, so the corner
 * rounds — with the rows' hairlines inside it. In the UI face: these are facts, not prose. */
.s3-pricetable.s3-facts {
  border-collapse: separate;
  border-spacing: 0;
  padding: 6px clamp(18px, 3vw, 28px);
  border-radius: var(--r-2);
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
}

.s3-pricetable.s3-facts td:first-child {
  padding-right: 16px;
  color: var(--fg-2);
}

@media (hover: hover) {
  .s3-pricetable td a:hover {
    text-decoration: underline;
  }
}

/* [kit] site.css L4661-4699 */
/* ── Provjera ─────────────────────────────────────────────────────────────────────────── */

/* The ten things checked: wells, each with its number as a module. */
.s3-cats10 {
  list-style: none;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  margin: 0;
  padding: 0;
  counter-reset: s3-c10;
}

.s3-cats10 li {
  counter-increment: s3-c10;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-card);
}

.s3-cats10 li::before {
  content: counter(s3-c10);
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: var(--bg-well);
  color: var(--fg);
  font: 700 var(--fs-ui) / 1 var(--f-ui);
  font-variant-numeric: tabular-nums;
}

/* [kit] ======== 22 · REDUCED MOTION (the global reset; the print and LED parts of the source block are not in the kit) ======== */

/* [kit] site.css L5009-5009 */
/* ── Reduced motion: a still page (09 §6) ──────────────────────────────────────────────── */

/* [kit] site.css L5011-5038: 1 of its 4 rules (the others style parts that are not in the kit) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* [kit] ======== 23 · 10-modul.css · THE ICON TILE (.s3-ico) AND THE BARE GLYPH (.s3-glyph) ======== */

/* [kit] 10-modul.css L1-26 */
/* sorich.hr v3 — partial 10 · MODUL, THE ICON TILE (QR redesign, the design-system phase;
 * docs/HANDOFFS/sorich-v3-upgrade/09-qr-dizajn.md §7).
 *
 * The glyphs themselves are INLINE SVG, drawn in html.ts (`MODUL`, `ico()`, `coin()`,
 * `coinMark()`, `ICON`): one filled path per glyph, `fill="currentColor"`, every glyph a union of
 * modules (rounded rectangles with the module's 2-unit corner, circles, bars) minus a few cut-outs.
 * No strokes anywhere. This file only gives them their two ways of standing on a page:
 *
 *   .s3-ico            THE TILE — a 40 × 40 module of `--bg-well`, the card's `--r-1` corner, a
 *                      20px glyph in `--fg`. `--sm` 32 / 16 (a contact row), `--lg` 48 / 24.
 *   .s3-glyph          THE BARE GLYPH — 1.15em, in the colour of the words beside it (a tab, a
 *                      chip, a price row). `ico(key, { bare: true })`.
 *
 * ⚠ A TILE TURNS, IT NEVER FADES: hovered, pressed or chosen it INVERTS — the tile takes the
 * inverse ground and the glyph the inverse ink (`--inv-bg`, `--inv-fg`, restated by every role set
 * in site.css, so the turn is right in both themes, on a statement and on a paper card). The
 * answers to a pointer live in 90-press.css with every other hover; the chosen states here.
 *
 * ⚠ BRAND MARKS (WhatsApp, Instagram, Google) sit in the same tile through `coinMark()`; they are
 * the brands' own filled silhouettes and take the tile's ink like any glyph — never redrawn.
 *
 * The 57-glyph stroked MASK family this file replaces is archived with its rules:
 * `_archive/sorich-v3-qr/assets/css/10-icons.css`.
 *
 * Made by sorich.hr (https://sorich.hr/#top)
 */

/* [kit] 10-modul.css L28-87 */
.s3-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-1);
  background-color: var(--bg-well);
  color: var(--fg);
  font-style: normal;
  line-height: 0;
  transition:
    background-color var(--t-1) var(--ease),
    color var(--t-1) var(--ease);
}

.s3-ico > svg {
  display: block;
  width: 20px;
  height: 20px;
}

.s3-ico--sm {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.s3-ico--sm > svg {
  width: 16px;
  height: 16px;
}

.s3-ico--lg {
  width: 48px;
  height: 48px;
}

.s3-ico--lg > svg {
  width: 24px;
  height: 24px;
}

/* The bare glyph stands in a line of words: its box is the glyph, sized to the words, sitting on
 * their optical centre. */
.s3-glyph {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}

/* ── the tile turns with its chosen control (the chosen states; the hover is 90-press.css) ──
 * A chosen tab or chip is itself inverted (site.css), and its bare glyph simply takes the chosen
 * words' colour; a TILE inside something chosen turns with it. */
:is([aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) > .s3-ico {
  background-color: var(--inv-fg);
  color: var(--inv-bg);
}

/* [kit] ======== 24 · 20-chrome.css · THE HEADER, ITS NAV, THE PHONE SHEET ======== */

/* [kit] 20-chrome.css L1-31 */
/* sorich.hr v3 — partial 20 · THE CHROME (QR redesign, the design-system phase; 09-qr-dizajn.md
 * §8.1 the header, §8.2 the menus): the header, its three menus, its split WhatsApp button, the
 * reading line, the hidden scrollbar, the phone sheet and the floating button.
 *
 *   · THE BAR IS SOLID (dark is dark, Ante 2026-09-24) — the page's own ground, opaque: white in the
 *     light theme, black in the dark. A bottom hairline, the 2px signal reading line on its top edge.
 *     Nothing shows through it or behind it: no glass, no blur (the site now has NO backdrop filter),
 *     so a statement's module seam or the hero's code scrolling under it is simply covered, and its
 *     inks are exact (`#4a4a50` 8.80 on white, `#a1a1a6` 8.16 on black; the current link 21.00). In
 *     the theme wipe it changes WITH the page, in the same QR modules — one picture of the whole
 *     viewport under one mask, no layer of its own (site.css, Page transitions; 2026-09-24, "prijelaz
 *     teme i kroz zaglavlje"). In a page cut it holds still on its own layer (M7).
 *   · Left the wordmark — the printed cards': the word in the words' own ink, the ".hr" gold
 *     (2026-09-25); the seven links at the TRUE CENTRE from 1100px (Početna · Usluge ▾ ·
 *     Djelatnosti ▾ · Radovi · Cijene · Članci ▾ · O meni); on the right Share, the theme, the other
 *     language and the split WhatsApp button — the signal, the icon alone under 1360px — and the
 *     burger under 1100px.
 *   · The current section: its link in the full ink with a 2px signal module under it; the parent
 *     stays marked on its children through `aria-current="true"` (chrome.ts `currentOf()`).
 *   · The menus hang from the bar as one POP panel (site.css THE SURFACES); inside, the contract's
 *     grid — three columns for three categories — each row a two-track line whose name and price both
 *     wrap; the page the visitor is on is the module turned (site.css THE CHOSEN STATE).
 *
 * ⚠ HOVERS ARE NOT HERE: every pointer-only hover and every press lives in 90-press.css.
 * ⚠ THE BREAKPOINT IS 1100px AND IT IS WRITTEN IN THREE PLACES: here, chrome.ts `NOSCRIPT` and
 * 20-chrome.js. Move one, move all three.
 * ⚠ `white-space: nowrap` is allowed on the seven bar links and nowhere else here: they are
 * constants (contract §1, 09 §8.1).
 *
 * Made by sorich.hr (https://sorich.hr/#top)
 */

/* [kit] 20-chrome.css L33-42 */
/* ── the page has no painted scrollbar (studio 09-10: "makni scroll desno") ──────────────
 * It hides a PAINTED BAR and changes no behaviour; it must never become `overflow: hidden`. The
 * reading line below tells a visitor where they are instead. */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* [kit] 20-chrome.css L44-91 */
/* ── the bar ─────────────────────────────────────────────────────────────────────────────
 * Sticky, the only sticky thing in the chrome, SOLID (the ground restated here with THE CHROME's,
 * site.css, so no later rule can leave it see-through). Its height is the token exactly, so the
 * hairline is an inset shadow that takes no height. Above everything in <main> (`z-index: 40`; the
 * statement seams are 1). ⚠ Nothing fixed lives in it (the phone sheet is its SIBLING, the share
 * popover and the floating button are at body level) — the rule stands although the blur that made
 * the bar their containing block is gone. */
.s3-hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--bg);
  box-shadow: inset 0 -1px 0 var(--line);
}

.s3-hdr-in {
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The logo: the outlined wordmark, the word in the words' ink and the ".hr" in the cards' gold
 * (site.css THE CHROME). It is the part of the row that gives way on a narrow phone, never the
 * WhatsApp button or the burger. */
.s3-logo {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  padding: 6px 0;
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.s3-logo svg {
  width: 124px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 137.015 / 25.347;
}

@media (min-width: 560px) {
  .s3-logo svg {
    width: 140px;
  }
}

/* [kit] 20-chrome.css L93-161 */
/* ── the links, in the centre ─────────────────────────────────────────────────────────────
 * `--nav-px` is each item's side padding and the inset of its current-section module: 6px from
 * 1100px, where the bar is tightest, 12px from 1280px. */
.s3-nav {
  --nav-px: 6px;
  display: none;
  align-items: center;
  gap: 2px;
}

.s3-nav > a,
.s3-nav > .s3-mega > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--nav-px);
  border-radius: var(--r-1);
  color: var(--fg-2);
  font: 500 var(--fs-ui) / 1 var(--f-ui);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-1) var(--ease);
}

.s3-nav > .s3-mega > summary::-webkit-details-marker {
  display: none;
}

.s3-nav > .s3-mega > summary::marker {
  content: "";
}

/* THE CURRENT SECTION: a 2px module of the signal under its link (09 §8.1). `[aria-current]` matches
 * "page" and "true" (an ancestor in the trail). The words turn to the full ink as well, so the state
 * never rests on the green line alone. */
.s3-nav > a::after,
.s3-nav > .s3-mega > summary::after {
  content: "";
  position: absolute;
  left: var(--nav-px);
  right: var(--nav-px);
  bottom: 6px;
  height: 2px;
  border-radius: var(--r-m);
  background-color: var(--accent-t);
  transform: scaleX(0);
  transition: transform var(--t-2) var(--ease);
}

.s3-nav > a[aria-current],
.s3-nav > .s3-mega > summary[aria-current],
.s3-mega[open] > summary {
  color: var(--fg);
}

.s3-nav > a[aria-current]::after,
.s3-nav > .s3-mega > summary[aria-current]::after {
  transform: scaleX(1);
}

.s3-mega[open] > summary .s3-caret {
  transform: rotate(180deg);
}

/* [kit] 20-chrome.css L304-311 */
/* ── the tools, hard right ───────────────────────────────────────────────────────────── */
.s3-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

/* [kit] 20-chrome.css L359-364 */
.s3-hdr-wa.s3-btn {
  --b-pad: 0 16px;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--fs-ui);
}

/* [kit] 20-chrome.css L398-412 */
@media (max-width: 767px) {
  .s3-hdr-wa.s3-btn {
    --b-pad: 0 12px;
  }

  .s3-hdr-wa > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* [kit] 20-chrome.css L520-640 */
/* ── the phone sheet (fix C1, C9) ─────────────────────────────────────────────────────────
 * A full sheet under the bar in the page's own ground (`.s3-chrome`), the same seven items, then
 * Provjera and Digitalni profili, then the tools.
 *   · CLOSED = `display: none` without `data-open`, and `inert` too (20-chrome.js). With scripting
 *     off chrome.ts's `<noscript>` style puts it in the page's flow instead.
 *   · IT DOES NOT LOCK THE PAGE: no `overflow: hidden` anywhere; what is behind it is `inert`.
 *   · Its top is the header's height, the token, exactly. */
.s3-sheet {
  position: fixed;
  top: var(--hdr-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 39;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 0 calc(40px + env(safe-area-inset-bottom));
  box-shadow: inset 0 1px 0 var(--line);
}

.s3-sheet:not([data-open]) {
  display: none;
}

.s3-sheet-in {
  display: grid;
  gap: 0;
}

.s3-sheet details {
  border-bottom: 1px solid var(--line);
}

.s3-sheet summary,
.s3-sheet-in > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  color: var(--fg);
  font: 600 1.25rem / 1.2 var(--f-ui);
  letter-spacing: -0.015em;
  text-decoration: none;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.s3-sheet summary::-webkit-details-marker {
  display: none;
}

.s3-sheet summary::marker {
  content: "";
}

.s3-sheet details[open] > summary .s3-caret {
  transform: rotate(180deg);
}

.s3-sheet-in > a {
  border-bottom: 1px solid var(--line);
}

.s3-sheet ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

/* A row of a group: the menus' two-track row — the name wraps on the left, the price holds its own
 * right-aligned track (at most 45% of the row) on the first line's baseline. */
.s3-sheet-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(45%);
  align-items: baseline;
  column-gap: 16px;
  min-height: 44px;
  padding: 11px 0;
  color: var(--fg-2);
  line-height: 1.35;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.s3-sheet-row > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.s3-sheet-row > small {
  justify-self: end;
  min-width: 0;
  color: var(--accent-t);
  font-size: var(--fs-ui);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* The page and the group it belongs to: the full ink and the signal module under the words. */
.s3-sheet :is(summary, a)[aria-current] {
  color: var(--fg);
}

.s3-sheet summary[aria-current],
.s3-sheet-in > a[aria-current],
.s3-sheet-row[aria-current] > span {
  text-decoration: underline var(--accent-t) 2px;
  text-underline-offset: 7px;
}

.s3-sheet-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* [kit] 20-chrome.css L642-697 */
/* ── from 1100px: the three-column bar, the links at the TRUE CENTRE ────────────────────────
 * Two EQUAL side columns (`minmax(0, 1fr) auto minmax(0, 1fr)`), so the middle is centred on the
 * bar whatever the logo and the tools measure; the bar is `--wrap-wide` from here. */
@media (min-width: 1100px) {
  .s3-hdr .s3-wrap {
    max-width: var(--wrap-wide);
  }

  .s3-hdr-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
  }

  .s3-logo {
    grid-column: 1;
    justify-self: start;
  }

  .s3-logo svg {
    width: 156px;
  }

  .s3-nav {
    display: flex;
    grid-column: 2;
    justify-self: center;
  }

  .s3-tools {
    grid-column: 3;
    justify-self: end;
    margin-left: 0;
    gap: 2px;
  }

  .s3-burger {
    display: none;
  }

  .s3-sheet {
    display: none !important;
  }
}

@media (min-width: 1280px) {
  .s3-nav {
    --nav-px: 12px;
  }
}

@media (min-width: 1360px) {
  .s3-hdr-in {
    gap: 16px;
  }
}

/* [kit] ======== 25 · 40-footer.css · THE FOOTER ======== */

/* [kit] 40-footer.css L1-19 */
/* sorich.hr v3 — partial 40 · THE FOOTER, SLIM (QR redesign, the design-system phase;
 * 09-qr-dizajn.md §8.13).
 *
 * The page's own ground (`.s3-chrome`, site.css THE CHROME) under a hairline, three rows in the wrap:
 *   1 · the wordmark (the word in the words' ink, the ".hr" in the signal `--accent-t` — it was gold
 *       for one morning on 2026-09-25 and went back to the site's own green the same day, chrome.ts
 *       `WM`), then the ways to reach the studio as TEXT LINKS with a 16px MODUL glyph each (the phone,
 *       the e-mail, WhatsApp, Instagram, Google, "Spremi kontakt"), wrapping as a row — each at least 44px tall, each one's words free to break (an e-mail
 *       address on a 320px phone);
 *   2 · the studio at a glance (2026-09-25), a definition list of short pairs — area, languages, reply
 *       time, and the working hours once they are set — in one wrapping row at the floor size;
 *   3 · the legal line in the third ink at the floor size.
 * No instruments, no bubbles, no watermark (chrome.ts `buildFooter`). The `/c/` pages carry the
 * legal line alone (profiles-bake.ts).
 *
 * ⚠ HOVERS ARE IN 90-press.css, like every other pointer-only hover.
 *
 * Made by sorich.hr (https://sorich.hr/#top)
 */

/* [kit] 40-footer.css L21-105 */
.s3-foot {
  position: relative;
  padding: clamp(40px, 6vw, 64px) 0 calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

/* The `/c/` pages carry the legal line alone. */
.s3-foot:has(.s3-foot-legal--only) {
  padding-top: 28px;
}

.s3-foot-in {
  display: grid;
  gap: var(--sp-6);
}

/* ── row 1: the wordmark and the contact links ─────────────────────────────────────────── */
.s3-foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-7);
}

.s3-foot-logo {
  display: block;
  flex: none;
  padding: 6px 0;
  color: var(--fg);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.s3-foot-logo svg {
  width: 132px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 137.015 / 25.347;
}

.s3-foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.s3-foot-links > li {
  min-width: 0;
  max-width: 100%;
}

.s3-foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  color: var(--fg-2);
  font: 500 var(--fs-ui) / 1.3 var(--f-ui);
  text-decoration: none;
  transition: color var(--t-1) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.s3-foot-links a:focus-visible {
  color: var(--fg);
}

.s3-foot-links svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--fg);
}

/* The words may break inside themselves (a long e-mail address) rather than widen the row. */
.s3-foot-links a > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* [kit] 40-footer.css L117-181 */
/* ── row 2: the studio at a glance (2026-09-25; chrome.ts `buildFooter`, facts.ts `s3Glance`) ─────
 * One definition list set as ONE WRAPPING ROW of pairs: each pair (a `<div>` of one `<dt>` and one
 * `<dd>`) is a flex item that wraps as a unit, and inside it the label and its sentence wrap too, so on
 * a 320px phone a pair takes two lines instead of widening the page. The label in the third ink with
 * its colon, the sentence in the second, both at the floor size: the legal line's own tier, on the same
 * ground (the chrome's, in both themes), so it carries the contrast that line already carries. */
.s3-foot-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--sp-6);
  min-width: 0;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.s3-foot-facts > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
  max-width: 100%;
}

.s3-foot-facts dt {
  color: var(--fg-3);
}

.s3-foot-facts dt::after {
  content: ":";
}

.s3-foot-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

/* ── row 3: the legal line ────────────────────────────────────────────────────────────── */
.s3-foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  width: 100%;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-2);
  color: var(--fg-3);
  font-size: var(--fs-xs);
}

.s3-foot-legal > span {
  min-width: 0;
}

/* On the `/c/` pages the line stands alone: no rule above it. */
.s3-foot-legal--only {
  padding-top: 0;
  border-top: 0;
}

.s3-foot-legal a {
  color: var(--fg-2);
}

/* [kit] ======== 26 · 70-work.css · THE FILTER BOX (chips + the count line) ======== */

/* [kit] 70-work.css L1073-1093 */
/* ── §8 /radovi/: the filter ───────────────────────────────────────────────────────────────
 * Two rows of chips under the map — the towns, then the services — and one line that says how many
 * clients are shown. The chosen chip is the module turned (site.css THE CHOSEN STATE). */
/* Above the map since the page-blueprint phase (09 §9 "/radovi/: head (B) + filter chips"): it
 * chooses for the map and for the list alike. */
.s3-find {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 0 24px;
}

.s3-find-count {
  margin: 2px 0 0;
  color: var(--fg-3);
  font-size: var(--fs-ui);
}

.s3-find-count a {
  color: var(--fg-2);
}

/* [kit] ======== 27 · 75-pages.css · TABS, THE PRODUCT CARD, "Za koga", THE SMALL HEAD, THE STATE MODULE, THE GLANCE LIST ======== */

/* [kit] 75-pages.css L187-239 */
/* THE SITE'S TABS — since 2026-09-25 only the home AI READER's three (§14, which sets their width and
 * columns across its card). A SEGMENTED CONTROL THAT NEVER OVERFLOWS: equal columns in a well, the
 * words WRAPPING inside their tab, never out of it; the chosen tab is the module turned (site.css THE
 * CHOSEN STATE). The strip is `.s3-js-only`: with scripting off a tab set's panels would stand in turn
 * under their own small headings — the reader's do not since 2026-09-25, because the script writes
 * what is in them (§14), so they are `.s3-js-only` too and a `<noscript>` line stands in the card. */
.s3-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  width: 100%;
  margin: 0 0 clamp(24px, 3.4vh, 40px);
  padding: 4px;
  border-radius: calc(var(--r-1) + 4px);
  background-color: var(--bg-well);
}

.s3-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background-color: transparent;
  color: var(--fg-2);
  font: 600 var(--fs-ui) / 1.2 var(--f-ui);
  text-align: center;
  overflow-wrap: break-word;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--t-1) var(--ease),
    background-color var(--t-1) var(--ease);
}

.s3-tab > span {
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 700px) {
  .s3-tab {
    flex-direction: row;
    gap: 8px;
    padding: 8px 16px;
  }
}

/* [kit] 75-pages.css L282-357 */
/* ── §3 the product card (09 §8.4) ───────────────────────────────────────────────────────────
 * One card for a product wherever a product is listed: the icon tile, the name, one sentence, and at
 * the foot the "od" price — the name and the price sized to the CARD in `cqi` (contract §4), so a long
 * name or a long price line ("osnovni uz karticu, puni od 250 €") shrinks with the card and then wraps
 * inside it. Content-high, the price held to the card's foot so a row reads its prices on one line.
 * THE GRID is the contract's: as many 280px-or-wider columns as fit; four cards (`data-n="4"`) stay two
 * and two from 600px; the home glance (`--4up`) is four across from 1100px. */
.s3-pcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--gap-card);
}

.s3-pcards > * {
  min-width: 0;
}

@media (min-width: 600px) {
  .s3-pcards[data-n="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .s3-pcards--4up[data-n="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.s3-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: var(--sp-5);
  border-radius: var(--r-2);
  color: var(--fg);
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--t-3) var(--ease-settle),
    transform var(--t-3) var(--ease-settle);
}

.s3-pcard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.s3-pcard-h {
  margin: 0;
}

.s3-pcard p {
  margin: 0;
  color: var(--fg-2);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

/* The price at the card's foot is the card's FIGURE, sized to the card. */
.s3-pcard .s3-price {
  display: block;
  max-width: 100%;
  margin-top: auto;
  padding-top: 6px;
  font-size: clamp(1.0625rem, 6.5cqi, 1.625rem);
  line-height: 1.2;
}

/* [kit] 75-pages.css L359-371 */
/* ── §4 "Za koga" — the trades as doors ───────────────────────────────────────────────────── */
.s3-for {
  display: grid;
  gap: 14px;
  margin-top: clamp(36px, 5vh, 56px);
  text-align: left;
}

.s3-for-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* [kit] 75-pages.css L476-485 */
/* ── §7 product pages ──────────────────────────────────────────────────────────────────────
 * THE SMALL HEAD (Q11): the title is small, so the air under it is too. */
.s3-sec-head--label {
  gap: 12px;
  margin-bottom: clamp(24px, 3.4vh, 40px);
}

.s3-sec-head--label .s3-lede {
  margin-top: 10px;
}

/* [kit] 75-pages.css L979-987 */
/* ── §12 /pravno/ — the facts section, and what this page loaded ────────────────────────────── */
.s3-sec > .s3-article > h2:first-child,
.s3-article--after > h2:first-child {
  margin-top: 0;
}

.s3-article--after {
  padding-top: var(--y-seam);
}

/* [kit] 75-pages.css L1019-1026 */
/* One module of the signal: the panel reports live. */
.s3-netp-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--r-m);
  background-color: var(--accent-t);
}

/* [kit] 75-pages.css L1413-1459 */
/* "UKRATKO" — THE STUDIO AT A GLANCE (2026-09-25; bodies.ts `buildOMeni`, facts.ts `s3Glance`): pattern D,
 * the LEDGER — the label, then its sentence, a hairline between rows — on the page's own ground, with
 * no card, in the UI face (these are facts, not prose), the label in the second ink and the sentence in
 * the words' own, as /pravno/'s facts ledger sets them. The list is its own container: in a column under
 * 30em the label stands over its sentence; from 30em it takes a column of its own at the left. Every
 * piece is `min-width: 0` and the sentence may break inside a word, so nothing widens the column. */
.s3-glance {
  container: s3glance / inline-size;
  max-width: 64ch;
  margin: 0;
  font-family: var(--f-ui);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.s3-glance > div {
  display: grid;
  gap: 2px var(--sp-5);
  min-width: 0;
  padding: 13px 0;
}

.s3-glance > div:first-child {
  padding-top: 0;
}

.s3-glance > div + div {
  border-top: 1px solid var(--line-2);
}

.s3-glance dt {
  min-width: 0;
  color: var(--fg-2);
}

.s3-glance dd {
  min-width: 0;
  margin: 0;
  color: var(--fg);
  overflow-wrap: anywhere;
}

@container s3glance (min-width: 30em) {
  .s3-glance > div {
    grid-template-columns: minmax(0, 10em) minmax(0, 1fr);
  }
}

/* [kit] ======== 28 · 90-press.css · THE PRESS LAYER (hover, press, focus) FOR THE PARTS ABOVE ======== */

/* [kit] 90-press.css L1-32 */
/* sorich.hr v3 — partial 90 · THE PRESS LAYER, and every pointer-only hover (upgrade phase 1;
 * rewritten for the QR redesign's design system, SKEN — 09-qr-dizajn.md §6 M9, §8.9).
 *
 * Ante's ruling, 2026-09-09: *"because we are mobile first design, elements can't be opacity below 1
 * and changed on hover when there is no hover on mobile phones."*
 *   · A PRESS is the answer to a finger landing (M9): `scale(.985)` in 90ms going in, relaxing on the
 *     control's own speed coming out. The primary goes to its pressed fill (`--sig-lo`, black words
 *     8.48:1 — never fainter); a secondary fills with the well; a card settles; a chip, a tab and an
 *     order option show their chosen look under the finger.
 *   · A HOVER is a pointer's preview, and it exists only under `(hover: hover)`: the primary brightens
 *     (`--sig-hi`), a secondary fills with the well, an icon tile TURNS (the module inverts, 10-modul
 *     .css), a card lifts 4px onto the lifted shadow — the lift only where motion is welcome; under
 *     reduced motion a card answers with its shadow alone.
 *   · NOTHING RESTS BELOW FULL OPACITY.
 *
 * ⚠ THIS IS THE LAST PARTIAL ON PURPOSE: source order settles ties between equal weights, and the
 * press must beat the hover on a device that has both, so the press rules sit below the hover blocks.
 * ⚠ A CHOSEN CONTROL KEEPS ITS LOOK: every hover on a chip, a tab or an option is written for the
 * unchosen one only.
 * ⚠ The shimmer across a card under a pointer (M5) is a motion: it lives in 30-qr.css §7 with its
 *   keyframes; this file holds none.
 * ⚠ A CODE THAT DOES SOMETHING HAS ONE ANSWER, WRITTEN ONCE (Ante 2026-09-25: "svi qr kodo koji imaju
 *   aktivnost na click tribaju imat istu animaciju"). Not a rule per place — one declaration on the
 *   hook every such code carries, below under "a code that does something".
 * ⚠ THE FLIP CARD (30-qr.css §3) lifts as ONE OBJECT: the wrapper takes the lift, not the face — the
 *   face is a plane in the turning body's 3D space, with its button lying on it, and a face lifting on
 *   its own would slide out from under that button. The face keeps its shadow answer. Its two face
 *   buttons (`.s3-fbtn`) answer on their tile: the QR tile turns (the module inverts), a button on a
 *   picture deepens its scrim like the opener beside it.
 *
 * Made by sorich.hr (https://sorich.hr/#top)
 */

/* [kit] 90-press.css L34-39 */
/* ── the keyboard path: always, on every device ────────────────────────────────────────
 * The global focus ring (site.css) is the answer; a card also takes the lifted shadow, so the ring
 * never stands round a card that looks untouched. */
:is(a.s3-card, .s3-door, .s3-partner, .s3-pcard, .s3-src, .s3-posts a, .s3-have a, .s3-learn a, .s3-work-item, .s3-c-biz):focus-visible {
  box-shadow: var(--drop-lift);
}

/* [kit] 90-press.css L46-50 */
:is(a.s3-card, .s3-door, .s3-pcard, .s3-src, .s3-posts a, .s3-have a, .s3-learn a, .s3-work-item):focus-visible > .s3-ico,
:is(.s3-door, .s3-pcard, .s3-work-item):focus-visible .s3-ico {
  background-color: var(--inv-bg);
  color: var(--inv-fg);
}

/* [kit] 90-press.css L52-52 */
/* ── pointer hovers: colour and ground ─────────────────────────────────────────────────── */

/* [kit] 90-press.css L54-197: 11 of its 26 rules (the others style parts that are not in the kit); the file's first hover block */
@media (hover: hover) {
  .s3-btn--gold:hover {
    background-color: var(--accent-fill-hi);
  }

  .s3-btn--glass:hover {
    background-color: var(--bg-well);
  }

  .s3-btn--quiet:hover {
    color: var(--fg);
  }

  .s3-hdr .s3-share:hover,
  .s3-icon-btn:hover,
  .s3-lang:hover {
    background-color: var(--bg-well);
    color: var(--fg);
  }

  .s3-opt:not(:has(input:checked)):hover {
    border-color: var(--fg);
  }

  .s3-faq summary:hover > span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  .s3-tab:not([aria-selected="true"]):hover {
    background-color: var(--bg-card);
    color: var(--fg);
  }

  .s3-chip:not([aria-pressed="true"]):not([aria-current]):hover {
    background-color: var(--wash-2);
    border-color: var(--fg);
  }

  /* An icon tile TURNS under a pointer on the thing that holds it (10-modul.css): the module inverts —
   * a card, a door, a strip, a contact row. The glyph never moves. */
  :is(.s3-door, .s3-pcard, .s3-work-item, .s3-contact-list a, .s3-nfc-tile):hover .s3-ico {
    background-color: var(--inv-bg);
    color: var(--inv-fg);
  }

  /* A contact row or a "what I built" strip is a line of text in a stack, 8–12px from the next: it
   * does not lift into its neighbour, it takes the wash. */
  .s3-contact-list a:hover {
    background-color: var(--wash-2);
  }

  /* A card on a pointer: the lifted shadow (the lift itself is below, only where motion is welcome);
   * the NFC tiles are not links — no lift, no cursor, a tile turn is their whole answer. */
  :is(a.s3-card, .s3-door, .s3-partner, .s3-pcard, .s3-src, .s3-posts a, .s3-have a, .s3-learn a, .s3-work-item, .s3-c-biz):hover,
  .s3-client:hover {
    box-shadow: var(--drop-lift);
  }
}

/* [kit] 90-press.css L231-231 */
/* ── pointer hovers: the lift, only where motion is welcome ─────────────────────────────── */

/* [kit] 90-press.css L233-258: 2 of its 5 rules (the others style parts that are not in the kit) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* A card picks itself up 4px (`--lift`); a small card 2px (`--lift-sm`). */
  :is(a.s3-card, .s3-door, .s3-partner, .s3-pcard, .s3-src, .s3-posts a, .s3-c-biz):hover,
  .s3-client:hover {
    transform: translateY(var(--lift));
  }

  :is(.s3-have a, .s3-learn a):hover {
    transform: translateY(var(--lift-sm));
  }
}

/* [kit] 90-press.css L260-262 */
/* ── pointer hovers: the chrome (20-chrome.css, 40-footer.css) ─────────────────────────────
 * The header's links answer in COLOUR, never with the current-section module: that module means "you
 * are here", and a hover that drew it would say so of every link it crossed. */

/* [kit] 90-press.css L264-297: 1 of its 6 rules (the others style parts that are not in the kit); the file's hover block for the chrome */
@media (hover: hover) {
  .s3-nav > a:hover,
  .s3-nav > .s3-mega > summary:hover,
  .s3-mega-foot a:hover,
  .s3-foot-links a:hover,
  .s3-sheet-row:hover {
    color: var(--fg);
  }
}

/* [kit] 90-press.css L299-310 */
/* ── how long a press lasts (one rule for the whole site) ───────────────────────────── */

:is(.s3-btn, .s3-share, .s3-icon-btn, .s3-lang, .s3-door, .s3-partner, .s3-nfc-tile, .s3-opt, a.s3-card, .s3-pcard, .s3-src, .s3-client, .s3-faq summary, .s3-fold-sum, .s3-tab):active,
:is(.s3-have, .s3-learn, .s3-posts, .s3-contact-list, .s3-work, .s3-pricetable, .s3-deck-cap, .s3-wband-cap) a:active,
:is(.s3-chip, .s3-open, .s3-deck-go, .s3-lb-x, .s3-lb-nav):active,
:is(.s3-qty, .s3-ai-tabs) button:active,
:is(.s3-cta-more, .s3-fab-btn):active,
:is(.s3-nav, .s3-mega-panel, .s3-cta-menu, .s3-sheet, .s3-foot-links) a:active,
:is(.s3-m3-link, .s3-m3-x, .s3-m3-ctl button, .s3-m3-list button):active,
.s3-m3-pin:active .s3-m3-disc {
  transition-duration: var(--t-press);
}

/* [kit] 90-press.css L312-325 */
/* ── 1 · the primary goes to its pressed fill, never fainter (M9) ───────────────────────── */
.s3-btn--gold:active {
  background-color: var(--accent-fill-lo);
  color: var(--on-fill);
}

/* ── 2 · every button, chip and small control takes the press (M9: scale .985) ───────────── */
:is(.s3-btn, .s3-chip, .s3-tab, .s3-share, .s3-icon-btn, .s3-lang, .s3-fab-btn, .s3-deck-go):active {
  transform: scale(0.985);
}

.s3-btn--glass:active {
  background-color: var(--bg-well);
}

/* [kit] 90-press.css L336-340 */
.s3-icon-btn:active,
.s3-lang:active {
  background-color: var(--bg-well);
  color: var(--fg);
}

/* [kit] 90-press.css L342-360 */
/* ── 3 · a chip, a tab and an order option show their chosen look under the finger ──────── */
:is(.s3-chip, .s3-tab, .s3-opt, .s3-ai-tabs button):active {
  background-color: var(--inv-bg);
  border-color: var(--inv-bg);
  color: var(--inv-fg);
  --fg: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
  --fg-3: var(--inv-fg-2);
  --accent-t: var(--inv-accent);
}

/* ── 4 · a card settles — the lift given up, a hair off its size ─────────────────────────
 * `transform` restates the WHOLE value: the hover writes a translate into the same property, so a
 * press declaring only a scale would drop the card on the way in and throw it back up on the way out.
 * The shadow goes back to the resting one. */
:is(a.s3-card, .s3-door, .s3-partner, .s3-nfc-tile, .s3-pcard, .s3-src, .s3-posts a, .s3-c-biz):active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--drop);
}

/* [kit] 90-press.css L367-370 */
:is(.s3-have a, .s3-learn a):active {
  transform: translateY(0) scale(0.985);
  box-shadow: var(--drop);
}

/* [kit] 90-press.css L398-401 */
/* A row takes the wash one step further than its hover. */
:is(.s3-contact-list a, .s3-work-item):active {
  background-color: var(--wash-2);
}

/* [kit] 90-press.css L436-442 */
/* ── 5 · a text link in a row takes the full ink under the finger ─────────────────────────
 * A row is a line of text, not an object — scaling it would shear the type against its neighbours. */
.s3-pricetable a:active,
.s3-wband-cap a:active {
  color: var(--fg);
  text-decoration: underline;
}

/* [kit] 90-press.css L444-446 */
/* ── 6 · the chrome ────────────────────────────────────────────────────────────────────────
 * The split button's arrow half sinks to the pressed fill; quiet (Q26), it presses like a secondary.
 * A menu row takes the well; a link in the bar, the sheet or the footer takes the full ink. */

/* [kit] 90-press.css L464-466 */
:is(.s3-nav, .s3-mega-foot, .s3-sheet, .s3-foot-links) a:active {
  color: var(--fg);
}

/* [kit] 90-press.css L502-503 */
/* ── reduced motion: no scale on a press ─────────────────────────────────────────────────
 * The press keeps its colour answer; the size change is motion, and it goes (09 §6). */

/* [kit] 90-press.css L504-518: 1 of its 3 rules (the others style parts that are not in the kit) */
@media (prefers-reduced-motion: reduce) {
  :is(.s3-btn, .s3-chip, .s3-tab, .s3-share, .s3-icon-btn, .s3-lang, .s3-fab-btn, .s3-deck-go):active,
  :is(a.s3-card, .s3-door, .s3-partner, .s3-nfc-tile, .s3-pcard, .s3-src, .s3-posts a, .s3-have a, .s3-learn a):active {
    transform: none;
  }
}

/* [kit] ======== 29 · THE SCRIPTING-OFF STATE OF THE CHROME (chrome.ts NOSCRIPT, applied always: the kit has no scripts) ======== */

/* [kit] ADAPTED (scripting off): chrome.ts L191, `NOSCRIPT`, verbatim. The site ships it inside <noscript>, where it applies only
 * with scripting off: on a phone (< 1100px) the sheet (the nav links) stands open in the page's flow under
 * the header and the burger goes; the controls only a script can move are not shown. The kit has no scripts,
 * so it applies it always. */
@media (max-width:1099px){.s3-sheet{display:block!important;position:static!important;inset:auto!important;overflow:visible!important}.s3-burger{display:none!important}}.s3-js-only,.s3-share,.s3-theme-btn,button[data-s3-ai],[data-s3-print-go],[data-s3-led-go],[data-s3-step],[data-s3-pdf]{display:none!important}


/* Made by sorich.hr (https://sorich.hr/#top) */