/* ============================================================
   Features page. Loads after assets/home.css, which supplies the tokens,
   header, footer, shared .ph hero, .split sections, .stage devices, .ic
   icons and the final .cta. Phone first: every group is a label, a
   headline, the real app screen, then plain rows (icon, name, one line),
   read like an iOS settings list. Desktop alternates phone left / right.
   Icons are Lucide (ISC license, lucide.dev), inlined.
   ============================================================ */

/* each group clips its device glow at its own edges (like the homepage), so nothing
   can nudge the page sideways on an iPhone */
.fx-sec { padding:64px 0 0; overflow:hidden; }
.fx-sec--last { padding-bottom:var(--sec); }
/* phones: smaller devices than the homepage's, so a long page stays quick to scroll */
.fx .split { row-gap:28px; }
.fx .stage--phone { width:min(46vw, 300px); }
.fx .stage--watch { width:min(44vw, 280px); }
/* two or three phones in one image: wider than a single phone, shorter on the page */
.fx .stage--duo { width:min(84vw, 480px); }
.fx .stage--trio { width:min(94vw, 600px); }

/* the feature rows */
.fx-list { max-width:520px; margin-inline:auto; text-align:left; }
.fx-row { display:grid; grid-template-columns:26px minmax(0,1fr); column-gap:16px; align-items:start; padding:12px 0; }
.fx-row + .fx-row { box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.fx-row .ic { width:24px; height:24px; margin-top:1px; }
.fx-row h3 { font-size:17px; font-weight:700; line-height:1.3; letter-spacing:-.005em; color:var(--fg); }
.fx-row p { margin-top:3px; font-size:15px; line-height:1.45; color:var(--t-60); text-wrap:pretty; }

@media (min-width:900px) {
  .fx-sec { padding-top:var(--sec); }
  .fx .split { row-gap:0; }
  .fx .stage--phone { width:min(100%, 360px); }
  .fx .stage--watch { width:min(100%, 330px); }
  .fx .stage--duo { width:min(100%, 540px); }
  /* three phones need more room: the image spills a little into the gap on both
     sides, so the text column (and its two-line headline) keeps its width */
  .fx .stage--trio { width:120%; max-width:700px; flex-shrink:0; }
  .fx-list { margin-inline:0; }
}

/* jump links under the hero: every group one tap away, each name on one line */
.fx-jump { margin:28px auto 0; max-width:400px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 12px; }
.fx-jump a { display:flex; align-items:center; justify-content:center; min-height:44px; font-size:15px; font-weight:600; color:var(--accent); white-space:nowrap; }
@media (hover:hover) and (pointer:fine) { .fx-jump a:hover { text-decoration:underline; text-underline-offset:4px; } }

/* groups with no device image: head and rows in one centered column */
.fx-sec--text .fx-head { text-align:center; }
.fx-sec--text .fx-head .h2 { max-width:16ch; margin-inline:auto; }
.fx-sec--text .fx-list { margin-top:32px; }
.fx-note { margin:24px auto 0; max-width:520px; font-size:15px; line-height:1.5; color:var(--t-60); text-wrap:pretty; }
.fx-out { margin:8px auto 0; max-width:520px; }
.fx-out a { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:600; color:var(--accent); }
@media (min-width:900px) {
  .fx-jump { max-width:720px; grid-template-columns:repeat(6, minmax(0,1fr)); }
  .fx-sec--text .fx-list { margin-inline:auto; }
}