/* dabdab — monochrome website design system
   Black, white and a controlled grey scale. Colour belongs to the wearer. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

:root {
  --true-black: #000000;
  --ink: #1D1D1F;
  --grey-text: #6E6E73;
  --mid-grey: #86868B;
  --hairline: #D2D2D7;
  --fill-grey: #E8E8ED;
  --panel: #F5F5F7;
  --white: #FFFFFF;
  --ink-secondary: #A1A1A6; /* secondary text inside dark sections */

  --display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 40px);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  font-size: 17px;
}

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

img { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

section { padding: clamp(72px, 11vw, 140px) 0; }

.section-dark { background: var(--ink); color: var(--white); }
.section-true-black { background: var(--true-black); color: var(--white); }
.section-panel { background: var(--panel); }

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-grey);
  margin-bottom: 20px;
}
.section-dark .eyebrow, .section-true-black .eyebrow { color: var(--ink-secondary); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }

.display {
  font-size: clamp(46px, 9vw, 104px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
h2.title { font-size: clamp(34px, 5.5vw, 64px); letter-spacing: -0.03em; }
h3 { font-size: clamp(22px, 3vw, 30px); }

.lead {
  font-size: clamp(19px, 2.4vw, 26px);
  color: var(--grey-text);
  font-weight: 400;
  line-height: 1.35;
  max-width: 620px;
}
.section-dark .lead, .section-true-black .lead { color: var(--ink-secondary); }

p.body { color: var(--grey-text); max-width: 620px; }
p + p.body, p.body + p.body { margin-top: 1em; }
.section-dark p.body { color: var(--ink-secondary); }

.center { text-align: center; }
.center .lead, .center p.body { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 500; font-size: 17px;
  padding: 13px 26px; border-radius: 980px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { background: #000; }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { opacity: .9; }
.btn-outline { border-color: var(--hairline); color: var(--ink); }
.section-dark .btn-outline, .section-true-black .btn-outline { border-color: rgba(255,255,255,.35); color: var(--white); }
.btn-link { color: var(--ink); font-weight: 500; }
.section-dark .btn-link { color: var(--white); }
.btn-link::after { content: " ›"; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

/* ---------- Nav ---------- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
header.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { display: flex; align-items: flex-start; font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.brand .ast { width: 9px; height: 9px; margin-left: 2px; margin-top: 1px; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); }
.nav-links a { font-size: 15px; color: var(--ink); opacity: .85; }
.nav-links a:hover { opacity: 1; }
.nav-links a.cta { background: var(--ink); color: var(--white); padding: 7px 16px; border-radius: 980px; opacity: 1; }
.nav-toggle { display: none; }

/* ---------- Asterisk ---------- */
.ast { display: inline-block; }
.ast svg { width: 100%; height: 100%; display: block; }

/* ---------- Hero ---------- */
.hero {
  background: var(--true-black); color: var(--white);
  text-align: center;
  padding: clamp(90px, 13vw, 160px) 0 0;
  overflow: hidden;
}
.hero .display { color: var(--white); }
.hero .lead { color: var(--ink-secondary); margin: 22px auto 34px; }

/* Glowing disc — the white sphere from the mockup, with the asterisk */
.disc-stage { margin: clamp(40px,7vw,80px) auto 0; padding-bottom: clamp(60px,9vw,120px); }
.disc {
  position: relative; width: clamp(220px, 34vw, 360px); aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff 0%, #f2f2f4 38%, #c9c9cf 72%, #9a9aa2 100%);
  box-shadow: 0 50px 120px rgba(255,255,255,.18), inset -18px -22px 60px rgba(0,0,0,.16);
}
.disc .ast {
  position: absolute; inset: 0; margin: auto; width: 42%; height: 42%;
  color: #c9d6e8; opacity: .85;
  filter: blur(.4px);
}

/* ---------- Grids / Bento ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,32px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,32px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.tile {
  background: var(--panel); border-radius: 24px; padding: clamp(28px,4vw,44px);
}
.section-dark .tile, .section-true-black .tile { background: #2A2A2E; }
.tile h3 { margin-bottom: 12px; }
.tile p { color: var(--grey-text); }
.section-dark .tile p { color: var(--ink-secondary); }
.tile .num { font-family: var(--display); font-weight: 900; font-size: 15px; color: var(--mid-grey); display: block; margin-bottom: 16px; }

.tile .ast { width: 30px; height: 30px; color: var(--ink); margin-bottom: 18px; }
.section-dark .tile .ast { color: var(--white); }

/* Feature media block */
.media {
  border-radius: 24px; overflow: hidden; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
}
.media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Doors ---------- */
.door {
  display: block; border: 1px solid var(--hairline); border-radius: 24px;
  padding: clamp(28px,3.5vw,40px); transition: border-color .2s, transform .2s, background .2s;
  background: var(--white);
}
.door:hover { border-color: var(--ink); transform: translateY(-3px); }
.door .ast { width: 26px; height: 26px; color: var(--ink); margin-bottom: 22px; }
.door h3 { margin-bottom: 8px; }
.door p { color: var(--grey-text); font-size: 16px; }
.door .go { display: inline-block; margin-top: 18px; font-weight: 500; }
.door .go::after { content: " ›"; }

/* ---------- Stat / band ---------- */
.band { text-align: center; }
.band .big {
  font-family: var(--display); font-weight: 900; letter-spacing: -0.03em;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.08; max-width: 16ch; margin: 0 auto;
}

.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 56px; }
.stat .n { font-family: var(--display); font-weight: 900; font-size: clamp(40px,6vw,64px); letter-spacing: -0.03em; }
.stat .l { color: var(--mid-grey); font-size: 15px; margin-top: 4px; }
.section-dark .stat .l { color: var(--ink-secondary); }

/* ---------- Lists ---------- */
ul.checks { list-style: none; margin-top: 8px; }
ul.checks li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--grey-text); }
ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px;
  background: var(--ink); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat;
}
.section-dark ul.checks li { color: var(--ink-secondary); }
.section-dark ul.checks li::before { background: var(--white); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: clamp(70px,10vw,120px) 0 clamp(40px,6vw,70px); }
.page-hero .display { font-size: clamp(40px, 7vw, 80px); }

/* ---------- Card face mock (merchant) ---------- */
.face {
  width: clamp(180px,26vw,260px); aspect-ratio:1; border-radius:50%; margin: 0 auto;
  display:flex; align-items:center; justify-content:center; position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,.18), inset -10px -14px 40px rgba(0,0,0,.12);
}
.face .label { font-family: var(--display); font-weight:900; letter-spacing:-.03em; font-size: clamp(20px,3vw,30px); }
.face .ast { position:absolute; top:18%; right:24%; width:16px; height:16px; }

