/* Sea & Stay (v2) - the one stylesheet. Design "Kokpit" (docs/HANDOFFS/sea-and-stay-site/DIZAJN.md): the
 * public site speaks the language of the owner cockpit the studio built (the analysis part) - one sans in a
 * light weight set tight, the ink, hairline grids, pills that filter, one donut, a calendar heat strip, a
 * table of every service, icon chips, NO drop shadow anywhere. The logo's light is the signature: since
 * 2026-10-28 logo v6's „Zlatni sat” (the „Stay” night, the „And” glow round a sun half in the sea, haze, the
 * horizon line, the glitter path on „Sea” blue). The hero ends in it, every subpage head carries its sky
 * half and the sun on its lower edge, the closing band its sea half, and the footer its night.
 *
 * COLOUR BY THE KOKPIT (Ante's review, ODLUKE 2026-10-27): white paper, headings in the ink, text in the
 * logo's sea blue, the sea-foam band, the ink bands, the package columns white with the chosen one (Full
 * first) in the ink, and colour from the cockpit's own means: the data colours (c1 blue, c2 orange, c3
 * teal, c4 violet) on charts, chips and icon chips, the light blue icon chips before headings, the logo's
 * sky and sea gradients. NO DECORATIVE LINE: no short rule before an eyebrow or under a heading, no
 * coloured bar under a link (a link keeps a thin underline in its own colour), no accent line on top of a
 * card, column, band or the footer, no timeline track. The hairlines that stay carry structure: table
 * rows and cells, card and panel borders, the calendar grid, chart strokes, focus rings and form fields
 * (tests/sea-and-stay-site.test.ts guards it).
 *
 * ROLES, NOT COLOURS: text takes var(--sas-tekst), headings var(--sas-naslov), links var(--sas-veza), quiet
 * text var(--sas-tiho), the sun-coloured labels var(--sas-sunce-tekst), marks var(--sas-znak), hairlines
 * var(--sas-crta-pod). An ink band (.sas-tamno) re-points the roles at the light values and a white panel
 * inside an ink band points them back (section 1), so a component reads on every ground without a dark
 * variant of its own. The chosen package column re-points them too (kokpit.ts skup).
 *
 * NAMES NO COLOUR: every colour is a custom property that head.ts writes into :root from content.ts, or a
 * color-mix() of them below. A test fails on a colour literal in this file (comments included).
 * Every class is sas-*; every component belongs to src/lib/sea-and-stay-site/blokovi.ts, kokpit.ts or
 * chrome.ts. The filters' per-page rules (which option shows what) are generated by kokpit.ts skup().
 * Page modules may append page-scoped rules at the very END (section 27), each block opened by a comment
 * naming it, with these tokens and sas- classes only.
 *
 * (c) Ante Soric / Sorich 2026 - Made by sorich.hr (https://sorich.hr/#top)
 */

/* ───────────────────────── 0. knobs, the derived colours and the roles ───────────────────────── */
:root {
  --sas-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sas-max: 1180px;
  --sas-uska: 760px;
  --sas-gut: clamp(16px, 5vw, 56px);
  /* a band's padding: 40 px on a phone, 72 px on a wide screen (it was 56 to 96: too much air) */
  --sas-sek: clamp(40px, 5vw, 72px);
  --sas-r: 20px;
  --sas-r-s: 12px;
  --sas-r-b: 8px;
  --sas-pill: 999px;
  --sas-ease: cubic-bezier(.4, 0, .2, 1);
  --sas-brzo: 150ms;
  --sas-srednje: 260ms;
  --sas-hdr-h: 68px;
  /* the sticky package bar is ONE row at every width (section 9), so a table's head pins right under it */
  --sas-konf-h: 56px;
  /* the round contact button (section 22) */
  --sas-km-h: 52px;
  /* THE SUN on a subpage head and the closing band (logo v6's light, head.ts and horizont.ts): its half
     width. Every light around it (bloom, aureole, halo, haze, the dusk, the mirror in the water) is
     measured in it, so the light keeps the logo's proportions. Set on :root ONLY: the light tokens read it
     where they are written */
  --sas-sr: 36px;

  /* the cockpit's mixes, from the sea blue and the paper */
  --sas-linija: color-mix(in srgb, var(--sas-more) 17%, var(--sas-papir));
  --sas-linija-jaka: color-mix(in srgb, var(--sas-more) 38%, var(--sas-papir));
  --sas-ispran: color-mix(in srgb, var(--sas-more) 6%, var(--sas-papir));
  --sas-blijedo: color-mix(in srgb, var(--sas-more) 22%, var(--sas-papir));
  /* quiet text, the cockpit's own: 4.86:1 on papir, 4.61 on pjena */
  --sas-tiho-svj: color-mix(in srgb, var(--sas-more) 86%, var(--sas-papir));
  /* the sun as TEXT on a light ground: 4.84:1 on papir, 4.60 on pjena (the sun itself is 2.48 on white and
     only ever a mark there) */
  --sas-sunce-tekst-svj: color-mix(in srgb, var(--sas-sunce) 64%, var(--sas-tinta));
  /* on the ink */
  --sas-t-tiho: color-mix(in srgb, var(--sas-papir) 78%, var(--sas-tinta));
  --sas-t-crta: color-mix(in srgb, var(--sas-papir) 18%, var(--sas-tinta));
  --sas-t-plocica: color-mix(in srgb, var(--sas-papir) 6%, var(--sas-noc));
  /* the data: c1 deepened so it carries white text and small text on its light step (5.94:1 on papir, 5.03
     on ik-pod; white on it 5.94); the light steps of c1 and c2 */
  --sas-c1-tamno: color-mix(in srgb, var(--sas-c1) 75%, var(--sas-tinta));
  --sas-r1: color-mix(in srgb, var(--sas-c1) 22%, var(--sas-papir));
  --sas-r2: color-mix(in srgb, var(--sas-c1) 40%, var(--sas-papir));
  --sas-s1: color-mix(in srgb, var(--sas-c2) 26%, var(--sas-papir));
  /* THE ICON CHIP: the cockpit's light blue box (its mark 5.03:1), and its twin on the ink (6.16:1) */
  --sas-ik-pod: color-mix(in srgb, var(--sas-c1) 13%, var(--sas-papir));
  --sas-ik-tamno-pod: color-mix(in srgb, var(--sas-c1) 28%, var(--sas-tinta));
  --sas-ik-tamno: color-mix(in srgb, var(--sas-c1) 46%, var(--sas-papir));
  /* the other data colours as chips (the contact channels): a light step and a deepened mark, each mark
     4.8:1 or better on its own step */
  --sas-c2-pod: color-mix(in srgb, var(--sas-c2) 16%, var(--sas-papir));
  --sas-c2-znak: color-mix(in srgb, var(--sas-c2) 60%, var(--sas-tinta));
  --sas-c3-pod: color-mix(in srgb, var(--sas-c3) 14%, var(--sas-papir));
  --sas-c3-znak: color-mix(in srgb, var(--sas-c3) 62%, var(--sas-tinta));
  --sas-c4-pod: color-mix(in srgb, var(--sas-c4) 13%, var(--sas-papir));
  --sas-c4-znak: color-mix(in srgb, var(--sas-c4) 75%, var(--sas-tinta));

  /* THE ROLES: paper values here (the Kokpit's: ink headings and links, sea blue text), section 1
     re-points them on the ink */
  --sas-tekst: var(--sas-more);
  --sas-naslov: var(--sas-tinta);
  --sas-veza: var(--sas-tinta);
  --sas-tiho: var(--sas-tiho-svj);
  --sas-sunce-tekst: var(--sas-sunce-tekst-svj);
  --sas-znak: var(--sas-c1-tamno);
  --sas-crta-pod: var(--sas-linija);
  --sas-fokus-boja: var(--sas-fokus);
  --sas-gumb-pod: var(--sas-tinta);
  --sas-gumb-tekst: var(--sas-papir);
  --sas-gumb-hover: var(--sas-more);
  --sas-gumb-hover-tekst: var(--sas-papir);
  /* the ground right here, for a halo or a donut's hole that must look cut out of it */
  --sas-pod: var(--sas-papir);
}

@media (max-width: 719.98px) {
  :root { --sas-sr: 26px; }
}

/* the donut's share sweeps when the package changes (a registered property can transition) */
@property --sas-udio {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* ───────────────────────── 1. ground, the ink and the paper panels ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--sas-hdr-h) + 72px);
}
body {
  margin: 0;
  font-family: var(--sas-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sas-tekst);
  background: var(--sas-papir);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; }
/* a text link: a thin underline in the link's own colour (currentColor), never a coloured bar */
a { color: var(--sas-veza); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--sas-sunce-tekst); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--sas-naslov); letter-spacing: -.03em; overflow-wrap: break-word; }
strong, b { color: var(--sas-naslov); font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
abbr[title] { text-decoration: none; cursor: help; }
:focus-visible { outline: 3px solid var(--sas-fokus-boja); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--sas-sjaj); color: var(--sas-tinta); }

/* THE INK: the heads, an ink band, the closing band, the footer and the app panel re-point the roles */
.sas-tamno {
  --sas-tekst: var(--sas-t-tiho);
  --sas-naslov: var(--sas-papir);
  --sas-veza: var(--sas-sjaj);
  --sas-tiho: var(--sas-t-tiho);
  --sas-sunce-tekst: var(--sas-sunce);
  --sas-znak: var(--sas-ik-tamno);
  --sas-crta-pod: var(--sas-t-crta);
  --sas-fokus-boja: var(--sas-papir);
  --sas-gumb-pod: var(--sas-papir);
  --sas-gumb-tekst: var(--sas-tinta);
  --sas-gumb-hover: var(--sas-sjaj);
  --sas-gumb-hover-tekst: var(--sas-tinta);
  color: var(--sas-tekst);
}
/* ...and a white panel inside the ink is paper again (its own rules set color: var(--sas-tekst)) */
.sas-tamno :is(.sas-kartica, .sas-ploca, .sas-kal-okvir, .sas-tbl-okvir, .sas-pk, .sas-primjer, .sas-napomena,
  .sas-obrazac-okvir, .sas-izravno, .sas-poruka, .sas-ukratko, .sas-sadrzaj, .sas-kanali,
  .sas-plocice:not(.sas-plocice--tamno), .sas-mg:not(.sas-mg--tamno),
  .sas-stupovi:not(.sas-stupovi--tamno), .sas-veze:not(.sas-veze--tamno)) {
  --sas-tekst: var(--sas-more);
  --sas-naslov: var(--sas-tinta);
  --sas-veza: var(--sas-tinta);
  --sas-tiho: var(--sas-tiho-svj);
  --sas-sunce-tekst: var(--sas-sunce-tekst-svj);
  --sas-znak: var(--sas-c1-tamno);
  --sas-crta-pod: var(--sas-linija);
  --sas-fokus-boja: var(--sas-fokus);
  --sas-gumb-pod: var(--sas-tinta);
  --sas-gumb-tekst: var(--sas-papir);
  --sas-gumb-hover: var(--sas-more);
  --sas-gumb-hover-tekst: var(--sas-papir);
  --sas-pod: var(--sas-papir);
}

.sas-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;
}
.sas-nw { white-space: nowrap; }
.sas-skip {
  position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 18px;
  background: var(--sas-tinta); color: var(--sas-papir); border-radius: var(--sas-r-b);
  font-weight: 600; text-decoration: none; transition: top var(--sas-brzo) var(--sas-ease);
}
.sas-skip:focus { top: 12px; color: var(--sas-papir); }
main:focus { outline: none; }

/* ONE LEFT EDGE: every container starts at the same x; the reading width narrows a column, never centres it */
.sas-in { width: 100%; max-width: calc(var(--sas-max) + 2 * var(--sas-gut)); margin: 0 auto; padding: 0 var(--sas-gut); }
.sas-in--uska > * { max-width: var(--sas-uska); }

.sas-ikona { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
/* THE COCKPIT'S ICON CHIP: light blue on paper, its twin on the ink. Before a section's heading, in a page
   head's kicker (where a short rule used to stand), in the menu grid and in the link rows */
.sas-ik {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--sas-r-s);
  background: var(--sas-ik-pod); color: var(--sas-c1-tamno);
}
.sas-ik .sas-ikona { width: 20px; height: 20px; }
.sas-ik--mali { width: 30px; height: 30px; border-radius: var(--sas-r-b); }
.sas-ik--mali .sas-ikona { width: 16px; height: 16px; }
.sas-tamno .sas-ik { background: var(--sas-ik-tamno-pod); color: var(--sas-ik-tamno); }
.sas-tamno :is(.sas-kartica, .sas-mg:not(.sas-mg--tamno), .sas-veze:not(.sas-veze--tamno)) .sas-ik { background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }

