/* SimpsonESL new look (Duolingo-style): shared header, banner, footer, mobile bar and buttons.
   Loaded by every page in the new look, after the page's own styles. */
:root{
  --nl-blue:#1B6FD8; --nl-blue-edge:#1257AE; --nl-ink:#0B4596; --nl-ink-text:#0A3270;
  --nl-orange:#E99A2C; --nl-orange-soft:#FFF3E0; --nl-green:#58B947; --nl-green-ink:#2E8A3E;
  --nl-text:#3C3C3C; --nl-soft:#5E5E5E; --nl-line:#E5E5E5; --nl-tint:#F4F8FE;
}
body{font-family:'Nunito',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.font-display{font-family:'Nunito',system-ui,sans-serif}

/* ---------- header ---------- */
.nl-head{background:#fff;border-bottom:2px solid var(--nl-line);position:sticky;top:0;z-index:100}
.nl-head-in{max-width:1180px;margin:0 auto;padding:0 16px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nl-brand{display:flex;align-items:center;gap:8px;font-family:'Nunito',sans-serif;font-weight:900;font-size:25px;letter-spacing:-.6px;color:var(--nl-ink)!important;text-decoration:none;flex-shrink:0}
.nl-brand img{width:32px;height:auto;display:block}
.nl-brand b{color:var(--nl-orange);font-weight:900}
.nl-links{display:flex;align-items:center;gap:2px}
.nl-links a{font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#646464;padding:9px 12px;border-radius:12px;text-decoration:none;white-space:nowrap}
.nl-links a:hover{color:var(--nl-text);background:#F7F7F7}
.nl-links a.active{color:#1257AE;background:#EAF2FD}
.nl-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nl-btn{display:inline-flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:800;font-size:13.5px;letter-spacing:.6px;text-transform:uppercase;border-radius:12px;padding:9px 16px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .1s,transform .05s}
.nl-btn:active{transform:translateY(2px)}
.nl-btn-main{background:var(--nl-blue);color:#fff!important;border:0;border-bottom:4px solid var(--nl-blue-edge)}
.nl-btn-main:hover{filter:brightness(1.07)}
.nl-btn-ghost{background:#fff;color:var(--nl-blue)!important;border:2px solid var(--nl-line);border-bottom-width:4px}
.nl-btn-ghost:hover{background:#F7F7F7}
.nl-head .translate-btn{color:#646464;background:#fff;border:2px solid var(--nl-line);border-radius:12px;font-weight:800;padding:6px 10px}
.nl-head .translate-btn:hover{background:#F7F7F7;color:var(--nl-text)}
.nl-head .goog-te-gadget select{color:var(--nl-text)!important;background:#fff!important;border:2px solid var(--nl-line)!important;border-radius:12px!important}
.nl-pill{font-size:12px;font-weight:900;letter-spacing:.4px;color:#23733A;background:#EFFAEC;border-radius:10px;padding:5px 10px}
.nl-profile{display:flex;align-items:center;gap:8px;text-decoration:none;padding:3px 12px 3px 3px;border:2px solid var(--nl-line);border-radius:999px;max-width:200px}
.nl-profile:hover,.nl-profile.active{border-color:var(--nl-blue)}
.nl-profile__avatar{width:30px;height:30px;border-radius:50%;background:var(--nl-blue-edge);color:#fff;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nl-profile__name{color:var(--nl-text);font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- early-access strip ---------- */
.nl-ea{background:var(--nl-tint);border-bottom:2px solid var(--nl-line);padding:7px 16px}
.nl-ea-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--nl-soft)}
.nl-ea-in strong{color:var(--nl-ink);font-weight:900}
.nl-ea-in a{font-weight:900;color:var(--nl-blue);text-decoration:none;white-space:nowrap}
.nl-ea-in a:hover{text-decoration:underline}

/* ---------- footer ---------- */
.nl-foot{background:var(--nl-ink);color:#DCE7F7;padding:56px 16px 40px;font-family:'Nunito',sans-serif}
.nl-foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px}
.nl-foot-brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:24px;color:#fff;letter-spacing:-.5px}
.nl-foot-brand img{width:34px}
.nl-foot-brand b{color:#FFC46B;font-weight:900}
.nl-foot p{font-size:14px;line-height:1.6;margin-top:10px;color:#C9D8EF}
.nl-foot h5{font-size:16px;font-weight:900;color:#fff;margin:0 0 10px;text-transform:none;letter-spacing:0}
.nl-foot a{display:block;font-size:14.5px;font-weight:700;padding:4px 0;color:#DCE7F7;text-decoration:none}
.nl-foot a:hover{color:#fff;text-decoration:underline}
.nl-legal{max-width:1180px;margin:36px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);font-size:14px;font-weight:700;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.nl-legal a{display:inline;padding:0}

/* ---------- phone bottom bar ---------- */
.nl-mnav{display:none;position:fixed;bottom:0;left:0;right:0;height:62px;background:#fff;border-top:2px solid var(--nl-line);z-index:100;align-items:center;justify-content:space-around}
.nl-mnav a{display:flex;flex-direction:column;align-items:center;gap:1px;color:#646464;font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;text-decoration:none}
.nl-mnav a.active{color:#1257AE}
.nl-mnav .material-symbols-outlined{font-size:24px}

@media(max-width:1320px){
  .nl-head .translate-btn .tb-label{display:none}
}
/* the header box is 1180px at every width, so the signed-in menu stays compact:
   tighter links, and the profile button shows just the avatar */
.nl-links a{padding:9px 9px;letter-spacing:.2px}
.nl-profile__name{display:none}
.nl-profile{padding:3px}
@media(max-width:1100px){
  .nl-links{display:none}
  .nl-mnav{display:flex}
  body{padding-bottom:62px}
  .nl-foot-grid{grid-template-columns:1fr 1fr}
  .nl-foot-grid > div:first-child{grid-column:1 / -1}
}
@media(max-width:560px){
  .nl-brand{font-size:21px}
  .nl-brand img{width:28px}
  .nl-profile__name{display:none}
  .nl-profile{padding:3px}
  .nl-right{gap:6px}
  .nl-right .nl-btn{padding:8px 10px;font-size:12px}
  .nl-head .translate-btn .tb-label{display:none}
  .nl-hide-sm{display:none!important}
}

/* ---------- Duolingo-style chunky buttons on the pages' own buttons ---------- */
a.bg-primary,button.bg-primary,a.bg-secondary,button.bg-secondary,
.btn-primary,.btn-dark,.btn-glow,input[type=submit]{border-bottom:4px solid rgba(0,0,0,.22)!important;font-weight:800}
a.bg-primary:active,button.bg-primary:active,a.bg-secondary:active,button.bg-secondary:active,
.btn-primary:active,.btn-dark:active,.btn-glow:active,input[type=submit]:active{transform:translateY(2px);border-bottom-width:2px!important}

/* ---------- readability fixes on the pages' own text ---------- */
.text-secondary{color:#B4540A!important}
.text-gray-400{color:#6B7280!important}
@media(max-width:640px){
  table{display:block;max-width:100%;overflow-x:auto}
}