/* SentryReply · /clips (31/10/2026). Chargé après home.css : réutilise ses jetons,
   sa nav, ses boutons, ses étapes et son final. Ici seulement ce qui est propre à
   la page : les deux démos (lecteurs 9:16 natifs), les étapes et le bloc « qui ».  */

.clips-hero{padding:120px 0 40px}
.clips-hero .lead{max-width:36em}
.clips-hero .btn-row{margin-top:8px}

/* ─── démos ────────────────────────────────────────────────────────────── */
.demos{padding:40px 0 72px}
.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);justify-items:center;margin-top:28px}
.demo{display:grid;gap:16px;justify-items:center;margin:0;width:100%}
.demo-phone{position:relative;width:min(100%,340px);aspect-ratio:9/16;border-radius:30px;padding:8px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 50px 100px -30px rgba(0,0,0,.95),0 0 140px -30px rgba(75,107,255,.75)}
.demo-phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:23px;background:#05060A}
.demo-tag{position:absolute;top:20px;left:20px;z-index:1;padding:6px 11px;border-radius:999px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text);background:rgba(7,8,12,.72);box-shadow:0 0 0 1px var(--hair-2) inset;pointer-events:none}
.demo figcaption{max-width:22rem;text-align:center;font-size:.92rem;line-height:1.5;color:var(--text-2)}
.demo figcaption .mono{display:block;margin-bottom:6px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt-2)}
.demo-note{max-width:40em;margin:36px auto 0;text-align:center;color:var(--text-2)}

/* ─── étapes ───────────────────────────────────────────────────────────── */
.steps-4{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px;counter-reset:st}
.steps-4 li{display:grid;align-content:start;gap:10px;padding:clamp(20px,2.4vw,28px);border-radius:calc(var(--r) + 4px);background:linear-gradient(170deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid var(--hair)}
.steps-4 .mono{font-size:.78rem;color:var(--cobalt-2);letter-spacing:.08em}
.steps-4 h3{font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.01em;line-height:1.15}
.steps-4 p{color:var(--text-2);font-size:.96rem}

/* ─── qui ──────────────────────────────────────────────────────────────── */
.who-box{max-width:44em}
.who-box p{color:var(--text-2);font-size:1.05rem;margin-top:12px}
.who-box a,.final a.mail{color:var(--text);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .clips-hero{padding:104px 0 24px}
  .demo-grid{grid-template-columns:1fr}
  .demo-phone{width:min(100%,320px)}
  .steps-4{grid-template-columns:1fr}
}