/* ───────────────────────── 2. type ───────────────────────── */
/* a head's kicker: the page's own icon chip, then the eyebrow (no rule) */
.sas-kicker {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce-tekst);
}
.sas-eyebrow {
  margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sas-sunce-tekst);
}
.sas-h2 {
  font-size: clamp(26px, 3.2vw + 8px, 42px); line-height: 1.08; letter-spacing: -.038em;
  color: var(--sas-naslov); text-wrap: balance;
}
.sas-h3, .sas-wiz__h { font-size: clamp(18px, .4vw + 16px, 20px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--sas-naslov); margin: 0 0 12px; }
.sas-lede { font-size: clamp(16px, .5vw + 14.5px, 19px); line-height: 1.55; color: var(--sas-tekst); margin: 14px 0 0; max-width: 64ch; text-wrap: pretty; }
.sas-tiho { font-size: 14px; color: var(--sas-tiho); margin-top: 24px; }

.sas-tekst { max-width: var(--sas-uska); }
.sas-tekst > .sas-h2 { font-size: clamp(24px, 2vw + 14px, 32px); margin: 40px 0 12px; }
.sas-tekst > .sas-h2:first-child { margin-top: 0; }
.sas-tekst p { text-wrap: pretty; }

/* ───────────────────────── 3. buttons ───────────────────────── */
.sas-gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 11px 20px; border-radius: var(--sas-r-b);
  font: 500 15.5px/1.2 var(--sas-font); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--sas-brzo) var(--sas-ease), color var(--sas-brzo) var(--sas-ease),
    border-color var(--sas-brzo) var(--sas-ease), transform var(--sas-brzo) var(--sas-ease);
}
.sas-gumb:active { transform: scale(.98); }
.sas-gumb__ikona { width: 18px; height: 18px; }
/* primarni and sekundarni follow the ground (the roles): ink on paper, paper on the ink */
.sas-gumb--primarni { background: var(--sas-gumb-pod); color: var(--sas-gumb-tekst); border-color: var(--sas-gumb-pod); }
.sas-gumb--primarni:hover { background: var(--sas-gumb-hover); border-color: var(--sas-gumb-hover); color: var(--sas-gumb-hover-tekst); }
.sas-gumb--sekundarni { background: transparent; color: var(--sas-naslov); border-color: color-mix(in srgb, currentColor 34%, transparent); }
.sas-gumb--sekundarni:hover { background: var(--sas-naslov); color: var(--sas-pod); border-color: var(--sas-naslov); }
/* the quiet button reads as a link: its words underlined thinly in their own colour */
.sas-gumb--tihi { background: transparent; color: var(--sas-naslov); padding-left: 2px; padding-right: 2px; min-height: 44px; }
.sas-gumb--tihi span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.sas-gumb--tihi:hover { color: var(--sas-sunce-tekst); }
/* the heads' own pair (always on the ink) */
.sas-gumb--svijetli { background: var(--sas-papir); color: var(--sas-tinta); border-color: var(--sas-papir); }
.sas-gumb--svijetli:hover { background: var(--sas-sjaj); border-color: var(--sas-sjaj); color: var(--sas-tinta); }
.sas-gumb--obrub-svijetli { background: transparent; color: var(--sas-papir); border-color: var(--sas-t-crta); }
.sas-gumb--obrub-svijetli:hover { background: var(--sas-papir); color: var(--sas-tinta); border-color: var(--sas-papir); }
.sas-gumbi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; align-items: center; }
.sas-gumbi--sredina { justify-content: center; }
/* the flyer's long call ("Dogovorimo besplatan uvodni razgovor", about 327 px as a button, measured) is wider
   than the room a phone under 375 px leaves (324 px at 360): there any button may take two lines, so no
   page ever scrolls sideways (it was a rule per page in section 27) */
@media (max-width: 374.98px) {
  .sas-gumb { white-space: normal; text-align: center; }
}

/* ───────────────────────── 4. the header and the menu (white: the logo only ever sits on white) ───────────────────────── */
.sas-hdr { position: sticky; top: 0; z-index: 40; background: var(--sas-papir); border-bottom: 1px solid var(--sas-linija); }
.sas-hdr__in { display: flex; align-items: center; gap: 22px; min-height: var(--sas-hdr-h); }
.sas-hdr__logo { display: inline-flex; flex: none; line-height: 0; border-radius: 8px; }
/* logo v6 (2026-10-28): its kit leaves 24 units of air around the S, so 40 px keeps the letter as tall as
   the old lockup's 38 */
