/* ==========================================================================
   Fraudex — style.css
   Concept: every request gets a verdict. Cool cheque-paper ground, navy ink,
   and red reserved for the one thing that matters: a flag. The only loud
   element on the site is the verdict slip + stamp on the homepage.
   Class names are shared by every template — rename nothing here without
   grepping templates/.
   ========================================================================== */

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

:root {
  /* paper & ink */
  --bg:      #E9EDF1;   /* page: cool security-paper grey */
  --s1:      #FFFFFF;   /* slips, cards */
  --s2:      #F3F5F8;   /* inset fields */
  --s3:      #DCE2EA;   /* tracks, hover */
  --border:  #C9D1DC;
  --border2: #A9B4C4;
  --text:    #1C2B4B;   /* cheque-ink navy */
  --t2:      #4F5C77;
  --t3:      #6C7891;
  --accent:  #1C2B4B;   /* actions are ink, not colour */
  --accent-h:#2E4170;
  /* verdicts */
  --red:     #C8232C;   /* stamp red: flagged */
  --green:   #1D7A4C;   /* clean */
  --yellow:  #9A6200;
  --r:       6px;

  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type: 'Courier Prime', 'Courier New', ui-monospace, monospace;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
code { font-family: var(--type); font-size: .95em; background: var(--s2); padding: 1px 5px; border-radius: 3px; }
pre code { background: none; padding: 0; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 2px; }
::selection { background: rgba(200, 35, 44, .18); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text);
}
.logo b { font-weight: inherit; color: var(--red); }
.logo-icon { width: 26px; height: 26px; display: block; flex-shrink: 0; }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links .nav-link {
  color: var(--t2);
  padding: 6px 11px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
}
.nav-links .nav-link:hover { color: var(--text); background: var(--s3); }
.nav-links .btn { margin-left: 8px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 15px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  line-height: 1.45;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--text); color: #fff; border-color: var(--text); }
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); }

.btn-outline,
.btn-secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover,
.btn-secondary:hover { background: var(--s1); }

.btn-ghost { background: transparent; color: var(--t2); }
.btn-ghost:hover { color: var(--text); background: var(--s3); }

.btn-lg    { padding: 11px 20px; font-size: 15px; }
.btn-block { width: 100%; }

/* ── Toasts ──────────────────────────────────────────────────────── */
.flash-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  display: flex; flex-direction: column; gap: 8px; max-width: 340px;
}
.flash {
  padding: 11px 16px;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 500;
  background: var(--s1);
  border: 1px solid var(--border);
  border-left: 4px solid;
  box-shadow: 0 6px 24px rgba(28, 43, 75, .14);
}
.flash-success { border-left-color: var(--green); color: var(--text); }
.flash-error   { border-left-color: var(--red);   color: var(--text); }

/* ── Homepage hero: headline + verdict slip ──────────────────────── */
.hero { padding: 72px 0 88px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(40px, 6.4vw, 78px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.045em;
  margin-bottom: 24px;
  color: var(--text);
}
.hero p {
  font-size: 18px;
  color: var(--t2);
  max-width: 34em;
  margin-bottom: 32px;
  line-height: 1.55;
}
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }

/* The slip: a printed receipt for the visitor's own connection */
.slip-wrap { position: relative; justify-self: center; width: 100%; max-width: 360px; }
.slip {
  position: relative;
  background: var(--s1);
  font-family: var(--type);
  font-size: 14px;
  color: var(--text);
  padding: 26px 26px 104px;
  box-shadow: 0 1px 0 var(--border), 0 18px 40px -18px rgba(28, 43, 75, .35);
  /* torn zig-zag bottom edge */
  --tooth: 10px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tooth)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--tooth)) 100%;
  transform: rotate(1.2deg);
}
.slip-head { text-align: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--border2); }
.slip-head strong { display: block; font-size: 16px; letter-spacing: .02em; }
.slip-head small { color: var(--t3); font-size: 12px; }
.slip-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.slip-row dt { color: var(--t3); }
.slip-row dd { text-align: right; overflow-wrap: anywhere; }
.slip-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border2); color: var(--t3); font-size: 12px; }

.stamp {
  position: absolute;
  right: 22px;
  bottom: 30px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border: 4px double currentColor;
  border-radius: 6px;
  transform: rotate(-11deg);
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.stamp.clean   { color: var(--green); }
.stamp.flagged { color: var(--red); }
.stamp.down    { animation: stamp .42s cubic-bezier(.2, .9, .3, 1.25) forwards; }
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(-11deg) scale(2.4); }
  60%  { opacity: .92; transform: rotate(-11deg) scale(.94); }
  100% { opacity: .88; transform: rotate(-11deg) scale(1); }
}
.slip-note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--t3); }

