/* fairrev.com front page.
   Loaded on "/" only. Every class is prefixed fr- so nothing here can reach the
   article template. Colour comes from the tokens in styles.css, so light and dark
   are already handled and this file never hardcodes a background or a text colour.

   Type follows the Apple rule that tracking is size specific: display sizes get
   negative tracking because letters read too far apart as they grow, body sits at
   zero, and small uppercase labels get positive tracking to stay legible. Leading
   moves the other way, tight on the display and loose on the prose.

   Motion is restrained on purpose. This is a page you read, not one you drag, so
   there is one 120ms press response on the things you can press and nothing else
   that moves without being asked. */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

.fr {
  --fr-gap: clamp(64px, 8vw, 112px);
  --fr-radius: 14px;
  --fr-line: color-mix(in srgb, var(--ink) 12%, transparent);
  --fr-raise: color-mix(in srgb, var(--ink) 4%, transparent);
  font-family: "Plus Jakarta Sans", var(--font-sans);
  font-optical-sizing: auto;
}

.fr * { font-family: inherit; }

/* The blog shell puts the page inside .wrap. The front page wants full bleed
   sections, so it climbs back out and manages its own gutters. */
.fr {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.fr-in {
  width: 100%;
  max-width: 64rem;          /* the same measure as .wrap, so the masthead and the page share an edge */
  margin: 0 auto;
  padding: 0 16px;
}

.fr-sec { padding: var(--fr-gap) 0; }
.fr-sec--tint { background: var(--fr-raise); }
.fr-sec + .fr-sec { border-top: 1px solid var(--fr-line); }

/* ---------- hero ---------- */

.fr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  /* Block padding only. The shorthand `padding: X 0 Y` used to sit here and zeroed the side
     gutters .fr-in gives this same element, so the hero ran to the screen edge on a phone and
     sat 26px left of every other section on a desktop. */
  padding-block: clamp(56px, 7vw, 96px) var(--fr-gap);
}

.fr-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;      /* small text wants tracking added back */
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}

.fr-h1 {
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
  font-weight: 800;
  line-height: 1.04;           /* tight, because the type is large */
  letter-spacing: -0.033em;    /* negative, for the same reason */
  margin: 0 0 20px;
  color: var(--ink);
  text-wrap: balance;
}

.fr-lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 34rem;
}

.fr-art {
  display: grid;
  place-items: center;
}

.fr-art img {
  width: 100%;
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 18px 40px color-mix(in srgb, var(--accent) 22%, transparent));
}

/* ---------- buttons ---------- */

.fr-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.fr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease-out, border-color 140ms ease-out,
              transform 120ms ease-out;
}

.fr-btn--primary { background: var(--accent); color: var(--accent-ink); }
.fr-btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }

.fr-btn--ghost { color: var(--ink); border-color: var(--fr-line); }
.fr-btn--ghost:hover { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }

/* The press is the feedback, and it happens on pointer down rather than on release */
.fr-btn:active { transform: scale(0.972); }

.fr-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.fr-note { margin: 16px 0 0; font-size: 0.875rem; color: var(--muted); }

/* ---------- section headings ---------- */

.fr-h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
}

.fr-sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 40px;
  max-width: 44rem;
}

/* ---------- the two ways of billing ---------- */

.fr-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 20px;
}

.fr-panel {
  padding: 28px;
  border-radius: var(--fr-radius);
  border: 1px solid var(--fr-line);
  background: var(--surface);
}

.fr-panel--ours {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: var(--shadow);
}

.fr-panel h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--muted);
}

.fr-panel--ours h3 { color: var(--accent); }

.fr-list { margin: 0; padding: 0; list-style: none; }

.fr-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}

.fr-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.fr-list--no li::before { content: "\00d7"; color: var(--low); }
.fr-list--yes li::before { content: "\2713"; color: var(--good); }

/* ---------- three proofs ---------- */

.fr-three {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 20px;
}

.fr-proof {
  padding: 26px;
  border-radius: var(--fr-radius);
  border: 1px solid var(--fr-line);
  background: var(--surface);
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}

.fr-proof:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.fr-num {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.fr-proof h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin: 0 0 8px;
  color: var(--ink);
}

.fr-proof p { margin: 0; line-height: 1.6; color: var(--ink-2); }

/* ---------- pricing strip ---------- */

.fr-table-wrap { overflow-x: auto; border-radius: var(--fr-radius); border: 1px solid var(--fr-line); }

.fr-table { width: 100%; border-collapse: collapse; background: var(--surface); }

.fr-table th,
.fr-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--fr-line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* so the columns of figures line up */
}

.fr-table th {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.fr-table tr:last-child td { border-bottom: 0; }
.fr-table td:first-child { font-weight: 600; color: var(--ink); }
.fr-table td { color: var(--ink-2); }

/* ---------- what it does ---------- */

.fr-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.fr-chip {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--fr-line);
  background: var(--surface);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* ---------- closing ---------- */

.fr-end { text-align: center; }
.fr-end .fr-sub { margin-left: auto; margin-right: auto; }
.fr-end .fr-cta { justify-content: center; }

/* ---------- narrow screens ---------- */

@media (max-width: 54rem) {
  .fr-hero { grid-template-columns: 1fr; }
  .fr-art { order: -1; }
  /* On a phone the mark is decoration and the headline is the point: keep it small so the
     headline and the first button land on the first screen. */
  .fr-art img { max-width: 88px; filter: none; }
  .fr-hero { padding-block-start: 32px; gap: 20px; }
}

/* ---------- the preferences that are not ours to override ---------- */

@media (prefers-reduced-motion: reduce) {
  .fr-btn,
  .fr-proof { transition: none; }
  .fr-btn:active,
  .fr-proof:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .fr-panel,
  .fr-proof,
  .fr-chip,
  .fr-table-wrap { border-width: 2px; border-color: var(--ink); }
  .fr-art img { filter: none; }
}

/* ---------- one voice across the site ----------
   The blog shell sets a serif face on body, which is right for a publication and
   wrong for a software product. This file is linked on every page, so moving the
   face here keeps the front page and the pages it links to speaking the same way.
   Remove this one rule to put the serif back. */

body {
  font-family: "Plus Jakarta Sans", var(--font-sans);
  letter-spacing: -0.006em;
}

h1, h2, h3, .brand-name { letter-spacing: -0.02em; }

/* ---------- masthead on a phone: one row, a menu button, the nav in a panel ---------- */

.nav-toggle { display: none; }

@media (max-width: 48rem) {
  /* The wordmark already says the name, and the tagline is for wider screens. */
  .brand-text { display: none; }

  .masthead-inner { flex-wrap: wrap; row-gap: 0; }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;              /* touch target, not the icon size */
    height: 44px;
    margin-right: -10px;      /* optical: the icon sits on the gutter, the hit area does not */
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .nav-toggle-x { display: none; }
  .masthead.is-open .nav-toggle-bars { display: none; }
  .masthead.is-open .nav-toggle-x { display: inline; }

  /* Collapsed only when the script that opens it has run. Without JS the links stay visible. */
  .js .nav { display: none; }
  .js .masthead.is-open .nav { display: flex; }

  .nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 4px 0 12px;
    font-size: 1rem;
  }
  .nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 4px;
    border-bottom: 1px solid var(--rule);
  }
  .nav a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-toggle { transition: background-color .15s ease-out; }
  .nav-toggle:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
}