/* ==========================================================================
   Croatian Licensed Casinos — main stylesheet
   Design system: Miranda (broadsheet editorial on warm parchment)
   Written from scratch. Mobile-first. No framework, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted webfonts (OFL substitutes named by the design file)
   Editorial New  -> Source Serif 4
   Canopee        -> Bodoni Moda
   Domaine Display-> Playfair Display
   latin + latin-ext both loaded: Croatian c-caron / c-acute / d-stroke /
   s-caron / z-caron all live in latin-ext.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Editorial Sub';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/source-serif-4-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Editorial Sub';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/source-serif-4-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Canopee Sub';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/bodoni-moda-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Canopee Sub';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/bodoni-moda-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Domaine Sub';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Domaine Sub';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/playfair-display-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens — verbatim from DESIGN.md, plus fluid display steps
   -------------------------------------------------------------------------- */
:root {
  /* Colours */
  --color-parchment: #e2dedb;
  --color-bone-cream: #cdc6be;
  --color-ink-black: #1d1d1b;
  --color-charcoal: #69645f;
  --color-pure-black: #000000;
  --color-ember-orange: #c03f13;

  /* Surfaces */
  --surface-parchment: #e2dedb;
  --surface-bone-cream: #cdc6be;
  --surface-ink-black: #1d1d1b;
  --surface-pure-black: #000000;

  /* Families — serif fallbacks only; the design file forbids system sans */
  --font-editorial-new: 'Editorial Sub', 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-canopee: 'Canopee Sub', 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --font-domaine-display: 'Domaine Sub', 'Playfair Display', 'Iowan Old Style', Georgia, serif;

  /* Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Type scale — fixed steps */
  --text-caption: 14px;      --leading-caption: 1.18;      --tracking-caption: -0.27px;
  --text-body-sm: 16px;      --leading-body-sm: 1.27;      --tracking-body-sm: -0.16px;
  --text-subheading: 22px;   --leading-subheading: 1.18;   --tracking-subheading: -0.55px;
  --text-heading-sm: 32px;   --leading-heading-sm: 1.11;   --tracking-heading-sm: -0.96px;
  --text-heading: 65px;      --leading-heading: 0.91;      --tracking-heading: -2.08px;
  --text-heading-lg: 122px;  --leading-heading-lg: 0.79;   --tracking-heading-lg: -4.88px;
  --text-display: 446px;     --leading-display: 0.73;      --tracking-display: -22.3px;

  /* Fluid display steps — DEVIATION: the fixed 65/122/446px steps overflow
     any viewport under ~1200px. Each clamp resolves to the design-file value
     at 1440px and scales down from there. */
  --text-heading-fluid: clamp(34px, 4.6vw, 65px);
  --text-heading-lg-fluid: clamp(52px, 8.6vw, 122px);
  --text-display-fluid: clamp(64px, 25vw, 402px);

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;   --spacing-7: 7px;   --spacing-10: 10px; --spacing-12: 12px;
  --spacing-14: 14px; --spacing-17: 17px; --spacing-22: 22px; --spacing-28: 28px;
  --spacing-29: 29px; --spacing-36: 36px; --spacing-43: 43px; --spacing-58: 58px;
  --spacing-65: 65px; --spacing-115: 115px;

  /* Layout */
  /* The single content container. Its width is the ranking block's original
     width — the wide flex strip (identity 25% / body flex-1 / action 200px).
     Everything else on the site expands to match it; nothing shrinks to the
     prose. 1440px - 2x22px gutter = 1396px of content. */
  --content-width: 1440px;
  --section-gap: 43px;
  --card-padding: 24px;
  --element-gap: 14px;
  --gutter: var(--spacing-22);

  /* Radii */
  --radius-tags: 2.88px;
  --radius-cards: 11.52px;
  --radius-images: 0px;
  --radius-buttons: 2.88px;

  /* Shadows — cards only, never for general depth */
  --shadow-sm: rgba(29, 29, 27, 0.2) -4px 4px 6px 0px;
  --shadow-sm-2: rgba(29, 29, 27, 0.2) -5px 3px 6px 0px;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; border-radius: var(--radius-images); }
table { border-collapse: collapse; width: 100%; }

