/**
 * /features — the whole product, one page.
 *
 * Built from the approved mockup, but in the site's own palette rather than the
 * mockup's teal: --paper / --ink / --sage, the same tokens every other page uses,
 * so the header and footer do not change character halfway through the site.
 *
 * Every panel here is HTML and CSS rather than a screenshot. Screenshots of an app
 * that ships every fortnight are stale within the month, they carry no text for
 * search engines, and they cannot reflow on a phone — which is where most of this
 * traffic reads it.
 */

/* ── hero ──────────────────────────────────────────────────────────────── */
.f-hero {
  background: linear-gradient(160deg, var(--night) 0%, #14261F 55%, #1B3129 100%);
  color: #fff;
  padding: 72px 0 84px;
}
.f-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.f-hero .eyebrow { color: #A9BE90; letter-spacing: .18em; font-size: 11px; margin: 0 0 14px; }
.f-hero h1 {
  font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08; margin: 0 0 18px; letter-spacing: -.02em;
}
.f-hero h1 .sage { color: #A9BE90; }
.f-hero-sub { color: #CFD5C8; font-size: 17px; line-height: 1.6; margin: 0 0 28px; max-width: 34em; }
.f-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.f-btn-primary, .f-btn-ghost {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 999px;
  padding: 14px 26px; font-weight: 600; font-size: 15px; text-decoration: none;
}
.f-btn-primary { background: var(--sage); color: #101410; }
.f-btn-primary:hover { background: #A9BE90; }
.f-btn-ghost { border: 1px solid rgba(255,255,255,.34); color: #fff; }
.f-btn-ghost:hover { border-color: #fff; }
.f-hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.f-hero-points li { display: flex; align-items: center; gap: 8px; color: #C6CEBB; font-size: 14px; }
.f-hero-points svg { flex: none; }

/* The phone trio - the app's own screens, at the sizes the layout was built for.
   Sources are ~2x the rendered width so they stay sharp on a retina display. */
.f-phones { display: flex; align-items: center; justify-content: center; gap: 14px; }
.f-hero-shot {
  display: block; height: auto; flex: none; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14); background: #0E1512;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
.f-hero-shot.is-left  { width: 190px; }
.f-hero-shot.is-mid   { width: 214px; transform: translateY(-18px); }
.f-hero-shot.is-right { width: 150px; }

/* ── category rail ─────────────────────────────────────────────────────── */
/* Parks BELOW the site header, which is itself sticky at top:0 with z-index 50
   and is 67px tall (66px under 1080px). At top:0 the rail simply slid under it
   and disappeared. */
.f-rail { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 67px; z-index: 30; }
.f-rail-row { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0; scrollbar-width: none; }
.f-rail-row::-webkit-scrollbar { display: none; }
.f-rail a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
  padding: 10px 18px; border-radius: 999px; color: var(--ink-soft); font-weight: 600; font-size: 14px;
}
.f-rail a:hover { background: var(--paper-2); color: var(--ink); }
.f-rail a.is-on { background: var(--sage-deep); color: #fff; }

/* ── feature blocks ────────────────────────────────────────────────────── */
.f-block { padding: 66px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 140px; }
.f-block:nth-child(even) { background: var(--paper-2); }
.f-block-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 46px; align-items: start; }
.f-num {
  display: inline-grid; place-items: center; width: 40px; height: 28px; border-radius: 8px;
  background: var(--sage-deep); color: #fff; font-family: var(--display); font-size: 13px;
  letter-spacing: .06em; margin-bottom: 14px;
}
.f-block h2 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 31px); margin: 0 0 10px; color: var(--ink); letter-spacing: -.01em; }
.f-block-lede { color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* Two columns: the tick, then the label. Anything extra on a line (a Coming
   soon chip, say) must live INSIDE the label span - as a direct child it
   becomes a third grid item and drops into the tick column on a new row. */
.f-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.f-list svg { margin-top: 3px; color: var(--sage-deep); }

/* ── the mini panels beside each block ─────────────────────────────────── */
.f-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.f-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px;
  box-shadow: 0 10px 28px rgba(17,17,19,.05);
}
.f-block:nth-child(even) .f-card { box-shadow: 0 10px 28px rgba(17,17,19,.07); }
.f-card h3 { font-family: var(--display); font-size: 13.5px; margin: 0 0 10px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.f-card .f-crown { color: #C9A227; }
.f-k { color: var(--ink-mute); font-size: 11px; }
.f-v { font-family: var(--display); color: var(--ink); font-size: 20px; line-height: 1.1; }
.f-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.f-row:first-of-type { border-top: 0; }
.f-pill { display: inline-block; background: var(--paper-2); border-radius: 999px; padding: 4px 10px; font-size: 11px; color: var(--ink-soft); }
.f-chip { display: inline-block; background: #EDF1E6; color: var(--sage-deep); border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 600; }
.f-cta-sm { display: block; text-align: center; background: var(--sage-deep); color: #fff; border-radius: 10px; padding: 9px; font-size: 12.5px; font-weight: 600; text-decoration: none; margin-top: 10px; }
.f-bars { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin: 10px 0 6px; }
.f-bars i { flex: 1; background: var(--sage); border-radius: 3px 3px 0 0; }
.f-bars i.is-mute { background: var(--line); }
.f-dark { background: var(--night-2); border-color: var(--night-2); color: #fff; }
.f-dark h3, .f-dark .f-v { color: #fff; }
.f-dark .f-k, .f-dark .f-row { color: #9AA497; border-color: rgba(255,255,255,.12); }
.f-dial { width: 92px; height: 92px; margin: 2px auto 8px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--sage) 0 85%, rgba(255,255,255,.14) 85% 100%); }
.f-dial i { width: 70px; height: 70px; border-radius: 50%; background: var(--night-2); display: grid; place-items: center; font-style: normal; }
.f-dial b { font-family: var(--display); font-size: 22px; color: #fff; }
.f-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.f-person span { display: block; width: 34px; height: 34px; margin: 0 auto 6px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line); }
.f-person small { font-size: 10px; color: var(--ink-mute); display: block; line-height: 1.3; }
.f-qr { width: 78px; height: 78px; margin: 4px auto 8px; border-radius: 10px;
  background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 13px 13px; }

/* Marks a line as not shipped yet. Muted rather than loud: it is a promise, not
   a feature, and it should not out-shout the things people can use today. */
/* Paid. Deliberately legible rather than shouty: hiding what costs money is how
   you get refund requests. Matches the in-app PremiumBadge in meaning, not colour. */
.f-prem {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  background: #EDF1E6; border: 1px solid #D5DEC6; color: var(--sage-deep);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700;
  letter-spacing: .01em; white-space: nowrap;
}

.f-soon {
  display: inline-block; vertical-align: 1px; margin-left: 4px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-mute);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap;
}

/* A closing note under a list - quieter than a bullet, and set apart, because it
   is a promise about the data rather than another thing the app does. */
.f-note {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start;
  margin: 20px 0 0; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: 13.5px; line-height: 1.55;
}
.f-block:nth-child(even) .f-note { background: #fff; }
.f-note svg { margin-top: 3px; color: var(--sage-deep); }

/* ── real app screenshots ──────────────────────────────────────────────── */
/* Straight off the phone, so they are tall portraits. Given a device frame and a
   caption beneath, because a screenshot with no words is invisible to search and
   meaningless to anyone who cannot see it. */
.f-shots { align-items: start; }
.f-shot { margin: 0; }
.f-shot img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  background: var(--night); border: 1px solid rgba(17,17,19,.14);
  box-shadow: 0 16px 38px rgba(17,17,19,.16);
}
.f-shot figcaption {
  margin-top: 12px; color: var(--ink-soft); font-size: 13px; line-height: 1.5;
}

/* Health mixes one whole phone screen (aspect 0.46) with three card crops
   (about 1.0). Forcing them into equal cells would letterbox or crop something,
   so the tall one takes its own column and the cards stack beside it. The ratio
   is chosen so the two columns finish at roughly the same height. */
.f-health-shots { grid-template-columns: 1.45fr 1fr; align-items: start; }
.f-health-stack { display: grid; gap: 18px; }

/* ── closing premium band ──────────────────────────────────────────────── */
.f-premium { background: linear-gradient(160deg, var(--night) 0%, #14261F 100%); color: #fff; padding: 54px 0; }
.f-premium-row { display: grid; grid-template-columns: 1fr auto auto; gap: 28px; align-items: center; }
.f-premium h2 { font-family: var(--display); font-size: 28px; margin: 0 0 6px; }
.f-premium p { color: #C6CEBB; margin: 0; font-size: 15px; }
.f-plans { display: flex; gap: 10px; }
.f-plan { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px 20px; text-align: center; }
.f-plan.is-best { border-color: var(--sage); }
.f-plan small { display: block; color: #C6CEBB; font-size: 11px; }
.f-plan b { font-family: var(--display); font-size: 19px; }
.f-save { display: inline-block; background: var(--sage); color: #101410; border-radius: 999px; padding: 2px 9px; font-size: 10px; font-weight: 700; margin-top: 4px; }
.f-premium-points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.f-premium-points li { color: #C6CEBB; font-size: 13px; display: flex; align-items: center; gap: 7px; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .f-rail { top: 66px; }
}
@media (max-width: 1000px) {
  .f-hero-grid, .f-block-grid { grid-template-columns: 1fr; }
  .f-health-shots { grid-template-columns: 1.3fr 1fr; }
  .f-shots { grid-template-columns: repeat(3, 1fr); }
  .f-phones { margin-top: 30px; }
  .f-cards { grid-template-columns: repeat(2, 1fr); }
  .f-premium-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* Wraps instead of scrolling sideways. As a one-line scroller its links sat
     past the right edge of a phone viewport, which site.spec.ts flags on every
     page - and a category you have to swipe to find is one you do not find. */
  .f-rail-row { flex-wrap: wrap; overflow-x: visible; }
  .f-rail a { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 620px) {
  .f-hero { padding: 52px 0 60px; }
  .f-block { padding: 46px 0; }
  .f-cards, .f-health-shots { grid-template-columns: 1fr; }
  /* Two 172px phones plus the gap came to 358px inside a 334px column, so the
     row overran the right gutter and sat flush against the screen edge. Narrow
     them to fit, and allow a wrap so no future width can do it again. */
  .f-phones { flex-wrap: wrap; }
  .f-hero-shot.is-left { width: 150px; }
  .f-hero-shot.is-mid  { width: 168px; transform: none; }
  .f-hero-shot.is-right { display: none; }
  .f-plans { width: 100%; }
  .f-plan { flex: 1; }
}