/* Join page additions on top of invite.css (same colours, type and buttons). */
.about{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;margin:26px 0 8px;padding:22px;border-radius:26px;background:linear-gradient(150deg,var(--surface),var(--tint));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.about-shot img{display:block;width:100%;border:5px solid #14181b;border-radius:24px;padding-top:7%;background:#f7faf8;box-shadow:0 18px 30px -16px rgba(12,38,44,.5);transform:rotate(-3deg);transition:transform .6s var(--spring)}
.about:hover .about-shot img{transform:rotate(0deg) translateY(-4px)}
.about h2{font-size:22px}
.about h2 em{font-style:normal;background:linear-gradient(100deg,var(--primary),var(--primary-l) 55%,var(--warm));-webkit-background-clip:text;background-clip:text;color:transparent}
.about p{margin:6px 0 12px;color:var(--muted);font-size:15.5px}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.perks li{font-size:14.5px;color:var(--muted);padding-left:16px;position:relative;line-height:1.5}
.perks li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--primary-l)}
.perks b{display:block;color:var(--text);font-size:15px}
.promises{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.promises li{padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--primary-d)}
.steps-title,.faq-title{margin-top:40px;font-size:23px}
.steps{list-style:none;counter-reset:step;padding:0;margin:16px 0 24px;display:grid;gap:14px;position:relative}
.steps::before{content:"";position:absolute;left:39px;top:40px;bottom:40px;width:2px;background:linear-gradient(var(--primary-l),var(--warm));opacity:.35}
.step{margin:0;transition:transform .35s var(--spring),box-shadow .35s}
.step:hover{transform:translateY(-3px)}
.step h2{display:flex;align-items:center;gap:12px;font-size:19px}
.step h2::before{counter-increment:step;content:counter(step);display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-size:15px;flex:none;box-shadow:0 0 0 5px var(--surface)}
.step p{margin:4px 0 8px;color:var(--muted)}
.step p b{color:var(--text)}
.step .primary{margin:14px 0 8px}
.primary[aria-disabled=true]{opacity:.45;pointer-events:none}
form{display:grid;gap:6px;margin-top:10px}
label{font-weight:650;font-size:15px;margin-top:6px}
input{font:inherit;padding:12px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg2);color:var(--text);width:100%;min-height:50px;transition:border-color .25s,box-shadow .25s,background .25s}
input:focus{outline:none;border-color:var(--primary-l);background:var(--surface);box-shadow:0 0 0 4px rgba(20,184,166,.18)}
button.primary{border:0}
button.primary:disabled{opacity:.6;cursor:default;transform:none}
.msg{display:none;padding:12px 16px;border-radius:14px;margin:4px 0;font-size:15px}
.msg.ok{display:block;background:#e3f3ea;color:#16503d;animation:open .4s var(--ease)}
.msg.err{display:block;background:#fce8e6;color:#8c1d18;animation:open .4s var(--ease)}
.step .note{font-size:14px}
@media(max-width:480px){.about{grid-template-columns:1fr;text-align:left}.about-shot{width:150px;margin:0 auto}}
@media(prefers-color-scheme:dark){.msg.ok{background:#16301f;color:#b7e1c1}.msg.err{background:#3a1a17;color:#f6b8b0}}