@charset "UTF-8";

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/bricolage-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-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: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-mono-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: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-mono-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;
}

:root {

  /* ---- Colors (DESIGN.md) ---- */
  --color-forest-ink: #1a3300;
  --color-highlighter-yellow: #ffe95c;
  --color-cream-paper: #fcfaf5;
  --color-pencil-gray: #b6b6b6;
  --color-whisper-gray: #f1f1f1;
  --color-sticky-note-teal: #a8e5e5;
  --color-sticky-note-mint: #d5f5c2;
  --color-sticky-note-blush: #f6d0ff;
  --color-terracotta: #cb5521;

  /* Backdrop for third-party operator logos only. Not part of the palette. */
  --color-tile-white: #ffffff;

  /* ---- Surfaces ---- */
  --surface-cream-paper: #fcfaf5;
  --surface-sticky-note-mint: #d5f5c2;
  --surface-highlighter-yellow: #ffe95c;
  --surface-sticky-note-blush: #f6d0ff;
  --surface-sticky-note-teal: #a8e5e5;

  /* ---- Type families ---- */
  --font-bricolage-grotesque: 'Bricolage Grotesque', ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-roboto-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;

  --font-display: var(--font-bricolage-grotesque);
  --font-body: var(--font-inter);
  --font-mono: var(--font-roboto-mono);

  /* ---- Type scale ----
     DESIGN.md fixes the display sizes in px. Those values are the ceiling here;
     the clamp floor keeps the hero from overflowing at 360px. See DESIGN.md
     "Brand adaptations". */
  --text-micro: 0.6875rem;
  --text-caption: 0.875rem;
  --text-body-sm: 1rem;
  --text-body: 1.125rem;
  --text-body-lg: 1.25rem;
  --text-subheading: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);
  --text-heading-sm: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  --text-heading: clamp(1.875rem, 1.25rem + 2.7vw, 3.4375rem);
  --text-heading-lg: clamp(2.125rem, 1.25rem + 3.8vw, 4.125rem);
  --text-display: clamp(2.5rem, 1.2rem + 5.6vw, 5.625rem);

  --leading-micro: 1.3;
  --leading-caption: 1.5;
  --leading-body: 1.5;
  --leading-body-lg: 1.38;
  --leading-subheading: 1.25;
  --leading-heading-sm: 1.1;
  --leading-heading: 1;
  --leading-display: 1;

  /* Positive tracking is the Bricolage signature. */
  --tracking-heading: 0.04em;
  --tracking-display: 0.05em;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Spacing ---- */
  --spacing-8: 0.5rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-56: 3.5rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --spacing-96: 6rem;
  --spacing-120: 7.5rem;

  /* ---- Layout ---- */
  --page-max-width: 1200px;
  --gutter: var(--spacing-24);
  --section-gap: clamp(2.5rem, 4vw, 4rem);
  --card-padding: var(--spacing-24);
  --element-gap: var(--spacing-16);

  /* ---- Radii ---- */
  --radius-nav: 16px;
  --radius-cards: 12px;
  --radius-buttons: 6px;
  --radius-inputs: 6px;
  --radius-images: 12px;
  --radius-tags: 9999px;
  --radius-badges: 9999px;

  /* ---- Shadows ----
     Colour and 1px borders carry hierarchy; shadows are for the nav glow and
     button lift only. */
  --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-xl: rgba(255, 235, 90, 0.01) 0px 527px 211px 0px,
               rgba(255, 235, 90, 0.05) 0px 297px 178px 0px,
               rgba(255, 235, 90, 0.09) 0px 132px 132px 0px,
               rgba(255, 235, 90, 0.1) 0px 33px 72px 0px;

  /* ---- Derived ink values ----
     Whisper Gray is ~1.1:1 on cream and Pencil Gray ~2.0:1, so neither is used
     as text. Muted copy is a Forest Ink alpha instead; Pencil Gray is hairlines
     only. See DESIGN.md "Brand adaptations". */
  --ink-muted: rgba(26, 51, 0, 0.72);
  --ink-hairline: rgba(26, 51, 0, 0.18);
  --ink-track: rgba(26, 51, 0, 0.2);


  --star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 20'%3E%3Cpath fill='%23000' d='M10 1.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8L1.5 7.7l5.9-.9z'/%3E%3Cpath fill='%23000' d='M32 1.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8L23.5 7.7l5.9-.9z'/%3E%3Cpath fill='%23000' d='M54 1.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8L45.5 7.7l5.9-.9z'/%3E%3Cpath fill='%23000' d='M76 1.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8L67.5 7.7l5.9-.9z'/%3E%3Cpath fill='%23000' d='M98 1.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8L89.5 7.7l5.9-.9z'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--spacing-24);
}

