/* CasinoScouters design system. Mobile first. Tokens first, then base, components, sections. */
:root {
  --forest: #10231e;
  --forest-2: #172b25;
  --forest-3: #21392f;
  --green: #178557;
  --green-deep: #126b46;
  --mint: #83e7ae;
  --paper: #f7f9f6;
  --paper-2: #ebf0ea;
  --ink: #10231e;
  --ink-soft: #46584f;
  --on-dark: #f7f9f6;
  --on-dark-soft: #b9c9c0;
  --line: #d5ddd6;
  --line-dark: #2f4a3f;
  --danger: #b3261e;
  --danger-on-dark: #ffb4a9;

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem; --s9: 7rem;
  --r-control: 10px;
  --r-panel: 16px;
  --wrap: 72rem;
  --gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; font: 400 1.0625rem/1.55 var(--sans); color: var(--ink); background: var(--paper); overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible, .doc :focus-visible, .state :focus-visible { outline-color: var(--green); }
.final :focus-visible, .preview :focus-visible { outline-color: var(--mint); }

h1, h2, h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 9.6vw, 4.4rem); letter-spacing: -0.04em; line-height: 0.98; }
h2 { font-size: clamp(1.75rem, 6vw, 2.75rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; line-height: 1.2; }
.lead { font: 400 1.25rem/1.5 var(--serif); max-width: 38em; text-wrap: pretty; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 44rem; }
.skip { position: absolute; left: var(--s3); top: -4rem; z-index: 20; background: var(--mint); color: var(--ink); padding: var(--s2) var(--s4); border-radius: var(--r-control); font-weight: 700; }
.skip:focus { top: var(--s3); }
.no-js .js-only { display: none; }
.todo { background: #fff2c2; color: #5c4400; padding: 0 0.3em; border-radius: 3px; font-family: var(--sans); font-size: 0.85em; }

/* Header */
.site-header { background: var(--forest); color: var(--on-dark); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line-dark); }
.bar { display: flex; align-items: center; gap: var(--s3); min-height: 3.5rem; }
.logo { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.02em; text-decoration: none; color: inherit; }
.logo b { font-weight: 800; }
.logo-mark { flex: none; }
.ca { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--on-dark-soft); }
.ca span { display: none; }
.site-header nav { display: none; margin-left: auto; gap: var(--s5); font-size: 0.95rem; }
.site-header nav a, .lang { text-decoration: none; padding: var(--s2) 0; }
.site-header nav a:hover, .lang:hover { text-decoration: underline; }
.lang { margin-left: auto; font-size: 0.9rem; font-weight: 700; padding: var(--s3) var(--s2); }
@media (min-width: 48rem) {
  .ca span { display: inline; }
  .site-header nav { display: flex; }
  .lang { margin-left: var(--s4); border-left: 1px solid var(--line-dark); padding-left: var(--s5); }
}