/* ---------- Phone mockups ---------- */
.phones { display: flex; justify-content: center; align-items: flex-end; gap: clamp(18px, 4vw, 48px); flex-wrap: wrap; }
.phone {
  position: relative; width: clamp(220px, 26vw, 286px); aspect-ratio: 375 / 812;
  background: #0a0a0a; border-radius: 42px; padding: 11px;
  box-shadow: 0 40px 90px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4);
}
.phone.raise { margin-bottom: clamp(20px, 4vw, 56px); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #fff; }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone .notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 38%; height: 22px; background: #0a0a0a; border-radius: 0 0 16px 16px; z-index: 2;
}
.section-dark .phone { box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.phone-cap { text-align: center; margin-top: 18px; font-size: 14px; color: var(--mid-grey); }

/* ---------- Form ---------- */
.form { display:grid; gap:16px; max-width: 560px; }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form label { font-size:13px; font-weight:600; color:var(--ink); display:block; margin-bottom:6px; }
.form input, .form select, .form textarea {
  width:100%; font-family:var(--body); font-size:16px; padding:13px 15px;
  background:var(--fill-grey); border:1px solid transparent; border-radius:12px; color:var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--ink); background:var(--white); }

/* ---------- FAQ / detail rows ---------- */
.rows { border-top:1px solid var(--hairline); }
.rows .r { display:grid; grid-template-columns: 240px 1fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--hairline); }
.rows .r .k { font-family:var(--display); font-weight:700; font-size:16px; }
.rows .r .v { color:var(--grey-text); }

/* ---------- Footer ---------- */
footer.site {
  background: var(--white); border-top:1px solid var(--hairline);
  padding: 56px 0 40px; font-size: 14px; color: var(--mid-grey);
}
footer.site .cols { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
footer.site h4 { font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--ink); margin-bottom:14px; }
footer.site a { display:block; color:var(--grey-text); margin-bottom:10px; }
footer.site a:hover { color:var(--ink); }
footer.site .manifesto { font-family:var(--display); font-weight:800; color:var(--ink); font-size:18px; letter-spacing:-.02em; max-width: 22ch; line-height:1.2; }
footer.site .legal { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--hairline); }