body {
  margin: 0;
  background-color: var(--color-cream-paper);
  color: var(--color-forest-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: var(--leading-heading-sm);
  text-wrap: balance;
}

/* Display tier. Bricolage Grotesque 800 with positive tracking, applied only
   to headings that reach 40px+ at desktop — it is never used for UI or body. */
.hero__title,
.page__title,
.toplist__title,
.faq__title,
.reg__title,
.prose h2,
.prose-page h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  text-transform: none;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--color-forest-ink);
  outline-offset: 3px;
  border-radius: var(--radius-buttons);
}

.logo-tile--dark :focus-visible { outline-color: var(--color-highlighter-yellow); }

::selection {
  background: var(--color-forest-ink);
  color: var(--color-cream-paper);
}

.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section { padding-block: var(--section-gap); }

.section__eyebrow {
  display: inline-block;
  margin-bottom: var(--spacing-16);
  padding: 0.25rem 0.75rem;
  background: var(--color-highlighter-yellow);
  color: var(--color-forest-ink);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  border-radius: var(--radius-tags);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Primary CTA. Forest Ink is the only CTA fill — Highlighter Yellow reads as a
   marker, never as an action. Arrow glyph precedes the label. */
.btn--primary {
  background: var(--color-forest-ink);
  color: var(--color-cream-paper);
  border-color: var(--color-forest-ink);
  box-shadow: var(--shadow-subtle);
}
.btn--primary::before { content: '\2192'; }
.btn--primary:hover { background: #2a5200; }

.btn--accent {
  background: var(--color-sticky-note-mint);
  color: var(--color-forest-ink);
  border-color: var(--color-forest-ink);
}
.btn--accent:hover { background: var(--color-sticky-note-teal); }

.btn--lg {
  padding: 1.1875rem 2.5rem;
}

.btn--block { width: 100%; }

.badge {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-tags);
}
.badge--marigold {
  background: var(--color-highlighter-yellow);
  color: var(--color-forest-ink);
}
.badge--forest {
  background: var(--color-forest-ink);
  color: var(--color-cream-paper);
}

.site-header {
  position: relative;
  z-index: 20;
  padding-block: var(--spacing-24);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-block: 0.625rem;
  background: var(--color-cream-paper);
  border: 1px solid var(--color-pencil-gray);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-xl);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1;
  text-transform: uppercase;
}
.brand__mark {
  width: 40px;
  height: 40px;
  flex: none;
}

/* Wordmark lockup. LICENSED CASINOS CROATIA is 24 characters — nearly three
   times the old wordmark — so it wraps by default and only goes single-line
   once there is room for it. */
.brand__lockup {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.brand__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--fw-regular);
  letter-spacing: 0.16em;
  line-height: 1;
  opacity: 1;
  color: var(--ink-muted);
}
.brand__name {
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
}
@media (min-width: 30rem) { .brand__name { font-size: 1rem; letter-spacing: normal; } }
@media (min-width: 48rem) { .brand__name { font-size: 1.1875rem; white-space: nowrap; } }
@media (min-width: 64rem) { .brand__name { font-size: 1.25rem; } }

/* The mark keeps DESIGN.md's 40px from 480px up; at phone widths it yields
   space so the 24-character wordmark holds two lines beside the menu button. */
@media (max-width: 29.99rem) {
  .brand__mark { width: 32px; height: 32px; }
  .brand { gap: 0.5rem; }
  .nav__toggle { padding: 0.5rem 0.75rem; }
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-buttons);
}
.nav__toggle-bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 0.18s ease;
}
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.nav__panel {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(100% + 0.5rem);
  padding: var(--spacing-24);
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-subtle-2);
}
.nav__panel[hidden] { display: none; }

.nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.nav__link {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent;
}
.nav__link:hover { border-bottom-color: var(--color-forest-ink); }

.nav__cta { margin-top: var(--spacing-24); }