.sas-hdr__logo-img { height: 40px; width: auto; }
.sas-nav { flex: 1; display: flex; justify-content: center; }
.sas-nav__veze { list-style: none; display: flex; gap: clamp(12px, 1.5vw, 24px); align-items: center; }
/* the page you are on: the ink and a thin underline in the link's own colour */
.sas-nav__veze a {
  display: inline-block; padding: 8px 0; font-size: 15px; font-weight: 450;
  color: var(--sas-more); text-decoration: none; white-space: nowrap;
  text-underline-offset: .5em; text-decoration-thickness: 1px;
}
.sas-nav__veze a:hover, .sas-nav__veze a[aria-current="page"] { color: var(--sas-tinta); text-decoration-line: underline; }
.sas-nav__ploca { display: none; }
/* the language: in the header at every width (there is no strip above the header any more) */
.sas-hdr__jezik { display: inline-block; flex: none; font-weight: 500; font-size: 14px; color: var(--sas-more); text-decoration: none; padding: 8px 4px; }
.sas-hdr__jezik:hover { color: var(--sas-tinta); }
.sas-hdr__cta { flex: none; min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.sas-hdr__cta-kratko { display: none; }
/* the cockpit's "Sekcije" button: an outline, the menu mark (a cross while the menu is open) and the word */
.sas-burger {
  display: none; align-items: center; gap: 9px; height: 40px; padding: 0 14px;
  border: 1px solid var(--sas-linija); border-radius: var(--sas-r-b); background: var(--sas-papir);
  font: 500 14.5px/1 var(--sas-font); color: var(--sas-tinta); cursor: pointer;
  transition: background var(--sas-brzo) var(--sas-ease), color var(--sas-brzo) var(--sas-ease), border-color var(--sas-brzo);
}
.sas-burger:hover { background: var(--sas-tinta); border-color: var(--sas-tinta); color: var(--sas-papir); }
.sas-burger__ik { display: inline-flex; line-height: 0; }
.sas-burger__ik .sas-ikona { width: 18px; height: 18px; }
.sas-burger__ik > .sas-burger__x { display: none; }
.sas-hdr[data-open] .sas-burger { background: var(--sas-tinta); border-color: var(--sas-tinta); color: var(--sas-papir); }
.sas-hdr[data-open] .sas-burger__ik > .sas-burger__meni { display: none; }
.sas-hdr[data-open] .sas-burger__ik > .sas-burger__x { display: inline-block; }

/* the cockpit's menu grid: the phone menu (chrome.ts; the pages link onwards with blokovi.ts vezeRed). Its
   gaps are the rule colour: one column on a phone, two from 600 px with an odd last cell taking its row */
.sas-mg {
  list-style: none; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: 16px; overflow: hidden;
}
@media (min-width: 600px) {
  .sas-mg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sas-mg > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sas-mg > li { display: flex; }
.sas-mg__a {
  flex: 1; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px;
  background: var(--sas-papir); color: var(--sas-tinta); text-decoration: none;
  transition: background var(--sas-brzo) var(--sas-ease);
}
.sas-mg__a:hover { background: var(--sas-ispran); color: var(--sas-tinta); }
.sas-mg__t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sas-mg__h { font-size: 16.5px; font-weight: 500; letter-spacing: -.01em; }
.sas-mg__p { font-size: 13.5px; line-height: 1.45; color: var(--sas-tiho); }
.sas-mg__s { width: 18px; height: 18px; color: var(--sas-sunce-tekst); transition: transform var(--sas-brzo) var(--sas-ease); }
.sas-mg__a:hover .sas-mg__s { transform: translateX(4px); }
.sas-mg--tamno { background: var(--sas-t-crta); border-color: var(--sas-t-crta); }
.sas-mg--tamno .sas-mg__a { background: var(--sas-tinta); color: var(--sas-papir); }
.sas-mg--tamno .sas-mg__a:hover { background: var(--sas-t-plocica); color: var(--sas-papir); }
.sas-mg--tamno .sas-mg__a[aria-current="page"] { background: var(--sas-t-plocica); }
.sas-mg--tamno .sas-mg__p { color: var(--sas-t-tiho); }
.sas-mg--tamno .sas-mg__s { color: var(--sas-sunce); }
.sas-mg--tamno .sas-ik { background: var(--sas-ik-tamno-pod); color: var(--sas-ik-tamno); }

@media (max-width: 1079.98px) {
  :root { --sas-hdr-h: 62px; }
  .sas-hdr__in { gap: 10px; }
  .sas-hdr__logo-img { height: 34px; }
  .sas-burger { display: inline-flex; order: 4; }
  /* the menu leaves the row (it is fixed), so the logo pushes the rest to the right */
  .sas-hdr__logo { margin-right: auto; }
  .sas-nav__veze { display: none; }
  /* the menu: the ink over the whole screen under the header (the header pins itself while it is open) */
  .sas-hdr[data-open] { position: fixed; left: 0; right: 0; top: 0; }
  .sas-nav {
    position: fixed; left: 0; right: 0; top: var(--sas-hdr-h); bottom: 0; display: block;
    background: var(--sas-tinta); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--sas-srednje) var(--sas-ease), transform var(--sas-srednje) var(--sas-ease), visibility 0s linear var(--sas-srednje);
  }
  .sas-hdr[data-open] .sas-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .sas-nav__ploca { display: block; padding: 24px 0 40px; }
  .sas-nav__dno { display: flex; justify-content: space-between; gap: 16px; padding-top: 22px; }
  .sas-nav__jezik { font-weight: 500; color: var(--sas-sjaj); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
}
@media (min-width: 1080px) { .sas-nav__dno { display: none; } }
/* the header's call is the flyer's long sentence (about 280 px here) only where it fits beside the logo,
   the seven links and the language: from 1280 px; narrower it is the short word (cta.sastanakKratko) */
@media (max-width: 1279.98px) {
  .sas-hdr__cta-dugo { display: none; }
  .sas-hdr__cta-kratko { display: inline; }
}
@media (max-width: 479.98px) {
  .sas-burger__t { display: none; }
  .sas-burger { width: 40px; padding: 0; justify-content: center; }
}

/* ───────────────────────── 5. THE HERO (the cockpit's ink, then the logo's light) ───────────────────────── */
/* the ground is the „Stay” night, the top of logo v6's sky (2026-10-28) */
.sas-hero { position: relative; background: var(--sas-tinta); overflow: hidden; --sas-pod: var(--sas-tinta); }
.sas-hero__nebo { background: var(--sas-hero-nebo); padding: clamp(40px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); }
.sas-hero__h1 { font-size: clamp(36px, 5.6vw + 8px, 68px); line-height: 1.02; letter-spacing: -.042em; color: var(--sas-papir); text-wrap: balance; max-width: 15ch; }
.sas-hero__h1a { display: block; }
.sas-hero__h1b { display: block; color: var(--sas-sjaj); }
.sas-hero__lede { max-width: 60ch; margin: 20px 0 0; font-size: clamp(16px, .6vw + 14.5px, 19px); color: var(--sas-t-tiho); text-wrap: pretty; }
/* the band holds logo v6's light from the „Stay” night down to the „Sea” blue (horizont.ts BAND_TOP and
   BAND_BOTTOM), so it is TALL; it is cut only from the bottom on a very wide screen and at the sides on a
   phone (xMidYMin slice), never from the top, and its top is the same night as the words above it */
.sas-hero__scena { position: relative; height: clamp(240px, 38vw, 700px); background: var(--sas-tinta); }
.sas-horizont { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* THE SCENE (horizont.ts): logo v6's „Zlatni sat” across the screen. The night turns through the dusk into
   the „And” glow around the sun, which stands half in the sea (it NEVER sinks, Ante 2026-10-27); haze lies
   along the horizon, the orange horizon line runs across it, the sea mirrors the warm sky and deepens into
   „Sea” blue, and the sun's glitter path of many small highlights widens toward the viewer. Two calm
   motions, transform and opacity only:
   - idle, the glitter (sas-hz__iskre, three groups) shimmers slowly and out of phase; only where the script
     runs (html.sas-js) and motion is welcome;
   - while the hero scrolls out, inline.js writes --sas-p on the hero (0..1, smoothed, at most once a frame,
     from a passive listener): the light path (sas-hz__odraz) lengthens downward from the horizon and
     brightens, the glow in the sky (sas-hz__sjaj) grows a little from the horizon and the mirror in the
     water (sas-hz__zrcalo) widens. The sun's disc and halo (sas-hz__korona) never move.
   No script, reduced motion or a print: --sas-p is 0 and nothing moves; the pose is complete, drawn by the
   SVG's own attributes. */
.sas-hz__sjaj, .sas-hz__zrcalo, .sas-hz__odraz, .sas-hz__iskre { transform-box: fill-box; }
.sas-hz__sjaj { transform-origin: 50% 100%; transform: scale(calc(1 + var(--sas-p, 0) * .14)); }
.sas-hz__zrcalo { transform-origin: 50% 0; transform: scaleX(calc(1 + var(--sas-p, 0) * .16)); }
.sas-hz__odraz { transform-origin: 50% 0; transform: scaleY(calc(1 + var(--sas-p, 0) * .45)); opacity: calc(.86 + var(--sas-p, 0) * .14); }
@media (prefers-reduced-motion: no-preference) {
  .sas-js .sas-hz__iskre-1 { animation: sas-iskre 5.4s ease-in-out infinite; }
  .sas-js .sas-hz__iskre-2 { animation: sas-iskre 5.4s ease-in-out -1.8s infinite; }
  .sas-js .sas-hz__iskre-3 { animation: sas-iskre 5.4s ease-in-out -3.6s infinite; }
}
@keyframes sas-iskre { 0%, 100% { opacity: .4; transform: translateX(-1.5px); } 50% { opacity: 1; transform: translateX(1.5px); } }

/* ───────────────────────── 6. a subpage's opening (the logo's sky; a right-hand slot) ───────────────────────── */
/* logo v6's sky half (horizont.ts glavaSkyCss): the „Stay” night, and on the lower edge the dusk, the sun's
   bloom, aureole, halo and haze, all measured in --sas-sr. The words keep 3.2 sun radii of room above the
   edge, so they never stand on the warm half of the dusk (white 8:1 or better, the quiet text 5:1 there) */
.sas-glava {
  position: relative; background-color: var(--sas-tinta); background-image: var(--sas-glava-nebo);
  padding: clamp(28px, 4vw, 56px) 0 calc(var(--sas-sr) * 3.2); --sas-pod: var(--sas-tinta);
}
.sas-glava__red { display: grid; gap: clamp(24px, 3vw, 40px); align-items: end; }
.sas-glava__tekst { max-width: 860px; min-width: 0; }
.sas-glava__desno { min-width: 0; }
/* the slot stands beside the words on a wide screen, so the head has no empty right half */
@media (min-width: 1024px) {
  .sas-glava--desno .sas-glava__red { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.sas-glava__h1 { font-size: clamp(32px, 4vw + 10px, 58px); line-height: 1.04; letter-spacing: -.04em; color: var(--sas-papir); text-wrap: balance; }
.sas-glava__lede { max-width: 62ch; margin: 18px 0 0; font-size: clamp(16px, .5vw + 14.5px, 19px); color: var(--sas-t-tiho); text-wrap: pretty; }
.sas-glava__plocice { margin-top: clamp(24px, 3vw, 36px); }
.sas-glava__desno .sas-glava__plocice { margin-top: 0; }
/* the sun on the head's lower edge, half above it as in the logo (the edge is the horizon, so no line is
   drawn there): the disc, near white with a warmer limb and a little flattened, under the haze that lies
   along the horizon (the head's own two haze layers, repeated on the disc) */
.sas-glava__sunce {
  position: absolute; left: calc(50% - var(--sas-sr)); bottom: 0; width: calc(var(--sas-sr) * 2); height: calc(var(--sas-sr) * .923);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none;
  background: var(--sas-izmaglica), var(--sas-sunce-disk);
}
.sas-putanja ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 22px; font-size: 13.5px; }
.sas-putanja li { display: inline-flex; align-items: center; gap: 10px; color: var(--sas-t-tiho); }
.sas-putanja li + li::before { content: "/"; opacity: .5; }
.sas-putanja a { color: var(--sas-t-tiho); text-decoration: none; }
.sas-putanja a:hover { color: var(--sas-papir); text-decoration: underline; }

/* ───────────────────────── 7. tiles ───────────────────────── */
/* the 1px gaps on the rule colour ARE the lines (the cockpit's .ck-tiles). THE GRID FOLLOWS THE COUNT
   (kokpit.ts writes sas-plocice--n<count>): two a row on a phone with an odd last tile taking its row, all
   of them in one row from 760 px, so the rule colour never shows as a hole */
.sas-plocice {
  list-style: none; display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); overflow: hidden;
}
.sas-plocice > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .sas-plocice:is(.sas-plocice--n3, .sas-plocice--n5, .sas-plocice--n6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sas-plocice.sas-plocice--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sas-plocice:is(.sas-plocice--n3, .sas-plocice--n4, .sas-plocice--n6) > :last-child { grid-column: auto; }
  .sas-plocice.sas-plocice--n5 > :last-child { grid-column: span 2; }
}
/* a head's right-hand slot is narrow: two a row, whatever the count */
.sas-glava__desno .sas-plocice.sas-plocice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sas-glava__desno .sas-plocice.sas-plocice > :last-child { grid-column: auto; }
.sas-glava__desno .sas-plocice.sas-plocice > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.sas-plocica { background: var(--sas-papir); color: var(--sas-tekst); padding: 16px 18px; min-height: 96px; }
.sas-plocica p { margin: 0; }
.sas-plocica__v { font-size: clamp(24px, 2.4vw + 10px, 34px); line-height: 1.04; letter-spacing: -.035em; color: var(--sas-tinta); font-variant-numeric: tabular-nums; }
.sas-plocica__l { margin-top: 7px !important; font-size: 14.5px; color: var(--sas-tekst); }
.sas-plocica__n { margin-top: 3px !important; font-size: 12.5px; color: var(--sas-tiho); }
.sas-plocica--naglasak .sas-plocica__v { color: var(--sas-sunce-tekst); }
.sas-plocice--tamno { background: var(--sas-t-crta); border-color: var(--sas-t-crta); }
.sas-plocice--tamno .sas-plocica { background: var(--sas-t-plocica); }
.sas-plocice--tamno .sas-plocica__v { color: var(--sas-papir); }
.sas-plocice--tamno .sas-plocica__l { color: var(--sas-t-tiho); }
.sas-plocice--tamno .sas-plocica__n { color: var(--sas-t-tiho); }
.sas-plocice--tamno .sas-plocica--naglasak .sas-plocica__v { color: var(--sas-sunce); }

/* ───────────────────────── 8. bands ───────────────────────── */
/* the tones (blokovi.ts sekcija): papir is the white page, pjena the logo's sea foam, and THE INK BANDS
   tinta, dubina (the logo's deep sea fading to the ink) and noc. No band draws a line on its edge. */
.sas-sek { position: relative; padding: var(--sas-sek) 0; }
.sas-sek--papir { background: var(--sas-papir); --sas-pod: var(--sas-papir); }
.sas-sek--pjena { background: var(--sas-pjena); --sas-pod: var(--sas-pjena); }
.sas-sek--tinta { background: var(--sas-tinta); --sas-pod: var(--sas-tinta); }
.sas-sek--dubina { background: linear-gradient(180deg, var(--sas-dubina) 0%, var(--sas-tinta) 100%); --sas-pod: var(--sas-dubina); }
.sas-sek--noc { background: var(--sas-noc); --sas-pod: var(--sas-noc); }
/* two bands of the same light tone meet at a hairline (the Kokpit's section border); any change of tone
   is its own edge */
.sas-sek--papir + .sas-sek--papir, .sas-sek--pjena + .sas-sek--pjena { border-top: 1px solid var(--sas-linija); }
.sas-sek__glava { max-width: 820px; margin-bottom: clamp(22px, 2.8vw, 36px); }
.sas-sek__glava > .sas-eyebrow, .sas-sek__glava-a > .sas-eyebrow { margin-bottom: 10px; }
.sas-sek__glava--sredina { margin-left: auto; margin-right: auto; text-align: center; }
/* the H2 and its lede side by side on a wide screen (naslovSekcije red) */
.sas-sek__glava--red { max-width: none; }
@media (min-width: 960px) {
  .sas-sek__glava--red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px clamp(32px, 4vw, 64px); align-items: end; }
  .sas-sek__glava--red > .sas-lede { margin: 0; }
}
/* the cockpit's section head: the icon chip, and the eyebrow beside it when there is one */
.sas-sg__vrh { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sas-sek__dalje { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--sas-tekst); }

/* badges (the cockpit's tier pills) */
.sas-znacke { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.sas-znacka {
  display: inline-flex; align-items: center; margin: 0; padding: 5px 11px; border-radius: var(--sas-pill);
  font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.sas-znacka--plava { background: var(--sas-ik-pod); color: var(--sas-c1-tamno); border: 1px solid color-mix(in srgb, var(--sas-c1) 34%, var(--sas-papir)); }
.sas-znacka--sunce { background: color-mix(in srgb, var(--sas-sunce) 16%, var(--sas-papir)); color: var(--sas-tinta); border: 1px solid color-mix(in srgb, var(--sas-sunce) 52%, var(--sas-papir)); }
.sas-znacka--obrub { background: transparent; color: var(--sas-veza); border: 1px solid currentColor; }

/* GRIDS FOLLOW THE COUNT (blokovi.ts stupciZa picks the class): one column on a phone, two from 600 px,
   then three or four; the last row's items span what is left, so a grid never shows a hole */
.sas-mreza--2, .sas-mreza--3, .sas-mreza--4 { list-style: none; display: grid; gap: clamp(12px, 1.6vw, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .sas-mreza--2, .sas-mreza--3, .sas-mreza--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.sas-mreza--2, .sas-mreza--3, .sas-mreza--4) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .sas-mreza--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sas-mreza--3 > :last-child:nth-child(odd) { grid-column: auto; }
  .sas-mreza--3 > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .sas-mreza--3 > :last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .sas-mreza--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sas-mreza--4 > :last-child:nth-child(odd) { grid-column: auto; }
  .sas-mreza--4 > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .sas-mreza--4 > :last-child:nth-child(4n+2) { grid-column: span 3; }
  .sas-mreza--4 > :last-child:nth-child(4n+3) { grid-column: span 2; }
}

.sas-podijeljeno { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) {
  .sas-podijeljeno--1-1 { grid-template-columns: 1fr 1fr; }
  .sas-podijeljeno--3-2 { grid-template-columns: 3fr 2fr; }
  .sas-podijeljeno--2-3 { grid-template-columns: 2fr 3fr; }
  .sas-podijeljeno--obrnuto > .sas-podijeljeno__a { order: 2; }
  .sas-podijeljeno--sredina { align-items: center; }
}
.sas-podijeljeno > * { min-width: 0; }

/* ───────────────────────── 9. the filters: pills and the sticky package bar ───────────────────────── */
/* FIXED, not absolute: a label click focuses its radio, and a browser scrolls a newly focused element
   into view. A fixed element already is in view, so the page stays exactly where it was. */
.sas-r { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -1; margin: 0; }
.sas-pilule { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.sas-pilule__l { font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce-tekst); }
.sas-pilule__red { display: flex; flex-wrap: wrap; gap: 6px; }
/* a pill is a white chip on any ground */
.sas-pil {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; cursor: pointer; user-select: none;
  border: 1px solid var(--sas-linija); border-radius: var(--sas-pill); background: var(--sas-papir);
  font-size: 15px; color: var(--sas-more); white-space: nowrap;
  transition: background-color var(--sas-brzo) var(--sas-ease), color var(--sas-brzo) var(--sas-ease), border-color var(--sas-brzo);
}
.sas-pil:hover { border-color: var(--sas-more); }

/* the package bar: white like the header it pins under, ONE row at every width (--sas-konf-h) */
.sas-konf { position: sticky; top: var(--sas-hdr-h); z-index: 30; background: var(--sas-papir); border-bottom: 1px solid var(--sas-linija); }
.sas-konf__in { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; height: calc(var(--sas-konf-h) - 1px); }
.sas-konf .sas-pilule, .sas-konf .sas-pilule__red { flex-wrap: nowrap; }
.sas-konf__sazetak { margin: 0; font-size: 14.5px; color: var(--sas-more); white-space: nowrap; }
.sas-konf__sazetak b { color: var(--sas-tinta); font-size: 1.15em; font-variant-numeric: tabular-nums; }
@media (max-width: 719.98px) {
  .sas-konf__rijec { display: none; }
}
@media (max-width: 559.98px) {
  :root { --sas-konf-h: 52px; }
  .sas-konf__in { gap: 8px; }
  .sas-konf__sazetak { font-size: 13.5px; }
  .sas-konf .sas-pilule__l { display: none; }
  .sas-pil { height: 36px; padding: 0 13px; font-size: 14.5px; }
}
.sas-udio { font-variant-numeric: tabular-nums; }

/* ───────────────────────── 10. the packages as columns (they ARE the selector) ───────────────────────── */
/* THE KOKPIT'S COLUMNS: white columns cut by hairlines; the chosen one (Full first) turns to the ink
   (kokpit.ts skup sets --sas-o-* and the roles). The number 01 / 02 / 03 sits in the cockpit's light blue
   chip, the ticks are the data blue, and on the ink the chip sinks into it and the ticks turn gold. */
.sas-pk-red {
  display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); overflow: hidden;
}
@media (min-width: 900px) { .sas-pk-red { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sas-pk {
  --sas-pk-x: clamp(20px, 2.4vw, 30px);
  position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 30px) var(--sas-pk-x);
  background: var(--sas-o-pod, var(--sas-papir)); color: var(--sas-o-tiho, var(--sas-tekst));
  scroll-margin-top: calc(var(--sas-hdr-h) + var(--sas-konf-h) + 16px);
  transition: background-color var(--sas-srednje) var(--sas-ease), color var(--sas-srednje) var(--sas-ease);
}
.sas-pk p { margin: 0; }
.sas-pk__vrh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; }
.sas-pk__br {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--sas-r-s);
  background: var(--sas-o-br, var(--sas-ik-pod)); color: var(--sas-o-br-tekst, var(--sas-c1-tamno));
  font-size: 15px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  transition: background-color var(--sas-srednje) var(--sas-ease), color var(--sas-srednje) var(--sas-ease);
}
.sas-pk__ime { margin: 0; font-size: clamp(32px, 2.2vw + 18px, 46px); line-height: 1; letter-spacing: -.045em; color: var(--sas-o-tekst, var(--sas-tinta)); transition: color var(--sas-srednje); }
.sas-pk__oznaka { grid-column: 1 / -1; margin-top: 12px !important; font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; color: var(--sas-o-naglasak, var(--sas-sunce-tekst)); }
.sas-pk__broj { margin-top: 16px !important; font-size: 14px; }
.sas-pk__broj b { color: var(--sas-o-tekst, var(--sas-tinta)); font-size: 1.1em; }
.sas-pk__lead { margin-top: 12px !important; color: var(--sas-o-tiho, var(--sas-tekst)); }
.sas-pk__lista { list-style: none; display: grid; gap: 9px; margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--sas-o-crta, var(--sas-linija)); }
.sas-pk__lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--sas-o-tekst, var(--sas-tinta)); }
.sas-pk__lista .sas-pk__sve { font-weight: 500; }
/* the ticks in the data blue (gold on the ink), a stroke a little heavier than the icons' */
.sas-pk__kv { flex: none; width: 18px; height: 18px; margin-top: .15em; color: var(--sas-o-kv, var(--sas-c1-tamno)); }
.sas-pk__kv path { stroke-width: 2.2; }
.sas-pk__tvoje { margin-top: 18px !important; padding-top: 14px; border-top: 1px solid var(--sas-o-crta, var(--sas-linija)); font-size: 14px; }
.sas-pk__dno { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: auto; padding-top: 22px; }
.sas-pk__odaberi {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; cursor: pointer; user-select: none;
  border-radius: var(--sas-r-b); font-weight: 500; font-size: 15px;
  background: var(--sas-o-gumb, var(--sas-tinta)); color: var(--sas-o-gumb-tekst, var(--sas-papir));
  transition: background-color var(--sas-brzo) var(--sas-ease), color var(--sas-brzo) var(--sas-ease);
}
.sas-pk__odaberi:hover { background: var(--sas-more); color: var(--sas-papir); }
.sas-pk__odaberi .sas-pk__kv { color: currentColor; margin: 0; }
.sas-pk__veza { font-size: 14.5px; color: var(--sas-o-tekst, var(--sas-tinta)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.sas-pk__veza:hover { color: var(--sas-o-naglasak, var(--sas-sunce-tekst)); }
/* the default states: "ne" and "odabrano" wait for a filter rule (kokpit.ts skup) to show them. Scoped to the skup,
   so a component's own display (a badge is inline-flex) cannot outrank the default, while the generated rules do. */
.sas-skup [data-sas-kad="ne"], .sas-skup [data-sas-kad="odabrano"] { display: none; }

/* ───────────────────────── 11. the donut and the services board ───────────────────────── */
.sas-krug-ploca { display: grid; gap: clamp(24px, 3.4vw, 44px); align-items: start; }
@media (min-width: 1180px) {
  .sas-krug-ploca { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .sas-krug-ploca > .sas-krug { position: sticky; top: calc(var(--sas-hdr-h) + var(--sas-konf-h) + 28px); }
}

.sas-krug { position: relative; margin: 0 auto; width: min(260px, 70vw); }
.sas-krug::before { content: ""; display: block; padding-top: 100%; }
.sas-krug__prsten, .sas-krug__prstenovi { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1; border-radius: 50%; }
/* ours in the data blue, the owner's share in the data orange: exactly what the legend under it shows */
.sas-krug__prsten { background: conic-gradient(var(--sas-c1) 0 calc(var(--sas-udio) * 1turn), var(--sas-c2) calc(var(--sas-udio) * 1turn) 1turn); }
.sas-krug__prstenovi .sas-krug__prsten { position: absolute; inset: 0; }
.sas-skup--paket { transition: --sas-udio 700ms var(--sas-ease); }
/* the hole is the ground the donut stands on, so the ring reads as cut out of it */
.sas-krug__rupa { position: absolute; left: 18%; right: 18%; top: 0; aspect-ratio: 1; margin-top: 18%; border-radius: 50%; background: var(--sas-pod); display: grid; place-items: center; text-align: center; padding: 6px; }
.sas-krug__c { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sas-krug__broj { font-size: clamp(34px, 6vw, 48px); line-height: 1; letter-spacing: -.045em; color: var(--sas-naslov); font-variant-numeric: tabular-nums; }
.sas-krug__od { font-size: 13px; color: var(--sas-tiho); }
.sas-krug__l { font-size: 13px; line-height: 1.25; color: var(--sas-tekst); max-width: 12ch; }
.sas-krug__paket { font-size: 12px; color: var(--sas-tiho); }
.sas-krug figcaption, .sas-krug > .sas-legenda { margin-top: 14px; justify-content: center; }

.sas-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 14px 0 0; font-size: 13px; color: var(--sas-tekst); }
.sas-legenda__sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; margin-left: 12px; }
.sas-legenda > .sas-legenda__sw:first-child { margin-left: 0; }
.sas-legenda__sw--mi { background: var(--sas-c1); }
.sas-legenda__sw--ti { background: var(--sas-c2); }
/* the calendar's cells carry the day, so they are the deep data blue and the data orange: its legend too */
.sas-legenda--kal .sas-legenda__sw--mi { background: var(--sas-c1-tamno); }
.sas-legenda--kal .sas-legenda__sw--ti { background: var(--sas-c2); }
.sas-legenda__sw--stalno { background: var(--sas-r1); }
.sas-legenda__sw--slobodno { background: var(--sas-ispran); box-shadow: inset 0 0 0 1px var(--sas-linija-jaka); }

/* the board: one white column per package (its number chip, name and the flyer's subtitle at the head), the
   rows lit while the chosen package carries them */
.sas-ploca {
  display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); overflow: hidden;
}
@media (min-width: 1024px) { .sas-ploca { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sas-ploca__stupac { background: var(--sas-papir); color: var(--sas-tekst); padding-bottom: 6px; }
.sas-ploca__h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 16px; padding: 14px 0 12px;
  border-bottom: 1px solid var(--sas-linija);
  font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--sas-tinta);
}
.sas-ploca__br { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--sas-ik-pod); color: var(--sas-c1-tamno); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sas-ploca__o { flex-basis: 100%; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--sas-sunce-tekst); }
.sas-ploca__lista { list-style: none; padding: 0 16px; }
.sas-usl {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0;
  border-top: 1px solid var(--sas-linija); font-size: 14.5px; line-height: 1.35;
  color: var(--sas-u-boja, var(--sas-tinta)); transition: color var(--sas-srednje) var(--sas-ease);
}
.sas-ploca__lista > .sas-usl:first-child { border-top: 0; }
.sas-usl__ik { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--sas-u-ik-pod, var(--sas-ik-pod)); color: var(--sas-u-ik, var(--sas-c1-tamno)); transition: background-color var(--sas-srednje), color var(--sas-srednje); }
.sas-usl__ik .sas-ikona { width: 17px; height: 17px; }
/* the state in words is for screen readers; the eye reads the icon's colour, which the donut's legend names */
.sas-usl__stanje { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ───────────────────────── 12. the year (the cockpit's calendar heat strip) ───────────────────────── */
/* Every scroll frame is POSITIONED: the screen-reader text in its cells is absolute, and an absolute box whose
   containing block lies outside the frame escapes its clipping and widens the whole page on a phone. */
.sas-kal-okvir { position: relative; overflow-x: auto; border: 1px solid var(--sas-linija); border-radius: var(--sas-r-s); background: var(--sas-papir); color: var(--sas-tekst); -webkit-overflow-scrolling: touch; }
.sas-kal { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
.sas-kal th { font-weight: 500; }
.sas-kal thead th { padding: 8px 0 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--sas-tiho); text-align: center; }
.sas-kal__mb { display: none; }
.sas-kal__kut { min-width: 220px; }
.sas-kal__ime {
  position: sticky; left: 0; z-index: 1; min-width: 220px; max-width: 280px; padding: 8px 14px 8px 8px;
  background: var(--sas-papir); text-align: left; vertical-align: top;
}
.sas-kal__h { display: block; font-size: 14.5px; line-height: 1.3; color: var(--sas-tinta); }
.sas-kal__p { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--sas-tiho); }
.sas-kal__tko { display: inline-flex; margin-top: 6px; padding: 2px 8px; border-radius: var(--sas-pill); font-size: 12px; background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }
.sas-kal__tko--ti { background: var(--sas-s1); color: var(--sas-tinta); }
.sas-kal__c { min-width: 42px; height: 40px; border-radius: 6px; background: var(--sas-ispran); text-align: center; vertical-align: middle; font-size: 13px; transition: background-color var(--sas-srednje) var(--sas-ease), color var(--sas-srednje) var(--sas-ease); }
.sas-kal__c--stalno { background: var(--sas-u-kal-svj, var(--sas-r1)); }
/* a deadline: ours in the deep data blue (white day, 5.94:1), the owner's in the data orange (ink day, 6.0:1) */
.sas-kal__c--rok { background: var(--sas-u-kal, var(--sas-c1-tamno)); color: var(--sas-u-kal-tekst, var(--sas-papir)); font-weight: 600; }
/* THE WHOLE YEAR ON A PHONE: the obligation's name and twelve heat cells, no scroll; the months as 1 to 12,
   the day of a deadline and the line under the name wait for a wider screen (the cell keeps the day for
   screen readers) */
@media (max-width: 719.98px) {
  .sas-kal-okvir { overflow: visible; }
  .sas-kal { min-width: 0; table-layout: fixed; border-spacing: 2px; }
  .sas-kal__kut, .sas-kal__ime { width: 36%; min-width: 0; max-width: none; }
  .sas-kal__ime { position: static; padding: 6px 6px 6px 8px; vertical-align: middle; }
  .sas-kal__h { font-size: 13px; line-height: 1.25; }
  .sas-kal__p { display: none; }
  .sas-kal .sas-kal__tko { display: none !important; }
  .sas-kal thead th { padding: 6px 0 3px; letter-spacing: 0; }
  .sas-kal__mj { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sas-kal__mb { display: inline; }
  .sas-kal__c { min-width: 0; height: 30px; border-radius: 4px; }
  .sas-kal__dan { display: none; }
}

/* ───────────────────────── 13. THE EXAMPLE STATEMENT ───────────────────────── */
.sas-primjer { display: grid; gap: clamp(20px, 2.6vw, 32px); padding: clamp(18px, 3vw, 34px); background: var(--sas-papir); color: var(--sas-tekst); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); --sas-pod: var(--sas-papir); }
.sas-primjer__vrh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sas-primjer__ime { margin: 0; font-size: 15px; color: var(--sas-tinta); font-weight: 500; }
.sas-primjer__dva { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 900px) { .sas-primjer__dva { grid-template-columns: 1.15fr 1fr; } }
.sas-primjer__blok { min-width: 0; }
.sas-primjer__h { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce-tekst); }
.sas-primjer__napomena { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 13.5px; color: var(--sas-tiho); }
.sas-primjer__ik { width: 18px; height: 18px; margin-top: .15em; color: var(--sas-sunce-tekst); }

