/* ============================================================
   SettlPay — marketing shell: "Candy Arcade" brand system
   (design/brand-kriz.md) with product mockups rendered in the
   dashboard system (DESIGN.md).
   ============================================================ */

:root {
  /* Candy Arcade — brand */
  --cream: #F9F6F1;
  --ink: #111111;
  --ink-warm: #3A3325;
  --charcoal: #303030;
  --panel-gray-blue: #DFE7F6;
  --navy: #072D53;
  --highlight: #E4EBFC;
  --lime: #C5DC10;
  --amber: #EEC32B;
  --orange-deep: #D75513;
  --tile-cream: #F3E8C9;
  --orange-stat: #F3774E;

  /* Dashboard system — exact reference values (see DESIGN.md + dashboard.html).
     Used INSIDE product mockups only. */
  --dash-bg: #f3f4f6;            /* gray-100 */
  --dash-surface: #ffffff;
  --dash-surface-subtle: #f9fafb; /* gray-50 — chip fills */
  --dash-chip-border: #f3f4f6;    /* gray-100 */
  --dash-divider: #e5e7eb;        /* gray-200 — dashed dividers */
  --dash-primary: #436cf1;        /* mesh/brand blue */
  --dash-positive: #4ade80;       /* green-400 — chart line + dots */
  --dash-ink: #1a1a1a;
  --dash-ink-chip: #374151;       /* gray-700 — chip label */
  --dash-muted: #9ca3af;          /* gray-400 */
  --dash-faint: #d1d5db;          /* gray-300 — empty rows */
  --dash-blue-400: #60a5fa;
  --dash-blue-500: #3b82f6;
  --dash-orange-400: #fb923c;

  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);

  /* Corner radius scale — SettlPay rounds its cards for cohesion
     (overrides the sharp-block rule inherited from the Candy Arcade ref). */
  --radius-lg: 28px;   /* grouped panels, large cards */
  --radius: 22px;      /* standalone cards */
  --radius-sm: 16px;   /* inner mock cards */

  /* Accent serif — Cooper BT Light, lowercase. Fraunces (soft axis) is the
     live web fallback until Cooper Lt BT is licensed (see @font-face below). */
  --font-serif: "Cooper Lt BT", "Cooper BT", "Fraunces", Georgia, serif;
}

/* Licensed Cooper: buy Cooper Lt BT (Bitstream, via MyFonts/Monotype),
   drop the woff2 into site/fonts/, and uncomment:
@font-face {
  font-family: "Cooper Lt BT";
  src: local("Cooper Lt BT"), url("../fonts/CooperLtBT.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*/