@media (min-width: 64rem) {
  .nav__toggle { display: none; }
  .nav__panel {
    position: static;
    display: flex !important;
    align-items: center;
    gap: var(--spacing-32);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__panel[hidden] { display: flex !important; }
  .nav__list { flex-direction: row; gap: var(--spacing-32); }
  .nav__cta { margin-top: 0; }
}

.hero {
  padding-block: var(--spacing-32) var(--spacing-64);
}

.hero__inner {
  text-align: center;
}

.hero__flag {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  margin-bottom: var(--spacing-16);
}

.hero__market {
  display: inline-block;
  margin-bottom: var(--spacing-24);
  padding: 0.3125rem 0.875rem;
  background: var(--color-highlighter-yellow);
  color: var(--color-forest-ink);
  font-size: var(--text-caption);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  border-radius: var(--radius-tags);
}

.hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.hero__title em {
  font-style: normal;
  font-weight: inherit;
  background: var(--color-highlighter-yellow);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.1em;
}

.hero__lede {
  max-width: 600px;
  margin: var(--spacing-24) auto 0;
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
}

/* Evidence band: the primary CTA and the two figures the page already states
   sit on one horizontal line, so the action and the proof for it are read
   together. The figures are plain Roboto Mono metadata, never interactive. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16) var(--spacing-32);
  margin-top: var(--spacing-40);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem var(--spacing-24);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--ink-muted);
}
.hero__fact { white-space: nowrap; }
.hero__fact b {
  font-weight: var(--fw-regular);
  font-size: var(--text-body);
  color: var(--color-forest-ink);
}

/* Hairline between the figures only while they share a line. */
@media (min-width: 40rem) {
  .hero__fact + .hero__fact { position: relative; }
  .hero__fact + .hero__fact::before {
    content: '';
    position: absolute;
    left: calc(var(--spacing-24) / -2);
    top: 0.2em;
    bottom: 0.2em;
    width: 1px;
    background: var(--color-pencil-gray);
  }
}

/* Method row. No containers and no icons: these three describe how a casino
   reaches the list, so they are set as a numbered sequence on the bare cream
   canvas with one hairline closing the row. */
.method {
  display: grid;
  gap: var(--spacing-32);
  padding-bottom: var(--spacing-40);
  margin-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-forest-ink);
}
.method__step {
  display: grid;
  gap: 0.375rem;
  align-content: start;
  min-width: 0;
}
.method__ord {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-forest-ink);
}
.method__title {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-wrap: balance;
}
.method__desc {
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--ink-muted);
}

@media (min-width: 48rem) {
  .method {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-32);
  }
}

.toplist__head {
  margin-bottom: var(--spacing-32);
  text-align: center;
}
.toplist__title {
  font-size: var(--text-heading-lg);
  letter-spacing: var(--tracking-heading);
}
.toplist__intro {
  max-width: 60ch;
  margin: var(--spacing-16) auto 0;
  font-size: var(--text-body-sm);
}

.toplist__columns {
  display: none;
  padding: 0 var(--spacing-32) var(--spacing-16);
  font-size: 0.75rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  color: var(--ink-muted);
}

.toplist__list {
  display: grid;
  gap: var(--spacing-32);
}

.casino {
  display: grid;
  gap: var(--spacing-16);
  padding: var(--card-padding);
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
  box-shadow: none;
}

.casino--top {
  background: var(--color-sticky-note-mint);
}

.casino__rank {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.casino__rank-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--color-forest-ink);
  color: var(--color-cream-paper);
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  border-radius: 50%;
}
.casino--top .casino__rank-num {
  background: var(--color-highlighter-yellow);
  color: var(--color-forest-ink);
}

.casino__brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.logo-tile {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 84px;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
}
.logo-tile--dark { background: var(--color-forest-ink); }
.logo-tile--light { background: var(--color-tile-white); }

