/* ============================================================
   Debanked.se — Nordhelm Capital Group
   Design system: calm cool slate / navy, serene & trustworthy
   ============================================================ */

:root {
  /* Surfaces — cool off-whites */
  --bg:            oklch(0.975 0.004 240);
  --bg-soft:       oklch(0.955 0.006 240);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.985 0.004 240);

  /* Ink — navy/slate */
  --ink:           oklch(0.30 0.035 248);
  --ink-2:         oklch(0.44 0.030 248);
  --muted:         oklch(0.58 0.024 248);
  --faint:         oklch(0.72 0.018 248);

  /* Accent — calm deep blue */
  --accent:        oklch(0.50 0.075 248);
  --accent-deep:   oklch(0.42 0.078 250);
  --accent-soft:   oklch(0.92 0.025 246);
  --accent-tint:   oklch(0.965 0.012 246);

  /* Warm sand — a single warm note for serenity */
  --sand:          oklch(0.93 0.022 80);
  --sand-ink:      oklch(0.48 0.05 70);

  /* Lines */
  --line:          oklch(0.91 0.008 246);
  --line-strong:   oklch(0.85 0.012 246);

  /* Feedback */
  --ok:            oklch(0.58 0.09 155);
  --ok-soft:       oklch(0.95 0.03 155);

  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     26px;
  --shadow-sm:     0 1px 2px oklch(0.40 0.04 248 / 0.06), 0 1px 1px oklch(0.40 0.04 248 / 0.04);
  --shadow-md:     0 4px 16px oklch(0.40 0.04 248 / 0.07), 0 1px 3px oklch(0.40 0.04 248 / 0.05);
  --shadow-lg:     0 24px 60px oklch(0.40 0.04 248 / 0.12), 0 6px 18px oklch(0.40 0.04 248 / 0.07);

  --maxw:          1140px;
  --serif:         "Newsreader", Georgia, serif;
  --sans:          "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

::selection { background: var(--accent-soft); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 0; }

p { margin: 0; }

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

button { font-family: inherit; cursor: pointer; border: none; background: none; }

input, textarea, select { font-family: inherit; font-size: inherit; color: var(--ink); }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 14px 26px; border-radius: 999px;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 18px oklch(0.50 0.075 248 / 0.28); }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 12px 26px oklch(0.50 0.075 248 / 0.34); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-deep); }
.btn-quiet { padding: 12px 18px; color: var(--ink-2); font-weight: 600; }
.btn-quiet:hover { color: var(--accent-deep); }
.btn-lg { padding: 17px 34px; font-size: 17px; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Eyebrow / pills ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); display: inline-block; }
.eyebrow.center::before { display: none; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.field .req { color: var(--accent); }
.input, .textarea, .selectbox {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 15.5px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:focus, .textarea:focus, .selectbox:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 110px; line-height: 1.5; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.kicker-num { font-family: var(--serif); font-size: 15px; color: var(--accent); font-weight: 500; }

@keyframes floatUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.rise { animation: floatUp .7s cubic-bezier(.22,.61,.36,1) both; }

/* affiliate range slider */
.aff-range { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: var(--accent-soft); outline: none; }
.aff-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 999px; background: var(--accent); border: 4px solid #fff; box-shadow: 0 3px 10px oklch(0.5 0.075 248 / 0.4); cursor: pointer; }
.aff-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 999px; background: var(--accent); border: 4px solid #fff; box-shadow: 0 3px 10px oklch(0.5 0.075 248 / 0.4); cursor: pointer; }

/* affiliate table rows */
.aff-row { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr 1.1fr; gap: 14px; align-items: center; padding: 15px 22px; font-size: 14.5px; }
.aff-head { background: var(--surface-2); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--faint); }