body {
  background: var(--surface-parchment);
  color: var(--color-ink-black);
  font-family: var(--font-editorial-new);
  font-weight: var(--font-weight-light);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  font-synthesis-weight: none;
}

/* The one and only content container. Every section on every page uses this
   and nothing else — hero, ranking, register table, editorial blocks, help
   panel, footer and all seven internal pages. There is no second variant.
   The ink band behind the display banner still spans the viewport, because
   the band is .banner itself; only its contents sit in this container. */
.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--spacing-12); top: -100px; z-index: 20;
  background: var(--surface-ink-black); color: var(--color-parchment);
  padding: var(--spacing-10) var(--spacing-17);
  border-radius: var(--radius-buttons); font-size: var(--text-caption);
}
.skip-link:focus { top: var(--spacing-10); }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-ember-orange); outline-offset: 3px; }

/* Text Link with Underline — the design file's only link treatment */
.link {
  color: var(--color-ink-black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link:hover { color: var(--color-pure-black); }

/* --------------------------------------------------------------------------
   4. Type utilities
   -------------------------------------------------------------------------- */
.t-caption {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}
.t-meta {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-charcoal);
}
.t-lead {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.h-display {
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: var(--text-display-fluid); line-height: 0.73;
  letter-spacing: -0.05em; text-transform: uppercase;
}
.h-xl {
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: var(--text-heading-lg-fluid); line-height: 0.79;
  letter-spacing: -0.04em; text-transform: uppercase;
}
.h-lg {
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: var(--text-heading-fluid); line-height: 0.91;
  letter-spacing: -0.032em; text-transform: uppercase;
}
.h-md {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}
.h-sm {
  font-family: var(--font-editorial-new); font-weight: var(--font-weight-light);
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.prose p { margin-bottom: var(--spacing-17); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: var(--font-weight-light); font-style: italic; }

.section { padding-block: var(--section-gap); }
.section + .section { padding-top: 0; }
.rule { border: 0; border-top: 1px solid var(--color-ink-black); margin-block: var(--spacing-36); }

/* --------------------------------------------------------------------------
   5. Editorial Header Bar
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--surface-parchment);
  border-bottom: 1px solid var(--color-ink-black);
  position: relative;
  z-index: 10;
}
.site-header__bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--spacing-17); padding-block: var(--spacing-14);
}
.brand { text-decoration: none; display: block; }
.brand__mark {
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: 26px; line-height: 1.0; letter-spacing: -0.035em; text-transform: uppercase;
  display: block;
}
.brand__desc {
  display: block; margin-top: var(--spacing-7);
  font-size: 13px; line-height: 1.18; letter-spacing: var(--tracking-caption);
  color: var(--color-charcoal);
}

.nav-toggle {
  appearance: none; background: none; border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-buttons); color: var(--color-ink-black);
  padding: var(--spacing-10) var(--spacing-12); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--spacing-7);
  font-family: inherit; font-size: var(--text-caption); letter-spacing: 0.08em;
  text-transform: uppercase; flex: none;
}
.nav-toggle__bars { display: block; width: 18px; height: 10px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span {
  content: ''; position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--color-ink-black);
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span { top: 50%; }
.nav-toggle__bars::after { bottom: 0; }

.site-nav { display: none; padding-bottom: var(--spacing-17); }
.site-nav.is-open { display: block; }
.site-nav__list { display: flex; flex-direction: column; gap: var(--spacing-12); }
.site-nav__link {
  text-decoration: none; font-size: 19px; line-height: 1.2;
  letter-spacing: -0.02em; display: inline-block;
}
.site-nav__link:hover, .site-nav__link[aria-current='page'] {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: block !important; padding-bottom: 0;
    border-top: 1px solid var(--color-ink-black);
    padding-block: var(--spacing-10);
  }
  .site-header__bar { align-items: center; padding-block: var(--spacing-17); }
  .site-nav__list { flex-direction: row; gap: var(--spacing-22); align-items: center; }
  .site-nav__link { font-size: 17px; }
}
@media (min-width: 1000px) {
  .site-nav__list { gap: var(--spacing-29); }
  .site-nav__link { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   6. Display Banner Block
   -------------------------------------------------------------------------- */
.banner {
  background: var(--surface-ink-black);
  color: var(--color-parchment);
  padding-block: var(--spacing-22);
  overflow: hidden;
}
.banner__word {
  display: block; text-align: center; white-space: nowrap;
  padding-top: 0.12em; padding-bottom: 0.10em;
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: var(--text-display-fluid); line-height: 0.73;
  letter-spacing: -0.05em; text-transform: uppercase;
  margin-inline: -0.04em;
}
/* Banner word steps. The display clamp is sized for a six-character word
   (KASINA). Longer page words need a smaller step or they clip against
   .banner's overflow; both steps still land above 200px at desktop, which is
   the floor DESIGN.md sets for a section-divider banner. */
.banner__word--md { font-size: clamp(56px, 17vw, 274px); }
.banner__word--sm { font-size: clamp(46px, 12.6vw, 204px); }

.banner__sub {
  display: block; text-align: center; color: var(--color-parchment);
  font-size: var(--text-caption); line-height: var(--leading-caption);
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.86;
  margin-top: var(--spacing-10);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--spacing-36) var(--spacing-43); }
.hero__grid { display: grid; gap: var(--spacing-29); }
.hero__title { margin-bottom: var(--spacing-17); }
.hero__lead { margin-bottom: var(--spacing-17); }
.hero__note {
  border-top: 1px solid var(--color-ink-black);
  padding-top: var(--spacing-12); margin-top: var(--spacing-22);
}
/* Primary hero action. Reuses the .btn component from the ranking CTAs — same
   ink fill, parchment text, 2.88px radius, arrow glyph. Selectors are scoped
   as .hero__cta .btn (0,2,0) rather than .btn--hero (0,1,0) on purpose: the
   base .btn rules live further down the file and would otherwise win on order.
   The gap below the button is a full step larger than the chip row's own
   rhythm, so the filled action does not read as part of the outlined group. */
.hero__cta { margin-top: var(--spacing-22); }
.hero__cta .btn { width: 100%; }

.hero__flags { display: flex; flex-wrap: wrap; gap: var(--spacing-10); margin-top: var(--spacing-17); }
.hero__cta + .hero__flags { margin-top: var(--spacing-29); }

@media (min-width: 768px) {
  .hero__cta .btn { width: auto; }
}
@media (min-width: 1000px) {
  /* The ranking compacts .btn to 16px so it fits its 200px action column.
     That compaction is not wanted on a primary hero action — keep the
     component's own base size here. */
  .hero__cta .btn { font-size: 19px; padding: var(--spacing-12) var(--spacing-22); }
}

@media (min-width: 920px) {
  .hero__grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--spacing-43); align-items: start; }
}

