/* ---------------------------------------------------------------------------
   Three landing directions, one set of bones
   ---------------------------------------------------------------------------
   Everything here is what all three share and none of them should be arguing
   about: the palette from the live site, the type scale, the reset, and the
   SVG system marks. Each direction then brings its own layout, rhythm and
   weight — those live in the page's own <style> block, so a direction can be
   thrown away without unpicking the other two.

   Colour is the live site's, unchanged, so a choice here is a choice about
   layout and copy rather than about a repaint nobody asked for.
   --------------------------------------------------------------------------- */

:root {
  --bg: #faf9f7;
  --bg-panel: #ffffff;
  --bg-raised: #f3f1ed;
  --line: #e2ded6;
  --line-soft: #eeebe5;
  --text: #17171a;
  --text-soft: #55555e;
  --text-dim: #85858f;
  --accent: #c7491c;
  --accent-brand: #ff6c37;
  --accent-wash: rgba(199, 73, 28, 0.09);
  --ok: #2c864d;
  --err: #cf3b32;

  /* The dark ground the ad-led direction is built on. */
  --ink: #101312;
  --ink-raised: #191d1c;
  --ink-line: #2a302e;
  --ink-text: #f4f3f0;
  --ink-soft: #a8ada9;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 28px;

  --measure: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  font-synthesis-weight: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

/*
 * Headings in the display face, everything else in Geist.
 *
 * Geist is drawn to be invisible — that is its job in an interface, and it is
 * still the right thing for body, labels and the rebuilt application pieces
 * further down these pages. At 72px invisible reads as characterless: the
 * hero is a number, a number and a question, and it was being set in the
 * house style of every other tool in the category.
 *
 * Bricolage has a voice and keeps the register — distinctive figures, which
 * is the part that matters when the headline *is* figures. A serif was the
 * other real option and was tried; it reads editorial, which is a different
 * company.
 */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display, 'Bricolage Grotesque'), var(--font-ui, Geist), sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.08;
  font-weight: 600;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The one button shape all three share. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  /* A rounded rectangle, not a capsule. A pill reads as a tag or a filter —
     something you toggle — and every other pill on these pages is exactly
     that. The one thing on the page you are being asked to press should not
     share its shape. */
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    border-color 140ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

/* Nothing had one, and a keyboard on a dark page had no idea where it was. */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/*
 * The one action, lit.
 *
 * Flat `--accent-brand` was correct and inert — the same one colour as the
 * badges, the chips and the rule down the side of a reason, so the only thing
 * on the page you are meant to press looked like the things you are meant to
 * read. The gradient runs the brand orange into a deeper red across the face,
 * which is what gives it a lit edge rather than a printed one, and the glow
 * underneath is that same red rather than black, so the button sits on the
 * page instead of being cut out of it.
 */
.btn-primary {
  /* A wider ramp than the first cut, which was three shades of nearly the same
     orange and read flat at this size. It opens on a warm amber and closes on
     a red — far enough apart to be a lit surface, close enough to still be one
     colour rather than two. */
  background-image: linear-gradient(103deg, #ffa24f 0%, #ff6f38 48%, #e83d1f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(120, 25, 10, 0.25),
    0 10px 24px -8px rgba(237, 69, 38, 0.7);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.btn-primary:hover {
  background-image: linear-gradient(103deg, #ffb066 0%, #ff8049 48%, #f24a2b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(120, 25, 10, 0.22),
    0 14px 30px -9px rgba(237, 69, 38, 0.78);
}

/* Pressed: the lift and the glow both come off, so it goes down rather than
   merely changing colour. */
.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 2px rgba(120, 25, 10, 0.4),
    0 2px 8px -4px rgba(237, 69, 38, 0.5);
}

.btn-ghost {
  border-color: var(--line);
  background: var(--bg-panel);
  color: var(--text);
}

.btn-ink {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-text);
}

/* Small print under a call to action: the objection, answered before it. */
.reassure {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* A tile carrying one system's mark. The marks themselves are drawn rather
   than fetched: these stand for *kinds* of system, not for products, which is
   deliberate — a landing page that lines up other companies' logos is making a
   claim about them. */
.mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mark svg {
  width: 26px;
  height: 26px;
}

.mark-label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-dim);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation: none !important;
    transition: none !important;
  }
}