/* ==========================================================================
   Spinokkio Kasino - shared stylesheet
   spinokkiokasino.com
   1. Tokens
   2. Base
   3. Layout helpers
   4. Buttons
   5. Header + nav
   6. Promo bar
   7. Hero
   8. Sections / cards
   9. Footer
   10. Cookie notice
   11. Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --blue-900: #0b1444;
  --blue-850: #0e1a52;
  --blue-800: #13246b;
  --blue-700: #163389;
  --blue-600: #1a3ea8;
  --blue-500: #1f47c4;
  --blue-header: #1436a4;

  --pink-600: #e63a6d;
  --pink-500: #ff487e;
  --pink-400: #ff6b98;

  --gold-600: #e3a70a;
  --gold-500: #f5bd18;
  --gold-400: #ffd257;

  --white: #ffffff;
  --ink: #0a1038;
  --muted: #b9c4ef;
  --muted-2: #8e9ddb;

  --panel: #143089;
  --panel-2: #0f2470;
  --line: rgba(255, 255, 255, .14);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-sm: 0 4px 14px rgba(5, 10, 45, .28);
  --shadow: 0 14px 40px rgba(4, 9, 40, .42);
  --shadow-lg: 0 26px 70px rgba(3, 7, 35, .55);

  --wrap: 1240px;
  --header-h: 84px;

  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  background-color: var(--blue-900);
  background-image:
    radial-gradient(1100px 620px at 12% 18%, rgba(43, 74, 190, .38), transparent 62%),
    radial-gradient(900px 560px at 88% 12%, rgba(38, 62, 168, .34), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(24, 44, 130, .5), transparent 65%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* soft swirl texture behind everything, purely decorative */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='9' stroke-linecap='round'%3E%3Cpath d='M70 96c0-16 13-29 29-29s29 13 29 29-13 29-29 29-29-13-29-29 13-29 29-29 29 13 29 29'/%3E%3Cpath d='M300 300c0-18 15-33 33-33s33 15 33 33-15 33-33 33-33-15-33-33 15-33 33-33 33 15 33 33'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.055'%3E%3Ccircle cx='372' cy='72' r='5'/%3E%3Ccircle cx='40' cy='300' r='4'/%3E%3Ccircle cx='210' cy='190' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 420px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-400); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }

:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold-500);
  color: var(--ink);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 800;
}
.skip-link:focus { left: 0; }

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

/* ---------- 3. Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding: clamp(48px, 7vw, 88px) 0; }
.section--tight { padding: clamp(36px, 5vw, 60px) 0; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.section-head p { color: var(--muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-400);
  background: rgba(245, 189, 24, .12);
  border: 1px solid rgba(245, 189, 24, .35);
  padding: .4rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: .95rem 1.6rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
  text-decoration: none;
  line-height: 1.15;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--pink {
  background: linear-gradient(180deg, var(--pink-500), var(--pink-600));
  color: var(--white);
  box-shadow: 0 8px 22px rgba(230, 58, 109, .38);
}
.btn--pink:hover { box-shadow: 0 12px 30px rgba(230, 58, 109, .5); color: var(--white); }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(227, 167, 10, .34);
}
.btn--gold:hover { color: var(--ink); box-shadow: 0 12px 30px rgba(227, 167, 10, .45); }

.btn--ghost {
  background: transparent;
  color: var(--pink-400);
  border-color: rgba(255, 107, 152, .55);
}
.btn--ghost:hover { background: rgba(255, 107, 152, .12); color: var(--pink-400); }

.btn--outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .35);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); color: var(--white); }

.btn--block { width: 100%; }
.btn--sm { padding: .65rem 1.1rem; font-size: .85rem; border-radius: 10px; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, var(--blue-header), #0f2b8e);
  box-shadow: 0 4px 20px rgba(4, 10, 45, .45);
}

.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand__mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.brand__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
}
.brand__text span { color: var(--gold-400); }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav li { margin: 0; }

.main-nav a {
  display: block;
  color: rgba(255, 255, 255, .88);
  font-weight: 700;
  font-size: .95rem;
  padding: .55rem .85rem;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { background: rgba(255, 255, 255, .12); color: var(--white); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--gold-400); background: rgba(255, 255, 255, .1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: background-color .16s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. Promo bar ---------- */
.promo-bar {
  position: relative;
  background: linear-gradient(90deg, var(--pink-600), var(--pink-500) 45%, var(--pink-400) 75%, var(--pink-500));
  overflow: hidden;
}
.promo-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 46px);
  pointer-events: none;
}
.promo-bar p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 14px 20px;
  text-align: center;
  font-weight: 700;
  font-size: clamp(.9rem, 1.5vw, 1.02rem);
  color: var(--white);
  max-width: var(--wrap);
  margin-inline: auto;
}
.promo-bar strong { font-family: var(--font-display); font-weight: 800; }

/* ---------- 7. Hero ---------- */
.hero { padding: clamp(24px, 3.4vw, 40px) 0 clamp(44px, 6vw, 80px); }

.hero__intro {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(20px, 2.6vw, 30px);
}
.hero__intro .eyebrow { margin-bottom: .7rem; }
.hero__intro h1,
.hero__intro .hero__h1 {
  font-size: clamp(1.55rem, 2.9vw, 2.35rem);
  margin-bottom: .4rem;
}
.hero__intro h1 span,
.hero__intro .hero__h1 span { color: var(--gold-400); }
.hero__intro p {
  color: var(--muted);
  font-size: clamp(.92rem, 1.25vw, 1.02rem);
  max-width: 580px;
  margin-inline: auto;
}

.hero__card {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.deposit-panel { padding: clamp(24px, 3vw, 38px); }

.deposit-panel__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  color: var(--white);
  text-align: center;
  justify-content: center;
}
.deposit-panel__title::before,
.deposit-panel__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .22);
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.amount-btn {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: .95rem .4rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 6px 16px rgba(227, 167, 10, .26);
}
.amount-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(227, 167, 10, .38); }
.amount-btn[aria-pressed="true"] {
  border-color: var(--white);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 10px 24px rgba(227, 167, 10, .38);
}

.amount-field { margin-bottom: 14px; }
.amount-field input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  background: #f1f1ee;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: .95rem 1rem;
  text-align: center;
}
.amount-field input::placeholder { color: #7d7d86; font-weight: 600; }
.amount-field input:focus {
  outline: none;
  border-color: var(--gold-400);
  background: #ffffff;
}

.deposit-panel .btn + .btn { margin-top: 12px; }

.deposit-legal {
  margin: 18px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}
.deposit-legal a { color: var(--white); text-decoration: underline; }
.deposit-legal + .deposit-legal { margin-top: 14px; }

.hero__art {
  position: relative;
  background: linear-gradient(150deg, #6b3fa8 0%, #8850bd 42%, #5c34a0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 558px;
  overflow: hidden;
}
.hero__art::after { content: none; }
.hero__art img,
.hero__art svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .card:hover, .tile:hover, .amount-btn:hover { transform: none; }
}

/* ---------- 8. Sections / cards ---------- */
.card {
  background: linear-gradient(165deg, rgba(24, 48, 130, .95), rgba(14, 30, 92, .95));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 210, 87, .45);
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .95rem; }
.card__icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: linear-gradient(150deg, rgba(255, 210, 87, .22), rgba(255, 72, 126, .22));
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--gold-400);
}
.card__icon .ico { width: 28px; height: 28px; }

/* stat / trust strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.trust-strip div {
  background: rgba(13, 27, 84, .92);
  padding: 22px 16px;
  text-align: center;
}
.trust-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  color: var(--gold-400);
  line-height: 1.15;
}
.trust-strip span { font-size: .84rem; color: var(--muted); }

/* steps */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step__num {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  margin-bottom: 14px;
  box-shadow: 0 6px 16px rgba(227, 167, 10, .3);
}