/* Age / responsible marks */
.mark {
  display: inline-flex; align-items: center; gap: var(--spacing-7);
  border: 1px solid var(--color-ink-black); border-radius: var(--radius-tags);
  padding: var(--spacing-4) var(--spacing-10);
  font-size: var(--text-caption); line-height: 1.3; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mark--age { background: var(--surface-ink-black); color: var(--color-parchment); border-color: var(--color-ink-black); }

/* Stamp Seal Illustration — repurposed as the register-check seal */
.seal {
  --perf: 5px;
  background: var(--surface-bone-cream);
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-cards);
  padding: var(--spacing-29);
  position: relative;
  -webkit-mask:
    radial-gradient(circle var(--perf) at 50% 0, #0000 97%, #000) 50% 0 / 15px 11px repeat-x,
    radial-gradient(circle var(--perf) at 50% 100%, #0000 97%, #000) 50% 100% / 15px 11px repeat-x,
    radial-gradient(circle var(--perf) at 0 50%, #0000 97%, #000) 0 50% / 11px 15px repeat-y,
    radial-gradient(circle var(--perf) at 100% 50%, #0000 97%, #000) 100% 50% / 11px 15px repeat-y,
    linear-gradient(#000, #000) 50% 50% / calc(100% - 22px) calc(100% - 22px) no-repeat;
  mask:
    radial-gradient(circle var(--perf) at 50% 0, #0000 97%, #000) 50% 0 / 15px 11px repeat-x,
    radial-gradient(circle var(--perf) at 50% 100%, #0000 97%, #000) 50% 100% / 15px 11px repeat-x,
    radial-gradient(circle var(--perf) at 0 50%, #0000 97%, #000) 0 50% / 11px 15px repeat-y,
    radial-gradient(circle var(--perf) at 100% 50%, #0000 97%, #000) 100% 50% / 11px 15px repeat-y,
    linear-gradient(#000, #000) 50% 50% / calc(100% - 22px) calc(100% - 22px) no-repeat;
}
.seal__burst { fill: var(--color-ember-orange); width: 58px; height: 58px; margin-bottom: var(--spacing-14); }
.seal__title {
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: 32px; line-height: 0.91; letter-spacing: -0.03em; text-transform: uppercase;
  margin-bottom: var(--spacing-12);
}
.seal__line { border: 0; border-top: 1px solid var(--color-ink-black); margin-block: var(--spacing-12); }
.seal__rows { display: grid; gap: var(--spacing-7); }
.seal__row { display: flex; gap: var(--spacing-10); font-size: 12px; line-height: 1.25; letter-spacing: 0.06em; }
.seal__row dt { text-transform: uppercase; color: var(--color-charcoal); flex: none; width: 8.5em; }
.seal__row dd { margin: 0; }

/* --------------------------------------------------------------------------
   8. Section title
   Source clipped a blue-to-teal gradient into this heading. Dropped, no
   replacement effect — plain ink, per instruction.
   -------------------------------------------------------------------------- */
.section-head { margin-bottom: var(--spacing-29); }
.section-head__kicker { margin-bottom: var(--spacing-10); }
.section-head__title { color: var(--color-ink-black); }
.section-head__note { margin-top: var(--spacing-14); }

/* --------------------------------------------------------------------------
   9. RANKING BLOCK
   Structure preserved 1:1 from the source: rank number, logo tile, star row +
   numeric score, verification label | brand title + inline check, bonus
   headline, bonus detail, payment marks | fact list (>=920px only) | CTA +
   note. Single collapse breakpoint at 920px, as in the source.
   -------------------------------------------------------------------------- */
.rank-list { display: flex; flex-direction: column; gap: var(--spacing-22); }

.rank-row {
  position: relative;
  background: var(--surface-bone-cream);
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-sm);
}
/* Rank-1 emphasis: heavier ink border only. No alternate fill, no gradient. */
.rank-row--lead { border-width: 3px; border-color: var(--color-pure-black); }

/* Source .offer-badge — neutral rank marker, no month claim */
.rank-flag {
  position: absolute; top: 0; left: var(--spacing-22);
  transform: translateY(-50%);
  background: var(--surface-ink-black); color: var(--color-parchment);
  border-radius: var(--radius-tags);
  padding: var(--spacing-4) var(--spacing-12);
  font-size: 12px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
}

/* Source .offer-content — 2-col grid below 920px, flex strip at/above */
.rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Zone A: identity column */
.rank-ident {
  min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--spacing-10); padding: var(--spacing-22) var(--spacing-12);
  border-right: 1px solid var(--color-ink-black);
  border-top-left-radius: var(--radius-cards);
}
.rank-num {
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: 37px; line-height: 0.79; letter-spacing: -0.05em;
}
.rank-num::before { content: '#'; font-size: 0.55em; vertical-align: 0.42em; margin-right: 0.04em; }

/* Logo tile. Fixed 160x80 box at >=920px, as in the source; the brand block
   colour is injected per row through --logo-bg so a raster with a baked-in
   colour block can bleed edge to edge when the files land. */
.rank-logo {
  width: 100%; max-width: 160px; aspect-ratio: 2 / 1;
  background: var(--logo-bg, var(--surface-parchment));
  border: 1px solid var(--color-ink-black);
  border-radius: var(--radius-images);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.rank-logo img { width: 100%; height: 100%; object-fit: contain; }

/* Source .offer-rating */
.rank-score { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
.score-stars { display: flex; align-items: center; gap: 3px; }
.score-stars .ico { width: 15px; height: 15px; color: var(--color-ember-orange); }
.score-stars b {
  font-weight: var(--font-weight-light); font-size: var(--text-body-sm);
  margin-left: var(--spacing-7); letter-spacing: -0.02em;
}
.score-note {
  font-size: 11px; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-charcoal);
}

/* Zone B: brand, bonus copy, payment marks */
.rank-body { min-width: 0; padding: var(--spacing-22) var(--spacing-14); display: flex; align-items: center; }
.rank-body__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--card-padding); width: 100%; }
.rank-main { display: flex; flex-direction: column; gap: var(--spacing-7); min-width: 0; }

.rank-brand {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: var(--text-subheading); line-height: 1.1; letter-spacing: -0.03em;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4);
}
.rank-check {
  display: inline-flex; align-items: center; gap: var(--spacing-4);
  font-family: var(--font-editorial-new); font-weight: var(--font-weight-light);
  font-size: 11px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-charcoal);
}
.rank-check .ico { width: 12px; height: 12px; }

/* Bonus copy — placeholders, filled by hand from the operators' own pages */
.rank-bonus-kicker {
  font-size: 11px; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-charcoal);
}
/* No text-transform: the bonus figures are quoted copy and must render exactly
   as written ("100 % do 3.000 €"), not uppercased into "DO". */
.rank-bonus {
  font-family: var(--font-canopee); font-weight: var(--font-weight-regular);
  font-size: 23px; line-height: 0.93; letter-spacing: -0.04em;
}
.rank-bonus-detail { font-size: var(--text-body-sm); line-height: 1.27; color: var(--color-charcoal); }

/* Payment mark row */
/* Three marks, always on one line. nowrap + a shrinkable flex basis means a
   narrow card scales the marks down proportionally instead of orphaning the
   third onto a second row; aspect-ratio keeps them from distorting. */
.pay-row { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--spacing-7); margin-top: var(--spacing-4); }
.pay-row li { display: flex; min-width: 0; }
.pay-mark {
  flex: 0 1 40px; width: 40px; max-width: 40px; min-width: 0;
  height: auto; aspect-ratio: 40 / 26;
  color: var(--color-ink-black);
}

/* Source .offer-features — hidden below 920px, exactly as in the source.
   Holds ONE register fact (the approval holder) plus the register mark. The
   other two register columns are not repeated here; they exist once, in the
   register table further down the page. */
.rank-meta {
  display: none; flex-direction: column; gap: var(--spacing-10);
  width: 45%; flex: none;
  border-left: 1px solid var(--color-ink-black);
  padding-left: var(--card-padding);
}
.rank-facts { display: flex; flex-direction: column; gap: var(--spacing-7); }
.rank-facts dt { text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-charcoal); font-size: 11px; }
.rank-facts dd { margin: 0; }

/* The register mark. Lives here, next to the operator's legal entity — never
   next to the star score, which is editorial and has nothing backing it. */
.rank-reg {
  display: flex; align-items: center; gap: var(--spacing-7);
  font-size: var(--text-caption); line-height: var(--leading-caption);
  color: var(--color-charcoal);
}
.rank-reg .ico { width: 14px; height: 14px; flex: none; }

/* Zone C: action column */
.rank-act {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--spacing-7); padding: var(--spacing-14) var(--spacing-17);
  border-top: 1px solid var(--color-ink-black);
  border-bottom-left-radius: var(--radius-cards);
  border-bottom-right-radius: var(--radius-cards);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-10);
  width: 100%;
  background: var(--surface-ink-black); color: var(--color-parchment);
  border: 1px solid var(--color-ink-black); border-radius: var(--radius-buttons);
  padding: var(--spacing-12) var(--spacing-22);
  font-family: var(--font-editorial-new); font-weight: var(--font-weight-light);
  font-size: 19px; line-height: 1.15; letter-spacing: -0.02em;
  text-decoration: none;
}
.btn:hover { background: var(--surface-pure-black); }
.btn .ico { width: 15px; height: 15px; }
.rank-act__note {
  font-size: 11px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-charcoal);
}

