:root { color-scheme:light; --ink:#171719; --muted:#68686d; --paper:#eef0f2; --panel:rgba(255,255,255,.9); --line:rgba(20,20,22,.12); --brand:#c8102e; --brand-dark:#9e0b24; --silver:#c7c9ce; --field:#f2f2f3; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-geist),system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
main { min-height:100svh; padding:38px 18px 22px; position:relative; overflow:hidden; display:grid; place-items:center; }
.ambient { position:fixed; border-radius:50%; filter:blur(2px); pointer-events:none; opacity:.55; }
.ambient-one { width:560px; height:560px; background:radial-gradient(circle,rgba(200,16,46,.18) 0,transparent 68%); top:-280px; left:-180px; }
.ambient-two { width:620px; height:620px; background:radial-gradient(circle,rgba(116,120,128,.2) 0,transparent 68%); bottom:-350px; right:-260px; }
.card { width:min(100%,1040px); background:var(--panel); border:1px solid rgba(255,255,255,.9); box-shadow:0 30px 90px rgba(24,24,27,.16),0 2px 8px rgba(24,24,27,.06); backdrop-filter:blur(22px); border-radius:32px; overflow:hidden; display:grid; grid-template-columns:.9fr 1.1fr; position:relative; }
.identity,.exchange { padding:58px; }
.identity { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.13),transparent 30%),linear-gradient(145deg,#151517 0%,#36363a 62%,#1b1b1e 100%); color:#fff; display:flex; flex-direction:column; }
.identity::before { content:""; position:absolute; z-index:-2; width:420px; height:520px; right:-155px; bottom:20px; background:url("apffa-logo.png") center/contain no-repeat; opacity:.085; filter:grayscale(1); }
.identity::after { content:""; position:absolute; z-index:-1; width:7px; inset:0 0 0 auto; background:linear-gradient(#e01b3c,var(--brand),#7f071d); box-shadow:-8px 0 24px rgba(200,16,46,.2); }
.portrait-wrap { width:136px; height:136px; position:relative; margin-bottom:42px; }
.portrait,.monogram { display:block; width:100%; height:100%; border-radius:26px; object-fit:cover; object-position:42% 31%; border:2px solid rgba(255,255,255,.42); box-shadow:0 14px 34px rgba(0,0,0,.34); }
.monogram { display:grid; place-items:center; background:linear-gradient(145deg,#d6d7da,#86888e); color:#1d1d20; font-size:32px; font-weight:650; letter-spacing:-.06em; }
.available { position:absolute; width:18px; height:18px; right:-3px; bottom:-3px; background:#fff; border:5px solid var(--brand); border-radius:50%; }
.eyebrow { margin:0 0 10px; text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; opacity:.65; }
h1,h2 { margin:0; letter-spacing:-.045em; line-height:1.02; }
h1 { font-size:clamp(40px,5vw,58px); font-weight:650; }
h2 { font-size:clamp(31px,4vw,43px); font-weight:620; }
.role { font-size:15px; margin:13px 0 24px; color:rgba(255,255,255,.72); }
.role span { opacity:.45; }
.bio { font-size:16px; line-height:1.6; color:rgba(255,255,255,.78); max-width:38ch; margin:0 0 18px; }
.context { font-size:12px; padding:9px 12px; align-self:flex-start; border-radius:999px; background:rgba(255,255,255,.09); margin:0 0 26px; color:rgba(255,255,255,.78); }
.context strong { color:#fff; font-weight:600; }
.primary { width:100%; min-height:56px; border:0; border-radius:15px; background:var(--brand); color:white; font-weight:680; padding:0 20px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; box-shadow:0 10px 24px rgba(200,16,46,.2); transition:transform .18s,background .18s,box-shadow .18s; text-decoration:none; }
.primary:hover { background:var(--brand-dark); transform:translateY(-1px); box-shadow:0 13px 28px rgba(200,16,46,.26); }
.primary:active { transform:translateY(1px); }
.primary:disabled { opacity:.7; cursor:wait; }
.save { background:#fff; color:#242427; margin-top:auto; justify-content:center; gap:10px; box-shadow:none; border-left:4px solid var(--brand); }
.save:hover { background:#f0f0f2; }
.button-icon { font-size:22px; font-weight:400; }
.links { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:19px; }
.links a { color:rgba(255,255,255,.65); font-size:12px; text-align:center; text-decoration:none; padding:10px 3px; border-radius:9px; transition:.18s; }
.links a:hover { color:#fff; background:rgba(255,255,255,.08); }
.exchange { background:rgba(255,255,255,.58); }
.exchange>.eyebrow { color:var(--brand); }
.intro { margin:15px 0 29px; color:var(--muted); line-height:1.5; font-size:15px; }
.field { margin-bottom:16px; }
label { display:flex; justify-content:space-between; font-size:12px; font-weight:650; margin:0 2px 8px; }
label span { font-weight:450; color:#88938e; }
input,textarea { width:100%; border:1px solid transparent; background:var(--field); color:var(--ink); border-radius:13px; min-height:52px; padding:0 15px; outline:none; transition:border .18s,box-shadow .18s,background .18s; }
textarea { padding-top:14px; resize:vertical; }
input::placeholder,textarea::placeholder { color:#99a29e; }
input:focus,textarea:focus { background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(200,16,46,.12); }
.optional-toggle { width:100%; border:0; border-top:1px solid var(--line); background:none; padding:16px 2px; color:var(--muted); display:flex; justify-content:space-between; cursor:pointer; font-size:13px; }
.optional-fields { display:block; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.error { color:#9b302b; font-size:13px; margin:0 0 12px; }
.divider { display:flex; align-items:center; gap:12px; color:#99a29e; font-size:11px; margin:14px 0; }
.divider:before,.divider:after { content:""; height:1px; background:var(--line); flex:1; }
.sms { display:flex; justify-content:center; gap:8px; text-decoration:none; color:var(--brand); font-size:14px; font-weight:650; padding:7px; }
.sms-primary { margin-bottom:0; }
.form-divider { margin:18px 0 22px; }
.privacy { text-align:center; color:#929b97; font-size:10px; margin:20px 0 0; }
.success { min-height:540px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; animation:rise .45s ease both; }
.success .check { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:#f7dce1; color:var(--brand); font-size:26px; margin-bottom:24px; }
.success>p:not(.eyebrow) { max-width:38ch; line-height:1.6; color:var(--muted); margin:18px 0 30px; }
.secondary { min-height:50px; border:1px solid var(--line); background:#fff; color:var(--brand); border-radius:13px; padding:0 24px; font-weight:650; cursor:pointer; display:flex; align-items:center; text-decoration:none; }
.text-button { border:0; background:none; color:var(--muted); margin-top:16px; cursor:pointer; }
footer { font-size:11px; color:#8c9691; margin-top:20px; position:relative; }
@keyframes rise { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@media (max-width:760px) {
  main { padding:0; display:block; }
  .card { border-radius:0; display:block; border:0; box-shadow:none; }
  .identity,.exchange { padding:38px 24px; }
  .identity { min-height:580px; }
  .portrait-wrap { width:112px; height:112px; margin-bottom:36px; }
  .save { margin-top:auto; }
  .exchange { min-height:calc(100svh - 40px); padding-top:48px; }
  footer { display:none; }
}
@media (max-width:390px) { .identity,.exchange { padding-left:20px; padding-right:20px; } .split { grid-template-columns:1fr; gap:0; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }