/* ========================================================== lrg-content.css v3 — Enqueued component stylesheet for LRG Covers: nh-block (scoped), classless tables, th-cards, lrg* template system (dual-scoped .lrgArticleKit/.lrgBlogPage), bullet-section-* (triple-scoped .rl-page/.lrgBlogPage/.lrgArticleKit) Enqueued by lrg-content-css.php mu-plugin ========================================================== */ /* === NH-BLOCK SYSTEM (scoped to .nh-blk/.nh-hero containers) === */ /* ── Design tokens ── */ .nh-blk, .nh-blk .nh-wrap, .nh-hero { --navy:#1A365D;--navy-deep:#13294a;--red:#C8102E; --ink:#1f2733;--body-c:#3d4757;--muted:#6b7686; --line:#e4e8ee;--line-soft:#eef1f5;--bg:#fff;--bg-soft:#f7f9fc;--bg-tint:#f0f4f9; --gold:#C9A961;--green:#16794a;--amber:#b7791f; --radius:14px; --shadow:0 1px 2px rgba(20,41,74,.04),0 8px 24px rgba(20,41,74,.06); --shadow-lift:0 2px 4px rgba(20,41,74,.06),0 14px 40px rgba(20,41,74,.10); --maxw:1200px; --serif:'Fraunces',Georgia,serif; --sans:'Source Sans 3',system-ui,sans-serif; } /* ── Divi overrides ── */ /* ── .wrap container ── */ .nh-blk .nh-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} /* ── Breadcrumb ── */ .nh-blk .nh-crumb{font-size:13px;color:var(--muted);padding:16px 0 0} .nh-blk .nh-crumb a{text-decoration:none;color:var(--muted);border:none} .nh-blk .nh-crumb span{color:var(--navy)} /* ── Hero ── */ .nh-hero{padding:8px 0 30px;border-bottom:1px solid var(--line-soft)} .nh-blk .nh-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:11px} .nh-blk .nh-h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.4vw,46px);line-height:1.05;color:var(--navy);letter-spacing:-.015em;margin-bottom:14px} .nh-blk .nh-answer{font-size:16.5px;line-height:1.58;color:var(--ink);margin-bottom:20px} .nh-blk .nh-answer b{color:var(--navy);font-weight:600} .nh-blk .nh-cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy)!important;text-decoration:none;font-weight:600;font-size:14.5px;padding:12px 24px;border-radius:10px;transition:.18s;box-shadow:none;border:1.5px solid var(--navy)} .nh-blk .nh-cta:hover{background:var(--bg-tint);transform:translateY(-1px);color:var(--navy)!important} .nh-blk .nh-cta.ghost{background:var(--red);color:#fff!important;border:none;box-shadow:0 6px 18px rgba(200,16,46,.22);margin-left:8px} .nh-blk .nh-cta.ghost:hover{background:#a80d25;transform:translateY(-1px);color:#fff!important} /* ── Quick stat strip ── */ .nh-blk .nh-qstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px} .nh-blk .nh-qs{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:12px;padding:16px;text-align:center;box-shadow:var(--shadow)} .nh-blk .nh-qs .v{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy);line-height:1} .nh-blk .nh-qs .l{margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .nh-blk .nh-ph{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--amber);background:#fdf6e7;border:1px solid #f0e2bf;border-radius:5px;padding:1px 7px;text-transform:uppercase;vertical-align:middle} /* ── Listings preview (iframe) ── */ .nh-blk .nh-listings-band{background:var(--bg-soft);border-bottom:1px solid var(--line-soft);padding:30px 0} .nh-blk .nh-listings-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;flex-wrap:wrap;gap:10px} .nh-blk .nh-listings-head h2{font-family:var(--serif);font-size:22px;color:var(--navy);font-weight:600;margin:0} .nh-blk .nh-listings-head a{font-size:14px;font-weight:600;text-decoration:none;border:none;color:var(--navy)} .nh-blk .nh-listings-head a:hover{color:var(--red)} .nh-blk .nh-iframe-wrap{width:100%;height:1060px;overflow:hidden;position:relative;border-radius:12px;border:1px solid var(--line)} .nh-blk .nh-iframe-wrap iframe{width:100%;height:1800px;border:0;display:block} .nh-blk .nh-iframe-foot{margin-top:14px;text-align:right} .nh-blk .nh-iframe-foot a{font-size:14px;font-weight:600;text-decoration:none;border:none;color:var(--navy)} .nh-blk .nh-iframe-foot a:hover{color:var(--red)} /* ── Section scaffolding ── */ .nh-blk{padding:42px 0;border-bottom:1px solid var(--line-soft)} .nh-blk.alt{background:var(--bg-soft)} .nh-blk .nh-sec-head{margin-bottom:20px} .nh-blk .nh-sec-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:8px} .nh-blk .nh-sec-title{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.8vw,29px);color:var(--navy);line-height:1.13;letter-spacing:-.01em} .nh-blk .nh-prose p{margin:0 0 15px;font-size:15.5px;line-height:1.65} .nh-blk .nh-prose p b,.neighborhood-guide .nh-prose strong{color:var(--ink)} /* ── Callout boxes (bullet lists) ── */ .nh-blk .nh-callout{border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-top:18px;box-shadow:var(--shadow)} .nh-blk .nh-callout.gray{background:var(--bg-soft);border-left:3px solid var(--muted)} .nh-blk .nh-callout.blue{background:#f4f7fb;border-left:3px solid var(--navy)} .nh-blk .nh-callout.green{background:#f0f7f3;border-left:3px solid var(--green)} .nh-blk .nh-callout.beige{background:#fcfaf4;border-left:3px solid var(--gold)} .nh-blk .nh-callout ul{list-style:none;margin:0;padding:0} .nh-blk .nh-callout li{padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.55} .nh-blk .nh-callout li:last-child{border-bottom:0} .nh-blk .nh-callout li strong{color:var(--ink)} /* ── Tables ── */ .nh-blk .nh-tbl-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-top:18px} .nh-blk .nh-tbl-wrap table{width:100%;border-collapse:collapse;font-size:14.5px} .nh-blk .nh-tbl-wrap thead th{background:var(--navy);color:#fff;text-align:left;font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:13px 18px;border-right:1px solid rgba(255,255,255,.12)} .nh-blk .nh-tbl-wrap thead th:last-child{border-right:0} .nh-blk .nh-tbl-wrap thead tr{border-bottom:2px solid var(--navy-deep)} .nh-blk .nh-tbl-wrap tbody td{padding:13px 18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line-soft);color:var(--body-c);transition:background .15s} .nh-blk .nh-tbl-wrap tbody td:last-child{border-right:0} .nh-blk .nh-tbl-wrap tbody tr:nth-child(even){background:var(--bg-soft)} .nh-blk .nh-tbl-wrap tbody tr:hover{background:rgba(26,54,93,.04)} .nh-blk .nh-tbl-wrap tbody tr:last-child td{border-bottom:0} .nh-blk .nh-tbl-wrap tbody td:first-child{font-weight:600;color:var(--ink)} /* ── Facts grid ── */ .nh-blk .nh-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px} .nh-blk .nh-fact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .nh-blk .nh-fact-card .h{padding:14px 20px;border-bottom:1px solid var(--line-soft);font-family:var(--serif);font-weight:600;font-size:17px;color:var(--navy);background:linear-gradient(180deg,#fbfcfe,#fff)} .nh-blk .nh-fact-card .b{padding:6px 20px 14px} .nh-blk .nh-fact-card dl{margin:0} .nh-blk .nh-fact-card .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:14px} .nh-blk .nh-fact-card .row:last-child{border-bottom:0} .nh-blk .nh-fact-card .row b{color:var(--muted);font-weight:600} .nh-blk .nh-fact-card .row span{color:var(--ink);font-weight:600;text-align:right} /* ── Fit panels ── */ .nh-blk .nh-fit{display:grid;grid-template-columns:1fr 1fr;gap:20px} .nh-blk .nh-panel{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;background:#fff} .nh-blk .nh-panel .ph2{padding:14px 20px;font-family:var(--serif);font-weight:600;font-size:17px} .nh-blk .nh-panel.good .ph2{background:linear-gradient(180deg,#f0f7f3,#fff);color:var(--green);border-bottom:1px solid #dceee5} .nh-blk .nh-panel.warn .ph2{background:linear-gradient(180deg,#fdf2f3,#fff);color:var(--red);border-bottom:1px solid #f6dcdf} .nh-blk .nh-panel .pb{padding:6px 20px 16px} .nh-blk .nh-panel dt{font-weight:700;color:var(--ink);font-size:14px;margin-top:13px} .nh-blk .nh-panel dd{margin:3px 0 0;font-size:13.5px;color:var(--body-c);line-height:1.5} /* ── Verify line ── */ .nh-blk .nh-verify{font-size:13px;color:var(--body-c);background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-top:18px} .nh-blk .nh-verify b{color:var(--ink)} /* ── FAQ ── */ .nh-blk .nh-faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .nh-blk .nh-faq details{border-bottom:1px solid var(--line-soft)} .nh-blk .nh-faq details:last-child{border-bottom:0} .nh-blk .nh-faq summary{padding:15px 22px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:15px} .nh-blk .nh-faq summary::-webkit-details-marker{display:none} .nh-blk .nh-faq summary::after{content:"+";color:var(--red);font-size:22px;font-weight:400} .nh-blk .nh-faq details[open] summary::after{content:"\2013"} .nh-blk .nh-faq .ans{padding:0 22px 17px;font-size:14px;color:var(--body-c);line-height:1.6} /* ── Related links ── */ .nh-blk .nh-related ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;margin:0} .nh-blk .nh-related a{display:block;padding:13px 16px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--navy);font-weight:600;font-size:14px;background:#fff;transition:.14s} .nh-blk .nh-related a:hover{border-color:var(--navy);background:var(--bg-tint)} /* ── Resources footer ── */ .nh-blk .nh-resources{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.6} .nh-blk .nh-resources h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .nh-blk .nh-resources ul{list-style:disc;padding-left:18px;margin:0} .nh-blk .nh-resources li{margin-bottom:3px} .nh-blk .nh-resources a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} /* ── Calculator embed ── */ .nh-blk .nh-calc-band{background:var(--bg-soft);border-bottom:1px solid var(--line-soft);padding:42px 0} .nh-blk .nh-calc-frame{margin-top:8px} .nh-blk .nh-calc-frame .rss-calc-wrapper{margin:0!important} .nh-blk .nh-calc-frame iframe{border-radius:var(--radius)!important} /* ── End CTA ── */ .nh-blk .nh-endcta{text-align:center;padding:38px 0 6px} /* ── Ranked neighborhood cards ── */ .nh-blk .nh-rank{position:relative;padding:48px 0 42px;border-bottom:1px solid var(--line-soft)} .nh-blk .nh-rank .nh-rank-num{position:absolute;top:-28px;left:28px;width:56px;height:56px;background:linear-gradient(135deg,var(--navy),#2d5288);color:#fff;font-family:var(--serif);font-weight:700;font-size:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(26,54,93,.25);z-index:2} .nh-blk .nh-rank .nh-rank-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:22px;flex-wrap:wrap} .nh-blk .nh-rank .nh-rank-title{flex:1;min-width:280px} .nh-blk .nh-rank .nh-rank-title h2{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.8vw,28px);color:var(--navy);line-height:1.15;margin-bottom:6px} .nh-blk .nh-rank .nh-rank-title .nh-rank-tagline{font-size:14px;color:var(--muted);font-weight:500} /* ── Scorecard (visual data strip) ── */ .nh-blk .nh-scorecard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px} .nh-blk .nh-sc-item{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-align:center} .nh-blk .nh-sc-item .sc-val{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--navy);line-height:1.1} .nh-blk .nh-sc-item .sc-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:5px} /* ── Visual meter bars ── */ .nh-blk .nh-meters{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:18px 0} .nh-blk .nh-meter{display:flex;align-items:center;gap:10px} .nh-blk .nh-meter .m-label{font-size:12px;font-weight:600;color:var(--muted);min-width:80px;text-align:right} .nh-blk .nh-meter .m-track{flex:1;height:8px;background:var(--line);border-radius:4px;overflow:hidden;position:relative} .nh-blk .nh-meter .m-fill{height:100%;border-radius:4px;transition:width .6s ease} .nh-blk .nh-meter .m-fill.navy{background:linear-gradient(90deg,var(--navy),#3b6cb5)} .nh-blk .nh-meter .m-fill.green{background:linear-gradient(90deg,var(--green),#22a85e)} .nh-blk .nh-meter .m-fill.gold{background:linear-gradient(90deg,var(--gold),#d4b86a)} .nh-blk .nh-meter .m-fill.red{background:linear-gradient(90deg,var(--red),#e8445a)} .nh-blk .nh-meter .m-val{font-size:12px;font-weight:700;color:var(--ink);min-width:36px} /* ── Price bar chart (CSS-only) ── */ .nh-blk .nh-price-bars{margin:20px 0} .nh-blk .nh-pbar{display:flex;align-items:center;gap:10px;margin-bottom:8px} .nh-blk .nh-pbar .pb-name{font-size:13px;font-weight:600;color:var(--ink);min-width:110px;text-align:right} .nh-blk .nh-pbar .pb-track{flex:1;height:28px;background:var(--bg-soft);border-radius:6px;overflow:hidden;position:relative} .nh-blk .nh-pbar .pb-fill{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em} .nh-blk .nh-pbar .pb-fill.tier1{background:linear-gradient(90deg,#1A365D,#2d5288)} .nh-blk .nh-pbar .pb-fill.tier2{background:linear-gradient(90deg,#16794a,#22a85e)} .nh-blk .nh-pbar .pb-fill.tier3{background:linear-gradient(90deg,#C9A961,#d4b86a)} .nh-blk .nh-pbar .pb-fill.tier4{background:linear-gradient(90deg,#C8102E,#e8445a)} .nh-blk .nh-pbar .pb-fill.tier5{background:linear-gradient(90deg,#6b46c1,#8b5cf6)} /* ── Responsive additions ── */ @media(max-width:860px){ .nh-blk .nh-scorecard{grid-template-columns:1fr 1fr} .nh-blk .nh-meters{grid-template-columns:1fr} .nh-blk .nh-rank .nh-rank-head{flex-direction:column} } @media(max-width:560px){ .nh-blk .nh-scorecard{grid-template-columns:1fr 1fr} .nh-blk .nh-rank .nh-rank-num{width:44px;height:44px;font-size:18px;top:-22px;left:18px} } /* ── Responsive ── */ @media(max-width:860px){ .nh-blk .nh-facts, .nh-blk .nh-fit, .nh-blk .nh-related ul{grid-template-columns:1fr} .nh-blk .nh-qstats{grid-template-columns:1fr 1fr} .nh-blk .nh-tbl-wrap{overflow-x:auto} } @media(max-width:560px){ .nh-blk{font-size:14px} .nh-blk .nh-qstats{grid-template-columns:1fr 1fr} .nh-blk .nh-wrap{padding:0 18px} .nh-blk .nh-iframe-wrap{height:600px} .nh-blk .nh-iframe-wrap iframe{height:1200px} } /* ── Hero CTA pair ── */ .nh-hero-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px} .nh-hero-ctas .nh-cta{margin-left:0!important} .nh-blk .nh-cta-mb{display:none} /* ── Guide sticky CTA bar ── */ .nh-blk .nh-sticky{position:fixed;left:0;right:0;bottom:0;z-index:999998;background:#13294a;box-shadow:0 -8px 24px rgba(0,0,0,.18);transform:translateY(120%);opacity:0;pointer-events:none;transition:transform .22s ease,opacity .22s ease} .nh-blk .nh-sticky.nh-sticky-show{transform:translateY(0);opacity:1;pointer-events:auto} .nh-blk .nh-sticky-inner{max-width:640px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:center;gap:12px} .nh-blk .nh-sticky-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:10px;font-weight:700;font-size:14.5px;text-decoration:none!important;white-space:nowrap;transition:.18s;font-family:'Source Sans 3',system-ui,sans-serif} .nh-blk .nh-sticky-btn.nh-sticky-search{background:#C8102E;color:#fff!important;border:none;box-shadow:0 4px 14px rgba(200,16,46,.3)} .nh-blk .nh-sticky-btn.nh-sticky-search:hover{background:#a80d25} .nh-blk .nh-sticky-btn.nh-sticky-talk{background:transparent;color:#fff!important;border:1.5px solid rgba(255,255,255,.4)} .nh-blk .nh-sticky-btn.nh-sticky-talk:hover{border-color:#fff;background:rgba(255,255,255,.08)} .nh-blk .nh-sticky-mb{display:none} .nh-blk .nh-sticky-pad{padding-bottom:calc(var(--nhStickyH,0px) + env(safe-area-inset-bottom,0px))!important} @media(max-width:560px){ .nh-hero-ctas{flex-wrap:nowrap;gap:8px} .nh-hero-ctas .nh-cta{flex:1;font-size:13px;padding:10px 12px;text-align:center;justify-content:center;white-space:nowrap} .nh-blk .nh-cta-dt{display:none} .nh-blk .nh-cta-mb{display:inline} .nh-blk .nh-sticky-inner{padding:10px 12px;gap:8px} .nh-blk .nh-sticky-btn{height:42px;padding:0 14px;font-size:13px;flex:1} .nh-blk .nh-sticky-dt{display:none} .nh-blk .nh-sticky-mb{display:inline} } /* ── Jump-link pills (nav row linking to body sections + FAQ) ── */ .nh-blk .nh-pills{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 8px} .nh-blk .nh-pill{display:inline-flex;align-items:center;padding:7px 16px;border:1.5px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;transition:.15s;background:#fff} .nh-blk .nh-pill:hover{border-color:var(--navy);background:var(--bg-tint);color:var(--navy)} @media(max-width:480px){.nh-blk .nh-pills{gap:6px}.nh-blk .nh-pill{font-size:12px;padding:6px 12px}} /* === CLASSLESS TABLE STYLING === Two wrapper variants: .entry-content (pages) + .et_pb_post_content (posts via Divi TB). Raised specificity to beat (0,1,2) inline and (0,1,1) Divi competitors. Must win on SPECIFICITY not source order (83KB inline block loads after us). */ /* rl-page tables (pages: .entry-content, posts: .et_pb_post_content) */ .entry-content .rl-page table:not([class]), .et_pb_post_content .rl-page table:not([class]){ width:100%;border-collapse:collapse;font-size:14px;line-height:1.55;margin:18px 0; border:1px solid #e2e8f0;border-radius:10px;overflow:hidden; } .entry-content .rl-page section table th, .et_pb_post_content .rl-page section table th{ background:#f1f5f9;font-weight:700;text-align:left;padding:11px 14px; border-bottom:1px solid #e2e8f0;font-size:13px;color:#1e293b; } .entry-content .rl-page section table td, .et_pb_post_content .rl-page section table td{ padding:11px 14px;border-bottom:1px solid #e2e8f0;color:#334155;font-size:14px; } .entry-content .rl-page section table tr:last-child td, .et_pb_post_content .rl-page section table tr:last-child td{border-bottom:0} .entry-content .rl-page section table tr:nth-child(even) td, .et_pb_post_content .rl-page section table tr:nth-child(even) td{background:#f8fafc} /* nh-block tables (both wrappers) */ .nh-blk .nh-tbl-wrap table, .nh-blk .nh-wrap table:not([class]){ width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55; } .nh-blk .nh-tbl-wrap table th, .nh-blk .nh-wrap table:not([class]) th{ background:#f1f5f9;font-weight:700;text-align:left;padding:11px 14px; border-bottom:1px solid #e2e8f0;font-size:13px;color:#1e293b; } .nh-blk .nh-tbl-wrap table td, .nh-blk .nh-wrap table:not([class]) td{ padding:11px 14px;border-bottom:1px solid #e2e8f0;color:#334155; } .nh-blk .nh-tbl-wrap table tr:last-child td{border-bottom:0} /* fallback: classless tables in either content wrapper */ .entry-content table:not([class]), .et_pb_post_content table:not([class]){ width:100%;border-collapse:collapse;font-size:14px;line-height:1.55;margin:18px 0; } .entry-content table:not([class]) th, .et_pb_post_content table:not([class]) th{ background:#f1f5f9;font-weight:700;text-align:left;padding:10px 14px; border:1px solid #e2e8f0;font-size:13px;color:#1e293b; } .entry-content table:not([class]) td, .et_pb_post_content table:not([class]) td{ padding:10px 14px;border:1px solid #e2e8f0;color:#334155; } .entry-content table:not([class]) tr:nth-child(even), .et_pb_post_content table:not([class]) tr:nth-child(even){background:#f8fafc} @media(max-width:640px){ .entry-content .rl-page table:not([class]), .et_pb_post_content .rl-page table:not([class]), .nh-blk .nh-wrap table, .entry-content table:not([class]), .et_pb_post_content table:not([class]){ display:block;overflow-x:auto;-webkit-overflow-scrolling:touch; } } /* === TH-CARD SYSTEM (scoped to .th-section) === */ .th-section{margin:20px 0} .th-section .th-section-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:10px} .th-section .th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px} .th-section .th-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px;transition:box-shadow .15s} .th-section .th-card:hover{box-shadow:0 8px 24px rgba(15,23,42,.08)} .th-section .th-icon{font-size:22px;margin-bottom:8px} .th-section .th-card h3{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px} .th-section .th-card p{font-size:13.5px;color:#64748b;margin:0 0 10px;line-height:1.5} .th-section .th-go{font-size:13px;font-weight:700;color:#c8102e;text-decoration:none} .th-section .th-go:hover{text-decoration:underline} /* === LRG TEMPLATE SYSTEM (ported from et-divi-customizer) === Original scoping: .lrgArticleKit Added alias: .lrgBlogPage (the actual wrapper in served DOM) Total rules: 112 */ .lrgArticleKit, .lrgArticleKit *, .lrgBlogPage, .lrgBlogPage * {box-sizing:border-box} .lrgArticleKit, .lrgBlogPage {--lrg-ink:#0f172a;--lrg-muted:#475569;--lrg-muted2:#64748b;--lrg-card:#ffffff;--lrg-border:rgba(226,232,240,.95);--lrg-borderSoft:rgba(203,213,225,1);--lrg-red:#b91c1c;--lrg-redDark:#991b1b;--lrg-redSoft:rgba(185,28,28,.10);--lrg-navy:#0b1b3a;--lrg-navyDark:#08142b;--lrg-link:var(--lrg-red);--lrg-linkHover:var(--lrg-redDark);--lrg-shadowMain:0 22px 60px rgba(15,23,42,.12);--lrg-shadowSoft:0 12px 32px rgba(15,23,42,.08);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--lrg-ink);background:radial-gradient(1200px 520px at 20% 0%,rgba(185,28,28,.16),transparent 60%),radial-gradient(900px 520px at 80% 18%,rgba(244,63,94,.10),transparent 58%),linear-gradient(180deg,#fff1f2 0%,#f8fafc 45%,#f8fafc 100%);padding:22px 0 80px} .lrgArticleKit a, .lrgBlogPage a {color:var(--lrg-link);text-decoration:none;font-weight:800} .lrgArticleKit a:hover, .lrgBlogPage a:hover {color:var(--lrg-linkHover);text-decoration:underline} .lrgArticleKit .lrgWrap, .lrgBlogPage .lrgWrap {max-width:1200px;margin:0 auto;padding:0 18px} .lrgArticleKit h1, .lrgBlogPage h1 {margin:10px 0 8px;font-size:clamp(28px,3.2vw,40px);font-weight:950;letter-spacing:-.03em;line-height:1.12;color:var(--lrg-ink)} .lrgArticleKit h2, .lrgBlogPage h2 {margin:0 0 8px;font-size:clamp(18px,2vw,22px);font-weight:950;letter-spacing:-.02em;color:var(--lrg-ink)} .lrgArticleKit h3, .lrgBlogPage h3 {margin:0 0 8px;font-size:18px;font-weight:950;letter-spacing:-.02em;color:var(--lrg-ink)} .lrgArticleKit p, .lrgBlogPage p {color:var(--lrg-muted);line-height:1.75;margin:10px 0} .lrgArticleKit .vlnHero, .lrgArticleKit .pcsHero, .lrgArticleKit .lrgHero, .lrgArticleKit .heroCard, .lrgBlogPage .vlnHero, .lrgBlogPage .pcsHero, .lrgBlogPage .lrgHero, .lrgBlogPage .heroCard {background:var(--lrg-card);border:1px solid var(--lrg-border);border-radius:24px;box-shadow:var(--lrg-shadowMain);padding:18px 20px 16px;margin-bottom:14px} .lrgArticleKit .vlnSection, .lrgArticleKit .pcsSection, .lrgArticleKit .lrgSection, .lrgArticleKit .sectionCard, .lrgBlogPage .vlnSection, .lrgBlogPage .pcsSection, .lrgBlogPage .lrgSection, .lrgBlogPage .sectionCard {margin-top:18px;background:var(--lrg-card);border-radius:22px;border:1px solid var(--lrg-border);box-shadow:var(--lrg-shadowSoft);padding:16px 18px 16px;scroll-margin-top:90px} .lrgArticleKit .vlnBreadcrumb, .lrgArticleKit .pcsBreadcrumb, .lrgArticleKit .lrgBreadcrumb, .lrgBlogPage .vlnBreadcrumb, .lrgBlogPage .pcsBreadcrumb, .lrgBlogPage .lrgBreadcrumb {font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--lrg-muted2);font-weight:800;margin-bottom:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .lrgArticleKit .vlnHero-eyebrow, .lrgArticleKit .pcsHero-eyebrow, .lrgArticleKit .lrgHero-eyebrow, .lrgBlogPage .vlnHero-eyebrow, .lrgBlogPage .pcsHero-eyebrow, .lrgBlogPage .lrgHero-eyebrow {display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1px solid rgba(185,28,28,.55)!important;background:#fff;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;color:var(--lrg-muted2);width:fit-content;max-width:100%} .lrgArticleKit .vlnHero-dot, .lrgArticleKit .pcsHero-dot, .lrgArticleKit .lrgHero-dot, .lrgBlogPage .vlnHero-dot, .lrgBlogPage .pcsHero-dot, .lrgBlogPage .lrgHero-dot {width:8px;height:8px;border-radius:999px;background:var(--lrg-red)!important;box-shadow:0 0 0 5px rgba(185,28,28,.16)!important;flex-shrink:0} .lrgArticleKit .vlnAccentWord, .lrgArticleKit .pcsAccentWord, .lrgArticleKit .lrgAccentWord, .lrgBlogPage .vlnAccentWord, .lrgBlogPage .pcsAccentWord, .lrgBlogPage .lrgAccentWord {color:var(--lrg-red)!important;font-weight:950} .lrgArticleKit .vlnHero-jumps, .lrgArticleKit .pcsHero-jumps, .lrgArticleKit .lrgHero-jumps, .lrgBlogPage .vlnHero-jumps, .lrgBlogPage .pcsHero-jumps, .lrgBlogPage .lrgHero-jumps {margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;font-size:12px;margin-bottom:14px!important} .lrgArticleKit .vlnJumpPill, .lrgArticleKit .pcsJumpPill, .lrgArticleKit .lrgJumpPill, .lrgBlogPage .vlnJumpPill, .lrgBlogPage .pcsJumpPill, .lrgBlogPage .lrgJumpPill {display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;border:1px solid rgba(185,28,28,.55)!important;background:#fff;color:var(--lrg-redDark)!important;font-size:12px;font-weight:900;text-decoration:none!important;line-height:1.2;-webkit-tap-highlight-color:transparent} .lrgArticleKit .vlnJumpPill:hover, .lrgArticleKit .pcsJumpPill:hover, .lrgArticleKit .lrgJumpPill:hover, .lrgBlogPage .vlnJumpPill:hover, .lrgBlogPage .pcsJumpPill:hover, .lrgBlogPage .lrgJumpPill:hover {background:rgba(185,28,28,.06)!important;text-decoration:none!important} .lrgArticleKit .vlnJumpPill:focus-visible, .lrgArticleKit .pcsJumpPill:focus-visible, .lrgArticleKit .lrgJumpPill:focus-visible, .lrgBlogPage .vlnJumpPill:focus-visible, .lrgBlogPage .pcsJumpPill:focus-visible, .lrgBlogPage .lrgJumpPill:focus-visible {outline:3px solid rgba(185,28,28,.25);outline-offset:2px} .lrgArticleKit .lrgCtas, .lrgArticleKit .lrgHero-ctas, .lrgArticleKit .vlnHero-ctas, .lrgArticleKit .pcsHero-ctas, .lrgBlogPage .lrgCtas, .lrgBlogPage .lrgHero-ctas, .lrgBlogPage .vlnHero-ctas, .lrgBlogPage .pcsHero-ctas {margin-top:16px!important;gap:12px 10px!important;display:flex;flex-wrap:wrap} .lrgArticleKit .vlnHero-jumps+.lrgCtas, .lrgArticleKit .pcsHero-jumps+.lrgCtas, .lrgArticleKit .lrgHero-jumps+.lrgCtas, .lrgArticleKit .vlnHero-jumps+.lrgHero-ctas, .lrgArticleKit .pcsHero-jumps+.lrgHero-ctas, .lrgArticleKit .lrgHero-jumps+.lrgHero-ctas, .lrgBlogPage .vlnHero-jumps+.lrgCtas, .lrgBlogPage .pcsHero-jumps+.lrgCtas, .lrgBlogPage .lrgHero-jumps+.lrgCtas, .lrgBlogPage .vlnHero-jumps+.lrgHero-ctas, .lrgBlogPage .pcsHero-jumps+.lrgHero-ctas, .lrgBlogPage .lrgHero-jumps+.lrgHero-ctas {margin-top:18px!important} .lrgArticleKit .lrgBtn, .lrgArticleKit .vlnBtn, .lrgArticleKit .pcsBtn, .lrgBlogPage .lrgBtn, .lrgBlogPage .vlnBtn, .lrgBlogPage .pcsBtn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:900;text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:44px;white-space:nowrap;line-height:1;user-select:none;mix-blend-mode:normal} .lrgArticleKit .lrgBtn-primary, .lrgArticleKit .vlnBtn-primary, .lrgArticleKit .pcsBtn-primary, .lrgArticleKit .vlnBtn-success, .lrgArticleKit .pcsBtn-success, .lrgBlogPage .lrgBtn-primary, .lrgBlogPage .vlnBtn-primary, .lrgBlogPage .pcsBtn-primary, .lrgBlogPage .vlnBtn-success, .lrgBlogPage .pcsBtn-success {background:var(--lrg-navy)!important;border-color:var(--lrg-navy)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} .lrgArticleKit .lrgBtn-primary:hover, .lrgArticleKit .vlnBtn-primary:hover, .lrgArticleKit .pcsBtn-primary:hover, .lrgArticleKit .vlnBtn-success:hover, .lrgArticleKit .pcsBtn-success:hover, .lrgBlogPage .lrgBtn-primary:hover, .lrgBlogPage .vlnBtn-primary:hover, .lrgBlogPage .pcsBtn-primary:hover, .lrgBlogPage .vlnBtn-success:hover, .lrgBlogPage .pcsBtn-success:hover {background:var(--lrg-navyDark)!important;border-color:var(--lrg-navyDark)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} .lrgArticleKit .lrgBtn-outline, .lrgArticleKit .lrgBtn-secondary, .lrgArticleKit .vlnBtn-secondary, .lrgArticleKit .pcsBtn-secondary, .lrgBlogPage .lrgBtn-outline, .lrgBlogPage .lrgBtn-secondary, .lrgBlogPage .vlnBtn-secondary, .lrgBlogPage .pcsBtn-secondary {background:#fff!important;border-color:rgba(15,23,42,.45)!important;color:var(--lrg-ink)!important;-webkit-text-fill-color:var(--lrg-ink)!important} .lrgArticleKit .lrgBtn-outline:hover, .lrgArticleKit .lrgBtn-secondary:hover, .lrgArticleKit .vlnBtn-secondary:hover, .lrgArticleKit .pcsBtn-secondary:hover, .lrgBlogPage .lrgBtn-outline:hover, .lrgBlogPage .lrgBtn-secondary:hover, .lrgBlogPage .vlnBtn-secondary:hover, .lrgBlogPage .pcsBtn-secondary:hover {background:#f8fafc!important;border-color:rgba(15,23,42,.70)!important} .lrgArticleKit .lrgBtn-outlineRed, .lrgArticleKit .lrgBtn-ghost, .lrgArticleKit .vlnBtn-reset, .lrgArticleKit .pcsBtn-reset, .lrgBlogPage .lrgBtn-outlineRed, .lrgBlogPage .lrgBtn-ghost, .lrgBlogPage .vlnBtn-reset, .lrgBlogPage .pcsBtn-reset {background:#fff!important;border-color:var(--lrg-red)!important;color:var(--lrg-redDark)!important;-webkit-text-fill-color:var(--lrg-redDark)!important} .lrgArticleKit .lrgBtn-outlineRed:hover, .lrgArticleKit .lrgBtn-ghost:hover, .lrgArticleKit .vlnBtn-reset:hover, .lrgArticleKit .pcsBtn-reset:hover, .lrgBlogPage .lrgBtn-outlineRed:hover, .lrgBlogPage .lrgBtn-ghost:hover, .lrgBlogPage .vlnBtn-reset:hover, .lrgBlogPage .pcsBtn-reset:hover {background:var(--lrg-red)!important;border-color:var(--lrg-red)!important;color:#fff!important;-webkit-text-fill-color:#fff!important} .lrgArticleKit .lrgBtn *, .lrgArticleKit .vlnBtn *, .lrgArticleKit .pcsBtn *, .lrgBlogPage .lrgBtn *, .lrgBlogPage .vlnBtn *, .lrgBlogPage .pcsBtn * {color:inherit!important;-webkit-text-fill-color:inherit!important} .lrgArticleKit button.lrgBtn, button.lrgBtn, .lrgBlogPage button.lrgBtn {font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none} .lrgArticleKit button.lrgBtn::-moz-focus-inner, button.lrgBtn::-moz-focus-inner, .lrgBlogPage button.lrgBtn::-moz-focus-inner {border:0;padding:0} .lrgArticleKit .vlnHero-quick, .lrgArticleKit .pcsHero-quick, .lrgArticleKit .lrgHero-quick, .lrgArticleKit .lrgQuick, .lrgBlogPage .vlnHero-quick, .lrgBlogPage .pcsHero-quick, .lrgBlogPage .lrgHero-quick, .lrgBlogPage .lrgQuick {margin-top:14px;background:#fff5f5!important;border-radius:18px;border:1px solid rgba(252,165,165,.75)!important;padding:12px 12px 10px} .lrgArticleKit .lrgQuickHead, .lrgBlogPage .lrgQuickHead {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .lrgArticleKit .lrgQuickHead strong, .lrgBlogPage .lrgQuickHead strong {font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lrg-redDark);font-weight:950} .lrgArticleKit .lrgQuickHead span, .lrgBlogPage .lrgQuickHead span {font-size:12px;color:var(--lrg-muted2);font-weight:850} .lrgArticleKit .lrgQuickGrid, .lrgBlogPage .lrgQuickGrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px} .lrgArticleKit .vlnHero-quickCard, .lrgArticleKit .pcsHero-quickCard, .lrgArticleKit .lrgHero-quickCard, .lrgArticleKit .lrgQuickCard, .lrgBlogPage .vlnHero-quickCard, .lrgBlogPage .pcsHero-quickCard, .lrgBlogPage .lrgHero-quickCard, .lrgBlogPage .lrgQuickCard {background:#fff;border-radius:12px;border:1px solid var(--lrg-border);padding:10px 11px;box-shadow:0 8px 18px rgba(15,23,42,.04)} .lrgArticleKit .vlnHero-quickCard ul, .lrgArticleKit .pcsHero-quickCard ul, .lrgArticleKit .lrgHero-quickCard ul, .lrgArticleKit .lrgQuickCard ul, .lrgBlogPage .vlnHero-quickCard ul, .lrgBlogPage .pcsHero-quickCard ul, .lrgBlogPage .lrgHero-quickCard ul, .lrgBlogPage .lrgQuickCard ul {list-style:disc!important;padding-left:18px;color:var(--lrg-muted);margin:6px 0 0;font-size:13px;line-height:1.6} .lrgArticleKit .lrgQuickCard li, .lrgBlogPage .lrgQuickCard li {margin:3px 0} .lrgArticleKit .key-takeaways-box, .key-takeaways-box, .lrgBlogPage .key-takeaways-box {background:#fff;border:1px solid rgba(252,165,165,.75);border-radius:16px;padding:14px 14px 12px;box-shadow:0 10px 22px rgba(15,23,42,.06);margin:16px 0} .lrgArticleKit .key-takeaways-box h3, .key-takeaways-box h3, .lrgBlogPage .key-takeaways-box h3 {margin:0 0 8px;color:var(--lrg-ink,#0f172a)} .lrgArticleKit .key-takeaways-box ul, .key-takeaways-box ul, .lrgBlogPage .key-takeaways-box ul {margin:0;padding-left:18px;list-style:disc;color:var(--lrg-muted,#475569)} .lrgArticleKit .key-takeaways-box li, .key-takeaways-box li, .lrgBlogPage .key-takeaways-box li {margin:4px 0} .lrgArticleKit .summary-container, .summary-container, .lrgBlogPage .summary-container {width:100%;max-width:1300px;margin:26px auto;padding:18px 16px;text-align:center;position:relative;z-index:10} #ai-summary-btn, .lrgArticleKit .ai-summary-button, .summary-container .ai-summary-button, .lrgBlogPage .ai-summary-button {display:inline-flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important;background:linear-gradient(45deg,#0b1b3a,#111827)!important;border:2px solid #000!important;border-radius:999px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-family:inherit!important;font-size:18px!important;padding:16px 38px!important;cursor:pointer!important;transition:.25s ease!important} .lrgArticleKit .ai-summary-button:hover, .summary-container .ai-summary-button:hover, .lrgBlogPage .ai-summary-button:hover {box-shadow:0 0 25px rgba(0,0,0,.35)!important;transform:translateY(-1px);background:linear-gradient(45deg,#000,#2a5298,#1e3c72)!important} #summary-box.summary-box, .lrgArticleKit .summary-box, .summary-box, .lrgBlogPage .summary-box {margin-top:16px!important;padding:22px!important;border-radius:12px!important;background:#fff!important;box-shadow:0 12px 32px rgba(15,23,42,.12)!important;border:1px solid rgba(252,165,165,.75)!important} #contact-btn.popup-button, .lrgArticleKit .popup-button, .lrgBlogPage .popup-button {display:inline-block!important;background:var(--lrg-red,#b91c1c)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:16px!important;padding:14px 26px!important;border:1px solid #000!important;border-radius:10px!important;margin-top:18px!important;cursor:pointer!important;transition:.25s ease!important} #contact-btn.popup-button:hover, .lrgArticleKit .popup-button:hover, .lrgBlogPage .popup-button:hover {box-shadow:0 0 20px rgba(0,0,0,.25)!important;transform:translateY(-1px) scale(1.02)!important} .lrgArticleKit .summary-container, .summary-container, .lrgBlogPage .summary-container {padding:16px 12px!important} .lrgArticleKit table, .entry-content table, article table, .post-content table, .lrgBlogPage table {width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;background:#ffffff;box-shadow:0 10px 30px rgba(15,23,42,.06);font-size:15px;border:1px solid #e2e8f0;margin:10px 0 18px} .lrgArticleKit thead tr, .entry-content thead tr, article thead tr, .post-content thead tr, .lrgBlogPage thead tr {background:#f9fafb;color:#111827;text-transform:uppercase;letter-spacing:.04em;font-size:12px} .lrgArticleKit th, .entry-content th, article th, .post-content th, .lrgBlogPage th {padding:12px 16px;border-bottom:1px solid #e5e7eb;font-weight:600;text-align:left;vertical-align:top;background:#f8fafc;color:var(--lrg-ink,#0f172a)} .lrgArticleKit td, .entry-content td, article td, .post-content td, .lrgBlogPage td {padding:12px 16px;border-bottom:1px solid #f1f5f9;vertical-align:middle;text-align:left;color:var(--lrg-muted,#475569);line-height:1.6;font-size:14px} .lrgArticleKit tbody td:first-child, .entry-content tbody td:first-child, article tbody td:first-child, .post-content tbody td:first-child, .lrgBlogPage tbody td:first-child {font-weight:500} .lrgArticleKit tbody tr:nth-child(even), .entry-content tbody tr:nth-child(even), article tbody tr:nth-child(even), .post-content tbody tr:nth-child(even), .lrgBlogPage tbody tr:nth-child(even) {background:#fcfdff} .lrgArticleKit tbody tr:hover, .entry-content tbody tr:hover, article tbody tr:hover, .post-content tbody tr:hover, .lrgBlogPage tbody tr:hover {background:#f1f5f9;box-shadow:inset 3px 0 0 #2563eb} .lrgArticleKit tr:last-child td, .entry-content tr:last-child td, article tr:last-child td, .post-content tr:last-child td, .lrgBlogPage tr:last-child td {border-bottom:none} .lrgArticleKit th, .lrgArticleKit td, .entry-content th, .entry-content td, article th, article td, .lrgBlogPage th, .lrgBlogPage td {padding:8px} .lrgArticleKit details, .lrgBlogPage details {border-top:1px solid var(--lrg-border);padding-top:10px;margin-top:10px} .lrgArticleKit summary, .lrgBlogPage summary {list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:950;color:var(--lrg-ink)} .lrgArticleKit summary::-webkit-details-marker, .lrgBlogPage summary::-webkit-details-marker {display:none} .lrgArticleKit .vlnFaqIcon, .lrgBlogPage .vlnFaqIcon {border:none!important;background:transparent!important;width:18px!important;height:18px!important;border-radius:0!important} .lrgArticleKit .vlnFaqItem summary::after, .lrgArticleKit .pcsFaqItem summary::after, .lrgArticleKit .lrgFaqItem summary::after, .lrgArticleKit details summary::after, .lrgBlogPage .vlnFaqItem summary::after, .lrgBlogPage .pcsFaqItem summary::after, .lrgBlogPage .lrgFaqItem summary::after, .lrgBlogPage details summary::after {content:"+";font-weight:950;color:var(--lrg-redDark);margin-left:10px;flex:0 0 auto} .lrgArticleKit details[open] summary::after, .lrgBlogPage details[open] summary::after {content:"–"} .lrgArticleKit .vlnFaqBody, .lrgArticleKit .pcsFaqBody, .lrgArticleKit .lrgFaqBody, .lrgBlogPage .vlnFaqBody, .lrgBlogPage .pcsFaqBody, .lrgBlogPage .lrgFaqBody {padding:8px 0 12px;color:var(--lrg-muted);line-height:1.75} .lrgArticleKit .lrgTopFaq, .lrgBlogPage .lrgTopFaq {margin-top:12px;background:#fff;border:1px solid var(--lrg-border);border-radius:18px;padding:12px 12px 10px} .lrgBlogPage .neighborhood-cluster, .lrgArticleKit .neighborhood-cluster {margin:40px 0;padding:24px;background:#f9fafb;border-radius:12px;border:1px solid #e2e8f0} .neighborhood-cluster h3 {font-size:22px;margin-bottom:20px;color:#1a365d;font-weight:600;text-align:center} .neighborhood-cluster ul {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .neighborhood-cluster li a {display:flex;align-items:center;justify-content:center;padding:14px 18px;background:#ffffff;border-radius:10px;border:1px solid #e2e8f0;text-decoration:none;color:#2b6cb0;font-weight:500;text-align:center;transition:all 0.25s ease} .neighborhood-cluster li a:hover {background:#edf2f7;border-color:#cbd5e0;color:#1a365d} section[data-lrg-page] .lrgWrap {max-width:1120px;margin:0 auto;padding:0 18px} .lrgBlogPage .lrgWrap {max-width:1120px;margin:0 auto;padding:0 18px} section[data-lrg-page] .lrgHero, .lrgBlogPage .lrgHero, section[data-lrg-page] .lrgSection {background:var(--card);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadowMain);padding:18px 20px 16px} .lrgBlogPage .lrgSection {background:var(--card);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadowMain);padding:18px 20px 16px} section[data-lrg-page] .lrgSection {margin-top:18px;border-radius:22px;box-shadow:var(--shadowSoft);padding:16px 18px 16px;scroll-margin-top:90px} .lrgBlogPage .lrgSection {margin-top:18px;border-radius:22px;box-shadow:var(--shadowSoft);padding:16px 18px 16px;scroll-margin-top:90px} section[data-lrg-page] .lrgBreadcrumb {display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted2)} .lrgBlogPage .lrgBreadcrumb {display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted2)} section[data-lrg-page] .lrgBreadcrumb a {color:var(--muted2);text-decoration:none} .lrgBlogPage .lrgBreadcrumb a {color:var(--muted2);text-decoration:none} section[data-lrg-page] .lrgBreadcrumb a:hover {text-decoration:underline} .lrgBlogPage .lrgBreadcrumb a:hover {text-decoration:underline} section[data-lrg-page] .lrgMeta {margin:0;font-size:12px;color:var(--muted2);font-weight:850;line-height:1.7} .lrgBlogPage .lrgMeta {margin:0;font-size:12px;color:var(--muted2);font-weight:850;line-height:1.7} section[data-lrg-page] .lrgCtas {display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} .lrgBlogPage .lrgCtas {display:flex;flex-wrap:wrap;gap:10px;margin-top:12px} section[data-lrg-page] .lrgBtn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:950;text-decoration:none!important;cursor:pointer;min-height:44px;white-space:nowrap;line-height:1;user-select:none;-webkit-tap-highlight-color:transparent;background-image:none;appearance:none;color:inherit;-webkit-text-fill-color:currentColor!important} .lrgBlogPage .lrgBtn {display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid transparent;font-size:13px;font-weight:950;text-decoration:none!important;cursor:pointer;min-height:44px;white-space:nowrap;line-height:1;user-select:none;-webkit-tap-highlight-color:transparent;background-image:none;appearance:none;color:inherit;-webkit-text-fill-color:currentColor!important} section[data-lrg-page] .lrgBtn:focus-visible {outline:3px solid rgba(185,28,28,.25);outline-offset:2px} .lrgBlogPage .lrgBtn:focus-visible {outline:3px solid rgba(185,28,28,.25);outline-offset:2px} section[data-lrg-page] .lrgBtn-primary {background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 14px 30px rgba(15,23,42,.18)} .lrgBlogPage .lrgBtn-primary {background:var(--navy)!important;border-color:var(--navy)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 14px 30px rgba(15,23,42,.18)} section[data-lrg-page] .lrgBtn-primary:hover {background:var(--navyDark)!important;border-color:var(--navyDark)!important} .lrgBlogPage .lrgBtn-primary:hover {background:var(--navyDark)!important;border-color:var(--navyDark)!important} section[data-lrg-page] .lrgBtn-secondary {background:#fff!important;border-color:rgba(15,23,42,.40)!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important} .lrgBlogPage .lrgBtn-secondary {background:#fff!important;border-color:rgba(15,23,42,.40)!important;color:var(--ink)!important;-webkit-text-fill-color:var(--ink)!important} section[data-lrg-page] .lrgBtn-secondary:hover {background:#f8fafc!important;border-color:rgba(15,23,42,.65)!important} .lrgBlogPage .lrgBtn-secondary:hover {background:#f8fafc!important;border-color:rgba(15,23,42,.65)!important} section[data-lrg-page] .lrgBtn-ghost {background:#fff!important;border-color:rgba(185,28,28,.55)!important;color:var(--redDark)!important;-webkit-text-fill-color:var(--redDark)!important} .lrgBlogPage .lrgBtn-ghost {background:#fff!important;border-color:rgba(185,28,28,.55)!important;color:var(--redDark)!important;-webkit-text-fill-color:var(--redDark)!important} section[data-lrg-page] .lrgBtn-ghost:hover {background:rgba(185,28,28,.06)!important} .lrgBlogPage .lrgBtn-ghost:hover {background:rgba(185,28,28,.06)!important} section[data-lrg-page] .lrgPillRow {margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .lrgBlogPage .lrgPillRow {margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} section[data-lrg-page] .lrgQuick {margin-top:14px;background:#fff5f5;border:1px solid rgba(252,165,165,.75);border-radius:18px;padding:12px 12px 10px} .lrgBlogPage .lrgQuick {margin-top:14px;background:#fff5f5;border:1px solid rgba(252,165,165,.75);border-radius:18px;padding:12px 12px 10px} section[data-lrg-page] .lrgQuickHead {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .lrgBlogPage .lrgQuickHead {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} section[data-lrg-page] .lrgQuickHead strong {font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--redDark);font-weight:950} .lrgBlogPage .lrgQuickHead strong {font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--redDark);font-weight:950} section[data-lrg-page] .lrgQuickHead span {font-size:12px;color:var(--muted2);font-weight:850} .lrgBlogPage .lrgQuickHead span {font-size:12px;color:var(--muted2);font-weight:850} section[data-lrg-page] .lrgQuickGrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px} .lrgBlogPage .lrgQuickGrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px} section[data-lrg-page] .lrgQuickCard {background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 11px;box-shadow:0 8px 18px rgba(15,23,42,.04)} .lrgBlogPage .lrgQuickCard {background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 11px;box-shadow:0 8px 18px rgba(15,23,42,.04)} section[data-lrg-page] .lrgQuickCard ul {margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.6} .lrgBlogPage .lrgQuickCard ul {margin:6px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.6} section[data-lrg-page] .lrgQuickCard li {margin:3px 0} .lrgBlogPage .lrgQuickCard li {margin:3px 0} section[data-lrg-page] .lrgTable, .lrgBlogPage .lrgTable, section[data-lrg-page] .lrgMiniTable {width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden} .lrgBlogPage .lrgMiniTable {width:100%;border-collapse:collapse;margin-top:10px;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden} section[data-lrg-page] .lrgTable th, .lrgBlogPage .lrgTable th, section[data-lrg-page] .lrgTable td, .lrgBlogPage .lrgTable td, section[data-lrg-page] .lrgMiniTable th, .lrgBlogPage .lrgMiniTable th, section[data-lrg-page] .lrgMiniTable td {padding:10px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:13px;color:var(--muted);line-height:1.6} .lrgBlogPage .lrgMiniTable td {padding:10px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:13px;color:var(--muted);line-height:1.6} section[data-lrg-page] .lrgTable th, .lrgBlogPage .lrgTable th, section[data-lrg-page] .lrgMiniTable th {background:#f8fafc;color:var(--ink);font-weight:950} .lrgBlogPage .lrgMiniTable th {background:#f8fafc;color:var(--ink);font-weight:950} section[data-lrg-page] .lrgTable tr:last-child td, .lrgBlogPage .lrgTable tr:last-child td, section[data-lrg-page] .lrgMiniTable tr:last-child td {border-bottom:none} .lrgBlogPage .lrgMiniTable tr:last-child td {border-bottom:none} section[data-lrg-page] .lrgTopFaq {margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:12px 12px 10px} .lrgBlogPage .lrgTopFaq {margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:12px 12px 10px} section[data-lrg-page] .lrgFaqBody {padding:8px 0 12px;color:var(--muted);line-height:1.75;font-size:14px} .lrgBlogPage .lrgFaqBody {padding:8px 0 12px;color:var(--muted);line-height:1.75;font-size:14px} section[data-lrg-page] .lrgPill {display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;font-weight:950;background:#f8fafc;color:var(--muted2);line-height:1.2} .lrgBlogPage .lrgPill {display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;font-weight:950;background:#f8fafc;color:var(--muted2);line-height:1.2} section[data-lrg-page] .lrgPill>span:first-child {width:7px;height:7px;border-radius:999px;background:#94a3b8;box-shadow:0 0 0 5px rgba(148,163,184,.18);flex:0 0 7px} .lrgBlogPage .lrgPill>span:first-child {width:7px;height:7px;border-radius:999px;background:#94a3b8;box-shadow:0 0 0 5px rgba(148,163,184,.18);flex:0 0 7px} section[data-lrg-page] .lrgPill[data-level="good"] {border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08);color:#166534} .lrgBlogPage .lrgPill[data-level="good"] {border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08);color:#166534} section[data-lrg-page] .lrgPill[data-level="good"]>span:first-child {background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.16)} .lrgBlogPage .lrgPill[data-level="good"]>span:first-child {background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.16)} section[data-lrg-page] .lrgPill[data-level="tight"] {border-color:rgba(245,158,11,.40);background:rgba(245,158,11,.10);color:#92400e} .lrgBlogPage .lrgPill[data-level="tight"] {border-color:rgba(245,158,11,.40);background:rgba(245,158,11,.10);color:#92400e} section[data-lrg-page] .lrgPill[data-level="tight"]>span:first-child {background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.16)} .lrgBlogPage .lrgPill[data-level="tight"]>span:first-child {background:#f59e0b;box-shadow:0 0 0 5px rgba(245,158,11,.16)} section[data-lrg-page] .lrgPill[data-level="high"] {border-color:rgba(185,28,28,.40);background:rgba(185,28,28,.08);color:var(--redDark)} .lrgBlogPage .lrgPill[data-level="high"] {border-color:rgba(185,28,28,.40);background:rgba(185,28,28,.08);color:var(--redDark)} section[data-lrg-page] .lrgPill[data-level="high"]>span:first-child {background:var(--red);box-shadow:0 0 0 5px rgba(185,28,28,.16)} .lrgBlogPage .lrgPill[data-level="high"]>span:first-child {background:var(--red);box-shadow:0 0 0 5px rgba(185,28,28,.16)} section[data-lrg-page] .lrgCallout {margin-top:12px;background:#ffffff;border:1px solid rgba(15,23,42,.18);border-radius:18px;padding:12px 12px 10px;box-shadow:0 10px 24px rgba(15,23,42,.06)} .lrgBlogPage .lrgCallout {margin-top:12px;background:#ffffff;border:1px solid rgba(15,23,42,.18);border-radius:18px;padding:12px 12px 10px;box-shadow:0 10px 24px rgba(15,23,42,.06)} /* === BULLET-SECTION SYSTEM (ported from 83KB inline block) === Original scoping: .rl-page Added aliases: .lrgBlogPage, .lrgArticleKit Total rules: 57 */ /* =========================== RL Traffic-Light Callouts Scoped to .rl-page only =========================== */ .rl-page .bullet-section-green, .rl-page .bullet-section-yellow, .rl-page .bullet-section-red, /* =========================== RL Traffic-Light Callouts Scoped to .lrgBlogPage only =========================== */ .lrgBlogPage .bullet-section-green, /* =========================== RL Traffic-Light Callouts Scoped to .lrgArticleKit only =========================== */ .lrgArticleKit .bullet-section-green, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red {border-radius: 16px; padding: 16px 18px; margin: 18px 0; border: 1px solid; box-shadow: none !important; /* hard kill any inherited shadow */} /* Backgrounds + borders */ .rl-page .bullet-section-green, /* Backgrounds + borders */ .lrgBlogPage .bullet-section-green, /* Backgrounds + borders */ .lrgArticleKit .bullet-section-green {background: #ecfdf5; /* soft green */ border-color: rgba(22, 163, 74, 0.35);} .rl-page .bullet-section-yellow, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow {background: #fffbeb; /* soft amber */ border-color: rgba(245, 158, 11, 0.40);} .rl-page .bullet-section-red, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red {background: #fef2f2; /* soft red */ border-color: rgba(239, 68, 68, 0.38);} /* Optional: left accent stripe (adds scan-ability) */ .rl-page .bullet-section-green, .rl-page .bullet-section-yellow, .rl-page .bullet-section-red, /* Optional: left accent stripe (adds scan-ability) */ .lrgBlogPage .bullet-section-green, /* Optional: left accent stripe (adds scan-ability) */ .lrgArticleKit .bullet-section-green, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red {border-left-width: 6px;} .rl-page .bullet-section-green, .lrgBlogPage .bullet-section-green, .lrgArticleKit .bullet-section-green {border-left-color: #16a34a;} .rl-page .bullet-section-yellow, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow {border-left-color: #f59e0b;} .rl-page .bullet-section-red, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red {border-left-color: #ef4444;} /* Tighten list spacing inside callouts */ .rl-page .bullet-section-green ul, .rl-page .bullet-section-yellow ul, .rl-page .bullet-section-red ul, .rl-page .bullet-section-green ol, .rl-page .bullet-section-yellow ol, .rl-page .bullet-section-red ol, /* Tighten list spacing inside callouts */ .lrgBlogPage .bullet-section-green ul, /* Tighten list spacing inside callouts */ .lrgArticleKit .bullet-section-green ul, .lrgBlogPage .bullet-section-yellow ul, .lrgArticleKit .bullet-section-yellow ul, .lrgBlogPage .bullet-section-red ul, .lrgArticleKit .bullet-section-red ul, .lrgBlogPage .bullet-section-green ol, .lrgArticleKit .bullet-section-green ol, .lrgBlogPage .bullet-section-yellow ol, .lrgArticleKit .bullet-section-yellow ol, .lrgBlogPage .bullet-section-red ol, .lrgArticleKit .bullet-section-red ol {margin: 0; padding-left: 20px;} .rl-page .bullet-section-green li, .rl-page .bullet-section-yellow li, .rl-page .bullet-section-red li, .lrgBlogPage .bullet-section-green li, .lrgArticleKit .bullet-section-green li, .lrgBlogPage .bullet-section-yellow li, .lrgArticleKit .bullet-section-yellow li, .lrgBlogPage .bullet-section-red li, .lrgArticleKit .bullet-section-red li {margin: 6px 0;} /* ----------------------------- 2) BULLET SECTIONS (traffic light) Your markup uses: .bullet-section-gray / blue / yellow Add these too: .bullet-section-green / .bullet-section-red ----------------------------- */ .rl-page .bullet-section-gray, .rl-page .bullet-section-blue, .rl-page .bullet-section-yellow, .rl-page .bullet-section-green, .rl-page .bullet-section-red, .rl-page .bullet-section-gray, .rl-page .bullet-section-blue, .rl-page .bullet-section-yellow, .rl-page .bullet-section-green, .rl-page .bullet-section-red, /* ----------------------------- 2) BULLET SECTIONS (traffic light) Your markup uses: .bullet-section-gray / blue / yellow Add these too: .bullet-section-green / .bullet-section-red ----------------------------- */ .lrgBlogPage .bullet-section-gray, /* ----------------------------- 2) BULLET SECTIONS (traffic light) Your markup uses: .bullet-section-gray / blue / yellow Add these too: .bullet-section-green / .bullet-section-red ----------------------------- */ .lrgArticleKit .bullet-section-gray, .lrgBlogPage .bullet-section-blue, .lrgArticleKit .bullet-section-blue, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow, .lrgBlogPage .bullet-section-green, .lrgArticleKit .bullet-section-green, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red, .lrgBlogPage .bullet-section-gray, .lrgArticleKit .bullet-section-gray {border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px 16px; margin: 16px 0; background: #ffffff; box-shadow: 0 10px 22px rgba(15,23,42,.04); color: #334155;} /* Bullet section headings inside the box */ .rl-page .bullet-section-gray h3, .rl-page .bullet-section-blue h3, .rl-page .bullet-section-yellow h3, .rl-page .bullet-section-green h3, .rl-page .bullet-section-red h3, .rl-page .bullet-section-gray h3, .rl-page .bullet-section-blue h3, .rl-page .bullet-section-yellow h3, .rl-page .bullet-section-green h3, .rl-page .bullet-section-red h3, /* Bullet section headings inside the box */ .lrgBlogPage .bullet-section-gray h3, /* Bullet section headings inside the box */ .lrgArticleKit .bullet-section-gray h3, .lrgBlogPage .bullet-section-blue h3, .lrgArticleKit .bullet-section-blue h3, .lrgBlogPage .bullet-section-yellow h3, .lrgArticleKit .bullet-section-yellow h3, .lrgBlogPage .bullet-section-green h3, .lrgArticleKit .bullet-section-green h3, .lrgBlogPage .bullet-section-red h3, .lrgArticleKit .bullet-section-red h3, .lrgBlogPage .bullet-section-gray h3, .lrgArticleKit .bullet-section-gray h3 {margin: 0 0 8px; font-size: 16px; font-weight: 900; color: #0F1F4A;} /* Lists inside bullet sections */ .rl-page .bullet-section-gray ul, .rl-page .bullet-section-gray ol, .rl-page .bullet-section-blue ul, .rl-page .bullet-section-blue ol, .rl-page .bullet-section-yellow ul, .rl-page .bullet-section-yellow ol, .rl-page .bullet-section-green ul, .rl-page .bullet-section-green ol, .rl-page .bullet-section-red ul, .rl-page .bullet-section-red ol, .rl-page .bullet-section-gray ul, .rl-page .bullet-section-gray ol, .rl-page .bullet-section-blue ul, .rl-page .bullet-section-blue ol, .rl-page .bullet-section-yellow ul, .rl-page .bullet-section-yellow ol, .rl-page .bullet-section-green ul, .rl-page .bullet-section-green ol, .rl-page .bullet-section-red ul, .rl-page .bullet-section-red ol, /* Lists inside bullet sections */ .lrgBlogPage .bullet-section-gray ul, /* Lists inside bullet sections */ .lrgArticleKit .bullet-section-gray ul, .lrgBlogPage .bullet-section-gray ol, .lrgArticleKit .bullet-section-gray ol, .lrgBlogPage .bullet-section-blue ul, .lrgArticleKit .bullet-section-blue ul, .lrgBlogPage .bullet-section-blue ol, .lrgArticleKit .bullet-section-blue ol, .lrgBlogPage .bullet-section-yellow ul, .lrgArticleKit .bullet-section-yellow ul, .lrgBlogPage .bullet-section-yellow ol, .lrgArticleKit .bullet-section-yellow ol, .lrgBlogPage .bullet-section-green ul, .lrgArticleKit .bullet-section-green ul, .lrgBlogPage .bullet-section-green ol, .lrgArticleKit .bullet-section-green ol, .lrgBlogPage .bullet-section-red ul, .lrgArticleKit .bullet-section-red ul, .lrgBlogPage .bullet-section-red ol, .lrgArticleKit .bullet-section-red ol, .lrgBlogPage .bullet-section-gray ul, .lrgArticleKit .bullet-section-gray ul {margin: 0; padding-left: 20px;} .rl-page .bullet-section-gray li, .rl-page .bullet-section-blue li, .rl-page .bullet-section-yellow li, .rl-page .bullet-section-green li, .rl-page .bullet-section-red li, .rl-page .bullet-section-gray li, .rl-page .bullet-section-blue li, .rl-page .bullet-section-yellow li, .rl-page .bullet-section-green li, .rl-page .bullet-section-red li, .lrgBlogPage .bullet-section-gray li, .lrgArticleKit .bullet-section-gray li, .lrgBlogPage .bullet-section-blue li, .lrgArticleKit .bullet-section-blue li, .lrgBlogPage .bullet-section-yellow li, .lrgArticleKit .bullet-section-yellow li, .lrgBlogPage .bullet-section-green li, .lrgArticleKit .bullet-section-green li, .lrgBlogPage .bullet-section-red li, .lrgArticleKit .bullet-section-red li {margin: 8px 0;} /* Tones */ .rl-page .bullet-section-gray, .rl-page .bullet-section-gray, /* Tones */ .lrgBlogPage .bullet-section-gray, /* Tones */ .lrgArticleKit .bullet-section-gray, .lrgBlogPage .bullet-section-gray, .lrgArticleKit .bullet-section-gray {background: #f8fafc; border-color: #e2e8f0; border-left: 6px solid #cbd5e1;} .rl-page .bullet-section-blue, .rl-page .bullet-section-blue, .lrgBlogPage .bullet-section-blue, .lrgArticleKit .bullet-section-blue {background: #fef2f2; border-color: #fecaca; border-left: 6px solid #C8102E;} .rl-page .bullet-section-yellow, .rl-page .bullet-section-yellow, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow {background: #fffbeb; border-color: #fde68a; border-left: 6px solid #f59e0b;} .rl-page .bullet-section-green, .rl-page .bullet-section-green, .lrgBlogPage .bullet-section-green, .lrgArticleKit .bullet-section-green {background: #ecfdf5; border-color: #bbf7d0; border-left: 6px solid #16a34a;} .rl-page .bullet-section-red, .rl-page .bullet-section-red, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red {background: #fef2f2; border-color: #fecaca; border-left: 6px solid #dc2626;} /* ----------------------------- 2) BULLET SECTIONS (traffic light) Your markup uses: .bullet-section-gray / blue / yellow Add these too: .bullet-section-green / .bullet-section-red ----------------------------- */ .rl-page .bullet-section-gray, .rl-page .bullet-section-blue, .rl-page .bullet-section-yellow, .rl-page .bullet-section-green, .rl-page .bullet-section-red, .rl-page .bullet-section-gray, .rl-page .bullet-section-blue, .rl-page .bullet-section-yellow, .rl-page .bullet-section-green, .rl-page .bullet-section-red, /* ----------------------------- 2) BULLET SECTIONS (traffic light) Your markup uses: .bullet-section-gray / blue / yellow Add these too: .bullet-section-green / .bullet-section-red ----------------------------- */ .lrgBlogPage .bullet-section-gray, /* ----------------------------- 2) BULLET SECTIONS (traffic light) Your markup uses: .bullet-section-gray / blue / yellow Add these too: .bullet-section-green / .bullet-section-red ----------------------------- */ .lrgArticleKit .bullet-section-gray, .lrgBlogPage .bullet-section-blue, .lrgArticleKit .bullet-section-blue, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow, .lrgBlogPage .bullet-section-green, .lrgArticleKit .bullet-section-green, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red, .lrgBlogPage .bullet-section-gray, .lrgArticleKit .bullet-section-gray {border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px 16px; margin: 16px 0; background: #ffffff; box-shadow: 0 10px 22px rgba(15,23,42,.04); color: #334155;} /* Bullet section headings inside the box */ .rl-page .bullet-section-gray h3, .rl-page .bullet-section-blue h3, .rl-page .bullet-section-yellow h3, .rl-page .bullet-section-green h3, .rl-page .bullet-section-red h3, .rl-page .bullet-section-gray h3, .rl-page .bullet-section-blue h3, .rl-page .bullet-section-yellow h3, .rl-page .bullet-section-green h3, .rl-page .bullet-section-red h3, /* Bullet section headings inside the box */ .lrgBlogPage .bullet-section-gray h3, /* Bullet section headings inside the box */ .lrgArticleKit .bullet-section-gray h3, .lrgBlogPage .bullet-section-blue h3, .lrgArticleKit .bullet-section-blue h3, .lrgBlogPage .bullet-section-yellow h3, .lrgArticleKit .bullet-section-yellow h3, .lrgBlogPage .bullet-section-green h3, .lrgArticleKit .bullet-section-green h3, .lrgBlogPage .bullet-section-red h3, .lrgArticleKit .bullet-section-red h3, .lrgBlogPage .bullet-section-gray h3, .lrgArticleKit .bullet-section-gray h3 {margin: 0 0 8px; font-size: 16px; font-weight: 900; color: #0F1F4A;} /* Lists inside bullet sections */ .rl-page .bullet-section-gray ul, .rl-page .bullet-section-gray ol, .rl-page .bullet-section-blue ul, .rl-page .bullet-section-blue ol, .rl-page .bullet-section-yellow ul, .rl-page .bullet-section-yellow ol, .rl-page .bullet-section-green ul, .rl-page .bullet-section-green ol, .rl-page .bullet-section-red ul, .rl-page .bullet-section-red ol, .rl-page .bullet-section-gray ul, .rl-page .bullet-section-gray ol, .rl-page .bullet-section-blue ul, .rl-page .bullet-section-blue ol, .rl-page .bullet-section-yellow ul, .rl-page .bullet-section-yellow ol, .rl-page .bullet-section-green ul, .rl-page .bullet-section-green ol, .rl-page .bullet-section-red ul, .rl-page .bullet-section-red ol, /* Lists inside bullet sections */ .lrgBlogPage .bullet-section-gray ul, /* Lists inside bullet sections */ .lrgArticleKit .bullet-section-gray ul, .lrgBlogPage .bullet-section-gray ol, .lrgArticleKit .bullet-section-gray ol, .lrgBlogPage .bullet-section-blue ul, .lrgArticleKit .bullet-section-blue ul, .lrgBlogPage .bullet-section-blue ol, .lrgArticleKit .bullet-section-blue ol, .lrgBlogPage .bullet-section-yellow ul, .lrgArticleKit .bullet-section-yellow ul, .lrgBlogPage .bullet-section-yellow ol, .lrgArticleKit .bullet-section-yellow ol, .lrgBlogPage .bullet-section-green ul, .lrgArticleKit .bullet-section-green ul, .lrgBlogPage .bullet-section-green ol, .lrgArticleKit .bullet-section-green ol, .lrgBlogPage .bullet-section-red ul, .lrgArticleKit .bullet-section-red ul, .lrgBlogPage .bullet-section-red ol, .lrgArticleKit .bullet-section-red ol, .lrgBlogPage .bullet-section-gray ul, .lrgArticleKit .bullet-section-gray ul {margin: 0; padding-left: 20px;} .rl-page .bullet-section-gray li, .rl-page .bullet-section-blue li, .rl-page .bullet-section-yellow li, .rl-page .bullet-section-green li, .rl-page .bullet-section-red li, .rl-page .bullet-section-gray li, .rl-page .bullet-section-blue li, .rl-page .bullet-section-yellow li, .rl-page .bullet-section-green li, .rl-page .bullet-section-red li, .lrgBlogPage .bullet-section-gray li, .lrgArticleKit .bullet-section-gray li, .lrgBlogPage .bullet-section-blue li, .lrgArticleKit .bullet-section-blue li, .lrgBlogPage .bullet-section-yellow li, .lrgArticleKit .bullet-section-yellow li, .lrgBlogPage .bullet-section-green li, .lrgArticleKit .bullet-section-green li, .lrgBlogPage .bullet-section-red li, .lrgArticleKit .bullet-section-red li {margin: 8px 0;} /* Tones */ .rl-page .bullet-section-gray, .rl-page .bullet-section-gray, /* Tones */ .lrgBlogPage .bullet-section-gray, /* Tones */ .lrgArticleKit .bullet-section-gray, .lrgBlogPage .bullet-section-gray, .lrgArticleKit .bullet-section-gray {background: #f8fafc; border-color: #e2e8f0; border-left: 6px solid #cbd5e1;} .rl-page .bullet-section-blue, .rl-page .bullet-section-blue, .lrgBlogPage .bullet-section-blue, .lrgArticleKit .bullet-section-blue {background: #fef2f2; border-color: #fecaca; border-left: 6px solid #C8102E;} .rl-page .bullet-section-yellow, .rl-page .bullet-section-yellow, .lrgBlogPage .bullet-section-yellow, .lrgArticleKit .bullet-section-yellow {background: #fffbeb; border-color: #fde68a; border-left: 6px solid #f59e0b;} .rl-page .bullet-section-green, .rl-page .bullet-section-green, .lrgBlogPage .bullet-section-green, .lrgArticleKit .bullet-section-green {background: #ecfdf5; border-color: #bbf7d0; border-left: 6px solid #16a34a;} .rl-page .bullet-section-red, .rl-page .bullet-section-red, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red {background: #fef2f2; border-color: #fecaca; border-left: 6px solid #dc2626;} /* ========================================================== RL shaded callouts + traffic-light bullet boxes - Removes the thick left stripe - Adds shaded background + thin border (all sides) Paste at the VERY BOTTOM of your CSS (or Divi > Custom CSS) ========================================================== */ /* ---------- Base: all callouts + bullet sections ---------- */ .rl-callout, .bullet-section-blue, .bullet-section-gray, .bullet-section-yellow, .bullet-section-green, .rl-page .bullet-section-red, .lrgBlogPage .bullet-section-red, .lrgArticleKit .bullet-section-red {border: 1px solid #e2e8f0 !important; border-left: 1px solid #e2e8f0 !important; /* kills thick left stripe */ border-radius: 18px !important; background: #f8fafc !important; background-image: none !important; /* kills gradients if any */ box-shadow: none !important; /* cleaner “flat” box */ padding: 16px 18px !important; margin: 20px 0 !important;} /* ---------- Tone variants (Traffic Light + Pro Tip) ---------- */ .bullet-section-green, .rl-page .rl-callout--green, .lrgBlogPage .rl-callout--green, .lrgArticleKit .rl-callout--green {background: #ecfdf5 !important; border-color: #bbf7d0 !important; border-left-color: #bbf7d0 !important;} .bullet-section-yellow, .rl-page .rl-callout--yellow, .lrgBlogPage .rl-callout--yellow, .lrgArticleKit .rl-callout--yellow {background: #fffbeb !important; border-color: #fde68a !important; border-left-color: #fde68a !important;} .bullet-section-red, .rl-page .rl-callout--red, .lrgBlogPage .rl-callout--red, .lrgArticleKit .rl-callout--red {background: #fef2f2 !important; border-color: #fecaca !important; border-left-color: #fecaca !important;} /* Blue tone for bullet sections + Pro Tip callouts */ .bullet-section-blue, .rl-callout--blue, .rl-page .rl-callout.rl-pro-tip, .lrgBlogPage .rl-callout.rl-pro-tip, .lrgArticleKit .rl-callout.rl-pro-tip {background: #fef2f2 !important; border-color: #fecaca !important; border-left-color: #fecaca !important;} /* Gray “neutral” box */ .rl-page .bullet-section-gray, .lrgBlogPage .bullet-section-gray, .lrgArticleKit .bullet-section-gray {background: #f8fafc !important; border-color: #e2e8f0 !important; border-left-color: #e2e8f0 !important;} /* ---------- Cleaner typography + list spacing inside boxes ---------- */ .rl-callout h2, .rl-callout h3, .rl-callout h4, .bullet-section-blue h2, .bullet-section-blue h3, .bullet-section-blue h4, .bullet-section-gray h2, .bullet-section-gray h3, .bullet-section-gray h4, .bullet-section-green h2, .bullet-section-green h3, .bullet-section-green h4, .bullet-section-yellow h2, .bullet-section-yellow h3, .bullet-section-yellow h4, .bullet-section-red h2, .bullet-section-red h3, .bullet-section-red h4 {margin: 0 0 10px !important;} .rl-callout p, .bullet-section-blue p, .bullet-section-gray p, .bullet-section-green p, .bullet-section-yellow p, .bullet-section-red p {margin: 0 0 10px !important;} .rl-callout p:last-child, .bullet-section-blue p:last-child, .bullet-section-gray p:last-child, .bullet-section-green p:last-child, .bullet-section-yellow p:last-child, .bullet-section-red p:last-child {margin-bottom: 0 !important;} .rl-callout ul, .rl-callout ol, .bullet-section-blue ul, .bullet-section-blue ol, .bullet-section-gray ul, .bullet-section-gray ol, .bullet-section-green ul, .bullet-section-green ol, .bullet-section-yellow ul, .bullet-section-yellow ol, .bullet-section-red ul, .bullet-section-red ol {margin: 0 !important; padding-left: 18px !important;} .rl-callout li, .bullet-section-blue li, .bullet-section-gray li, .bullet-section-green li, .bullet-section-yellow li, .bullet-section-red li {margin: 8px 0 !important;} /* If you nest a bullet-section inside another, reduce the inner box spacing */ .bullet-section-gray .bullet-section-blue, .bullet-section-gray .bullet-section-green, .bullet-section-gray .bullet-section-yellow, .bullet-section-gray .bullet-section-red {margin: 12px 0 0 !important;} /* --------------------------- 2) TRAFFIC-LIGHT BOXES (your 3-column fit cards + the blue bullet boxes) Fix: theme/builder overrides are winning. Force tones with !important. ---------------------------- */ .rl-page.rl-page .bullet-section-green, .rl-page.rl-page .bullet-section-yellow, .rl-page.rl-page .bullet-section-red, .rl-page.rl-page .bullet-section-blue, .rl-page.rl-page .bullet-section-gray, .rl-page.rl-page .bullet-section-green, .rl-page.rl-page .bullet-section-yellow, .rl-page.rl-page .bullet-section-red, .rl-page.rl-page .bullet-section-blue, .rl-page.rl-page .bullet-section-gray, /* --------------------------- 2) TRAFFIC-LIGHT BOXES (your 3-column fit cards + the blue bullet boxes) Fix: theme/builder overrides are winning. Force tones with !important. ---------------------------- */ .lrgBlogPage.lrgBlogPage .bullet-section-green, /* --------------------------- 2) TRAFFIC-LIGHT BOXES (your 3-column fit cards + the blue bullet boxes) Fix: theme/builder overrides are winning. Force tones with !important. ---------------------------- */ .lrgArticleKit.lrgArticleKit .bullet-section-green, .lrgBlogPage.lrgBlogPage .bullet-section-yellow, .lrgArticleKit.lrgArticleKit .bullet-section-yellow, .lrgBlogPage.lrgBlogPage .bullet-section-red, .lrgArticleKit.lrgArticleKit .bullet-section-red, .lrgBlogPage.lrgBlogPage .bullet-section-blue, .lrgArticleKit.lrgArticleKit .bullet-section-blue, .lrgBlogPage.lrgBlogPage .bullet-section-gray, .lrgArticleKit.lrgArticleKit .bullet-section-gray, .lrgBlogPage.lrgBlogPage .bullet-section-green, .lrgArticleKit.lrgArticleKit .bullet-section-green {border-radius:18px !important; padding:16px 18px !important; border:1px solid rgba(15,23,42,.12) !important; background:#ffffff !important; box-shadow:0 10px 24px rgba(15,23,42,.05) !important;} /* Tone fills */ .rl-page.rl-page .bullet-section-green, .rl-page.rl-page .bullet-section-green, /* Tone fills */ .lrgBlogPage.lrgBlogPage .bullet-section-green, /* Tone fills */ .lrgArticleKit.lrgArticleKit .bullet-section-green, .lrgBlogPage.lrgBlogPage .bullet-section-green, .lrgArticleKit.lrgArticleKit .bullet-section-green {background:#ecfdf5 !important; border-color:rgba(22,163,74,.32) !important;} .rl-page.rl-page .bullet-section-yellow, .rl-page.rl-page .bullet-section-yellow, .lrgBlogPage.lrgBlogPage .bullet-section-yellow, .lrgArticleKit.lrgArticleKit .bullet-section-yellow {background:#fffbeb !important; border-color:rgba(245,158,11,.38) !important;} .rl-page.rl-page .bullet-section-red, .rl-page.rl-page .bullet-section-red, .lrgBlogPage.lrgBlogPage .bullet-section-red, .lrgArticleKit.lrgArticleKit .bullet-section-red {background:#fef2f2 !important; border-color:rgba(239,68,68,.35) !important;} .rl-page.rl-page .bullet-section-blue, .rl-page.rl-page .bullet-section-blue, .lrgBlogPage.lrgBlogPage .bullet-section-blue, .lrgArticleKit.lrgArticleKit .bullet-section-blue {background:#fef2f2 !important; border-color:rgba(200,16,46,.35) !important;} .rl-page.rl-page .bullet-section-gray, .rl-page.rl-page .bullet-section-gray, .lrgBlogPage.lrgBlogPage .bullet-section-gray, .lrgArticleKit.lrgArticleKit .bullet-section-gray {background:#f8fafc !important; border-color:rgba(100,116,139,.25) !important;} /* Keep the 3-column grid tight (no extra outer margins inside grid) */ .rl-page.rl-page .rl-grid-3 > .bullet-section-green, .rl-page.rl-page .rl-grid-3 > .bullet-section-yellow, .rl-page.rl-page .rl-grid-3 > .bullet-section-red, .rl-page.rl-page .rl-grid-3 > .bullet-section-green, .rl-page.rl-page .rl-grid-3 > .bullet-section-yellow, .rl-page.rl-page .rl-grid-3 > .bullet-section-red, /* Keep the 3-column grid tight (no extra outer margins inside grid) */ .lrgBlogPage.lrgBlogPage .rl-grid-3 > .bullet-section-green, /* Keep the 3-column grid tight (no extra outer margins inside grid) */ .lrgArticleKit.lrgArticleKit .rl-grid-3 > .bullet-section-green, .lrgBlogPage.lrgBlogPage .rl-grid-3 > .bullet-section-yellow, .lrgArticleKit.lrgArticleKit .rl-grid-3 > .bullet-section-yellow, .lrgBlogPage.lrgBlogPage .rl-grid-3 > .bullet-section-red, .lrgArticleKit.lrgArticleKit .rl-grid-3 > .bullet-section-red, .lrgBlogPage.lrgBlogPage .rl-grid-3 > .bullet-section-green, .lrgArticleKit.lrgArticleKit .rl-grid-3 > .bullet-section-green {margin:0 !important;} /* List spacing inside these boxes */ .rl-page.rl-page .bullet-section-green ul, .rl-page.rl-page .bullet-section-yellow ul, .rl-page.rl-page .bullet-section-red ul, .rl-page.rl-page .bullet-section-blue ul, .rl-page.rl-page .bullet-section-gray ul, .rl-page.rl-page .bullet-section-green ol, .rl-page.rl-page .bullet-section-yellow ol, .rl-page.rl-page .bullet-section-red ol, .rl-page.rl-page .bullet-section-blue ol, .rl-page.rl-page .bullet-section-gray ol, .rl-page.rl-page .bullet-section-green ul, .rl-page.rl-page .bullet-section-yellow ul, .rl-page.rl-page .bullet-section-red ul, .rl-page.rl-page .bullet-section-blue ul, .rl-page.rl-page .bullet-section-gray ul, .rl-page.rl-page .bullet-section-green ol, .rl-page.rl-page .bullet-section-yellow ol, .rl-page.rl-page .bullet-section-red ol, .rl-page.rl-page .bullet-section-blue ol, .rl-page.rl-page .bullet-section-gray ol, /* List spacing inside these boxes */ .lrgBlogPage.lrgBlogPage .bullet-section-green ul, /* List spacing inside these boxes */ .lrgArticleKit.lrgArticleKit .bullet-section-green ul, .lrgBlogPage.lrgBlogPage .bullet-section-yellow ul, .lrgArticleKit.lrgArticleKit .bullet-section-yellow ul, .lrgBlogPage.lrgBlogPage .bullet-section-red ul, .lrgArticleKit.lrgArticleKit .bullet-section-red ul, .lrgBlogPage.lrgBlogPage .bullet-section-blue ul, .lrgArticleKit.lrgArticleKit .bullet-section-blue ul, .lrgBlogPage.lrgBlogPage .bullet-section-gray ul, .lrgArticleKit.lrgArticleKit .bullet-section-gray ul, .lrgBlogPage.lrgBlogPage .bullet-section-green ol, .lrgArticleKit.lrgArticleKit .bullet-section-green ol, .lrgBlogPage.lrgBlogPage .bullet-section-yellow ol, .lrgArticleKit.lrgArticleKit .bullet-section-yellow ol, .lrgBlogPage.lrgBlogPage .bullet-section-red ol, .lrgArticleKit.lrgArticleKit .bullet-section-red ol, .lrgBlogPage.lrgBlogPage .bullet-section-blue ol, .lrgArticleKit.lrgArticleKit .bullet-section-blue ol, .lrgBlogPage.lrgBlogPage .bullet-section-gray ol, .lrgArticleKit.lrgArticleKit .bullet-section-gray ol, .lrgBlogPage.lrgBlogPage .bullet-section-green ul, .lrgArticleKit.lrgArticleKit .bullet-section-green ul {margin:0 !important; padding-left:20px !important;} /* ============================================================ LRG-VARIANT CLASS ALIASES (added 2026-05-06) LRG's HTML migration introduced BEM-style and structural class names that VALN's CSS doesn't recognize. These aliases map LRG's class structure to existing VALN rule sets. Future canonical migration script will align LRG output with VALN's class names, at which point these aliases can be removed. ============================================================ */ /* ---------------------------------------------------------- 1. Bullet sections — base + BEM modifier classes Source: vln-pages.css lines 3839-3910 ---------------------------------------------------------- */ .rl-page .rl-bullet-section, at which point these aliases can be removed. ============================================================ */ /* ---------------------------------------------------------- 1. Bullet sections — base + BEM modifier classes Source: vln-pages.css lines 3839-3910 ---------------------------------------------------------- */ .lrgBlogPage .rl-bullet-section, at which point these aliases can be removed. ============================================================ */ /* ---------------------------------------------------------- 1. Bullet sections — base + BEM modifier classes Source: vln-pages.css lines 3839-3910 ---------------------------------------------------------- */ .lrgArticleKit .rl-bullet-section {border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px 16px; margin: 16px 0; background: #ffffff; box-shadow: 0 10px 22px rgba(15,23,42,.04); color: #334155;} .rl-page .rl-bullet-section h3, .lrgBlogPage .rl-bullet-section h3, .lrgArticleKit .rl-bullet-section h3 {margin: 0 0 8px; font-size: 16px; font-weight: 900;} .rl-page .rl-bullet-section ul, .rl-page .rl-bullet-section ol, .lrgBlogPage .rl-bullet-section ul, .lrgArticleKit .rl-bullet-section ul, .lrgBlogPage .rl-bullet-section ol, .lrgArticleKit .rl-bullet-section ol {margin: 0; padding-left: 20px;} .rl-page .rl-bullet-section li, .lrgBlogPage .rl-bullet-section li, .lrgArticleKit .rl-bullet-section li {margin: 8px 0;} /* Color variants — backgrounds + border accents */ .rl-page .rl-bullet-section--green, /* Color variants — backgrounds + border accents */ .lrgBlogPage .rl-bullet-section--green, /* Color variants — backgrounds + border accents */ .lrgArticleKit .rl-bullet-section--green {background: #ecfdf5; border-color: rgba(22, 163, 74, 0.35); border-left: 6px solid #16a34a;} .rl-page .rl-bullet-section--blue, .lrgBlogPage .rl-bullet-section--blue, .lrgArticleKit .rl-bullet-section--blue {background: #fef2f2; border-color: #fecaca; border-left: 6px solid #C8102E;} .rl-page .rl-bullet-section--red, .lrgBlogPage .rl-bullet-section--red, .lrgArticleKit .rl-bullet-section--red {background: #fef2f2; border-color: rgba(239, 68, 68, 0.38); border-left: 6px solid #ef4444;} .rl-page .rl-bullet-section--yellow, .lrgBlogPage .rl-bullet-section--yellow, .lrgArticleKit .rl-bullet-section--yellow {background: #fffbeb; border-color: rgba(245, 158, 11, 0.40); border-left: 6px solid #f59e0b;} .rl-page .rl-bullet-section--gray, .lrgBlogPage .rl-bullet-section--gray, .lrgArticleKit .rl-bullet-section--gray {background: #f8fafc; border-color: #e2e8f0; border-left: 6px solid #94a3b8;}