/* ---------- Utilities ---------- */
.mt-s { margin-top: 16px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }
.muted { color: var(--mid-grey); font-size: 14px; }
.hairline-divide { border:0; border-top:1px solid var(--hairline); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4, .stats, .form .row, .rows .r { grid-template-columns: 1fr; }
  .rows .r { gap: 6px; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; position: absolute; top: 56px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--hairline); padding: 8px var(--pad) 16px; }
  .nav-links.open a { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .nav-links.open a.cta { text-align:center; margin-top:10px; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
  .nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}


/* --- pre-launch sign-in gate (frontend only) --- */
#dab-gate{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#000;padding:24px;font-family:var(--display),-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
html.dab-authed #dab-gate{display:none}
.dab-gate-card{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;text-align:center}
.dab-gate-mark{width:52px;height:52px;margin-bottom:18px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2771%2052%20620%20620%27%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M468%20384%20L468%20159%20C468%20128.988%20451.988%20101.258%20426%2086.254%20C400.012%2071.25%20367.988%2071.25%20342%2086.254%20C316.012%20101.258%20300%20128.988%20300%20159%20L300%20384%20C300%20414.012%20316.012%20441.742%20342%20456.746%20C367.988%20471.75%20400.012%20471.75%20426%20456.746%20C451.988%20441.742%20468%20414.012%20468%20384%27%2F%3E%3Cpath%20d%3D%27M409.957%20463.887%20L623.945%20394.359%20C652.422%20385.035%20673.777%20361.246%20679.984%20331.934%20C686.195%20302.617%20676.316%20272.215%20654.062%20252.148%20C631.809%20232.082%20600.551%20225.387%20572.031%20234.582%20L358.043%20304.113%20C329.566%20313.434%20308.211%20337.223%20302.004%20366.539%20C295.793%20395.855%20305.672%20426.258%20327.926%20446.324%20C350.18%20466.391%20381.438%20473.086%20409.957%20463.887%27%2F%3E%3Cpath%20d%3D%27M316.043%20433.375%20L448.293%20615.402%20C465.961%20639.605%20495.184%20652.562%20524.984%20649.406%20C554.781%20646.25%20580.641%20627.461%20592.852%20600.098%20C605.059%20572.734%20601.766%20540.938%20584.207%20516.656%20L451.957%20334.625%20C434.316%20310.348%20405.066%20297.324%20375.219%20300.461%20C345.375%20303.598%20319.469%20322.418%20307.262%20349.836%20C295.055%20377.25%20298.402%20409.094%20316.043%20433.375%27%2F%3E%3Cpath%20d%3D%27M316.043%20334.625%20L183.793%20516.656%20C166.234%20540.938%20162.941%20572.734%20175.148%20600.098%20C187.359%20627.461%20213.219%20646.25%20243.016%20649.406%20C272.816%20652.562%20302.039%20639.605%20319.707%20615.402%20L451.957%20433.375%20C469.598%20409.094%20472.945%20377.25%20460.738%20349.836%20C448.531%20322.418%20422.625%20303.598%20392.781%20300.461%20C362.934%20297.324%20333.684%20310.348%20316.043%20334.625%27%2F%3E%3Cpath%20d%3D%27M409.957%20304.113%20L195.969%20234.582%20C167.449%20225.387%20136.191%20232.082%20113.938%20252.148%20C91.684%20272.215%2081.805%20302.617%2088.016%20331.934%20C94.223%20361.246%20115.578%20385.035%20144.055%20394.359%20L358.043%20463.887%20C386.562%20473.086%20417.82%20466.391%20440.074%20446.324%20C462.328%20426.258%20472.207%20395.855%20465.996%20366.539%20C459.789%20337.223%20438.434%20313.434%20409.957%20304.113%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.dab-gate-word{font-weight:900;letter-spacing:-.04em;font-size:30px;color:#fff;margin-bottom:26px;line-height:1}
#dab-gate input{width:100%;font-family:inherit;font-size:15px;font-weight:500;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:13px 18px;text-align:center;margin-bottom:10px;letter-spacing:.02em}
#dab-gate input::placeholder{color:#6a6a70;letter-spacing:.1em;text-transform:uppercase;font-size:13px}
#dab-gate input:focus{outline:none;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.1)}
#dab-gate button{width:100%;margin-top:6px;font-family:inherit;font-weight:600;font-size:15px;color:#000;background:#fff;border:none;border-radius:999px;padding:13px 18px;cursor:pointer;transition:transform .15s}
#dab-gate button:hover{transform:translateY(-1px)}
#dab-err{min-height:18px;margin-top:14px;font-size:13px;color:#ff6b6b;letter-spacing:.02em}