/* ── Code block (styled as printed output) ───────────────────────── */
.code-block {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px 18px;
  font-family: var(--type);
  font-size: 13.5px;
  text-align: left;
  max-width: 640px;
  margin: 0 auto;
  overflow-x: auto;
}
.code-label {
  display: block;
  font-size: 13px;
  color: var(--t3);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border2);
  font-family: var(--type);
}
.code-block pre { white-space: pre; line-height: 1.65; }
.ck { color: var(--text); font-weight: 700; }
.cs { color: #3B5A8C; }
.cn { color: var(--yellow); }
.cv { color: var(--red); }
.cc { color: var(--t3); }

/* ── Sections ────────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); }
.section { padding: 80px 0; }
.section + .section { border-top: 1px solid var(--border); }

/* Small lead-in line above a heading: sentence case, quiet */
.section-label { font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 6px; }

.section-title { margin-bottom: 40px; max-width: 640px; }
.section-title h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 10px; }
.section-title p  { color: var(--t2); font-size: 16px; }

/* ── The three checks: a ledger, not cards ───────────────────────── */
.ledger { border-top: 2px solid var(--text); }
.ledger-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) minmax(0, 300px);
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.ledger-row .ep { font-family: var(--type); font-weight: 700; font-size: 16px; padding-top: 3px; }
.ledger-row h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 6px; line-height: 1.2; }
.ledger-row p { color: var(--t2); max-width: 38em; }
.ledger-row .answer {
  font-family: var(--type);
  font-size: 13.5px;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  line-height: 1.6;
}
.answer .flag  { color: var(--red); font-weight: 700; }
.answer .clean { color: var(--green); font-weight: 700; }

/* ── Steps (a real sequence, so numbered) ────────────────────────── */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.steps li { counter-increment: step; border-top: 2px solid var(--text); padding-top: 16px; }
.steps li::before { content: counter(step); display: block; font-weight: 800; font-size: 28px; letter-spacing: -0.04em; margin-bottom: 8px; }
.steps h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.steps p { color: var(--t2); font-size: 14px; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.faq { max-width: 760px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  font-weight: 600;
  font-size: 16px;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 14px; font-size: 22px; font-weight: 400; color: var(--t3); }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--t2); padding: 0 0 20px; max-width: 42em; }

/* ── Closing call to action ──────────────────────────────────────── */
.closing { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.closing h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; max-width: 14em; }

/* ── Legacy feature grid (other pages) ───────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-3 > .feature { border-top: 2px solid var(--text); padding-top: 16px; }
.feature-icon { display: none; }
.feature h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.feature p  { font-size: 14px; color: var(--t2); line-height: 1.6; }

/* ── Stats row ───────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat-item { border-top: 2px solid var(--text); padding-top: 14px; }
.stat-val { font-size: 34px; font-weight: 800; letter-spacing: -0.045em; color: var(--text); line-height: 1.1; margin-bottom: 4px; }
.stat-lbl { font-size: 14px; color: var(--t2); }

/* ── Cards ───────────────────────────────────────────────────────── */
.card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; }

/* ── Pricing ─────────────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1120px; margin: 0 auto; }
.plan-card { background: var(--s1); border: 1px solid var(--border); border-radius: var(--r); padding: 28px; }
.plan-card.featured { border: 2px solid var(--text); }
.plan-name  { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.plan-price { font-size: 44px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin-bottom: 4px; }
.plan-price sup { font-size: 20px; font-weight: 700; vertical-align: super; }
.plan-period { font-size: 14px; color: var(--t2); margin-bottom: 18px; }
.plan-desc { font-size: 14px; color: var(--t2); margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed var(--border2); }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.plan-features li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--t2); }
.plan-features li::before { content: '–'; color: var(--t3); flex-shrink: 0; }
.plan-card.featured .plan-features li::before { content: '✓'; color: var(--green); font-weight: 700; }

/* ── Auth forms ──────────────────────────────────────────────────── */
.auth-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 24px; }
.auth-card {
  background: var(--s1);
  border: 1px solid var(--border);
  border-top: 4px solid var(--text);
  border-radius: var(--r);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}
.auth-logo { margin-bottom: 4px; }
.auth-card h1, .auth-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
.auth-card .sub { color: var(--t2); font-size: 14px; margin-bottom: 24px; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.form-group input,
.form-group textarea,
.tester-input {
  width: 100%;
  background: var(--s2);
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--r);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .1s, background .1s;
}
.form-group textarea { resize: vertical; }
.form-group input:focus,
.form-group textarea:focus,
.tester-input:focus { border-color: var(--text); background: var(--s1); }
.form-group input::placeholder,
.form-group textarea::placeholder,
.tester-input::placeholder { color: var(--t3); }
.tester-input { font-family: var(--type); font-size: 14px; margin-bottom: 8px; }

