/* sl-chrome-base-20261026.css: base styles for the canonical utilbar, header.site and footer[role=contentinfo], lifted from /programs/ inline CSS 10/26/2026 for pages that never carried them. Loaded before sl-look-20261026.css, which overrides it. Variables are set on the chrome elements so page :root values cannot restyle the chrome. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Quicksand:wght@500;600;700&display=swap');
.utilbar,header.site,footer[role="contentinfo"]{--cream:#F5F0EB;--plum:#5B2E5A;--midnight:#352040;--mauve:#C4A9B5;--ink:#2A1E2A;--paper:#FFFFFF;--line:#E6DBE2;--muted:#6B5A66;--gold:#F2C53D;--font-ui:"Mazzard Soft M","Quicksand","Nunito",sans-serif;--font-body:"Mazzard Soft M","Nunito",sans-serif;font-family:var(--font-body);font-size:17px;line-height:1.65;box-sizing:border-box}
header.site *,footer[role="contentinfo"] *,.utilbar *{box-sizing:border-box}
header.site ul,footer[role="contentinfo"] ul{list-style:none;margin:0;padding:0}
.utilbar{background:var(--midnight);color:#EDE3EA;position:relative;z-index:2}
.utilbar .wrap{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:center;align-items:center;
    padding:9px 24px;font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.02em}
.utilbar b{color:#fff}
.utilbar .dot{color:var(--mauve)}
.utilbar a{color:#fff;text-decoration:underline;text-underline-offset:2px}
header.site{background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:2}
header.site .wrap{display:flex;align-items:center;gap:20px;padding:15px 24px}
header.site img.logo{height:40px;width:auto;display:block}
header.site nav{display:flex;gap:26px;align-items:center;margin-left:10px}
header.site nav a{font-family:var(--font-ui);font-weight:600;font-size:15px;color:var(--plum);
    text-decoration:none;white-space:nowrap}
header.site nav a:hover{color:var(--midnight);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--mauve);text-decoration-thickness:2px}
header.site nav a[aria-current]{font-weight:800;color:var(--midnight);
    text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--gold);text-decoration-thickness:3px}
footer[role="contentinfo"]{background:#241531;color:#cdbcc7;font-size:14px;padding:52px 24px 26px;line-height:1.6;position:relative;z-index:2}
footer[role="contentinfo"] .fgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
footer[role="contentinfo"] h4{color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px;font-family:var(--font-ui)}
footer[role="contentinfo"] .fgrid a{display:block;color:var(--mauve);text-decoration:none;font-size:14px;margin-bottom:8px}
footer[role="contentinfo"] .fgrid a:hover{color:#fff;text-decoration:underline}
footer[role="contentinfo"] .fbottom{max-width:1180px;margin:30px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.72)}
footer[role="contentinfo"] .fbottom a{color:rgba(255,255,255,.72)}
footer[role="contentinfo"] .fbottom p{margin:0 0 8px}
footer[role="contentinfo"] .ai{color:var(--mauve);font-size:12px;margin-top:14px}
footer[role="contentinfo"] .disc{color:#9a8a96;font-size:.79rem;margin-top:10px;max-width:900px;line-height:1.5}
@media (min-width:1101px) and (max-width:1500px){header.site .wrap{gap:14px;padding:15px 18px}header.site nav{gap:16px}header.site nav a{font-size:14px}}
@media (min-width:1101px){header.site .wrap{flex-wrap:wrap}}
@media (max-width:1100px){header.site nav{display:none}}
@media (max-width:760px){footer[role="contentinfo"] .fgrid{grid-template-columns:1fr 1fr}}
/* v2: the header's right-hand utilities and the caret, lifted from /programs/ */
header.site .wrap,footer[role="contentinfo"] .wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
header.site .wrap{padding:15px 24px}
header.site .nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
header.site .store-pill{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:var(--midnight);font-family:var(--font-ui);font-weight:800;font-size:16px;letter-spacing:.04em;text-transform:uppercase;padding:11px 20px;border-radius:999px;text-decoration:none;box-shadow:0 10px 24px -12px rgba(242,197,61,.9);transition:transform .15s,background .15s;white-space:nowrap}
header.site .store-pill:hover{background:#ffd84d;transform:translateY(-1px)}
header.site .nav-util{display:inline-flex;align-items:center;gap:6px;color:var(--plum);text-decoration:none;font-family:var(--font-ui);font-weight:700;font-size:14px;white-space:nowrap}
header.site .nav-util:hover{color:var(--midnight)}
header.site .nav-util svg,header.site .store-pill svg{display:block}
header.site nav a .car{font-size:11px;margin-left:2px;color:var(--mauve)}
@media (min-width:1101px) and (max-width:1500px){header.site .nav-right{gap:10px}header.site .store-pill{padding:10px 16px;font-size:15px}}
/* 11:29 PM 10/26/2026 (Mira): footerfit - footer fits a 390 px phone; the Connect column's email could not wrap (Chris QA 447098 item 1) */
footer[role="contentinfo"]{overflow-x:hidden;box-sizing:border-box;max-width:100%}
footer[role="contentinfo"] .fgrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));max-width:100%}
footer[role="contentinfo"] .fgrid > *{min-width:0}
footer[role="contentinfo"] .fgrid a,footer[role="contentinfo"] .fbottom,footer[role="contentinfo"] .fbottom p{overflow-wrap:anywhere;word-break:break-word;min-width:0}
@media (max-width:480px){footer[role="contentinfo"]{padding-left:16px;padding-right:16px}footer[role="contentinfo"] .fgrid{grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:360px){footer[role="contentinfo"] .fgrid{grid-template-columns:1fr}}
/* 11:29 PM 10/26/2026 (helper for Mira): sl-look-20261026.css line 26 sets grid-template-columns:repeat(4,1fr) !important at every width, so the phone column counts above lost to it. These repeat them with higher specificity (html + footer[role] + .fgrid beats footer[role] + .fgrid): two per row at 560 px and below (the shell's own phone cut-off), one per row at 360 px and below. */
@media (max-width:560px){html footer[role="contentinfo"] .fgrid{grid-template-columns:1fr 1fr !important}}
@media (max-width:360px){html footer[role="contentinfo"] .fgrid{grid-template-columns:1fr !important}}