@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Newsreader:ital,opsz,wght@0,6..72,200;0,6..72,300;0,6..72,400;1,6..72,200;1,6..72,300&display=swap'); /* =========================================================== The Systems Academy — editorial override layer. Loaded LAST in on every page so it wins on source order. Bone + charcoal, Newsreader headings, Jost UI, 1px hairlines, square corners. No blush, no radii, no soft shadows. =========================================================== */ :root{ --bone:#F8F5EF;--bone-deep:#F1ECE3;--paper:#FFFFFF; --ink:#292722;--ink2:#141312;--ink-soft:#736D62; --taupe:#8E8677;--blush:#292722;--blush-soft:#F1ECE3; --line:#DFD8CB;--line-dk:rgba(255,255,255,.16); --serif:'Newsreader',Georgia,serif;--disp:'Newsreader',Georgia,serif;--sans:'Jost',system-ui,sans-serif; --rose-gold:#8E8677;--tint:#F1ECE3; --soft:#736D62;--coral:#292722;--sage:#292722;--gold:#292722;--rose:#292722;--clay:#141312;--sky:#F1ECE3;--accent:#292722; --t-blush:#F1ECE3;--t-sage:#F1ECE3;--t-butter:#F1ECE3;--t-lilac:#F1ECE3; } *{border-radius:0!important} body{background:var(--bone);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.8} h1,h2,h3,h4,h5{font-family:var(--serif)!important;font-weight:300!important;letter-spacing:-.015em} h1{font-weight:300!important} h1 em,h2 em,h3 em,h4 em{font-family:var(--serif)!important;font-style:italic!important;color:inherit!important;background:none!important;padding:0!important} h1 em::before,h2 em::before,h3 em::before,h4 em::before,h1 em::after,h2 em::after{display:none!important;content:none!important} .hero h1,.phero h1,.dhero h1,.w-hero h1,.hbi-hero h1,.nf h1,.legal-hero h1,.ghero h1,.hhero h1,.ahero h1{font-weight:300!important} .shead h2,.offer-head h2,.router-head h2,.about h2,.praise-head h2,.footopt h2,.feature-post h2,.nl h2,.deals h2,.diff h2,.picker h2,.free-head h2,.deals-head h2,.shopsec-head h2{font-weight:300!important} b,strong{font-weight:400} a{color:var(--ink)} a:hover{color:var(--ink2)} .eyebrow,.mic,.fo-eyebrow,.kit-tag,.where{font-family:var(--sans)!important;font-size:10.5px!important;font-weight:400!important;letter-spacing:.28em!important;text-transform:uppercase!important;color:var(--ink-soft)!important} .eyebrow::before,.fo-eyebrow::before,.footopt .fo-eyebrow::before,.mic::before{display:none!important;content:none!important} /* round things that must stay round */ .byline img,.nav-portrait,.foot-portrait,.sms-face,.pt,.circle,.tool-ic,.avatar{border-radius:50%!important} /* ---------- buttons ---------- */ .btn,.fn-btn,.fn-form button,.cookie-bar button,.pcard-btn,.buy-btn,.cta-btn{font-family:var(--sans)!important;font-size:10.5px!important;font-weight:400!important;letter-spacing:.26em!important;text-transform:uppercase!important;padding:16px 30px!important} .btn{border:1px solid var(--ink)!important;background:transparent!important;color:var(--ink)!important;transition:background .3s ease,color .3s ease} .btn:hover{background:var(--ink)!important;color:var(--bone)!important} .btn.solid,.fn-btn,.fn-form button,.cookie-bar .ck-accept,.btn.light.solid{background:var(--ink)!important;border:1px solid var(--ink)!important;color:var(--bone)!important;filter:none!important} .btn.solid:hover,.fn-btn:hover,.fn-form button:hover{background:var(--ink2)!important;border-color:var(--ink2)!important} .btn.light{border-color:var(--bone)!important;color:var(--bone)!important;background:transparent!important} .btn.light:hover{background:var(--bone)!important;color:var(--ink)!important} .btn.disabled,.btn.dis{border-color:var(--line)!important;color:#9C9488!important;background:transparent!important;pointer-events:none} .cookie-bar .ck-decline{background:none!important;border-color:transparent!important;color:var(--ink-soft)!important} /* ---------- nav ---------- */ header.nav{position:sticky;top:0;z-index:50;background:var(--bone)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:none!important;padding:0!important} .wrap.nav-in{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:30px;padding-top:22px!important;padding-bottom:22px!important} header.nav.scrolled .wrap.nav-in{padding-top:14px!important;padding-bottom:14px!important} .brand{display:inline-flex!important;align-items:center;gap:12px;grid-column:1;justify-self:start;line-height:1;text-transform:none!important} .brand .lmark{display:none!important} .brand .lword{font-family:var(--sans)!important;font-size:15px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);white-space:nowrap} .nav-links{grid-column:2;justify-self:end;gap:28px} .nav-links a{font-family:var(--sans)!important;font-size:10.5px!important;font-weight:400!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:var(--ink-soft)!important} .nav-links a:hover{color:var(--ink)!important} .nav-links a.ext::after{color:var(--ink-soft)} .nav-links a.cta{border:1px solid var(--ink)!important;background:transparent!important;color:var(--ink)!important;padding:13px 22px!important;letter-spacing:.22em!important} .nav-links a.cta:hover{background:var(--ink)!important;color:var(--bone)!important} .nav-toggle span{background:var(--ink)!important;height:1px!important} @media(max-width:1040px){ .wrap.nav-in{grid-template-columns:1fr auto} .nav-toggle{display:flex!important;grid-column:2} header.nav .nav-links{background:var(--bone)!important;box-shadow:none!important;border-bottom:1px solid var(--line)!important} .nav-links a{border-top:1px solid var(--line)!important;padding:16px 22px!important;color:var(--ink)!important} .nav-links a::after{color:var(--ink-soft)!important} .nav-links a.cta{margin:20px 22px 0!important;background:var(--ink)!important;color:var(--bone)!important;justify-content:center} } @media(max-width:820px){.brand .lword{font-size:12px;letter-spacing:.24em}} /* ---------- promo bar / ticker ---------- */ .promobar{background:var(--ink2)!important;color:var(--bone)!important} .pb-ic{display:none!important} .pb-tx{font-size:12.5px!important;color:#E8E3D9!important} .pb-tx b{color:#fff!important;font-weight:400!important;border-bottom:1px solid rgba(255,255,255,.4)} .pb-cta{background:transparent!important;color:#fff!important;font-size:10px!important;letter-spacing:.26em!important;padding:0!important} .ticker{background:var(--ink2)!important;color:#E8E3D9!important;padding:14px 0!important} .ticker span{font-size:10.5px!important;letter-spacing:.26em!important} .ticker span::after{content:"—"!important;opacity:.4} /* ---------- surfaces: hairline, no shadow ---------- */ .card,.pcard,.quote,.deal,.tier,.gcard,.fcard,.panel,.tplcard,.promptcard,.note-card,.footopt-form,.feat,.os,.step,.dstep,.pain,.drow,.offer,.path,.pc-col,.g,.stat,.emailcard,.kit,.niche-c,.praise-card,.plate,.box{box-shadow:none!important;border-color:var(--line)!important} .quote::before,.card::before,.tier::before,.deal::before{background:var(--ink)!important} .ph,.ph.dk{background-image:none!important;background-color:var(--bone-deep)!important} .ph span{background:var(--paper)!important;color:var(--ink-soft)!important;font-size:10px!important;letter-spacing:.2em!important} .stars{color:var(--ink)!important;letter-spacing:.3em!important;font-size:11px!important} /* ---------- forms ---------- */ input,textarea,select{font-family:var(--sans)!important;border-color:var(--line)!important} input:focus,textarea:focus{border-color:var(--ink)!important;outline:none} /* ---------- newsletter band ---------- */ .footopt{background:var(--bone-deep)!important;border-top:1px solid var(--line)!important} .footopt-form{background:var(--paper)!important;border:1px solid var(--line)!important;box-shadow:none!important} .footopt h2 em{color:inherit!important} /* ---------- footer ---------- */ footer::after{display:none!important} .fn-btn-foot,.foot-news,.socials,.foot-grid,.foot-links,.foot-mark,.masthead{display:none!important} .footopt{display:none!important} footer{background:var(--bone)!important;border-top:1px solid var(--line)!important;padding:84px 0 32px!important} .foot-id{display:block!important} .foot-top{display:grid!important;grid-template-columns:minmax(240px,1fr) 2.2fr!important;align-items:start!important;gap:64px!important;padding-bottom:48px!important;border-bottom:1px solid var(--line)!important} .foot-id .fw{display:block!important;font-family:var(--sans)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.3em!important;text-transform:uppercase!important;color:var(--ink)!important} .foot-id p{font-size:14px!important;line-height:1.85!important;color:var(--soft)!important;margin-top:18px!important;max-width:40ch!important} .foot-id p a{border-bottom:1px solid var(--soft)!important} .foot-badges{display:flex!important;align-items:center!important;gap:20px!important;margin-top:26px!important} .foot-badges img{height:44px!important;width:auto!important} .foot-cols{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:44px!important} .foot-col h4{font-family:var(--sans)!important;font-size:9.5px!important;font-weight:400!important;letter-spacing:.28em!important;text-transform:uppercase!important;color:var(--soft)!important;padding-bottom:14px!important;border-bottom:1px solid var(--line)!important;margin-bottom:20px!important} .foot-col a{display:block!important;font-size:14px!important;color:var(--soft)!important;margin-bottom:13px!important;transition:color .2s!important} .foot-col a:hover{color:var(--ink)!important} .foot-deals{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important;padding:40px 0!important;border-bottom:1px solid var(--line)!important} .foot-deal{display:flex!important;align-items:center!important;gap:16px!important;background:var(--paper)!important;border:1px solid var(--line)!important;padding:22px 24px!important;transition:border-color .3s ease!important} .foot-deal:hover{border-color:#C9BEAA!important} .foot-deal .di{width:32px!important;height:32px!important;flex:none!important} .foot-deal .di img{width:100%!important;height:100%!important;object-fit:contain!important} .foot-deal .dt{flex:1!important;min-width:0!important} .foot-deal .dt b{display:block!important;font-family:var(--serif)!important;font-size:19px!important;font-weight:300!important;letter-spacing:-.01em!important} .foot-deal .dt span{display:block!important;font-size:9.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--soft)!important;margin-top:7px!important} .foot-deal .dg{font-size:9.5px!important;letter-spacing:.22em!important;text-transform:uppercase!important;border:1px solid var(--ink)!important;padding:9px 14px!important;white-space:nowrap!important} .foot-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:14px!important;padding-top:26px!important} .foot-bottom p{font-size:9.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--soft)!important} .foot-bottom a{color:var(--ink)!important;border-bottom:1px solid var(--line)!important} @media(max-width:900px){.foot-top{grid-template-columns:1fr!important;gap:40px!important}.foot-cols{grid-template-columns:1fr 1fr!important;gap:32px!important}.foot-deals{grid-template-columns:1fr!important}} @media(max-width:520px){.foot-cols{grid-template-columns:1fr!important}.foot-bottom{flex-direction:column!important;align-items:flex-start!important}} /* ---------- cookie bar ---------- */ .cookie-bar{background:var(--paper)!important;border:1px solid var(--line)!important;box-shadow:none!important} .cookie-bar p{color:var(--ink-soft)!important} /* ---------- misc legacy blush bits ---------- */ [class*="badge"],.tag,.pill,.chip{border-radius:0!important} .sig{font-family:'Printed Moments',cursive!important} /* =========================================================== Layout system: wider measure, big white bands, photo breaks =========================================================== */ .wrap{max-width:1280px!important;padding-left:60px!important;padding-right:60px!important} main>section,body>section:not(.footopt){padding-top:clamp(70px,7.4vw,116px)!important;padding-bottom:clamp(70px,7.4vw,116px)!important} main>section[class*="hero"],main>section:first-child{padding-top:clamp(64px,6vw,104px)!important;padding-bottom:clamp(48px,4.4vw,72px)!important} main>section:nth-of-type(even){background:var(--paper)!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} main>section:nth-of-type(odd){background:var(--bone)!important} main>section[class*="hero"]{background:var(--bone)!important;border:none} h2{font-size:clamp(30px,4.2vw,52px)!important;line-height:1.1} h3{letter-spacing:-.01em} p{text-wrap:pretty} [class*="-grid"],[class*="grid"]{gap:34px} [class*="head"]{margin-bottom:clamp(38px,4vw,60px)} /* editorial photo break, injected after each page hero */ .photoband{margin:0;height:clamp(300px,40vw,520px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .photoband img{width:100%;height:100%;object-fit:cover;object-position:50% 48%;transition:transform 1.8s cubic-bezier(.2,.8,.2,1)} .photoband:hover img{transform:scale(1.04)} /* credit band — identical to the homepage hero band */ .credit-band{max-width:1280px!important;margin:0 auto!important;padding:30px 60px!important;display:flex!important;align-items:center!important;gap:24px!important;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;background:var(--bone)!important} .credit-band .pt{width:68px!important;height:68px!important;border-radius:50%!important;object-fit:cover!important;flex:none!important} .credit-band .tx{font-family:var(--serif)!important;font-size:20px!important;line-height:1.5!important;font-weight:300!important;max-width:42ch!important} .credit-band .tx span{display:block!important;font-family:var(--sans)!important;font-size:10.5px!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:var(--ink-soft)!important;margin-top:8px!important} .credit-band .badges{margin-left:auto!important;display:flex!important;align-items:center!important;gap:24px!important;padding-left:26px!important;border-left:1px solid var(--line)!important} .credit-band .badges img{height:44px!important;width:auto!important} .credit-band .badges .lab{font-size:9.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important;color:var(--ink-soft)!important;max-width:9ch!important;line-height:1.6!important} @media(max-width:900px){.credit-band{flex-wrap:wrap!important;padding:26px 34px!important}.credit-band .badges{margin-left:0!important;padding-left:0!important;border-left:none!important;border-top:1px solid var(--line)!important;padding-top:20px!important;width:100%!important}} @media(max-width:640px){.credit-band{padding:24px 22px!important}.credit-band .badges .lab{display:none!important}} @media(max-width:640px){.wrap{padding-left:22px!important;padding-right:22px!important}.credit-band{padding:24px 22px}.credit-band .badges .lab{display:none}} /* ---------- legacy blush pills, accent bars, hover lifts ---------- */ .badge,.deal-badge,.tag,.pill,.chip,.off,.save,.sale,.tool-badge,.pb-badge{background:transparent!important;color:var(--ink)!important;border:1px solid var(--ink)!important;font-family:var(--sans)!important;font-size:9.5px!important;font-weight:400!important;letter-spacing:.2em!important;text-transform:uppercase!important;padding:7px 12px!important} .badge.free,.tag.soon{border-color:var(--line)!important;color:var(--ink-soft)!important} img.pb-badge,img.pb-word,.pb-badge img{background:none!important;border:none!important;padding:0!important} .tool::before,.quote::before,.card::before,.tier::before,.deal::before,.gcard::before,.fcard::before,.praise-card::before,.offer::before{height:1px!important;background:var(--line)!important} .tool:hover,.card:hover,.quote:hover,.deal:hover,.tier:hover,.gcard:hover,.fcard:hover,.pcard:hover,.tplcard:hover,.offer:hover,.niche-c:hover{transform:none!important;box-shadow:none!important;border-color:#C9BEAA!important} .rez-hero-art,.rez-hero-art::before{border-color:var(--line)!important;box-shadow:none!important;transform:none!important} /* ---------- legacy per-page accents (highlight swipes, stickers, art cards) ---------- */ .mark::before,.hl::before,.swipe::before{display:none!important} .sticker{background:var(--paper)!important;border:1px solid var(--line)!important;color:var(--ink)!important;font-family:var(--sans)!important;font-weight:400!important;font-size:9.5px!important;letter-spacing:.2em!important;text-transform:uppercase!important;transform:none!important;box-shadow:none!important;padding:8px 12px!important} .g::before,.gg .g::before{height:1px!important;background:var(--line)!important} .photo-card,.rez-hero-art,.hero-art,.art-card,[class*="-art"]{transform:none!important;box-shadow:none!important;border-color:var(--line)!important} .photo-card img,.hero-art img{filter:none!important} .chip,.g .chip{border:1px solid var(--line)!important;background:transparent!important;color:var(--ink-soft)!important} .num{font-family:var(--serif)!important;font-weight:300!important;font-size:14px!important;color:var(--ink-soft)!important}