/* FaceIndex sitewide refresh v2 — loaded last on public pages. Typography, buttons, cards, focus, motion. */
:root{--fi-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--fi-head:Sora,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--fi-cyan:#3fe0f0;--fi-blue:#1aa7ff;--fi-line:#1e3d50}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--fi-font)!important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
h1,h2,h3,.brand,.hero h1,.indexhero h1{font-family:var(--fi-head)!important;letter-spacing:-.028em;text-wrap:balance}
h1{font-weight:800}h2,h3{font-weight:700}
p,li{text-wrap:pretty}
.article p,.phase-article p,.section p,article p,.box p{line-height:1.78}
::selection{background:rgba(63,224,240,.32);color:#fff}
:focus-visible{outline:2px solid var(--fi-cyan)!important;outline-offset:3px;border-radius:6px}
a{text-underline-offset:3px}
/* buttons */
.btn,.button,.cta,.btn2,.fi-dmca-action,.fi-support-cta,a.btn,button.btn{border-radius:12px!important;font-family:var(--fi-font)!important;font-weight:700!important;letter-spacing:.005em;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease,border-color .15s ease!important}
.btn:not(.secondary):not(.outline):not(.ghost),.button:not(.outline),.cta,.btn.primary,.fi-dmca-action:not(.secondary){background:linear-gradient(120deg,#5eeaf6,#1aa7ff)!important;color:#031821!important;border-color:transparent!important;box-shadow:0 10px 26px -10px rgba(63,224,240,.65)!important;text-decoration:none!important}
.btn:hover,.button:hover,.cta:hover,.fi-dmca-action:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(63,224,240,.8)!important;filter:brightness(1.05);text-decoration:none!important}
.btn.secondary,.btn2,.button.outline,.fi-dmca-action.secondary{background:transparent!important;border:1px solid #2c566b!important;color:#eaf6fb!important;box-shadow:none!important}
.btn.secondary:hover,.btn2:hover,.button.outline:hover{border-color:var(--fi-cyan)!important;background:rgba(63,224,240,.08)!important}
/* header */
header,.header,.top,.nav{backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px)}
header,.header,.top{border-bottom:1px solid var(--fi-line)!important}
header a,.nav a,.navlinks a{font-family:var(--fi-font);font-weight:600}
/* cards & panels */
.card,.related-card,.collection .card,.section .box,.box,.sidebox,.sidecard,.feature-panel,.criterion,.step,.check,.flag,.method-item,.visual,.callout,.notice,.priority-panel{border-radius:16px!important;border-color:#1d3b4e!important;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
a.card:hover,a.related-card:hover,.related-card:hover,.grid a.card:hover{transform:translateY(-3px);border-color:var(--fi-cyan)!important;box-shadow:0 22px 44px -24px rgba(0,0,0,.7);text-decoration:none}
.card h2,.card h3,.related-card strong{font-family:var(--fi-head)}
details{border-color:#1d3b4e!important}summary{font-family:var(--fi-head);font-weight:650}
img{max-width:100%;height:auto}
.hero-card,.phase-hero,.hero-img,.art-visual,.faceart{border-radius:20px!important}
blockquote{border-left:3px solid var(--fi-cyan);margin:1.2em 0;padding:.4em 1.2em;color:#d3e6ef;background:rgba(63,224,240,.05);border-radius:0 12px 12px 0}
table{border-collapse:collapse}th{letter-spacing:.06em}
/* inputs (public pages only) */
input[type=text],input[type=email],input[type=url],input[type=password],textarea,select{font-family:var(--fi-font);border-radius:10px}
/* new-guides band */
.fi-newguides{max-width:1180px;margin:36px auto;padding:30px;border:1px solid #23506a;border-radius:20px;background:radial-gradient(520px 220px at 100% 0,rgba(63,224,240,.16),transparent 70%),linear-gradient(160deg,#0b1d2a,#071722);color:#dcecf3;font-family:var(--fi-font)}
.fi-newguides .k{display:inline-block;font:700 11px/1 var(--fi-font);letter-spacing:.14em;text-transform:uppercase;color:var(--fi-cyan);margin-bottom:10px}
.fi-newguides h2{font:800 clamp(1.4rem,2.6vw,2rem)/1.15 var(--fi-head);margin:0 0 10px;color:#fff;letter-spacing:-.03em}
.fi-newguides p{margin:0 0 18px;color:#b6ccd8;max-width:70ch;line-height:1.7}
.fi-newguides .g{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:0 0 20px}
.fi-newguides .g a{display:block;padding:13px 15px;border:1px solid #21465a;border-radius:12px;background:#0a1a26;color:#e8f6fb;font-weight:600;font-size:14.5px;line-height:1.35;text-decoration:none;transition:border-color .2s,transform .2s}
.fi-newguides .g a:hover{border-color:var(--fi-cyan);transform:translateY(-2px)}
.fi-newguides .g a small{display:block;color:#7fa3b6;font-weight:500;font-size:12px;margin-top:3px}
.fi-newguides .go{display:inline-block;padding:13px 22px;border-radius:12px;background:linear-gradient(120deg,#5eeaf6,#1aa7ff);color:#031821;font-weight:800;text-decoration:none}
@media(max-width:640px){.fi-newguides{margin:24px 14px;padding:22px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
/* older article heroes: show the whole illustration instead of cropping its text */
.phase-hero img,.hero-card img{object-fit:contain!important;background:#071724;min-height:0!important;height:auto!important;align-self:center}
header a,.nav a,.navlinks a,.footer a{text-decoration:none}
header a:hover,.nav a:hover,.navlinks a:hover{text-decoration:none;color:#fff}