.rank-terms { margin-top: var(--spacing-22); color: var(--color-charcoal); }

@media (min-width: 920px) {
  .rank-list { gap: var(--spacing-36); }
  .rank-grid { display: flex; align-items: stretch; }
  .rank-ident { width: 25%; flex: none; border-bottom-left-radius: var(--radius-cards); padding: var(--card-padding); }
  .rank-logo { width: 160px; height: 80px; aspect-ratio: auto; }
  .rank-num { font-size: 43px; }
  .rank-body { flex: 1; padding: var(--card-padding); min-width: 0; }
  .rank-brand { flex-direction: row; align-items: center; gap: var(--spacing-10); font-size: 29px; }
  .rank-bonus { font-size: 29px; }
  .rank-meta { display: flex; }
  .rank-act {
    width: 200px; flex: none; grid-column: auto;
    border-top: 0; border-left: 1px solid var(--color-ink-black);
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-cards);
    padding: var(--spacing-17);
  }
  .btn { font-size: var(--text-body-sm); padding: var(--spacing-12) var(--spacing-14); }
  .pay-mark { flex-basis: 44px; width: 44px; max-width: 44px; }
}

/* --------------------------------------------------------------------------
   10. Register disclosure table
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { min-width: 940px; font-size: var(--text-body-sm); }
.data-table caption { text-align: left; margin-bottom: var(--spacing-14); color: var(--color-charcoal); font-size: var(--text-caption); }
.data-table th, .data-table td {
  text-align: left; padding: var(--spacing-12) var(--spacing-14);
  border-bottom: 1px solid var(--color-ink-black); vertical-align: top;
}
.data-table thead th {
  border-bottom-width: 2px; font-weight: var(--font-weight-light);
  font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase;
}
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody th { font-weight: var(--font-weight-light); font-family: var(--font-domaine-display); font-size: 19px; }

/* --------------------------------------------------------------------------
   11. Editorial content blocks
   Source used three colour-coded icon chips per row. Reduced to a single
   ember accent — the design file allows exactly one chromatic accent.
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--spacing-22); }
.ed-card {
  background: var(--surface-bone-cream);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
}
.ed-card__icon { color: var(--color-ember-orange); width: 28px; height: 28px; margin-bottom: var(--spacing-14); }
.ed-card__title { margin-bottom: var(--spacing-7); }

.ed-head { display: flex; align-items: center; gap: var(--spacing-14); margin-bottom: var(--spacing-17); }
.ed-head__box {
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--color-ink-black); border-radius: var(--radius-tags);
  display: flex; align-items: center; justify-content: center;
}
.ed-head__box .ico { width: 20px; height: 20px; color: var(--color-ember-orange); }

.ed-list { display: grid; gap: var(--spacing-17); margin-block: var(--spacing-22); }
.ed-list__item { display: flex; gap: var(--spacing-14); }
.ed-list__marker {
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--color-ink-black); border-radius: var(--radius-tags);
  display: flex; align-items: center; justify-content: center;
}
.ed-list__marker .ico { width: 15px; height: 15px; }
.ed-list__title { font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium); font-size: 20px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--spacing-4); }
.ed-pull {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  border-left: 3px solid var(--color-ember-orange);
  padding-left: var(--spacing-17); margin-top: var(--spacing-22);
}
.ed-block + .ed-block { margin-top: var(--spacing-43); }

@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .ed-list { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-22); }
  .ed-list__item { flex-direction: column; gap: var(--spacing-10); }
}

/* --------------------------------------------------------------------------
   12. Help panel
   -------------------------------------------------------------------------- */