/* bonus / game tiles */
.tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(28, 55, 148, .96), rgba(13, 28, 88, .96));
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile__media {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #6b3fa8, #4a2a8c);
  color: rgba(255, 255, 255, .94);
}
.tile__media .ico {
  width: clamp(52px, 6vw, 72px);
  height: clamp(52px, 6vw, 72px);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3));
}
.tile__media--pink { background: linear-gradient(150deg, #d4356b, #8c2352); }
.tile__media--gold { background: linear-gradient(150deg, #d99b0f, #8a5f06); }
.tile__media--blue { background: linear-gradient(150deg, #2350c6, #142f81); }
.tile__body { padding: 20px; flex: 1; }
.tile__body h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.tile__body p { color: var(--muted); font-size: .92rem; margin: 0; }
.tile__tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--pink-500);
  color: var(--white);
}

/* CTA band */
.cta-band {
  background: linear-gradient(120deg, var(--blue-600), var(--blue-700) 60%, #2a1a7a);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 52px);
  text-align: center;
  box-shadow: var(--shadow);
}
.cta-band p { color: rgba(255, 255, 255, .85); max-width: 620px; margin-inline: auto; }
.cta-band .btn { margin-top: 20px; }

/* FAQ */
.faq { max-width: 860px; margin-inline: auto; }
.faq details {
  background: rgba(15, 32, 96, .85);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.03rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--gold-400);
  line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 20px 18px; color: var(--muted); font-size: .95rem; }

/* prose pages */
.prose { max-width: 800px; margin-inline: auto; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--white); }

.page-head {
  text-align: center;
  padding: clamp(38px, 5vw, 64px) 0 clamp(20px, 3vw, 32px);
}
.page-head p { color: var(--muted); max-width: 640px; margin-inline: auto; }

/* table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: .93rem; }
th { font-family: var(--font-display); font-weight: 800; background: rgba(255, 255, 255, .06); color: var(--white); }
td { color: var(--muted); }
tr:last-child td { border-bottom: 0; }

/* ---------- 9. Footer ---------- */
.site-footer {
  margin-top: clamp(40px, 6vw, 72px);
  background: rgba(6, 13, 52, .85);
  border-top: 1px solid var(--line);
  padding: clamp(38px, 5vw, 60px) 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 34px;
}
.footer-grid h4 {
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid a { color: var(--muted); font-size: .93rem; }
.footer-grid a:hover { color: var(--white); }
.footer-about p { color: var(--muted); font-size: .92rem; max-width: 360px; }
.footer-about .brand { margin-bottom: 14px; }

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: var(--muted);
}
.badge--age { color: var(--white); border-color: rgba(255, 107, 152, .6); background: rgba(255, 72, 126, .16); }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: var(--muted-2);
}
.footer-bottom p { margin: 0; }

/* ---------- 10. Cookie notice ---------- */
.cookie-notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: min(300px, calc(100vw - 40px));
  background: linear-gradient(165deg, var(--blue-600), var(--blue-700));
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  text-align: center;
  transition: opacity .25s ease, transform .25s ease;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice.is-hiding { opacity: 0; transform: translateY(12px); }
.cookie-notice h4 {
  font-size: 1.28rem;
  margin: 0 0 .3rem;
  color: var(--white);
}
.cookie-notice p {
  font-size: .88rem;
  color: rgba(255, 255, 255, .84);
  margin: 0 0 14px;
}
.cookie-notice a { color: var(--white); text-decoration: underline; }

/* ---------- 11. Responsive ---------- */
@media (max-width: 1080px) {
  .hero__card { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .main-nav a { padding: .55rem .65rem; font-size: .9rem; }
}

/* seven menu items no longer fit beside the logo and the buttons below
   ~1180px, so the existing hamburger takes over from there down */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }

  .main-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #0f2b8e;
    border-top: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 18px 40px rgba(4, 10, 45, .5);
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  .site-header { position: sticky; }
  .header-inner { position: relative; }
  .main-nav.is-open { max-height: 420px; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 18px; }
  .main-nav a { padding: .85rem .6rem; font-size: 1rem; border-radius: 10px; }
  .main-nav li + li { border-top: 1px solid rgba(255, 255, 255, .08); }

  .main-nav.is-open { max-height: 480px; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }

  .header-actions .btn--outline-light { display: none; }

  .hero__card { grid-template-columns: minmax(0, 1fr); }
  .hero__art { order: -1; min-height: 0; height: 384px; padding: 0; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 16px; }

  .brand__text { font-size: 1.32rem; }
  .brand__mark { width: 34px; height: 34px; flex-basis: 34px; }

  .promo-bar p { padding: 12px 16px; font-size: .87rem; }

  .hero__art { height: 277px; }

  .header-actions .btn { display: none; }


  .hero { padding-top: 22px; }
  .hero__card { border-radius: var(--radius-lg); }
  .deposit-panel { padding: 22px 18px 26px; }
  .amount-grid { gap: 9px; }
  .amount-btn { font-size: 1.05rem; padding: .85rem .2rem; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { justify-content: center; text-align: center; }

  .cookie-notice {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    padding: 16px;
  }
  .cookie-notice h4 { font-size: 1.12rem; }
}

@media (max-width: 380px) {
  .amount-btn { font-size: .95rem; }
  .btn { font-size: .92rem; padding: .9rem 1rem; }
}

/* ---------- 12. Fine tuning ---------- */
.page-head + .section,
.page-head + .section--tight { padding-top: 0; }
.promo-short { display: none; }
@media (max-width: 640px) {
  .promo-full { display: none; }
  .promo-short { display: inline; }
}

/* ---------- 13. Information pages ---------- */
.placeholder {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .88em;
  color: var(--gold-400);
  background: rgba(245, 189, 24, .1);
  border: 1px dashed rgba(245, 189, 24, .55);
  border-radius: 8px;
  padding: .1em .55em;
  white-space: nowrap;
}

.notice {
  border: 1px solid rgba(255, 210, 87, .4);
  background: rgba(245, 189, 24, .08);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 1.5rem 0;
}
.notice p { color: var(--muted); font-size: .94rem; }
.notice p:first-child { color: var(--white); font-weight: 700; }

.meta-line {
  color: var(--muted-2);
  font-size: .88rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
}

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .95rem;
  margin: 0;
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list strong {
  flex: 0 0 190px;
  color: var(--white);
  font-family: var(--font-display);
}
@media (max-width: 560px) {
  .contact-list strong { flex-basis: 100%; }
  .placeholder { white-space: normal; }
}

.toc {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 20px;
}
.toc li { margin: 0; }
.toc a { color: var(--muted); font-size: .94rem; }
.toc a:hover { color: var(--gold-400); }

/* Finnish compounds get long: let headings and prose break rather than
   push the page wide on narrow screens. */
h1, h2, h3, h4, h5,
.prose p, .prose li, .contact-list li, .toc a, .faq summary {
  overflow-wrap: break-word;
  word-break: normal;
}

@media (max-width: 480px) {
  .page-head h1 { font-size: clamp(1.6rem, 7.4vw, 2rem); }
  .page-head { padding-bottom: 14px; }
}

/* Dense information pages read better with calmer heading steps than the
   marketing sections use. */
.prose h2 {
  font-size: clamp(1.28rem, 2.1vw, 1.6rem);
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.prose > .notice + h2,
.prose > nav + h2,
.prose > .meta-line + h2 { border-top: 0; padding-top: 0; margin-top: 1.4rem; }
.prose h3 { font-size: clamp(1.05rem, 1.6vw, 1.18rem); margin-top: 1.7rem; color: var(--gold-400); }
.prose ul { margin-bottom: 1.2rem; }

/* ---------- murupolku (breadcrumbs) ---------- */
.crumbs {
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(6, 12, 44, .35);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .7rem 0;
  list-style: none;
  font-size: .875rem;
}
.crumbs li { display: flex; align-items: center; gap: .45rem; }
.crumbs li + li::before {
  content: "›";
  color: rgba(233, 237, 255, .4);
  font-size: 1rem;
  line-height: 1;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover,
.crumbs a:focus-visible { color: var(--gold-400); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--white); font-weight: 700; }

@media (max-width: 480px) {
  .crumbs ol { font-size: .8rem; }
}

/* ---------- kategoriakortin oikea kuva ---------- */
.tile__media--photo { padding: 0; background: var(--blue-850); }
.tile__media--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- hahmokuvitus heron oikeassa laidassa ----------
   Läpinäkyvä PNG/WebP, joten kuva sovitetaan kokonaan näkyviin ja taustaksi
   jää .hero__art-gradientti. Rajaus söisi hahmolta jalat tai onnenpyörän. */
.hero__art--character img {
  object-fit: contain;
  object-position: 50% 50%;
  padding: 18px 14px 0;
}
@media (max-width: 960px) {
  .hero__art--character img { padding: 12px 10px 0; }
}


/* ==========================================================================
   Spinokkio - section components
   Generated by build_integrate.py from the standalone component folders.
   Do not hand-edit: change the source component, then re-run the script.
   ========================================================================== */

/* ==========================================================================
   Spinokkio - game-provider strip + new-customer banner
   Scoped under .spkpb-section / .spkp- / .spkb- so nothing leaks into the theme.
   No external libraries, no image files. Arrows use an optional 10-line script;
   the strip scrolls by swipe and trackpad without it.
   ========================================================================== */

.spkpb-section {
  /* ---- tokens ---- */
  --spkpb-bg: #071442;
  --spkpb-tile: #072e8d;
  --spkpb-tile-hi: #0b3cae;
  --spkpb-cream: #f3e2bb;
  --spkpb-cream-d: #ecdac0;
  --spkpb-navy: #071442;
  --spkpb-pink: #fe476f;
  --spkpb-pink-d: #e63a6d;
  --spkpb-gold: #c9a86a;
  --spkpb-wrap: 1200px;
  --spkpb-font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --spkpb-display: "Baloo 2", "Archivo Black", "Arial Black", "Trebuchet MS", var(--spkpb-font);

  box-sizing: border-box;
  margin: 0;
  padding: 40px 0 64px;
  background: var(--spkpb-bg);
  font-family: var(--spkpb-font);
}

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

.spkpb-inner {
  width: 100%;
  max-width: var(--spkpb-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ==========================================================================
   1. Provider strip
   ========================================================================== */
.spkp-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 46px;
}

.spkp-track {
  display: flex;
  flex: 1 1 auto;
  gap: 14px;
  margin: 0;
  padding: 4px 2px;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}
.spkp-track::-webkit-scrollbar { display: none; }

.spkp-track > li {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}

.spkp-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 122px;
  height: 62px;
  padding: 10px;
  border-radius: 8px;
  background: var(--spkpb-tile);
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.spkp-item:hover,
.spkp-item:focus-visible {
  background: var(--spkpb-tile-hi);
  transform: translateY(-2px);
  text-decoration: none;
}

/* text stand-in for a provider wordmark - swap for <img> when you have the
   official asset, see the markup comment */
.spkp-logo {
  font-family: var(--spkpb-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  opacity: .92;
}
.spkp-item img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.spkp-nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.spkp-nav:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.spkp-nav svg { width: 18px; height: 18px; }

/* ==========================================================================
   2. New-customer banner
   ========================================================================== */
.spkb-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  align-items: center;
  gap: 20px;
  padding: 56px 56px 56px 62px;
  border-radius: 26px;
  background-color: var(--spkpb-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 400%22 fill=%22none%22 preserveAspectRatio=%22xMidYMid slice%22 aria-hidden=%22true%22%3E%3Cg fill=%22%23ecdac0%22 opacity=%22.9%22%3E%3Ccircle cx=%2279.6%22 cy=%2240%22 r=%228.8%22/%3E%3Ccircle cx=%22106.4%22 cy=%2240%22 r=%228.8%22/%3E%3Ccircle cx=%22133.2%22 cy=%2240%22 r=%228.8%22/%3E%3Ccircle cx=%22160%22 cy=%2240%22 r=%228.8%22/%3E%3Ccircle cx=%22186.8%22 cy=%2240%22 r=%228.8%22/%3E%3Ccircle cx=%22213.6%22 cy=%2240%22 r=%228.8%22/%3E%3Ccircle cx=%22240.4%22 cy=%2240%22 r=%228.8%22/%3E%3Ccircle cx=%2291.4%22 cy=%2259.8%22 r=%227.3%22/%3E%3Ccircle cx=%22114.3%22 cy=%2259.8%22 r=%227.3%22/%3E%3Ccircle cx=%22137.1%22 cy=%2259.8%22 r=%227.3%22/%3E%3Ccircle cx=%22160%22 cy=%2259.8%22 r=%227.3%22/%3E%3Ccircle cx=%22182.9%22 cy=%2259.8%22 r=%227.3%22/%3E%3Ccircle cx=%22205.7%22 cy=%2259.8%22 r=%227.3%22/%3E%3Ccircle cx=%22228.6%22 cy=%2259.8%22 r=%227.3%22/%3E%3Ccircle cx=%22103.2%22 cy=%2272%22 r=%225.9%22/%3E%3Ccircle cx=%22122.1%22 cy=%2272%22 r=%225.9%22/%3E%3Ccircle cx=%22141.1%22 cy=%2272%22 r=%225.9%22/%3E%3Ccircle cx=%22160%22 cy=%2272%22 r=%225.9%22/%3E%3Ccircle cx=%22178.9%22 cy=%2272%22 r=%225.9%22/%3E%3Ccircle cx=%22197.9%22 cy=%2272%22 r=%225.9%22/%3E%3Ccircle cx=%22216.8%22 cy=%2272%22 r=%225.9%22/%3E%3Ccircle cx=%22114.1%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22127.2%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22140.3%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22153.4%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22166.6%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22179.7%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22192.8%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22205.9%22 cy=%2276.6%22 r=%224.5%22/%3E%3Ccircle cx=%22126.1%22 cy=%2273.5%22 r=%223.1%22/%3E%3Ccircle cx=%22135.8%22 cy=%2273.5%22 r=%223.1%22/%3E%3Ccircle cx=%22145.5%22 cy=%2273.5%22 r=%223.1%22/%3E%3Ccircle cx=%22155.2%22 cy=%2273.5%22 r=%223.1%22/%3E%3Ccircle cx=%22164.8%22 cy=%2273.5%22 r=%223.1%22/%3E%3Ccircle cx=%22174.5%22 cy=%2273.5%22 r=%223.1%22/%3E%3Ccircle cx=%22184.2%22 cy=%2273.5%22 r=%223.1%22/%3E%3Ccircle cx=%22193.9%22 cy=%2273.5%22 r=%223.1%22/%3E%3C/g%3E%3Cg fill=%22%23ecdac0%22 opacity=%22.7%22%3E%3Ccircle cx=%22415.4%22 cy=%2218%22 r=%226%22/%3E%3Ccircle cx=%22433.6%22 cy=%2218%22 r=%226%22/%3E%3Ccircle cx=%22451.8%22 cy=%2218%22 r=%226%22/%3E%3Ccircle cx=%22470%22 cy=%2218%22 r=%226%22/%3E%3Ccircle cx=%22488.2%22 cy=%2218%22 r=%226%22/%3E%3Ccircle cx=%22506.4%22 cy=%2218%22 r=%226%22/%3E%3Ccircle cx=%22524.6%22 cy=%2218%22 r=%226%22/%3E%3Ccircle cx=%22423.4%22 cy=%2231.5%22 r=%225%22/%3E%3Ccircle cx=%22438.9%22 cy=%2231.5%22 r=%225%22/%3E%3Ccircle cx=%22454.5%22 cy=%2231.5%22 r=%225%22/%3E%3Ccircle cx=%22470%22 cy=%2231.5%22 r=%225%22/%3E%3Ccircle cx=%22485.5%22 cy=%2231.5%22 r=%225%22/%3E%3Ccircle cx=%22501.1%22 cy=%2231.5%22 r=%225%22/%3E%3Ccircle cx=%22516.6%22 cy=%2231.5%22 r=%225%22/%3E%3Ccircle cx=%22431.4%22 cy=%2239.8%22 r=%224%22/%3E%3Ccircle cx=%22444.3%22 cy=%2239.8%22 r=%224%22/%3E%3Ccircle cx=%22457.1%22 cy=%2239.8%22 r=%224%22/%3E%3Ccircle cx=%22470%22 cy=%2239.8%22 r=%224%22/%3E%3Ccircle cx=%22482.9%22 cy=%2239.8%22 r=%224%22/%3E%3Ccircle cx=%22495.7%22 cy=%2239.8%22 r=%224%22/%3E%3Ccircle cx=%22508.6%22 cy=%2239.8%22 r=%224%22/%3E%3Ccircle cx=%22438.8%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22447.7%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22456.6%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22465.5%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22474.5%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22483.4%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22492.3%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22501.2%22 cy=%2242.9%22 r=%223.1%22/%3E%3Ccircle cx=%22446.9%22 cy=%2240.8%22 r=%222.1%22/%3E%3Ccircle cx=%22453.5%22 cy=%2240.8%22 r=%222.1%22/%3E%3Ccircle cx=%22460.1%22 cy=%2240.8%22 r=%222.1%22/%3E%3Ccircle cx=%22466.7%22 cy=%2240.8%22 r=%222.1%22/%3E%3Ccircle cx=%22473.3%22 cy=%2240.8%22 r=%222.1%22/%3E%3Ccircle cx=%22479.9%22 cy=%2240.8%22 r=%222.1%22/%3E%3Ccircle cx=%22486.5%22 cy=%2240.8%22 r=%222.1%22/%3E%3Ccircle cx=%22493.1%22 cy=%2240.8%22 r=%222.1%22/%3E%3C/g%3E%3Cg fill=%22%23ecdac0%22 opacity=%22.85%22%3E%3Ccircle cx=%22939.3%22 cy=%2230%22 r=%227.7%22/%3E%3Ccircle cx=%22962.9%22 cy=%2230%22 r=%227.7%22/%3E%3Ccircle cx=%22986.4%22 cy=%2230%22 r=%227.7%22/%3E%3Ccircle cx=%221010%22 cy=%2230%22 r=%227.7%22/%3E%3Ccircle cx=%221033.6%22 cy=%2230%22 r=%227.7%22/%3E%3Ccircle cx=%221057.1%22 cy=%2230%22 r=%227.7%22/%3E%3Ccircle cx=%221080.7%22 cy=%2230%22 r=%227.7%22/%3E%3Ccircle cx=%22949.7%22 cy=%2247.4%22 r=%226.5%22/%3E%3Ccircle cx=%22969.8%22 cy=%2247.4%22 r=%226.5%22/%3E%3Ccircle cx=%22989.9%22 cy=%2247.4%22 r=%226.5%22/%3E%3Ccircle cx=%221010%22 cy=%2247.4%22 r=%226.5%22/%3E%3Ccircle cx=%221030.1%22 cy=%2247.4%22 r=%226.5%22/%3E%3Ccircle cx=%221050.2%22 cy=%2247.4%22 r=%226.5%22/%3E%3Ccircle cx=%221070.3%22 cy=%2247.4%22 r=%226.5%22/%3E%3Ccircle cx=%22960%22 cy=%2258.2%22 r=%225.2%22/%3E%3Ccircle cx=%22976.7%22 cy=%2258.2%22 r=%225.2%22/%3E%3Ccircle cx=%22993.3%22 cy=%2258.2%22 r=%225.2%22/%3E%3Ccircle cx=%221010%22 cy=%2258.2%22 r=%225.2%22/%3E%3Ccircle cx=%221026.7%22 cy=%2258.2%22 r=%225.2%22/%3E%3Ccircle cx=%221043.3%22 cy=%2258.2%22 r=%225.2%22/%3E%3Ccircle cx=%221060%22 cy=%2258.2%22 r=%225.2%22/%3E%3Ccircle cx=%22969.6%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%22981.1%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%22992.7%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%221004.2%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%221015.8%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%221027.3%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%221038.9%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%221050.4%22 cy=%2262.2%22 r=%224%22/%3E%3Ccircle cx=%22980.2%22 cy=%2259.5%22 r=%222.7%22/%3E%3Ccircle cx=%22988.7%22 cy=%2259.5%22 r=%222.7%22/%3E%3Ccircle cx=%22997.2%22 cy=%2259.5%22 r=%222.7%22/%3E%3Ccircle cx=%221005.7%22 cy=%2259.5%22 r=%222.7%22/%3E%3Ccircle cx=%221014.3%22 cy=%2259.5%22 r=%222.7%22/%3E%3Ccircle cx=%221022.8%22 cy=%2259.5%22 r=%222.7%22/%3E%3Ccircle cx=%221031.3%22 cy=%2259.5%22 r=%222.7%22/%3E%3Ccircle cx=%221039.8%22 cy=%2259.5%22 r=%222.7%22/%3E%3C/g%3E%3Cg fill=%22%23ecdac0%22 opacity=%22.6%22%3E%3Ccircle cx=%22828.6%22 cy=%22250%22 r=%225.6%22/%3E%3Ccircle cx=%22845.7%22 cy=%22250%22 r=%225.6%22/%3E%3Ccircle cx=%22862.9%22 cy=%22250%22 r=%225.6%22/%3E%3Ccircle cx=%22880%22 cy=%22250%22 r=%225.6%22/%3E%3Ccircle cx=%22897.1%22 cy=%22250%22 r=%225.6%22/%3E%3Ccircle cx=%22914.3%22 cy=%22250%22 r=%225.6%22/%3E%3Ccircle cx=%22931.4%22 cy=%22250%22 r=%225.6%22/%3E%3Ccircle cx=%22836.1%22 cy=%22262.7%22 r=%224.7%22/%3E%3Ccircle cx=%22850.7%22 cy=%22262.7%22 r=%224.7%22/%3E%3Ccircle cx=%22865.4%22 cy=%22262.7%22 r=%224.7%22/%3E%3Ccircle cx=%22880%22 cy=%22262.7%22 r=%224.7%22/%3E%3Ccircle cx=%22894.6%22 cy=%22262.7%22 r=%224.7%22/%3E%3Ccircle cx=%22909.3%22 cy=%22262.7%22 r=%224.7%22/%3E%3Ccircle cx=%22923.9%22 cy=%22262.7%22 r=%224.7%22/%3E%3Ccircle cx=%22843.7%22 cy=%22270.5%22 r=%223.8%22/%3E%3Ccircle cx=%22855.8%22 cy=%22270.5%22 r=%223.8%22/%3E%3Ccircle cx=%22867.9%22 cy=%22270.5%22 r=%223.8%22/%3E%3Ccircle cx=%22880%22 cy=%22270.5%22 r=%223.8%22/%3E%3Ccircle cx=%22892.1%22 cy=%22270.5%22 r=%223.8%22/%3E%3Ccircle cx=%22904.2%22 cy=%22270.5%22 r=%223.8%22/%3E%3Ccircle cx=%22916.3%22 cy=%22270.5%22 r=%223.8%22/%3E%3Ccircle cx=%22850.6%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22859%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22867.4%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22875.8%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22884.2%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22892.6%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22901%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22909.4%22 cy=%22273.4%22 r=%222.9%22/%3E%3Ccircle cx=%22858.3%22 cy=%22271.5%22 r=%222%22/%3E%3Ccircle cx=%22864.5%22 cy=%22271.5%22 r=%222%22/%3E%3Ccircle cx=%22870.7%22 cy=%22271.5%22 r=%222%22/%3E%3Ccircle cx=%22876.9%22 cy=%22271.5%22 r=%222%22/%3E%3Ccircle cx=%22883.1%22 cy=%22271.5%22 r=%222%22/%3E%3Ccircle cx=%22889.3%22 cy=%22271.5%22 r=%222%22/%3E%3Ccircle cx=%22895.5%22 cy=%22271.5%22 r=%222%22/%3E%3Ccircle cx=%22901.7%22 cy=%22271.5%22 r=%222%22/%3E%3C/g%3E%3Cpath d=%22M0 -13 L3.2 -3.2 L13 0 L3.2 3.2 L0 13 L-3.2 3.2 L-13 0 L-3.2 -3.2 Z%22 fill=%22%23e79c2c%22 opacity=%220.62%22 transform=%22translate%28392 70%29 scale%281.5%29%22/%3E%3Cpath d=%22M0 -13 L3.2 -3.2 L13 0 L3.2 3.2 L0 13 L-3.2 3.2 L-13 0 L-3.2 -3.2 Z%22 fill=%22%237e6bb5%22 opacity=%220.62%22 transform=%22translate%28610 56%29 scale%281.2%29%22/%3E%3Cpath d=%22M0 -13 L3.2 -3.2 L13 0 L3.2 3.2 L0 13 L-3.2 3.2 L-13 0 L-3.2 -3.2 Z%22 fill=%22%237e6bb5%22 opacity=%220.5%22 transform=%22translate%28690 232%29 scale%281.1%29%22/%3E%3Cpath d=%22M0 -13 L3.2 -3.2 L13 0 L3.2 3.2 L0 13 L-3.2 3.2 L-13 0 L-3.2 -3.2 Z%22 fill=%22%23e79c2c%22 opacity=%220.55%22 transform=%22translate%28516 330%29 scale%280.8%29%22/%3E%3Cpath d=%22M0 -13 L3.2 -3.2 L13 0 L3.2 3.2 L0 13 L-3.2 3.2 L-13 0 L-3.2 -3.2 Z%22 fill=%22%23e79c2c%22 opacity=%220.5%22 transform=%22translate%28292 320%29 scale%280.6%29%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 14px 34px rgba(2, 6, 32, .38);
  overflow: hidden;
}

/* corner ornaments as background layers on an inner element */
.spkb-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%23231f20%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%23231f20%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%23231f20%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%23231f20%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 13px 13px;
  background-position:
    left 14px top 14px,
    right 14px top 14px,
    left 14px bottom 14px,
    right 14px bottom 14px;
}

/* decorative frame with notched corners */
.spkb-banner::before {
  content: "";
  position: absolute;
  inset: 26px;
  z-index: 1;
  pointer-events: none;
  border: 18px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22%3E%3Cpath d=%22M18 4 H11 L4 11 V49 L11 56 H49 L56 49 V11 L49 4 Z%22 fill=%22none%22 stroke=%22%23c9a86a%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M20.5 7.6 H12.6 L7.6 12.6 V47.4 L12.6 52.4 H47.4 L52.4 47.4 V12.6 L47.4 7.6 Z%22 fill=%22none%22 stroke=%22%23b08f52%22 stroke-width=%221%22 stroke-linejoin=%22round%22 opacity=%22.75%22/%3E%3C/svg%3E");
  border-image-slice: 18;
  border-image-width: 18px;
  border-image-repeat: stretch;
}

.spkb-copy {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.spkb-title {
  margin: 0 0 18px;
  font-family: var(--spkpb-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--spkpb-navy);
  text-shadow: 2px 2px 0 rgba(126, 107, 181, .3);
  overflow-wrap: break-word;
}

.spkb-text {
  margin: 0 0 28px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--spkpb-navy);
  overflow-wrap: break-word;
}

.spkb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 30px;
  border: 0;
  border-radius: 10px;
  background: var(--spkpb-pink);
  color: #fff;
  font-family: var(--spkpb-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.spkb-cta:hover,
.spkb-cta:focus-visible {
  background: var(--spkpb-pink-d);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(230, 58, 109, .4);
}

.spkb-art {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: 100%;
  max-width: 360px;
}
.spkb-art svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .spkb-banner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    padding: 48px 44px;
  }
}

@media (max-width: 860px) {
  .spkpb-section { padding: 32px 0 52px; }
  .spkp-strip { margin-bottom: 36px; }

  /* stack: copy first so the CTA stays high on the page */
  .spkb-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 46px 38px;
    text-align: center;
  }
  .spkb-copy { max-width: none; margin-inline: auto; }
  .spkb-art { justify-self: center; max-width: 280px; }
}

@media (max-width: 640px) {
  .spkpb-section { padding: 26px 0 44px; }
  .spkpb-inner { padding: 0 18px; }

  /* arrows are redundant once the strip is swipeable */
  .spkp-nav { display: none; }
  .spkp-strip { gap: 0; margin-bottom: 30px; }
  .spkp-track { gap: 10px; }
  .spkp-item { width: 104px; height: 54px; }
  .spkp-logo { font-size: 11px; }

  .spkb-banner {
    padding: 34px 22px 36px;
    border-radius: 20px;
    gap: 24px;
  }
  .spkb-banner::before { inset: 16px; border-width: 14px; border-image-width: 14px; }
  .spkb-banner::after {
    background-size: 11px 11px;
    background-position:
      left 9px top 9px,
      right 9px top 9px,
      left 9px bottom 9px,
      right 9px bottom 9px;
  }
  .spkb-text { font-size: 15px; margin-bottom: 24px; }
  .spkb-cta { width: 100%; padding: 16px 20px; }
  .spkb-art { max-width: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  .spkp-track { scroll-behavior: auto; }
  .spkp-item, .spkb-cta { transition: none; }
  .spkp-item:hover, .spkb-cta:hover { transform: none; }
}


/* ==========================================================================
   Spinokkio - three-card feature section
   Everything is scoped under .spkc-section so it cannot touch theme styles.
   No JavaScript, no external libraries, no image files.
   Paste into Ulkoasu > Muokkaa > Lisa-CSS (Kadence: Customizer > Additional CSS).
   ========================================================================== */

.spkc-section {
  /* ---- tokens, scoped to the component ---- */
  --spkc-bg: #071442;
  --spkc-card: #fae7c2;
  --spkc-card-hi: #fdf3dd;
  --spkc-pink: #fe476f;
  --spkc-ink: #07146a;
  --spkc-gold: #d8a24b;
  --spkc-wrap: 1200px;
  --spkc-font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --spkc-display: "Baloo 2", "Archivo Black", "Arial Black", "Trebuchet MS", var(--spkc-font);

  box-sizing: border-box;
  margin: 0;
  padding: 64px 0;
  background: var(--spkc-bg);
  font-family: var(--spkc-font);
}

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

.spkc-inner {
  width: 100%;
  max-width: var(--spkc-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- grid: 3 up on desktop, 2 on tablet, 1 on mobile ---- */
.spkc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spkc-grid > li { margin: 0; }

/* ---- card ---- */
.spkc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 56px 34px 50px;
  border-radius: 24px;
  text-align: center;
  background-color: var(--spkc-card);

  /* the four corner ornaments ride along as background layers, no extra markup */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E %3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%230b2160%22/%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E %3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%230b2160%22/%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E %3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%230b2160%22/%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E %3Cpath d=%22M12 0 L14.6 9.4 L24 12 L14.6 14.6 L12 24 L9.4 14.6 L0 12 L9.4 9.4 Z%22 fill=%22%230b2160%22/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position:
    left 13px top 13px,
    right 13px top 13px,
    left 13px bottom 13px,
    right 13px bottom 13px;

  box-shadow: 0 10px 26px rgba(2, 6, 32, .35);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

/* decorative inner frame with notched corners */
.spkc-card::before {
  content: "";
  position: absolute;
  inset: 24px;
  pointer-events: none;
  border: 18px solid transparent;
  border-image-source: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22%3E %3Cpath d=%22M18 4 H11 L4 11 V49 L11 56 H49 L56 49 V11 L49 4 Z%22 fill=%22none%22 stroke=%22%23d8a24b%22 stroke-width=%222.6%22 stroke-linejoin=%22round%22/%3E %3Cpath d=%22M20.5 7.6 H12.6 L7.6 12.6 V47.4 L12.6 52.4 H47.4 L52.4 47.4 V12.6 L47.4 7.6 Z%22 fill=%22none%22 stroke=%22%23c08b3c%22 stroke-width=%221%22 stroke-linejoin=%22round%22 opacity=%22.8%22/%3E %3C/svg%3E");
  border-image-slice: 18;
  border-image-width: 18px;
  border-image-repeat: stretch;
}

.spkc-card:hover,
.spkc-card:focus-within {
  transform: translateY(-6px);
  background-color: var(--spkc-card-hi);
  box-shadow: 0 20px 40px rgba(2, 6, 32, .5);
}

/* ---- illustration ---- */
.spkc-card__art {
  position: relative;
  width: 100%;
  max-width: 216px;
  margin: 0 auto 36px;
}
.spkc-card__art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- text ---- */
.spkc-card__title {
  margin: 0 0 14px;
  font-family: var(--spkc-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--spkc-pink);
  overflow-wrap: break-word;
}

.spkc-card__text {
  margin: 0;
  max-width: 250px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--spkc-ink);
  overflow-wrap: break-word;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* tablet: 2 per row, the third centres underneath */
@media (max-width: 1024px) {
  .spkc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .spkc-card { padding: 40px 28px 36px; }
}

@media (max-width: 860px) {
  .spkc-section { padding: 52px 0; }
}

/* mobile: 1 per row */
@media (max-width: 640px) {
  .spkc-section { padding: 44px 0; }
  .spkc-inner { padding: 0 18px; }
  .spkc-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* keep a card-like proportion instead of one very wide box */
  .spkc-grid > li { max-width: 400px; margin-inline: auto; width: 100%; }

  .spkc-card {
    padding: 34px 24px 32px;
    border-radius: 20px;
    background-size: 11px 11px;
    background-position:
      left 10px top 10px,
      right 10px top 10px,
      left 10px bottom 10px,
      right 10px bottom 10px;
  }
  .spkc-card::before { inset: 19px; }

  .spkc-card__art { max-width: 176px; margin-bottom: 24px; }
  .spkc-card__title { font-size: 20px; }
  .spkc-card__text { font-size: 15px; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .spkc-card { transition: none; }
  .spkc-card:hover,
  .spkc-card:focus-within { transform: none; }
}


/* ==========================================================================
   Spinokkio - footer component
   Scoped under .spk-footer / .spk-cookie so it cannot collide with theme CSS.
   No JavaScript, no external libraries, no build step.
   Paste into Ulkoasu > Muokkaa > Lisa-CSS (Kadence: Customizer > Additional CSS).
   ========================================================================== */

.spk-footer {
  /* ---- tokens, scoped to the component ---- */
  --spk-blue: #12358f;
  --spk-blue-dark: #0a1240;
  --spk-pink: #ff487e;
  --spk-pink-dark: #e63a6d;
  --spk-cream: #f1efe6;
  --spk-ink: #10225e;
  --spk-text: #d6ddf6;
  --spk-text-soft: #c2ccec;
  --spk-line: rgba(255, 255, 255, .16);
  --spk-wrap: 1200px;
  --spk-font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --spk-font-display: "Baloo 2", "Trebuchet MS", var(--spk-font);

  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 62px 0 0;
  background: var(--spk-blue);
  color: var(--spk-text);
  font-family: var(--spk-font);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
}

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

/* ---- torn paper edge along the top ---- */
.spk-footer__edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 120%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0 H1440 V75.8 L1425.5 75.8 L1415.3 73.6 L1405.3 68.3 L1388.9 93.1 L1372.7 82.0 L1359.9 84.4 L1341.1 86.4 L1331.3 79.6 L1319.8 75.4 L1297.0 75.9 L1277.1 75.8 L1267.0 94.5 L1246.5 85.1 L1227.5 78.9 L1205.0 74.2 L1186.2 78.5 L1164.8 82.5 L1153.8 82.6 L1142.3 74.2 L1121.9 75.0 L1098.0 76.9 L1078.9 75.4 L1055.6 74.6 L1035.3 100.4 L1015.3 94.0 L1001.5 89.0 L992.1 79.8 L981.1 101.2 L969.9 90.4 L946.1 84.1 L927.8 84.3 L904.1 79.7 L889.0 83.1 L877.4 76.8 L864.4 76.8 L851.0 97.0 L835.7 94.0 L815.0 88.4 L794.5 102.8 L772.2 94.0 L756.5 82.4 L736.8 92.8 L724.2 84.4 L714.3 93.8 L703.6 81.3 L679.7 74.7 L666.4 72.8 L655.4 79.0 L638.4 72.4 L627.7 70.2 L604.6 66.0 L579.4 64.6 L561.2 98.3 L535.6 92.1 L522.1 81.9 L500.0 82.4 L485.4 83.1 L459.7 83.5 L436.7 77.0 L418.9 70.4 L409.5 68.9 L388.7 70.0 L363.8 76.7 L348.6 72.6 L336.2 74.5 L311.9 74.1 L291.8 69.2 L271.6 74.2 L249.8 70.4 L227.4 75.2 L201.9 73.6 L176.8 69.9 L165.6 76.1 L142.9 79.2 L117.3 75.6 L98.9 69.4 L73.4 71.3 L48.6 76.6 L25.5 72.8 L11.5 74.2 L0.0 69.8 L0 69.8 Z%22 fill=%22%230a1240%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

/* ---- layout ---- */
.spk-footer__inner {
  width: 100%;
  max-width: var(--spk-wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- brand ---- */
.spk-footer__brand {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 52px;
}
.spk-footer__brand:hover,
.spk-footer__brand:focus { text-decoration: none; }
.spk-footer__logo {
  display: block;
  width: 218px;
  height: auto;
  max-width: 100%;
}

/* ---- navigation, two columns ---- */
.spk-footer__nav { margin: 0 0 36px; }

.spk-footer__links {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: 40px;
  row-gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spk-footer__links li { margin: 0; }

.spk-footer__links a {
  display: inline-block;
  color: var(--spk-text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s ease;
}
.spk-footer__links a:hover,
.spk-footer__links a:focus-visible { color: #fff; text-decoration: underline; }

/* ---- information block ---- */
.spk-footer__info {
  max-width: 730px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.62;
  color: var(--spk-text-soft);
}
.spk-footer__info p { margin: 0 0 14px; }
.spk-footer__info p:last-child { margin-bottom: 0; }
.spk-footer__info a { color: inherit; text-decoration: underline; }
.spk-footer__info a:hover { color: #fff; }

.spk-footer__subhead {
  color: #fff;
  font-weight: 800;
  margin-bottom: 10px !important;
}

.spk-footer__hours {
  list-style: disc;
  margin: 0 0 14px;
  padding-left: 30px;
}
.spk-footer__hours li { margin: 0 0 14px; }
.spk-footer__hours li:last-child { margin-bottom: 0; }

/* clearly marked, so nothing ships half-filled */
.spk-ph {
  display: inline;
  color: #ffd257;
  background: rgba(255, 210, 87, .1);
  border: 1px dashed rgba(255, 210, 87, .5);
  border-radius: 5px;
  padding: 0 5px;
  font-style: normal;
  /* keep the dashed box intact when a placeholder wraps across lines */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- bottom bar ---- */
.spk-footer__bottom {
  margin-top: 32px;
  border-top: 1px solid var(--spk-line);
  padding: 26px 0 30px;
  text-align: center;
}

.spk-footer__amounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.spk-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 9px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--spk-cream);
  color: var(--spk-ink);
  font-family: var(--spk-font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.spk-amount:hover,
.spk-amount:focus-visible {
  background: #fff;
  color: var(--spk-ink);
  text-decoration: none;
  transform: translateY(-2px);
}

.spk-footer__legal {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--spk-text);
}
.spk-footer__legal a { color: #fff; text-decoration: underline; }
.spk-footer__legal a:hover { color: var(--spk-pink); }

/* ---- cookie notice, dismissed with a pure-CSS checkbox toggle ---- */
.spk-cookie__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.spk-cookie {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 9990;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 18px;
  background: rgba(10, 24, 78, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(3, 8, 38, .45);
  text-align: center;
  color: #fff;
  font-family: var(--spk-font, "Nunito", system-ui, sans-serif);
}

.spk-cookie__title {
  margin: 0 0 2px;
  font-family: "Baloo 2", "Trebuchet MS", "Nunito", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

.spk-cookie__text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .9);
}
.spk-cookie__text a { color: #fff; text-decoration: underline; }

.spk-cookie__btn {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--spk-pink, #ff487e);
  color: #fff;
  font-family: "Baloo 2", "Trebuchet MS", "Nunito", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, transform .15s ease;
}
.spk-cookie__btn:hover { background: #e63a6d; transform: translateY(-1px); }

.spk-cookie__toggle:checked ~ .spk-cookie { display: none; }
.spk-cookie__toggle:focus-visible ~ .spk-cookie {
  outline: 3px solid #ffd257;
  outline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .spk-footer { padding-top: 50px; }
  .spk-footer__edge { height: 36px; }
  .spk-footer__brand { margin-bottom: 40px; }
  .spk-footer__nav { margin-bottom: 38px; }
}

@media (max-width: 600px) {
  .spk-footer { padding-top: 40px; }
  .spk-footer__edge { height: 28px; }
  .spk-footer__inner { padding: 0 18px; }

  .spk-footer__logo { width: 168px; }
  .spk-footer__brand { margin-bottom: 32px; }

  /* stack the link columns */
  .spk-footer__links {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 15px;
  }
  .spk-footer__links a { font-size: 16px; }

  .spk-footer__nav { margin-bottom: 34px; }
  .spk-footer__info { font-size: 12.5px; }

  .spk-footer__bottom { margin-top: 36px; padding: 22px 0 26px; }
  .spk-footer__amounts { gap: 10px; }
  .spk-amount { min-width: 0; flex: 1 1 88px; font-size: 16px; padding: 10px 12px; }

  .spk-cookie {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-width: none;
    padding: 18px;
  }
  .spk-cookie__title { font-size: 18px; }
  .spk-cookie__text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .spk-amount:hover,
  .spk-cookie__btn:hover { transform: none; }
}


/* ==========================================================================
   Spinokkio - kayttajapalautteet
   Rakentuu sivuston olemassa olevan .card-tyylin paalle, joten varit,
   typografia, reunat ja hover tulevat suoraan teemasta. Vain sitaatille
   ominaiset osat maaritellaan tassa, scopetettuna .spkt- etuliitteella.
   ========================================================================== */

.spkt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.spkt-grid > li { margin: 0; }

/* .card antaa taustan, reunan, pyoristyksen, varjon ja hoverin */
.spkt-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 28px 30px 26px;
}

.spkt-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  color: var(--gold-400);
}
.spkt-star { display: block; flex: 0 0 auto; }

.spkt-card__title {
  margin: 0 0 12px;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--white);
}
/* lainausmerkit otsikon ymparille, kuten sitaatissa */
.spkt-card__title::before { content: "\201D"; }
.spkt-card__title::after { content: "\201D"; }

.spkt-quote {
  position: relative;
  margin: 0 0 18px;
  padding-left: 16px;
  border-left: 2px solid rgba(255, 210, 87, .45);
}
.spkt-quote p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.62;
  color: var(--muted);
}

.spkt-author {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  color: var(--gold-400);
}
.spkt-author::before { content: "\2014\00a0"; }

/* huomautus erottuu, mutta ei huuda */
.spkt-notice {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 32px;
}

/* ---------- responsiivisuus ---------- */
@media (max-width: 900px) {
  .spkt-card { padding: 24px 24px 22px; }
}

@media (max-width: 640px) {
  .spkt-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .spkt-card { padding: 22px 20px 20px; }
  .spkt-card__title { font-size: 1.05rem; }
  .spkt-quote { padding-left: 13px; }
  .spkt-quote p { font-size: .93rem; }
  .spkt-notice { margin-bottom: 24px; }
}


/* ==========================================================================
   Spinokkio - pelirivit
   Scopetettu .spkg- etuliitteella. Ei omaa JavaScriptia: nuolet kayttavat
   samaa main.js:n koodia kuin pelintarjoajarivi.
   ========================================================================== */

.spkg-section {
  --spkg-bg: #071442;
  --spkg-tile: #0e2160;
  --spkg-line: rgba(255, 255, 255, .16);
  --spkg-line-hi: rgba(255, 210, 87, .6);
  --spkg-text: #ffffff;
  --spkg-muted: #9fb0e4;
  --spkg-gold: #ffd257;
  --spkg-wrap: 1240px;
  --spkg-font: "Nunito", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --spkg-display: "Baloo 2", "Trebuchet MS", var(--spkg-font);

  box-sizing: border-box;
  padding: 44px 0 8px;
  background: var(--spkg-bg);
  font-family: var(--spkg-font);
}
.spkg-section *,
.spkg-section *::before,
.spkg-section *::after { box-sizing: border-box; }

.spkg-inner {
  width: 100%;
  max-width: var(--spkg-wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.spkg-row + .spkg-row { margin-top: 42px; }

/* ---------- row header ---------- */
.spkg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.spkg-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(255, 210, 87, .2), rgba(255, 72, 126, .2));
  border: 1px solid var(--spkg-line);
  color: var(--spkg-gold);
}

.spkg-title {
  margin: 0;
  font-family: var(--spkg-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--spkg-text);
}

.spkg-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  color: var(--spkg-gold);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.spkg-more:hover { color: #fff; text-decoration: none; }
.spkg-more svg { margin-top: 1px; }

.spkg-nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}

.spkg-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .65);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.spkg-arrow:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ---------- scrolling track ---------- */
.spkg-track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 2px 2px 6px;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.spkg-track::-webkit-scrollbar { display: none; }
.spkg-track > li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }

/* ---------- tile ---------- */
.spkg-tile {
  display: block;
  width: 176px;
  text-decoration: none;
}
.spkg-tile:hover { text-decoration: none; }

.spkg-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--spkg-line);
  border-radius: 14px;
  background: var(--spkg-tile);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.spkg-tile:hover .spkg-thumb,
.spkg-tile:focus-visible .spkg-thumb {
  border-color: var(--spkg-line-hi);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(2, 6, 32, .5);
}

/* oikea pikkukuva tayttaa ruudun kun <img> on paikallaan */
.spkg-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
/* piilota tekstivaraus heti kun kuva on olemassa */
.spkg-thumb img ~ .spkg-thumb__txt { display: none; }

/* tekstivaraus: nakyy kunnes oikea kuva lisataan */
.spkg-thumb__txt {
  position: relative;
  z-index: 1;
  font-family: var(--spkg-display);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* kahdeksan varivaihtoehtoa, jotta rivi ei nayta yksitoikkoiselta */
.spkg-thumb--1 { background: linear-gradient(150deg, #6b3fa8, #33206e); }
.spkg-thumb--2 { background: linear-gradient(150deg, #1f6f8b, #0d3350); }
.spkg-thumb--3 { background: linear-gradient(150deg, #c2436b, #6b1b3c); }
.spkg-thumb--4 { background: linear-gradient(150deg, #c98a1e, #6d4409); }
.spkg-thumb--5 { background: linear-gradient(150deg, #2b56c6, #12266e); }
.spkg-thumb--6 { background: linear-gradient(150deg, #1f8b6c, #0b3f31); }
.spkg-thumb--7 { background: linear-gradient(150deg, #a3417c, #4d1a3b); }
.spkg-thumb--8 { background: linear-gradient(150deg, #c25a2e, #6a2a11); }

/* pehmea kiilto, sama kaikissa */
.spkg-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 12%, rgba(255, 255, 255, .18), transparent 70%);
  pointer-events: none;
}

.spkg-name,
.spkg-prov {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spkg-name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--spkg-text);
}
.spkg-prov {
  font-size: .87rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--spkg-muted);
}

/* ---------- responsiivisuus ---------- */
@media (max-width: 900px) {
  .spkg-section { padding-top: 34px; }
  .spkg-row + .spkg-row { margin-top: 34px; }
  .spkg-track { gap: 16px; }
  .spkg-tile { width: 152px; }
}

@media (max-width: 640px) {
  .spkg-section { padding: 26px 0 4px; }
  .spkg-inner { padding: 0 16px; }
  .spkg-row + .spkg-row { margin-top: 28px; }

  /* nuolet pois: rivi on jo swipeattava */
  .spkg-nav { display: none; }
  .spkg-head { gap: 10px; margin-bottom: 14px; }
  .spkg-more { margin-left: auto; }
  .spkg-icon { width: 32px; height: 32px; border-radius: 9px; }

  .spkg-track { gap: 12px; }
  .spkg-tile { width: 132px; }
  .spkg-thumb { border-radius: 12px; margin-bottom: 9px; }
  .spkg-thumb__txt { font-size: .8rem; }
  .spkg-name { font-size: .89rem; }
  .spkg-prov { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .spkg-track { scroll-behavior: auto; }
  .spkg-thumb { transition: none; }
  .spkg-tile:hover .spkg-thumb { transform: none; }
}


/* ==========================================================================
   Spinokkio - etusivun sisaltoosio
   Rakentuu sivuston olemassa olevan .prose-tyylin paalle, joten typografia,
   varit ja valistykset tulevat suoraan teemasta. Vain H1 ja lukulistat
   maaritellaan tassa, scopetettuna .spkx- etuliitteella.
   ========================================================================== */

.spkx-article { max-width: 820px; }

.spkx-article h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.16;
  margin: 0 0 1.4rem;
  color: var(--white);
}

/* ensimmainen kappale johdattaa sivuun, siksi hieman suurempi */
.spkx-article h1 + p {
  font-size: 1.05rem;
  line-height: 1.68;
  color: var(--muted);
}

/* numeroidut vaiheet erottuvat leipatekstista */
.spkx-article ol {
  counter-reset: spkx-step;
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.2rem;
}
.spkx-article ol > li {
  position: relative;
  padding-left: 42px;
  margin-bottom: .7rem;
  color: var(--muted);
}
.spkx-article ol > li::before {
  counter-increment: spkx-step;
  content: counter(spkx-step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 210, 87, .14);
  border: 1px solid rgba(255, 210, 87, .4);
  color: var(--gold-400);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .85rem;
  line-height: 1;
}

.spkx-article ul { padding-left: 1.15rem; }
.spkx-article ul > li::marker { color: var(--gold-400); }

@media (max-width: 640px) {
  .spkx-article h1 + p { font-size: 1rem; }
  .spkx-article ol > li { padding-left: 36px; }
  .spkx-article ol > li::before { width: 23px; height: 23px; font-size: .8rem; }
}

/* hyvat / huonot puolet: nimetyt kohdat erottuvat kappaleista */
.spkx-article .spkx-point {
  margin: 1.5rem 0 .4rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--white);
}
.spkx-article .spkx-point + p { margin-top: 0; }

/* sivun oma usein kysytyt -osio kayttaa sivuston olemassa olevaa haitaria */
.spkx-faq { max-width: none; margin-top: 1.2rem; }

/* laskuesimerkki erottuu leipatekstista, mutta pysyy sivuston varimaailmassa */
.spkx-example {
  margin: 1.4rem 0;
  padding: 20px 22px;
  border: 1px solid rgba(255, 210, 87, .34);
  border-left: 3px solid var(--gold-400);
  border-radius: var(--radius);
  background: rgba(245, 189, 24, .07);
}
.spkx-example p { margin-bottom: .7rem; }
.spkx-example p:last-child { margin-bottom: 0; }
.spkx-example__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.spkx-example__calc {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  .spkx-example { padding: 16px 16px; }
  .spkx-example__calc { font-size: 1.08rem; }
}

/* bonussanasto: termi ja selitys, samassa rytmissa kuin muut nostot */
.spkx-gloss { margin: 1.2rem 0 0; }
.spkx-gloss dt {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--gold-400);
}
.spkx-gloss dd {
  margin: .3rem 0 0;
  font-size: .95rem;
  line-height: 1.62;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Nostolaatikko: yksi ainoa korostettu osio etusivun artikkelissa.
   Kaytossa vain kohdassa "Mitka ovat Spinokkion hyvat ja huonot puolet?",
   joka on sivun sisallon puolivali. Ei muualla, ei muilla sivuilla.
   -------------------------------------------------------------------------- */
.spkx-article .spkx-box {
  margin: 2.8rem 0;
  padding: 34px 38px 30px;
  border: 1px solid rgba(255, 210, 87, .28);
  border-radius: 22px;
  background:
    linear-gradient(168deg, rgba(28, 56, 148, .96), rgba(12, 26, 84, .97));
  box-shadow: 0 20px 46px rgba(4, 10, 45, .42);
}

/* laatikon oma otsikko ei tarvitse artikkelin valiviivaa */
.spkx-article .spkx-box > h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.spkx-article .spkx-box > :last-child { margin-bottom: 0; }

/* kultainen aksentti erottaa laatikon leipatekstista ilman uutta varia */
.spkx-article .spkx-box > h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin-top: .8rem;
  border-radius: 3px;
  background: var(--gold-400);
}

/* hyvat / huonot puolet erottuvat laatikon sisalla */
.spkx-article .spkx-box .spkx-point { margin-top: 1.7rem; }
.spkx-article .spkx-box .spkx-point:first-of-type { margin-top: 1.4rem; }

@media (max-width: 720px) {
  .spkx-article .spkx-box { padding: 26px 22px 24px; border-radius: 18px; margin: 2.2rem 0; }
}
@media (max-width: 420px) {
  .spkx-article .spkx-box { padding: 22px 17px 20px; border-radius: 16px; }
}

/* --------------------------------------------------------------------------
   Artikkelin kuvituskuva. Leveys seuraa tekstipalstaa, ei venyta ulos siita.
   -------------------------------------------------------------------------- */
.spkx-article .spkx-figure {
  margin: 1.6rem 0 1.8rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 16px 36px rgba(4, 10, 45, .34);
  background: var(--blue-900);
}
.spkx-article .spkx-figure img {
  display: block;
  width: 100%;
  height: auto;
}
/* laatikon sisalla reunat ovat jo pyoristetyt, pidetaan mittasuhde samana */
.spkx-article .spkx-box .spkx-figure { margin-left: 0; margin-right: 0; }

@media (max-width: 720px) {
  .spkx-article .spkx-figure { border-radius: 14px; margin: 1.3rem 0 1.5rem; }
}


/* ---- yhden tiedoston reititys: nakyvissa on aina tasan yksi sivu ---- */
.route[hidden] { display: none !important; }
.route { display: block; }

.route[hidden]{display:none!important} .restored-bonus-figure{margin:24px 0}.restored-bonus-figure img{display:block;width:100%;height:auto}.prose [id]{scroll-margin-top:100px}
/* Functional fixes; original visual design retained. */
[hidden]{display:none!important}
h1.hero__h1{font-family:var(--font-body);font-weight:400;line-height:1.6;letter-spacing:normal;color:var(--muted);max-width:580px;margin-inline:auto}
.spkx-article h2.content-title{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.16;margin:0 0 1.4rem;color:var(--white);border:0;padding:0}
.spkx-article h2.content-title+p{font-size:1.05rem;line-height:1.68;color:var(--muted)}
@media(max-width:640px){.spkx-article h2.content-title+p{font-size:1rem}}
@media(max-width:1180px){.main-nav:not(.is-open){visibility:hidden;pointer-events:none}.main-nav.is-open{visibility:visible;pointer-events:auto}}
@media(prefers-reduced-motion:reduce){html,*{scroll-behavior:auto!important}}
/* Home-only FAQ and reference image heading; reuse existing cards and accordion. */
#home-faq, #home-faq [id] { scroll-margin-top: 110px; }
#kokemuksia { scroll-margin-top: 90px; }
#kokemuksia .testimonial-disclosure { font-size: .82rem; margin-top: .8rem; color: var(--muted); }
.testimonial-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; }
.testimonial-quote-mark { font-family: Georgia, serif; font-size: 3.5rem; height: 40px; line-height: 1; color: var(--gold-400); }
.testimonial-example { color: var(--muted); font-size: .72rem; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; }
#kokemuksia .spkt-card__title::before, #kokemuksia .spkt-card__title::after, #kokemuksia .spkt-author::before { content: none; }
#kokemuksia .spkt-quote { border: 0; padding: 0; margin: 0 0 22px; flex: 1; }
#kokemuksia .spkt-author { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); margin-top: auto; }
.testimonial-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,210,87,.12); border: 1px solid rgba(255,210,87,.35); color: var(--gold-400); font-weight: 800; }
.testimonial-location { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: 2px; }
.spkx-article h2.image-style-heading { text-align: center; border: 0; padding: 0; }
.image-style-heading__brand { display: block; color: var(--gold-400); font-size: clamp(1.8rem, 4vw, 3rem); text-shadow: 0 2px 0 #b95208, 0 4px 0 #712040, 0 6px 12px rgba(0,0,0,.4); margin-bottom: .35em; }
.image-style-heading__question { display: block; color: #faf4ff; text-shadow: 0 2px 0 #8540bd, 0 4px 8px rgba(73,21,126,.55); }