.serif-accent {
  font-family: var(--font-serif);
  font-weight: 340;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -0.015em;
  text-transform: lowercase;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, "SF Pro", sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* Film grain — §5 brand-kriz: 3–5% light, ~8% on dark/gradients */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 2;
}
.grain-heavy::after { opacity: 0.09; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* ---------------- NAV ---------------- */
nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1160px; margin: 0 auto; padding: 26px 32px;
}
.logo {
  font-family: var(--font-serif);
  font-weight: 340; font-size: 26px;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  text-transform: lowercase;
  letter-spacing: -0.015em; color: var(--ink); text-decoration: none;
}
.logo::after { content: "."; color: var(--ink); }
.nav-links { display: flex; gap: 28px; align-items: center; }
/* :not(.nav-cta) so the button keeps its own cream text (specificity fix) */
.nav-links a:not(.nav-cta) {
  color: var(--ink-warm); text-decoration: none; font-size: 15px; font-weight: 500;
}
.nav-links a:not(.nav-cta):hover { color: var(--ink); }
.btn {
  display: inline-block; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 12px 26px;
  letter-spacing: -0.01em;
  transition: transform 250ms var(--ease-brand);
}
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-outline { border: 1px solid var(--ink); color: var(--ink); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-outline-cream { border: 1px solid var(--cream); color: var(--cream); }
.nav-cta { padding: 10px 22px; }

/* ---------------- TYPE ---------------- */
h1, h2, .display { letter-spacing: -0.03em; }
h1 {
  font-size: clamp(44px, 6vw, 68px);
  font-weight: 600; line-height: 1.14;
}
h2 {
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 500; line-height: 1.05;
}
.eyebrow {
  display: inline-block; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 13px; font-weight: 500; padding: 6px 14px; margin-bottom: 24px;
}

/* Text-selection highlight — brand-kriz §2/§6 signature move.
   Painted as a background band (not a full inline box) so it can't bleed into
   the line above, and animated as a left→right selection wipe. */
.hl {
  color: var(--ink);
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0% 80%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: hl-select 0.55s var(--ease-brand) 0.6s both;
}
@keyframes hl-select {
  from { background-size: 0% 80%; }
  to   { background-size: 100% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  .hl { background-size: 100% 80%; animation: none; }
}

/* ---------------- HERO ---------------- */
.hero { text-align: center; padding: 72px 0 56px; }
.hero h1 { max-width: 820px; margin: 0 auto 24px; }
.hero .sub {
  max-width: 620px; margin: 0 auto 36px;
  color: var(--ink-warm); font-size: 19px; font-weight: 500; line-height: 1.5;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; }

/* Hero board — sharp-edged gradient block, props overlap edges */
.hero-board {
  position: relative;
  background: linear-gradient(180deg, #579CFB 0%, #94C2FE 100%);
  margin-top: 64px;
  padding: 72px 48px 0;
  overflow: hidden;
}
.gridlines {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
}

/* Glossy candy props — brand-kriz §4, payments vocabulary */
.prop { position: absolute; z-index: 1; animation: float 8s ease-in-out infinite; }
.prop svg { display: block; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-9px) rotate(calc(var(--rot, 0deg) + 4deg)); }
}
@media (prefers-reduced-motion: reduce) { .prop { animation: none; } }

/* ------- Dashboard mockup (dashboard system tokens) ------- */
.mock {
  position: relative; z-index: 1;
  max-width: 780px; margin: 0 auto;
  background: var(--dash-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 20px;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px;
  text-align: left;
  font-size: 13px;
  color: var(--dash-ink);
}
.mock-card {
  background: var(--dash-surface); border-radius: var(--radius-sm); padding: 18px;
  box-shadow: 0 1px 2px rgba(23,24,26,0.04);
}
.mock-title { font-weight: 600; font-size: 14px; color: var(--dash-ink); }
.mock-muted { color: var(--dash-muted); font-weight: 500; font-size: 12px; }
.mock-num {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px;
  color: var(--dash-ink);
}
.mock-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 0; border-bottom: 1px dashed var(--dash-divider); font-weight: 500;
}
.mock-row:last-child { border-bottom: none; }
.mock-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--dash-surface-subtle); border: 1px solid var(--dash-chip-border);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 500;
  color: var(--dash-ink-chip);
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-green { background: var(--dash-positive); }
.dot-blue { background: var(--dash-blue-400); }
.dot-blue-500 { background: var(--dash-blue-500); }
.dot-orange { background: var(--dash-orange-400); }
.mock-chip-dark {
  background: var(--dash-ink); color: #fff; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.mock-flex { display: flex; justify-content: space-between; align-items: baseline; }

/* Reference component vocabulary — round icon buttons, day badges, chart axis */
.mock-icons { display: flex; gap: 4px; }
.mock-iconbtn {
  width: 26px; height: 26px; border-radius: 50%; background: var(--dash-bg);
  display: inline-flex; align-items: center; justify-content: center; color: #6b7280;
}
.mock-iconbtn svg { width: 13px; height: 13px; }
.mock-tl { display: flex; align-items: center; gap: 12px; }
.mock-day { width: 22px; text-align: center; font-weight: 500; color: var(--dash-faint); }
.mock-day.active {
  height: 22px; border-radius: 6px; background: #333; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 600;
}
.mock-empty { color: var(--dash-faint); }
.mock-axis {
  display: flex; justify-content: space-between; font-size: 11px; color: var(--dash-muted);
  border-top: 1px dashed var(--dash-divider); padding-top: 8px; margin-top: 8px;
}

/* ---------------- STAT STRIP — 0-gutter treemap tiles ---------------- */
.stats { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.stat {
  padding: 44px 36px 40px; color: var(--cream); position: relative;
}
.stat-green { background: linear-gradient(180deg, #30D372, #50E98C); }
.stat-blue { background: linear-gradient(180deg, #458EF7, #6AA4FA); }
.stat-orange { background: var(--orange-stat); }
.stat .big {
  font-size: clamp(34px, 3.6vw, 52px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1;
}
.stat .cap { margin-top: 12px; font-size: 15px; font-weight: 500; opacity: 0.95; }
.stat .pill {
  position: absolute; top: 18px; right: 18px;
  border: 1px solid var(--cream); border-radius: 999px;
  font-size: 12px; font-weight: 500; padding: 4px 12px;
}

/* ---------------- SECTIONS ---------------- */
section { position: relative; }
.section-pad { padding: 110px 0; }

.problem { max-width: 720px; }
.problem h2 { margin-bottom: 28px; }
.problem p { color: var(--ink-warm); font-size: 19px; line-height: 1.55; margin-bottom: 20px; max-width: 620px; }
.problem strong { color: var(--ink); font-weight: 600; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border-radius: var(--radius-lg); overflow: hidden; }
.step { padding: 36px 32px 40px; }
.step-1 { background: var(--panel-gray-blue); }
.step-2 { background: linear-gradient(180deg, #458EF7, #6AA4FA); color: var(--cream); }
.step-3 { background: var(--tile-cream); }
.step .num {
  font-size: 44px; font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 18px;
}
.step h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.step p { font-size: 15px; line-height: 1.55; font-weight: 500; }
.step-1 p, .step-3 p { color: var(--ink-warm); }

/* Platform grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.feature {
  background: #FFFFFF; border: 1px solid #ECE7DE; padding: 0 0 26px;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius);
}
.feature .shot {
  background: var(--dash-bg); padding: 18px 18px 0; height: 158px; overflow: hidden;
  margin-bottom: 22px;
}
.feature .shot .mock-card { border-radius: var(--radius-sm) var(--radius-sm) 0 0; height: 100%; }
.feature h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0 24px 8px; }
.feature p { font-size: 14.5px; line-height: 1.5; color: var(--ink-warm); margin: 0 24px; }

.bar { height: 7px; border-radius: 999px; background: var(--dash-surface-subtle); margin-top: 8px; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--dash-primary); }

/* Settlement rails — sky board, navy display corners */
.rails {
  position: relative;
  background: linear-gradient(165deg, #72B8FF 0%, #CEF7FF 100%);
  color: var(--navy);
  padding: 90px 0 100px;
  overflow: hidden;
}
.rails .display {
  font-family: var(--font-serif);
  font-size: clamp(64px, 9vw, 130px); font-weight: 340; line-height: 0.95;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
.rails .display.tail { text-align: right; margin-top: 48px; }
.rails-body { max-width: 560px; margin: 36px 0 0; font-size: 18px; line-height: 1.55; font-weight: 500; }
.rails-tagline { margin-top: 22px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.rails-points { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.rails-point {
  border: 1px solid var(--navy); border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 500;
}
.rails-point b { font-weight: 600; }

/* Industries */
.industries { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.industries p { color: var(--ink-warm); font-size: 18px; line-height: 1.55; margin-top: 24px; }
.industries .secondary { font-size: 15px; margin-top: 28px; color: var(--ink); font-weight: 600; }
.vertical-tiles { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; }
.vtile {
  padding: 22px 26px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
  color: var(--ink); display: flex; justify-content: space-between; align-items: center;
}
.vtile span:last-child { font-weight: 500; font-size: 13px; opacity: 0.75; }
.vtile-lime { background: var(--lime); }
.vtile-amber { background: var(--amber); }
.vtile-orange { background: var(--orange-deep); color: var(--cream); }
.vtile-cream { background: var(--tile-cream); }

/* Trust */
.trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.trust-item { background: #fff; border: 1px solid #ECE7DE; padding: 30px; border-radius: var(--radius); }
.trust-item h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; }
.trust-item p { font-size: 14.5px; line-height: 1.55; color: var(--ink-warm); }

/* Charcoal statement card — the most important line on the site */
.statement {
  margin-top: 24px;
  background: var(--charcoal);
  color: var(--cream);
  padding: 72px 56px;
  position: relative;
  border-radius: var(--radius-lg);
}
.statement p {
  font-size: clamp(24px, 3vw, 34px); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.25; max-width: 880px;
}
.statement .glyphs { display: flex; gap: 14px; margin-top: 44px; }
.statement .glyphs svg { opacity: 0.9; }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid #E3DDD2; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; padding: 24px 0; font-size: 18px; font-weight: 600;
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--ink-warm); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 24px; color: var(--ink-warm); font-size: 16px; line-height: 1.55; max-width: 640px; }

/* Final CTA */
.final {
  background: linear-gradient(180deg, #579CFB 0%, #94C2FE 100%);
  text-align: center; padding: 110px 32px; color: var(--cream);
  position: relative; overflow: hidden;
}
.final h2 {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 60px); font-weight: 340;
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -0.01em;
}
.final .sub { margin: 20px auto 36px; font-size: 18px; max-width: 480px; font-weight: 500; }
.final .link { display: block; margin-top: 22px; color: var(--cream); font-size: 15px; }

/* Footer */
footer { padding: 64px 0 48px; }
.foot-cols { display: flex; gap: 48px; margin-bottom: 40px; flex-wrap: wrap; }
.foot-cols a { display: block; color: var(--ink-warm); text-decoration: none; font-size: 14px; margin-top: 8px; }
.foot-cols b { font-size: 14px; }
.compliance {
  border-top: 1px solid #E3DDD2; padding-top: 28px;
  font-size: 13px; line-height: 1.6; color: var(--ink-warm); max-width: 860px;
}
.foot-contact { margin-top: 16px; font-size: 13px; color: var(--ink-warm); }

/* Partners page */
.partners-hero { padding: 90px 0 70px; max-width: 780px; }
.partners-hero h1 { font-size: clamp(40px, 5vw, 58px); }
.partners-hero .sub { margin: 24px 0 36px; color: var(--ink-warm); font-size: 19px; line-height: 1.5; max-width: 640px; }
.bring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; border-radius: var(--radius-lg); overflow: hidden; }
.bring .col { padding: 36px 32px 42px; }
.bring .col:nth-child(1) { background: linear-gradient(180deg, #30D372, #50E98C); color: var(--cream); }
.bring .col:nth-child(2) { background: var(--panel-gray-blue); }
.bring .col:nth-child(3) { background: linear-gradient(180deg, #458EF7, #6AA4FA); color: var(--cream); }
.bring h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.bring p { font-size: 15px; line-height: 1.55; font-weight: 500; }
.bring .col:nth-child(2) p { color: var(--ink-warm); }
.integrate { max-width: 720px; }
.integrate p { color: var(--ink-warm); font-size: 18px; line-height: 1.55; margin: 24px 0; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .stats, .steps, .features, .trust-grid, .industries, .bring { grid-template-columns: 1fr; }
  .mock { grid-template-columns: 1fr; }
  .nav-links a:not(.nav-cta) { display: none; }
  .industries { gap: 40px; }
  .rails .display.tail { margin-top: 32px; }
}