/* The features page (/features, 2026-10-28), on top of papero-home.css (body.pp-home.pp-uc). Served immutable:
   bump the ?v= in frontend/features/frontend_features.pug with every edit. */

/* "On this page": a strip under the hero, one chip per section. */
.pp-uc .pp-ft-toc{padding:0 0 56px;background:var(--pp-bg)}
.pp-uc .pp-ft-toc .pp-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.pp-uc .pp-ft-toc a{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--pp-line);border-radius:999px;background:var(--pp-surface);font-size:14px;line-height:1.3;color:var(--pp-ink);text-decoration:none}
.pp-uc .pp-ft-toc a:hover{border-color:var(--pp-cta);color:var(--pp-accent-deep)}
.pp-uc .pp-ft-toc__n{font-size:12px;font-weight:600;color:var(--pp-muted);font-variant-numeric:tabular-nums}
.pp-uc .pp-ft-toc .pp-uc-toc__h{width:100%;text-align:center;font-size:13px;font-weight:600;color:var(--pp-muted)}

/* A feature: copy and its list side by side, then the screenshot full width. */
.pp-uc .pp-ft{scroll-margin-top:72px}
.pp-uc .pp-ft-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start;margin:0 0 40px}
.pp-uc .pp-ft-h{margin:0 0 16px;font-size:clamp(28px,3.4vw,38px);line-height:1.12;font-weight:500;letter-spacing:-.028em;color:var(--pp-ink)}
.pp-uc .pp-ft-p{margin:0 0 20px;font-size:18px;line-height:1.55;color:var(--pp-muted)}
.pp-uc .pp-ft-link{font-size:15px;font-weight:600;color:var(--pp-accent-deep);text-decoration:none}
.pp-uc .pp-ft-link:hover{text-decoration:underline}
.pp-uc .pp-ft-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:14px}
.pp-uc .pp-ft-list li{display:flex;gap:12px;margin:0;font-size:16px;line-height:1.5;color:var(--pp-ink)}
.pp-uc .pp-ft-list a{color:var(--pp-accent-deep);text-decoration:underline;text-underline-offset:3px}
.pp-uc .pp-ft-list a:hover,.pp-uc .pp-ft-list a:focus-visible{text-decoration-thickness:2px}
.pp-uc .pp-ft-list li::before{content:'';width:18px;height:18px;margin-top:3px;flex-shrink:0;background:var(--pp-check) center/contain no-repeat}
.pp-uc .pp-ft-shot{margin:0;padding:36px;border-radius:var(--pp-radius)}
.pp-uc .pp-ft-more .pp-uc-cards{margin-top:32px}
.pp-uc .pp-ft-shot img{display:block;width:100%;height:auto;border:1px solid var(--pp-line);border-radius:10px;background:var(--pp-surface);box-shadow:0 1px 2px rgba(23,21,29,.06),0 12px 32px -12px rgba(23,21,29,.22)}

@media (max-width:900px){
  .pp-uc .pp-ft-head{grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:28px}
  .pp-uc .pp-ft-shot{padding:14px}
  .pp-uc .pp-ft-toc{padding-bottom:40px}
}
@media (max-width:700px){
  /* The phone screenshot is tall: keep it phone-sized and centred. */
  .pp-uc .pp-ft-shot picture{display:block;max-width:340px;margin:0 auto}
  .pp-uc .pp-ft-shot img{border-radius:18px}
}