/* ──────────────────────────────────────────────────────────────────────────
   BizBook2U brand system — "Receipt + Stamp"
   Ink-black + paper-white + a single hot stamp red, with a highlighter yellow
   reserved for the "2" in the wordmark. Mono for prices / dates / labels.
   ──────────────────────────────────────────────────────────────────────── */

:root{
  /* Surface */
  --paper:   #FAFAF7;       /* page background — warm off-white, like newsprint */
  --paper-2: #FFFFFF;       /* cards on paper */
  --rule:    #E5E5E0;       /* hairlines, borders */
  --rule-2:  rgba(14,14,14,.06);

  /* Ink */
  --ink:      #0E0E0E;      /* primary text + dark buttons */
  --ink-soft: #2A2A2A;      /* sub-headings */
  --grey:     #6B7280;      /* meta, hint */
  --grey-soft:#9CA3AF;      /* placeholder, dimmest */

  /* Stamp / accent — one hot colour, sparingly */
  --stamp:    #E63946;      /* primary accent — links, focus ring, stamp chip */
  --stamp-dk: #B2202B;      /* hover */
  --stamp-bg: rgba(230,57,70,.10);

  /* Highlighter mark — reserved for the "2" in the wordmark + tiny callouts */
  --mark:     #FFD60A;

  /* States */
  --ok:       #0E7C4D;
  --err:      #B2202B;

  /* Shadow / depth — flat, receipt-like */
  --shadow-sm: 0 1px 2px rgba(14,14,14,.06);
  --shadow:    0 1px 2px rgba(14,14,14,.05), 0 4px 16px rgba(14,14,14,.05);
  --shadow-lg: 0 8px 32px rgba(14,14,14,.10);

  /* Type */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Radii */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 14px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block}

a{color:var(--stamp);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}

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

/* ── Wordmark — "BizBook + [red stamp 2] + U" ─────────────────────────── */
.brand{display:inline-flex;align-items:center;gap:1px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand__name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1;
}
.brand__stamp{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--stamp);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  border-radius: var(--r-sm);
  margin: 0 4px;
  transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(14,14,14,.15);
  line-height: 1;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 22px;
  border: 0; border-radius: var(--r);
  font-family: inherit; font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background: var(--ink); color: #fff}
.btn--primary:hover{background:#1f1f1f;color:#fff;text-decoration:none}
.btn--stamp{background: var(--stamp); color:#fff}
.btn--stamp:hover{background: var(--stamp-dk);color:#fff;text-decoration:none}
.btn--ghost{background: transparent; color: var(--ink); border: 1.5px solid var(--ink)}
.btn--ghost:hover{background: var(--ink); color:#fff;text-decoration:none}
.btn--sec{background:#F0EFE9; color:var(--ink)}
.btn--sec:hover{background:#E5E4DC;color:var(--ink);text-decoration:none}
.btn--lg{padding:14px 28px; font-size:16px}

/* ── Forms ────────────────────────────────────────────────────────────── */
.field-label{
  display:block; font-size:11px; font-weight:600;
  color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase;
  margin: 0 0 6px;
}
.field-input, .field-textarea{
  width:100%; padding: 11px 14px;
  border:1px solid var(--rule); border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; line-height: 1.4;
  background: var(--paper-2); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input::placeholder, .field-textarea::placeholder{color:var(--grey-soft)}
.field-input:focus, .field-textarea:focus{
  outline:0;
  border-color: var(--stamp);
  box-shadow: 0 0 0 3px var(--stamp-bg);
}
.field-textarea{min-height:110px; resize:vertical; line-height:1.55}

/* ── Section primitives ───────────────────────────────────────────────── */
.section{padding:88px 0}
.section--alt{background:var(--paper-2)}
.section__title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px,4vw,44px);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-align: center;
  margin: 0 0 14px;
  color: var(--ink);
}
.section__lead{
  text-align:center;
  color: var(--grey);
  font-size: 17px;
  max-width: 580px;
  margin: 0 auto 48px;
  line-height: 1.55;
}

/* ── Eyebrow tag (small caps label above headlines) ──────────────────── */
.eyebrow{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stamp);
  font-weight: 600;
  margin-bottom: 14px;
}

/* ── Money — tabular mono so receipts line up ─────────────────────────── */
.money{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ── Generic card ─────────────────────────────────────────────────────── */
.card{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* ── Toast/messages used in forms ─────────────────────────────────────── */
.msg{
  margin-top:12px;
  padding:10px 14px;
  border-radius: var(--r-sm);
  font-size:14px;
  display:none;
}
.msg.ok{display:block; background:#E8F4ED; color: var(--ok); border:1px solid rgba(14,124,77,.15)}
.msg.err{display:block; background:#FCEAEC; color: var(--err); border:1px solid rgba(178,32,43,.15)}