/* how page-specific CSS (from Claude Design) */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.fcard .n{font-family:'Spectral';font-weight:900;font-size:1.4rem;color:#fff;width:44px;height:44px;border-radius:12px;background:var(--green);display:grid;place-items:center;margin-bottom:16px}
.fcard h4{color:var(--brown);margin-bottom:8px}
.fcard p{color:var(--muted);font-size:.9rem}
.persona{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.pc{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:#fff}
.pc .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;color:#fff;margin-bottom:14px}
.pc h4{color:var(--brown);margin-bottom:8px}
.pc ul{list-style:none;margin:10px 0 16px}
.pc li{padding:5px 0;font-size:.88rem;color:var(--muted)}
.pc li::before{content:'✓ ';color:var(--green);font-weight:700}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}.persona{grid-template-columns:1fr}}