/* Cyber Safety for Normies. Tokens live in DESIGN.md; keep values on the scale. */
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/poppins-regular.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/poppins-medium.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/poppins-semibold.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/poppins-bold.woff2) format("woff2")}

:root{
  --navy-950:#07142A; --navy-900:#0B1B33; --navy-800:#10264A; --navy-700:#173360; --navy-600:#21447A;
  --ink-300:#B4C0D4; --ink-200:#D3DBE8; --white:#FFFFFF;
  --lime:#C6FF3D; --lime-600:#A8E01F; --error:#FF8A8A;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --fs-12:.75rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-32:2rem; --fs-40:2.5rem; --fs-56:3.5rem;
  --ease-out:cubic-bezier(.2,.8,.2,1); --t-fast:150ms; --t-base:240ms; --t-slow:700ms;
  --z-header:10;
  --wrap:1200px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;background:var(--navy-900);-webkit-text-size-adjust:100%}
body{margin:0;font-family:Poppins,ui-sans-serif,system-ui,sans-serif;font-size:var(--fs-16);line-height:1.6;color:var(--ink-200);background:var(--navy-900);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
::selection{background:var(--lime);color:var(--navy-900)}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--lime);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px;border-radius:4px}
h1,h2,h3{color:var(--white);font-weight:700;line-height:1.15;margin:0 0 var(--s4);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:var(--fs-40)}
h2{font-size:var(--fs-32)}
h3{font-size:var(--fs-20);line-height:1.3;font-weight:600}
p{margin:0 0 var(--s4);text-wrap:pretty}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.skip{position:absolute;left:var(--s4);top:-60px;background:var(--lime);color:var(--navy-900);padding:var(--s2) var(--s4);border-radius:var(--r-sm);font-weight:600;z-index:calc(var(--z-header) + 1)}
.skip:focus{top:var(--s4)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:rgba(11,27,51,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid transparent;transition:border-color var(--t-base)}
.site-header.scrolled{border-bottom-color:var(--navy-700)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:72px}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--white);text-decoration:none;font-weight:700;font-size:var(--fs-16);line-height:1.2}
.brand img{width:40px;height:40px;border-radius:var(--r-sm)}
.nav{display:none;gap:var(--s5)}
.nav a{color:var(--ink-200);text-decoration:none;font-weight:500;font-size:var(--fs-14);padding:var(--s3) 0}


/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:var(--s3) var(--s5);border-radius:var(--r-pill);border:0;font:600 var(--fs-16)/1.2 Poppins,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform var(--t-fast) var(--ease-out),background-color var(--t-fast)}
.btn-primary{background:var(--lime);color:var(--navy-900)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover{background:var(--lime-600)}.nav a:hover{color:var(--white)}.signup input:hover{border-color:var(--ink-300)}}
.btn-primary:active{transform:scale(.97)}
.btn-small{min-height:44px;padding:var(--s2) var(--s4);font-size:var(--fs-14)}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* hero */
.hero{padding:var(--s7) 0 var(--s8);overflow:hidden}
.hero .wrap{display:grid;gap:var(--s7);align-items:center}
.eyebrow{color:var(--lime);font-weight:600;font-size:var(--fs-18);margin-bottom:var(--s3)}
.lede{font-size:var(--fs-18);color:var(--ink-200);max-width:34em}
.hero-art{max-width:420px;width:100%;justify-self:center;opacity:0;transform:translateY(12px) scale(.98);animation:settle var(--t-slow) var(--ease-out) .15s forwards}
@keyframes settle{to{opacity:1;transform:none}}
.byline{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);font-size:var(--fs-14);color:var(--ink-300)}
.byline img{width:32px;height:32px;border-radius:var(--r-sm)}