.help-panel {
  background: var(--surface-ink-black); color: var(--color-parchment);
  border-radius: var(--radius-cards); padding: var(--card-padding);
}
.help-panel__title { margin-bottom: var(--spacing-12); }
.help-panel a { color: var(--color-parchment); }
.help-panel__rows { display: grid; gap: var(--spacing-10); margin-top: var(--spacing-17); }
@media (min-width: 768px) {
  .help-panel { padding: var(--spacing-36); }
  .help-panel__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-17); }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-ink-black);
  margin-top: var(--section-gap);
  padding-block: var(--spacing-36);
}
.site-footer__grid { display: grid; gap: var(--spacing-29); }
.site-footer__col > * + * { margin-top: var(--spacing-12); }
.site-footer__title { margin-bottom: var(--spacing-12); }
/* Publisher identification block, footer column 1. The entity name carries
   full ink weight; the legal form and address sit back in muted caption type. */
.publisher-name {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: 17px; line-height: 1.2; letter-spacing: -0.02em;
  color: var(--color-ink-black);
}
.publisher-meta { color: var(--color-charcoal); }
.publisher-name + .publisher-meta { margin-top: var(--spacing-4); }

.site-footer__list { display: grid; gap: var(--spacing-7); }
.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__approvals { display: grid; gap: var(--spacing-7); font-size: var(--text-caption); line-height: 1.3; }
.site-footer__approvals div { display: flex; gap: var(--spacing-7); flex-wrap: wrap; }
.site-footer__approvals b { font-weight: var(--font-weight-light); font-family: var(--font-domaine-display); }
.site-footer__bottom {
  border-top: 1px solid var(--color-ink-black);
  margin-top: var(--spacing-29); padding-top: var(--spacing-17);
  display: flex; flex-wrap: wrap; gap: var(--spacing-12); justify-content: space-between;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-43); }
}
@media (min-width: 1000px) {
  .site-footer__grid { grid-template-columns: 1.5fr 1fr; gap: var(--spacing-65); }
}