.sas-mjesec { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sas-mjesec__d { aspect-ratio: 1 / .86; display: flex; align-items: flex-start; padding: 5px 6px; border-radius: 6px; font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.sas-mjesec__d--booking { background: var(--sas-c1-tamno); color: var(--sas-papir); }
.sas-mjesec__d--airbnb { background: var(--sas-c2); color: var(--sas-tinta); }
.sas-mjesec__d--direktno { background: var(--sas-c3); color: var(--sas-tinta); }
.sas-mjesec__d--slobodno { background: var(--sas-ispran); color: var(--sas-more); box-shadow: inset 0 0 0 1px var(--sas-linija); }
.sas-mjesec__d--dolazak { box-shadow: inset 3px 0 0 var(--sas-tinta); }
.sas-mjesec__d--booking.sas-mjesec__d--dolazak { box-shadow: inset 3px 0 0 var(--sas-sjaj); }

.sas-krug--kanal { width: min(230px, 64vw); }
.sas-krug-legenda { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; }
.sas-krug-legenda__red {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: var(--sas-r-b); cursor: pointer; user-select: none; font-size: 14.5px; color: var(--sas-tinta);
  transition: background-color var(--sas-brzo) var(--sas-ease), color var(--sas-brzo) var(--sas-ease);
}
.sas-krug-legenda__red:hover { background: var(--sas-ispran); }
.sas-krug-legenda__red .sas-legenda__sw { margin: 0; width: 14px; height: 14px; border-radius: 4px; }
.sas-krug-legenda__red > .sas-krug-legenda__ime:first-child { grid-column: 1 / 3; }
.sas-krug-legenda__red b { font-weight: 500; color: inherit; font-variant-numeric: tabular-nums; }

.sas-obracun { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.sas-obracun th, .sas-obracun td { padding: 12px 0; border-bottom: 1px solid var(--sas-linija); }
.sas-obracun th { text-align: left; font-weight: 400; color: var(--sas-tinta); padding-right: 16px; }
.sas-obracun td { text-align: right; color: var(--sas-tinta); white-space: nowrap; }
.sas-obracun__n { margin-left: 6px; font-size: 13px; color: var(--sas-tiho); }
.sas-obracun__tiho { color: var(--sas-tiho) !important; }
.sas-obracun__zbroj th, .sas-obracun__zbroj td { border-top: 2px solid var(--sas-tinta); border-bottom: 0; font-weight: 600; }

/* ───────────────────────── 14. the table: every service × package ───────────────────────── */
/* NO HORIZONTAL SCROLL AT ANY WIDTH: the package columns are narrow and the names wrap, so on a 390 px phone
   all three packages and every tick show. Nothing scrolls inside the frame, so it clips (clip keeps sticky
   working, hidden would kill it) and the head row pins to the PAGE under the header, and under the package
   bar inside paketSkup. The rows come grouped by package, each group opening on the cockpit's light wash.
   A tick marks a service the package carries; a cell without one says "not included" to a screen reader. */
.sas-tbl-okvir { position: relative; overflow: clip; border: 1px solid var(--sas-linija); border-radius: var(--sas-r-s); background: var(--sas-papir); color: var(--sas-tekst); }
.sas-tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14.5px; }
.sas-tbl thead th {
  position: sticky; top: var(--sas-hdr-h); z-index: 2; padding: 12px 6px; font-size: 15px; font-weight: 500; text-align: center;
  background: var(--sas-o-pod, var(--sas-ispran)); color: var(--sas-o-tekst, var(--sas-tinta));
  border-bottom: 1px solid var(--sas-linija);
  transition: background-color var(--sas-srednje) var(--sas-ease), color var(--sas-srednje) var(--sas-ease);
}
.sas-skup--paket .sas-tbl thead th { top: calc(var(--sas-hdr-h) + var(--sas-konf-h)); }
.sas-tbl thead .sas-tbl__kut { width: auto; z-index: 3; text-align: left; padding-left: 16px; background: var(--sas-ispran); color: var(--sas-more); font-size: 13px; }
.sas-tbl__pk { width: clamp(54px, 11vw, 112px); }
.sas-tbl tbody th { position: sticky; left: 0; z-index: 1; padding: 11px 12px 11px 16px; text-align: left; font-weight: 400; background: var(--sas-papir); border-bottom: 1px solid var(--sas-linija); }
.sas-tbl td { padding: 11px 4px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--sas-linija); background: var(--sas-o-svj, transparent); transition: background-color var(--sas-srednje) var(--sas-ease); }
.sas-tbl tbody:last-child tr:last-child > * { border-bottom: 0; }
.sas-tbl__usl { display: flex; gap: 12px; align-items: flex-start; }
.sas-tbl__ik { width: 20px; height: 20px; margin-top: .1em; color: var(--sas-c1-tamno); }
.sas-tbl__h { display: block; color: var(--sas-tinta); font-weight: 500; }
.sas-tbl__p { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--sas-tiho); max-width: 52ch; }
.sas-tbl__da { width: 20px; height: 20px; color: var(--sas-c1-tamno); }
.sas-tbl__da path { stroke-width: 2.2; }
.sas-tbl .sas-tbl__grupa th { position: static; padding: 10px 16px 9px; text-align: left; background: var(--sas-ispran); border-bottom: 1px solid var(--sas-linija); }
.sas-tbl__gh { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--sas-tinta); }
.sas-tbl__gl { margin-left: 8px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sas-more); }
@media (max-width: 559.98px) {
  .sas-tbl { font-size: 13.5px; }
  .sas-tbl__ik, .sas-tbl__p { display: none; }
  .sas-tbl tbody th { padding: 10px 8px 10px 12px; }
  .sas-tbl thead th { padding: 10px 2px; font-size: 13px; }
  .sas-tbl thead .sas-tbl__kut { padding-left: 12px; }
  .sas-tbl .sas-tbl__grupa th { padding: 9px 12px 8px; }
  .sas-tbl__gl { display: block; margin: 2px 0 0; }
}