/* signup component */
.signup{margin-top:var(--s5);max-width:520px}
.signup-row{display:flex;flex-direction:column;gap:var(--s3)}
.signup label{display:block;font-weight:600;color:var(--white);font-size:var(--fs-14);margin-bottom:var(--s2)}
.signup input{width:100%;min-height:52px;padding:var(--s3) var(--s4);border-radius:var(--r-pill);border:2px solid var(--navy-600);background:var(--navy-800);color:var(--white);font:400 var(--fs-16)/1.2 Poppins,system-ui,sans-serif}
.signup input::placeholder{color:#8C9AB3}
.signup input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(198,255,61,.25)}
.signup input[aria-invalid="true"]{border-color:var(--error)}
.signup .btn{min-height:52px}
.signup-help{font-size:var(--fs-14);color:var(--ink-300);margin:var(--s3) 0 0}
.signup-error{color:var(--error);font-size:var(--fs-14);margin:var(--s2) 0 0;min-height:0}
.signup-error:empty{display:none}
.signup-done{display:none;border:2px solid var(--lime);border-radius:var(--r-md);padding:var(--s4) var(--s5);background:var(--navy-800);color:var(--white)}
.signup-done p{margin:0}
.signup-done strong{color:var(--lime)}
.signup.is-done .signup-fields{display:none}
.signup.is-done .signup-done{display:block}

/* sections */
section{padding:var(--s8) 0}
.section-intro{max-width:640px;margin-bottom:var(--s6)}
.section-intro p{font-size:var(--fs-18)}
.alt{background:var(--navy-950)}

.who-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
.who-list li{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4) 0;border-top:1px solid var(--navy-700)}
.who-list li:last-child{border-bottom:1px solid var(--navy-700)}
.who-list svg{flex:none;width:28px;height:28px;margin-top:2px}
.who-list strong{color:var(--white);font-weight:600}

.format{display:grid;gap:var(--s4);margin-bottom:var(--s7)}
.format-item{border-top:3px solid var(--lime);padding:var(--s4) 0 0}
.format-item h3{margin-bottom:var(--s2)}
.format-item p{margin:0;color:var(--ink-300)}
.format-item .tag{display:inline-block;color:var(--lime);font-weight:600;font-size:var(--fs-14);margin-bottom:var(--s2)}
.topics-label{color:var(--white);font-weight:600;font-size:var(--fs-18);margin-bottom:var(--s3)}
.topics{list-style:none;margin:0;padding:0;display:grid;gap:0 var(--s6)}
.topics li{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--navy-700);color:var(--ink-200)}
.topics li svg{flex:none;width:20px;height:20px;margin-top:4px}