/* --------------------------------------------------------------------------
   14. Content pages (o-nama, kontakt, legal set)
   Not covered by DESIGN.md, which describes a portfolio. Built from the
   existing tokens only: no new colours, no new radii, no second accent.
   -------------------------------------------------------------------------- */
.page-head { padding-block: var(--spacing-36) var(--spacing-29); }
.page-head__kicker { margin-bottom: var(--spacing-10); }
.page-head__title { margin-bottom: var(--spacing-17); }
.page-head__stamp {
  margin-top: var(--spacing-22); padding-top: var(--spacing-12);
  border-top: 1px solid var(--color-ink-black);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-charcoal);
}

/* Body copy for long-form pages */
.doc h2 {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  margin-top: var(--spacing-43); margin-bottom: var(--spacing-14);
}
.doc > h2:first-child { margin-top: 0; }
.doc h3 {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: 20px; line-height: 1.15; letter-spacing: -0.03em;
  margin-top: var(--spacing-22); margin-bottom: var(--spacing-7);
}
.doc p { margin-bottom: var(--spacing-17); }
.doc p:last-child { margin-bottom: 0; }
.doc strong { font-weight: var(--font-weight-light); font-style: italic; }

/* Marked list — the only list shape used on content pages */
.doc-list { display: grid; gap: var(--spacing-12); margin-bottom: var(--spacing-17); }
/* overflow-wrap:anywhere (not break-word) so the long contact address also
   shrinks the flex item's min-content size — without it the <li> refuses to
   go below the address width and pushes the page wider than the viewport. */