/* ───────────────────────── 15. cards, pillars, links, steps ───────────────────────── */
.sas-kartica__ikona {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: var(--sas-r-s); background: var(--sas-ik-pod); color: var(--sas-c1-tamno);
}
.sas-kartica__ikona .sas-ikona { width: 20px; height: 20px; }
.sas-kartica__h { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 6px; color: var(--sas-naslov); }
.sas-kartica__p { margin: 0; font-size: 15px; color: var(--sas-tekst); }

.sas-kartica {
  position: relative; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px);
  background: var(--sas-papir); color: var(--sas-tekst); border: 1px solid var(--sas-linija); border-radius: var(--sas-r);
  transition: border-color var(--sas-srednje) var(--sas-ease), transform var(--sas-srednje) var(--sas-ease);
}
.sas-kartica__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce-tekst); }
.sas-kartica__dno { margin: auto 0 0; padding-top: 14px; font-size: 14px; color: var(--sas-tiho); }
.sas-kartica__veza { color: inherit; text-decoration: none; }
.sas-kartica__veza::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sas-kartica__strelica { margin-top: auto; padding-top: 16px; color: var(--sas-sunce-tekst); display: inline-flex; transition: transform var(--sas-srednje) var(--sas-ease); }
@media (hover: hover) {
  .sas-kartica--veza:hover { border-color: var(--sas-more); transform: translateY(-2px); }
  .sas-kartica--veza:hover .sas-kartica__strelica { transform: translateX(4px); }
}
.sas-kartica--veza:focus-within { outline: 3px solid var(--sas-fokus); outline-offset: 2px; }

/* THE FLYER'S PILLARS: a hairline panel, one row each on a phone (the icon left), side by side from 760 px;
   each mark in the cockpit's light blue icon chip (on the ink, its ink twin) */
.sas-stupovi {
  list-style: none; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); overflow: hidden;
}
@media (min-width: 760px) {
  .sas-stupovi:is(.sas-stupovi--n2, .sas-stupovi--n4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sas-stupovi.sas-stupovi--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) { .sas-stupovi.sas-stupovi--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* align-content: start keeps every pillar's mark and words at the top of its cell: a row's cells share the
   tallest one's height, and the extra height must not push a shorter pillar's words down (2026-10-27) */
.sas-stup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-items: start; align-content: start; padding: clamp(18px, 2.2vw, 28px); background: var(--sas-papir); color: var(--sas-tekst); }
@media (min-width: 760px) { .sas-stup { grid-template-columns: minmax(0, 1fr); gap: 16px 0; } }
.sas-stup__ik { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--sas-r-s); background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }
.sas-stup__ik .sas-ikona { width: 23px; height: 23px; }
.sas-stup__h { margin: 2px 0 0; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--sas-naslov); }
.sas-stup__p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--sas-tekst); }
.sas-stupovi--tamno { background: var(--sas-t-crta); border-color: var(--sas-t-crta); }
.sas-stupovi--tamno .sas-stup { background: var(--sas-t-plocica); }
.sas-stupovi--tamno .sas-stup__ik { background: var(--sas-ik-tamno-pod); color: var(--sas-ik-tamno); }

/* a compact row of links (vezeRed): cells cut by hairlines; narrower, they wrap and the last row grows */
.sas-veze__red { list-style: none; display: flex; flex-wrap: wrap; gap: 1px; background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: var(--sas-r-s); overflow: hidden; }
.sas-veze__red > li { display: flex; flex: 1 1 220px; }
.sas-veze__a {
  flex: 1; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px;
  background: var(--sas-papir); color: var(--sas-naslov); text-decoration: none; transition: background-color var(--sas-brzo) var(--sas-ease);
}
.sas-veze__a:hover { background: var(--sas-ispran); color: var(--sas-naslov); }
.sas-veze__ik { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }
.sas-veze__ik .sas-ikona { width: 19px; height: 19px; }
.sas-veze__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sas-veze__h { font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.sas-veze__p { font-size: 13.5px; line-height: 1.4; color: var(--sas-tiho); }
.sas-veze__s { flex: none; width: 18px; height: 18px; color: var(--sas-sunce-tekst); transition: transform var(--sas-brzo) var(--sas-ease); }
.sas-veze__a:hover .sas-veze__s { transform: translateX(4px); }
.sas-veze--tamno .sas-veze__red { background: var(--sas-t-crta); border-color: var(--sas-t-crta); }
.sas-veze--tamno .sas-veze__a { background: var(--sas-t-plocica); }
.sas-veze--tamno .sas-veze__a:hover { background: color-mix(in srgb, var(--sas-papir) 12%, var(--sas-noc)); }
.sas-veze--tamno .sas-veze__ik { background: var(--sas-ik-tamno-pod); color: var(--sas-ik-tamno); }

/* THE STEPS (Ante, 2026-10-27: no track and no dots): a hairline panel like the pillars, each step a cell
   with its number in the cockpit's light blue chip, the words beside it on a phone and under it once the
   steps stand in one row (960 px); two a row from 600 px, an odd last step taking its row */
.sas-koraci {
  list-style: none; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr);
  background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); overflow: hidden;
}
@media (min-width: 600px) {
  .sas-koraci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sas-koraci > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .sas-koraci { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .sas-koraci > :last-child:nth-child(odd) { grid-column: auto; }
}
.sas-korak { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; align-content: start; padding: clamp(18px, 2.2vw, 26px); background: var(--sas-papir); color: var(--sas-tekst); }
@media (min-width: 960px) { .sas-korak { grid-template-columns: minmax(0, 1fr); gap: 16px 0; } }
.sas-korak__broj {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--sas-r-s);
  background: var(--sas-ik-pod); color: var(--sas-c1-tamno); font-size: 14px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.sas-korak__broj::before { content: "0"; }
.sas-korak__t { min-width: 0; }
.sas-korak__oznaka { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--sas-tekst); }
.sas-korak__h { font-size: 17px; font-weight: 500; letter-spacing: -.01em; margin: 2px 0 6px; }
.sas-korak__p { margin: 0; font-size: 15px; color: var(--sas-tekst); }

