/* Email Protector design system v3: AccessGrid x Mercor, in blue (15 Nov 2026).
   AccessGrid: light grey page, white framed sections, floating pill nav, grotesk 500 headlines
   with tight tracking, glossy blue gradient buttons (6px), dashed blueprint lines, statements
   with blue highlighted phrases, one dark section.
   Mercor: Inter-family type, huge light-weight grey copy, visible grid column lines with tiny
   mono measurement labels, blue tint ramp, blurred light-ray gradients, thin data bars. */
:root{
  --page:#f7f7f8; --frame:#ffffff; --line:#ececef; --line-2:#d9d9de; --guide:rgba(17,24,39,.05);
  --ink:#16161a; --ink-2:#26262b; --muted:#5e5f6b; --soft:#6b7280; --faint:#8b8c97;
  --dark:#1d1d22; --dark-2:#26262b; --dark-line:#3a3a40;
  --blue-50:#f0f4ff; --blue-100:#e2eaff; --blue-200:#c7d6ff; --blue-300:#a1bbff; --blue-400:#7096ff;
  --blue-500:#3b74ff; --blue-600:#2a5df5; --blue-700:#1f48cc; --blue-900:#0e1f5c;
  --amber:#b45309; --violet:#5b4fd6;
  --sans:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --r-btn:6px; --r-sm:8px; --r-card:12px; --r-frame:16px;
  --sh-nav:0 1px 2px rgba(17,24,39,.04),0 8px 24px -8px rgba(17,24,39,.12),0 0 0 1px rgba(17,24,39,.06);
  --sh-ui:0 1px 1px rgba(20,31,87,.06),0 12px 32px -12px rgba(20,31,87,.22),0 0 0 1px rgba(20,31,87,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
a{color:var(--blue-600)}
h1,h2,h3{font-family:var(--sans);font-weight:500;margin:0;color:var(--ink-2);letter-spacing:-.035em}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:0;font-weight:400}
.label{font-family:var(--mono);font-size:12px;color:var(--blue-600);margin:0 0 14px}

/* frame: AccessGrid white sheet on grey with Mercor column guides */
.frame{position:relative;max-width:1200px;margin:0 auto;background:var(--frame);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.frame:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/6 - 1px),var(--guide) calc(100%/6 - 1px),var(--guide) calc(100%/6))}
.sec{position:relative;padding:96px 56px;border-top:1px solid var(--line)}
.sec:first-child{border-top:0}
@media (max-width:720px){.sec{padding:64px 20px}.frame:before{background:repeating-linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),var(--guide) calc(50% - 1px),var(--guide) 50%)}}

/* floating pill nav (AccessGrid) */
.nav{position:sticky;top:12px;z-index:20;display:flex;justify-content:center;padding:12px 16px 0;pointer-events:none;margin-bottom:-64px}
.nav-in{pointer-events:auto;display:flex;align-items:center;gap:28px;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-radius:13px;padding:6px 6px 6px 16px;box-shadow:var(--sh-nav)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-2);font-weight:600;font-size:15px;letter-spacing:-.02em}
.nav-links{display:flex;gap:22px}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500}
.nav-links a:hover{color:var(--blue-600)}
@media (max-width:720px){.nav-links{display:none}.nav-in{gap:16px}}

/* buttons (AccessGrid gloss) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-btn);font:500 14px/1 var(--sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;border:0;transition:filter .15s,background-color .15s;white-space:nowrap}
.btn-primary{color:#fff;background:linear-gradient(#3b78ff,#2a5df5);box-shadow:0 1px 1px rgba(20,31,87,.2),0 2px 4px -2px rgba(20,31,87,.4),0 0 0 1px #2b64f8,inset 0 1px .5px rgba(255,255,255,.18)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{color:var(--ink-2);background:#eeeef0}
.btn-secondary:hover{background:#e4e4e8}
.btn-lg{height:46px;padding:0 20px;font-size:15px}
:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}

/* tags */
.tag{display:inline-flex;align-items:center;gap:6px;width:fit-content;font:400 12px/1 var(--mono);padding:6px 8px;border-radius:var(--r-btn);background:#f2f2f4;color:var(--muted)}
.tag:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag-weak{color:var(--amber);background:#fdf4e9}
.tag-mid{color:var(--violet);background:#f1f0fd}
.tag-best{color:var(--blue-700);background:var(--blue-50)}

/* light rays (Mercor) */
.rays{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rays:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-20%;height:110%;background:repeating-linear-gradient(90deg,rgba(59,116,255,0) 0 22px,rgba(59,116,255,.55) 34px,rgba(161,187,255,.25) 44px,rgba(59,116,255,0) 58px);filter:blur(10px);-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%);opacity:.5}

/* footer */
footer.site{max-width:1200px;margin:0 auto;padding:48px 56px 64px;border:1px solid var(--line);border-bottom:0;background:var(--frame);display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px;font-size:14px}
footer.site p{color:var(--muted);margin:10px 0 0;max-width:24em}
footer.site h4{font:400 12px/1 var(--mono);color:var(--faint);margin:0 0 14px}
footer.site a.fl{display:block;color:var(--ink-2);text-decoration:none;margin:0 0 10px}
footer.site a.fl:hover{color:var(--blue-600)}
footer.site .fine{grid-column:1/-1;font-size:12px;color:var(--faint);border-top:1px solid var(--line);padding-top:20px;margin-top:8px;max-width:none}
@media (max-width:820px){footer.site{grid-template-columns:1fr 1fr;padding:40px 20px}}