/*
  Feature pages. Loaded AFTER styles.css and adds only what the landing page
  has no equivalent of - the alternating copy/screenshot rows and the framed
  shot. Everything else (buttons, .shell, .nav, type, tokens) is inherited, so
  these pages are the same site rather than a microsite that looks nearly
  right.

  The rules from styles.css that still govern here: white canvas, monochrome
  action layer, cyan used sparely and never on a button, Inter 600 with
  negative tracking for display type, radius 8/12/16.
*/

.ft-quiet {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  margin-right: var(--s-md, 16px);
}
.ft-quiet:hover { color: var(--ink) }

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

.ft-hero { padding: 72px 0 24px; text-align: center }

.ft-eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* The one place the brand cyan appears on these pages. */
  color: var(--brand-accent);
}

.ft-hero h1 {
  margin: 0 auto 16px;
  /* Wide enough that a six-word headline sets on two lines rather than four.
     16ch broke "Grievances and complaints, handled so the record stands up"
     into a column. */
  max-width: 24ch;
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.08;
  color: var(--ink);
}

.ft-lede {
  margin: 0 auto 28px;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
}

.ft-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }

.ft-proof {
  list-style: none;
  margin: 32px auto 0;
  padding: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
}
.ft-proof li {
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--body);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
/* A tick, drawn rather than an icon font. */
.ft-proof li::before {
  content: '';
  display: inline-block;
  width: 6px; height: 10px;
  margin-right: 8px;
  border: solid var(--brand-accent);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* --------------------------------------------------------- the screenshot */

/*
  Same treatment as the user guide, for the same reason: a raw PNG of a dense
  admin screen on a white page reads as a mistake. The gradient is the app's
  own floor colour rather than a decorative wash, so it looks like the product.
*/
.ft-shot { margin: 40px 0 0 }
.ft-frame {
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, #F3F7FA 0%, #F8F9FA 45%, #EFF4F7 100%);
  border: 1px solid var(--hairline);
}
.ft-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--surface-strong);
  box-shadow: 0 12px 32px rgba(16, 24, 40, .12);
  background: var(--canvas);
}

/* --------------------------------------------------------------- the rows */

.ft-row { padding: 56px 0 }
.ft-row-alt { background: var(--surface-soft) }

.ft-row-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
/* Alternating sides, so the eye is not walked down a single column. */
.ft-row-alt .ft-row-inner > .ft-copy { order: 2 }
.ft-row-alt .ft-row-inner > .ft-shot { order: 1 }

.ft-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.18;
  color: var(--ink);
}
.ft-copy p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--body) }

.ft-row .ft-shot { margin: 0 }

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

.ft-end { padding: 80px 0; text-align: center; border-top: 1px solid var(--hairline) }
.ft-end h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--ink);
}
.ft-end > .shell > p { margin: 0 auto 24px; max-width: 54ch; font-size: 16.5px; color: var(--body) }
.ft-more { font-size: 14px; color: var(--muted); margin-top: 20px }
.ft-more a { color: var(--ink) }

.ft-foot { padding: 28px 0; border-top: 1px solid var(--hairline); background: var(--surface-soft) }
.ft-foot .shell { display: flex; gap: 20px; align-items: center; flex-wrap: wrap }
.ft-foot a { font-size: 14px; color: var(--muted); text-decoration: none }
.ft-foot a:hover { color: var(--ink) }
.ft-foot nav { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto }

/* ------------------------------------------------------------ small screens */

@media (max-width: 900px) {
  .ft-hero { padding: 48px 0 16px }
  .ft-row { padding: 40px 0 }
  .ft-row-inner { grid-template-columns: 1fr; gap: 28px }
  /* Copy first on a narrow screen, whichever side it sits on when wide. */
  .ft-row-alt .ft-row-inner > .ft-copy,
  .ft-row-alt .ft-row-inner > .ft-shot { order: initial }
  .ft-frame { padding: 12px }
  .ft-foot nav { margin-left: 0 }
}

/* ------------------------------------------------------------ the index */

.ft-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px }
.ft-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  text-decoration: none;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color .15s ease, transform .15s ease;
}
.ft-card:hover { border-color: var(--surface-strong); transform: translateY(-2px) }
.ft-card h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ft-card p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--body) }
.ft-card-go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--ink) }
.ft-card-go::after { content: ' \2192' }

@media (prefers-reduced-motion: reduce) { .ft-card { transition: none } }