.logo-tile--psk { background: #1a457a; }
.logo-tile--admiral { background: #0f0d25; }
.logo-tile img {
  width: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}

.casino__bonus-sub {
  font-size: var(--text-caption);
  line-height: 1.35;
  color: var(--ink-muted);
}
.casino__bonus-main {
  margin-top: 0.25rem;
  text-wrap: balance;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1.25;
  text-transform: none;
}

.casino__rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.casino__pay {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  line-height: 1.4;
}
.casino__pay .icon { width: 1.125rem; height: 1.125rem; }

.casino__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.casino__visit {
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  border-bottom: 1px solid currentColor;
  color: var(--ink-muted);
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.rating__stars {
  position: relative;
  width: 108px;
  height: 20px;
  flex: none;
  background: var(--ink-track);
  -webkit-mask-image: var(--star-mask);
  mask-image: var(--star-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.rating__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--pct, 100%);
  background: var(--color-highlighter-yellow);
}
.rating__score {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1;
  white-space: nowrap;
  text-transform: none;
}
.rating__max {
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  opacity: 1;
  color: var(--ink-muted);
}

@media (min-width: 34rem) and (max-width: 63.999rem) {
  .casino {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: var(--spacing-24);
  }
  .casino__rank { grid-column: 1 / -1; }
  .casino__brand { grid-row: span 2; }
  .casino__cta { grid-column: 2; }
}

@media (min-width: 64rem) {
  .toplist__columns {
    display: grid;
    grid-template-columns: var(--casino-cols);
    gap: var(--spacing-24);
    align-items: end;
  }
  .toplist__list { gap: var(--spacing-24); }

  :root { --casino-cols: 44px minmax(0, 196px) minmax(0, 1fr) 140px 124px 172px; }

  .casino {
    grid-template-columns: var(--casino-cols);
    gap: var(--spacing-24);
    align-items: center;
    padding: var(--spacing-24) var(--spacing-32);
  }
  .casino__rank-num { width: 44px; height: 44px; font-size: 1.375rem; }
  .casino__brand { align-items: stretch; }
  .logo-tile { min-height: 76px; }
  .casino__cta { align-items: stretch; }
  .casino__bonus-main { font-size: 1.375rem; }
  .rating { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .rating__stars { width: 92px; height: 17px; }
  .rating__score { font-size: 1.75rem; }
}

@media (min-width: 75rem) {
  :root { --casino-cols: 48px minmax(0, 210px) minmax(0, 1fr) 152px 132px 180px; }
}

.reg__head {
  margin-bottom: var(--spacing-32);
  text-align: center;
}
.reg__title {
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-heading);
}

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

.reg__entity {
  font-weight: var(--fw-medium);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.reg__brand {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: normal;
  line-height: 1.25;
  text-transform: none;
}
.reg__domain {
  font-weight: var(--fw-medium);
  overflow-wrap: break-word;
}

.reg__klasa {
  font-size: 0.9375rem;
  line-height: 1.5;
}
.reg__klasa-row {
  margin: 0;
}
.reg__klasa-row + .reg__klasa-row { margin-top: 0.25rem; }
.reg__klasa-label {
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.reg__klasa-id {
  font-weight: var(--fw-regular);
  color: var(--color-forest-ink);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.reg .rating {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.reg__source {
  margin-top: var(--spacing-32);
}
.reg__source p {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--color-forest-ink);
}
.reg__source p + p { margin-top: var(--spacing-16); }
.reg__source strong {
  font-weight: var(--fw-bold);
  color: var(--color-forest-ink);
}
.reg__source time { white-space: nowrap; }
.reg__source a {
  color: var(--color-forest-ink);
  border-bottom: 2px solid var(--color-highlighter-yellow);
}
.reg__source a:hover { background: var(--color-highlighter-yellow); }

@media (max-width: 63.999rem) {
  .reg__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .reg__table, .reg__table tbody, .reg__table tr, .reg__table th, .reg__table td { display: block; }

  .reg__table tr {
    padding: var(--card-padding);
    background: var(--color-cream-paper);
    border: 1px solid var(--color-forest-ink);
    border-radius: var(--radius-cards);
    box-shadow: none;
  }
  .reg__table tr + tr { margin-top: var(--spacing-24); }

  .reg__table td {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: 0.5rem var(--spacing-16);
    align-items: start;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid var(--ink-hairline);
  }
  .reg__table td::before {
    content: attr(data-label);
    font-size: 0.6875rem;
    font-weight: var(--fw-regular);
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--ink-muted);
  font-family: var(--font-mono);
}
  .reg__table .reg__brand { padding: 0; margin: 0; border: 0; }
  .reg__table .reg__brand::before { content: none; }
}

@media (max-width: 26rem) {
  .reg__table td { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}

@media (min-width: 64rem) {
  .reg {
    background: var(--color-cream-paper);
    border: 1px solid var(--color-forest-ink);
    border-radius: var(--radius-cards);
    box-shadow: none;
    overflow: hidden;
  }
  .reg__table th,
  .reg__table td {
    padding: var(--spacing-16) 0.875rem;
    vertical-align: middle;
  }
  .reg__table th:first-child,
  .reg__table td:first-child { padding-left: var(--spacing-24); }
  .reg__table th:last-child,
  .reg__table td:last-child { padding-right: var(--spacing-24); }
  .reg__table thead th {
    background: var(--color-sticky-note-mint);
    font-size: 0.75rem;
    font-weight: var(--fw-regular);
    letter-spacing: 0.08em;
    line-height: 1.6;
    text-transform: uppercase;
    white-space: nowrap;
  font-family: var(--font-mono);
}
  .reg__table tbody tr + tr th,
  .reg__table tbody tr + tr td { border-top: 1px solid var(--ink-hairline); }
  .reg__table tbody th { width: 1%; white-space: nowrap; }
  .reg__table td:nth-child(2) { width: 17%; }
  .reg__table td:nth-child(3) { width: 13%; }
  .reg__table td:nth-child(4) { width: 1%; white-space: nowrap; }
  .reg .rating__stars { width: 92px; height: 17px; }
  .reg .rating__score { font-size: 1.375rem; }
}

/* Six columns are tight just above the stacking breakpoint: shave the gutters. */
@media (min-width: 64rem) and (max-width: 74.999rem) {
  .reg__table th,
  .reg__table td { padding-inline: 0.625rem; }
  .reg__table th:first-child,
  .reg__table td:first-child { padding-left: var(--spacing-16); }
  .reg__table th:last-child,
  .reg__table td:last-child { padding-right: var(--spacing-16); }
  .reg__klasa { font-size: 0.875rem; }
}

.prose__block + .prose__block { margin-top: var(--spacing-64); }

.prose h2 {
  font-size: var(--text-heading);
}
.prose p {
  margin-top: var(--spacing-16);
}

.prose__card {
  padding: var(--card-padding);
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
  box-shadow: none;
}

.faq__title {
  margin-bottom: var(--spacing-32);
  font-size: var(--text-heading-lg);
  text-align: center;
  letter-spacing: var(--tracking-heading);
}

.faq__list { display: grid; gap: var(--spacing-16); }

.faq__item {
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
  overflow: hidden;
  box-shadow: none;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: 100%;
  padding: var(--spacing-24);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
}
.faq__trigger:hover { background: var(--color-sticky-note-mint); }

.faq__sign {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  background: var(--color-highlighter-yellow);
  border: 1px solid var(--color-forest-ink);
  border-radius: 50%;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--color-forest-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease;
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__trigger[aria-expanded='true'] .faq__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__panel { padding: 0 var(--spacing-24) var(--spacing-24); }

.faq__panel[hidden] { display: none; }
.faq__panel p { font-size: var(--text-body-sm); }
.faq__panel p + p { margin-top: var(--spacing-16); }

/* Footer sits on Mint — a sanctioned surface that closes the document without
   the weight of an inverted slab. Mint against cream is only 1.14:1, so the 2px
   Forest Ink rule does the separating; the mint carries the change in feel. */
.site-footer {
  margin-top: var(--spacing-64);
  padding-block: var(--spacing-40) var(--spacing-24);
  border-top: 2px solid var(--color-forest-ink);
  background: var(--color-sticky-note-mint);
  color: var(--color-forest-ink);
}
.site-footer a { color: var(--color-forest-ink); }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Tier 1 ---- */
.footer-top { display: grid; gap: var(--spacing-32); padding-bottom: var(--spacing-32); }

.footer-brand__eyebrow,
.footer-col__title,
.imprint__eyebrow,
.records__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.footer-brand__eyebrow { font-size: var(--text-micro); letter-spacing: 0.16em; }

.brand--footer { margin-top: 0.375rem; color: var(--color-forest-ink); }
.brand--footer .brand__name { font-size: 1.25rem; white-space: normal; }
.brand--footer:hover { text-decoration: none; }

.footer-brand__desc {
  margin-top: var(--spacing-16);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 44ch;
}

.footer-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--spacing-24); }
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.4375rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  color: var(--color-forest-ink);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-tags);
}
.footer-badge a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: -0.3125rem -0.75rem -0.3125rem -0.4375rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.4375rem;
  border-radius: var(--radius-tags); color: inherit;
}
.footer-badge__ring { width: 26px; height: 26px; flex: none; }
@media (max-width: 63.999rem) {
  .footer-badges { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .footer-badge { width: 100%; min-height: 44px; padding: 0; justify-content: center; }
  .footer-badge > a { display: flex; align-items: center; justify-content: center;
                      width: 100%; margin: 0; padding: 0.3125rem 0.625rem; text-align: center; }
}
@media (max-width: 23.75rem) { .footer-badges { grid-template-columns: 1fr; } }

.footer-col__list {
  display: grid; gap: 0.625rem; margin-top: 0.75rem;
  font-size: var(--text-body-sm); font-weight: var(--fw-regular);
}
.footer-col__list .footer-col__note { margin-top: 0.375rem; }
.footer-col__note {
  margin-top: 0.625rem; font-size: 0.75rem; font-weight: var(--fw-regular);
  line-height: 1.5; color: var(--ink-muted);
}

@media (min-width: 40rem) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-32); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .footer-top { grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr)); gap: var(--spacing-48); }
  .footer-brand { grid-column: auto; }
}

