/* The Clip Kitchen — design system, applied over the older pages.
 *
 * The homepage was rebuilt on these rules directly. Every other page still
 * carries its original inline styles, so this sheet loads last and corrects
 * the handful of things that make a page look like the old site: gradient
 * fills, glow and card shadows, thin icons, and drifted type.
 *
 * Matched to the app (mobile/src/theme/tokens.ts, "bold and plain"). The app
 * ships light and this site is dark by Grant's call, so the RULES come across
 * and the ground does not: flat fills, one loud element, no card shadows, no
 * glow, thick icons, nine type sizes.
 *
 * Bump the ?v= on the link tag with every edit. This file is served with a
 * seven-day cache, so an unversioned change reaches nobody who has visited.
 *
 * DO NOT redefine --grad here. On these pages --grad is
 * linear-gradient(135deg,#1e40af,#3b82f6), and .mark (the logo) uses it as
 * well as the buttons. Flattening the token would flatten the logo on every
 * page — the exact mistake the app made when BrandMark shared the button
 * token. Each consumer is corrected by name instead, and the mark is left
 * alone on purpose.
 */

:root {
  --ck-action: #2563eb;      /* the one action colour, flat */
  --ck-action-hover: #1d4ed8;
  --ck-r-card: 18px;
  --ck-r-tile: 24px;
  --ck-r-thumb: 12px;
}

/* ---------- buttons: flat, no glow, app heights ---------- */
.btn {
  font-size: 16px;
  font-weight: 700;
  padding: 0 24px;
  min-height: 55px;
  border-radius: 999px;
}
.btn-primary {
  background: var(--ck-action);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover { background: var(--ck-action-hover); }
.btn-ghost,
.btn-white {
  box-shadow: none;
}
.btn-ghost {
  border-width: 1.5px;
  min-height: 51px;
}
/* the small button in the header row stays a tap target, not a slab */
header .btn,
.nav-cta .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}
.btn-demo {
  min-height: 44px;
  background: transparent;
}
/* the cookie bar's buttons are chrome, not calls to action */
.ckbar .btn {
  min-height: 0;
  padding: 7px 13px;
  font-size: 12px;
}

/* ---------- the other things that were filled with the logo gradient ---------- */
.cta-band,
.check,
.addon-row.active .addon-check,
.vh-opt.active,
.ck-bt-opt.active,
.pill.active,
.toggle .on {
  background: var(--ck-action);
}
.cta-band {
  box-shadow: none;
  border-radius: var(--ck-r-tile);
}

/* ---------- depth: a card is an object, not a floating pane ---------- */
.card,
.case,
.tier,
.qa,
.stat {
  box-shadow: none;
}
.card,
.case,
.tier {
  border-radius: var(--ck-r-card);
}
/* the logo keeps its gradient and loses only the glow */
.mark { box-shadow: none; }

/* ---------- icons at lucide weight ---------- */
svg[stroke="currentColor"] { stroke-width: 2.4; }

/* ---------- type: the app's scale ---------- */
body { font-size: 16px; line-height: 1.44; }
h1, h2, h3 { letter-spacing: -.02em; }
.eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #60a5fa;
}
.lead { font-size: 18px; line-height: 26px; font-weight: 500; }

/* ---------- the promo strip pushes the sticky header down ---------- */
body.ck-has-strip header { transition: top .2s ease; }

/* ---------- the rest of the gradient fills ----------
 * Kept deliberately: .phone, .phone .screen, .clip-tile and their ::after
 * layers. Those sit BEHIND a video as its placeholder and its legibility
 * scrim, not as chrome, and the app keeps gradients on its dark media screens
 * for the same reason.
 */
/* This class was a gradient fill on headline accent words and on the big
   numbers. Flat, but still the accent colour: turning it white removed the
   emphasis the headline was built around, and the app keeps a brand colour
   for accent text at body and display size. */
.gradient-text {
  background: none;
  -webkit-text-fill-color: #60a5fa;
  color: #60a5fa;
}
.step .n,
.tier .badge,
.sameday-band,
.donecard .tick,
#industries .card .ico,
#industries .card:nth-child(2) .ico,
#industries .card:nth-child(3) .ico,
#industries .card:nth-child(4) .ico,
#industries .card:nth-child(5) .ico,
#industries .card:nth-child(6) .ico,
#industries .card:nth-child(7) .ico {
  background: var(--ck-action);
}
/* Four saturated tiles side by side meant none of them was the point. The app
   dropped that palette; these become objects again, with the number carrying
   the emphasis. */
.sx-blue, .sx-violet, .sx-amber, .sx-green,
.case, .grid .case:nth-child(2), .grid .case:nth-child(3) {
  background: var(--card);
  border: 1px solid var(--line);
}