/* ── Trust strip ──────────────────────────────────────────────────────── */
.strip{border-block:1px solid var(--line);background:var(--tint);padding:26px 0}
.strip .wrap{display:flex;justify-content:center;gap:14px 46px;flex-wrap:wrap;
  font:600 12px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-40);text-align:center}

/* ── Sections ─────────────────────────────────────────────────────────── */
section{padding:112px 0}
.statement{text-align:center}
.statement .kicker{display:block;margin-bottom:20px}
.statement .lead{margin:22px auto 0;max-width:34em}

/* pain row - deliberately light, 4 across */
.pains{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 40px;margin-top:72px}
.pain{text-align:center}
.pain .ic{width:44px;height:44px;margin:0 auto 18px;border-radius:12px;
  background:var(--tint-2);display:grid;place-items:center}
.pain .ic svg{width:21px;height:21px;stroke:var(--navy);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pain h3{font-size:16.5px}
.pain p{font-size:14.5px;color:var(--ink-60);margin-top:8px;line-height:1.55}

/* feature block: statement then one big real visual */
.shot{margin-top:60px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#fff}
.shot-cap{margin-top:18px;text-align:center;font-size:13.5px;color:var(--ink-40)}
.shot-phone{margin:60px auto 0;width:264px;border-radius:32px;background:var(--navy);
  padding:9px;box-shadow:var(--shadow)}
.shot-phone img{border-radius:25px}

/* two-up detail rows under a visual */
.detail{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:64px}
.detail .d h3{font-size:17px}
.detail .d p{font-size:14.5px;color:var(--ink-60);margin-top:8px}
.detail .n{font:600 11.5px/1 var(--mono);color:var(--ink-25);letter-spacing:.1em;display:block;margin-bottom:12px}

.alt{background:var(--tint);border-block:1px solid var(--line)}

/* ── Feature grid ─────────────────────────────────────────────────────── */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:64px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.feat{background:#fff;padding:32px 28px}
.feat .ic{width:22px;height:22px;stroke:var(--navy);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.feat h3{font-size:16.5px}
.feat p{font-size:14.5px;color:var(--ink-60);margin-top:8px;line-height:1.55}

/* ── Implementation timeline ──────────────────────────────────────────── */
.steps-t{margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  position:relative}
.steps-t::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:1.5px;
  background:var(--line)}
.st{position:relative;text-align:center}
.st .num{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  font:600 14px/38px var(--mono);margin:0 auto 20px;position:relative;z-index:1}
.st .wk{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-40);display:block;margin-bottom:8px}
.st h3{font-size:16.5px}
.st p{font-size:14.5px;color:var(--ink-60);margin-top:8px;line-height:1.55}

/* ── Closing ──────────────────────────────────────────────────────────── */
.close{background:var(--navy);color:#fff;text-align:center}
.close h2{color:#fff}
.close .lead{color:rgba(255,255,255,.7);margin:22px auto 0;max-width:30em}
.formnote{font-size:13.5px;color:rgba(255,255,255,.45);margin-top:16px}
/* The contact address sits on the navy panel, where inherited link colour is
   invisible against the muted note text - underline it and lift it to white. */
.close .formnote a{color:#fff;text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  section{padding:84px 0}
  .pains,.detail,.feats,.steps-t{grid-template-columns:repeat(2,1fr)}
  .feats{gap:1px}
  .steps-t::before{display:none}
}
@media (max-width:560px){
  .pains,.detail,.feats,.steps-t{grid-template-columns:1fr}
  .pains{gap:38px}
  /* Phone: less air between blocks, and the big screenshots shrink with the
     viewport instead of dominating three screens' worth of scrolling. */
  section{padding:56px 0}
  .pains,.detail,.feats,.steps-t{margin-top:40px}
  .shot{margin-top:36px;border-radius:12px}
  .shot-phone{margin-top:36px;width:210px}
  .feat{padding:24px 20px}
}