/* ───────────────────────── 16. text pieces ───────────────────────── */
.sas-lista { list-style: none; display: grid; gap: 10px; }
.sas-lista li { display: flex; gap: 12px; align-items: flex-start; }
/* a plain list's mark is a small sun dot (a point, never a rule) */
.sas-lista:not(.sas-lista--kvacice):not(.sas-lista--brojevi) li::before {
  content: ""; flex: none; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: var(--sas-sunce);
}
.sas-lista__ikona { color: var(--sas-znak); width: 18px; height: 18px; margin-top: .2em; }
.sas-lista--brojevi { counter-reset: br; }
.sas-lista--brojevi li { counter-increment: br; }
.sas-lista--brojevi li::before {
  content: counter(br); flex: none; min-width: 26px; height: 26px; border-radius: 7px; margin-top: -.05em;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  background: var(--sas-ik-pod); color: var(--sas-c1-tamno); font-variant-numeric: tabular-nums;
}
.sas-tekst .sas-lista { margin: 0 0 1.2em; }

/* a callout: the sea foam on white (white on the foam band), a hairline frame and its mark in a chip */
.sas-napomena {
  display: flex; gap: 14px; align-items: flex-start; margin: 24px 0; padding: 16px 18px;
  background: var(--sas-pjena); color: var(--sas-tekst); border: 1px solid var(--sas-linija); border-radius: var(--sas-r-s);
}
.sas-sek--pjena .sas-napomena { background: var(--sas-papir); }
.sas-napomena p:last-child { margin: 0; }
.sas-napomena__ikona { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: var(--sas-r-b); background: var(--sas-c2-pod); color: var(--sas-c2-znak); }
.sas-napomena__naslov { font-weight: 600; color: var(--sas-naslov); margin: 0 0 4px; }
.sas-napomena--pozor .sas-napomena__ikona { background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }

.sas-cipovi { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sas-cip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--sas-pill);
  font-size: 13px; font-weight: 500; background: var(--sas-ik-pod); color: var(--sas-c1-tamno); text-decoration: none;
}
a.sas-cip:hover { background: var(--sas-tinta); color: var(--sas-papir); }
.sas-cip__ikona { width: 15px; height: 15px; }

/* ───────────────────────── 17. questions (and the terms, Česta pitanja's last group) ───────────────────────── */
.sas-pitanja { border-top: 1px solid var(--sas-crta-pod); max-width: 860px; }
.sas-pitanje { border-bottom: 1px solid var(--sas-crta-pod); scroll-margin-top: calc(var(--sas-hdr-h) + 24px); }
.sas-pitanje__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 0;
  cursor: pointer; list-style: none; font-size: clamp(16.5px, .3vw + 15.5px, 18.5px); font-weight: 500; line-height: 1.4; color: var(--sas-naslov);
}
.sas-pitanje__q::-webkit-details-marker { display: none; }
/* the open and closed marks are drawn icons (ctx.ts plus and minus) in the cockpit's chip */
.sas-pitanje__znak {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin-top: -2px;
  border-radius: var(--sas-r-b); background: var(--sas-ik-pod); color: var(--sas-c1-tamno);
}
.sas-pitanje__znak .sas-ikona { width: 16px; height: 16px; }
.sas-pitanje[open] .sas-pitanje__plus, .sas-pitanje:not([open]) .sas-pitanje__minus { display: none; }
.sas-tamno .sas-pitanje__znak { background: var(--sas-ik-tamno-pod); color: var(--sas-ik-tamno); }
.sas-pitanje__a { padding: 0 48px 20px 0; color: var(--sas-tekst); }
.sas-pitanje__a p:last-child { margin-bottom: 0; }
.sas-pitanje__dalje { margin-top: 8px; }
.sas-pitanje__q:hover { color: var(--sas-more); }

/* ───────────────────────── 18. the closing band (the sun's reflection under its upper edge) ───────────────────────── */
/* logo v6's sea half (horizont.ts ctaMoreCss): the upper edge is the horizon, the sun stands just above it
   (on the page), so the band carries what the water shows of it, the sky's glow mirrored and the sun's soft
   reflection, then „Sea” blue deepening into the footer's night */
.sas-cta {
  position: relative; background-color: var(--sas-dubina); background-image: var(--sas-more-grad);
  padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 100px); text-align: center; --sas-pod: var(--sas-dubina);
}
/* the sun's glitter under the edge (horizont.ts odrazSvg: 340 × 128 of the logo's units, 52 to the sun's
   half width), behind the words; it fades out above the heading */
.sas-cta__odraz { position: absolute; left: calc(50% - var(--sas-sr) * 3.27); top: 0; width: calc(var(--sas-sr) * 6.54); height: calc(var(--sas-sr) * 2.46); pointer-events: none; }
.sas-cta__in { position: relative; max-width: calc(820px + 2 * var(--sas-gut)); }
.sas-cta .sas-eyebrow { margin-bottom: 14px; }
.sas-cta__h2 { font-size: clamp(34px, 4.4vw + 12px, 64px); line-height: 1.02; letter-spacing: -.045em; color: var(--sas-papir); text-wrap: balance; }
.sas-cta__p { margin: 18px auto 0; max-width: 60ch; font-size: clamp(16px, .5vw + 14.5px, 19px); color: var(--sas-t-tiho); }

/* ───────────────────────── 19. the app that is coming, people, guides, channels ───────────────────────── */
/* "Aplikacija za vlasnike · uskoro" (blokovi.ts aplikacija): an ink panel (the ink into the logo's deep sea),
   the badge in the sun's glow, the features in a hairline grid with their chips in the cockpit's four data
   colours; no mockup, no date, no store badge */
.sas-aplikacija {
  position: relative; display: grid; gap: clamp(22px, 3vw, 40px); padding: clamp(24px, 4vw, 48px);
  border-radius: var(--sas-r); overflow: hidden; background: linear-gradient(160deg, var(--sas-tinta) 0%, var(--sas-dubina) 100%);
  --sas-pod: var(--sas-tinta);
}
@media (min-width: 960px) { .sas-aplikacija { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
.sas-aplikacija__glava { min-width: 0; }
.sas-aplikacija__glava > .sas-eyebrow { margin-bottom: 10px; }
.sas-aplikacija__znacka {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 5px 12px 5px 10px; border-radius: var(--sas-pill);
  background: var(--sas-sjaj); color: var(--sas-tinta); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.sas-aplikacija__tocka { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sas-sunce-tamno); }
.sas-aplikacija__lista {
  list-style: none; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); min-width: 0;
  background: var(--sas-t-crta); border: 1px solid var(--sas-t-crta); border-radius: var(--sas-r-s); overflow: hidden;
}
@media (min-width: 600px) {
  .sas-aplikacija__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sas-aplikacija__lista > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.sas-aplikacija__stavka { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 18px; background: var(--sas-t-plocica); }
.sas-aplikacija__stavka .sas-ik { grid-row: span 2; }
.sas-aplikacija__stavka:nth-child(4n+2) .sas-ik { background: color-mix(in srgb, var(--sas-c3) 30%, var(--sas-tinta)); color: color-mix(in srgb, var(--sas-c3) 52%, var(--sas-papir)); }
.sas-aplikacija__stavka:nth-child(4n+3) .sas-ik { background: color-mix(in srgb, var(--sas-c4) 36%, var(--sas-tinta)); color: color-mix(in srgb, var(--sas-c4) 42%, var(--sas-papir)); }
.sas-aplikacija__stavka:nth-child(4n+4) .sas-ik { background: color-mix(in srgb, var(--sas-c2) 30%, var(--sas-tinta)); color: color-mix(in srgb, var(--sas-c2) 58%, var(--sas-papir)); }
.sas-aplikacija__h { margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--sas-naslov); }
.sas-aplikacija__p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sas-tiho); }
.sas-aplikacija__dno { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--sas-tiho); }
/* inside an ink band the panel drops its own ground */
.sas-tamno .sas-aplikacija { padding: 0; background: none; border-radius: 0; overflow: visible; }

.sas-osoba { text-align: left; }
/* a role (never a name or a portrait, 2026-10-27): its icon in the cockpit's light blue chip, then the role */
.sas-osoba__znak { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: var(--sas-r-s); background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }
.sas-osoba__znak .sas-ikona { width: 26px; height: 26px; }
.sas-osoba__ime { font-size: 24px; line-height: 1.15; letter-spacing: -.03em; margin: 0 0 6px; }
.sas-osoba__opis { margin: 0; }

/* the channels wrap and the last row grows, so the rule colour never shows as a hole. Each channel keeps one
   data colour wherever it appears (here and in the contact menu): the phone blue, WhatsApp teal, SMS violet,
   e-mail orange */
.sas-kanali { list-style: none; display: flex; flex-wrap: wrap; gap: 1px; background: var(--sas-linija); border: 1px solid var(--sas-linija); border-radius: var(--sas-r-s); overflow: hidden; }
.sas-kanali > li { display: flex; flex: 1 1 260px; }
.sas-kanal {
  flex: 1; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 14px 16px; background: var(--sas-papir); color: var(--sas-tinta); text-decoration: none; transition: background-color var(--sas-brzo);
}
a.sas-kanal:hover { background: var(--sas-ispran); color: var(--sas-tinta); }
.sas-kanal__ikona { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: var(--sas-r-s); display: inline-flex; align-items: center; justify-content: center; background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }
.sas-kanal__ikona--wa { background: var(--sas-c3-pod); color: var(--sas-c3-znak); }
.sas-kanal__ikona--sms { background: var(--sas-c4-pod); color: var(--sas-c4-znak); }
.sas-kanal__ikona--mail { background: var(--sas-c2-pod); color: var(--sas-c2-znak); }
.sas-kanal__ikona .sas-ikona { width: 20px; height: 20px; }
.sas-kanal__ime { font-size: 13px; color: var(--sas-tiho); }
.sas-kanal__vrijednost { font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sas-kanal--uskoro { opacity: .62; }
.sas-izravno { padding: clamp(20px, 2.4vw, 28px); background: var(--sas-pjena); color: var(--sas-tekst); border-radius: var(--sas-r); }
.sas-izravno .sas-kanali { margin-top: 14px; }
.sas-izravno .sas-kanali > li { flex-basis: 100%; }

/* a guide */
.sas-clanak { font-size: clamp(16.5px, .25vw + 15.5px, 18px); color: var(--sas-tinta2); }
.sas-clanak__uvod { font-size: 1.06em; color: var(--sas-more); }
.sas-clanak__odjeljak { margin-top: 40px; scroll-margin-top: calc(var(--sas-hdr-h) + 24px); }
.sas-clanak__h2 { font-size: clamp(24px, 1.6vw + 15px, 32px) !important; margin: 0 0 12px !important; }
.sas-ukratko { margin: 28px 0; padding: 20px 22px; border: 1px solid var(--sas-linija); border-radius: var(--sas-r); background: var(--sas-papir); color: var(--sas-tekst); }
.sas-ukratko__h { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce-tekst); }
.sas-clanak__strana { order: -1; }
@media (min-width: 900px) {
  .sas-clanak__strana { order: 0; position: sticky; top: calc(var(--sas-hdr-h) + 32px); }
}
.sas-sadrzaj { padding: 20px 22px; background: var(--sas-pjena); color: var(--sas-tekst); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); }
.sas-sadrzaj__h { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce-tekst); }
.sas-sadrzaj ol { list-style: none; display: grid; gap: 8px; counter-reset: s; }
.sas-sadrzaj li { counter-increment: s; display: flex; gap: 10px; font-size: 14.5px; }
.sas-sadrzaj li::before { content: counter(s, decimal-leading-zero); color: var(--sas-sunce-tekst); font-weight: 500; font-variant-numeric: tabular-nums; }
.sas-sadrzaj a { color: var(--sas-tinta); text-decoration: none; }
.sas-sadrzaj a:hover { color: var(--sas-more); text-decoration: underline; }
/* (no sources list: since 27 Oct a guide ends with the day it was checked, section 27 block P4) */

