.cl-page{font-family:Arial,Helvetica,sans-serif;color:#1f2937;line-height:1.45;width:100%;max-width:none;margin:0}.cl-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;background:#fff;border:1px solid #bfdbfe;border-radius:14px;margin-bottom:18px}.cl-hero-title{display:flex;align-items:center;gap:12px}.cl-logo-mark{width:48px;height:48px;border-radius:50%;position:relative;background:#e7f1ff;border:2px solid #93c5fd;flex:0 0 48px}.cl-logo-mark:before{content:"";position:absolute;width:25px;height:25px;border:7px solid #2563eb;border-right-color:transparent;border-radius:50%;left:8px;top:9px;transform:rotate(-28deg)}.cl-logo-mark:after{content:"";position:absolute;width:10px;height:10px;background:#123d75;border-radius:50%;right:6px;top:10px}.cl-logo-name{font-size:22px;font-weight:700;color:#123d75;line-height:1.1}.cl-logo-tag{font-size:11px;color:#2563eb;margin-top:3px}.cl-hero h1{margin:0;color:#123d75;font-size:26px;line-height:1.15}.cl-hero p{margin:4px 0 0;color:#475569;font-size:14px}.cl-section-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:7px;margin:24px 0 10px;font-size:22px}.cl-intro{margin:0 0 14px;font-size:14px}.cl-getting{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 22px}.cl-get-card{border:1px solid #bfdbfe;border-radius:9px;padding:11px;background:#fff}.cl-get-card h3{margin:0 0 4px;color:#123d75;font-size:14px}.cl-get-card p{margin:0;font-size:12.5px;line-height:1.35}.cl-product{border:1px solid #93c5fd;border-radius:12px;background:#fff;overflow:hidden;margin:0 0 14px;scroll-margin-top:20px}.cl-product-head{display:grid;grid-template-columns:minmax(180px,1fr) repeat(3,minmax(170px,1fr));gap:8px;align-items:stretch;padding:10px;background:#eef7ff;border-bottom:1px solid #bfdbfe}.cl-product-title{display:flex;align-items:center;gap:10px;padding:4px 8px}.cl-product-icon{width:52px;height:52px;border-radius:50%;background:#dbeafe;color:#1261c9;display:flex;align-items:center;justify-content:center;flex:0 0 52px}.cl-product-icon svg{width:31px;height:31px}.cl-product-title h2{margin:0;color:#123d75;font-size:22px;line-height:1.1}.cl-product-title p{margin:4px 0 0;font-size:12.5px;color:#475569;line-height:1.3}.cl-req{background:#fff;border:1px solid #bfdbfe;border-radius:8px;padding:9px 10px}.cl-req h4{margin:0 0 3px;color:#123d75;font-size:12.5px;line-height:1.15}.cl-req p{margin:0;font-size:11.5px;line-height:1.3}.cl-product-body{padding:8px 10px 10px}.cl-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}.cl-product details{margin:0!important;border:1px solid #93c5fd!important;border-radius:7px!important;background:#eff6ff!important;overflow:hidden}.cl-product details summary{list-style:none;cursor:pointer;display:flex!important;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px!important;color:#123d75!important;background:#dbeafe!important;font-size:13px!important;font-weight:700!important;line-height:1.2!important}.cl-product details summary::-webkit-details-marker{display:none}.cl-product details summary:after{content:"+";font-size:22px;font-weight:700;color:#1261c9;line-height:1;flex:0 0 auto}.cl-product details[open] summary:after{content:"−"}.cl-product .cl-body{background:#fce9dc!important;padding:9px 10px!important;border-top:1px solid #fed7aa!important}.cl-product .cl-body p{margin:0 0 6px!important;font-size:12px!important;line-height:1.35!important}.cl-product .cl-body p:last-child{margin-bottom:0!important}.cl-product .cl-link{color:#123d75!important;font-weight:700!important;font-size:12px!important}.cl-product-foot{display:flex;align-items:center;justify-content:flex-end;padding:7px 10px 9px;gap:8px}.cl-faq-jump{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #60a5fa;border-radius:7px;background:#fff;color:#123d75;text-decoration:none;font-size:12px;font-weight:700}.cl-faq-jump:hover{background:#eff6ff}.cl-faq-icon{font-size:14px;color:#ef4444;font-weight:800;line-height:1}.cl-simple-product{border:1px solid #93c5fd;border-radius:12px;background:#eef7ff;margin:0 0 8px;scroll-margin-top:20px}.cl-simple-head{display:flex;align-items:center;gap:10px;padding:9px 10px}.cl-simple-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.cl-simple-icon{width:42px;height:42px;border-radius:50%;background:#dbeafe;color:#1261c9;display:flex;align-items:center;justify-content:center;flex:0 0 42px}.cl-simple-icon svg{width:25px;height:25px}.cl-simple-head h2{margin:0;color:#123d75;font-size:18px;line-height:1.15}.cl-simple-head p{margin:2px 0 0;color:#475569;font-size:11.5px}.cl-simple-plus{color:#1261c9;font-size:24px;font-weight:700}.cl-simple-faq{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid #60a5fa;border-radius:7px;background:#fff;color:#123d75;text-decoration:none;font-size:11.5px;font-weight:700}.cl-faq-area{margin-top:26px;padding-top:4px}.cl-faq-product{scroll-margin-top:20px;margin:0 0 12px;border:1px solid #93c5fd;border-radius:10px;background:#fff;overflow:hidden}.cl-faq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#eef7ff;border-bottom:1px solid #bfdbfe}.cl-faq-head h3{margin:0;color:#123d75;font-size:16px}.cl-faq-list{padding:7px 9px}.cl-faq-list details{border:1px solid #93c5fd;border-radius:7px;margin:4px 0;overflow:hidden;background:#eff6ff}.cl-faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#dbeafe;color:#123d75;font-size:12.5px;font-weight:700}.cl-faq-list summary::-webkit-details-marker{display:none}.cl-faq-list summary:after{content:"+";font-size:20px;color:#1261c9;line-height:1}.cl-faq-list details[open] summary:after{content:"−"}.cl-faq-list>details>div{background:#fce9dc!important;border-top:1px solid #fed7aa;padding:8px 10px;font-size:12px;line-height:1.35}.cl-faq-list>details>div p{margin:0;font-size:inherit;line-height:inherit}.cl-note{padding:9px 11px;background:#fff;border:1px solid #bfdbfe;border-radius:7px;color:#475569;font-size:12px}.cl-related{border-left:3px solid #2563eb;padding-left:14px;margin:12px 0}.cl-related p{margin:0 0 8px;font-size:13px}.cl-related a{color:#1d4ed8;font-weight:700;text-decoration:underline}@media(max-width:1000px){.cl-product-head{grid-template-columns:1fr 1fr}.cl-product-title{grid-column:1/-1}.cl-getting{grid-template-columns:1fr 1fr}}@media(max-width:700px){.cl-product-head{grid-template-columns:1fr}.cl-getting,.cl-details-grid{grid-template-columns:1fr}.cl-hero{align-items:flex-start}.cl-logo-name{font-size:19px}}.cl-product-head{background:linear-gradient(135deg,#064f9e 0%,#006dcc 100%)!important;border-bottom:0!important;padding:10px!important}.cl-product-title{padding:4px 8px!important}.cl-product-title h2{color:#fff!important;font-size:22px!important}.cl-product-title p{color:#eaf4ff!important}.cl-product-icon{background:#e8f4ff!important;color:#075fc4!important;border:1px solid rgba(255,255,255,.75)!important}.cl-req{background:#f4faff!important;border:1px solid #bfdbfe!important}.cl-req h4{color:#064f9e!important}.cl-req p{color:#23415f!important}.cl-product-body{background:#fff!important}.cl-product details{background:#eff7ff!important;border-color:#93c5fd!important}.cl-product details summary{background:#dbeeff!important;color:#064f9e!important}.cl-product details summary:after{color:#075fc4!important}.cl-product details[open] summary{background:#dbeeff!important}.cl-product .cl-body{background:#fce9dc!important;border-top:1px solid #f5c7a5!important}.cl-product .cl-body p,.cl-product .cl-body .cl-source{background:#fce9dc!important}.cl-product-foot{background:#fff!important}.cl-faq-jump{background:#fff!important;color:#064f9e!important;border-color:#60a5fa!important}.cl-faq-product .cl-faq-head{background:#eaf5ff!important}.cl-faq-list details[open]>summary{background:#dbeeff!important}.cl-faq-list details[open]>div{background:#fce9dc!important}@media(max-width:900px){.cl-product-head{grid-template-columns:1fr 1fr!important}.cl-product-head .cl-product-title{grid-column:1/-1}.cl-product-head .cl-req{min-width:0}.cl-details-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:700px){.cl-product-head{grid-template-columns:1fr!important}.cl-product-head .cl-product-title{grid-column:auto}.cl-details-grid{grid-template-columns:1fr!important}}.cl-product details[open] .cl-body{background:#fce9dc!important}.cl-product details[open] .cl-body *{border-color:transparent}.g{font:14px/1.45 Arial,Helvetica,sans-serif;color:#1f2937;width:100%;margin:0}.e{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;background:#fff;border:1px solid #bfdbfe;border-radius:14px;margin-bottom:18px}.p{display:flex;align-items:center;gap:12px}.n{width:48px;height:48px;border-radius:50%;position:relative;background:#e7f1ff;border:2px solid #93c5fd;flex:0 0 48px}.n:before{content:"";position:absolute;width:25px;height:25px;border:7px solid #2563eb;border-right-color:transparent;border-radius:50%;left:8px;top:9px;transform:rotate(-28deg)}.n:after{content:"";position:absolute;width:10px;height:10px;background:#123d75;border-radius:50%;right:6px;top:10px}.o{font-size:22px;font-weight:700;color:#123d75;line-height:1.1}.m{font-size:11px;color:#2563eb;margin-top:3px}.e h1{margin:0;color:#123d75;font-size:26px;line-height:1.15}.e p{margin:4px 0 0;color:#475569;font-size:14px}.z23{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:7px;margin:24px 0 10px;font-size:22px}.cl-intro{margin:0 0 14px;font-size:14px}.cl-getting{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 22px}.cl-get-card{border:1px solid #bfdbfe;border-radius:9px;padding:11px;background:#fff}.cl-get-card h3{margin:0 0 4px;color:#123d75;font-size:14px}.cl-get-card p{margin:0;font-size:12.5px;line-height:1.35}.h{border:1px solid #93c5fd;border-radius:12px;background:#fff;overflow:hidden;margin:0 0 14px;scroll-margin-top:20px}.u{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;padding:10px;background:linear-gradient(135deg,#064f9e,#006dcc);border-bottom:0}.w{display:flex;align-items:center;gap:10px;padding:4px 8px;grid-column:1/-1}.v{width:52px;height:52px;border-radius:50%;background:#e8f4ff;color:#075fc4;border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;flex:0 0 52px}.v svg{width:31px;height:31px}.w h2{margin:0;color:#fff;font-size:22px;line-height:1.1}.w p{margin:4px 0 0;font-size:12.5px;color:#eaf4ff;line-height:1.3}.d{background:#f4faff;border:1px solid #bfdbfe;border-radius:8px;padding:9px 10px;min-width:0}.d h4{margin:0 0 3px;color:#064f9e;font-size:12.5px;line-height:1.15}.d p{margin:0;color:#23415f;font-size:11.5px;line-height:1.3}.s{padding:8px 10px 10px;background:#fff}.r{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}.h details{margin:0;border:1px solid #93c5fd;border-radius:7px;background:#eff7ff;overflow:hidden}.h summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;color:#064f9e;background:#dbeeff;font-size:13px;font-weight:700;line-height:1.2}.h summary::-webkit-details-marker,.l summary::-webkit-details-marker{display:none}.h summary .x,.l summary .x{font-size:20px;font-weight:700;color:#075fc4;line-height:1;flex:0 0 auto;margin-left:8px}.h details>.b{background:#fce9dc;border-top:1px solid #f5c7a5;padding:9px 10px}.h details>.b p{margin:0 0 6px;font-size:12px;line-height:1.35}.h details>.b p:last-child{margin-bottom:0}.h details>.b a{color:#123d75;font-weight:700;font-size:12px;text-decoration:underline}.t{display:flex;align-items:center;justify-content:flex-end;padding:7px 10px 9px;gap:8px;background:#fff}.k{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #60a5fa;border-radius:7px;background:#fff;color:#064f9e;text-decoration:none;font-size:12px;font-weight:700}.cl-faq-icon,.q{font-size:14px;color:#ef4444;font-weight:800;line-height:1}.i{margin-top:26px;padding-top:4px}.z16{scroll-margin-top:20px;margin:0 0 12px;border:1px solid #93c5fd;border-radius:10px;background:#fff;overflow:hidden}.j{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#eaf5ff;border-bottom:1px solid #bfdbfe}.j h3{margin:0;color:#123d75;font-size:16px}.l{padding:7px 9px}.l details{border:1px solid #93c5fd;border-radius:7px;margin:4px 0;overflow:hidden;background:#eff6ff}.l summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#dbeeff;color:#123d75;font-size:12.5px;font-weight:700}.l summary .x{font-size:20px;margin-left:8px}.l details>.b{background:#fce9dc;border-top:1px solid #fed7aa;padding:8px 10px;font-size:12px;line-height:1.35}.l details>.b p{margin:0;font-size:inherit;line-height:inherit}.f{padding:9px 11px;background:#fff;border:1px solid #bfdbfe;border-radius:7px;color:#475569;font-size:12px}.cl-related{border-left:3px solid #2563eb;padding-left:14px;margin:12px 0}.cl-related p{margin:0 0 8px;font-size:13px}.cl-related a{color:#1d4ed8;font-weight:700;text-decoration:underline}@media(max-width:1000px){.u{grid-template-columns:1fr 1fr}.w{grid-column:1/-1}.cl-getting{grid-template-columns:1fr 1fr}}@media(max-width:700px){.u{grid-template-columns:1fr}.w{grid-column:auto}.cl-getting,.r{grid-template-columns:1fr}.e{align-items:flex-start}.o{font-size:19px}}.g{font:14px/1.45 Arial,Helvetica,sans-serif;color:#1f2937;width:100%;margin:0}.e{padding:18px 16px 17px;background:linear-gradient(110deg,#1a4da7 0%,#235fdf 100%);border:0;border-radius:10px;margin-bottom:18px;min-height:105px;box-sizing:border-box}.head-copy{margin:0}.eyebrow{margin:0 0 6px;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.8px;line-height:1;text-transform:uppercase}.e h1{margin:0;color:#fff;font-size:23px;line-height:1.15;font-weight:700}.e p{margin:9px 0 0;color:#fff;font-size:11px;line-height:1.2}.z23{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:7px;margin:24px 0 10px;font-size:22px}.cl-intro{margin:0 0 14px;font-size:14px}.cl-getting{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 22px}.cl-get-card{border:1px solid #bfdbfe;border-radius:9px;padding:11px;background:#fff}.cl-get-card h3{margin:0 0 4px;color:#123d75;font-size:14px}.cl-get-card p{margin:0;font-size:12.5px;line-height:1.35}.h{border:1px solid #93c5fd;border-radius:12px;background:#fff;overflow:hidden;margin:0 0 14px;scroll-margin-top:20px}.u{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch;padding:10px;background:linear-gradient(135deg,#064f9e,#006dcc);border-bottom:0}.w{display:flex;align-items:center;gap:10px;padding:4px 8px;grid-column:1/-1}.v{width:52px;height:52px;border-radius:50%;background:#e8f4ff;color:#075fc4;border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;flex:0 0 52px}.v svg{width:31px;height:31px}.w h2{margin:0;color:#fff;font-size:22px;line-height:1.1}.w p{margin:4px 0 0;font-size:12.5px;color:#eaf4ff;line-height:1.3}.d{background:#f4faff;border:1px solid #bfdbfe;border-radius:8px;padding:9px 10px;min-width:0}.d h4{margin:0 0 3px;color:#064f9e;font-size:12.5px;line-height:1.15}.d p{margin:0;color:#23415f;font-size:11.5px;line-height:1.3}.s{padding:8px 10px 10px;background:#fff}.r{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}.h details{margin:0;border:1px solid #93c5fd;border-radius:7px;background:#eff7ff;overflow:hidden}.h summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;color:#064f9e;background:#dbeeff;font-size:13px;font-weight:700;line-height:1.2}.h summary::-webkit-details-marker,.l summary::-webkit-details-marker{display:none}.h summary .x,.l summary .x{font-size:20px;font-weight:700;color:#075fc4;line-height:1;flex:0 0 auto;margin-left:8px}.h details>.b{background:#fce9dc;border-top:1px solid #f5c7a5;padding:9px 10px}.h details>.b p{margin:0 0 6px;font-size:12px;line-height:1.35}.h details>.b p:last-child{margin-bottom:0}.h details>.b a{color:#123d75;font-weight:700;font-size:12px;text-decoration:underline}.t{display:flex;align-items:center;justify-content:flex-end;padding:7px 10px 9px;gap:8px;background:#fff}.k{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #60a5fa;border-radius:7px;background:#fff;color:#064f9e;text-decoration:none;font-size:12px;font-weight:700}.cl-faq-icon,.q{font-size:14px;color:#ef4444;font-weight:800;line-height:1}.i{margin-top:26px;padding-top:4px}.z16{scroll-margin-top:20px;margin:0 0 12px;border:1px solid #93c5fd;border-radius:10px;background:#fff;overflow:hidden}.j{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#eaf5ff;border-bottom:1px solid #bfdbfe}.j h3{margin:0;color:#123d75;font-size:16px}.l{padding:7px 9px}.l details{border:1px solid #93c5fd;border-radius:7px;margin:4px 0;overflow:hidden;background:#eff6ff}.l summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#dbeeff;color:#123d75;font-size:12.5px;font-weight:700}.l summary .x{font-size:20px;margin-left:8px}.l details>.b{background:#fce9dc;border-top:1px solid #fed7aa;padding:8px 10px;font-size:12px;line-height:1.35}.l details>.b p{margin:0;font-size:inherit;line-height:inherit}.f{padding:9px 11px;background:#fff;border:1px solid #bfdbfe;border-radius:7px;color:#475569;font-size:12px}.cl-related{border-left:3px solid #2563eb;padding-left:14px;margin:12px 0}.cl-related p{margin:0 0 8px;font-size:13px}.cl-related a{color:#1d4ed8;font-weight:700;text-decoration:underline}@media(max-width:1000px){.u{grid-template-columns:1fr 1fr}.w{grid-column:1/-1}.cl-getting{grid-template-columns:1fr 1fr}}@media(max-width:700px){.u{grid-template-columns:1fr}.w{grid-column:auto}.cl-getting,.r{grid-template-columns:1fr}.e{align-items:flex-start}.o{font-size:19px}}.cl-section-title{color:#123d75;border-bottom:1px solid #dbeafe;padding-bottom:5px;margin:12px 0 5px;font-size:18px;line-height:1.2}.cl-overview-intro,.cl-overview-note,.cl-start-intro{margin:0 0 5px;font-size:9px;line-height:1.35}.cl-overview-pills{display:flex;flex-wrap:wrap;gap:3px;margin:2px 0 7px}.cl-overview-pills span{background:#eff6ff;border:1px solid #bfdbfe;color:#123d75;border-radius:999px;padding:2px 6px;font-size:8.5px;font-weight:700;line-height:1.1}.cl-overview-cta{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:8.5px;line-height:1.3}.cl-overview-cta a{display:inline-block;padding:4px 7px;background:#2563eb;color:#fff;border-radius:4px;text-decoration:none;font-size:8.5px;font-weight:700;white-space:nowrap}.cl-start-title{margin-top:11px}.cl-start{margin:0 0 12px}.cl-get-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.cl-get-card{border:1px solid #bfdbfe;border-radius:6px;padding:8px;background:#fff;min-width:0;box-sizing:border-box}.cl-get-head{display:flex;align-items:center;gap:7px;margin-bottom:6px}.cl-get-icon{width:22px;height:22px;border-radius:50%;background:#e7f1ff;display:flex;align-items:center;justify-content:center;flex:0 0 22px;color:#2563eb;font-size:11px;line-height:1}.cl-get-card h3{margin:0;color:#123d75;font-size:9.5px;line-height:1.1}.cl-get-card p{margin:0 0 6px;font-size:8px;line-height:1.35}.cl-get-card p:last-child{margin-bottom:0}.cl-get-card strong{color:#123d75}.cl-get-card a{color:#2563eb;text-decoration:underline}@media(max-width:1000px){.cl-get-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.cl-get-grid{grid-template-columns:1fr}.cl-overview-cta{align-items:flex-start;flex-direction:column;gap:4px}}
/* Companion Life Quick Start Guide 1 — additions for compact HTML */
/* Add to the bottom of the existing user.css. */

.cl-final{font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-main{font-family:Arial,Helvetica,sans-serif;color:#1f2937;line-height:1.6;width:100%;max-width:none;margin:0}

/* Header */
.cl-final .cl-header{background:linear-gradient(135deg,#123d75,#2563eb);color:#fff;padding:28px 24px;border-radius:16px;margin-bottom:22px}
.cl-final .cl-header-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.85;font-weight:bold}
.cl-final .cl-header-title{font-size:32px;margin:8px 0 10px;color:#fff}
.cl-final .cl-header-title-text{font-size:36px}
.cl-final .cl-header-sub{margin:0;font-size:16px;opacity:.95}

/* Overview */
.cl-final .cl-overview-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:8px;margin-top:28px}
.cl-final .cl-overview-intro{margin-bottom:10px}
.cl-final .cl-pills{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-pills span{background:#eff6ff;border:1px solid #bfdbfe;color:#123d75;border-radius:999px;padding:5px 10px;font-size:14px;font-weight:bold}
.cl-final .cl-overview-text{margin:0 0 16px}
.cl-final .cl-overview-text a{text-decoration:underline}

/* Getting Started */
.cl-final .cl-gs-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:8px;margin-top:28px;font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-gs{font-family:Arial,Helvetica,sans-serif;color:#1f3b68;line-height:1.5;margin:12px 0 24px}
.cl-final .cl-gs-intro{margin:0 0 16px;font-size:16.5px;color:#173b70}
.cl-final .cl-gs-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.cl-final .cl-gs-grid>div{border:1px solid #bfdbfe;border-radius:10px;padding:16px;background:#fff;min-width:0;box-sizing:border-box}
.cl-final .cl-gs-grid>div>div:first-child{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cl-final .cl-gs-grid>div>div:first-child>div{width:42px;height:42px;border-radius:50%;background:#e7f1ff;display:flex;align-items:center;justify-content:center;flex:0 0 42px;color:#2563eb;font-size:21px}
.cl-final .cl-gs-grid h3{margin:0;color:#123d75;font-size:18px;line-height:1.2;font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-gs-grid h3 span,.cl-final .cl-gs-grid p span{font-size:14px}
.cl-final .cl-gs-grid>div>p:first-of-type{margin:0 0 16px;font-size:16.5px;line-height:1.45}
.cl-final .cl-gs-grid>div>p:last-of-type{margin:0;font-size:15px;line-height:1.4;color:#123d75}

/* Product sections */
.cl-final .cl-product{border:1px solid #93c5fd;border-radius:12px;background:#fff;overflow:hidden;margin:0 0 14px;scroll-margin-top:20px;box-sizing:border-box}
.cl-final .cl-product-head{display:grid;grid-template-columns:minmax(180px,1fr) repeat(3,minmax(170px,1fr));gap:8px;align-items:stretch;padding:10px;background:linear-gradient(135deg,#064f9e 0%,#006dcc 100%);border-bottom:0;box-sizing:border-box}
.cl-final .cl-product-title{display:flex;align-items:center;gap:10px;padding:4px 8px;box-sizing:border-box}
.cl-final .cl-product-icon{width:52px;height:52px;border-radius:50%;background:#e8f4ff;color:#075fc4;border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;flex:0 0 52px;box-sizing:border-box}
.cl-final .cl-product-title h2{margin:0;color:#fff;font-size:22px;line-height:1.1}
.cl-final .cl-product-title p{margin:4px 0 0;font-size:12.5px;color:#eaf4ff;line-height:1.3}
.cl-final .cl-product-head .cl-req{background:#f4faff;border:1px solid #bfdbfe;border-radius:8px;padding:9px 10px;box-sizing:border-box;min-width:0}
.cl-final .cl-product-head .cl-req h4{margin:0 0 3px;color:#064f9e;font-size:12.5px;line-height:1.15}
.cl-final .cl-product-head .cl-req p{margin:0;font-size:11.5px;line-height:1.3}
.cl-final .cl-product-body{padding:8px 10px 10px;background:#fff;box-sizing:border-box}
.cl-final .cl-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;box-sizing:border-box}
.cl-final .cl-details-grid>details{margin:0;border:1px solid #93c5fd;border-radius:7px;background:#eff7ff;overflow:hidden;box-sizing:border-box}
.cl-final .cl-details-grid>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;color:#064f9e;background:#dbeeff;font-size:13px;font-weight:bold;line-height:1.2;box-sizing:border-box}
.cl-final .cl-details-grid>details>summary>span{color:#075fc4;font-size:22px;font-weight:bold;line-height:1;flex:0 0 auto;margin-left:8px}
.cl-final .cl-details-grid>details>div{background:#fce9dc;padding:9px 10px;border-top:1px solid #f5c7a5;box-sizing:border-box}
.cl-final #product-accident .cl-source,
.cl-final #product-dental .cl-source,
.cl-final #product-vision .cl-source{display:block!important;width:100%!important;box-sizing:border-box;margin:0 0 6px;padding:4px 8px!important;background-color:#fce9dc!important;background-image:none!important;line-height:1.35;text-align:left!important;color:#374151!important;font-size:12px}
.cl-final #product-disability .cl-source,
.cl-final #product-term-life .cl-source,
.cl-final #product-hospital-indemnity .cl-source,
.cl-final #product-critical-illness .cl-source{background:#FCE9DC;padding:10px 12px;border-radius:6px;box-sizing:border-box;margin:0 0 6px;font-size:12px;line-height:1.35}
.cl-final .cl-details-grid>details>div p{margin:0 0 6px;font-size:12px;line-height:1.35;box-sizing:border-box;margin-bottom:0}
.cl-final .cl-details-grid>details>div p a{color:#123d75;font-weight:bold;font-size:12px;text-decoration:underline}
.cl-final .cl-product-foot{display:flex;align-items:center;justify-content:flex-end;padding:7px 10px 9px;gap:8px;background:#fff}

/* FAQ navigation/button */
.cl-final .cl-faq-jump{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #60a5fa;border-radius:7px;background:#fff;color:#064f9e;text-decoration:none;font-size:12px;font-weight:bold;box-sizing:border-box}
.cl-final .cl-faq-head .cl-faq-icon{font-size:14px;color:#ef4444;font-weight:800;line-height:1}

/* FAQ sections */
.cl-final .cl-faq-area{margin-top:26px;padding-top:4px}
.cl-final .cl-section-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:7px;margin:24px 0 10px;font-size:22px;line-height:1.2}
.cl-final .cl-faq-product{scroll-margin-top:20px;margin:0 0 12px;border:1px solid #93c5fd;border-radius:10px;background:#fff;overflow:hidden;box-sizing:border-box}
.cl-final .cl-faq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#eaf5ff;border-bottom:1px solid #bfdbfe}
.cl-final .cl-faq-head h3{margin:0;color:#123d75;font-size:16px}
.cl-final .cl-faq-list{padding:7px 9px}
.cl-final .cl-faq-list>details{border:1px solid #93c5fd;border-radius:7px;margin:4px 0;overflow:hidden;background:#eff6ff}
.cl-final .cl-faq-list>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#dbeeff;color:#123d75;font-size:12.5px;font-weight:bold;box-sizing:border-box}
.cl-final .cl-faq-list>details>summary>span{color:#1261c9;font-size:20px;line-height:1;margin-left:8px}
.cl-final .cl-faq-list>details>div{padding:6px 10px;background:#fce9dc;border-radius:6px;margin:4px 0 8px 0}
.cl-final .cl-faq-list>details>div>span{font-size:18px}
.cl-final #faq-accident .cl-faq-list>details>div,
.cl-final #faq-dental .cl-faq-list>details>div,
.cl-final #faq-vision .cl-faq-list>details>div{padding:8px 10px;background:#fce9dc;border-top:1px solid #fed7aa;font-size:12px;line-height:1.35;box-sizing:border-box}
.cl-final #faq-accident .cl-faq-list>details>div>p,
.cl-final #faq-dental .cl-faq-list>details>div>p,
.cl-final #faq-vision .cl-faq-list>details>div>p{margin:0;font-size:14.8pt;line-height:1.3;background-color:#fce9dc;padding:0 2px}

/* Related articles */
.cl-final .cl-related-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:8px;margin:28px 0 12px;font-size:22px}
.cl-final .cl-related{border-left:3px solid #2563eb;padding-left:14px;margin:12px 0}
.cl-final .cl-related p:first-child{margin:0 0 10px;font-size:15pt;line-height:1.4}
.cl-final .cl-related p:not(:first-child){margin:0;font-size:15pt;line-height:1.4}
.cl-final .cl-related a{color:#1d4ed8;font-weight:bold;text-decoration:underline}

/* Preserve the source's summary-marker behavior */
.cl-final summary{list-style:none}
.cl-final summary::-webkit-details-marker{display:none}


/* ===== Final product icon + compact requirements refinements ===== */

/* Keep the original product layout, but give the requirements cards less vertical weight. */
.cl-final .cl-product-head{
  grid-template-columns:minmax(205px,0.95fr) repeat(3,minmax(170px,1fr));
  gap:7px;
  padding:8px;
}
.cl-final .cl-product-title{gap:9px;padding:3px 7px}
.cl-final .cl-product-icon{
  width:50px;height:50px;flex:0 0 50px;
  background:#eef7ff;
  border:1px solid rgba(255,255,255,.9);
  position:relative;
}
.cl-final .cl-product-head .cl-req{padding:7px 9px;border-radius:7px}
.cl-final .cl-product-head .cl-req h4{font-size:11.5px;margin-bottom:2px}
.cl-final .cl-product-head .cl-req p{font-size:10.5px;line-height:1.24}
.cl-final .cl-product-title h2{font-size:21px}
.cl-final .cl-product-title p{font-size:11.5px;line-height:1.25;margin-top:3px}

/* Uniform blue product icons inside the existing white/pale circle. */
.cl-final .cl-product-icon::before{
  content:"";
  width:31px;height:31px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.cl-final #product-accident .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M24 3 39 9v12c0 10-6.4 19.2-15 23-8.6-3.8-15-13-15-23V9l15-6Zm0 5.2L14 12v9c0 7.1 4.1 14 10 17.2C29.9 35 34 28.1 34 21v-9L24 8.2Z'/%3E%3Cpath fill='%23075fc4' d='m21.5 29.5-6-6 3.1-3.1 2.9 2.9 7.9-7.9 3.1 3.1-11 11Z'/%3E%3C/svg%3E");
}
.cl-final #product-dental .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M13 6c5 0 7 3 11 3s6-3 11-3c5 0 9 4 9 11 0 8-4 24-10 24-4 0-4-6-10-6s-6 6-10 6C8 41 4 25 4 17 4 10 8 6 13 6Zm2 6c-2 0-4 2-4 5 0 2 1 5 2 8 1-2 3-4 7-4s6 2 7 4c1-3 2-6 2-8 0-3-2-5-4-5-3 0-4 3-7 3s-4-3-7-3Z'/%3E%3C/svg%3E");
}
.cl-final #product-vision .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M3 24S10 11 24 11s21 13 21 13-7 13-21 13S3 24 3 24Zm6.4 0c3.5 4.5 8.4 8 14.6 8s11.1-3.5 14.6-8C35.1 19.5 30.2 16 24 16S12.9 19.5 9.4 24Z'/%3E%3Ccircle cx='24' cy='24' r='7' fill='%23075fc4'/%3E%3Ccircle cx='26' cy='21.5' r='2' fill='%23eef7ff'/%3E%3C/svg%3E");
}
.cl-final #product-disability .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='30' cy='7.5' r='4.5' fill='%23075fc4'/%3E%3Cpath fill='%23075fc4' d='M24 14h7c3 0 5 2 5 5v4h-5v-4h-4l-2 7h8v5H23l-3 5h-5l4-10 2-8h-4v7h-5V16h12l1-2Z'/%3E%3Cpath fill='%23075fc4' d='M16 30c-5 0-9 4-9 9h5c0-2.2 1.8-4 4-4h4v-5h-4Z'/%3E%3C/svg%3E");
}
.cl-final #product-term-life .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='12' r='6' fill='%23075fc4'/%3E%3Ccircle cx='10' cy='17' r='5' fill='%23075fc4'/%3E%3Ccircle cx='38' cy='17' r='5' fill='%23075fc4'/%3E%3Cpath fill='%23075fc4' d='M13 34c0-7 4-11 11-11s11 4 11 11v5H13v-5ZM2 36c0-6 3-9 8-9 3 0 5 1 7 3-2 2-3 5-3 9H2v-3Zm44 3H34c0-4-1-7-3-9 2-2 4-3 7-3 5 0 8 3 8 9v3Z'/%3E%3C/svg%3E");
}
.cl-final #product-hospital-indemnity .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M8 8h32v32H8z'/%3E%3Cpath fill='%23eef7ff' d='M21 13h6v8h8v6h-8v8h-6v-8h-8v-6h8v-8Z'/%3E%3C/svg%3E");
}
.cl-final #product-critical-illness .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M24 41S6 31 6 18c0-7 5-11 10-11 4 0 7 2 8 5 1-3 4-5 8-5 5 0 10 4 10 11 0 13-18 23-18 23Z'/%3E%3Cpath fill='%23eef7ff' d='M11 25h8l3-6 4 12 3-6h8v3h-10l-2 4-4-11-2 7h-8v-3Z'/%3E%3C/svg%3E");
}

/* Keep the product-type rows immediately under the requirements area. */
.cl-final .cl-product-body{padding:7px 9px 9px}
.cl-final .cl-details-grid{gap:5px 7px}

/* Companion Life Quick Start Guide 1 — additions for compact HTML */
/* Add to the bottom of the existing user.css. */

.cl-final{font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-main{font-family:Arial,Helvetica,sans-serif;color:#1f2937;line-height:1.6;width:100%;max-width:none;margin:0}

/* Header */
.cl-final .cl-header{background:linear-gradient(135deg,#123d75,#2563eb);color:#fff;padding:28px 24px;border-radius:16px;margin-bottom:22px}
.cl-final .cl-header-label{font-size:12px;letter-spacing:1px;text-transform:uppercase;opacity:.85;font-weight:bold}
.cl-final .cl-header-title{font-size:32px;margin:8px 0 10px;color:#fff}
.cl-final .cl-header-title-text{font-size:36px}
.cl-final .cl-header-sub{margin:0;font-size:16px;opacity:.95}

/* Overview */
.cl-final .cl-overview-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:8px;margin-top:28px}
.cl-final .cl-overview-intro{margin-bottom:10px}
.cl-final .cl-pills{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-pills span{background:#eff6ff;border:1px solid #bfdbfe;color:#123d75;border-radius:999px;padding:5px 10px;font-size:14px;font-weight:bold}
.cl-final .cl-overview-text{margin:0 0 16px}
.cl-final .cl-overview-text a{text-decoration:underline}

/* Getting Started */
.cl-final .cl-gs-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:8px;margin-top:28px;font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-gs{font-family:Arial,Helvetica,sans-serif;color:#1f3b68;line-height:1.5;margin:12px 0 24px}
.cl-final .cl-gs-intro{margin:0 0 16px;font-size:16.5px;color:#173b70}
.cl-final .cl-gs-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.cl-final .cl-gs-grid>div{border:1px solid #bfdbfe;border-radius:10px;padding:16px;background:#fff;min-width:0;box-sizing:border-box}
.cl-final .cl-gs-grid>div>div:first-child{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cl-final .cl-gs-grid>div>div:first-child>div{width:42px;height:42px;border-radius:50%;background:#e7f1ff;display:flex;align-items:center;justify-content:center;flex:0 0 42px;color:#2563eb;font-size:21px}
.cl-final .cl-gs-grid h3{margin:0;color:#123d75;font-size:18px;line-height:1.2;font-family:Arial,Helvetica,sans-serif}
.cl-final .cl-gs-grid h3 span,.cl-final .cl-gs-grid p span{font-size:14px}
.cl-final .cl-gs-grid>div>p:first-of-type{margin:0 0 16px;font-size:16.5px;line-height:1.45}
.cl-final .cl-gs-grid>div>p:last-of-type{margin:0;font-size:15px;line-height:1.4;color:#123d75}

/* Product sections */
.cl-final .cl-product{border:1px solid #93c5fd;border-radius:12px;background:#fff;overflow:hidden;margin:0 0 14px;scroll-margin-top:20px;box-sizing:border-box}
.cl-final .cl-product-head{display:grid;grid-template-columns:minmax(180px,1fr) repeat(3,minmax(170px,1fr));gap:8px;align-items:stretch;padding:10px;background:linear-gradient(135deg,#064f9e 0%,#006dcc 100%);border-bottom:0;box-sizing:border-box}
.cl-final .cl-product-title{display:flex;align-items:center;gap:10px;padding:4px 8px;box-sizing:border-box}
.cl-final .cl-product-icon{width:52px;height:52px;border-radius:50%;background:#e8f4ff;color:#075fc4;border:1px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;flex:0 0 52px;box-sizing:border-box}
.cl-final .cl-product-title h2{margin:0;color:#fff;font-size:22px;line-height:1.1}
.cl-final .cl-product-title p{margin:4px 0 0;font-size:12.5px;color:#eaf4ff;line-height:1.3}
.cl-final .cl-product-head .cl-req{background:#f4faff;border:1px solid #bfdbfe;border-radius:8px;padding:9px 10px;box-sizing:border-box;min-width:0}
.cl-final .cl-product-head .cl-req h4{margin:0 0 3px;color:#064f9e;font-size:12.5px;line-height:1.15}
.cl-final .cl-product-head .cl-req p{margin:0;font-size:11.5px;line-height:1.3}
.cl-final .cl-product-body{padding:8px 10px 10px;background:#fff;box-sizing:border-box}
.cl-final .cl-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;box-sizing:border-box}
.cl-final .cl-details-grid>details{margin:0;border:1px solid #93c5fd;border-radius:7px;background:#eff7ff;overflow:hidden;box-sizing:border-box}
.cl-final .cl-details-grid>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;color:#064f9e;background:#dbeeff;font-size:13px;font-weight:bold;line-height:1.2;box-sizing:border-box}
.cl-final .cl-details-grid>details>summary>span{color:#075fc4;font-size:22px;font-weight:bold;line-height:1;flex:0 0 auto;margin-left:8px}
.cl-final .cl-details-grid>details>div{background:#fce9dc;padding:9px 10px;border-top:1px solid #f5c7a5;box-sizing:border-box}
.cl-final #product-accident .cl-source,
.cl-final #product-dental .cl-source,
.cl-final #product-vision .cl-source{display:block!important;width:100%!important;box-sizing:border-box;margin:0 0 6px;padding:4px 8px!important;background-color:#fce9dc!important;background-image:none!important;line-height:1.35;text-align:left!important;color:#374151!important;font-size:12px}
.cl-final #product-disability .cl-source,
.cl-final #product-term-life .cl-source,
.cl-final #product-hospital-indemnity .cl-source,
.cl-final #product-critical-illness .cl-source{background:#FCE9DC;padding:10px 12px;border-radius:6px;box-sizing:border-box;margin:0 0 6px;font-size:12px;line-height:1.35}
.cl-final .cl-details-grid>details>div p{margin:0 0 6px;font-size:12px;line-height:1.35;box-sizing:border-box;margin-bottom:0}
.cl-final .cl-details-grid>details>div p a{color:#123d75;font-weight:bold;font-size:12px;text-decoration:underline}
.cl-final .cl-product-foot{display:flex;align-items:center;justify-content:flex-end;padding:7px 10px 9px;gap:8px;background:#fff}

/* FAQ navigation/button */
.cl-final .cl-faq-jump{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #60a5fa;border-radius:7px;background:#fff;color:#064f9e;text-decoration:none;font-size:12px;font-weight:bold;box-sizing:border-box}
.cl-final .cl-faq-head .cl-faq-icon{font-size:14px;color:#ef4444;font-weight:800;line-height:1}

/* FAQ sections */
.cl-final .cl-faq-area{margin-top:26px;padding-top:4px}
.cl-final .cl-section-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:7px;margin:24px 0 10px;font-size:22px;line-height:1.2}
.cl-final .cl-faq-product{scroll-margin-top:20px;margin:0 0 12px;border:1px solid #93c5fd;border-radius:10px;background:#fff;overflow:hidden;box-sizing:border-box}
.cl-final .cl-faq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:#eaf5ff;border-bottom:1px solid #bfdbfe}
.cl-final .cl-faq-head h3{margin:0;color:#123d75;font-size:16px}
.cl-final .cl-faq-list{padding:7px 9px}
.cl-final .cl-faq-list>details{border:1px solid #93c5fd;border-radius:7px;margin:4px 0;overflow:hidden;background:#eff6ff}
.cl-final .cl-faq-list>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:7px 9px;background:#dbeeff;color:#123d75;font-size:12.5px;font-weight:bold;box-sizing:border-box}
.cl-final .cl-faq-list>details>summary>span{color:#1261c9;font-size:20px;line-height:1;margin-left:8px}
.cl-final .cl-faq-list>details>div{padding:6px 10px;background:#fce9dc;border-radius:6px;margin:4px 0 8px 0}
.cl-final .cl-faq-list>details>div>span{font-size:18px}
.cl-final #faq-accident .cl-faq-list>details>div,
.cl-final #faq-dental .cl-faq-list>details>div,
.cl-final #faq-vision .cl-faq-list>details>div{padding:8px 10px;background:#fce9dc;border-top:1px solid #fed7aa;font-size:12px;line-height:1.35;box-sizing:border-box}
.cl-final #faq-accident .cl-faq-list>details>div>p,
.cl-final #faq-dental .cl-faq-list>details>div>p,
.cl-final #faq-vision .cl-faq-list>details>div>p{margin:0;font-size:14.8pt;line-height:1.3;background-color:#fce9dc;padding:0 2px}

/* Related articles */
.cl-final .cl-related-title{color:#123d75;border-bottom:2px solid #dbeafe;padding-bottom:8px;margin:28px 0 12px;font-size:22px}
.cl-final .cl-related{border-left:3px solid #2563eb;padding-left:14px;margin:12px 0}
.cl-final .cl-related p:first-child{margin:0 0 10px;font-size:15pt;line-height:1.4}
.cl-final .cl-related p:not(:first-child){margin:0;font-size:15pt;line-height:1.4}
.cl-final .cl-related a{color:#1d4ed8;font-weight:bold;text-decoration:underline}

/* Preserve the source's summary-marker behavior */
.cl-final summary{list-style:none}
.cl-final summary::-webkit-details-marker{display:none}


/* ===== Final product icon + compact requirements refinements ===== */

/* Keep the original product layout, but give the requirements cards less vertical weight. */
.cl-final .cl-product-head{
  grid-template-columns:minmax(205px,0.95fr) repeat(3,minmax(170px,1fr));
  gap:7px;
  padding:8px;
}
.cl-final .cl-product-title{gap:9px;padding:3px 7px}
.cl-final .cl-product-icon{
  width:50px;height:50px;flex:0 0 50px;
  background:#eef7ff;
  border:1px solid rgba(255,255,255,.9);
  position:relative;
}
.cl-final .cl-product-head .cl-req{padding:7px 9px;border-radius:7px}
.cl-final .cl-product-head .cl-req h4{font-size:11.5px;margin-bottom:2px}
.cl-final .cl-product-head .cl-req p{font-size:10.5px;line-height:1.24}
.cl-final .cl-product-title h2{font-size:21px}
.cl-final .cl-product-title p{font-size:11.5px;line-height:1.25;margin-top:3px}

/* Uniform blue product icons inside the existing white/pale circle. */
.cl-final .cl-product-icon::before{
  content:"";
  width:31px;height:31px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
.cl-final #product-accident .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M24 3 39 9v12c0 10-6.4 19.2-15 23-8.6-3.8-15-13-15-23V9l15-6Zm0 5.2L14 12v9c0 7.1 4.1 14 10 17.2C29.9 35 34 28.1 34 21v-9L24 8.2Z'/%3E%3Cpath fill='%23075fc4' d='m21.5 29.5-6-6 3.1-3.1 2.9 2.9 7.9-7.9 3.1 3.1-11 11Z'/%3E%3C/svg%3E");
}
.cl-final #product-dental .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M13 6c5 0 7 3 11 3s6-3 11-3c5 0 9 4 9 11 0 8-4 24-10 24-4 0-4-6-10-6s-6 6-10 6C8 41 4 25 4 17 4 10 8 6 13 6Zm2 6c-2 0-4 2-4 5 0 2 1 5 2 8 1-2 3-4 7-4s6 2 7 4c1-3 2-6 2-8 0-3-2-5-4-5-3 0-4 3-7 3s-4-3-7-3Z'/%3E%3C/svg%3E");
}
.cl-final #product-vision .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M3 24S10 11 24 11s21 13 21 13-7 13-21 13S3 24 3 24Zm6.4 0c3.5 4.5 8.4 8 14.6 8s11.1-3.5 14.6-8C35.1 19.5 30.2 16 24 16S12.9 19.5 9.4 24Z'/%3E%3Ccircle cx='24' cy='24' r='7' fill='%23075fc4'/%3E%3Ccircle cx='26' cy='21.5' r='2' fill='%23eef7ff'/%3E%3C/svg%3E");
}
.cl-final #product-disability .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='30' cy='7.5' r='4.5' fill='%23075fc4'/%3E%3Cpath fill='%23075fc4' d='M24 14h7c3 0 5 2 5 5v4h-5v-4h-4l-2 7h8v5H23l-3 5h-5l4-10 2-8h-4v7h-5V16h12l1-2Z'/%3E%3Cpath fill='%23075fc4' d='M16 30c-5 0-9 4-9 9h5c0-2.2 1.8-4 4-4h4v-5h-4Z'/%3E%3C/svg%3E");
}
.cl-final #product-term-life .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='12' r='6' fill='%23075fc4'/%3E%3Ccircle cx='10' cy='17' r='5' fill='%23075fc4'/%3E%3Ccircle cx='38' cy='17' r='5' fill='%23075fc4'/%3E%3Cpath fill='%23075fc4' d='M13 34c0-7 4-11 11-11s11 4 11 11v5H13v-5ZM2 36c0-6 3-9 8-9 3 0 5 1 7 3-2 2-3 5-3 9H2v-3Zm44 3H34c0-4-1-7-3-9 2-2 4-3 7-3 5 0 8 3 8 9v3Z'/%3E%3C/svg%3E");
}
.cl-final #product-hospital-indemnity .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M8 8h32v32H8z'/%3E%3Cpath fill='%23eef7ff' d='M21 13h6v8h8v6h-8v8h-6v-8h-8v-6h8v-8Z'/%3E%3C/svg%3E");
}
.cl-final #product-critical-illness .cl-product-icon::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23075fc4' d='M24 41S6 31 6 18c0-7 5-11 10-11 4 0 7 2 8 5 1-3 4-5 8-5 5 0 10 4 10 11 0 13-18 23-18 23Z'/%3E%3Cpath fill='%23eef7ff' d='M11 25h8l3-6 4 12 3-6h8v3h-10l-2 4-4-11-2 7h-8v-3Z'/%3E%3C/svg%3E");
}

/* Keep the product-type rows immediately under the requirements area. */
.cl-final .cl-product-body{padding:7px 9px 9px}
.cl-final .cl-details-grid{gap:5px 7px}


/* ===== FINAL ANCHOR FIX ===== */

.cl-final .cl-product {
  scroll-margin-top: 230px !important;
}

.cl-final .cl-faq-product {
  scroll-margin-top: -300px !important;
}

@media (max-width: 700px) {
  .cl-final .cl-product {
    scroll-margin-top: 140px !important;
  }

  .cl-final .cl-faq-product {
    scroll-margin-top: -220px !important;
  }
}
/* Companion Life Overview */
.cl-overview {
  margin: 0;
  color: #183b63;
  font-family: Arial, Helvetica, sans-serif;
}

.cl-overview-title {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d6e4f2;
  color: #123f6d;
  font-size: 32px;
  font-weight: 700;
}

.cl-overview-intro {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.5;
}

.cl-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}

.cl-product-list span {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid #cfe2f7;
  border-radius: 10px;
  background: #f5f9fd;
  color: #123f6d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.cl-overview-text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.55;
}

.cl-overview-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 8px;
  background: #247fc5;
  color: #fff !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .2s ease;
}

.cl-overview-btn:hover {
  background: #1769a8;
  color: #fff !important;
}

.cl-overview-btn span {
  font-size: 22px;
  line-height: 1;
}
/* Keep each product accordion at its natural height */
.cl-details-grid {
  align-items: start !important;
}

.cl-details-grid details {
  align-self: start !important;
  height: fit-content !important;
}
/* FAQ anchor positioning */
.cl-final .cl-faq-product {
  scroll-margin-top: 230px !important;
}

@media (max-width: 700px) {
  .cl-final .cl-faq-product {
    scroll-margin-top: 140px !important;
  }
}
/* Uniform FAQ answer font size */
.cl-final .cl-faq-list>details>div,
.cl-final .cl-faq-list>details>div>p{
  font-size:12px!important;
  line-height:1.35;
}
/* Slightly larger Related Knowledge Base links */
.cl-final .cl-related p,
.cl-final .cl-related p a{
  font-size:13.33px!important;
  line-height:1.4;
}
/* Increase fonts from products through FAQ */
.cl-final .cl-product-title h2{font-size:23px!important}
.cl-final .cl-product-title p{font-size:13px!important}

.cl-final .cl-product-head .cl-req h4{font-size:12.5px!important}
.cl-final .cl-product-head .cl-req p{font-size:11.5px!important}

.cl-final .cl-details-grid>details>summary{font-size:14px!important}
.cl-final .cl-details-grid>details>div p{font-size:13px!important}
.cl-final .cl-details-grid>details>div p a{font-size:13px!important}

.cl-final .cl-faq-jump{font-size:13px!important}
.cl-final .cl-faq-head h3{font-size:17px!important}
.cl-final .cl-faq-list>details>summary{font-size:13.5px!important}
.cl-final .cl-faq-list>details>div,
.cl-final .cl-faq-list>details>div>p{
  font-size:12px!important;
  line-height:1.35;
}
/* ==========================================================
   COMPANION LIFE
   DENTAL ESSENTIALS — PREMIUM BROCHURE
   ========================================================== */

.cl-dental-brochure{
  --blue:#0757a0;
  --blue-dark:#174f86;
  --blue-mid:#1474b5;
  --blue-light:#eaf5fc;
  --blue-pale:#f5faff;

  --orange:#e9a16d;
  --orange-light:#fce9dc;
  --orange-pale:#fff8f3;

  --text:#193b5c;
  --muted:#64798b;
  --border:#c9dce9;
  --white:#fff;

  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:10px 0 30px;

  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  font-size:13px;
  line-height:1.45;

  box-sizing:border-box;
}

.cl-dental-brochure *,
.cl-dental-brochure *:before,
.cl-dental-brochure *:after{
  box-sizing:border-box;
}


/* ==========================================================
   HERO
   ========================================================== */

.cl-db-hero{
  position:relative;

  min-height:300px;

  display:flex;
  overflow:hidden;

  background:#fff;

  border:1px solid #d5e4ee;
  border-radius:6px;

  box-shadow:0 4px 18px rgba(15,72,116,.09);
}

.cl-db-hero-content{
  position:relative;
  z-index:3;

  width:58%;

  padding:25px 25px 24px 29px;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #fff 78%,
      rgba(255,255,255,.82) 100%
    );
}

.cl-db-logo{
  display:block;

  width:auto;
  max-width:190px;
  max-height:48px;

  margin-bottom:13px;

  object-fit:contain;
}

.cl-db-eyebrow{
  color:var(--blue-mid);

  font-size:12px;
  font-weight:800;
  letter-spacing:.9px;
}

.cl-db-eyebrow sup{
  font-size:7px;
}

.cl-db-hero h1{
  margin:2px 0 0;

  color:var(--blue);

  font-size:40px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-1.1px;
}

.cl-db-subtitle{
  margin-top:5px;

  color:#4e78a0;

  font-size:18px;
  font-weight:700;
}

.cl-db-subtitle span{
  padding:0 5px;

  color:var(--orange);
}

.cl-db-rule{
  width:250px;
  height:3px;

  margin:12px 0 11px;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--blue-mid),
    var(--orange)
  );
}

.cl-db-hero-description{
  max-width:530px;

  margin:0;

  color:#405f78;

  font-size:13px;
  line-height:1.55;
}

.cl-db-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-top:15px;
}

.cl-db-hero-tags span{
  padding:5px 9px;

  background:var(--blue-light);
  border:1px solid #c9dfef;
  border-radius:20px;

  color:var(--blue);
  font-size:9px;
  font-weight:800;
}

.cl-db-hero-tags span:last-child{
  background:var(--orange-light);
  border-color:#efd1bd;
}


/* HERO IMAGE */

.cl-db-hero-image{
  position:absolute;

  right:0;
  top:0;
  bottom:0;

  width:52%;

  overflow:hidden;

  background:#edf7fc;
}

.cl-db-hero-image:before{
  content:"";

  position:absolute;
  z-index:2;

  left:0;
  top:0;
  bottom:0;

  width:35%;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      rgba(255,255,255,.85) 25%,
      rgba(255,255,255,0) 100%
    );
}

.cl-db-hero-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center center;
}


/* ==========================================================
   INTRO PANELS
   ========================================================== */

.cl-db-intro-grid{
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:10px;

  margin-top:11px;
}

.cl-db-feature{
  position:relative;

  padding:14px 16px;

  border:1px solid var(--border);
  border-radius:6px;

  overflow:hidden;
}

.cl-db-feature:after{
  content:"";

  position:absolute;
  right:-35px;
  bottom:-55px;

  width:140px;
  height:140px;

  border-radius:50%;

  border:20px solid rgba(7,87,160,.035);
}

.cl-db-states{
  background:
    linear-gradient(
      135deg,
      #fff 0%,
      var(--orange-pale) 100%
    );

  border-left:5px solid var(--blue);
}

.cl-db-company{
  background:
    linear-gradient(
      135deg,
      #fff 0%,
      var(--blue-light) 100%
    );

  border-left:5px solid var(--blue-mid);
}

.cl-db-feature-top{
  display:flex;
  align-items:center;
  gap:11px;

  margin-bottom:7px;
}

.cl-db-feature-icon{
  flex:0 0 42px;

  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--blue);
  border-radius:50%;

  color:#fff;

  font-size:22px;
}

.cl-db-feature-label{
  color:var(--blue);

  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
}

.cl-db-feature h2{
  margin:1px 0 0;

  color:#315d80;

  font-size:14px;
  font-weight:700;
}

.cl-db-feature p{
  margin:5px 0;

  color:#536e82;

  font-size:10.8px;
  line-height:1.48;
}

.cl-db-feature p strong{
  color:var(--blue);
}

.cl-db-state-list{
  position:relative;
  z-index:1;

  margin-top:7px;
  padding:7px 9px;

  background:rgba(255,255,255,.78);

  border:1px solid #efd6c5;
  border-radius:4px;

  color:#42617a;

  font-size:10.3px;
  line-height:1.45;
}

.cl-db-state-list strong{
  color:var(--blue);
}

.cl-db-product-line{
  position:relative;
  z-index:1;

  margin-top:7px;

  color:#557086;

  font-size:9.8px;
}

.cl-db-product-line strong{
  color:var(--blue);
}


/* ==========================================================
   PLAN AT A GLANCE
   ========================================================== */

.cl-db-glance{
  margin-top:11px;

  overflow:hidden;

  border:1px solid #bfd6e6;
  border-radius:6px;

  background:#f7fbfe;
}

.cl-db-glance-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:7px 13px;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--blue-mid)
  );

  color:#fff;
}

.cl-db-glance-heading span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.8px;
}

.cl-db-glance-heading small{
  font-size:10px;
  opacity:.9;
}

.cl-db-glance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.cl-db-glance-item{
  display:flex;
  align-items:center;

  min-height:70px;

  padding:9px 11px;

  border-right:1px solid #c5dbe9;
}

.cl-db-glance-item:last-child{
  border-right:0;
}

.cl-db-round-icon{
  flex:0 0 39px;

  width:39px;
  height:39px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-right:9px;

  background:var(--blue);
  border-radius:50%;

  color:#fff;

  font-size:16px;
  font-weight:700;
}

.cl-db-glance-item span{
  display:block;

  color:#718596;

  font-size:8px;
  font-weight:800;
  letter-spacing:.7px;
}

.cl-db-glance-item strong{
  display:block;

  margin-top:2px;

  color:var(--blue);

  font-size:12px;
  line-height:1.2;
}

.cl-db-glance-item small{
  display:block;

  margin-top:2px;

  color:#75899a;

  font-size:9px;
}


/* ==========================================================
   SECTION HEADERS
   ========================================================== */

.cl-db-section{
  margin-top:12px;
}

.cl-db-section-title{
  display:flex;
  align-items:center;
  gap:9px;

  min-height:42px;

  padding:6px 12px;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--blue-mid)
  );

  border-radius:6px 6px 0 0;

  color:#fff;
}

.cl-db-section-number{
  width:27px;
  height:27px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;

  font-size:9px;
  font-weight:800;
}

.cl-db-section-title span{
  display:block;

  font-size:14px;
  font-weight:800;
  letter-spacing:.6px;
}

.cl-db-section-title small{
  display:block;

  margin-top:1px;

  color:#dcecf7;

  font-size:9px;
}

.cl-db-small-title{
  min-height:38px;
}


/* ==========================================================
   BENEFIT TABLE
   ========================================================== */

.cl-db-benefit-table{
  overflow:hidden;

  border:1px solid #b9d2e3;
  border-top:0;

  border-radius:0 0 6px 6px;
}

.cl-db-table-head,
.cl-db-table-row,
.cl-db-waiting{
  display:grid;

  grid-template-columns:26% 37% 37%;
}

.cl-db-table-head{
  background:#e7f2fa;

  color:var(--blue);

  font-size:9px;
  font-weight:800;
  letter-spacing:.6px;
  text-align:center;
}

.cl-db-table-head > div{
  padding:7px 8px;

  border-right:1px solid #bed5e5;
}

.cl-db-table-head > div:last-child{
  border-right:0;
}

.cl-db-table-row{
  background:#fff;
}

.cl-db-table-row > div{
  min-height:55px;

  padding:8px 9px;

  border-right:1px solid #d0e0ea;
  border-bottom:1px solid #d7e4ec;

  color:#405f77;

  font-size:9.7px;
  line-height:1.35;

  text-align:center;
}

.cl-db-table-row > div:last-child{
  border-right:0;
}

.cl-db-benefit-name{
  background:#f5f9fc;

  text-align:left !important;
}

.cl-db-benefit-name strong{
  display:block;

  color:var(--blue);

  font-size:11px;
  line-height:1.2;
}

.cl-db-benefit-name small{
  display:block;

  margin-top:3px;

  color:#718696;

  font-size:8.8px;
  line-height:1.35;
}

.cl-db-table-row > div > strong{
  color:var(--blue);
  font-size:12px;
}

.cl-db-table-row p{
  margin:3px 0 0;
}

.cl-db-percent{
  color:var(--blue);

  font-size:14px;
  font-weight:800;
}

.cl-db-dollar{
  color:var(--blue);

  font-size:16px;
  font-weight:800;
}

.cl-db-soft{
  color:#7c8d99;
  font-size:8.5px;
}

.cl-db-waiting{
  background:var(--orange-light);

  color:#765d4b;

  font-size:9px;
  font-weight:700;
  text-align:center;
}

.cl-db-waiting > div{
  padding:4px 8px;

  border-right:1px solid #ecd0bb;
  border-bottom:1px solid #ecd0bb;
}

.cl-db-waiting > div:first-child{
  text-align:left;
}

.cl-db-waiting > div:last-child{
  border-right:0;
}

.cl-db-highlight-row > div{
  background:#f5faff;
}

.cl-db-last-row > div{
  border-bottom:0;
}


/* ==========================================================
   RATES
   ========================================================== */

.cl-db-rates-section{
  display:grid;

  grid-template-columns:2fr 1fr;

  gap:11px;

  margin-top:12px;
}

.cl-db-rates-main{
  overflow:hidden;

  border:1px solid #b9d4e6;
  border-radius:6px;

  box-shadow:0 2px 7px rgba(7,87,160,.05);
}

.cl-db-rates-heading{
  display:flex;
  align-items:center;
  gap:9px;

  padding:8px 12px;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--blue-mid)
  );

  color:#fff;
}

.cl-db-rates-icon{
  width:26px;
  height:26px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#fff;
  border-radius:50%;

  color:var(--blue);

  font-size:16px;
  font-weight:800;
}

.cl-db-rates-heading strong{
  display:block;

  font-size:13px;
  letter-spacing:.6px;
}

.cl-db-rates-heading span{
  display:block;

  margin-top:1px;

  color:#dcecf7;

  font-size:8px;
  font-weight:600;
  letter-spacing:.5px;
}

.cl-db-rates-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);
}

.cl-db-rate-card{
  min-height:82px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:8px;

  border-right:1px solid #d0e0ea;

  text-align:center;
}

.cl-db-rate-card:last-child{
  border-right:0;
}

.cl-db-rate-card span{
  color:#536f84;

  font-size:9.5px;
  line-height:1.3;
}

.cl-db-rate-card strong{
  display:block;

  margin-top:5px;

  color:var(--blue);

  font-size:22px;
  line-height:1;

  font-weight:800;
}


/* RATE NOTE */

.cl-db-rate-note{
  display:flex;
  align-items:center;
  gap:10px;

  padding:12px;

  background:linear-gradient(
    135deg,
    #fffaf6,
    var(--orange-light)
  );

  border:1px solid #efd2bd;
  border-radius:6px;
}

.cl-db-note-icon{
  flex:0 0 36px;

  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--blue);
  border-radius:50%;

  color:#fff;

  font-size:19px;
  font-weight:800;
}

.cl-db-rate-note strong{
  display:block;

  color:var(--blue);

  font-size:11px;
  letter-spacing:.5px;
}

.cl-db-rate-note p{
  margin:3px 0 0;

  color:#6d6058;

  font-size:9.5px;
  line-height:1.45;
}


/* ==========================================================
   KEY INFORMATION
   ========================================================== */

.cl-db-info-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:8px;

  border:1px solid #d0dfe9;
  border-top:0;

  padding:10px;

  background:#fbfdfe;

  border-radius:0 0 6px 6px;
}

.cl-db-info-card{
  display:flex;
  gap:8px;

  padding:10px;

  background:#fff;

  border:1px solid #d6e3eb;
  border-top:3px solid var(--blue);

  border-radius:4px;
}

.cl-db-info-icon{
  flex:0 0 25px;

  width:25px;
  height:25px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--blue-light);

  border-radius:50%;

  color:var(--blue);

  font-size:8px;
  font-weight:800;
}

.cl-db-info-card strong{
  display:block;

  color:var(--blue);

  font-size:10.5px;
}

.cl-db-info-card p{
  margin:3px 0 0;

  color:#627787;

  font-size:8.8px;
  line-height:1.4;
}


/* ==========================================================
   FAQ + RELATED
   ========================================================== */

.cl-db-bottom{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:11px;

  margin-top:12px;
}

.cl-db-bottom-card{
  overflow:hidden;

  background:#fff;

  border:1px solid #c8dce9;

  border-radius:6px;
}

.cl-db-bottom-heading{
  display:flex;
  align-items:center;
  gap:8px;

  min-height:38px;

  padding:6px 11px;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--blue-mid)
  );

  color:#fff;

  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
}

.cl-db-bottom-heading span{
  width:24px;
  height:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;

  font-size:13px;
}


/* FAQ */

.cl-db-faq details{
  border-bottom:1px solid #d9e4eb;
}

.cl-db-faq details:last-child{
  border-bottom:0;
}

.cl-db-faq summary{
  position:relative;

  padding:7px 31px 7px 11px;

  color:var(--blue);

  font-size:9.7px;
  font-weight:700;

  cursor:pointer;
  list-style:none;
}

.cl-db-faq summary::-webkit-details-marker{
  display:none;
}

.cl-db-faq summary:after{
  content:"+";

  position:absolute;

  right:10px;
  top:3px;

  color:var(--blue);

  font-size:17px;
  font-weight:400;
}

.cl-db-faq details[open] summary{
  background:#f6fafd;
}

.cl-db-faq details[open] summary:after{
  content:"−";
}

.cl-db-faq details > div{
  padding:7px 11px 9px;

  background:var(--orange-light);

  border-top:1px solid #efd3bf;

  color:#5e6e7a;

  font-size:9px;
  line-height:1.45;
}


/* RELATED */

.cl-db-related a{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:10px 11px;

  border-bottom:1px solid #d9e4eb;

  text-decoration:none !important;

  transition:background .15s ease;
}

.cl-db-related a:last-child{
  border-bottom:0;
}

.cl-db-related a:hover{
  background:var(--blue-pale);
}

.cl-db-related a > div{
  min-width:0;
}

.cl-db-related strong{
  display:block;

  color:var(--blue);

  font-size:9.8px;
  line-height:1.35;
}

.cl-db-related small{
  display:block;

  margin-top:3px;

  color:#738594;

  font-size:8.5px;
  line-height:1.35;
}

.cl-db-related b{
  flex:0 0 auto;

  color:var(--blue);

  font-size:24px;
  font-weight:300;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.cl-db-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:14px;

  padding:12px 15px;

  border-top:2px solid var(--blue);

  color:var(--blue);
}

.cl-db-footer > div:first-child span{
  display:block;

  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
}

.cl-db-footer > div:first-child small{
  display:block;

  margin-top:2px;

  color:#718595;

  font-size:8px;
}

.cl-db-footer-accent{
  width:90px;
  height:4px;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--orange)
  );

  border-radius:10px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:950px){

  .cl-db-intro-grid,
  .cl-db-rates-section,
  .cl-db-bottom{
    grid-template-columns:1fr;
  }

  .cl-db-info-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .cl-db-hero-content{
    width:65%;
  }

  .cl-db-hero-image{
    width:50%;
  }

}


@media(max-width:700px){

  .cl-dental-brochure{
    padding:5px;
  }

  .cl-db-hero{
    min-height:0;
  }

  .cl-db-hero-content{
    width:100%;

    padding:20px;
  }

  .cl-db-hero-image{
    position:absolute;

    width:100%;
    height:180px;

    top:auto;
    bottom:0;

    opacity:.18;
  }

  .cl-db-hero-image:before{
    width:100%;

    background:
      linear-gradient(
        180deg,
        #fff 0%,
        rgba(255,255,255,.7) 60%,
        rgba(255,255,255,0) 100%
      );
  }

  .cl-db-hero h1{
    font-size:32px;
  }

  .cl-db-glance-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .cl-db-glance-item:nth-child(2){
    border-right:0;
  }

  .cl-db-glance-item:nth-child(-n+2){
    border-bottom:1px solid #c5dbe9;
  }

  .cl-db-info-grid{
    grid-template-columns:1fr;
  }

  .cl-db-rates-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .cl-db-rate-card:nth-child(2){
    border-right:0;
  }

  .cl-db-rate-card:nth-child(-n+2){
    border-bottom:1px solid #d0e0ea;
  }

  .cl-db-table-head,
  .cl-db-table-row,
  .cl-db-waiting{
    min-width:760px;
  }

  .cl-db-benefit-table{
    overflow-x:auto;
  }

}


@media(max-width:480px){

  .cl-db-glance-grid,
  .cl-db-rates-grid{
    grid-template-columns:1fr;
  }

  .cl-db-glance-item{
    border-right:0 !important;
    border-bottom:1px solid #c5dbe9;
  }

  .cl-db-glance-item:last-child{
    border-bottom:0;
  }

  .cl-db-rate-card{
    border-right:0 !important;
    border-bottom:1px solid #d0e0ea;
  }

  .cl-db-rate-card:last-child{
    border-bottom:0;
  }

  .cl-db-footer{
    align-items:flex-start;
  }

}


/* ==========================================================
   JOOMLA / KB SAFETY
   ========================================================== */

.cl-dental-brochure a{
  box-shadow:none !important;
}

.cl-dental-brochure img{
  max-width:100%;
}

.cl-dental-brochure h1,
.cl-dental-brochure h2,
.cl-dental-brochure h3{
  text-transform:none;
}

.cl-dental-brochure p{
  word-break:normal;
}
.cl-final .cl-gs-intro{
  font-size:14px!important;
}

.cl-final .cl-gs-grid h3{
  font-size:17px!important;
}

.cl-final .cl-gs-grid p{
  font-size:14px!important;
  line-height:1.45!important;
}

/* FINAL BALANCED-READABLE OVERRIDE — Overview + Getting Started */
/* ADD THIS AT THE VERY BOTTOM OF user.css */

.cl-overview-title,
.cl-gs-title{
  font-size:22px!important;
  line-height:1.2!important;
  margin:0 0 7px!important;
}

.cl-overview-intro,
.cl-overview-text,
.cl-gs-intro{
  font-size:12px!important;
  line-height:1.4!important;
  margin:5px 0 9px!important;
}

/* Product names */
.cl-product-list{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:7px!important;
  margin:9px 0!important;
  padding:0!important;
}

.cl-product-list span{
  display:inline-block!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  padding:5px 11px!important;
  background:#f4f9ff!important;
  border:1px solid #c8def8!important;
  border-radius:6px!important;
  color:#173b70!important;
  font-size:11.5px!important;
  font-weight:700!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

/* Overview buttons */
.cl-overview-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:9px!important;
  margin:9px 0 0!important;
}

.cl-overview-actions .cl-overview-btn{
  display:inline-flex!important;
  flex:0 0 auto!important;
  width:auto!important;
  margin:0!important;
  padding:7px 12px!important;
  border-radius:6px!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

/* Space before Getting Started */
.cl-gs{
  margin-top:16px!important;
}

.cl-gs-grid{
  gap:9px!important;
  margin-top:9px!important;
}

.cl-gs-grid>div{
  padding:12px!important;
}

.cl-gs-grid>div h3{
  font-size:12.5px!important;
  line-height:1.2!important;
  margin:0 0 6px!important;
}

.cl-gs-grid>div p,
.cl-gs-grid>div p strong{
  font-size:11.5px!important;
  line-height:1.35!important;
  margin:0 0 6px!important;
}

/* SIC Code Guide */
.cl-gs-grid .cl-sic-guide-btn,
.cl-gs-grid a[href*="Understanding-SIC-Codes"]{
  display:inline-flex!important;
  width:auto!important;
  padding:6px 11px!important;
  margin:2px 0 0!important;
  background:#1261c9!important;
  border:1px solid #1261c9!important;
  border-radius:6px!important;
  color:#fff!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  font-weight:700!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}

@media(max-width:700px){
  .cl-overview-title,
  .cl-gs-title{font-size:20px!important}

  .cl-overview-intro,
  .cl-overview-text,
  .cl-gs-intro,
  .cl-gs-grid>div p,
  .cl-gs-grid>div p strong{font-size:11px!important}

  .cl-product-list span,
  .cl-overview-actions .cl-overview-btn,
  .cl-gs-grid>div h3,
  .cl-gs-grid .cl-sic-guide-btn,
  .cl-gs-grid a[href*="Understanding-SIC-Codes"]{
    font-size:11px!important;
  }
}
.cl-product-list{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
}

.cl-product-list strong{
  display:inline-block!important;
  padding:5px 10px!important;
  background:#f4f9ff!important;
  border:1px solid #c8def8!important;
  border-radius:6px!important;
  color:#173b70!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

/* FINAL REQUIREMENTS LAYOUT — targets the actual current product markup */
/* Add this at the VERY BOTTOM of user.css */

.cl-product-head{
  grid-template-columns:1.15fr .72fr 1.18fr 1.18fr!important;
  gap:7px!important;
}

/* Participation = shorter/narrower card */
.cl-product-head>.cl-req:nth-child(2){
  min-width:0!important;
}

.cl-product-head>.cl-req:nth-child(2) p{
  max-width:225px!important;
}

/* Eligibility + Case Sizes = wider cards */
.cl-product-head>.cl-req:nth-child(3),
.cl-product-head>.cl-req:nth-child(4){
  min-width:0!important;
}

.cl-product-head>.cl-req:nth-child(3) p,
.cl-product-head>.cl-req:nth-child(4) p{
  max-width:none!important;
  width:100%!important;
}

/* Keep the existing compact styling */
.cl-product-head>.cl-req{
  box-sizing:border-box!important;
  padding:9px 10px!important;
}

.cl-product-head>.cl-req h4{
  margin-bottom:3px!important;
}

.cl-product-head>.cl-req p{
  margin:0!important;
}

/* Mobile: return to one column */
@media(max-width:850px){
  .cl-product-head{
    grid-template-columns:1fr!important;
  }

  .cl-product-head>.cl-req:nth-child(2) p,
  .cl-product-head>.cl-req:nth-child(3) p,
  .cl-product-head>.cl-req:nth-child(4) p{
    max-width:none!important;
  }
}

#js-dash-menu-link-wrp a.js-ticket-dash-menu[href*="/site-login"] {
    display: none !important;
}
/* Companion Life Quick Start Guide — Getting Started mobile layout fix */
/* Add this at the VERY BOTTOM of Joomla's existing user.css. */

/* Tablet: show the five Getting Started cards in two readable columns. */
@media (max-width: 900px) {
  .cl-final .cl-gs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .cl-final .cl-gs-grid > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* Phones: stack each Getting Started detail card vertically. */
@media (max-width: 600px) {
  .cl-final .cl-gs-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .cl-final .cl-gs-grid > div {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .cl-final .cl-gs-grid h3 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 0 0 8px !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .cl-final .cl-gs-grid > div > p:first-of-type,
  .cl-final .cl-gs-grid > div > p:last-of-type {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .cl-final .cl-gs-grid > div > p:last-of-type {
    margin-bottom: 0 !important;
  }

  .cl-final .cl-gs-intro {
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  .cl-final .cl-sic-guide-btn {
    display: inline-flex !important;
    max-width: 100% !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }
}


/* =====================================================
   JS SUPPORT TICKET - KNOWLEDGE BASE CATEGORIES
   MOBILE: TWO-COLUMN GRID
   ===================================================== */

@media screen and (max-width: 767px) {

    /* Make the immediate category parent a 2-column grid */
    div:has(> .js-ticket-category-box) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: stretch !important;
        align-content: start !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* Each category tile fills its grid cell */
    .js-ticket-category-box {
        display: flex !important;
        float: none !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep category images within each tile */
    .js-ticket-category-box img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

}



/* =====================================================
   KNOWLEDGE BASE PAGINATION
   MOBILE: START AT PAGE 1
   ===================================================== */

@media screen and (max-width: 767px) {

    /* Keep pagination in one row, starting from Page 1 */
    ul.pagination,
    nav .pagination,
    .pagination {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: flex-start !important;
        align-items: center !important;

        direction: ltr !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        white-space: nowrap !important;
        gap: 4px !important;

        padding: 0 4px 8px !important;
        margin: 15px 0 !important;

        box-sizing: border-box !important;
    }

    /* Keep each page button at a fixed size */
    .pagination li,
    .pagination .page-item {
        display: inline-flex !important;
        flex: 0 0 40px !important;

        float: none !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Page numbers and navigation buttons */
    .pagination li a,
    .pagination li span,
    .pagination .page-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 42px !important;

        padding: 0 !important;
        margin: 0 !important;

        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

}



/* ===== Joomla-safe defensive base ===== */
html body .dental-brochure,
body .dental-brochure{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  font-family:Arial,Helvetica,sans-serif !important;
}

body .dental-brochure .db-dental-content{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

body .dental-brochure .db-resource-bar,
body .dental-brochure .db-intro-grid,
body .dental-brochure .db-simple-card,
body .dental-brochure .db-key-section,
body .dental-brochure .db-glance,
body .dental-brochure .db-rates,
body .dental-brochure .db-plan-details,
body .dental-brochure .db-faq-section,
body .dental-brochure .db-related-section{
  width:100% !important;
  max-width:none !important;
}

/* ==========================================================
   COMPANION LIFE — DENTAL ESSENTIALS
   MASTER REFERENCE BUILD
   Designed from the user's 1024 x 1536 approved reference.
   ========================================================== */

.dental-brochure{
  --blue:#0754b8;
  --blue-dark:#0649a5;
  --blue-bright:#0879e8;
  --text:#164f8b;

  --blue-bg:#f3f9ff;
  --blue-row:#e8f4ff;
  --blue-border:#c8e4f8;
  --blue-line:#b7daf5;

  --orange:#f58245;
  --orange-pale:#fff8f2;
  --orange-border:#f2d3bf;

  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;

  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.45;

  box-sizing:border-box;
  overflow:visible;
}

.dental-brochure *,
.dental-brochure *::before,
.dental-brochure *::after{
  box-sizing:border-box;
}

.dental-brochure h1,
.dental-brochure h2,
.dental-brochure h3,
.dental-brochure p,
.dental-brochure ul{
  margin-top:0;
}

.dental-brochure h2,
.dental-brochure h3{
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
}

.dental-brochure p{
  color:var(--text);
}

/* ==========================================================
   HERO
   IMPORTANT: hero remains full width.
   ========================================================== */

.dental-brochure .db-hero{
  width:100% !important;
  max-width:none !important;
  margin:0 0 14px !important;
  padding:0 !important;

  overflow:hidden;
  border-radius:0 0 10px 10px;

  background:#eef8ff;
  line-height:0;
}

.dental-brochure .db-hero-image{
  display:block !important;

  width:100% !important;
  max-width:100% !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:contain;
  object-position:center;
}

/* ==========================================================
   CONTENT CANVAS
   At the reference width (1024px), this gives approximately
   910px of content — matching the attached final design.
   ========================================================== */

.dental-brochure .db-dental-content{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box;
}

/* ==========================================================
   TOP RESOURCE BAR
   ========================================================== */

.dental-brochure .db-resource-bar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 310px;
  align-items:center;

  width:100% !important;
  margin:0 0 12px !important;
  padding:9px 11px;

  border:1px solid #2373cd;
  border-radius:8px;

  background:linear-gradient(110deg,#0750b4,#0649a5);
  color:#fff;

  box-shadow:0 2px 6px rgba(0,65,145,.08);
}

.dental-brochure .db-resource-brand{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  color:#fff;
  font-size:16px;
  font-weight:500;
  letter-spacing:1.25px;
  line-height:1;
  white-space:nowrap;
}

.dental-brochure .db-resource-brand .db-brand-name{
  display:inline-block;
}

.dental-brochure .db-resource-brand .db-brand-reg{
  position:relative;
  top:-3px;
  margin-left:3px;
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}


.dental-brochure .db-resource-title{
  min-width:0;
  padding-left:10px;

  border-left:0;

  color:#fff;
  font-size:18px;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
}

.dental-brochure .db-download{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;

  width:310px;
  min-width:310px;
  min-height:52px;

  padding:7px 11px;

  border:1px solid rgba(255,255,255,.65);
  border-radius:7px;

  background:linear-gradient(135deg,#087de9,#0565cc);

  color:#fff !important;
  text-decoration:none !important;

  box-sizing:border-box;
}

.dental-brochure .db-download-icon{
  display:flex;
  flex:0 0 26px;
  align-items:center;
  justify-content:center;

  width:26px;
  height:26px;

  border-radius:5px;
  background:rgba(255,255,255,.15);

  color:#fff;
  font-size:17px;
}

.dental-brochure .db-download-copy{
  display:flex;
  flex:1;
  flex-direction:column;
  min-width:0;
  line-height:1.12;
}

.dental-brochure .db-download-copy strong{
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.15;
}

.dental-brochure .db-download-copy small{
  margin-top:3px;
  color:#eaf5ff;
  font-size:10px;
  line-height:1.2;
}

.dental-brochure .db-download-arrow{
  color:#fff;
  font-size:27px;
  line-height:1;
}

/* ==========================================================
   SIMPLE CARDS
   ========================================================== */

.dental-brochure .db-simple-card{
  width:100% !important;
  margin:0 0 12px !important;
  padding:11px 13px 12px;

  border:1px solid var(--blue-border);
  border-radius:9px;

  background:#fff;
  box-shadow:0 2px 6px rgba(8,78,145,.035);
}

.dental-brochure .db-about-card{
  background:#f7fbff;
}

.dental-brochure .db-section-heading{
  position:relative;

  display:flex;
  align-items:center;

  width:100% !important;

  margin:0 0 9px !important;
  padding:0 0 6px 9px;

  border-bottom:1px solid var(--orange-border);
}

.dental-brochure .db-section-heading::before{
  content:"";

  position:absolute;
  left:0;
  top:0;

  width:4px;
  height:25px;

  border-radius:2px;
  background:var(--orange);
}

.dental-brochure .db-section-heading h2{
  color:var(--blue);
  font-size:19px;
  line-height:1.2;
}

.dental-brochure .db-about-card p{
  margin-bottom:6px;
  font-size:12.5px;
  line-height:1.4;
}

/* ==========================================================
   PARTICIPATION REQUIREMENTS
   THREE CARDS IN ONE ROW — AS REFERENCE
   ========================================================== */

.dental-brochure .db-requirement-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;

  width:100% !important;
}

.dental-brochure .db-requirement-box{
  min-width:0;

  padding:12px 13px;

  border:1px solid var(--orange-border);
  border-radius:8px;

  background:var(--orange-pale);
}

.dental-brochure .db-requirement-box h3{
  margin-bottom:5px;
  color:var(--blue-dark);
  font-size:13px;
  line-height:1.25;
  text-decoration:underline;
  text-underline-offset:2px;
}

.dental-brochure .db-requirement-box > strong{
  display:block;
  margin-bottom:3px;
  color:var(--blue);
  font-size:23px;
  line-height:1.1;
}

.dental-brochure .db-requirement-box p{
  margin:0;
  font-size:12px;
  line-height:1.33;
}

/* ==========================================================
   ELIGIBILITY
   TWO BY TWO GRID — AS REFERENCE
   ========================================================== */

.dental-brochure .db-eligibility-card-wrap{
  background:#fff;
}

.dental-brochure .db-eligibility-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;

  width:100% !important;
}

.dental-brochure .db-eligibility-box{
  min-width:0;

  padding:10px 11px;

  border:1px solid var(--blue-border);
  border-radius:8px;

  background:#f4faff;
}

.dental-brochure .db-eligibility-box h3{
  margin-bottom:5px;
  color:var(--blue-dark);
  font-size:13px;
  line-height:1.2;
}

.dental-brochure .db-eligibility-box ul{
  margin:0;
  padding-left:17px;
}

.dental-brochure .db-eligibility-box li{
  margin:0 0 3px;
  color:var(--text);
  font-size:11.7px;
  line-height:1.3;
}

.dental-brochure .db-eligibility-box li:last-child{
  margin-bottom:0;
}

/* ==========================================================
   KEY INFORMATION
   TWO BY TWO GRID — ORANGE CONTAINER, WHITE BOXES
   ========================================================== */

.dental-brochure .db-key-section{
  border-color:var(--orange-border);
  background:#fffaf6;
}

.dental-brochure .db-key-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;

  width:100% !important;
}

.dental-brochure .db-key-box{
  display:flex;
  align-items:flex-start;
  gap:9px;

  min-width:0;
  padding:10px 11px;

  border:1px solid var(--orange-border);
  border-radius:8px;

  background:#fff;
}

.dental-brochure .db-check{
  flex:0 0 auto;
  color:#1974d2;
  font-size:18px;
  font-weight:700;
  line-height:1;
}

.dental-brochure .db-key-box p{
  margin:0;
  color:var(--text);
  font-size:12px;
  line-height:1.35;
}

.dental-brochure .db-key-box strong{
  color:var(--blue-dark);
}

/* ==========================================================
   MONTHLY RATES
   ========================================================== */

.dental-brochure .db-rates{
  display:grid;
  grid-template-columns:minmax(250px,1.6fr) repeat(4,minmax(0,1fr));

  width:100% !important;
  margin:0 0 13px !important;
  padding:0;

  overflow:hidden;

  border:1px solid var(--blue-border);
  border-radius:9px;
  background:#fff;
}

.dental-brochure .db-rates-title{
  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:11px 14px;

  background:linear-gradient(120deg,#0750b4,#0876df);
  color:#fff;
}

.dental-brochure .db-rates-title h2{
  color:#fff;
  font-size:18px;
  line-height:1.15;
}

.dental-brochure .db-rates-title p{
  margin:2px 0 0;
  color:#e6f3ff;
  font-size:10px;
  line-height:1.15;
}

.dental-brochure .db-rate{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  min-width:0;
  padding:10px 6px;

  border-left:1px solid var(--blue-border);

  text-align:center;
}

.dental-brochure .db-rate span{
  color:var(--blue-dark);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

.dental-brochure .db-rate strong{
  margin-top:2px;
  color:var(--blue);
  font-size:24px;
  line-height:1.05;
}

/* ==========================================================
   PLAN DETAILS
   ========================================================== */

.dental-brochure .db-plan-details{
  width:100% !important;
  margin:0 0 15px !important;

  overflow:hidden;

  border:1px solid var(--blue-border);
  border-radius:9px;
  background:#fff;

  box-shadow:0 2px 6px rgba(8,78,145,.035);
}

.dental-brochure .db-plan-details-header{
  display:flex;
  align-items:center;
  gap:8px;

  padding:7px 11px;

  background:linear-gradient(110deg,#0750b4,#0649a5);
  color:#fff;
}

.dental-brochure .db-plan-icon{
  display:flex;
  flex:0 0 28px;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border-radius:50%;

  background:#0879e8;
  color:#fff;

  font-size:15px;
  line-height:1;
}

.dental-brochure .db-plan-details-header h2{
  color:#fff;
  font-size:19px;
  line-height:1.1;
  white-space:nowrap;
}

.dental-brochure .db-plan-subtitle{
  color:#e8f4ff;
  font-size:11px;
  line-height:1.2;
}

.dental-brochure .db-table-wrap{
  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.dental-brochure .db-benefit-table{
  width:100% !important;
  min-width:760px;

  margin:0 !important;
  padding:0;

  border-collapse:collapse;
  table-layout:fixed;

  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:12.5px;
  line-height:1.32;
}

.dental-brochure .db-benefit-table th,
.dental-brochure .db-benefit-table td{
  border:1px solid #c0def5;
  padding:8px 9px;

  vertical-align:middle;
  text-align:left;

  overflow-wrap:break-word;
}

.dental-brochure .db-benefit-table thead th{
  background:#cfeaff;
  color:var(--blue-dark);

  font-size:10px;
  font-weight:700;
  line-height:1.1;
  text-transform:uppercase;
}

.dental-brochure .db-benefit-table thead th:nth-child(1){
  width:21%;
}

.dental-brochure .db-benefit-table thead th:nth-child(2){
  width:47%;
}

.dental-brochure .db-benefit-table thead th:nth-child(3),
.dental-brochure .db-benefit-table thead th:nth-child(4){
  width:16%;
  text-align:center;
}

.dental-brochure .db-benefit-table tbody tr:nth-child(odd){
  background:#f5faff;
}

.dental-brochure .db-benefit-table tbody tr:nth-child(even){
  background:#e8f4ff;
}

.dental-brochure .db-benefit-table tbody th{
  color:var(--blue-dark);
  font-size:12px;
  font-weight:700;
}

.dental-brochure .db-benefit-table tbody td{
  color:var(--text);
  font-size:12.5px;
}

.dental-brochure .db-benefit-table .db-center{
  text-align:center;
}

.dental-brochure .db-benefit-table .db-center strong{
  display:block;
  color:var(--blue-dark);
  font-size:14px;
  font-weight:700;
  line-height:1.05;
}

.dental-brochure .db-benefit-table .db-center small{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:9px;
  line-height:1.1;
}

.dental-brochure .db-benefit-table .db-wait-row th,
.dental-brochure .db-benefit-table .db-wait-row td{
  background:#dff0ff !important;
  padding-top:6px;
  padding-bottom:6px;
}

.dental-brochure .db-benefit-table .db-wait-row .db-center strong{
  font-size:12.5px;
}

.dental-brochure .db-benefit-table .db-annual-max th,
.dental-brochure .db-benefit-table .db-annual-max td{
  background:#fff0e5 !important;
  border-color:#f2c9ad;
}

.dental-brochure .db-benefit-table .db-annual-max th{
  color:var(--orange-dark,#b95618);
}

.dental-brochure .db-benefit-table .db-annual-max .db-center strong{
  color:#ee7118;
  font-size:14px;
}

/* ==========================================================
   FAQ
   SINGLE COLUMN — EXACTLY 6 ROWS
   ========================================================== */

.dental-brochure .db-faq-section{
  width:100% !important;
  margin:0 0 14px !important;
  padding:11px 12px !important;

  border:1px solid var(--blue-border);
  border-radius:9px;

  background:linear-gradient(135deg,#edf8ff,#e5f3ff);

  box-shadow:0 2px 6px rgba(8,78,145,.035);

  overflow:visible !important;
}

.dental-brochure .db-faq-heading{
  display:flex;
  align-items:center;
  gap:8px;

  width:100% !important;

  margin:0 0 7px !important;
  padding:0 0 6px !important;

  border-bottom:1px solid var(--blue-line);
}

.dental-brochure .db-faq-heading h2{
  color:var(--blue);
  font-size:20px;
  line-height:1.2;
}

.dental-brochure .db-faq-heading-icon{
  display:flex;
  flex:0 0 31px;
  align-items:center;
  justify-content:center;

  width:31px;
  height:31px;

  border-radius:50%;
  background:var(--blue-bright);

  color:#fff;
  font-size:20px;
  font-weight:700;
  line-height:1;
}

.dental-brochure .db-faq-list{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;
}

.dental-brochure .db-faq-list details{
  display:block !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  border:1px solid var(--blue-border);
  border-radius:6px;

  background:#fff;
  overflow:hidden;
}

.dental-brochure .db-faq-list summary{
  position:relative;

  display:flex;
  align-items:center;

  width:100% !important;

  min-height:39px;

  margin:0 !important;
  padding:8px 38px 8px 11px !important;

  color:var(--blue-dark);
  background:#fff;

  cursor:pointer;
  list-style:none;

  font-size:12.5px;
  font-weight:400;
  line-height:1.25;
}

.dental-brochure .db-faq-list summary::-webkit-details-marker{
  display:none;
}

.dental-brochure .db-faq-list summary::after{
  content:"+";

  position:absolute;
  top:50%;
  right:8px;

  display:flex;
  align-items:center;
  justify-content:center;

  width:20px;
  height:20px;

  border:1px solid #78b9ed;
  border-radius:50%;

  background:#fff;
  color:var(--blue-bright);

  font-size:17px;
  font-weight:400;
  line-height:1;

  transform:translateY(-50%);
}

.dental-brochure .db-faq-list details[open] summary{
  background:#eaf6ff;
  border-bottom:1px solid var(--blue-border);
}

.dental-brochure .db-faq-list details[open] summary::after{
  content:"−";
  background:var(--blue-bright);
  border-color:var(--blue-bright);
  color:#fff;
}

.dental-brochure .db-faq-answer{
  width:100% !important;
  margin:0 !important;
  padding:10px 12px 12px !important;

  background:#fff;
  color:var(--text);

  font-size:12.5px;
  line-height:1.45;
}

/* ==========================================================
   RELATED KNOWLEDGE BASE
   DIRECT LINKS — NO DROPDOWN / NO PLUS
   FULL WIDTH OF THE CONTENT CANVAS
   ========================================================== */

.dental-brochure .db-related-section{
  display:block !important;

  width:100% !important;
  max-width:none !important;

  margin:0 0 15px !important;
  margin-left:0 !important;
  margin-right:0 !important;

  padding:11px 12px !important;

  border:1px solid var(--blue-border);
  border-radius:9px;

  background:linear-gradient(135deg,#edf8ff,#e5f3ff);

  box-shadow:0 2px 6px rgba(8,78,145,.035);

  overflow:visible !important;
}

.dental-brochure .db-related-heading{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;

  width:100% !important;
  max-width:none !important;

  margin:0 0 7px !important;
  padding:0 0 6px !important;

  border-bottom:1px solid var(--blue-line);
}

.dental-brochure .db-related-heading h2{
  margin:0 !important;

  color:var(--blue);
  font-size:20px;
  line-height:1.2;
}

.dental-brochure .db-related-icon{
  display:flex !important;
  flex:0 0 31px;
  align-items:center;
  justify-content:center;

  width:31px;
  height:31px;

  border-radius:50%;

  background:var(--blue-bright);
  color:#fff;

  font-size:16px;
  font-weight:700;
  line-height:1;
}

.dental-brochure .db-related-links{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;
  gap:4px !important;

  float:none !important;
  position:static !important;
}

.dental-brochure .db-related-link{
  display:flex !important;
  align-items:center !important;

  width:100% !important;
  max-width:none !important;

  min-height:39px;

  margin:0 !important;
  padding:8px 11px !important;

  border:1px solid var(--blue-border) !important;
  border-radius:6px !important;

  background:#fff !important;

  color:var(--blue-dark) !important;
  font-family:Arial,Helvetica,sans-serif !important;

  font-size:12.5px !important;
  font-weight:400 !important;
  line-height:1.25 !important;

  text-decoration:none !important;
}

.dental-brochure .db-related-link:hover{
  background:#f6fbff !important;
  border-color:#91c9f3 !important;
  color:var(--blue-bright) !important;
  text-decoration:none !important;
}

.dental-brochure .db-related-link:focus-visible{
  outline:2px solid var(--blue-bright) !important;
  outline-offset:1px !important;
}

/* ==========================================================
   MOBILE / TABLET
   Keep the reference proportions on desktop and stack only
   when the actual viewport becomes narrow.
   ========================================================== */

@media (max-width:900px){

  .dental-brochure .db-dental-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .dental-brochure .db-resource-bar{
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
  }

  .dental-brochure .db-download{
    grid-column:1 / -1;
  }

  .dental-brochure .db-requirement-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .dental-brochure .db-rates{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dental-brochure .db-rates-title{
    grid-column:1 / -1;
  }

}

@media (max-width:650px){

  .dental-brochure .db-dental-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .dental-brochure .db-resource-bar{
    grid-template-columns:1fr;
    padding:10px;
  }

  .dental-brochure .db-resource-brand{
    font-size:15px;
    letter-spacing:1.1px;
  }

  .dental-brochure .db-resource-title{
    padding:7px 0 0;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.35);
    font-size:16px;
    white-space:normal;
  }

  .dental-brochure .db-download{
    grid-column:auto;
  }

  .dental-brochure .db-requirement-grid,
  .dental-brochure .db-eligibility-grid,
  .dental-brochure .db-key-grid{
    grid-template-columns:1fr;
  }

  .dental-brochure .db-rates{
    grid-template-columns:1fr 1fr;
  }

  .dental-brochure .db-plan-details-header{
    flex-wrap:wrap;
    gap:4px 7px;
  }

  .dental-brochure .db-benefit-table{
    min-width:760px;
  }

}

@media (max-width:430px){

  .dental-brochure .db-rates{
    grid-template-columns:1fr;
  }

  .dental-brochure .db-rates-title{
    grid-column:auto;
  }

  .dental-brochure .db-rate{
    border-left:0;
    border-bottom:1px solid var(--blue-border);
  }

  .dental-brochure .db-rate:last-child{
    border-bottom:0;
  }

}


/* ==========================================================
   FINAL WIDTH ALIGNMENT
   The entire content canvas must be exactly the same width
   as the hero image.
   ========================================================== */

html body .dental-brochure .db-dental-content,
body .dental-brochure .db-dental-content{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  position:relative !important;
  left:0 !important;
  right:0 !important;
  float:none !important;
}

html body .dental-brochure .db-resource-bar,
html body .dental-brochure .db-simple-card,
html body .dental-brochure .db-key-section,
html body .dental-brochure .db-glance,
html body .dental-brochure .db-two-column,
html body .dental-brochure .db-rates,
html body .dental-brochure .db-plan-details,
html body .dental-brochure .db-faq-section,
html body .dental-brochure .db-related-section{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

html body .dental-brochure .db-intro-grid{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ==========================================================
   TYPOGRAPHY REFINEMENT
   Content text should visually relate to the hero without
   competing with the hero title. The previous version was
   too small on desktop.
   ========================================================== */

@media (min-width:901px){

  .dental-brochure{
    font-size:15.5px !important;
    line-height:1.5 !important;
  }

  /* Resource bar */
  .dental-brochure .db-resource-brand{
    font-size:13px !important;
  }

  .dental-brochure .db-resource-title{
    font-size:20px !important;
  }

  .dental-brochure .db-download-copy strong{
    font-size:13px !important;
  }

  .dental-brochure .db-download-copy small{
    font-size:10.5px !important;
  }

  /* Section headings */
  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:23px !important;
  }

  /* About */
  .dental-brochure .db-about-card p{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  /* Participation Requirements */
  .dental-brochure .db-requirement-box{
    padding:14px 15px !important;
  }

  .dental-brochure .db-requirement-box h3{
    font-size:15px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:25px !important;
    margin-bottom:5px !important;
  }

  .dental-brochure .db-requirement-box p{
    font-size:14px !important;
    line-height:1.42 !important;
  }

  /* Eligibility */
  .dental-brochure .db-eligibility-box{
    padding:13px 14px !important;
  }

  .dental-brochure .db-eligibility-box h3{
    font-size:15px !important;
  }

  .dental-brochure .db-eligibility-box li{
    font-size:13.5px !important;
    line-height:1.4 !important;
  }

  /* Key Information */
  .dental-brochure .db-key-box{
    padding:12px 14px !important;
  }

  .dental-brochure .db-key-box p{
    font-size:14.5px !important;
    line-height:1.45 !important;
  }

  .dental-brochure .db-check{
    font-size:20px !important;
  }

  /* Rates */
  .dental-brochure .db-rates-title h2{
    font-size:20px !important;
  }

  .dental-brochure .db-rates-title p{
    font-size:11.5px !important;
  }

  .dental-brochure .db-rate span{
    font-size:13px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:28px !important;
  }

  /* Plan Details */
  .dental-brochure .db-plan-details-header h2{
    font-size:22px !important;
  }

  .dental-brochure .db-plan-subtitle{
    font-size:13px !important;
  }

  .dental-brochure .db-benefit-table{
    font-size:14px !important;
    line-height:1.42 !important;
  }

  .dental-brochure .db-benefit-table thead th{
    font-size:12px !important;
  }

  .dental-brochure .db-benefit-table tbody th{
    font-size:13.5px !important;
  }

  .dental-brochure .db-benefit-table tbody td{
    font-size:14px !important;
  }

  .dental-brochure .db-benefit-table .db-center strong{
    font-size:15px !important;
  }

  .dental-brochure .db-benefit-table .db-center small{
    font-size:10px !important;
  }

  /* FAQ */
  .dental-brochure .db-faq-list summary{
    font-size:14px !important;
  }

  .dental-brochure .db-faq-answer{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  /* Related KB direct links */
  .dental-brochure .db-related-link{
    font-size:14px !important;
  }

  .dental-brochure .db-related-heading h2{
    font-size:23px !important;
  }
}

/* Mid-size desktop/tablet: keep text comfortably readable. */
@media (min-width:651px) and (max-width:900px){

  .dental-brochure{
    font-size:15px !important;
  }

  .dental-brochure .db-about-card p,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:21px !important;
  }

  .dental-brochure .db-benefit-table tbody td{
    font-size:13.5px !important;
  }
}

/* ==========================================================
   FINAL TABLET + MOBILE REFINEMENT
   Keep the desktop reference proportions while making every
   section comfortably readable on smaller screens.
   ========================================================== */

/* Tablet: 651px–900px */
@media (min-width:651px) and (max-width:900px){

  .dental-brochure .db-content,
  .dental-brochure .db-dental-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Keep the two-column visual rhythm until the narrower tablet
     breakpoint, but give each column enough room. */
  .dental-brochure .db-intro-grid,
  .dental-brochure .db-two-column{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  .dental-brochure .db-requirement-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .dental-brochure .db-eligibility-grid,
  .dental-brochure .db-key-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .dental-brochure .db-rates{
    grid-template-columns:minmax(220px,1.45fr) repeat(4,minmax(0,1fr)) !important;
  }

  .dental-brochure .db-rates-title h2{
    font-size:18px !important;
  }

  .dental-brochure .db-rate span{
    font-size:12px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:25px !important;
  }

  /* Plan details stays readable through horizontal scrolling rather
     than squeezing the table into unusable text. */
  .dental-brochure .db-table-wrap{
    overflow-x:auto !important;
    width:100% !important;
  }

  .dental-brochure .db-benefit-table{
    min-width:760px !important;
  }

  /* Related links remain full width and easy to tap. */
  .dental-brochure .db-related-link{
    min-height:42px !important;
    font-size:13.5px !important;
    padding:9px 12px !important;
  }
}

/* Mobile: 0–650px */
@media (max-width:650px){

  .dental-brochure{
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    font-size:14px !important;
  }

  .dental-brochure .db-content,
  .dental-brochure .db-dental-content{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .dental-brochure .db-hero{
    width:100% !important;
    max-width:none !important;
    margin-bottom:10px !important;
    border-radius:0 0 8px 8px;
  }

  .dental-brochure .db-resource-bar{
    grid-template-columns:1fr !important;
    gap:7px !important;
    margin:0 0 10px !important;
    padding:10px !important;
    border-radius:8px;
  }

  .dental-brochure .db-resource-brand{
    font-size:10.5px !important;
  }

  .dental-brochure .db-resource-title{
    padding:7px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(255,255,255,.35);
    font-size:15px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }

  .dental-brochure .db-download{
    width:100% !important;
    padding:7px 9px !important;
  }

  .dental-brochure .db-download-copy strong{
    font-size:11px !important;
  }

  .dental-brochure .db-download-copy small{
    font-size:9px !important;
  }

  /* Every major section becomes one comfortable column. */
  .dental-brochure .db-intro-grid,
  .dental-brochure .db-two-column{
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    margin-bottom:10px !important;
  }

  .dental-brochure .db-simple-card,
  .dental-brochure .db-requirements,
  .dental-brochure .db-eligibility,
  .dental-brochure .db-key-section{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:13px !important;
  }

  .dental-brochure .db-section-heading{
    margin-bottom:8px !important;
    padding-bottom:6px !important;
  }

  .dental-brochure .db-section-heading h2{
    font-size:19px !important;
  }

  /* Requirements remain three information blocks, but stack for
     actual phone width so text never becomes cramped. */
  .dental-brochure .db-requirement-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .dental-brochure .db-requirement-box{
    width:100% !important;
    padding:12px !important;
  }

  .dental-brochure .db-requirement-box h3{
    font-size:14px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:24px !important;
  }

  .dental-brochure .db-requirement-box p{
    font-size:13px !important;
    line-height:1.4 !important;
  }

  /* Eligibility: 2x2 on tablet, one card per row on phone. */
  .dental-brochure .db-eligibility-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .dental-brochure .db-eligibility-box{
    padding:12px !important;
  }

  .dental-brochure .db-eligibility-box h3{
    font-size:14px !important;
  }

  .dental-brochure .db-eligibility-box li{
    font-size:13px !important;
    line-height:1.38 !important;
  }

  /* Key information: one item per row on phones. */
  .dental-brochure .db-key-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .dental-brochure .db-key-box{
    padding:11px 12px !important;
  }

  .dental-brochure .db-key-box p{
    font-size:13.5px !important;
    line-height:1.42 !important;
  }

  /* Plan at a Glance: 2 columns on normal phones. */
  .dental-brochure .db-glance{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    margin-bottom:10px !important;
  }

  .dental-brochure .db-glance-title{
    grid-column:1 / -1 !important;
    border-right:0 !important;
    border-bottom:1px solid var(--blue-border);
    padding:10px 12px !important;
  }

  .dental-brochure .db-glance-title h2{
    font-size:20px !important;
  }

  .dental-brochure .db-glance-item{
    padding:10px !important;
    border-bottom:1px solid var(--blue-border);
  }

  .dental-brochure .db-glance-item:nth-last-child(-n+2){
    border-bottom:0;
  }

  .dental-brochure .db-glance-label{
    font-size:9.5px !important;
  }

  .dental-brochure .db-glance-item strong{
    font-size:13px !important;
  }

  .dental-brochure .db-glance-item small{
    font-size:11px !important;
  }

  .dental-brochure .db-glance-value{
    font-size:21px !important;
  }

  /* Rates: 2x2 cards on phones. */
  .dental-brochure .db-rates{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100% !important;
    margin-bottom:11px !important;
  }

  .dental-brochure .db-rates-title{
    grid-column:1 / -1 !important;
    padding:12px !important;
  }

  .dental-brochure .db-rates-title h2{
    font-size:18px !important;
  }

  .dental-brochure .db-rates-title p{
    font-size:10px !important;
  }

  .dental-brochure .db-rate{
    min-height:67px;
    padding:10px 6px !important;
  }

  .dental-brochure .db-rate span{
    font-size:11.5px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:23px !important;
  }

  /* Plan Details: allow horizontal scroll while keeping text readable. */
  .dental-brochure .db-plan-details{
    width:100% !important;
    margin-bottom:12px !important;
  }

  .dental-brochure .db-plan-details-header{
    flex-wrap:wrap !important;
    gap:3px 7px !important;
    padding:8px 10px !important;
  }

  .dental-brochure .db-plan-details-header h2{
    font-size:19px !important;
  }

  .dental-brochure .db-plan-subtitle{
    font-size:11px !important;
  }

  .dental-brochure .db-benefit-table{
    min-width:760px !important;
    font-size:13px !important;
  }

  .dental-brochure .db-benefit-table th,
  .dental-brochure .db-benefit-table td{
    padding:9px 10px !important;
  }

  /* FAQ: full-width, comfortable tap targets. */
  .dental-brochure .db-faq-section,
  .dental-brochure .db-related-section{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:10px !important;
  }

  .dental-brochure .db-faq-heading,
  .dental-brochure .db-related-heading{
    margin-bottom:7px !important;
  }

  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:19px !important;
  }

  .dental-brochure .db-faq-heading-icon,
  .dental-brochure .db-related-icon{
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    font-size:19px !important;
  }

  .dental-brochure .db-faq-list{
    gap:4px !important;
  }

  .dental-brochure .db-faq-list summary{
    min-height:43px !important;
    padding:10px 40px 10px 11px !important;
    font-size:13px !important;
  }

  .dental-brochure .db-faq-answer{
    padding:11px 12px !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  /* Direct Related KB links remain full width and easy to tap. */
  .dental-brochure .db-related-links{
    width:100% !important;
    gap:4px !important;
  }

  .dental-brochure .db-related-link{
    width:100% !important;
    min-height:43px !important;
    padding:10px 11px !important;
    font-size:13px !important;
    line-height:1.3 !important;
  }
}

/* Very narrow phones */
@media (max-width:380px){

  .dental-brochure .db-rates{
    grid-template-columns:1fr !important;
  }

  .dental-brochure .db-rates-title{
    grid-column:auto !important;
  }

  .dental-brochure .db-rate{
    border-left:0 !important;
    border-bottom:1px solid var(--blue-border);
  }

  .dental-brochure .db-rate:last-child{
    border-bottom:0;
  }

  .dental-brochure .db-glance{
    grid-template-columns:1fr !important;
  }

  .dental-brochure .db-glance-title{
    grid-column:auto !important;
  }

  .dental-brochure .db-glance-item{
    border-right:0 !important;
  }

  .dental-brochure .db-glance-item:nth-last-child(-n+2){
    border-bottom:1px solid var(--blue-border);
  }

  .dental-brochure .db-glance-item:last-child{
    border-bottom:0;
  }
}

/* ==========================================================
   FINAL FONT-SIZE REFINEMENT
   Make the lower content clearly readable and visually closer
   to the hero's typography hierarchy. Titles scale together
   with their supporting details.
   ========================================================== */

@media (min-width:651px){

  /* Overall body/detail readability */
  .dental-brochure{
    font-size:16px !important;
    line-height:1.55 !important;
  }

  /* Resource bar */
  .dental-brochure .db-resource-brand{
    font-size:14px !important;
  }

  .dental-brochure .db-resource-title{
    font-size:21px !important;
  }

  .dental-brochure .db-download-copy strong{
    font-size:14px !important;
  }

  .dental-brochure .db-download-copy small{
    font-size:11px !important;
  }

  /* Section titles */
  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:24px !important;
  }

  /* About */
  .dental-brochure .db-about-card p{
    font-size:15px !important;
    line-height:1.55 !important;
  }

  /* Participation Requirements */
  .dental-brochure .db-requirement-box{
    padding:15px 16px !important;
  }

  .dental-brochure .db-requirement-box h3{
    font-size:16px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:27px !important;
  }

  .dental-brochure .db-requirement-box p{
    font-size:14.5px !important;
    line-height:1.48 !important;
  }

  /* Eligibility */
  .dental-brochure .db-eligibility-box{
    padding:14px 15px !important;
  }

  .dental-brochure .db-eligibility-box h3{
    font-size:16px !important;
  }

  .dental-brochure .db-eligibility-box li{
    font-size:14px !important;
    line-height:1.48 !important;
  }

  /* Key information */
  .dental-brochure .db-key-box{
    padding:13px 15px !important;
  }

  .dental-brochure .db-key-box p{
    font-size:15px !important;
    line-height:1.48 !important;
  }

  /* Plan at a glance */
  .dental-brochure .db-glance-title h2{
    font-size:24px !important;
  }

  .dental-brochure .db-glance-label{
    font-size:11px !important;
  }

  .dental-brochure .db-glance-item strong{
    font-size:15px !important;
  }

  .dental-brochure .db-glance-item small{
    font-size:13px !important;
  }

  .dental-brochure .db-glance-value{
    font-size:24px !important;
  }

  /* Rates */
  .dental-brochure .db-rates-title h2{
    font-size:20px !important;
  }

  .dental-brochure .db-rates-title p{
    font-size:12px !important;
  }

  .dental-brochure .db-rate span{
    font-size:13px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:28px !important;
  }

  /* Plan Details */
  .dental-brochure .db-plan-details-header h2{
    font-size:23px !important;
  }

  .dental-brochure .db-plan-subtitle{
    font-size:13px !important;
  }

  .dental-brochure .db-benefit-table{
    font-size:15px !important;
    line-height:1.48 !important;
  }

  .dental-brochure .db-benefit-table thead th{
    font-size:12.5px !important;
  }

  .dental-brochure .db-benefit-table tbody th{
    font-size:14px !important;
  }

  .dental-brochure .db-benefit-table tbody td{
    font-size:14.5px !important;
  }

  .dental-brochure .db-benefit-table .db-center strong{
    font-size:16px !important;
  }

  .dental-brochure .db-benefit-table .db-center small{
    font-size:10.5px !important;
  }

  /* FAQ */
  .dental-brochure .db-faq-list summary{
    font-size:14px !important;
    min-height:43px !important;
  }

  .dental-brochure .db-faq-answer{
    font-size:14px !important;
    line-height:1.55 !important;
  }

  /* Related direct links */
  .dental-brochure .db-related-link{
    min-height:43px !important;
    font-size:14px !important;
  }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width:651px) and (max-width:900px){

  .dental-brochure{
    font-size:15.5px !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:22px !important;
  }

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-eligibility-box li{
    font-size:14px !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:15px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:25px !important;
  }

  .dental-brochure .db-rate span{
    font-size:12px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:26px !important;
  }

  .dental-brochure .db-benefit-table tbody td{
    font-size:13.5px !important;
  }

  .dental-brochure .db-benefit-table tbody th{
    font-size:13.5px !important;
  }

  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:13.5px !important;
  }
}

/* ==========================================================
   PHONE
   ========================================================== */

@media (max-width:650px){

  .dental-brochure{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:20px !important;
  }

  .dental-brochure .db-about-card p{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:14px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:24px !important;
  }

  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p{
    font-size:13.5px !important;
    line-height:1.45 !important;
  }

  .dental-brochure .db-glance-title h2{
    font-size:20px !important;
  }

  .dental-brochure .db-glance-label{
    font-size:10px !important;
  }

  .dental-brochure .db-glance-item strong{
    font-size:14px !important;
  }

  .dental-brochure .db-glance-value{
    font-size:21px !important;
  }

  .dental-brochure .db-rate span{
    font-size:11.5px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:23px !important;
  }

  .dental-brochure .db-benefit-table{
    font-size:13px !important;
  }

  .dental-brochure .db-benefit-table tbody th{
    font-size:13px !important;
  }

  .dental-brochure .db-benefit-table tbody td{
    font-size:13px !important;
  }

  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:13px !important;
  }
}

/* ==========================================================
   FINAL REFERENCE TYPOGRAPHY
   The circled hero text ("Calendar Year / Deductible") is
   the reference size for DETAIL text below the hero.
   Section titles are intentionally larger.
   ========================================================== */

@media (min-width:901px){

  /* Detail text baseline — matched to the hero detail scale */
  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-glance-item strong,
  .dental-brochure .db-glance-item small,
  .dental-brochure .db-rate span,
  .dental-brochure .db-plan-subtitle,
  .dental-brochure .db-benefit-table tbody th,
  .dental-brochure .db-benefit-table tbody td,
  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:16px !important;
    line-height:1.45 !important;
  }

  /* Small labels stay smaller than detail text */
  .dental-brochure .db-glance-label,
  .dental-brochure .db-benefit-table thead th,
  .dental-brochure .db-benefit-table .db-center small,
  .dental-brochure .db-rates-title p{
    font-size:12px !important;
    line-height:1.25 !important;
  }

  /* Titles are clearly larger than the body/detail text */
  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:25px !important;
    line-height:1.18 !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:18px !important;
    line-height:1.25 !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:28px !important;
    line-height:1.1 !important;
  }

  .dental-brochure .db-glance-title h2{
    font-size:25px !important;
  }

  .dental-brochure .db-glance-item strong{
    font-size:16px !important;
  }

  .dental-brochure .db-glance-value{
    font-size:25px !important;
  }

  .dental-brochure .db-rates-title h2{
    font-size:21px !important;
    line-height:1.2 !important;
  }

  .dental-brochure .db-rate strong{
    font-size:29px !important;
    line-height:1.05 !important;
  }

  .dental-brochure .db-plan-details-header h2{
    font-size:24px !important;
    line-height:1.12 !important;
  }

  .dental-brochure .db-benefit-table{
    font-size:16px !important;
    line-height:1.45 !important;
  }

  .dental-brochure .db-benefit-table .db-center strong{
    font-size:17px !important;
    line-height:1.1 !important;
  }
}

/* Tablet detail baseline */
@media (min-width:651px) and (max-width:900px){

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-glance-item strong,
  .dental-brochure .db-glance-item small,
  .dental-brochure .db-rate span,
  .dental-brochure .db-plan-subtitle,
  .dental-brochure .db-benefit-table tbody th,
  .dental-brochure .db-benefit-table tbody td,
  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:15px !important;
    line-height:1.45 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:22px !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:16px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:26px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:27px !important;
  }
}

/* Phone detail baseline — readable, but scaled for screen width */
@media (max-width:650px){

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .dental-brochure .db-glance-item strong,
  .dental-brochure .db-glance-item small,
  .dental-brochure .db-rate span{
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:20px !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:15px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:25px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:24px !important;
  }

  .dental-brochure .db-benefit-table tbody th,
  .dental-brochure .db-benefit-table tbody td{
    font-size:14px !important;
  }
}

/* ==========================================================
   EXTRA FONT SIZE INCREASE
   The previous detail scale was still too small.
   Increase the detail text again while keeping titles clearly
   larger than the details.
   ========================================================== */

@media (min-width:901px){

  /* Main detail/body text */
  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-glance-item strong,
  .dental-brochure .db-glance-item small,
  .dental-brochure .db-rate span,
  .dental-brochure .db-plan-subtitle,
  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:17px !important;
    line-height:1.5 !important;
  }

  /* Section titles */
  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:27px !important;
    line-height:1.18 !important;
  }

  /* Card sub-titles */
  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:19px !important;
    line-height:1.25 !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:29px !important;
  }

  /* Plan at a Glance */
  .dental-brochure .db-glance-title h2{
    font-size:27px !important;
  }

  .dental-brochure .db-glance-label{
    font-size:12px !important;
  }

  .dental-brochure .db-glance-item strong{
    font-size:17px !important;
  }

  .dental-brochure .db-glance-item small{
    font-size:14px !important;
  }

  .dental-brochure .db-glance-value{
    font-size:26px !important;
  }

  /* Rates */
  .dental-brochure .db-rates-title h2{
    font-size:22px !important;
  }

  .dental-brochure .db-rates-title p{
    font-size:12.5px !important;
  }

  .dental-brochure .db-rate span{
    font-size:14px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:30px !important;
  }

  /* Plan Details */
  .dental-brochure .db-plan-details-header h2{
    font-size:25px !important;
  }

  .dental-brochure .db-benefit-table{
    font-size:17px !important;
    line-height:1.5 !important;
  }

  .dental-brochure .db-benefit-table thead th{
    font-size:13px !important;
  }

  .dental-brochure .db-benefit-table tbody th{
    font-size:15px !important;
  }

  .dental-brochure .db-benefit-table tbody td{
    font-size:16px !important;
  }

  .dental-brochure .db-benefit-table .db-center strong{
    font-size:18px !important;
  }

  .dental-brochure .db-benefit-table .db-center small{
    font-size:11px !important;
  }

  /* Give the table rows enough breathing room for the larger text */
  .dental-brochure .db-benefit-table th,
  .dental-brochure .db-benefit-table td{
    padding-top:11px !important;
    padding-bottom:11px !important;
  }

  .dental-brochure .db-benefit-table .db-wait-row th,
  .dental-brochure .db-benefit-table .db-wait-row td{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  /* FAQ + KB */
  .dental-brochure .db-faq-list summary{
    font-size:15px !important;
    min-height:45px !important;
  }

  .dental-brochure .db-related-link{
    font-size:15px !important;
    min-height:45px !important;
  }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width:651px) and (max-width:900px){

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:16px !important;
    line-height:1.48 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:23px !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:17px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:27px !important;
  }

  .dental-brochure .db-benefit-table tbody th,
  .dental-brochure .db-benefit-table tbody td{
    font-size:14.5px !important;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:650px){

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p,
  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:21px !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:16px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:26px !important;
  }

  .dental-brochure .db-benefit-table tbody th,
  .dental-brochure .db-benefit-table tbody td{
    font-size:14.5px !important;
  }

  .dental-brochure .db-benefit-table th,
  .dental-brochure .db-benefit-table td{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
}

/* ==========================================================
   PLAN DETAILS TABLE HEADER — LARGER / MORE READABLE
   ========================================================== */

.dental-brochure .db-benefit-table thead th{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1.25 !important;
  padding-top:10px !important;
  padding-bottom:10px !important;
}

/* Keep the four header cells balanced */
.dental-brochure .db-benefit-table thead th:nth-child(3),
.dental-brochure .db-benefit-table thead th:nth-child(4){
  text-align:center !important;
}

@media (min-width:651px) and (max-width:900px){
  .dental-brochure .db-benefit-table thead th{
    font-size:14px !important;
  }
}

@media (max-width:650px){
  .dental-brochure .db-benefit-table thead th{
    font-size:13.5px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
}

/* ==========================================================
   FAQ + RELATED KNOWLEDGE BASE — FINAL VISUAL REFINEMENT
   ========================================================== */

/* FAQ heading and questions: larger for easier scanning */
.dental-brochure .db-faq-heading h2{
  font-size:25px !important;
  line-height:1.2 !important;
}

.dental-brochure .db-faq-list summary{
  font-size:15.5px !important;
  font-weight:600 !important;
  line-height:1.35 !important;
  min-height:46px !important;
}

/* FAQ answers: light-orange highlighted answer area */
.dental-brochure .db-faq-answer{
  padding:12px 14px !important;
  background:#fff5ec !important;
  border-top:1px solid #f3d7c4 !important;
  color:var(--text) !important;
  font-size:15px !important;
  line-height:1.52 !important;
}

/* Keep FAQ answer highlight consistent on open state */
.dental-brochure .db-faq-list details[open] summary{
  background:#eaf6ff !important;
}

.dental-brochure .db-faq-list details[open] .db-faq-answer{
  background:#fff5ec !important;
}

/* ==========================================================
   RELATED KNOWLEDGE BASE ARTICLES
   Use the supplied screenshot's presentation style:
   simple heading, divider, left blue rule, direct links,
   but KEEP OUR EXISTING ARTICLE TITLES.
   ========================================================== */

.dental-brochure .db-related-section{
  background:#fff !important;
  border:0 !important;
  border-top:1px solid var(--blue-line) !important;
  border-bottom:1px solid var(--blue-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;

  padding:12px 0 14px !important;
}

.dental-brochure .db-related-heading{
  display:block !important;
  width:100% !important;

  margin:0 0 11px !important;
  padding:0 0 8px !important;

  border-bottom:1px solid var(--blue-line) !important;
}

.dental-brochure .db-related-heading h2{
  margin:0 !important;
  color:#174f8d !important;
  font-size:25px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}

/* The reference shows no heading circle icon. */
.dental-brochure .db-related-heading .db-related-icon{
  display:none !important;
}

/* Direct linked rows — same presentation language as supplied image */
.dental-brochure .db-related-links{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  width:100% !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 0 0 12px !important;

  gap:0 !important;

  border-left:3px solid var(--blue-bright);
}

.dental-brochure .db-related-link{
  position:relative;

  display:inline-flex !important;
  align-items:center !important;

  width:auto !important;
  max-width:100% !important;
  min-height:32px !important;

  margin:0 !important;
  padding:4px 0 4px 0 !important;

  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;

  color:var(--blue-dark) !important;

  font-family:Arial,Helvetica,sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.35 !important;

  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:2px !important;
}

.dental-brochure .db-related-link::after{
  content:"↗";
  display:inline-block;
  margin-left:5px;

  color:var(--blue-dark);
  font-size:12px;
  font-weight:700;
  line-height:1;

  text-decoration:none;
}

.dental-brochure .db-related-link:hover{
  color:var(--blue-bright) !important;
  background:transparent !important;
}

.dental-brochure .db-related-link:hover::after{
  color:var(--blue-bright);
}

/* No accidental Joomla nested indentation */
.dental-brochure .db-related-section,
.dental-brochure .db-related-links,
.dental-brochure .db-related-link{
  float:none !important;
  position:relative;
  left:auto !important;
  right:auto !important;
}

/* Tablet */
@media (min-width:651px) and (max-width:900px){
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:23px !important;
  }

  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-faq-answer,
  .dental-brochure .db-related-link{
    font-size:14px !important;
  }

  .dental-brochure .db-related-links{
    padding-left:11px !important;
  }
}

/* Mobile */
@media (max-width:650px){
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:21px !important;
  }

  .dental-brochure .db-faq-list summary{
    font-size:14px !important;
    min-height:44px !important;
  }

  .dental-brochure .db-faq-answer{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  .dental-brochure .db-related-section{
    padding:11px 0 13px !important;
  }

  .dental-brochure .db-related-links{
    padding-left:10px !important;
  }

  .dental-brochure .db-related-link{
    font-size:14px !important;
    line-height:1.35 !important;
  }
}

/* ==========================================================
   FINAL LAST FONT REFINEMENT
   Increase details one more level and scale the titles upward
   together. Preserve the latest FAQ + Related KB treatment.
   ========================================================== */

@media (min-width:901px){

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p{
    font-size:17px !important;
    line-height:1.52 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:28px !important;
    line-height:1.18 !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:20px !important;
    line-height:1.25 !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:30px !important;
  }

  .dental-brochure .db-glance-title h2{
    font-size:28px !important;
  }

  .dental-brochure .db-glance-label{
    font-size:12px !important;
  }

  .dental-brochure .db-glance-item strong{
    font-size:17px !important;
  }

  .dental-brochure .db-glance-item small{
    font-size:14px !important;
  }

  .dental-brochure .db-glance-value{
    font-size:27px !important;
  }

  .dental-brochure .db-rates-title h2{
    font-size:22px !important;
  }

  .dental-brochure .db-rates-title p{
    font-size:13px !important;
  }

  .dental-brochure .db-rate span{
    font-size:14px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:31px !important;
  }

  .dental-brochure .db-plan-details-header h2{
    font-size:26px !important;
  }

  .dental-brochure .db-plan-subtitle{
    font-size:14px !important;
  }

  /* Plan Details table: more readable without changing its structure */
  .dental-brochure .db-benefit-table{
    font-size:17px !important;
    line-height:1.52 !important;
  }

  .dental-brochure .db-benefit-table thead th{
    font-size:15px !important;
    line-height:1.25 !important;
  }

  .dental-brochure .db-benefit-table tbody th{
    font-size:15px !important;
  }

  .dental-brochure .db-benefit-table tbody td{
    font-size:16px !important;
  }

  .dental-brochure .db-benefit-table .db-center strong{
    font-size:18px !important;
  }

  .dental-brochure .db-benefit-table .db-center small{
    font-size:11px !important;
  }

  .dental-brochure .db-benefit-table th,
  .dental-brochure .db-benefit-table td{
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  .dental-brochure .db-benefit-table .db-wait-row th,
  .dental-brochure .db-benefit-table .db-wait-row td{
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  /* FAQ */
  .dental-brochure .db-faq-list summary{
    font-size:16px !important;
    min-height:48px !important;
  }

  .dental-brochure .db-faq-answer{
    font-size:16px !important;
    line-height:1.55 !important;
    padding:13px 15px !important;
  }

  /* Related direct links */
  .dental-brochure .db-related-link{
    font-size:16px !important;
    min-height:48px !important;
  }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width:651px) and (max-width:900px){

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p{
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:24px !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:17px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:28px !important;
  }

  .dental-brochure .db-benefit-table thead th{
    font-size:14px !important;
  }

  .dental-brochure .db-benefit-table tbody th,
  .dental-brochure .db-benefit-table tbody td{
    font-size:15px !important;
  }

  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:15px !important;
  }

  .dental-brochure .db-faq-answer{
    font-size:15px !important;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:650px){

  .dental-brochure .db-about-card p,
  .dental-brochure .db-requirement-box p,
  .dental-brochure .db-eligibility-box li,
  .dental-brochure .db-key-box p{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .dental-brochure .db-section-heading h2,
  .dental-brochure .db-faq-heading h2,
  .dental-brochure .db-related-heading h2{
    font-size:22px !important;
  }

  .dental-brochure .db-requirement-box h3,
  .dental-brochure .db-eligibility-box h3{
    font-size:16px !important;
  }

  .dental-brochure .db-requirement-box > strong{
    font-size:27px !important;
  }

  .dental-brochure .db-glance-title h2{
    font-size:22px !important;
  }

  .dental-brochure .db-rate span{
    font-size:12.5px !important;
  }

  .dental-brochure .db-rate strong{
    font-size:25px !important;
  }

  .dental-brochure .db-benefit-table thead th{
    font-size:13px !important;
  }

  .dental-brochure .db-benefit-table tbody th,
  .dental-brochure .db-benefit-table tbody td{
    font-size:14.5px !important;
  }

  .dental-brochure .db-faq-list summary,
  .dental-brochure .db-related-link{
    font-size:14px !important;
  }

  .dental-brochure .db-faq-answer{
    font-size:14px !important;
    line-height:1.5 !important;
  }
}


@media (max-width:430px){
  .dental-brochure .db-hero-image{
    aspect-ratio:2.75 / 1 !important;
  }
}

/* ==========================================================
   FINAL HERO — FULL WIDTH, NO SIDE SPACES, NO CROPPING
   Natural image ratio is preserved at every viewport.
   ========================================================== */

.dental-brochure .db-hero{
  display:block !important;
  width:100% !important;
  max-width:none !important;

  margin:0 0 14px !important;
  padding:0 !important;

  overflow:hidden !important;
  line-height:0 !important;

  background:transparent !important;
  border-radius:0 0 10px 10px;
}

.dental-brochure .db-hero-image{
  display:block !important;

  width:100% !important;
  max-width:100% !important;
  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  object-fit:contain !important;
  object-position:center center !important;

  border:0 !important;
  transform:none !important;
}

/* The hero remains edge-to-edge even inside common Joomla wrappers. */
html body .dental-brochure .db-hero,
body .dental-brochure .db-hero,
html body .dental-brochure .db-hero-image,
body .dental-brochure .db-hero-image{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Never introduce a fixed hero height at tablet/mobile sizes. */
@media (max-width:900px){
  .dental-brochure .db-hero-image{
    height:auto !important;
    object-fit:contain !important;
  }
}

@media (max-width:650px){
  .dental-brochure .db-hero-image{
    height:auto !important;
    object-fit:contain !important;
    aspect-ratio:auto !important;
  }
}


/* ===== FINAL RESOURCE BAR BRAND / TITLE BALANCE ===== */
.dental-brochure .db-resource-brand{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  color:#fff !important;
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:1.25px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.dental-brochure .db-resource-brand .db-brand-name{
  display:inline-block !important;
}
.dental-brochure .db-resource-brand .db-brand-reg{
  position:relative !important;
  top:-3px !important;
  margin-left:3px !important;
  color:#fff !important;
  font-size:9px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
.dental-brochure .db-resource-title{
  padding-left:10px !important;
  border-left:0 !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:700 !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}
@media (max-width:900px){
  .dental-brochure .db-resource-brand{
    font-size:15px !important;
    letter-spacing:1.1px !important;
  }
  .dental-brochure .db-resource-title{
    font-size:16px !important;
    white-space:normal !important;
  }
}

/* =========================================
   COMPANION LIFE - DENTAL FAQS
   Blue theme with light orange answers
   Font: Arial
   ========================================= */

.dental-faqs {
    --faq-blue: #174A78;
    --faq-blue-dark: #12395F;
    --faq-blue-light: #EAF4FA;
    --faq-orange: #FCE9DC;
    --faq-orange-border: #F2C9AC;
    --faq-text: #303B46;

      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    box-sizing: border-box;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--faq-text);
}

/* Prevent inherited Joomla styles from changing layout */

.dental-faqs *,
.dental-faqs *::before,
.dental-faqs *::after {
    box-sizing: border-box;
}

/* =========================================
   MAIN TITLE HEADER
   ========================================= */

.dental-faqs-header {
    position: relative;
    overflow: hidden;
    padding: 35px 40px;
    margin-bottom: 30px;

    background: linear-gradient(
        135deg,
        #174A78 0%,
        #21699D 60%,
        #3989B7 100%
    );

    border-radius: 12px;
    border-bottom: 5px solid #E9A16F;
    color: #FFFFFF;
}

.dental-faqs-eyebrow {
    display: block;
    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #D6EAF7;
}

.dental-faqs-header h2 {
    margin: 0 0 12px !important;
    padding: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    color: #FFFFFF !important;
    border: none !important;
    background: transparent !important;
    text-transform: none !important;
}

.dental-faqs-header p {
    max-width: 750px;
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px;
    line-height: 1.7;
    color: #F0F7FC !important;
}

/* =========================================
   FAQ CATEGORY SECTIONS
   ========================================= */

.dental-faqs .faq-category {
    margin: 0 0 28px;
    padding: 0;

    background: #FFFFFF;
    border: 1px solid #D8E4ED;
    border-radius: 9px;
    overflow: hidden;
}

.dental-faqs .faq-category-title {
    margin: 0 !important;
    padding: 17px 22px !important;

    background: #EAF4FA;
    border-left: 6px solid #21699D;
    border-bottom: 1px solid #D1E1ED;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;

    color: #174A78 !important;
    text-transform: none !important;
}

.dental-faqs .faq-category-description {
    margin: 0 !important;
    padding: 12px 22px 15px !important;

    font-size: 14px;
    color: #637586 !important;
    background: #F7FAFC;
}

/* =========================================
   FAQ QUESTION DROPDOWNS
   ========================================= */

.dental-faqs .faq-item {
    margin: 0;
    padding: 0;

    border: none;
    border-bottom: 1px solid #DFE8EF;
    background: #FFFFFF;
}

.dental-faqs .faq-item:last-child {
    border-bottom: none;
}

/* Clickable question */

.dental-faqs .faq-item summary {
    position: relative;
    display: block;

    padding: 18px 65px 18px 24px;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;

    color: #174A78 !important;
    background: #FFFFFF;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

/* Remove default browser arrow */

.dental-faqs .faq-item summary::-webkit-details-marker {
    display: none;
}

.dental-faqs .faq-item summary::marker {
    content: "";
}

/* Blue hover effect */

.dental-faqs .faq-item summary:hover {
    background: #F1F7FB;
    color: #0E3457 !important;
}

/* =========================================
   PLUS / MINUS ICON
   ========================================= */

.dental-faqs .faq-item summary::after {
    content: "+";

    position: absolute;
    top: 50%;
    right: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    transform: translateY(-50%);

    border-radius: 50%;
    background: #174A78;
    color: #FFFFFF;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

/* Change plus to minus when open */

.dental-faqs .faq-item[open] > summary::after {
    content: "\2212";
    background: #D9844D;
    color: #FFFFFF;
}

/* Open question background */

.dental-faqs .faq-item[open] > summary {
    background: #EAF4FA;
    color: #12395F !important;
    border-bottom: 1px solid #D5E4ED;
}

/* Keyboard accessibility */

.dental-faqs .faq-item summary:focus-visible {
    outline: 3px solid #E9A16F;
    outline-offset: -3px;
}

/* =========================================
   LIGHT ORANGE ANSWER PANEL
   ========================================= */

.dental-faqs .faq-answer {
    display: block;

    margin: 12px 18px 18px;
    padding: 20px 24px;

    background: #FCE9DC;
    border: 1px solid #F2C9AC;
    border-left: 5px solid #E9A16F;
    border-radius: 6px;

    color: #39434D;
    font-size: 14px;
    line-height: 1.75;

    animation: dentalFaqReveal 0.25s ease;
}

.dental-faqs .faq-answer p {
    margin: 0 0 12px !important;
    padding: 0 !important;

    color: #39434D !important;
    font-size: 14px;
    line-height: 1.75;
}

.dental-faqs .faq-answer p:last-child {
    margin-bottom: 0 !important;
}

.dental-faqs .faq-answer ul {
    margin: 10px 0 14px !important;
    padding-left: 25px !important;

    list-style-type: disc;
}

.dental-faqs .faq-answer li {
    margin: 0 0 8px;
    padding: 0;

    color: #39434D;
    line-height: 1.7;
}

.dental-faqs .faq-answer strong {
    color: #174A78;
    font-weight: 700;
}

.dental-faqs .faq-answer a {
    color: #174A78 !important;
    font-weight: 700;
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.dental-faqs .faq-answer a:hover {
    color: #0B2E4D !important;
}

/* =========================================
   FOOTER / DISCLAIMER
   ========================================= */

.dental-faqs .dental-faqs-footer {
    margin-top: 30px;
    padding: 22px 25px;

    background: #F1F6FA;
    border: 1px solid #D7E4ED;
    border-radius: 8px;

    font-size: 13px;
    line-height: 1.7;
    color: #526476;
}

.dental-faqs .dental-faqs-footer strong {
    display: block;
    margin-bottom: 8px;

    font-size: 15px;
    color: #174A78;
}

.dental-faqs .dental-faqs-footer p {
    margin: 0 !important;
    padding: 0 !important;
    color: #526476 !important;
}

/* =========================================
   OPENING ANIMATION
   ========================================= */

@keyframes dentalFaqReveal {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   TABLET AND MOBILE RESPONSIVENESS
   ========================================= */

@media screen and (max-width: 768px) {

    .dental-faqs {
        margin: 20px auto;
        font-size: 14px;
    }

    .dental-faqs-header {
        padding: 26px 24px;
        margin-bottom: 22px;
        border-radius: 8px;
    }

    .dental-faqs-header h2 {
        font-size: 28px !important;
    }

    .dental-faqs .faq-category-title {
        padding: 15px 18px !important;
        font-size: 18px !important;
    }

    .dental-faqs .faq-item summary {
        padding: 16px 58px 16px 18px;
        font-size: 14px;
    }

    .dental-faqs .faq-item summary::after {
        right: 15px;
        width: 28px;
        height: 28px;
    }

    .dental-faqs .faq-answer {
        margin: 10px 12px 14px;
        padding: 16px 18px;
    }

    .dental-faqs .dental-faqs-footer {
        padding: 18px;
    }
}

@media screen and (max-width: 480px) {

    .dental-faqs-header {
        padding: 22px 18px;
    }

    .dental-faqs-header h2 {
        font-size: 25px !important;
    }

    .dental-faqs-eyebrow {
        font-size: 10px;
        letter-spacing: 1px;
    }

    .dental-faqs .faq-item summary {
        padding-left: 15px;
        padding-right: 52px;
    }

    .dental-faqs .faq-answer {
        margin: 8px 9px 12px;
        padding: 14px;
    }
}

/* Hide Categories from View All Announcements */
body.layout-userannouncements .js-ticket-categories-wrp {
    display: none !important;
}

/* Hide Support Center - QUICK START for Companion Life users only */
body:has(img[alt="Companion Life"]) .js-ticket-data:has(a[href="/index.php/controlpanel/article/Support-Center-QUICK-START-5"]) {
    display: none !important;
}

/* =========================================
   HIDE "SUB CATEGORIES KNOWLEDGEBASE"
   AND ITS DIRECT ARTICLES
   GLOBAL - ALL TILES / ALL USERS
   ========================================= */

.js-ticket-downloads-wrp
> .js-ticket-downloads-heading-wrp:nth-of-type(3),
.js-ticket-downloads-wrp
> .js-ticket-downloads-heading-wrp:nth-of-type(3)
+ .js-ticket-downloads-content {
    display: none !important;
}

/* =========================================
   SUPPORT CENTER - BACK BUTTON
   Clean Premium Style
   ========================================= */

.support-center-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 100%;
    min-height: 58px;

    margin: 0;
    padding: 10px 8px;

    background: #ffffff;
    box-sizing: border-box;

    /* Space between Back and Next */
    gap: 12px;
}


/* =========================================
   BACK BUTTON
   ========================================= */

.support-center-nav-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    min-width: 92px;

    padding: 0 18px 0 13px;

    border: 1px solid #174A78;
    border-radius: 6px;

    background: #ffffff;
    color: #174A78;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none !important;

    cursor: pointer;

    box-sizing: border-box;

    box-shadow:
        0 1px 3px rgba(23, 74, 120, 0.10);

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}


/* =========================================
   LEFT ARROW
   ========================================= */

.support-center-nav-back::before {
    content: "←";

    display: inline-flex;
    align-items: center;

    margin-right: 9px;

    color: #174A78;

    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 400;

    line-height: 1;

    transition:
        transform 0.2s ease,
        color 0.2s ease;
}


/* =========================================
   HOVER
   ========================================= */

.support-center-nav-btn:hover {
    background: #174A78;
    border-color: #174A78;

    color: #ffffff !important;

    box-shadow:
        0 4px 10px rgba(23, 74, 120, 0.20);

    transform: translateY(-1px);
}


/* Arrow also turns white + moves slightly */
.support-center-nav-btn:hover::before {
    color: #ffffff;

    transform: translateX(-3px);
}


/* =========================================
   ACTIVE / CLICK
   ========================================= */

.support-center-nav-btn:active {
    transform: translateY(0);

    box-shadow:
        0 1px 3px rgba(23, 74, 120, 0.12);
}


/* =========================================
   KEYBOARD FOCUS
   ========================================= */

.support-center-nav-btn:focus-visible {
    outline: 2px solid #174A78;
    outline-offset: 2px;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .support-center-navigation {
        min-height: 54px;
        padding: 8px 4px;
    }

    .support-center-nav-btn {
        height: 38px;
        min-width: 88px;

        padding: 0 15px 0 12px;

        font-size: 13px;
    }

    .support-center-nav-back::before {
        margin-right: 7px;
        font-size: 18px;
    }

}

/* =========================================
   SUPPORT CENTER - BACK / NEXT NAVIGATION
   ========================================= */

.support-center-nav-next,
.support-center-nav-back {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* =========================================
   COMPANION LIFE ONLY
   HIDE QUICK START
   ========================================= */

body:has(img[src*="companion-life-logo.png"])
.last-kb .js-ticket-data-list > .js-ticket-data:first-child {
    display: none !important;
}
/* =========================================
   BRECKPOINT ONLY
   HIDE QUICK START - DASHBOARD
   ========================================= */

body:has(img[src*="breckpoint-logo.png"])
.js-ticket-data:has(
    a[href="/index.php/controlpanel/article/Support-Center-QUICK-START-5"]
) {
    display: none !important;
}
/* =========================================
   TRIO ONLY
   HIDE QUICK START - DASHBOARD
   ========================================= */

body:has(img[src*="trio-logo.png"])
.js-ticket-data:has(
    a[href="/index.php/controlpanel/article/Support-Center-QUICK-START-5"]
) {
    display: none !important;
}

/* =========================================
   SUPPORT CENTER - NEW NO RESULTS DISPLAY
   ========================================= */

.kb-no-results-new {
    width: 100%;
    text-align: center;
    padding: 20px 20px 30px;
    box-sizing: border-box;
}

.kb-no-results-image {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
}

/* Hide the original JS Support Ticket frowny icon */
[data-kb-no-results="1"]::before,
[data-kb-no-results="1"]::after,
[data-kb-no-results="1"] *::before,
[data-kb-no-results="1"] *::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

/* =========================================
   SUPPORT CENTER - REMOVE ORIGINAL FROWNY
   ========================================= */

.kb-no-results-clean {
    background-image: none !important;
}

.kb-no-results-clean::before,
.kb-no-results-clean::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* =========================================
   HIDE ORIGINAL JS SUPPORT TICKET
   "NO RECORD FOUND" FROWNY ICON
   ========================================= */

.js-ticket-error-message-wrapper
.js-ticket-message-image-wrapper {
    display: none !important;
}

.js-ticket-error-message-wrapper
img.js-ticket-message-image[src*="no-record-icon.png"] {
    display: none !important;
}

/* =========================================
   CUSTOM EMPTY CATEGORY PAGE
   ========================================= */

.jl-empty-category {
    max-width: 650px;
    margin: 50px auto;
    padding: 45px 30px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.jl-empty-category h2 {
    margin: 0 0 10px;
    color: #123d75;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
}

.jl-empty-category p {
    margin: 0 0 25px;
    color: #475569;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.jl-empty-category-button {
    display: inline-block;
    padding: 11px 22px;
    background: #2563eb;
    color: #ffffff !important;
    border: 1px solid #2563eb;
    border-radius: 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.jl-empty-category-button:hover {
    background: #123d75;
    border-color: #123d75;
    color: #ffffff !important;
}

@media (max-width: 700px) {
    .jl-empty-category {
        margin: 30px 10px;
        padding: 35px 20px;
    }

    .jl-empty-category h2 {
        font-size: 22px;
    }
}

/* =========================================================
   DENTAL - 2 COLUMNS WHILE KEEPING ACCIDENT FORMATTING
   ========================================================= */

#product-dental .cl-details-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(8, auto) !important;
    grid-auto-flow: column !important;
    gap: 5px 7px !important;
}

/* Mobile */
@media (max-width: 700px) {
    #product-dental .cl-details-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        grid-auto-flow: row !important;
    }
}

/* Breckpoint only - spacing between logo and Support Center */
body:has(img[src*="breckpoint-logo.png"]) .navbar-brand .site-description {
    margin-top: 15px !important;
}
/* REMOVE STICKY/FIXED SUPPORT CENTER HEADER */
header,
.header,
.site-header,
.container-header {
    position: static !important;
}
/* =========================================
   KB CATEGORY NAME - REMOVE ALL EXTRA SPACE
   ========================================= */

.js-ticket-categories-wrp:has(.js-ticket-knowledgebase-categories-heading-wrp) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* =========================================
   END KB CATEGORY NAME - REMOVE ALL EXTRA SPACE
   ========================================= */

/* =========================================
   KB ARTICLE - REDUCE EMPTY SPACE
   ========================================= */

.js-ticket-knowledgebase-top-search-wrp {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================
   END KB ARTICLE - REDUCE EMPTY SPACE
   ========================================= */

/* =========================================
   KNOWLEDGE BASE CATEGORY CARDS
   SAME SIZE FOR ALL CATEGORIES
   ========================================= */

.js-ticket-category-box {
    height: 155px !important;
    min-height: 155px !important;
    box-sizing: border-box !important;
}

.js-ticket-category-box > a {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.js-ticket-category-download-logo {
    height: 90px !important;
    min-height: 90px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.js-ticket-category-download-logo img {
    max-height: 70px !important;
    max-width: 90% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.js-ticket-category-name {
    height: 64px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 8px 6px !important;
}

/* TITLE: NEW GROUP PROCESS */

:root {
    --navy: #172B59;
    --blue: #0071D9;
    --main-blue: #CCE4FD;
    --blue-dark: #0071D9;
    --blue-light: #EAF4FD;
    --blue-pale: #F4F8FC;
    --orange: #E78342;
    --orange-light: #FFF3EB;
    --text: #1D2938;
    --muted: #687687;
    --line: #D7E4F0;
    --white: #FFFFFF;
    --page: #FFFFFF;
    --shadow: 0 6px 18px rgba(0, 65, 130, .08);
}

.ngp-page {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
    margin-left: calc(50% - 50vw);
    padding: 0 24px 36px;
    background: var(--page);
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
}

.ngp-header {
    width: 100%;
    margin-left: 0;
    min-height: 110px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    border-left: 6px solid #0071D9;
    background: var(--navy);
    color: var(--white);
    box-sizing: border-box;
}

.ngp-header-inner { padding: 10px 0 11px; }
.ngp-header h1 {
    margin: 0;
    color: var(--white);
    font-size: 27px;
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -.35px;
}
.ngp-header p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.90);
    font-size: 11px;
    line-height: 1.35;
}

.ngp-guide {
    width: 100%;
    margin: 20px 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.ngp-guide-card {
    min-width: 0;
    display: flex;
    gap: 14px;
    min-height: 78px;
    padding: 10px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid #0071D9;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(23,43,89,.045);
}

.ngp-guide-kicker {
    margin-bottom: 3px;
    color: var(--blue-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .85px;
}
.ngp-guide-card h2 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.12;
    font-weight: 700;
}
.ngp-guide-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}
.ngp-blue-key {
    display: inline-block;
    padding: 2px 7px;
    background: #0071D9;
    color: #ffffff;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1.2;
}

.ngp-container { position: relative; }
.ngp-container > input,
.ngp-container .toggle-substeps {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ngp-layout {
    width: 100%;
    display: grid;
    grid-template-columns: 410px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.ngp-process,
.ngp-kb {
    min-width: 0;
    height: min(820px, calc(100vh - 210px)) !important;
    max-height: calc(100vh - 210px) !important;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.ngp-process { display: flex; flex-direction: column; }
.ngp-process-header {
    min-height: 50px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--blue-dark);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}
.ngp-process-header-icon {
    width: 19px;
    height: 19px;
    display: inline-flex;
    color: var(--blue);
}
.ngp-process-header-icon svg { width: 100%; height: 100%; }

.ngp-process-scroll,
.ngp-kb-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #B7C8D7 transparent;
}

.ngp-process-scroll {
    overflow-y: scroll !important;
}
 .ngp-process-scroll {
    flex: 1;
    padding: 10px 12px;
}
.ngp-process-scroll::-webkit-scrollbar,
.ngp-kb-scroll::-webkit-scrollbar { width: 7px; }
.ngp-process-scroll::-webkit-scrollbar-track,
.ngp-kb-scroll::-webkit-scrollbar-track { background: transparent; }
.ngp-process-scroll::-webkit-scrollbar-thumb,
.ngp-kb-scroll::-webkit-scrollbar-thumb {
    background: #B7C8D7;
    border-radius: 10px;
}

.ngp-step,
.ngp-substep { cursor: pointer; user-select: none; }

.ngp-step {
    min-height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 5px 18px;
    margin: 0 0 6px;
    border: 1px solid var(--main-blue);
    border-radius: 12px;
    background: var(--main-blue);
    color: #000000;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 400;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ngp-step:hover,
.ngp-step.is-active,
.ngp-step.is-active:hover {
    background: #0071D9;
    border-color: #0071D9;
    color: var(--white);
    font-weight: 700;
}

/* Main step active color */
.ngp-process-scroll > .ngp-step.is-active,
.ngp-section > .ngp-step.is-active,
.ngp-process-scroll > .ngp-step.is-active:hover,
.ngp-section > .ngp-step.is-active:hover {
    background: #0071D9;
    border-color: #0071D9;
    color: var(--white);
}
.ngp-number {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 17px;
    font-weight: 400;
}
.ngp-step:hover .ngp-number,
.ngp-step.is-active .ngp-number {
    color: #ffffff;
    font-weight: 700;
}
.ngp-text { flex: 1; min-width: 0; }
.ngp-long { align-items: flex-start; }
.ngp-toggle,
.mini-plus {
    margin-left: auto;
    color: #0071D9;
    font-size: 21px;
    line-height: 1;
    font-weight: 400;
}
.ngp-step.is-active .ngp-toggle { color: var(--white); }

.ngp-substeps {
    display: none;
    margin: -1px 0 8px 8px;
    padding: 0 0 0 12px;
    border-left: 1px solid #D7E3EB;
}
.ngp-section > .toggle-substeps:checked ~ .ngp-substeps { display: block; }

.ngp-substep {
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    margin-bottom: 4px;
    color: #000000;
    background: var(--main-blue);
    border: 1px solid var(--main-blue);
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
}
.ngp-substep:hover,
.ngp-substep.is-active,
.ngp-substep.is-active:hover {
    background: #0071D9;
    color: var(--white);
    border-color: #0071D9;
    font-weight: 700;
}
.ngp-substep.is-active .mini-plus { color: var(--white); }

.ngp-nested {
    display: none;
    margin: 0 0 2px 12px;
    padding-left: 12px;
    border-left: 1px solid #D7E3EB;
}
.mini-collapsible > .toggle-substeps:checked ~ .ngp-nested { display: block; }
.mini-toggle .mini-plus { color: var(--white); }

.ngp-kb {
    display: flex;
    flex-direction: column;
    background: var(--white);
}
/* =========================================================
   NGP — KB HEADER / TITLE STANDARD
   ========================================================= */

.ngp-kb-header {
    min-height: 88px !important;
    padding: 18px 22px 16px !important;
    border-bottom: 1px solid var(--line) !important;
    position: relative;
    box-sizing: border-box !important;
}

/* Remove orange accent line under every KB title */
.ngp-kb-header::after {
    display: none !important;
}

.ngp-kb-header .ngp-label {
    display: block !important;
    margin: 0 0 7px !important;
    color: var(--blue-dark) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .85px !important;
    line-height: 1.1 !important;
}

.ngp-kb-header .title {
    display: none;
    margin: 0 !important;
    color: var(--navy) !important;
    font-size: 27px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
}
.ngp-kb-header .ngp-label {
    margin-bottom: 3px;
    color: var(--blue-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .85px;
}
.ngp-kb-header .title {
    display: none;
    margin: 0;
    color: var(--navy);
    font-size: 27px;
    line-height: 1.15;
    font-weight: 700;
}
.ngp-kb-badge { display: none; }

.ngp-kb-scroll {
    flex: 1;
    min-height: 0;
    padding: 18px 20px 28px !important;
    overflow-y: auto;
    box-sizing: border-box !important;
}

/* =========================================================
   NGP — UNIVERSAL KB CONTENT SPACING
   Applies to all current and future Knowledge Base articles.
   ========================================================= */

.ngp-kb-scroll .ngp-kb-fetched-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
}

.ngp-kb-scroll .ngp-kb-fetched-content > article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ngp-kb-scroll .ngp-kb-fetched-content > article > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ngp-kb-scroll .ngp-kb-fetched-content img {
    display: block;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.ngp-kb-scroll .ngp-kb-fetched-content table,
.ngp-kb-scroll .ngp-kb-fetched-content iframe,
.ngp-kb-scroll .ngp-kb-fetched-content video {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent imported Support Center article wrappers
   from creating edge-to-edge content. */
.ngp-kb-scroll .ngp-kb-fetched-content .container,
.ngp-kb-scroll .ngp-kb-fetched-content .row,
.ngp-kb-scroll .ngp-kb-fetched-content .item-page,
.ngp-kb-scroll .ngp-kb-fetched-content .article-content,
.ngp-kb-scroll .ngp-kb-fetched-content .content {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Keep text elements inside the same KB boundary. */
.ngp-kb-scroll .ngp-kb-fetched-content p,
.ngp-kb-scroll .ngp-kb-fetched-content h1,
.ngp-kb-scroll .ngp-kb-fetched-content h2,
.ngp-kb-scroll .ngp-kb-fetched-content h3,
.ngp-kb-scroll .ngp-kb-fetched-content h4,
.ngp-kb-scroll .ngp-kb-fetched-content h5,
.ngp-kb-scroll .ngp-kb-fetched-content h6,
.ngp-kb-scroll .ngp-kb-fetched-content ul,
.ngp-kb-scroll .ngp-kb-fetched-content ol {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.kb-frame {
    display: none;
    width: 100%;
    min-width: 0;
}
.kb-frame iframe {
    display: block;
    width: 100%;
    min-height: 590px;
    height: 100%;
    border: 0;
    background: var(--white);
}

#step-lts:checked ~ .ngp-layout .title-lts,
#step-create-company:checked ~ .ngp-layout .title-create-company,
#step-company-associate:checked ~ .ngp-layout .title-company-associate,
#step-agency-associate:checked ~ .ngp-layout .title-agency-associate,
#step-create-proposal:checked ~ .ngp-layout .title-create-proposal,
#step-generate-products:checked ~ .ngp-layout .title-generate-products,
#step-signature:checked ~ .ngp-layout .title-signature,
#step-intake:checked ~ .ngp-layout .title-intake,
#step-deck-card:checked ~ .ngp-layout .title-deck-card,
#step-folders:checked ~ .ngp-layout .title-folders,
#step-talk-chat:checked ~ .ngp-layout .title-talk-chat,
#step-naming:checked ~ .ngp-layout .title-naming,
#step-drew:checked ~ .ngp-layout .title-drew,
#step-products:checked ~ .ngp-layout .title-products,
#step-carrier:checked ~ .ngp-layout .title-carrier,
#step-amaze:checked ~ .ngp-layout .title-amaze,
#step-boston:checked ~ .ngp-layout .title-boston,
#step-breckpoint:checked ~ .ngp-layout .title-breckpoint,
#step-companion:checked ~ .ngp-layout .title-companion,
#step-transamerica:checked ~ .ngp-layout .title-transamerica,
#step-trio:checked ~ .ngp-layout .title-trio,
#step-enrollment:checked ~ .ngp-layout .title-enrollment,
#step-census:checked ~ .ngp-layout .title-census,
#step-enrollment-main:checked ~ .ngp-layout .title-enrollment-main,
#step-internal:checked ~ .ngp-layout .title-internal,
#step-auto:checked ~ .ngp-layout .title-auto,
#step-traditional:checked ~ .ngp-layout .title-traditional,
#step-broker:checked ~ .ngp-layout .title-broker,
#step-hr:checked ~ .ngp-layout .title-hr,
#step-self-enroll:checked ~ .ngp-layout .title-self-enroll,
#step-external:checked ~ .ngp-layout .title-external,
#step-send-tc:checked ~ .ngp-layout .title-send-tc { display: block; }

#step-lts:checked ~ .ngp-layout .frame-lts,
#step-create-company:checked ~ .ngp-layout .frame-create-company,
#step-company-associate:checked ~ .ngp-layout .frame-company-associate,
#step-agency-associate:checked ~ .ngp-layout .frame-agency-associate,
#step-create-proposal:checked ~ .ngp-layout .frame-create-proposal,
#step-generate-products:checked ~ .ngp-layout .frame-generate-products,
#step-signature:checked ~ .ngp-layout .frame-signature,
#step-intake:checked ~ .ngp-layout .frame-intake,
#step-deck-card:checked ~ .ngp-layout .frame-deck-card,
#step-folders:checked ~ .ngp-layout .frame-folders,
#step-talk-chat:checked ~ .ngp-layout .frame-talk-chat,
#step-naming:checked ~ .ngp-layout .frame-naming,
#step-drew:checked ~ .ngp-layout .frame-drew,
#step-products:checked ~ .ngp-layout .frame-products,
#step-carrier:checked ~ .ngp-layout .frame-carrier,
#step-amaze:checked ~ .ngp-layout .frame-amaze,
#step-boston:checked ~ .ngp-layout .frame-boston,
#step-breckpoint:checked ~ .ngp-layout .frame-breckpoint,
#step-companion:checked ~ .ngp-layout .frame-companion,
#step-transamerica:checked ~ .ngp-layout .frame-transamerica,
#step-trio:checked ~ .ngp-layout .frame-trio,
#step-enrollment:checked ~ .ngp-layout .frame-enrollment,
#step-census:checked ~ .ngp-layout .frame-census,
#step-enrollment-main:checked ~ .ngp-layout .frame-enrollment-main,
#step-internal:checked ~ .ngp-layout .frame-internal,
#step-auto:checked ~ .ngp-layout .frame-auto,
#step-traditional:checked ~ .ngp-layout .frame-traditional,
#step-broker:checked ~ .ngp-layout .frame-broker,
#step-hr:checked ~ .ngp-layout .frame-hr,
#step-self-enroll:checked ~ .ngp-layout .frame-self-enroll,
#step-external:checked ~ .ngp-layout .frame-external,
#step-send-tc:checked ~ .ngp-layout .frame-send-tc { display: block; }

.kb-overview {
    padding: 22px;
    background: var(--blue-pale);
    border: 1px solid #DCE8F1;
    border-left: 5px solid #0071D9;
    border-radius: 9px;
}
.kb-overview-kicker {
    color: var(--blue-dark);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
}
.kb-overview h3 {
    margin: 4px 0 7px;
    color: var(--navy);
    font-size: 22px;
}
.kb-overview-intro,
.kb-overview-note {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}
.kb-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin: 18px 0;
}
.kb-overview-card {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.kb-overview-number {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--blue);
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
}
.kb-overview-card h4 {
    margin: 0 0 4px;
    color: var(--navy);
    font-size: 15px;
}
.kb-overview-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}
.kb-definition {
    padding: 22px;
    background: var(--blue-pale);
    border: 1px solid #DCE8F1;
    border-left: 5px solid #0071D9;
    border-radius: 9px;
}
.kb-intro {
    margin: 0 0 18px;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.5;
}
.kb-role {
    padding: 14px 0;
    border-top: 1px solid #D8E2EA;
}
.kb-role h3 {
    margin: 0 0 4px;
    color: var(--blue-dark);
    font-size: 18px;
}
.kb-role p {
    margin: 0;
    color: #526375;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .ngp-guide { grid-template-columns: 1fr; }
    .ngp-layout { grid-template-columns: 330px minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 760px) {
    .ngp-page { padding: 0 14px 28px; }
    .ngp-header { width: calc(100% + 28px); margin-left: -14px; padding: 0 20px; }
    .ngp-header h1 { font-size: 23px; }
    .ngp-layout { grid-template-columns: 1fr; }
    .ngp-process, .ngp-kb { height: 620px; }
    .kb-overview-grid { grid-template-columns: 1fr; }
}
.ngp-guide > div::before,
.ngp-guide > div::after {
    display: none !important;
    content: none !important;
}

/* END TITLE: NEW GROUP PROCESS */

/* =========================================
   NEW GROUP PROCESS — SINGLE SELECTION
   ========================================= */

/* Only the item most recently clicked stays blue. */
.ngp-step.is-selected,
.ngp-substep.is-selected {
    background: #0071D9 !important;
    border-color: #0071D9 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ngp-step.is-selected .ngp-number,
.ngp-step.is-selected .ngp-toggle,
.ngp-substep.is-selected .mini-plus {
    color: #FFFFFF !important;
}

/* Non-selected items remain light blue. */
.ngp-step:not(.is-selected),
.ngp-substep:not(.is-selected) {
    background: var(--main-blue) !important;
    border-color: var(--main-blue) !important;
    color: #000000 !important;
    font-weight: 400 !important;
}

.ngp-number {
    color: #000000 !important;
    font-weight: 400 !important;
}

/* Hover may temporarily look blue, but does not create a second selection. */
.ngp-step:not(.is-selected):hover,
.ngp-substep:not(.is-selected):hover {
    background: #0071D9 !important;
    border-color: #0071D9 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ngp-step:not(.is-selected):hover .ngp-number,
.ngp-step:not(.is-selected):hover .ngp-toggle,
.ngp-substep:not(.is-selected):hover .mini-plus {
    color: #FFFFFF !important;
}

/* =========================================
   EXACT PROCESS LABEL / SPACING REFINEMENTS
   ========================================= */

.ngp-process .ngp-substep {
    line-height: 1.25;
}

.ngp-process .ngp-long .ngp-text {
    line-height: 1.2;
}

/* Step 04 — spacing inside the main rectangle only. */
#open-folders + .ngp-main-toggle {
    align-items: center !important;
    padding: 5px 18px !important;
    min-height: 60px !important;
}

/* Step 04 hierarchy spacing. */
#open-folders:checked + .ngp-step + .ngp-substeps {
    padding-left: 20px !important;
}

#open-main-folder:checked + .ngp-substep + .ngp-nested {
    padding-left: 24px !important;
}

#open-product-folders:checked + .ngp-substep + .ngp-nested {
    padding-left: 24px !important;
}

/* =========================================
   STEP 04 — exact internal spacing
   ========================================= */
#open-folders + .ngp-main-toggle {
    align-items: center !important;
    padding: 5px 18px !important;
    min-height: 60px !important;
}

/* Exact wording/spacing previously requested */
.ngp-process .ngp-substep {
    line-height: 1.25;
}

.ngp-process .ngp-long .ngp-text {
    line-height: 1.2;
}

/* STEP 04 — spacing inside the main rectangle only */
#open-folders + .ngp-main-toggle {
    align-items: center !important;
    padding: 5px 18px !important;
    min-height: 60px !important;
}

/* =========================================================
   NEW GROUP PROCESS — PERSISTENT SINGLE SELECTION
   ========================================================= */

/* Base state */
.ngp-process .ngp-step,
.ngp-process .ngp-substep {
    background: var(--main-blue) !important;
    border-color: var(--main-blue) !important;
    color: #000000 !important;
    font-weight: 400 !important;
}

/* LAST CLICKED ITEM STAYS BLUE */
.ngp-process .ngp-step.is-selected,
.ngp-process .ngp-substep.is-selected {
    background: #0071D9 !important;
    border-color: #0071D9 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.ngp-process .ngp-step.is-selected .ngp-number,
.ngp-process .ngp-step.is-selected .ngp-toggle,
.ngp-process .ngp-substep.is-selected .mini-plus {
    color: #FFFFFF !important;
}

/* Hover does not create or remove selection. */
.ngp-process .ngp-step:not(.is-selected):hover,
.ngp-process .ngp-substep:not(.is-selected):hover {
    background: #0071D9 !important;
    border-color: #0071D9 !important;
    color: #FFFFFF !important;
}

.ngp-process .ngp-step:not(.is-selected):hover .ngp-number,
.ngp-process .ngp-step:not(.is-selected):hover .ngp-toggle,
.ngp-process .ngp-substep:not(.is-selected):hover .mini-plus {
    color: #FFFFFF !important;
}

/* Exact requested label spacing */
.ngp-process .ngp-substep {
    line-height: 1.25;
}

.ngp-process .ngp-long .ngp-text {
    line-height: 1.2;
}

/* STEP 04 - spacing inside the main rectangle only */
#open-folders + .ngp-main-toggle {
    align-items: center !important;
    padding: 5px 18px !important;
    min-height: 60px !important;
}

/* Step 04 hierarchy spacing */
#open-folders:checked + .ngp-step + .ngp-substeps {
    padding-left: 20px !important;
}

#open-main-folder:checked + .ngp-substep + .ngp-nested {
    padding-left: 24px !important;
}

#open-product-folders:checked + .ngp-substep + .ngp-nested {
    padding-left: 24px !important;
}

/* =========================================================
   END NEW GROUP PROCESS — PERSISTENT SINGLE SELECTION
   ========================================================= */


/* =========================================================
   NEW GROUP PROCESS — COMPLETE STEP / FRAME COVERAGE
   Covers substeps whose frame/title selectors were missing
   from the external stylesheet.
   ========================================================= */

#step-intake-er:checked ~ .ngp-layout .title-intake-er,
#step-intake-sicmmp:checked ~ .ngp-layout .title-intake-sicmmp,
#step-deck-card-guide:checked ~ .ngp-layout .title-deck-card-guide,
#step-main-folder:checked ~ .ngp-layout .title-main-folder,
#step-product-folders:checked ~ .ngp-layout .title-product-folders,
#step-boston-folder:checked ~ .ngp-layout .title-boston-folder,
#step-breckpoint-folder:checked ~ .ngp-layout .title-breckpoint-folder,
#step-companion-folder:checked ~ .ngp-layout .title-companion-folder,
#step-sicmmp-folder:checked ~ .ngp-layout .title-sicmmp-folder,
#step-transamerica-folder:checked ~ .ngp-layout .title-transamerica-folder {
    display: block !important;
}

#step-intake-er:checked ~ .ngp-layout .frame-intake-er,
#step-intake-sicmmp:checked ~ .ngp-layout .frame-intake-sicmmp,
#step-deck-card-guide:checked ~ .ngp-layout .frame-deck-card-guide,
#step-main-folder:checked ~ .ngp-layout .frame-main-folder,
#step-product-folders:checked ~ .ngp-layout .frame-product-folders,
#step-boston-folder:checked ~ .ngp-layout .frame-boston-folder,
#step-breckpoint-folder:checked ~ .ngp-layout .frame-breckpoint-folder,
#step-companion-folder:checked ~ .ngp-layout .frame-companion-folder,
#step-sicmmp-folder:checked ~ .ngp-layout .frame-sicmmp-folder,
#step-transamerica-folder:checked ~ .ngp-layout .frame-transamerica-folder {
    display: block !important;
}

/* =========================================================
   NGP — SCROLL / POSITION STABILITY
   Prevents the page itself from moving when a label is clicked.
   The two inner panels remain independently scrollable.
   ========================================================= */

html,
body {
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
}

.ngp-page,
.ngp-container,
.ngp-layout,
.ngp-process,
.ngp-kb,
.ngp-process-scroll,
.ngp-kb-scroll {
    scroll-behavior: auto !important;
    overflow-anchor: none !important;
}

.ngp-process-scroll,
.ngp-kb-scroll {
    overscroll-behavior: contain !important;
}

/* No visual animation on the process rows themselves. */
.ngp-step,
.ngp-substep {
    transition: none !important;
}
/* =========================================================
   NGP — KEEP PROCESS PANEL INSIDE VIEWPORT
   ========================================================= */

.ngp-process-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}


/* =========================================================
   NGP — KEEP FETCHED KB CONTENT AT THE TOP
   ========================================================= */

.ngp-kb-scroll .ngp-kb-fetched-content {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: initial !important;
    align-content: initial !important;
    justify-content: initial !important;
    box-sizing: border-box !important;
}

.ngp-kb-scroll .ngp-kb-fetched-content > article {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ngp-kb-scroll .ngp-kb-fetched-content > article > * {
    position: static !important;
    box-sizing: border-box !important;
}

/* =========================================================
   NGP — UNIVERSAL KB DISPLAY MODEL
   Applies the same visual model to every fetched KB.
   ========================================================= */

/* The KB body is the scrolling area */
.ngp-kb-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px 28px !important;
    box-sizing: border-box !important;
}

/* Main fetched KB wrapper */
.ngp-kb-scroll .ngp-kb-fetched-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Article itself */
.ngp-kb-scroll .ngp-kb-fetched-content > article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Reset common Support Center / Bootstrap layout wrappers */
.ngp-kb-scroll .ngp-kb-fetched-content .container,
.ngp-kb-scroll .ngp-kb-fetched-content .container-fluid,
.ngp-kb-scroll .ngp-kb-fetched-content .row,
.ngp-kb-scroll .ngp-kb-fetched-content .item-page,
.ngp-kb-scroll .ngp-kb-fetched-content .article-content,
.ngp-kb-scroll .ngp-kb-fetched-content .content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Prevent Bootstrap .row negative margins from escaping
   the 20px KB boundary */
.ngp-kb-scroll .ngp-kb-fetched-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Keep every direct section inside the same width */
.ngp-kb-scroll .ngp-kb-fetched-content > article > *,
.ngp-kb-scroll .ngp-kb-fetched-content > article > * > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Text stays inside the KB boundary */
.ngp-kb-scroll .ngp-kb-fetched-content p,
.ngp-kb-scroll .ngp-kb-fetched-content h1,
.ngp-kb-scroll .ngp-kb-fetched-content h2,
.ngp-kb-scroll .ngp-kb-fetched-content h3,
.ngp-kb-scroll .ngp-kb-fetched-content h4,
.ngp-kb-scroll .ngp-kb-fetched-content h5,
.ngp-kb-scroll .ngp-kb-fetched-content h6,
.ngp-kb-scroll .ngp-kb-fetched-content ul,
.ngp-kb-scroll .ngp-kb-fetched-content ol,
.ngp-kb-scroll .ngp-kb-fetched-content li {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
}

/* Images/screenshots stay inside the same left/right boundary */
.ngp-kb-scroll .ngp-kb-fetched-content img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* Wide content must never force the whole page wider */
.ngp-kb-scroll .ngp-kb-fetched-content table,
.ngp-kb-scroll .ngp-kb-fetched-content iframe,
.ngp-kb-scroll .ngp-kb-fetched-content video,
.ngp-kb-scroll .ngp-kb-fetched-content pre,
.ngp-kb-scroll .ngp-kb-fetched-content code {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Never allow imported article content to create
   horizontal overflow inside the KB */
.ngp-kb-scroll .ngp-kb-fetched-content {
    overflow-x: hidden !important;
}


/* =========================================================
   KB SCROLLBAR — SAME MODEL FOR EVERY ARTICLE
   ========================================================= */

.ngp-kb-scroll::-webkit-scrollbar {
    width: 7px !important;
}

.ngp-kb-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

.ngp-kb-scroll::-webkit-scrollbar-thumb {
    background: #B7C8D7 !important;
    border-radius: 10px !important;
}

.ngp-kb-scroll {
    scrollbar-width: thin !important;
    scrollbar-color: #B7C8D7 transparent !important;
}

/* =========================================================
   NGP — REMOVE UNWANTED HORIZONTAL PAGE SCROLL
   Keep vertical page scrolling and both internal scrollbars.
   ========================================================= */

html,
body {
    overflow-x: hidden !important;
}

.ngp-page {
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* =========================================================
   NGP — ONLY CURRENTLY SELECTED ITEM STAYS BLUE
   ========================================================= */

.ngp-process .ngp-step:not(.is-selected):hover,
.ngp-process .ngp-substep:not(.is-selected):hover {
    background: var(--main-blue) !important;
    border-color: var(--main-blue) !important;
    color: #000000 !important;
    font-weight: 400 !important;
}

.ngp-process .ngp-step:not(.is-selected):hover .ngp-number,
.ngp-process .ngp-step:not(.is-selected):hover .ngp-toggle,
.ngp-process .ngp-substep:not(.is-selected):hover .mini-plus {
    color: inherit !important;
}

.ngp-process .ngp-step.is-selected,
.ngp-process .ngp-substep.is-selected {
    background: #0071D9 !important;
    border-color: #0071D9 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

/* =========================================================
   NEW GROUP PROCESS - GETTING STARTED LANDING ADDITION
   ORIGINAL USER.CSS ABOVE IS UNCHANGED
   ========================================================= */
/* =========================================================
   NGP — GETTING STARTED LANDING PAGE
   Scoped only to the New Group Process landing.
   ========================================================= */

/* Show the landing only when no process step is selected. */
.ngp-kb-landing {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

.ngp-container:has(input[name="ngp-active"]:checked) .ngp-kb-landing {
    display: none !important;
}

/* Hide the old step-title header on the initial landing screen. */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-header {
    display: none !important;
}

.ngp-container:has(input[name="ngp-active"]:checked) .ngp-kb-header {
    display: block !important;
}

/* Landing title — sits at the very top of the right panel. */
.ngp-kb-landing-title {
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.ngp-kb-landing-title span {
    display: block !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #6b7280 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

.ngp-kb-landing-title h2 {
    margin: 0 !important;
    padding: 0 !important;
    color: #4b4b4b !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 31px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
}

/* Before You Begin */
.ngp-kb-landing-before {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 0 20px !important;
    padding: 13px 15px !important;
    background: #fff8f2 !important;
    border: 1px solid #f3d6bd !important;
    border-left: 4px solid #f28c28 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.ngp-kb-landing-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 25px !important;
    width: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #f28c28 !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.ngp-kb-landing-before h3,
.ngp-kb-landing-about h3,
.ngp-kb-landing-flow-title h3 {
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: #555 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 700 !important;
}

.ngp-kb-landing-before h3 {
    font-size: 19px !important;
    line-height: 1.2 !important;
}

.ngp-kb-landing-before p,
.ngp-kb-landing-about p {
    margin: 0 0 8px !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.ngp-kb-landing-before p:last-child,
.ngp-kb-landing-about p:last-child {
    margin-bottom: 0 !important;
}

/* LTS image + About the LTS Portal */
.ngp-kb-landing-intro {
    display: grid !important;
    grid-template-columns: minmax(280px, 42%) minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: center !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

.ngp-kb-landing-image {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ngp-kb-landing-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #d9e2ec !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
}

.ngp-kb-landing-about {
    margin: 0 !important;
    padding: 0 !important;
}

.ngp-kb-landing-about h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

/* Process flow */
.ngp-kb-landing-flow-title {
    margin: 0 0 10px !important;
    padding: 0 !important;
}

.ngp-kb-landing-flow-title h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

.ngp-kb-landing-flow {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ngp-kb-landing-card {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    background: #fff !important;
    border: 1px solid #d7e3ef !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.ngp-kb-landing-number {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    margin: 0 0 8px !important;
    border-radius: 50% !important;
    background: #e7f1ff !important;
    color: #1261c9 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.ngp-kb-landing-card h4 {
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #123d75 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.ngp-kb-landing-card p {
    margin: 0 !important;
    padding: 0 !important;
    color: #666 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

@media (max-width: 1000px) {
    .ngp-kb-landing-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .ngp-kb-landing-title h2 {
        font-size: 25px !important;
    }

    .ngp-kb-landing-intro {
        grid-template-columns: 1fr !important;
    }

    .ngp-kb-landing-flow {
        grid-template-columns: 1fr !important;
    }
}

/* END - NEW GROUP PROCESS GETTING STARTED LANDING ADDITION */

/* =========================================================
   TITLE: NEW GROUP PROCESS - GETTING STARTED DESIGN MATCH
   APPENDED OVERRIDES ONLY; ALL PREVIOUS CSS PRESERVED
   ========================================================= */
.ngp-kb-landing{display:block!important;color:#06146d!important;font-family:Arial,Helvetica,sans-serif!important}
.ngp-kb-landing-title{margin:0!important;padding:14px 20px 13px!important;border-bottom:1px solid #d2e4f6!important}
.ngp-kb-landing-title span{display:none!important}
.ngp-kb-landing-title h2{color:#07116b!important;font-size:clamp(23px,2.15vw,32px)!important;line-height:1.2!important;font-weight:750!important;margin:0!important}
.ngp-kb-landing-body{padding:12px 16px 14px!important}
.ngp-kb-landing-before{display:flex!important;align-items:center!important;gap:17px!important;background:#fff9f5!important;border:0!important;border-radius:10px!important;padding:16px 18px!important;margin:0 0 16px!important}
.ngp-kb-landing-icon{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 53px!important;width:53px!important;height:53px!important;border-radius:50%!important;background:#ff8200!important;color:#fff!important;font-size:36px!important;font-weight:400!important}
.ngp-kb-landing-before-copy{border-left:2px solid #ff8200!important;padding-left:18px!important}
.ngp-kb-landing-before h3{font-size:22px!important;color:#07116b!important;margin:0 0 4px!important;line-height:1.15!important}
.ngp-kb-landing-before p{font-size:15px!important;color:#254f91!important;line-height:1.45!important;margin:0!important}
.ngp-kb-landing-intro{display:grid!important;grid-template-columns:1.5fr 1fr!important;gap:16px!important;align-items:stretch!important;margin:0 0 16px!important}
.ngp-kb-landing-image{border:2px solid #0875ff!important;border-radius:9px!important;overflow:hidden!important;background:#fff!important;display:flex!important;align-items:center!important}
.ngp-kb-landing-image img{width:100%!important;height:100%!important;max-height:320px!important;object-fit:contain!important;display:block!important}
.ngp-kb-landing-about{border:0!important;border-radius:10px!important;background:#eaf5ff!important;padding:24px 26px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
.ngp-kb-landing-about h3{color:#07116b!important;font-size:23px!important;line-height:1.2!important;margin:0 0 12px!important}
.ngp-kb-landing-about p{color:#244b91!important;font-size:16px!important;line-height:1.48!important;margin:0 0 12px!important}
.ngp-kb-landing-about p:last-child{margin-bottom:0!important}
.ngp-kb-landing-flow-title{margin:0 0 10px!important;border:0!important}
.ngp-kb-landing-flow-title h3{color:#07116b!important;font-size:22px!important;line-height:1.2!important;margin:0!important;padding:0!important;border:0!important;display:flex!important;align-items:center!important;gap:15px!important}
.ngp-kb-landing-flow-title h3:after{content:"";height:1px;background:#cbdff1;flex:1}
.ngp-kb-landing-flow{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:13px!important;margin:0!important}
.ngp-kb-landing-card{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;background:#eaf5ff!important;border:0!important;border-radius:10px!important;padding:15px 10px!important;min-height:150px!important}
.ngp-kb-landing-card:not(:last-child):after{content:"❯";position:absolute;right:-17px;top:43%;z-index:2;color:#ff8200;font-size:23px;font-weight:900}
.ngp-kb-landing-symbol{display:flex;align-items:center;justify-content:center;color:#0069f6;background:#dceeff;border-radius:50%;width:49px;height:49px;font-size:29px;font-weight:800;margin-bottom:8px}
.ngp-kb-landing-card h4{color:#06146d!important;font-size:14px!important;line-height:1.2!important;font-weight:700!important;margin:0 0 7px!important}
.ngp-kb-landing-card p{color:#254b90!important;font-size:12px!important;line-height:1.4!important;margin:0!important}
@media(max-width:1050px){.ngp-kb-landing-flow{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ngp-kb-landing-card:after{display:none!important}.ngp-kb-landing-intro{grid-template-columns:1.2fr 1fr!important}.ngp-kb-landing-about{padding:16px!important}.ngp-kb-landing-about p{font-size:14px!important}}
@media(max-width:700px){.ngp-kb-landing-intro{grid-template-columns:1fr!important}.ngp-kb-landing-flow{grid-template-columns:repeat(2,minmax(0,1fr))!important}.ngp-kb-landing-before{align-items:flex-start!important}.ngp-kb-landing-before p{font-size:13px!important}.ngp-kb-landing-about h3{font-size:20px!important}}
/* END TITLE: NEW GROUP PROCESS - GETTING STARTED DESIGN MATCH */


/* =========================================================
   TITLE: NEW GROUP PROCESS - KB EDITOR SAFE ICONS
   APPENDED ONLY - EXISTING CSS ABOVE IS UNCHANGED
   ========================================================= */
.ngp-kb-landing-icon,.ngp-kb-landing-symbol{font-size:0!important}
.ngp-kb-landing-icon:before,.ngp-kb-landing-symbol:before{content:"";display:block!important;background:#0069f6!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;-webkit-mask-position:center!important;mask-position:center!important;-webkit-mask-size:contain!important;mask-size:contain!important}
.ngp-kb-landing-icon:before{width:31px!important;height:31px!important;background:#fff!important;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6M10 17h4M8.2 14.7C6.8 13.6 6 12 6 10.2A6 6 0 0 1 18 10.2c0 1.8-.8 3.4-2.2 4.5-.8.7-1.3 1.3-1.5 2.3H9.7c-.2-1-.7-1.6-1.5-2.3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6M10 17h4M8.2 14.7C6.8 13.6 6 12 6 10.2A6 6 0 0 1 18 10.2c0 1.8-.8 3.4-2.2 4.5-.8.7-1.3 1.3-1.5 2.3H9.7c-.2-1-.7-1.6-1.5-2.3Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.ngp-kb-landing-symbol:before{width:31px!important;height:31px!important}
.ngp-icon-group:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='black'/%3E%3Ccircle cx='17' cy='9' r='2.5' fill='black'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6H3Zm11-1.2c.4-2 1.6-3.7 3.4-4.7 2.2.2 3.9 2.1 3.9 4.4v.5H14Z' fill='black'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3' fill='black'/%3E%3Ccircle cx='17' cy='9' r='2.5' fill='black'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6H3Zm11-1.2c.4-2 1.6-3.7 3.4-4.7 2.2.2 3.9 2.1 3.9 4.4v.5H14Z' fill='black'/%3E%3C/svg%3E")!important}
.ngp-icon-form:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l4 4v16H6V2Zm8 2v4h4M9 12h7M9 16h7M9 8h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l4 4v16H6V2Zm8 2v4h4M9 12h7M9 16h7M9 8h2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.ngp-icon-folder:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6.5A2.5 2.5 0 0 1 4.5 4H10l2 2h7.5A2.5 2.5 0 0 1 22 8.5v8A3.5 3.5 0 0 1 18.5 20h-13A3.5 3.5 0 0 1 2 16.5v-10Z' fill='black'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6.5A2.5 2.5 0 0 1 4.5 4H10l2 2h7.5A2.5 2.5 0 0 1 22 8.5v8A3.5 3.5 0 0 1 18.5 20h-13A3.5 3.5 0 0 1 2 16.5v-10Z' fill='black'/%3E%3C/svg%3E")!important}
.ngp-icon-check:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='black'/%3E%3Cpath d='m7.5 12 3 3 6-7' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='black'/%3E%3Cpath d='m7.5 12 3 3 6-7' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
.ngp-icon-chat:before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h11a4 4 0 0 1 4 4v3a4 4 0 0 1-4 4H9l-5 4v-4a4 4 0 0 1-2-3.5V8a4 4 0 0 1 2-4Z' fill='black'/%3E%3Ccircle cx='8' cy='9.5' r='1' fill='white'/%3E%3Ccircle cx='11.5' cy='9.5' r='1' fill='white'/%3E%3Ccircle cx='15' cy='9.5' r='1' fill='white'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h11a4 4 0 0 1 4 4v3a4 4 0 0 1-4 4H9l-5 4v-4a4 4 0 0 1-2-3.5V8a4 4 0 0 1 2-4Z' fill='black'/%3E%3Ccircle cx='8' cy='9.5' r='1' fill='white'/%3E%3Ccircle cx='11.5' cy='9.5' r='1' fill='white'/%3E%3Ccircle cx='15' cy='9.5' r='1' fill='white'/%3E%3C/svg%3E")!important}
/* END TITLE: NEW GROUP PROCESS - KB EDITOR SAFE ICONS */


/* =========================================================
   TITLE: NEW GROUP PROCESS - GETTING STARTED V2 COMPACT FIT
   APPENDED ONLY - ALL EXISTING CSS ABOVE REMAINS UNCHANGED
   ========================================================= */

/* Initial landing state only: maximize usable space so the
   complete Getting Started view is visible without scrolling. */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-scroll {
    padding: 0 !important;
    overflow-y: hidden !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Compact title */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-title {
    flex: 0 0 auto !important;
    padding: 10px 16px 9px !important;
    margin: 0 !important;
    border-bottom: 1px solid #d7e7f5 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-title h2 {
    font-size: clamp(24px, 2vw, 29px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.25px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 9px 14px 11px !important;
    box-sizing: border-box !important;
}

/* Smaller Before You Begin portion */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-before {
    gap: 11px !important;
    padding: 8px 12px !important;
    margin: 0 0 9px !important;
    border: 1px solid #f8dcc5 !important;
    border-left: 3px solid #ff8200 !important;
    border-radius: 8px !important;
    background: #fff9f5 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-icon {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-icon:before {
    width: 23px !important;
    height: 23px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-before-copy {
    padding-left: 11px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-before h3 {
    margin: 0 0 2px !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-before p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

/* Larger LTS image + upgraded About panel */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-intro {
    grid-template-columns: minmax(0, 1.85fr) minmax(290px, 0.95fr) !important;
    gap: 13px !important;
    height: 205px !important;
    min-height: 205px !important;
    margin: 0 0 9px !important;
    align-items: stretch !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image {
    height: 205px !important;
    min-height: 205px !important;
    border: 2px solid #0a78f4 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 92, 184, 0.08) !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about {
    position: relative !important;
    min-width: 0 !important;
    height: 205px !important;
    padding: 14px 16px 13px 18px !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    background: linear-gradient(135deg, #eef8ff 0%, #f8fbff 100%) !important;
    border: 1px solid #d5e9fa !important;
    border-left: 4px solid #0071d9 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(0, 83, 166, 0.06) !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about:before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 0 0 0 72px !important;
    background: rgba(0, 113, 217, 0.06) !important;
    pointer-events: none !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about h3 {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 8px !important;
    padding: 0 0 7px !important;
    color: #07116b !important;
    font-size: 20px !important;
    line-height: 1.15 !important;
    border-bottom: 1px solid #cfe3f6 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about p {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 0 6px !important;
    color: #244b91 !important;
    font-size: 12.8px !important;
    line-height: 1.36 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about p:last-child {
    margin: 3px 0 0 !important;
    padding: 7px 9px !important;
    color: #123d75 !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid #d7e8f7 !important;
    border-radius: 7px !important;
}

/* Compact process flow so all five cards are visible immediately */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow-title {
    margin: 0 0 6px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow-title h3 {
    font-size: 19px !important;
    line-height: 1.15 !important;
    gap: 10px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow {
    gap: 10px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card {
    min-height: 124px !important;
    padding: 9px 7px 8px !important;
    border: 1px solid #d7e9f8 !important;
    border-radius: 9px !important;
    background: linear-gradient(180deg, #edf7ff 0%, #e6f3ff 100%) !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card:not(:last-child):after {
    right: -15px !important;
    top: 42% !important;
    font-size: 19px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-symbol {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 5px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-symbol:before {
    width: 25px !important;
    height: 25px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card h4 {
    margin: 0 0 4px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card p {
    font-size: 10.8px !important;
    line-height: 1.28 !important;
}

/* Keep landing usable on narrower screens; scrolling is restored there. */
@media (max-width: 1050px) {
    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-scroll {
        overflow-y: auto !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-intro {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image,
    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* END TITLE: NEW GROUP PROCESS - GETTING STARTED V2 COMPACT FIT */

/* =========================================================
   TITLE: NEW GROUP PROCESS - GETTING STARTED V3 FIT + IMAGE RESET
   APPENDED ONLY - ALL EXISTING CSS ABOVE REMAINS UNCHANGED
   ========================================================= */

/* Keep the LTS portal image at the original landing size/behavior.
   Only the process-flow area below is made more compact. */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-intro {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important;
    gap: 13px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 7px !important;
    align-items: stretch !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image {
    height: auto !important;
    min-height: 0 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image img {
    width: 100% !important;
    height: 100% !important;
    max-height: 320px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Keep the improved About LTS Portal panel, but let it size naturally
   with the original image row. */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about {
    height: auto !important;
    min-height: 0 !important;
    padding: 14px 16px 13px 18px !important;
    justify-content: center !important;
}

/* Make only the process area below slightly smaller so the full
   Getting Started view fits more comfortably in one screen. */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow-title {
    margin: 0 0 4px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow-title h3 {
    font-size: 17px !important;
    line-height: 1.1 !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow {
    gap: 8px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card {
    min-height: 96px !important;
    padding: 7px 6px 6px !important;
    border-radius: 8px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card:not(:last-child):after {
    right: -13px !important;
    top: 40% !important;
    font-size: 17px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-symbol {
    width: 31px !important;
    height: 31px !important;
    margin-bottom: 3px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-symbol:before {
    width: 21px !important;
    height: 21px !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card h4 {
    margin: 0 0 2px !important;
    font-size: 11.5px !important;
    line-height: 1.12 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card p {
    font-size: 9.8px !important;
    line-height: 1.22 !important;
}

/* On narrower screens, allow vertical scrolling rather than clipping. */
@media (max-width: 1050px) {
    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-scroll {
        overflow-y: auto !important;
    }
}

/* END TITLE: NEW GROUP PROCESS - GETTING STARTED V3 FIT + IMAGE RESET */

/* =========================================================
   SUPPORT CENTER - FINAL GLOBAL UI FIX
   Compact navigation + no split words + larger KB icons
   ========================================================= */


/* =========================================================
   1. SUPPORT CENTER NAVIGATION - MORE COMPACT
   Prevents the UI from looking overly zoomed-in
   ========================================================= */

body.com_jssupportticket .support-center-navigation {
    min-height: 46px !important;
    padding: 5px 4px !important;
    gap: 8px !important;
}

body.com_jssupportticket .support-center-nav-btn {
    height: 34px !important;
    min-width: 78px !important;
    padding: 0 13px !important;

    font-size: 13px !important;
    line-height: 1 !important;
}

body.com_jssupportticket .support-center-nav-back::before {
    margin-right: 6px !important;
    font-size: 17px !important;
}


/* Submit Ticket / My Tickets / Log Out bar */

body.com_jssupportticket #jsst-header {
    min-height: 52px !important;
    padding: 7px 8px !important;
    box-sizing: border-box !important;
}

body.com_jssupportticket #jsst-header .jsst-header-tab a.js-cp-menu-link {
    min-height: 38px !important;
    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 14px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}


/* Breadcrumb area */

body.com_jssupportticket #jsst-wrapper-top {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.com_jssupportticket #jsst-breadcrunbs {
    font-size: 13px !important;
    line-height: 1.3 !important;
}


/* Search area */

body.com_jssupportticket .js-ticket-top-search-wrp,
body.com_jssupportticket .js-ticket-knowledgebase-top-search-wrp {
    padding: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}

body.com_jssupportticket input.js-ticket-field-input {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;

    font-size: 13px !important;
    line-height: 38px !important;

    box-sizing: border-box !important;
}

body.com_jssupportticket button.js-search-button,
body.com_jssupportticket button.js-reset-button {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 18px !important;

    font-size: 13px !important;
    line-height: 1 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   2. CATEGORY / SUBCATEGORY TITLES
   WRAP BETWEEN WORDS ONLY
   NEVER SPLIT A WORD IN THE MIDDLE
   ========================================================= */

body.com_jssupportticket .js-ticket-category-name,
body.com_jssupportticket .js-ticket-category-title,
body.com_jssupportticket .js-ticket-subcat-data,
body.com_jssupportticket .js-ticket-subcat-data a,
body.com_jssupportticket .js-ticket-body-data-kb-text,
body.com_jssupportticket .js-ticket-body-data-kb-text a {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
}


/* Keep existing category title size */
body.com_jssupportticket .js-ticket-category-name {
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}


/* =========================================================
   3. CATEGORY / SUBCATEGORY ICONS - LARGER ICON ONLY
   Does NOT increase title/text size
   ========================================================= */

body.com_jssupportticket .js-ticket-kb-img,
body.com_jssupportticket .js-ticket-kb-dtl-img,
body.com_jssupportticket .js-ticket-category-download-logo img {
    width: auto !important;
    height: auto !important;

    max-width: 135px !important;
    max-height: 95px !important;

    object-fit: contain !important;
}


/* Keep icon centered inside its existing area */
body.com_jssupportticket .js-ticket-category-download-logo,
body.com_jssupportticket .js-ticket-category-kb-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   4. RESPONSIVE SAFETY
   ========================================================= */

@media (max-width: 900px) {

    body.com_jssupportticket #jsst-header .jsst-header-tab a.js-cp-menu-link {
        min-height: 36px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }

    body.com_jssupportticket .support-center-nav-btn {
        height: 34px !important;
        min-width: 74px !important;
        font-size: 12.5px !important;
    }

    body.com_jssupportticket .js-ticket-kb-img,
    body.com_jssupportticket .js-ticket-kb-dtl-img,
    body.com_jssupportticket .js-ticket-category-download-logo img {
        max-width: 120px !important;
        max-height: 88px !important;
    }
}

/* =========================================================
   NEW GROUP PROCESS — CROSS-PLATFORM RESPONSIVE STABILITY
   Add this block at the VERY BOTTOM of user.css.
   Purpose: consistent layout on Windows, macOS, iPhone/iPad,
   Android, Chrome, Edge, Firefox, and Safari.
   No JavaScript changes are required.
   ========================================================= */

/* ---------- 1) Shared rendering baseline ---------- */
.ngp-page,
.ngp-page *,
.ngp-page *::before,
.ngp-page *::after {
    box-sizing: border-box !important;
}

.ngp-page {
    font-family: Arial, Helvetica, sans-serif !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ngp-page img,
.ngp-kb-scroll img,
.ngp-kb-fetched-content img {
    max-width: 100% !important;
}

/* Prevent browser-specific word splitting. */
.ngp-page .ngp-text,
.ngp-page .ngp-substep,
.ngp-page .ngp-kb,
.ngp-page .ngp-kb * {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
}

/* ---------- 2) Stable desktop grid ---------- */
.ngp-layout {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(330px, 27vw, 410px) minmax(0, 1fr) !important;
    gap: clamp(16px, 1.6vw, 24px) !important;
    align-items: stretch !important;
}

.ngp-process,
.ngp-kb,
.ngp-process-scroll,
.ngp-kb-scroll,
.ngp-kb-landing,
.ngp-kb-landing-body,
.ngp-kb-landing-intro,
.ngp-kb-landing-flow {
    min-width: 0 !important;
}

/* Fixed desktop panel height removes differences caused by
   Safari/Chrome toolbar height and macOS/Windows viewport math. */
.ngp-process,
.ngp-kb {
    height: 620px !important;
    min-height: 620px !important;
    max-height: 620px !important;
}

/* ---------- 3) Consistent internal scrolling ---------- */
.ngp-process-scroll,
.ngp-kb-scroll {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

/* Firefox */
.ngp-process-scroll,
.ngp-kb-scroll {
    scrollbar-width: thin;
    scrollbar-color: #B7C8D7 transparent;
}

/* Chromium + Safari */
.ngp-process-scroll::-webkit-scrollbar,
.ngp-kb-scroll::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

.ngp-process-scroll::-webkit-scrollbar-track,
.ngp-kb-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

.ngp-process-scroll::-webkit-scrollbar-thumb,
.ngp-kb-scroll::-webkit-scrollbar-thumb {
    background: #B7C8D7 !important;
    border-radius: 10px !important;
}

/* ---------- 4) Header / guide consistency ---------- */
.ngp-guide {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.ngp-guide-card,
.ngp-process,
.ngp-kb {
    transform: translateZ(0);
}

/* Keep header text from changing size automatically on iOS Safari. */
.ngp-header h1,
.ngp-header p,
.ngp-guide-card h2,
.ngp-guide-card p,
.ngp-process,
.ngp-kb {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* ---------- 5) Process rows ---------- */
.ngp-step,
.ngp-substep {
    min-width: 0 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.ngp-step .ngp-text,
.ngp-substep {
    min-width: 0 !important;
    white-space: normal !important;
}

/* ---------- 6) Landing screen ---------- */
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr) !important;
    gap: 13px !important;
    align-items: stretch !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image,
.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-about {
    min-width: 0 !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 320px !important;
    object-fit: contain !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
}

.ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card {
    min-width: 0 !important;
}

/* ---------- 7) Medium desktop / small laptop / iPad landscape ---------- */
@media (max-width: 1100px) and (min-width: 768px) {
    .ngp-page {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .ngp-layout {
        grid-template-columns: 320px minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    .ngp-process,
    .ngp-kb {
        height: 600px !important;
        min-height: 600px !important;
        max-height: 600px !important;
    }

    .ngp-guide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-intro {
        grid-template-columns: 1fr !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card::after {
        display: none !important;
    }
}

/* ---------- 8) Phones + narrow tablets ---------- */
@media (max-width: 767px) {
    .ngp-page {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding: 0 12px 24px !important;
        overflow-x: hidden !important;
    }

    .ngp-header {
        width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ngp-guide {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 14px !important;
        margin-bottom: 14px !important;
    }

    .ngp-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    /* Navigation stays compact and scrollable on mobile. */
    .ngp-process {
        height: 460px !important;
        min-height: 460px !important;
        max-height: 460px !important;
    }

    /* KB panel gets more room for reading. */
    .ngp-kb {
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
    }

    .ngp-process-scroll,
    .ngp-kb-scroll {
        scrollbar-gutter: auto;
    }

    .ngp-kb-scroll {
        padding: 14px 14px 22px !important;
    }

    .ngp-kb-landing-title h2 {
        font-size: 24px !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-intro,
    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-flow {
        grid-template-columns: 1fr !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-card::after {
        display: none !important;
    }

    .ngp-container:not(:has(input[name="ngp-active"]:checked)) .ngp-kb-landing-image img {
        height: auto !important;
        max-height: 280px !important;
    }
}

/* ---------- 9) Very small phones ---------- */
@media (max-width: 420px) {
    .ngp-page {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }

    .ngp-header {
        width: calc(100% + 18px) !important;
        margin-left: -9px !important;
    }

    .ngp-header h1 {
        font-size: 22px !important;
    }

    .ngp-process {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
    }

    .ngp-kb {
        height: 610px !important;
        min-height: 610px !important;
        max-height: 610px !important;
    }

    .ngp-process-header {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }

    .ngp-step {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ---------- 10) Landscape phones ---------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    .ngp-process,
    .ngp-kb {
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }
}

/* END — NEW GROUP PROCESS CROSS-PLATFORM RESPONSIVE STABILITY */