/* About page (UI study, Oct 8, applied Oct 9). Served as a file: the site's CSP blocks inline styles. */
:root{--ink:#1d2033;--muted:#565b6e;--line:#e0dcea;--bg:#f7f6fb;--accent:#4f46e5;--accent-dark:#4338ca}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--accent)}
.l-wrap{max-width:860px;margin:0 auto;padding:0 16px}
.l-top{background:#fff;border-bottom:1px solid var(--line)}
.l-top-in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.l-brand{display:inline-flex;align-items:center;gap:8px;padding:10px 0;font-weight:700;color:var(--ink);text-decoration:none}
.l-brand img{border-radius:8px}
.l-signin{font-weight:700;text-decoration:none;padding:8px 16px;border:1px solid var(--accent);border-radius:999px}
.l-hero{background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);padding:44px 0 26px}
.l-hero h1{font-size:clamp(30px,5.4vw,46px);line-height:1.12;margin:0 0 14px;letter-spacing:-.01em}
.l-lead{font-size:clamp(17px,2.2vw,20px);color:var(--muted);max-width:640px;margin:0 0 22px}
.l-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.l-btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;text-decoration:none;padding:12px 22px;border-radius:12px}
.l-btn:hover{background:var(--accent-dark)}
.l-btn-quiet{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.l-btn-quiet:hover{background:#eef0ff}
.l-btn:focus-visible,.l-signin:focus-visible,.l-faq summary:focus-visible,.l-foot a:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
h2{font-size:24px;margin:0 0 14px}
.l-chat{padding-top:18px;padding-bottom:6px}
.l-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:520px}
.l-thread li{padding:10px 14px;border-radius:18px;max-width:88%}
.l-you{align-self:flex-end;background:#2f5fd0;color:#fff;border-bottom-right-radius:5px}
.l-coach{align-self:flex-start;background:#e9e9eb;color:#202124;border-bottom-left-radius:5px}
.l-note{font-size:14px;color:var(--muted);margin:10px 0 0}
.l-sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.l-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding-top:30px}
.l-points div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.l-points h3{margin:0 0 6px;font-size:18px}
.l-points p{margin:0;color:var(--muted);font-size:16px}
.l-faq{padding-top:34px}
.l-faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:0 0 10px;padding:0 16px}
.l-faq summary{cursor:pointer;font-weight:700;padding:14px 0}
.l-faq details p{margin:0 0 14px;color:var(--muted)}
.l-sms{padding-top:34px}
.l-sms .cta{background:#fff;border:2px solid #2d6c56;border-radius:12px;padding:20px;margin:0 0 14px}
.l-sms .cta h3{margin:0 0 10px;font-size:20px}
.l-sms .cta p{margin:0 0 10px}
.l-fine{font-size:15px;color:var(--muted);margin:0 0 8px}
.l-foot{color:var(--muted);font-size:14px;padding:30px 0 44px}
.l-foot a{color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.l-btn{transition:background .15s}}