/* ───────────────────────── 20. forms ───────────────────────── */
.sas-obrazac-okvir { padding: clamp(20px, 3vw, 36px); background: var(--sas-papir); color: var(--sas-tekst); border: 1px solid var(--sas-linija); border-radius: var(--sas-r); }
.sas-bezjs { display: none; margin: 0; }
/* the two steps as the cockpit's chips side by side (no line between them) */
.sas-wiz__koraci { list-style: none; display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.sas-wiz__koraci li {
  width: 30px; height: 30px; border-radius: var(--sas-r-b); display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; background: var(--sas-ik-pod); color: var(--sas-c1-tamno);
}
.sas-wiz__koraci li[data-on] { background: var(--sas-tinta); color: var(--sas-papir); }
.sas-wiz__koraci li[data-done] { background: var(--sas-c1-tamno); color: var(--sas-papir); }
.sas-wiz__korak { margin: 0 0 18px; font-size: 13.5px; color: var(--sas-tiho); }
.sas-wiz__okno { display: grid; gap: 20px; }
.sas-wiz__h { margin: 0; }
.sas-wiz__h:focus { outline: none; }
.sas-wiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.sas-wiz__nav [data-sas-next] { margin-left: auto; }
.sas-wiz__greska { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--sas-r-b); background: var(--sas-pv); color: var(--sas-greska); font-weight: 600; }

.sas-polja-red { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.sas-polje { display: grid; gap: 8px; }
.sas-polje label, .sas-izbor legend { font-size: 14.5px; font-weight: 500; color: var(--sas-tinta); padding: 0; }
.sas-polje__neob { font-weight: 400; color: var(--sas-tiho); }
.sas-polje__pomoc { margin: 0; font-size: 13.5px; color: var(--sas-tiho); }
.sas-polje input, .sas-polje select, .sas-polje textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; font: 400 16px/1.4 var(--sas-font); color: var(--sas-tinta);
  background: var(--sas-papir); border: 1px solid var(--sas-rub); border-radius: var(--sas-r-b);
  transition: border-color var(--sas-brzo), box-shadow var(--sas-brzo);
}
.sas-polje textarea { min-height: 110px; resize: vertical; }
.sas-polje input:focus, .sas-polje select:focus, .sas-polje textarea:focus { outline: none; border-color: var(--sas-more); box-shadow: 0 0 0 3px var(--sas-r1); }
.sas-polje[data-greska] input, .sas-polje[data-greska] select, .sas-polje[data-greska] textarea { border-color: var(--sas-greska); }
.sas-izbor { margin: 0; padding: 0; border: 0; min-width: 0; }
.sas-izbor legend { margin-bottom: 10px; }
.sas-izbor__red { display: flex; flex-wrap: wrap; gap: 6px; }
.sas-izbor__red label {
  display: inline-flex; align-items: center; min-height: 42px; padding: 9px 16px; border-radius: var(--sas-pill);
  border: 1px solid var(--sas-linija-jaka); background: var(--sas-papir); color: var(--sas-more); font-size: 15px; cursor: pointer;
  transition: background-color var(--sas-brzo), color var(--sas-brzo), border-color var(--sas-brzo);
}
.sas-izbor__red label:hover { border-color: var(--sas-more); }
.sas-izbor__red input:checked + label { background: var(--sas-tinta); border-color: var(--sas-tinta); color: var(--sas-papir); }
.sas-izbor__red input:focus-visible + label { outline: 3px solid var(--sas-fokus); outline-offset: 2px; }
.sas-izbor[data-greska] .sas-izbor__red label { border-color: var(--sas-greska); }

.sas-poruka { padding: 16px; border-radius: var(--sas-r-s); background: var(--sas-ispran); color: var(--sas-tekst); border: 1px solid var(--sas-linija); }
.sas-poruka__h { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--sas-more); }
.sas-poruka__tekst { margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 15px/1.55 var(--sas-font); color: var(--sas-tinta); }
.sas-poruka .sas-polje__pomoc { color: var(--sas-more); }
.sas-posalji { display: flex; flex-wrap: wrap; gap: 10px; }

/* ───────────────────────── 21. footer (kept from Horizont: the night, now with no line on its edge) ───────────────────────── */
.sas-foot { position: relative; background: var(--sas-noc); color: var(--sas-t-tiho); padding: clamp(56px, 7vw, 92px) 0 30px; font-size: 15px; }
.sas-foot__in { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.sas-foot__brand { grid-column: span 2; max-width: 420px; }
@media (max-width: 719.98px) { .sas-foot__brand { grid-column: auto; } }
.sas-foot__logo { display: inline-flex; line-height: 0; border-radius: 14px; }
.sas-foot__ploca { display: inline-flex; padding: 12px 18px; background: var(--sas-papir); border-radius: 14px; }
.sas-foot__logo-img { height: 38px; width: auto; }
.sas-foot__moto { margin: 22px 0 8px; font-size: 22px; letter-spacing: -.025em; color: var(--sas-sjaj); }
.sas-foot__opis { margin: 0; }
.sas-foot__h { font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce); margin: 0 0 16px; }
.sas-foot ul { list-style: none; display: grid; gap: 10px; }
.sas-foot a { color: var(--sas-t-tiho); text-decoration: none; }
.sas-foot a:hover { color: var(--sas-papir); text-decoration: underline; }
.sas-foot__broj { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the row of bubbles under the brand's sentence (chrome.ts footer): WhatsApp first, then each social network
   once it exists. A bubble is the ink's own tile with its mark in the footer links' colour, 44px so a finger
   finds it; pointed at or focused it brightens as a footer link does (the mark turns paper and the tile
   lifts a step), and the ring is the global focus ring, paper on the ink */
.sas-foot__mreze { display: flex !important; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sas-mjehur {
  display: inline-flex; width: 44px; height: 44px; border-radius: var(--sas-r-s); align-items: center; justify-content: center;
  background: var(--sas-t-plocica);
  transition: background-color var(--sas-brzo) var(--sas-ease), color var(--sas-brzo) var(--sas-ease);
}
.sas-mjehur .sas-ikona { width: 22px; height: 22px; }
@media (hover: hover) { .sas-foot a.sas-mjehur:hover { background: var(--sas-t-crta); color: var(--sas-papir); } }
.sas-foot a.sas-mjehur:focus-visible { background: var(--sas-t-crta); color: var(--sas-papir); }
.sas-foot__dno {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 52px; padding-top: 22px;
  border-top: 1px solid var(--sas-t-crta); font-size: 13.5px;
}
.sas-foot__dno p { margin: 0; }
.sas-foot__potpis { margin-left: auto !important; }

/* ───────────────────────── 22. the contact menu (Ante, 2026-10-27: it replaces the "Pojmovi" button) ───────────────────────── */
/* A round ink button bottom right, its menu mark turning into a cross; pressed, a white card of contact
   actions rises above it, each with its mark in the channel's data colour (as on Kontakt). It is a
   <details>, so it opens and closes with no script at all; inline.js closes it on Escape, on a click outside
   and on a pick. It stands on EVERY page, the two contact forms and the 404 included, from the first screen
   (Ante, 2026-10-28: always visible). No shadow in this design: a white ring separates the button from the
   page under it. */
.sas-km {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 55;
  transition: opacity var(--sas-srednje) var(--sas-ease), transform var(--sas-srednje) var(--sas-ease);
}
/* open, it stands above the install card (z-index 60) and the staging review panel (70), so no row of it is
   ever under either */
.sas-km[open] { z-index: 75; }
/* on a very short screen (a phone held sideways) the card's heading steps aside for the actions; the list
   keeps its name (aria-labelledby reads a hidden element too) */
@media (max-height: 400px) { .sas-km__h { display: none; } }
.sas-km__gumb {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--sas-km-h); height: var(--sas-km-h); border-radius: 50%; cursor: pointer; list-style: none;
  background: var(--sas-tinta); color: var(--sas-papir); border: 3px solid var(--sas-papir);
  transition: background-color var(--sas-brzo) var(--sas-ease), transform var(--sas-brzo) var(--sas-ease);
  -webkit-tap-highlight-color: transparent;
}
.sas-km__gumb::-webkit-details-marker { display: none; }
@media (hover: hover) { .sas-km__gumb:hover { background: var(--sas-more); } }
.sas-km__gumb:active { transform: scale(.96); }
.sas-km__ik { position: absolute; width: 22px; height: 22px; transition: opacity var(--sas-brzo) var(--sas-ease), transform var(--sas-srednje) var(--sas-ease); }
.sas-km__ik--x { opacity: 0; transform: rotate(-90deg); }
.sas-km[open] .sas-km__ik--meni { opacity: 0; transform: rotate(90deg); }
.sas-km[open] .sas-km__ik--x { opacity: 1; transform: none; }
.sas-km__meni {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: min(300px, calc(100vw - 32px));
  padding: 8px; background: var(--sas-papir); color: var(--sas-tekst);
  border: 1px solid var(--sas-linija-jaka); border-radius: var(--sas-r);
  /* a phone held sideways has less height than the card: it scrolls inside, and no row is ever above the
     screen (16 under the button, 12 between, 16 of air) */
  max-height: calc(100vh - var(--sas-km-h) - 44px); max-height: calc(100dvh - var(--sas-km-h) - 44px);
  overflow-y: auto; overscroll-behavior: contain;
}
.sas-km[open] .sas-km__meni { animation: sas-km-in var(--sas-srednje) var(--sas-ease) both; }
@keyframes sas-km-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sas-km__h { margin: 6px 10px 8px; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sas-sunce-tekst); }
.sas-km__lista { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.sas-km__a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: var(--sas-r-s);
  color: var(--sas-tinta); text-decoration: none; transition: background-color var(--sas-brzo) var(--sas-ease);
}
.sas-km__a:hover { background: var(--sas-ispran); color: var(--sas-tinta); }
.sas-km__znak { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sas-ik-pod); color: var(--sas-c1-tamno); }
.sas-km__znak .sas-ikona { width: 19px; height: 19px; }
.sas-km__znak--wa { background: var(--sas-c3-pod); color: var(--sas-c3-znak); }
.sas-km__znak--sms { background: var(--sas-c4-pod); color: var(--sas-c4-znak); }
.sas-km__znak--mail { background: var(--sas-c2-pod); color: var(--sas-c2-znak); }
.sas-km__znak--sastanak { background: var(--sas-tinta); color: var(--sas-papir); }
.sas-km__t { display: flex; flex-direction: column; min-width: 0; }
.sas-km__l { font-size: 15.5px; font-weight: 500; line-height: 1.25; }
.sas-km__v { font-size: 13px; line-height: 1.35; color: var(--sas-tiho); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Always on screen. It steps aside only under the open phone menu (the sheet is the page then; inline.js
   closes it as the sheet opens), and so does the install card, which would cover the sheet's last links;
   both come back when the sheet closes, the card untouched and uncounted. */
body:has(.sas-hdr[data-open]) .sas-km, body:has(.sas-hdr[data-open]) .sas-app { display: none; }
/* While the install card stands at the foot of the screen, the button rises above it by the card's height
   (inline.js part 3 writes --sas-app-h), by transform only. They meet only below 712px: the card is
   min(560px, 100% - 24px) wide and centred, the button's column the last 68px on the right. */
@media (max-width: 711.98px) {
  body:has(.sas-app:not([hidden])) .sas-km { transform: translateY(calc(-1 * (var(--sas-app-h, 0px) + 12px))); }
  /* risen, the open card has that much less height above it */
  body:has(.sas-app:not([hidden])) .sas-km__meni { max-height: calc(100dvh - var(--sas-km-h) - 56px - var(--sas-app-h, 0px)); }
}
/* the footer keeps room under the button, so it never covers the end of a page */
body:has(.sas-km) .sas-foot { padding-bottom: calc(46px + var(--sas-km-h)); }
/* a form's own controls (the answer chips, Next, the sends) keep out of the button's column wherever the
   form reaches it, so it never covers them (the forms' column is 760px wide at most, in its frame's padding) */
@media (max-width: 879.98px) {
  body:has(.sas-km) .sas-wiz__nav, body:has(.sas-km) .sas-posalji, body:has(.sas-km) .sas-izbor__red { padding-right: calc(var(--sas-km-h) + 8px); }
}

/* ───────────────────────── 23. the install card ───────────────────────── */
.sas-app {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; transform: translateX(-50%);
  width: min(560px, calc(100% - 24px)); display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center;
  padding: 16px 18px; background: var(--sas-papir); color: var(--sas-more); border: 1px solid var(--sas-linija-jaka); border-radius: var(--sas-r);
}
.sas-app__ikona { border-radius: 12px; }
.sas-app__t { margin: 0; font-weight: 600; color: var(--sas-tinta); }
.sas-app__x, .sas-app__koraci { margin: 2px 0 0; font-size: 14px; color: var(--sas-more); }
.sas-app__gumbi { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.sas-app__gumbi .sas-gumb { min-height: 40px; padding: 8px 16px; font-size: 15px; }

/* ───────────────────────── 24. the review layer (staging only) ───────────────────────── */
.sas-pv {
  display: none; align-items: center; margin-left: 8px; padding: 2px 10px; border-radius: var(--sas-pill);
  font: 600 12px/1.6 var(--sas-font); letter-spacing: .02em; vertical-align: middle; background: var(--sas-pv); color: var(--sas-tinta);
}
[data-sas-provjera] .sas-pv { display: inline-flex; }
.sas-provjera {
  /* it leaves the contact button's column free (staging only) */
  position: fixed; left: 16px; bottom: 16px; z-index: 70; width: min(420px, calc(100% - 40px - var(--sas-km-h, 52px) - 8px)); max-height: 60vh; overflow: auto;
  padding: 20px; background: var(--sas-papir); color: var(--sas-more); border: 2px solid var(--sas-tinta); border-radius: var(--sas-r); font-size: 14px;
}
.sas-provjera__t { margin: 0 0 6px; font-weight: 600; font-size: 16px; color: var(--sas-tinta); }
.sas-provjera__uvod { color: var(--sas-more); }
.sas-provjera__lista { list-style: disc; padding-left: 20px; display: grid; gap: 6px; margin-bottom: 12px; }

/* ───────────────────────── 25. small pages ───────────────────────── */
.sas-impresum { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--sas-crta-pod); }
.sas-impresum div { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sas-crta-pod); }
.sas-impresum dt { color: var(--sas-tiho); }
.sas-impresum dd { margin: 0; font-weight: 500; color: var(--sas-naslov); }
.sas-404__veze { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.sas-404__veze a { display: inline-flex; padding: 8px 16px; border-radius: var(--sas-pill); background: var(--sas-ik-pod); text-decoration: none; color: var(--sas-c1-tamno); font-weight: 500; }
.sas-404__veze a:hover { background: var(--sas-tinta); color: var(--sas-papir); }

/* ───────────────────────── 26. motion: panes settle, sections arrive, page turns ───────────────────────── */
/* a pane that a filter shows goes display:none -> block, which restarts this: the cockpit's settle */
.sas-okno { animation: sas-smiri var(--sas-srednje) var(--sas-ease) both; }
@keyframes sas-smiri { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
tbody.sas-okno { animation-name: sas-smiri-tbl; }
@keyframes sas-smiri-tbl { from { opacity: .35; } to { opacity: 1; } }
[data-sas-otkrij="cekaj"] { opacity: .55; transform: translateY(14px); }
[data-sas-otkrij="da"] {
  opacity: 1; transform: none;
  transition: opacity 640ms var(--sas-ease) var(--sas-kasni, 0ms), transform 640ms var(--sas-ease) var(--sas-kasni, 0ms);
}
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-sas-otkrij] { opacity: 1 !important; transform: none !important; }
  .sas-hz__sjaj, .sas-hz__zrcalo, .sas-hz__odraz, .sas-hz__iskre { transform: none !important; }
}
@media print {
  .sas-hdr, .sas-app, .sas-provjera, .sas-hero__scena, .sas-wiz__nav, .sas-posalji, .sas-konf, .sas-km { display: none !important; }
  [data-sas-otkrij], .sas-okno { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* paper has no ink bands: every role back to its paper value */
  .sas-tamno {
    --sas-tekst: var(--sas-more); --sas-naslov: var(--sas-tinta); --sas-veza: var(--sas-tinta); --sas-tiho: var(--sas-tiho-svj);
    --sas-sunce-tekst: var(--sas-sunce-tekst-svj); --sas-znak: var(--sas-c1-tamno); --sas-crta-pod: var(--sas-linija);
  }
  .sas-hero, .sas-glava, .sas-cta, .sas-foot, .sas-sek, .sas-aplikacija { background: none !important; color: var(--sas-tinta) !important; }
  .sas-hero__h1, .sas-glava__h1, .sas-cta__h2, .sas-hero__lede, .sas-glava__lede, .sas-cta__p { color: var(--sas-tinta) !important; }
  .sas-glava__sunce, .sas-cta__odraz { display: none !important; }
  .sas-glava { padding-bottom: 24px; }
}

/* ───────────────────────── 27. page blocks (stage 2: each page module appends its own block below) ───────────────────────── */

/* ── page P1 naslovna + usluge (2026-10-27) ── */

/* the home hero: the words, then the flyer's three pillars on the ink. From 1024 px the pillars stand
   beside the words as one column, the mark on the left, so the right half of the hero is never empty;
   from 760 px to 1023 px they sit under the words side by side, and on a phone one under another */
.sas-hero__red { display: grid; gap: clamp(28px, 3.6vw, 44px); }
.sas-hero__tekst, .sas-hero__desno { min-width: 0; }
@media (min-width: 1024px) {
  .sas-hero__red { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; column-gap: clamp(40px, 5vw, 72px); }
  .sas-hero__desno .sas-stupovi.sas-stupovi--n3 { grid-template-columns: minmax(0, 1fr); }
  .sas-hero__desno .sas-stup { grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; }
}

/* the home ink band: below 1024 px the services board would only repeat the package columns stacked
   right above it, so there the band keeps the donut and its legend; the board joins them from 1024 px */
@media (max-width: 1023.98px) {
  #preuzimamo .sas-ploca { display: none; }
}

/* "Aplikacija za vlasnike": its features are drafts until the founders confirm them, so a live bake can
   print the panel with an empty list; then the badge, the heading and the sentence stand alone */
.sas-aplikacija__lista:empty { display: none; }
@media (min-width: 960px) {
  .sas-aplikacija:not(:has(.sas-aplikacija__stavka)) { grid-template-columns: minmax(0, 1fr); }
}

/* Usluge: the three packages in a paragraph each (zajednicko.ts paketiUkratko), each mark in the cockpit's
   chip and Full's in the ink, as its column is on the home page; the name a step larger */
.sas-stupovi--paketi > .sas-stup:nth-child(3) .sas-stup__ik { background: var(--sas-tinta); color: var(--sas-papir); }
.sas-stupovi--paketi .sas-stup__h { font-size: 15px; }
/* (the long call's wrap below 375 px is one global rule now: section 3) */
/* ── end of page P1 ── */

/* ── page P2 za-koga + cijene (stranice/za-koga.ts, stranice/cijene.ts; 2026-10-27) ── */

/* Za koga #vrste: the kinds' pills and the kind on show sit in ONE white panel on the sea foam, the pills
   heading it over a hairline. The kind a visitor arrives at is picked by rules that za-koga.ts generates
   (they name the kinds); a pressed pill hands over to the skup's own rules. */
#vrste .sas-skup {
  padding: clamp(18px, 3vw, 34px); background: var(--sas-papir); color: var(--sas-tekst);
  border: 1px solid var(--sas-linija); border-radius: var(--sas-r); --sas-pod: var(--sas-papir);
}
#vrste .sas-pilule { padding-bottom: clamp(14px, 2vw, 20px); margin-bottom: clamp(18px, 2.6vw, 30px); border-bottom: 1px solid var(--sas-linija); }
#vrste .sas-podijeljeno { gap: clamp(14px, 4vw, 56px); }
#vrste .sas-h3 { margin: 0 0 10px; font-size: clamp(28px, 1.8vw + 20px, 42px); font-weight: 400; line-height: 1.04; letter-spacing: -.04em; }
#vrste .sas-podijeljeno__a p { margin: 0; max-width: 44ch; }
#vrste .sas-lista { gap: 16px; }
#vrste .sas-lista li > span { color: var(--sas-naslov); }
#vrste .sas-sek__dalje { margin-top: 20px; }
/* an address naming a kind (za-koga/#sobe) scrolls to that kind's view, which sits under the pills: the view
   stops as far below the usual anchor line as the panel's top padding and the pill row are tall (about 120 px
   at 390 and at 1440, measured), so the pills, the chosen one dark, stay in sight under the sticky header */
