/* EMAILSAFETY.MOV | Styles for both pages.
   Change picture size and button size in EDIT_ME.php, NOT here.
   No external fonts, JavaScript, trackers, or CSS libraries. */
:root { --navy:#131c29; --blue:#275c91; --steel:#b7c7d2; --silver:#d2dce4; --ink:#18283c; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
a { text-underline-offset:3px; }

/* =================== LANDING PAGE =================== */
.landing-page { color:var(--ink); background:radial-gradient(circle at 50% 29%,#fff 0,#f7f9fb 45%,#e8eef3 100%); min-height:100vh; }
.landing-shell { min-height:100vh; min-height:100svh; display:grid; grid-template-rows:auto 1fr; }
.picture-zone { display:flex; justify-content:center; padding:clamp(36px,8vh,92px) 20px 0; }
.top-picture, .picture-placeholder { width:min(var(--picture-width), calc(100vw - 36px)); height:var(--picture-height); object-fit:contain; }
.picture-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; border:2px dashed #abbac8; background:#fff9; border-radius:15px; color:#8699ad; }
.picture-placeholder span { font-weight:700; color:#50637a; font-size:16px; }
.picture-placeholder small { font-size:11px; }
.landing-center { align-self:center; margin:0 auto; width:min(620px,calc(100% - 36px)); padding:40px 0 clamp(60px,18vh,180px); display:flex; flex-direction:column; align-items:center; gap:26px; }
.landing-message { width:100%; background:#fff; padding:clamp(28px,4.2vw,43px); border:1px solid #dce4ec; border-radius:17px; box-shadow:0 12px 42px rgba(20,42,69,.07); font-size:clamp(19px,2.4vw,24px); line-height:1.65; text-align:center; color:#28384b; overflow-wrap:anywhere; }
.access-button { display:inline-flex; justify-content:center; align-items:center; text-align:center; text-decoration:none; width:min(var(--button-width),100%); min-height:56px; padding:var(--button-vertical-padding) 16px; border-radius:var(--button-radius); background:#285c90; color:#fff; font-size:var(--button-font-size); font-weight:700; box-shadow:0 9px 22px rgba(24,73,117,.2); transition:background .18s, transform .18s,box-shadow .18s; }
.access-button:hover { background:#184a7b; transform:translateY(-2px); box-shadow:0 12px 24px rgba(24,73,117,.25); }
.access-button:focus-visible, .lesson-page a:focus-visible { outline:3px solid #e7a644; outline-offset:4px; }
@media(max-width:600px) { .picture-zone { padding-top:35px; } .landing-center { padding:48px 0 70px; gap:23px; } .landing-message { padding:27px 20px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* =================== SILVER TEAM LESSON =================== */
.lesson-page { background:#f6f8fa; color:#233349; line-height:1.65; }
.lesson-header { background:#101a27; min-height:83px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px clamp(22px,5vw,80px); border-bottom:1px solid #324050; }
.brand { display:inline-flex; gap:13px; align-items:center; color:#e8eef2; text-decoration:none; letter-spacing:.06em; }
.brand-mark { display:flex; align-items:center; justify-content:center; width:41px; height:41px; flex:none; color:#ecf4f9; border:2px solid #b9c8d3; background:linear-gradient(145deg,#364f65,#15283a); border-radius:10px; font-weight:800; font-size:23px; }
.brand strong { display:block; line-height:1.15; font-size:14px; letter-spacing:.2em; }
.brand small { color:#a6b7c7; font-size:9px; font-weight:bold; letter-spacing:.1em; }
.header-label { color:#a6b8c8; font-size:10px; font-weight:bold; letter-spacing:.2em; }
.lesson-content { width:min(1080px,calc(100% - 48px)); margin:0 auto; }
.lesson-hero { position:relative; overflow:hidden; background:linear-gradient(133deg,#142236 3%,#1b2f44 58%,#223d53); color:#fff; padding:96px 0 99px; isolation:isolate; }
.hero-halo { position:absolute; z-index:-1; right:-180px; top:-150px; height:660px; width:660px; border-radius:50%; border:1px solid rgba(202,222,235,.12); box-shadow:0 0 0 75px rgba(198,215,225,.025),0 0 0 150px rgba(198,215,225,.025); }
.hero-content { max-width:1080px; }
.eyebrow, .section-label { font-size:11px; font-weight:800; letter-spacing:.22em; }
.eyebrow { display:flex; align-items:center; gap:10px; color:#b7d3e6; margin-bottom:23px; }
.pulse-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:#9dd4e6; box-shadow:0 0 0 5px rgba(157,212,230,.09); }
.lesson-hero h1 { font-size:clamp(43px,6vw,74px); letter-spacing:-.045em; line-height:1.09; max-width:830px; margin:0 0 23px; font-weight:800; }
.lesson-lead { color:#c7d5e2; max-width:750px; font-size:clamp(18px,2vw,21px); line-height:1.7; margin:0 0 37px; }
.hero-note { display:flex; align-items:flex-start; gap:18px; max-width:850px; padding:21px 25px; border-radius:12px; background:#fff0; border:1px solid rgba(203,227,238,.28); box-shadow:inset 4px 0 0 #a6d3e5; }
.hero-note p { margin:0; color:#d7e3ed; font-size:15px; }
.hero-note strong { color:#fff; }
.note-symbol { color:#bce0ed; font-size:25px; line-height:1; }
.hero-down-link { margin-top:29px; color:#cde8f2; font-size:14px; font-weight:bold; text-decoration:none; display:inline-flex; gap:14px; align-items:center; }
.hero-down-link:hover { text-decoration:underline; }
.lesson-section { padding:84px 0; }
.section-label { color:#497c9d; margin-bottom:15px; }
.lesson-section h2, .lesson-closing h2 { margin:0 0 18px; color:#1b2c3e; font-size:clamp(29px,4vw,43px); letter-spacing:-.04em; line-height:1.18; max-width:780px; }
.section-intro { max-width:825px; color:#516174; font-size:17px; line-height:1.76; margin:0 0 32px; }
.signs-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sign-card { background:#fff; border:1px solid #e1e7ed; border-radius:13px; padding:28px 29px; box-shadow:0 8px 26px rgba(21,44,66,.035); }
.sign-number { display:block; color:#5b8bad; font-size:13px; letter-spacing:.12em; font-weight:800; margin-bottom:11px; }
.sign-card h3,.step h3,.response-item h3 { font-size:19px; line-height:1.35; color:#203248; margin:0 0 10px; }
.sign-card p,.step p,.response-item p { color:#58687a; margin:0; font-size:15px; line-height:1.68; }
.steps-section { background:#eef2f6; }
.steps-list { margin-top:30px; display:grid; gap:14px; }
.step { display:flex; gap:23px; background:#fff; padding:24px 28px; border:1px solid #dce4eb; border-radius:13px; }
.step-number { background:#243f59; color:#fff; flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:16px; font-weight:800; }
.response-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px; }
.response-item { border-top:3px solid #7b9db4; padding:22px 15px 0 0; }
.lesson-closing { background:linear-gradient(130deg,#192b3e,#223c50); color:#dbe6ed; padding:83px 0 88px; }
.closing-inner { max-width:1080px; }
.lesson-closing .section-label { color:#a9d1e5; }
.lesson-closing h2 { color:#fff; }
.lesson-closing p { max-width:800px; font-size:17px; color:#cbd8e2; margin:0 0 21px; line-height:1.76; }
.lesson-closing .closing-mantra { color:#eaf4fa; font-size:19px; font-weight:700; margin-bottom:32px; }
.silver-button { display:inline-flex; align-items:center; gap:16px; padding:15px 23px; background:#dce7ef; border-radius:9px; color:#183149; text-decoration:none; font-weight:bold; font-size:15px; }
.silver-button:hover { background:#fff; }
.lesson-footer { background:#0f1925; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; padding:26px clamp(22px,5vw,80px); color:#acb9c7; font-size:12px; }
.lesson-footer p { margin:0; }
.lesson-footer a { color:#bed8eb; }
@media(max-width:800px) { .lesson-hero { padding:74px 0; } .lesson-section { padding:66px 0; } .response-grid { grid-template-columns:1fr; gap:21px; } .response-item { padding-top:15px; } }
@media(max-width:590px) { .lesson-header { min-height:78px; } .header-label { display:none; } .lesson-content { width:min(100% - 34px,1080px); } .lesson-hero { padding:63px 0 72px; } .hero-note { padding:18px; gap:13px; } .signs-grid { grid-template-columns:1fr; } .step { padding:20px; gap:14px; } .step-number { width:33px; height:33px; } .lesson-section { padding:57px 0; } .lesson-closing { padding:67px 0; } }