/* ---- Tier 2: legal notes as fine print ---- */
.footer-legal {
  display: grid; gap: 0.75rem;
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--ink-hairline);
}
.footer-note {
  margin: 0; font-size: 0.8125rem; font-weight: var(--fw-regular);
  line-height: 1.5; color: var(--ink-muted);
}
.footer-note strong { font-weight: var(--fw-bold); color: var(--color-forest-ink); }

/* Highlighter Yellow on Mint measures 1.04:1 — invisible. The two notes a
   moderator looks for are marked with weight and a rule instead. */
.footer-note--key {
  color: var(--color-forest-ink);
  padding-left: var(--spacing-16);
  border-left: 2px solid var(--color-forest-ink);
}
.footer-note--key strong { font-weight: var(--fw-bold); }

@media (min-width: 64rem) {
  .footer-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-48); align-items: start; }
  .records { grid-column: 1 / -1; }
}

/* ---- Publisher card. Same construction as an operator record card: Cream
   Paper on mint, 1px Forest Ink border, 12px radius, 16px padding, hairline
   before the fine print. Full width — one statement, not a fifth operator. ---- */
.imprint {
  grid-column: 1 / -1;
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--ink-hairline);
}
.imprint__card {
  margin-top: var(--spacing-16);
  padding: var(--spacing-16);
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
}
.imprint__name {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.imprint__form {
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  line-height: 1.4;
}
.imprint__contact {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.imprint__note {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink-hairline);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---- Tier 3: approval records, always open, one card per operator ---- */
.records {
  margin-top: var(--spacing-16);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--ink-hairline);
}
.records__intro {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 88ch;
}
.records__grid {
  display: grid;
  gap: var(--spacing-16);
  margin-top: var(--spacing-16);
}
@media (min-width: 48rem) {
  .records__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cream on Mint is 1.14:1, so the cards carry a 1px border to read as cards. */
.record {
  padding: var(--spacing-16);
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
}
.record__brand {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
}
.record__entity {
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  line-height: 1.4;
}
.record__meta {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-muted);
}
.record__rows {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ink-hairline);
}
.record__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.record__value {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.record__id { white-space: nowrap; font-family: var(--font-mono); color: var(--color-forest-ink); }

.records__note {
  margin-top: var(--spacing-16);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---- closing line ---- */
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-forest-ink);
}
.footer-bottom p { margin: 0; font-size: 0.75rem; font-weight: var(--fw-regular); color: var(--ink-muted); }
.footer-made { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-made__flag { width: 18px; height: 18px; flex: none; }

.page { padding-block: var(--spacing-32) var(--section-gap); }

.breadcrumb { font-size: 0.75rem; font-weight: var(--fw-semibold);
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; }
.breadcrumb li + li::before {
  content: '/';
  opacity: 0.5;
}
.breadcrumb a { border-bottom: 1px solid transparent; }
.breadcrumb a:hover { border-bottom-color: currentColor; }
.breadcrumb [aria-current] { opacity: 0.65; }

.page__head {
  padding-block: var(--spacing-32) var(--spacing-40);
  border-bottom: 1px solid var(--color-forest-ink);
}
.page__title {
  font-size: var(--text-heading-lg);
  letter-spacing: var(--tracking-heading);
}
.page__lede {
  margin-top: var(--spacing-16);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  max-width: 640px;
  color: var(--ink-muted);
}
.page__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--spacing-24);
  padding: 0.375rem 1rem;
  background: var(--color-sticky-note-mint);
  font-size: var(--text-caption);
  font-weight: var(--fw-regular);
  border-radius: var(--radius-tags);
  font-family: var(--font-mono);
}
.page__meta .icon { width: 1rem; height: 1rem; }