#vrste [data-sas-vrsta-za][id] { scroll-margin-top: 128px; }
/* the packages that carry a line: the cockpit's chip, and Full's in the ink */
:is(#vrste, #troskovi) .sas-cipovi { margin-top: 7px; }
#vrste .sas-cip[data-sas-paket="full"] { background: var(--sas-tinta); color: var(--sas-papir); }

/* Za koga #kriteriji: the flyer's pillars; a criterion alone (production keeps only the confirmed area)
   keeps its mark on the left at every width */
#kriteriji .sas-stupovi--n1 .sas-stup { grid-template-columns: auto minmax(0, 1fr); gap: 0 16px; }

/* Cijene #provizija: what the introductory call settles, a white panel in a hairline frame */
#provizija .sas-sek__glava { margin-bottom: 0; }
#provizija .sas-podijeljeno__b {
  padding: clamp(20px, 2.6vw, 30px); color: var(--sas-tekst); background: var(--sas-papir);
  border: 1px solid var(--sas-linija); border-radius: var(--sas-r);
}
#provizija .sas-h3 { margin-bottom: 16px; }
#provizija .sas-tiho { margin: 18px 0 0; }

/* Cijene #troskovi: ONE table of two columns that fits a 390 px phone with its headings on the cockpit's
   light wash. Who pays, once confirmed, sits under the cost: the owner's on the data orange's light step
   (the legend's "ostaje kod vas"), the guest's on the cockpit's light blue chip (ink text on both). */
#troskovi table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; line-height: 1.45; }
#troskovi thead th {
  width: 34%; padding: 12px 18px 11px; text-align: left; vertical-align: bottom;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--sas-more);
  background: var(--sas-ispran); border-bottom: 1px solid var(--sas-linija);
}
#troskovi thead th + th { width: auto; }
#troskovi tbody :is(th, td) { padding: 13px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--sas-linija); }
#troskovi tbody tr:first-child > * { border-top: 0; }
#troskovi tbody th { font-weight: 500; color: var(--sas-tinta); }
#troskovi tbody td { color: var(--sas-tekst); }
#troskovi .sas-cip { color: var(--sas-tinta); }
#troskovi .sas-cip[data-sas-placa="vlasnik"] { background: var(--sas-s1); }
@media (max-width: 559.98px) {
  #troskovi table { font-size: 14px; }
  #troskovi thead th { width: 38%; padding: 10px 12px 9px; letter-spacing: .08em; }
  #troskovi tbody :is(th, td) { padding: 11px 12px; }
}
/* ── end of page P2 ── */

/* ── page P4: vodiči (stranice/vodici.ts), the guides' hub and every guide page ── */
/* the figures on the ink (a guide's head, the hub's head): a value can be a phrase ("250 € po krevetu",
   "početkom 2027."), so it is set a step below the home page's numbers and balanced over two lines */
.sas-vod-brojke .sas-plocica__v { font-size: clamp(22px, 1.1vw + 13px, 28px); text-wrap: balance; }
/* the article band: on a phone "Ukratko" and the contents come before the text; from 900 px they stand
   beside it, and the side column runs the article's whole height so the contents stay in view */
.sas-vod-clanak .sas-podijeljeno__b { order: -1; }
@media (min-width: 900px) {
  .sas-vod-clanak .sas-podijeljeno__b { order: 0; align-self: stretch; }
}
.sas-vod-clanak .sas-clanak > .sas-clanak__odjeljak:first-child { margin-top: 0; }
/* "Ukratko" on the sea foam in its hairline frame; its ticks in the data blue */
.sas-vod-clanak .sas-ukratko { margin: 0 0 16px; background: var(--sas-pjena); }
.sas-vod-clanak .sas-ukratko .sas-lista__ikona { color: var(--sas-c1-tamno); }
/* the one quiet line at the end of a guide: the day its facts were checked */
.sas-vod-provjereno { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--sas-linija); font-size: 14px; line-height: 1.5; color: var(--sas-tiho); }
/* a guide's year: the package pills over the calendar */
.sas-vod-rokovi .sas-pilule { margin-bottom: 16px; }
/* the hub's cards: the guide's figure at the foot of the card over a hairline, the arrow under it */
.sas-vod-hub .sas-kartica__p { margin-bottom: 18px; }
.sas-vod-hub .sas-kartica__dno { padding-top: 14px; border-top: 1px solid var(--sas-linija); font-size: 13.5px; line-height: 1.45; color: var(--sas-tiho); }
.sas-vod-hub .sas-kartica__dno b { display: block; margin-bottom: 2px; font-size: 21px; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; color: var(--sas-naslov); }
.sas-vod-hub .sas-kartica__dno + .sas-kartica__strelica { margin-top: 0; }
/* (the long call's wrap below 375 px is one global rule now: section 3) */
/* ── end of page P4 ── */