/* ══════════════════════════════════════════════════════════════════════
 *  KWICKDO — product design system
 *
 *  Replaces the rust-and-cream serif palette. That palette said "gallery"
 *  because it was built like one: warm paper, a burnt-orange accent and
 *  Fraunces on every heading. Two other things were quietly wrong — the
 *  brand variable was #B7410E (rust) while the logo is a pink gradient,
 *  so the site and its own logo disagreed.
 *
 *  This file is the correction. One sans family, near-black ink on white,
 *  and the logo's own gradient as the single accent. Loaded after
 *  app.css and theme.css, so it wins.
 * ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ink and paper — neutral, not warm. Warmth is what made it feel like
     a gallery wall rather than a product. */
  --ink:          #0B0B10;
  --text:         #16161D;
  --text-2:       #4A4A57;
  --mist:         #6B6B78;
  --mist-light:   #9A9AA6;

  --bg:           #FFFFFF;
  --bg-alt:       #F6F7F9;
  --bg-sunk:      #EEF0F4;
  --surface:      #FFFFFF;

  --line:         #E4E6EC;
  --line-2:       #D2D5DE;

  /* the accent is the logo's own gradient, nothing invented */
  --brand:        #F02A5F;
  --brand-600:    #D31A4C;
  --brand-700:    #B01340;
  --brand-200:    #FF6B8E;
  --brand-tint:   #FFF1F4;
  --brand-tint-2: #FFD9E2;
  --grad:         linear-gradient(115deg, #FA4D4B 0%, #F02A5F 48%, #E8308A 100%);

  --teal:         #0E7C66;
  --teal-tint:    #E6F4F0;
  --amber:        #B4770A;
  --amber-tint:   #FDF3E0;
  --coral:        #C7361F;
  --coral-tint:   #FDECE8;

  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Inter', system-ui, sans-serif;   /* headings are sans now */

  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --sh-1: 0 1px 2px rgba(11,11,16,.05);
  --sh-2: 0 4px 16px rgba(11,11,16,.07);
  --sh-3: 0 18px 48px rgba(11,11,16,.11);
}

/* ── type ───────────────────────────────────────────────────────────── */
body { font-family: var(--sans); color: var(--text); background: var(--bg);
       -webkit-font-smoothing: antialiased; }

.h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--sans);
  font-variation-settings: normal;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
}
.h1, h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
.h2, h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); letter-spacing: -.024em; }
.h3, h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.014em; line-height: 1.25; }

.lead { font-size: clamp(1.02rem, 1.5vw, 1.19rem); line-height: 1.62; color: var(--text-2); }
.small { font-size: 14px; }
.tiny  { font-size: 12.5px; }
.muted { color: var(--mist); }

/* the all-caps label above a heading — tightened and de-serifed */
.eyebrow {
  font-size: 11.5px; font-weight: 650; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brand-600);
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r); font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { height: 38px; padding: 0 15px; font-size: 13.5px; }
.btn-md { height: 46px; padding: 0 22px; font-size: 14.5px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 15.5px; }
.btn-full { width: 100%; }

.btn-p  { background: var(--ink); color: #fff; box-shadow: var(--sh-1); }
.btn-p:hover { background: #000; box-shadow: var(--sh-2); }

.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 3px 14px rgba(240,42,95,.28); }
.btn-grad:hover { box-shadow: 0 6px 22px rgba(240,42,95,.36); }

.btn-o  { background: #fff; color: var(--text); border-color: var(--line-2); }
.btn-o:hover { border-color: var(--ink); background: var(--bg-alt); }

/* on dark bands */
.on-dark .btn-o { background: rgba(255,255,255,.06); color: #fff;
                  border-color: rgba(255,255,255,.24); }
.on-dark .btn-o:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.45); }

/* ── surfaces ───────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.card-hover { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.card-hover:hover { border-color: var(--line-2); box-shadow: var(--sh-2); transform: translateY(-2px); }

.st { border-radius: 9999px; font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.pill { border-radius: 9999px; }

/* ── dark bands ─────────────────────────────────────────────────────── */
.band-dark, .hero-dark {
  background: var(--ink); color: #fff;
}
.band-dark .h1, .band-dark .h2, .band-dark .h3, .band-dark h1, .band-dark h2, .band-dark h3,
.hero-dark .h1, .hero-dark .h2, .hero-dark h1, .hero-dark h2 { color: #fff; }
.band-dark .lead, .hero-dark .lead { color: rgba(255,255,255,.72); }
.band-dark .muted, .hero-dark .muted { color: rgba(255,255,255,.58); }
.band-dark .eyebrow, .hero-dark .eyebrow { color: var(--brand-200); }

/* ── rhythm ─────────────────────────────────────────────────────────── */
section { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 720px) { section { padding-top: 52px; padding-bottom: 52px; } }

.container-x { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ── forms ──────────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=datetime-local], textarea, select {
  border-radius: var(--r); border: 1px solid var(--line-2); background: #fff;
  font-family: var(--sans); font-size: 14.5px; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-2);
        text-transform: none; }

/* ── links ──────────────────────────────────────────────────────────── */
a { color: inherit; }
.site-footer a:hover, .nav-links a:hover { color: var(--brand-600); }

/* ── the logo keeps its gradient ────────────────────────────────────── */
.logo { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; }