.otp-input {
  font-family: var(--type) !important;
  font-size: 26px !important;
  letter-spacing: .3em;
  text-align: center;
  padding: 14px 12px !important;
}

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--t3); font-size: 13px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.auth-foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--t2); }
.auth-foot a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Dashboard ───────────────────────────────────────────────────── */
.dash { padding: 44px 0; flex: 1; }
.dash-title { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 2px; }
.dash-sub { font-size: 14px; color: var(--t2); margin-bottom: 32px; }
.dash-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: start; }

.section-heading { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 12px; }

.api-key-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--s2);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r);
  padding: 10px 12px;
}
.api-key-text {
  flex: 1;
  font-family: var(--type);
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-btn {
  background: var(--s1);
  border: 1.5px solid var(--text);
  color: var(--text);
  padding: 4px 11px;
  border-radius: var(--r);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  white-space: nowrap;
}
.copy-btn:hover { background: var(--s3); }
.copy-btn.copied { color: var(--green); border-color: var(--green); }

.bar-wrap { height: 6px; background: var(--s3); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.bar-fill { height: 100%; background: var(--text); border-radius: 3px; transition: width .4s ease; }
.bar-fill.low { background: var(--red); }

.kv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.kv-row:last-child { border-bottom: none; }
.kv-key   { color: var(--t2); }
.kv-value { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.plan-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 99px; border: 1.5px solid currentColor; }
.plan-tag.free     { color: var(--t2); }
.plan-tag.pro      { color: var(--text); }
.plan-tag.vip      { color: var(--yellow); }
.plan-tag.business { color: var(--red); }

.result-box {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--type);
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
  display: none;
  margin-top: 10px;
}

/* ── Inner page header ───────────────────────────────────────────── */
.page-header { padding: 64px 0 40px; border-bottom: 2px solid var(--text); margin-bottom: 56px; }
.page-header h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; margin-bottom: 10px; }
.page-header p  { color: var(--t2); font-size: 17px; max-width: 36em; }

/* ── Bank logo (BIN checker, /api/bin-logo) ──────────────────────── */
.bank-logo { display: block; width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 6px; margin-bottom: 14px; }

/* ── Blog ────────────────────────────────────────────────────────── */
.post-list { border-top: 2px solid var(--text); margin-bottom: 80px; }
.post-item { display: block; padding: 26px 0; border-bottom: 1px solid var(--border); }
.post-item h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 6px; }
.post-item p { color: var(--t2); max-width: 44em; margin-bottom: 8px; }
.post-item:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.post-meta { font-size: 13px; color: var(--t3); }

.post { max-width: 720px; padding-top: 56px; padding-bottom: 80px; }
.post-head { border-bottom: 2px solid var(--text); padding-bottom: 28px; margin-bottom: 36px; }
.post-back { display: inline-block; font-size: 14px; font-weight: 600; color: var(--red); margin-bottom: 14px; }
.post-back:hover { text-decoration: underline; }
.post-head h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; margin-bottom: 14px; }
.post-lede { font-size: 19px; color: var(--t2); line-height: 1.5; margin-bottom: 14px; }

.post-body { font-size: 17px; line-height: 1.75; }
.post-body p { margin-bottom: 18px; }
.post-body h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin: 40px 0 12px; }
.post-body ul { margin: 0 0 18px 22px; }
.post-body li { margin-bottom: 8px; }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: var(--red); }
.post-body .code-block { font-size: 14px; }

.post-cta {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  margin: 48px 0; padding: 24px; background: var(--s1);
  border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: var(--r);
}
.post-cta strong { display: block; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 4px; }
.post-cta p { color: var(--t2); font-size: 15px; max-width: 30em; }

.post-more h2 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.post-more a { display: block; padding: 12px 0; border-top: 1px solid var(--border); font-weight: 600; font-size: 17px; }
.post-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); padding: 40px 0 32px; color: var(--t2); font-size: 14px; margin-top: auto; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; align-items: start; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.footer small { display: block; margin-top: 8px; color: var(--t3); font-size: 13px; }

/* ── Misc ────────────────────────────────────────────────────────── */
.text-accent { color: var(--text); font-weight: 600; }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-muted  { color: var(--t2); }
.text-dim    { color: var(--t3); }
.mono        { font-family: var(--type); }

.notice {
  background: var(--s1);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text);
  border-radius: var(--r);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--t2);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .grid-3 { grid-template-columns: 1fr; }
  .stats  { grid-template-columns: repeat(2, 1fr); }
  .ledger-row { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 680px) {
  .dash-grid    { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .steps        { grid-template-columns: 1fr; }
  .hide-mobile  { display: none; }
  .section { padding: 56px 0; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .auth-card { padding: 24px 18px; }
  .hero { padding: 44px 0 64px; }
  .slip { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stamp.down { animation: none; opacity: .88; }
}