.prose-page { padding-top: var(--spacing-40); }
.prose-page > * + * { margin-top: var(--spacing-24); }
.prose-page h2 {
  margin-top: var(--spacing-64);
  font-size: var(--text-heading);
  letter-spacing: var(--tracking-heading);
}
.prose-page h3 {
  margin-top: var(--spacing-40);
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-semibold);
  line-height: var(--leading-subheading);
}
.prose-page > h2:first-child,
.prose-page > h3:first-child { margin-top: 0; }
.prose-page p { line-height: 1.7; }
.prose-page a {
  border-bottom: 2px solid var(--color-highlighter-yellow);
}
.prose-page a:hover { background: var(--color-highlighter-yellow); }

.prose-page ul,
.prose-page ol {
  display: grid;
  gap: 0.75rem;
  padding-left: 1.5rem;
  list-style: disc;
}
.prose-page ol { list-style: decimal; }
.prose-page li { line-height: 1.6; padding-left: 0.25rem; }
.prose-page li::marker { color: var(--color-forest-ink); font-weight: var(--fw-extrabold);
  font-weight: var(--fw-bold);
}

.prose-page dl { display: grid; gap: var(--spacing-16); }
.prose-page dt { font-weight: var(--fw-semibold); }
.prose-page dd { margin: 0.25rem 0 0; line-height: 1.7; }