.doc-list li { display: flex; gap: var(--spacing-10); align-items: flex-start; overflow-wrap: anywhere; min-width: 0; }
.doc-list li::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: 0.55em;
  background: var(--color-ink-black); border-radius: var(--radius-tags);
}
.doc-list--check li::before { background: var(--color-ember-orange); }

/* Numbered steps — methodology, rights, self-assessment */
.step-list { counter-reset: step; display: grid; gap: var(--spacing-17); margin-bottom: var(--spacing-17); }
.step-list li { display: flex; gap: var(--spacing-14); align-items: flex-start; }
.step-list li::before {
  counter-increment: step; content: counter(step);
  flex: none; width: 32px; height: 32px;
  border: 1px solid var(--color-ink-black); border-radius: var(--radius-tags);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-domaine-display); font-size: var(--text-body-sm);
}
.step-list p { margin-bottom: 0; }
.step-list__title { font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium); font-size: 19px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--spacing-4); }

/* Callout panel — Bone Cream, no shadow (shadow is reserved for cards) */
.note {
  background: var(--surface-bone-cream); border-radius: var(--radius-cards);
  padding: var(--card-padding); margin-block: var(--spacing-22);
}
.note > * + * { margin-top: var(--spacing-12); }
.note p { margin-bottom: 0; }
.note__title {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

/* Inverted callout — reserved for the responsible-gambling help route */
.note--ink { background: var(--surface-ink-black); color: var(--color-parchment); }
.note--ink a { color: var(--color-parchment); }

/* Contact routes */
.route-grid { display: grid; gap: var(--spacing-17); margin-block: var(--spacing-22); }
.route {
  border: 1px solid var(--color-ink-black); border-radius: var(--radius-cards);
  padding: var(--card-padding);
}
.route__icon { color: var(--color-ember-orange); width: 24px; height: 24px; margin-bottom: var(--spacing-12); }
.route__title {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: 20px; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: var(--spacing-7);
}
.route__addr {
  display: inline-block; margin-top: var(--spacing-10);
  font-family: var(--font-domaine-display); font-size: 19px;
  word-break: break-word;
}
@media (min-width: 768px) {
  .route-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-list li { gap: var(--spacing-17); }
}

/* Definition table — cookie categories, data categories */
.def-table { margin-block: var(--spacing-22); }
/* <caption> defaults to text-align:center in the UA sheet — override it so the
   caption starts on the same left edge as everything else. */
.def-table caption {
  text-align: left; margin-bottom: var(--spacing-14);
  color: var(--color-charcoal); font-size: var(--text-caption);
}
.def-table th, .def-table td {
  text-align: left; padding: var(--spacing-12) var(--spacing-14);
  border-bottom: 1px solid var(--color-ink-black); vertical-align: top;
  font-size: var(--text-body-sm); line-height: var(--leading-body-sm);
}
.def-table thead th {
  border-bottom-width: 2px; font-weight: var(--font-weight-light);
  font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase;
}
.def-table tbody th { font-weight: var(--font-weight-light); font-family: var(--font-domaine-display); font-size: 19px; }
.def-table tbody tr:last-child th, .def-table tbody tr:last-child td { border-bottom: 0; }

/* Inline code — only used to quote the rel attribute on two legal pages */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em; letter-spacing: 0;
  background: var(--surface-bone-cream);
  border-radius: var(--radius-tags);
  padding: 0.1em 0.34em;
  word-break: break-word;
}

