/* Shared theme for Match Check + Extras. Page-specific styles live in each page. */
:root{--ink:#2b1233;--ink2:#5d4766;--cream:#fdf6ee;--card:#fffdfa;--line:#eadfd6;--rose:#e0476b;--coral:#ff7a59;--plum:#6a2c82;--amber:#d98a00;--teal:#17a08c;--green:#2e9d4f;--red:#d92d4b;--ai:linear-gradient(110deg,#7a3cff,#e0476b 60%,#ff7a59)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:15.5px/1.55 "Plus Jakarta Sans",system-ui,sans-serif;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 15% -5%,#ffd9c9 0,transparent 60%),radial-gradient(800px 500px at 100% 0,#f6cfe0 0,transparent 60%)}
h1,h2,h3,h4{font-family:"DM Serif Display",Georgia,serif;font-weight:400;margin:0;letter-spacing:0;line-height:1.15}
p,li,dd,small{text-wrap:pretty} /* no one-word orphans */
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--plum);outline-offset:2px;border-radius:6px}
.wrap{max-width:1360px;margin:0 auto;padding:0 20px}
/* top bar (injected by extras/nav.js) */
.topbar{display:flex;align-items:center;gap:18px;padding:18px 0 10px;flex-wrap:wrap}
.topbar .logo{font:400 26px/1 "DM Serif Display",serif;color:var(--ink);text-decoration:none;white-space:nowrap}
.topbar .logo em{color:var(--rose)}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.topbar nav a{padding:7px 13px;border-radius:99px;text-decoration:none;color:var(--ink2);font-size:14px;font-weight:600;border:1px solid transparent;transition:.2s}
.topbar nav a:hover{border-color:var(--line);background:#fff;color:var(--ink)}
.topbar nav a[aria-current=page]{background:var(--ink);color:#fff}
/* page intro */
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:14px 0 20px}
.intro h1{font-size:clamp(32px,4vw,46px);text-wrap:balance}
.intro p{margin:8px 0 0;max-width:640px;color:var(--ink2)}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
/* building blocks */
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:0 14px 40px #2b12330f;padding:22px}
.sec{display:block;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-size:14px;transition:.2s}
.chip:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2b12331f;border-color:var(--rose)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:99px;padding:2px 9px;white-space:nowrap}
.vp{font-size:11.5px;font-weight:800;letter-spacing:.03em;color:#fff;padding:3px 9px;border-radius:99px;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:10px 16px;font-weight:700;text-decoration:none;color:var(--ink);transition:.2s}
.btn:hover{border-color:var(--rose);transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.ai{background:var(--ai);color:#fff;border:0;box-shadow:0 10px 30px #9b5cff44}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
input[type=text],input[type=password],select,textarea{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;width:100%}
textarea{resize:vertical;line-height:1.5}
.muted{color:var(--ink2)}
.small{font-size:13px}
.footer{text-align:center;padding:28px 20px 36px;color:var(--ink2);font-size:14px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1240px) and (min-width:761px){.topbar{gap:12px}.topbar nav{gap:2px}.topbar nav a{padding:6px 9px;font-size:13px}.topbar .btn{padding:8px 12px;font-size:13.5px}}
@media(max-width:760px){.topbar{gap:10px}.topbar .logo{font-size:22px}.topbar .btn{margin-left:auto;padding:8px 12px;font-size:13px}.topbar nav{order:3;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px}.topbar nav::-webkit-scrollbar{display:none}.topbar nav a{white-space:nowrap}}
@media(max-width:560px){.wrap{padding:0 16px}.topbar nav{margin:0 -16px;padding:2px 16px}}