/* Buttons */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: var(--s2); min-height: 3rem; padding: 0.7rem 1.4rem; border: 0; border-radius: var(--r-control); background: var(--mint); color: var(--ink); font: 800 1rem/1.2 var(--sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, background-color 0.12s ease; }
.btn:hover { background: #a3f0c4; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.65; cursor: progress; }
.btn-lg { width: 100%; min-height: 3.5rem; font-size: 1.1rem; }
.btn-quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-quiet:hover { background: rgb(23 133 87 / 0.1); }
.doc .btn:not(.btn-quiet), .state .btn:not(.btn-quiet), .on-light .btn { background: var(--green-deep); color: #fff; }
.doc .btn:not(.btn-quiet):hover, .state .btn:not(.btn-quiet):hover, .on-light .btn:hover { background: var(--green); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* Signup form (designed for dark surfaces; .on-light flips it) */
.signup { display: grid; gap: var(--s4); max-width: 30rem; }
.field { display: grid; gap: 0.4rem; }
.field > label:not(.check) { font-size: 0.9rem; font-weight: 700; }
.signup input[type="email"], .signup select { width: 100%; min-height: 3.5rem; padding: 0.75rem 1rem; border: 1.5px solid transparent; border-radius: var(--r-control); background: var(--paper); color: var(--ink); font: 500 1.0625rem/1.3 var(--sans); appearance: none; }
.signup select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2310231e' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; padding-right: 2.5rem; }
.signup input::placeholder { color: #7a8a81; }
.signup input:focus-visible, .signup select:focus-visible { outline-offset: 2px; }
.signup [aria-invalid="true"] { border-color: var(--danger-on-dark); }
.check { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s3); align-items: start; font-size: 0.95rem; line-height: 1.4; cursor: pointer; padding-block: 0.3rem; }
.check input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--green); cursor: pointer; }
.disclosure { font-size: 0.8rem; line-height: 1.45; color: var(--on-dark-soft); padding-left: 2.25rem; }
.err, .form-error { color: var(--danger-on-dark); font-size: 0.9rem; font-weight: 500; }
.form-ok { color: var(--green-deep); font-weight: 700; }
.micro { font-size: 0.875rem; color: var(--on-dark-soft); }
.more { display: grid; gap: var(--s4); }
.js .signup:not(.is-open) .more { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.on-light.signup input[type="email"], .on-light.signup select { background: #fff; border-color: var(--line); }
.on-light .err, .on-light .form-error { color: var(--danger); }
.on-light .disclosure, .on-light .micro { color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .js .signup.is-open .more { animation: open 0.28s ease-out; }
  @keyframes open { from { opacity: 0; transform: translateY(-6px); } }
}

/* Hero */
.hero { background: var(--forest); color: var(--on-dark); padding-block: var(--s6) var(--s7); }
.hero-grid { display: grid; gap: var(--s7); }
.hero-copy { display: grid; gap: var(--s4); align-content: start; }
.eyebrow { font-size: 0.9rem; font-weight: 700; color: var(--mint); }
.sub { font: 400 1.2rem/1.45 var(--serif); color: var(--on-dark-soft); max-width: 31em; margin-bottom: var(--s2); }
@media (min-width: 62rem) {
  .hero { padding-block: var(--s8) var(--s9); }
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s8); align-items: center; }
  .hero-copy { gap: var(--s5); }
  .sub { font-size: 1.35rem; }
}

/* The slip: the brand's signature. A bonus's fine print, printed as a plain receipt. */
.slip { --notch: 0.55rem; justify-self: center; width: 100%; max-width: 23rem; background: var(--paper); color: var(--ink); padding: var(--s6) var(--s5) var(--s5); font-family: var(--serif); transform: rotate(-1.5deg); box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.55);
  -webkit-mask: radial-gradient(circle at var(--notch) 0, #0000 calc(var(--notch) - 1px), #000 var(--notch)) calc(-1 * var(--notch)) 0 / calc(2 * var(--notch)) 100%;
          mask: radial-gradient(circle at var(--notch) 0, #0000 calc(var(--notch) - 1px), #000 var(--notch)) calc(-1 * var(--notch)) 0 / calc(2 * var(--notch)) 100%; }
.slip-title { font: 800 0.95rem/1.2 var(--sans); letter-spacing: -0.01em; color: var(--green-deep); }
.slip-offer { font-size: 1.6rem; line-height: 1.15; font-weight: 500; margin-block: var(--s3) var(--s4); padding-bottom: var(--s4); border-bottom: 1.5px dashed var(--ink-soft); }
.slip dl > div { display: flex; justify-content: space-between; gap: var(--s4); padding-block: 0.45rem; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.3; }
.slip dt { color: var(--ink-soft); flex: 0 0 42%; }
.slip dd { text-align: right; font-weight: 500; }
.slip dl > div:nth-child(2) { background: #dff7e9; margin-inline: calc(-1 * var(--s3)); padding-inline: var(--s3); border-bottom-color: transparent; }
.slip dl > div:nth-child(2) dd { font-weight: 500; color: var(--green-deep); }
.slip-tag { margin-top: var(--s4); font: 500 0.78rem/1.3 var(--sans); color: var(--ink-soft); }

/* Bands */
.band { padding-block: var(--s8); }
.band h2 { margin-bottom: var(--s5); max-width: 18em; }
.band .lead { margin-bottom: var(--s6); color: var(--ink-soft); }
@media (min-width: 62rem) { .band { padding-block: var(--s9); } }

.why-list li { display: grid; gap: var(--s2); padding-block: var(--s5); border-top: 1px solid var(--line); }
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-list p { font: 400 1.15rem/1.5 var(--serif); color: var(--ink-soft); max-width: 36em; }
@media (min-width: 48rem) {
  .why-list li { grid-template-columns: 18rem 1fr; gap: var(--s6); align-items: baseline; padding-block: var(--s6); }
  .why-list h3 { font-size: 1.45rem; }
}

.how { background: var(--paper-2); }
.steps { counter-reset: step; display: grid; gap: var(--s6); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--s4); row-gap: var(--s1); }
.steps li::before { content: counter(step); grid-row: span 2; font: 800 3rem/0.9 var(--sans); letter-spacing: -0.05em; color: var(--green); }
.steps p { color: var(--ink-soft); grid-column: 2; }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s7); }
  .steps li { grid-template-columns: 1fr; row-gap: var(--s3); }
  .steps li::before { font-size: 4.5rem; grid-row: auto; }
  .steps p { grid-column: 1; }
}

.preview { background: var(--forest-2); color: var(--on-dark); }
.preview .lead { color: var(--on-dark-soft); margin-bottom: var(--s4); }
.note { font-size: 0.875rem; color: var(--on-dark-soft); border-left: 2px solid var(--mint); padding-left: var(--s3); max-width: 32em; }
.preview-grid { display: grid; gap: var(--s6); }
.mail { background: var(--paper); color: var(--ink); border-radius: var(--r-panel); overflow: hidden; max-width: 30rem; width: 100%; justify-self: center; box-shadow: 0 2rem 4rem -1.5rem rgb(0 0 0 / 0.6); }
.mail-top { display: grid; gap: 0.2rem; padding: var(--s4) var(--s5); background: #fff; border-bottom: 1px solid var(--line); }
.mail-from { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 800; font-size: 0.9rem; }
.mail-from .logo-mark { width: 1.1rem; height: 1.1rem; color: var(--green-deep); }
.mail-subject { font-size: 0.95rem; color: var(--ink-soft); }
.mail-body { padding: var(--s5); display: grid; gap: var(--s3); font: 400 1.02rem/1.5 var(--serif); }
.mail-issue { font: 500 0.8rem var(--sans); color: var(--ink-soft); }
.kicker { font: 800 0.82rem var(--sans); color: var(--green-deep); margin-top: var(--s2); }
.mail-h { font: 800 1.3rem/1.15 var(--sans); letter-spacing: -0.025em; }
.mail hr { border: 0; border-top: 1px solid var(--line); margin: var(--s2) 0; width: 100%; }
.terms { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.terms > div { display: flex; justify-content: space-between; gap: var(--s4); padding: 0.55rem 0.85rem; font-size: 0.95rem; }
.terms > div + div { border-top: 1px solid var(--line); }
.terms dt { color: var(--ink-soft); }
.terms dd { font-weight: 500; text-align: right; }
.mail-small { font: 400 0.8rem/1.45 var(--sans); color: var(--ink-soft); }
.mail-foot { font: 400 0.75rem/1.45 var(--sans); color: #6f7f76; border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s2); }
@media (min-width: 62rem) {
  .preview-grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--s8); align-items: center; }
  .mail { justify-self: end; }
}

.checks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.checks > div { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: var(--s3); padding-block: var(--s4); border-bottom: 1px solid var(--line); }
.checks > div::before { content: ""; grid-row: span 2; width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 6.2 2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 0.75rem no-repeat; }
.checks dt { font-weight: 800; letter-spacing: -0.015em; }
.checks dd { color: var(--ink-soft); grid-column: 2; }
@media (min-width: 56rem) { .checks { grid-template-columns: 1fr 1fr; column-gap: var(--s7); } }

.faq { background: var(--paper-2); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-block: var(--s4); min-height: 3.5rem; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--green-deep); border-bottom: 2px solid var(--green-deep); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { font: 400 1.1rem/1.55 var(--serif); color: var(--ink-soft); padding-bottom: var(--s5); max-width: 36em; }

.final { background: var(--forest); color: var(--on-dark); }
.final .lead { color: var(--on-dark-soft); margin-bottom: var(--s5); }
.layout-short [data-section="why"], .layout-short [data-section="how"], .layout-short [data-section="preview"], .layout-short [data-section="editorial"] { display: none; }

/* Documents and state pages */
.doc, .state { padding-block: var(--s7) var(--s8); }
.doc h1, .state h1 { font-size: clamp(2rem, 7vw, 3.25rem); margin-bottom: var(--s5); }
.doc h2 { font-size: 1.4rem; margin-top: var(--s7); margin-bottom: var(--s3); letter-spacing: -0.02em; }
.doc p, .doc li, .state li { font: 400 1.15rem/1.6 var(--serif); }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: var(--s4); }
.doc ul, .state ul { list-style: disc; padding-left: 1.3em; display: grid; gap: var(--s2); }
.doc .lead, .state .lead { font-size: 1.35rem; line-height: 1.45; }
.doc a, .state a:not(.btn) { color: var(--green-deep); }
.notice { background: #fff6d6; border-left: 3px solid #c79a00; padding: var(--s3) var(--s4); font: 500 0.95rem/1.45 var(--sans) !important; color: #4a3a00; margin-block: var(--s4); border-radius: 0 6px 6px 0; }
.state { min-height: 60vh; }
.state .wrap > div, .state .wrap { display: grid; gap: var(--s5); align-content: start; justify-items: start; }
.state [hidden] { display: none !important; }
.state form { width: 100%; max-width: 26rem; }

/* Footer */
.site-footer { background: #0b1915; color: var(--on-dark-soft); padding-block: var(--s7); font-size: 0.9rem; }
.site-footer .logo { color: var(--on-dark); margin-bottom: var(--s3); }
.foot-top { display: grid; gap: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--line-dark); }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s5); }
.foot-links a, .foot-links button { display: inline-block; padding-block: 0.55rem; text-align: left; }
.foot-legal { display: grid; gap: var(--s3); padding-top: var(--s6); max-width: 56rem; line-height: 1.5; }
.foot-legal strong { color: var(--on-dark); font-weight: 700; }
@media (min-width: 56rem) { .foot-top { grid-template-columns: 1fr 1.6fr; } .foot-links { grid-template-columns: repeat(3, 1fr); } }

/* Cookie choices */
.cookie { position: fixed; inset: auto var(--s3) var(--s3) var(--s3); z-index: 30; max-width: 30rem; margin-inline: auto 0; background: #fff; color: var(--ink); border-radius: var(--r-panel); padding: var(--s5); box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.35); display: grid; gap: var(--s3); font-size: 0.95rem; }
.cookie[hidden] { display: none; }
.cookie h2 { font-size: 1.15rem; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.cookie .btn { min-height: 2.75rem; padding-inline: 1rem; font-size: 0.9rem; flex: 1 1 auto; }
.cookie .btn:not(.btn-quiet) { background: var(--green-deep); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .slip { transform: none; }
}
.logo-img { display: block; height: 30px; width: auto; max-width: 62vw; }
.logo-mail { display: block; height: 22px; width: auto; }
@media (max-width: 380px) { .logo-img { height: 26px; } }