.prose-page .owner-dl {
  display: grid;
  gap: 0.25rem;
  margin-top: var(--spacing-24);
}
.prose-page .owner-dl dt {
  font-size: var(--text-caption);
  font-weight: var(--fw-regular);
  color: var(--ink-muted);
}
.prose-page .owner-dl dd {
  margin: 0 0 0.625rem;
  font-weight: var(--fw-semibold);
}
@media (min-width: 40rem) {
  .prose-page .owner-dl {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem var(--spacing-32);
    align-items: baseline;
  }
  .prose-page .owner-dl dt { grid-column: 1; }
  .prose-page .owner-dl dd { grid-column: 2; margin-bottom: 0; }
}

.callout {
  padding: var(--card-padding);
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
  box-shadow: none;
}
/* kontakt@licensedcasinoscroatia.com is a single 34-character token. In a grid
   track it sets the min-content width and pushed kontakt.html past the viewport
   at 360px. `break-word` does not shrink min-content sizing — `anywhere` does,
   so long addresses and URLs get it; prose keeps the gentler `break-word`. */
.callout p,
.callout a,
a[href^="mailto:"],
.imprint__contact { overflow-wrap: anywhere; }

.prose-page p,
.prose-page li,
.prose-page dd,
.footer-legal p { overflow-wrap: break-word; }

.callout--flag { background: var(--color-highlighter-yellow); }
.callout > * + * { margin-top: var(--spacing-16); }
.callout__title {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
  background: var(--color-cream-paper);
}
.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}
.data-table th,
.data-table td {
  padding: 0.875rem 1rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--ink-hairline);
}
.data-table th {
  font-weight: var(--fw-semibold);
  background: var(--color-sticky-note-mint);
}
.data-table tr:last-child td { border-bottom: 0; }

.form { display: grid; gap: var(--spacing-24); max-width: 34rem; margin-inline: auto; }

.field label,
.field legend {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
}
.field__hint {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  opacity: 1;
  color: var(--ink-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  color: var(--color-forest-ink);
  background: var(--color-cream-paper);
  border: 1px solid var(--color-forest-ink);
}
.input, .select { border-radius: var(--radius-inputs); }

.textarea { border-radius: var(--radius-inputs); min-height: 10rem; resize: vertical; }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-forest-ink) 50%),
                    linear-gradient(135deg, var(--color-forest-ink) 50%, transparent 50%);
  background-position: right 1.4rem top 55%, right 1.05rem top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
.checkbox input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0.125rem 0 0;
  accent-color: var(--color-forest-ink);
}

.form__status {
  padding: var(--spacing-16) var(--spacing-24);
  background: var(--color-highlighter-yellow);
  border: 1px solid var(--color-forest-ink);
  border-radius: var(--radius-cards);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.form__status[hidden] { display: none; }

.contact-cards {
  display: grid;
  gap: var(--spacing-24);
  margin-top: var(--spacing-40);
}
@media (min-width: 40rem) {
  .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}