/* sample issue */
.sample{display:grid;gap:var(--s6);align-items:start}
.email{background:var(--white);color:#1C2B45;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 48px -24px rgba(0,0,0,.6)}
.email-head{background:#EEF2F8;padding:var(--s4) var(--s5);font-size:var(--fs-14);color:#4A5A75;border-bottom:1px solid #DCE3EE}
.email-head p{margin:0}
.email-head strong{color:#1C2B45}
.sample-badge{display:inline-flex;align-items:center;gap:var(--s2);background:var(--lime);color:var(--navy-900);font-weight:700;font-size:var(--fs-12);letter-spacing:.04em;text-transform:uppercase;padding:var(--s1) var(--s3);border-radius:var(--r-pill);margin-bottom:var(--s3)}
.email-body{padding:var(--s5)}
.email-body h3{color:var(--navy-900);font-size:var(--fs-24);margin-bottom:var(--s3)}
.email-body h4{margin:var(--s5) 0 var(--s2);font-size:var(--fs-16);color:var(--navy-900)}
.email-body p,.email-body li{font-size:var(--fs-16);color:#2C3B55}
.email-body ol{padding-left:var(--s5);margin:0 0 var(--s4)}
.email-body li{margin-bottom:var(--s2)}
.email-body .todo{background:#F4FFD9;border-left:4px solid var(--lime-600);padding:var(--s3) var(--s4);border-radius:var(--r-sm);margin-top:var(--s5)}
.email-body .todo p{margin:0}
.email-note{font-size:var(--fs-14);color:var(--ink-300)}

/* free */
.free-box{display:grid;gap:var(--s5);border:2px solid var(--lime);border-radius:var(--r-lg);padding:var(--s6) var(--s5);background:var(--navy-800)}
.free-box h2{margin-bottom:var(--s2)}
.free-box p{margin:0;font-size:var(--fs-18)}
.free-box ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.free-box li{display:flex;gap:var(--s3);align-items:flex-start}
.free-box li svg{flex:none;width:20px;height:20px;margin-top:4px}
.free-box .btn{justify-self:start}

/* about */
.about{display:grid;gap:var(--s6);align-items:start}
.about-card{border-left:3px solid var(--lime);padding:var(--s2) 0 var(--s2) var(--s5)}
.about-card dl{margin:0;display:grid;gap:var(--s4)}
.about-card dt{color:var(--lime);font-weight:600;font-size:var(--fs-14)}
.about-card dd{margin:0;color:var(--white)}
.about-text p{font-size:var(--fs-18)}

/* faq */
.faq{max-width:800px}
.faq details{border-top:1px solid var(--navy-700)}
.faq details:last-child{border-bottom:1px solid var(--navy-700)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s5) 0;color:var(--white);font-weight:600;font-size:var(--fs-18);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:3px solid var(--lime);border-bottom:3px solid var(--lime);transform:rotate(45deg) translateY(-3px);transition:transform var(--t-base) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding:0 0 var(--s5);margin:0;max-width:65ch}

/* final cta */
.final{text-align:left;padding-top:0}
.final-box .btn{justify-self:start}
.final-box{border-radius:var(--r-lg);background:var(--navy-800);border:1px solid var(--navy-600);padding:var(--s6) var(--s5);display:grid;gap:var(--s5);align-items:center}
.final-box h2{margin-bottom:var(--s2)}
.final-box p{margin:0}

/* footer */
.site-footer{padding:var(--s7) 0 var(--s7);border-top:1px solid var(--navy-700);font-size:var(--fs-14);color:var(--ink-300)}
.site-footer .wrap{display:grid;gap:var(--s5)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);list-style:none;margin:0;padding:0}
.footer-links a{display:inline-block;padding:var(--s2) 0;font-weight:500}
.privacy-note{max-width:60ch;margin:0}

/* legal page */
.legal{padding:var(--s7) 0 var(--s8)}
.legal .wrap{max-width:760px}
.legal h2{font-size:var(--fs-24);margin-top:var(--s6)}

@media (min-width:640px){
  .signup-row{flex-direction:row}
  .signup-row input{flex:1}
  .signup .btn{flex:none}
  .format{grid-template-columns:repeat(3,1fr)}
  .who-list{grid-template-columns:1fr 1fr;gap:0 var(--s6)}
  .who-list li:nth-last-child(2){border-bottom:1px solid var(--navy-700)}
  .topics{grid-template-columns:1fr 1fr}
}
@media (min-width:960px){
  h1{font-size:var(--fs-56)}
  h2{font-size:var(--fs-40)}
  .nav{display:flex}
  .hero{padding:var(--s8) 0 var(--s9)}
  .hero .wrap{grid-template-columns:1.1fr .9fr}
  .hero-art{max-width:520px}
  section{padding:var(--s9) 0}
  .sample{grid-template-columns:.8fr 1.2fr;gap:var(--s7)}
  .about{grid-template-columns:1.3fr .7fr;gap:var(--s8)}
  .final-box{grid-template-columns:1fr 1fr;padding:var(--s7)}
  .free-box{grid-template-columns:1.1fr 1fr;padding:var(--s7);align-items:center}
  .free-box .btn{grid-column:1}
  .final-box .signup{margin-top:0}
  .site-footer .wrap{grid-template-columns:1fr auto;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important}
}