/* In-page contents list */
.toc { border-top: 1px solid var(--color-ink-black); border-bottom: 1px solid var(--color-ink-black); padding-block: var(--spacing-14); margin-bottom: var(--spacing-29); }
.toc ol { display: grid; gap: var(--spacing-7); counter-reset: toc; }
.toc li { counter-increment: toc; font-size: var(--text-body-sm); }
.toc li::before { content: counter(toc) '. '; color: var(--color-charcoal); }
@media (min-width: 768px) {
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-29); }
}

/* --------------------------------------------------------------------------
   15. Register table — klasa odobrenja cell
   Two approvals sit on two lines in one cell; the label is muted so the
   identifier, which is the load-bearing part, keeps full ink weight.
   -------------------------------------------------------------------------- */
.klasa { display: grid; gap: var(--spacing-4); }
.klasa li { display: block; line-height: 1.3; }
.klasa__label { color: var(--color-charcoal); font-size: var(--text-caption); }
.klasa__id { color: var(--color-ink-black); white-space: nowrap; }

/* --------------------------------------------------------------------------
   16. Footer approval disclosure + standing disclosures
   -------------------------------------------------------------------------- */
.approvals {
  border-top: 1px solid var(--color-ink-black);
  margin-top: var(--spacing-29); padding-top: var(--spacing-22);
}
.approvals__lead { margin-bottom: var(--spacing-10); }
.approvals__grid { display: grid; gap: var(--spacing-22); margin-top: var(--spacing-22); }
.approval {
  background: var(--surface-bone-cream);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}
.approval__brand {
  font-family: var(--font-domaine-display); font-weight: var(--font-weight-medium);
  font-size: 19px; line-height: 1.15; letter-spacing: -0.03em;
  margin-bottom: var(--spacing-4);
}
.approval__entity {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  color: var(--color-ink-black); margin-bottom: var(--spacing-12);
}
.approval__rows { display: grid; gap: var(--spacing-10); }
.approval__rows dt {
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-charcoal); font-size: 11px; line-height: 1.25;
  margin-bottom: 2px;
}
.approval__rows dd {
  margin: 0; font-size: var(--text-caption); line-height: 1.35;
  color: var(--color-ink-black); word-break: break-word;
}
.approvals__source, .approvals__risk { margin-top: var(--spacing-17); }
.approvals__risk b, .disclosures b { font-weight: var(--font-weight-light); font-style: italic; color: var(--color-ink-black); }

.disclosures {
  border-top: 1px solid var(--color-ink-black);
  margin-top: var(--spacing-29); padding-top: var(--spacing-22);
  display: grid; gap: var(--spacing-12);
}
.disclosures p { color: var(--color-charcoal); }

@media (min-width: 768px) {
  .approvals__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-22); }
  .disclosures { gap: var(--spacing-14); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}