/*
 * InsuranceStudy theme (source 32). The design system lives in design/insurancestudy/ (gitignored);
 * every value here comes from its tokens: green #597D4F is brand + primary action, blue #275A9C is
 * reserved for purchase actions, gold #DB9E33 is an indicator only (nav hover rule, focus ring),
 * navy #012A5E is structure (utility bar, footer), the page is cream #F7F4EF with
 * content on white. Type is the NetStudy stack (loaded in _partials/head.php): Jost for headings,
 * Merriweather for page subtitles (.ns-subhead) and the testimonial quotes, Open Sans for everything else. Always set a
 * family through the --font-* tokens, never by name.
 *
 * Loaded by two layouts:
 *   layouts/site.php  (homepage, and every page rebuilt on the design system): stock Bootstrap 5.3.8
 *                     + this file. Root font size is the browser's 16px.
 *   layouts/main.php  (pages not yet rebuilt): Bootstrap 5.3.8 + css/bootstrap-legacy.css (which sets
 *                     the root to 10px) + css/newmain.css + this file + legacy-pages.css.
 * The site chrome (utility bar, header, state dropdown, mobile nav, footer) renders under BOTH stacks, so
 * everything here is written in px and the chrome markup uses no rem-based Bootstrap spacing utility.
 * Do not add rem values to this file.
 */

/* 1. Tokens ----------------------------------------------------------------------------- */
:root {
    --is-green-700: #3F5B37;
    --is-green-600: #4B6A42;
    --is-green: #597D4F;
    --is-green-200: #C3D2BE;
    --is-green-100: #E4EBE1;
    --is-green-50: #F1F5EF;
    --is-gold-800: #8C6319;   /* gold-700 darkened one step: 12px eyebrows need 4.5:1 on cream */
    --is-gold-700: #9E7020;
    --is-gold: #DB9E33;
    --is-gold-400: #E9BE75;
    --is-gold-100: #FBF1DC;
    --is-blue-800: #143458;
    --is-blue-700: #1C4478;
    --is-blue: #275A9C;
    --is-blue-200: #BDD0E1;
    --is-blue-50: #DFE9F2;
    --is-navy: #012A5E;
    --is-cream: #F7F4EF;
    --is-sunken: #EFF1F3;
    --is-border: #E2E6E9;
    --is-ink-300: #CBD0D5;
    --is-subtle: #7C848C;
    --is-muted: #5D646B;
    --is-ink: #2B2F33;
    --is-heading: #16181A;
    --is-success: #3F7A44;
    --is-warning: #B8791A;    /* design system tokens; 3.6:1 on white, so icons only: text takes gold-800 */
    --is-info: #275A9C;
    --is-shadow-xs: 0 1px 2px rgba(22, 24, 26, .06);
    --is-shadow-sm: 0 1px 3px rgba(22, 24, 26, .08), 0 1px 2px rgba(22, 24, 26, .04);
    --is-shadow-md: 0 6px 16px rgba(22, 24, 26, .10);
    --is-shadow-lg: 0 12px 32px rgba(22, 24, 26, .14);
    /* The focus ring, keyboard focus only (:focus-visible; form fields on focus): gold with a 1px navy
       ring outside it. Gold alone measures 2.1:1 on white and cream; the navy ring is what reaches
       3:1 (and more) against both, and the gold still reads on the navy bands. The inset variant
       is for the items whose ring must stay inside their box (the header nav, dropdown items). */
    --is-focus: 0 0 0 2px var(--is-gold), 0 0 0 3px var(--is-navy);
    --is-focus-inset: inset 0 0 0 2px var(--is-gold), inset 0 0 0 3px var(--is-navy);
    --is-ease: cubic-bezier(.2, 0, .2, 1);
    --font-display: "Jost", "Century Gothic", "Questrial", system-ui, sans-serif;
    --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
    --font-body: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --is-header-height: 72px;
    /* the sticky header's height, so the course page's sticky purchase card and its section
       anchors (css/course-details.css) clear it */
    --theme-header-offset: var(--is-header-height);

    --bs-font-sans-serif: var(--font-body);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: 16px;
    --bs-body-line-height: 1.55;
    --bs-body-color: var(--is-ink);
    --bs-body-color-rgb: 43, 47, 51;
    --bs-secondary-color: var(--is-muted);
    --bs-emphasis-color: var(--is-heading);
    --bs-heading-color: var(--is-heading);
    --bs-primary: #597D4F;
    --bs-primary-rgb: 89, 125, 79;
    --bs-success: #3F7A44;
    --bs-success-rgb: 63, 122, 68;
    --bs-link-color: #3F5B37;
    --bs-link-color-rgb: 63, 91, 55;
    --bs-link-hover-color: #9E7020;
    --bs-link-hover-color-rgb: 158, 112, 32;
    --bs-border-color: #E2E6E9;
    --bs-border-radius: 3px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 6px;
    --bs-border-radius-xl: 10px;
    --bs-focus-ring-color: rgba(219, 158, 51, .45);
}

/* 2. Base ------------------------------------------------------------------------------- */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--is-ink);
    background-color: #fff;
}
/* The design-system layout puts the page on cream; pages still on the legacy layout stay white. */
body.is-site {
    background-color: var(--is-cream);
}
/* The footer always reaches the bottom of the window (Jason 2026-10-13): on a page shorter than
   the window, the main area grows to fill the gap, so no blank band shows under the footer. Both
   layouts (site.php and main.php) have the same body > header, #main, .site-footer structure. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body > #main {
    flex: 1 0 auto;
}
body > .site-footer {
    flex-shrink: 0;
}
@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    font-weight: 700;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    color: var(--is-heading);
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 8px;
}
/* 36px, the catalog's page title size, on every inner page (Jason 2026-10-13); the homepage hero
   sizes its own h1 (.hero h1) */
h1, .h1 { font-size: 36px; line-height: 1.15; }
h2, .h2 { font-size: 32px; }
h3, .h3 { font-size: 26px; }
h4, .h4 { font-size: 18px; line-height: 1.3; }
h5, .h5 { font-size: 16px; }
@media (max-width: 767.98px) {
    h1, .h1 { font-size: 32px; }
    h2, .h2 { font-size: 26px; }
    h3, .h3 { font-size: 22px; }
}
p {
    margin: 0 0 16px;
}
a {
    color: var(--is-green-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover {
    color: var(--is-gold-700);
}
/* the transparent outline is what Windows high-contrast mode shows in place of the ring */
a:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--is-focus);
    border-radius: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
}
strong, b {
    font-weight: 700;
}
small, .small {
    font-size: 14px;
}
.text-muted {
    color: var(--is-muted) !important;
}
.eyebrow {
    font: 600 12px/1.3 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--is-muted);
}
.lead {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--is-muted);
}
/* Page subtitles only (the line under a page's h1): never body text, buttons, tables or headings. */
.ns-subhead {
    font-family: var(--font-serif);
    font-weight: 400;
}
.price {
    font: 700 20px/1 var(--font-display);
    color: var(--is-green-700);
}
/* The card catalog (css/catalog.css, shared by every source) sets weights and sizes only; the
   InsuranceStudy type stack is applied here. */
.req-big,
.req-subtitle,
.ltc-stage-title,
.course-hours {
    font-family: var(--font-display);
}
.filter-legend {
    font-family: var(--font-body);
}
.section {
    padding: 72px 0;
}
.section-white {
    background: #fff;
    border-top: 1px solid var(--is-border);
    border-bottom: 1px solid var(--is-border);
}
.section-head {
    max-width: 760px;
    margin-bottom: 40px;
}
.section-head h2 {
    margin: 6px 0 10px;
}
.section-head p {
    color: var(--is-muted);
    margin-bottom: 0;
}
.ticks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ticks li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ticks li > i {
    flex: 0 0 auto;   /* never let a long line squeeze the icon and shift the text */
    color: var(--is-green);
    margin-top: 4px;
}
@media (max-width: 767.98px) {
    .section {
        padding: 44px 0;
    }
    .section-head {
        margin-bottom: 28px;
    }
}
/* An inner page's white head band under the header, ruled off from the cream page: the h1, the
   serif lead, then the page's one control or action (the state FAQ and course credit details
   pages; the catalog has its own .page-head in css/catalog.css) */
.is-page-head {
    background: #fff;
    border-bottom: 1px solid var(--is-border);
    padding: 32px 0;
}
.is-page-head h1 {
    margin: 0 0 10px;
}
.is-page-head .lead {
    max-width: 68ch;
    margin: 0;
}
@media (max-width: 575.98px) {
    .is-page-head .lead {
        font-size: 16px;
    }
}
.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 2000;
    padding: 10px 14px;
    background: #fff;
    color: var(--is-green-700);
    border: 1px solid var(--is-green);
    border-radius: 3px;
    font-weight: 500;
    text-decoration: none;
}
.skip-link:focus {
    top: 12px;
}

/* 3. Buttons ---------------------------------------------------------------------------- */
.btn {
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 7px;
    --bs-btn-font-family: var(--font-body);
    --bs-btn-font-size: 15px;
    --bs-btn-line-height: 1.5;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 3px;
    --bs-btn-focus-box-shadow: var(--is-focus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: transform 180ms var(--is-ease);
}
.btn:hover,
.btn:focus {
    text-decoration: none;
}
.btn:active {
    transform: translateY(1px);
}
.btn-lg {
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 17px;
    --bs-btn-border-radius: 3px;
}
.btn-sm {
    --bs-btn-padding-x: 10px;
    --bs-btn-padding-y: 5px;
    --bs-btn-font-size: 14px;
    --bs-btn-border-radius: 3px;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #597D4F;
    --bs-btn-border-color: #597D4F;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4B6A42;
    --bs-btn-hover-border-color: #4B6A42;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3F5B37;
    --bs-btn-active-border-color: #3F5B37;
    --bs-btn-disabled-color: #5D646B;
    --bs-btn-disabled-bg: #E2E6E9;
    --bs-btn-disabled-border-color: #E2E6E9;
    --bs-btn-disabled-opacity: .75;
}
.btn-outline-primary {
    --bs-btn-color: #3F5B37;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #597D4F;
    --bs-btn-hover-color: #3F5B37;
    --bs-btn-hover-bg: #F1F5EF;
    --bs-btn-hover-border-color: #3F5B37;
    --bs-btn-active-color: #3F5B37;
    --bs-btn-active-bg: #C3D2BE;
    --bs-btn-active-border-color: #3F5B37;
}
/* Purchase actions are blue, everything else green (brand guide): Add to Cart on the catalog and the
   course page, the class page's Register / Purchase buttons, Proceed to Checkout and the pay button.
   Those shared views add .btn-cart beside .btn-primary, and only this theme colours it. */
.btn-cart {
    --bs-btn-color: #fff;
    --bs-btn-bg: #275A9C;
    --bs-btn-border-color: #275A9C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1C4478;
    --bs-btn-hover-border-color: #1C4478;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #143458;
    --bs-btn-active-border-color: #143458;
}
.btn-outline-cart {
    --bs-btn-color: #275A9C;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #275A9C;
    --bs-btn-hover-color: #1C4478;
    --bs-btn-hover-bg: #DFE9F2;
    --bs-btn-hover-border-color: #1C4478;
    --bs-btn-active-color: #1C4478;
    --bs-btn-active-bg: #BDD0E1;
    --bs-btn-active-border-color: #1C4478;
}
.btn-plain {
    --bs-btn-color: var(--is-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--is-green-700);
    --bs-btn-hover-bg: var(--is-green-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--is-green-700);
    --bs-btn-active-bg: var(--is-green-100);
    --bs-btn-active-border-color: transparent;
}
.btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--is-border);
    background: #fff;
    color: var(--is-ink);
    font-size: 18px;
}
.btn-icon:hover {
    color: var(--is-green-700);
    border-color: var(--is-green);
}

/* 4. Forms ------------------------------------------------------------------------------ */
.form-control,
.form-select {
    font-size: 16px;
    line-height: 1.5;
    padding: 9px 12px;
    color: var(--is-ink);
    border: 1px solid var(--is-ink-300);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(22, 24, 26, .06);
    transition: none;
}
.form-select {
    padding-right: 40px;
    background-position: right 12px center;
    background-size: 16px 12px;
}
.form-select-lg {
    font-size: 18px;
    padding: 12px 44px 12px 16px;
}
.form-control-sm {
    font-size: 14px;
    padding: 6px 10px;
}
.form-control:focus,
.form-select:focus {
    color: var(--is-ink);
    border-color: var(--is-gold);
    box-shadow: var(--is-focus);
}
.form-label {
    font-weight: 500;
    margin-bottom: 6px;
}

/* 5. Components ------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--is-border);
    --bs-card-border-radius: 6px;
    --bs-card-inner-border-radius: 5px;
    --bs-card-spacer-x: 24px;
    --bs-card-spacer-y: 24px;
    --bs-card-bg: #fff;
    box-shadow: var(--is-shadow-xs);
}
.badge {
    font-weight: 600;
    font-size: 12px;
    border-radius: 999px;
    padding: 5px 10px;
}
.accordion {
    --bs-accordion-border-color: var(--is-border);
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: var(--is-heading);
    --bs-accordion-btn-focus-box-shadow: var(--is-focus);
    --bs-accordion-btn-padding-y: 18px;
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-icon-width: 20px;
}
.accordion-item {
    border-left: 0;
    border-right: 0;
}
.accordion-item:first-of-type {
    border-top: 1px solid var(--is-border);
}
.accordion-header {
    margin: 0;
}
.accordion-button {
    font: 600 17px/1.35 var(--font-display);
    letter-spacing: -.01em;
    color: var(--is-heading);
    text-align: left;
}
.accordion-button:not(.collapsed) {
    box-shadow: none;
}
.accordion-button:focus-visible,
.accordion-button:not(.collapsed):focus-visible {
    box-shadow: var(--is-focus);
    outline: none;
}
.accordion-button::after {
    width: 20px;
    height: 20px;
    background-size: 20px;
}
.accordion-body {
    color: var(--is-muted);
    padding-bottom: 18px;
    max-width: 78ch;
}
/* a staff notice on the catalog (catalog_cards.php, catalog_classroom.php): a tinted note with a
   hairline all round, no accent bar; LTC Connection's theme.css has the same rule in its blues */
.alert-tone {
    border: 1px solid var(--is-blue-200);
    background: var(--is-blue-50);
    color: var(--is-blue-800);
    border-radius: 6px;
    font-size: 15px;
    padding: 14px 16px;
}
.alert-tone a {
    color: inherit;
    font-weight: 500;
}
.modal {
    --bs-modal-width: 520px;
    --bs-modal-border-radius: 10px;
    --bs-modal-inner-border-radius: 9px;
    --bs-modal-border-color: var(--is-border);
    --bs-modal-box-shadow: var(--is-shadow-lg);
    --bs-modal-padding: 24px;
    --bs-modal-header-padding: 24px 24px 0;
    --bs-modal-margin: 8px;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 520px;
        margin: 28px auto;
    }
}
.modal-title {
    font: 700 24px/1.2 var(--font-display);
    letter-spacing: -.01em;
    color: var(--is-heading);
}
.modal-backdrop {
    --bs-backdrop-bg: #16181A;
    --bs-backdrop-opacity: .45;
}
.btn-close {
    font-size: 16px;
    --bs-btn-close-focus-shadow: var(--is-focus);
}
/* Bootstrap rings the close button on any focus: keyboard focus only here, like every other ring */
.btn-close:focus:not(:focus-visible) {
    box-shadow: none;
}
.offcanvas {
    --bs-offcanvas-width: 380px;
    --bs-offcanvas-padding-x: 20px;
    --bs-offcanvas-padding-y: 18px;
    --bs-offcanvas-bg: #fff;
    --bs-offcanvas-border-color: var(--is-border);
}
.offcanvas-header,
.offcanvas-body {
    padding: 18px 20px;
}
/* The Smallchat button (a third-party iframe fixed bottom right, above everything) would sit on
   top of an open panel's own bottom row, such as the catalog filters' "Show N courses" button on
   a phone, so it steps aside while a panel is open (.offcanvas-lg is the filter panel's class). */
body:has(.offcanvas.show, .offcanvas-lg.show) #Smallchat iframe {
    display: none !important;
}

/* 6. Utility bar + header --------------------------------------------------------------- */
.utilbar {
    background: var(--is-navy);
    color: #fff;
    font-size: 14px;   /* 14px on both sites, Jason 2026-10-14 (was 13px) */
    line-height: 1.4;
}
.utilbar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0;
}
.utilbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
}
@media (max-width: 575.98px) {
    .utilbar-email {
        display: none;   /* keeps the bar to one line on phones; the email is in the footer */
    }
}
@media (min-width: 576px) {
    .utilbar-links {
        gap: 22px;
    }
}
.utilbar a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.utilbar a:hover {
    color: var(--is-gold-400);
}
.utilbar i {
    color: var(--is-gold-400);
    margin-right: 6px;
}
@media (min-width: 992px) {
    .utilbar-inner {
        justify-content: flex-end;
    }
}
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--is-border);
    box-shadow: var(--is-shadow-xs);
}
.site-header-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-height: var(--is-header-height);
    gap: 16px;
}
.site-brand {
    display: inline-flex;
    align-items: center;
    padding: 20px 0;
    margin-right: 24px;
    text-decoration: none;
}
.site-brand img {
    display: block;
    height: 29px;
    width: auto;
}
/* Two links only, the two catalogs: green and semibold so they read as navigation, with a
   hairline (the system's own separator) so they never read as part of the logo lockup. The gold
   rule shows on hover or open, never for the current page (Jason 2026-11-02). */
.site-nav {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 0 28px;
    gap: 36px;
    margin-right: auto;
    border-left: 1px solid var(--is-border);
    align-self: stretch;
    align-items: center;
}
.site-nav .nav-link {
    display: inline-block;
    padding: 24px 0 21px;   /* 1px more above than 23/22: with the 3px rule below, this puts the text on the logo's and account links' centre line (measured 2026-10-14) */
    border-bottom: 3px solid transparent;
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
    color: var(--is-green-700);
    text-decoration: none;
    background: none;
    transition: none;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus,
.site-nav .nav-link.show {
    color: var(--is-green-700);
    border-bottom-color: var(--is-gold);
    background: none;
    text-decoration: none;
}
.site-nav .nav-link:focus-visible {
    outline: 2px solid transparent;
    outline-offset: -2px;
    box-shadow: var(--is-focus-inset);
}
.site-nav .dropdown-toggle::after {
    border-top-width: 5px;
    border-right-width: 5px;
    border-left-width: 5px;
    vertical-align: 3px;
    margin-left: 6px;
    color: var(--is-green-700);
}
.site-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.site-header-actions .btn-plain,
.site-header-actions .btn-cart-link {
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 7px;
    --bs-btn-font-size: 14px;
    white-space: nowrap;
}
/* The one highlighted account link is My courses once signed in (Sign in before): Jason
   2026-10-14, the cart is never the primary link. The account menu and the cart stay plain.
   An OUTLINE, white with a dark grey hairline, in the account links' ink (Jason 2026-10-30: the
   green-50 fill read as a selected state, the catalog's active filter chips); green arrives only
   on hover, as on the plain links beside it. LTC Connection's theme.css matches it in its blues. */
.site-header-actions .btn-account-main {
    --bs-btn-color: var(--is-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--is-muted);
    --bs-btn-hover-color: var(--is-green-700);
    --bs-btn-hover-bg: var(--is-green-50);
    --bs-btn-hover-border-color: var(--is-green);
    --bs-btn-active-color: var(--is-green-700);
    --bs-btn-active-bg: var(--is-green-100);
    --bs-btn-active-border-color: var(--is-green-700);
    --bs-btn-font-weight: 600;
}
.btn-cart-link {
    --bs-btn-color: var(--is-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--is-green-700);
    --bs-btn-hover-bg: var(--is-green-50);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--is-green-700);
    --bs-btn-active-bg: var(--is-green-100);
    --bs-btn-active-border-color: transparent;
}
/* below lg the cart stands alone beside the menu button, so it keeps a hairline like that button */
@media (max-width: 991.98px) {
    .btn-cart-link {
        --bs-btn-border-color: var(--is-border);
        --bs-btn-hover-border-color: var(--is-green);
        --bs-btn-active-border-color: var(--is-green);
    }
}
.btn-cart-link .badge {
    background: var(--is-blue);
    color: #fff;
    font-size: 11px;
    padding: 3px 7px;
    min-width: 20px;
}
.site-header-actions .dropdown-menu {
    --bs-dropdown-font-size: 14px;
    --bs-dropdown-border-color: var(--is-border);
    --bs-dropdown-border-radius: 6px;
    --bs-dropdown-padding-y: 8px;
    --bs-dropdown-item-padding-x: 16px;
    --bs-dropdown-item-padding-y: 8px;
    --bs-dropdown-link-color: var(--is-ink);
    --bs-dropdown-link-hover-color: var(--is-green-700);
    --bs-dropdown-link-hover-bg: var(--is-green-50);
    --bs-dropdown-link-active-color: var(--is-green-700);
    --bs-dropdown-link-active-bg: var(--is-green-100);
    --bs-dropdown-min-width: 220px;
    box-shadow: var(--is-shadow-md);
    margin-top: 6px;
}
.site-header-actions .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    text-decoration: none;
}
.site-header-actions .dropdown-item i {
    width: 16px;
    text-align: center;
    color: var(--is-green);
}
.site-header-actions .dropdown-toggle::after {
    margin-left: 6px;
    color: var(--is-subtle);
}
@media (min-width: 992px) {
    .site-nav {
        display: flex;
    }
    .d-lg-none-chrome {
        display: none !important;
    }
}
@media (max-width: 991.98px) {
    .d-lg-only-chrome {
        display: none !important;
    }
    .site-header-inner {
        min-height: 64px;
    }
    /* the logo gives way to the cart and menu buttons: full size where the row has room, scaled
       down where it does not (a 280px phone, a cart badge), so the header never runs off the
       screen. No margin after it: the nav it spaces from is hidden, and the row's gap keeps the
       buttons off it. LTC Connection's theme.css does the same with its logo. */
    .site-brand {
        min-width: 0;
        margin-right: 0;
        padding: 16px 0;
    }
    .site-brand img {
        width: 150px;   /* 26px tall */
        min-width: 0;
        max-width: 100%;
        height: auto;
    }
}

/* Insurance CE dropdown: the 51 state catalogs in four columns, nothing else */
.site-nav > li {
    position: relative;
}
/* the state links are .dropdown-item, so the arrow keys move through them; these keep Bootstrap's
   item fills off them (they read as a plain list) */
.state-menu {
    --bs-dropdown-link-color: var(--is-ink);
    --bs-dropdown-link-hover-color: var(--is-green-700);
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: var(--is-green-700);
    --bs-dropdown-link-active-bg: transparent;
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    padding: 20px 24px;
    border: 1px solid var(--is-border);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    box-shadow: var(--is-shadow-lg);
    background: #fff;
    font-size: 16px;
    transform: none !important;
    inset: 100% auto auto 0 !important;
}
.state-cols {
    columns: 4;
    column-gap: 28px;
}
.state-cols a {
    display: block;
    width: 150px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--is-ink);
    text-decoration: none;
    white-space: nowrap;
    break-inside: avoid;
}
.state-cols a:hover,
.state-cols a:focus {
    color: var(--is-green-700);
    background: none;
    text-decoration: underline;
}
.state-cols a:active {
    color: var(--is-green-600);
    background: none;
}

/* Mobile nav (offcanvas below lg) */
.mobile-nav .offcanvas-header {
    border-bottom: 1px solid var(--is-border);
}
.mobile-nav .offcanvas-header img {
    height: 25px;
    width: auto;
}
.mobile-nav .eyebrow {
    margin-bottom: 8px;
}
.mobile-nav .form-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--is-muted);
}
.mobile-nav .form-select {
    margin-bottom: 8px;
}
.mobile-nav .btn-primary {
    width: 100%;
    margin-bottom: 20px;
}
.mobile-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--is-border);
    font-size: 17px;
    font-weight: 500;
    color: var(--is-ink);
    text-decoration: none;
}
.mobile-link:hover,
.mobile-link:focus {
    color: var(--is-green-700);
    text-decoration: none;
}
.mobile-link i {
    color: var(--is-ink-300);
}
.mobile-link > span:first-child {
    flex: 1 1 auto;
}
.mobile-link .badge {
    background: var(--is-blue);
    color: #fff;
    margin-right: 10px;
}
.mobile-nav .offcanvas-body > .eyebrow + .eyebrow,
.mobile-nav .mobile-group {
    margin-top: 24px;
}

/* 7. Footer ----------------------------------------------------------------------------- */
.site-footer {
    background: var(--is-navy);
    color: rgba(255, 255, 255, .85);
    margin-top: 72px;
    font-size: 14px;
}
.site-footer-inner {
    padding: 40px 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 24px;
    align-items: start;
}
.site-footer .eyebrow {
    color: var(--is-gold-400);
    margin-bottom: 12px;
}
.site-footer a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: 14px;
}
.site-footer a:hover,
.site-footer a:focus {
    color: var(--is-gold-400);
    text-decoration: none;
}
/* on navy the gold is the ring (6:1), lighter gold like the hover */
.site-footer a:focus-visible {
    box-shadow: 0 0 0 2px var(--is-gold-400);
}
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}
.footer-contact i {
    width: 16px;
    text-align: center;
    color: var(--is-gold-400);
}
.social-links {
    display: flex;
    gap: 10px;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 15px;
}
.social-links a:hover,
.social-links a:focus {
    color: var(--is-gold-400);
    border-color: var(--is-gold-400);
}
.footer-blog {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 15px;
}
.footer-blog i {
    width: 16px;
    text-align: center;
    color: var(--is-gold-400);
}
.footer-powered a {
    display: inline-block;
    opacity: .9;
    transition: opacity 110ms var(--is-ease);
}
.footer-powered a:hover {
    opacity: 1;
}
.footer-powered img {
    display: block;
    width: 150px;
    height: auto;
}
.footer-base {
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
}
.footer-base-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
}
.footer-base-links {
    display: flex;
    gap: 22px;
}
.footer-base a {
    font-size: 12px;
}
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .footer-base-inner {
        flex-direction: row;
        align-items: center;
    }
}
@media (min-width: 992px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr auto;
    }
    .footer-powered {
        justify-self: end;
    }
}

/* 8. Home ------------------------------------------------------------------------------- */
/* Hero: the one navy band above the footer. Copy left, the map right; on phones the map follows
   the copy at full width. Text is white on navy, the second line of the headline in gold-400 (the
   same gold-on-navy the utility bar and footer use), the button the brand green. */
.hero {
    background: var(--is-navy);
    color: #fff;
    padding: 56px 0 60px;
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.hero-copy {
    max-width: 560px;
}
.hero .eyebrow {
    color: rgba(255, 255, 255, .7);
}
.hero h1 {
    color: #fff;
    font-size: clamp(36px, 24px + 2.4vw, 58px);
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 12px 0 18px;
}
.hero h1 .hero-accent {
    display: block;
    color: var(--is-gold-400);
}
.hero-sub {
    font-size: 20px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 30px;
}
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.hero .btn:focus-visible {
    outline: 2px solid var(--is-gold);
    outline-offset: 3px;
    box-shadow: none;
}
.btn-start {
    --bs-btn-padding-x: 32px;
    --bs-btn-padding-y: 15px;
    --bs-btn-font-size: 18px;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.hero-map {
    position: relative;
    width: 100%;
    aspect-ratio: 1000 / 558;
}
.hero-map canvas {
    display: block;
    width: 100%;
    height: 100%;
}
@media (min-width: 992px) {
    .hero {
        padding: 64px 0 72px;
    }
    .hero-grid {
        grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
        gap: 56px;
    }
}
/* The process: a numbered list down the left, one large illustration beside it. */
.steps-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}
.steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.steps-list li {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px 20px;
    padding-bottom: 36px;
}
.steps-list li:last-child {
    padding-bottom: 0;
}
.steps-list li::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 60px;
    bottom: 8px;
    width: 1px;
    background: var(--is-border);
}
.steps-list li:last-child::after {
    display: none;
}
.step-num {
    font: 700 44px/52px var(--font-display);
    color: var(--is-green);
    text-align: center;
    letter-spacing: -.02em;
}
.steps-list h3 {
    font-size: 22px;
    margin: 8px 0 8px;
}
.steps-list p {
    color: var(--is-muted);
    margin: 0;
    max-width: 56ch;
}
.steps-art {
    margin: 0;
}
.steps-art img {
    display: block;
    width: 100%;
    height: auto;
}
@media (min-width: 992px) {
    .steps-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 64px;
    }
}

/* Why InsuranceStudy: the heading and the "Approved" stamp on the left, the three promises as
   rows on the right. */
.why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}
.why-intro {
    margin-bottom: 0;
}
.why-art {
    margin: 20px 0 0;
    max-width: 300px;
}
.why-art img {
    display: block;
    width: 100%;
    height: auto;
}
.why-rows {
    display: flex;
    flex-direction: column;
}
.why-row {
    padding: 28px 0;
    border-top: 1px solid var(--is-border);
}
.why-row:first-child {
    padding-top: 0;
    border-top: 0;
}
.why-row:last-child {
    padding-bottom: 0;
}
.why-row h3 {
    margin: 0 0 12px;
}
.why-row .ticks {
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
}
.why-row .ticks li > i {
    margin-top: 3px;
}
@media (min-width: 992px) {
    .why-grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
        gap: 64px;
        align-items: start;
    }
    .why-art {
        margin-top: 28px;
        max-width: none;
    }
}

/* Social proof: a short heading carrying the 200,000+ figure, then three quotes in a narrow white
   band right under the hero so it sits near the fold. Phones and tablets swipe through the quotes
   (scroll-snap, no script); three sit side by side from 992px. */
.quote-strip {
    background: #fff;
    border-bottom: 1px solid var(--is-border);
    padding: 28px 0 30px;
}
.quote-strip-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 18px;
}
.quote-strip-inner {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px;
}
.quote-strip-inner::-webkit-scrollbar {
    display: none;
}
.quote-mini {
    flex: 0 0 84%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;   /* the caption sits at the bottom, so the three name rows line up */
    margin: 0;
    padding: 0 24px 0 0;
}
/* the customer's own words in the serif, so they read as a voice, not as our copy (Jason
   2026-11-02, on LTC Connection first); upright, not italic, and the serif's extra line-height */
.quote-text {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--is-ink);
    margin: 0 0 10px;
}
.quote-text::before {
    content: "\201C";
}
.quote-text::after {
    content: "\201D";
}
.quote-who {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: auto;
    font-size: 13px;
    line-height: 1.35;
}
.quote-stars {
    color: var(--is-gold);
    font-size: 11px;
    letter-spacing: 1px;
}
.quote-where {
    color: var(--is-muted);
}
.quote-where::before {
    content: "\00B7";
    margin-right: 10px;
}
@media (min-width: 576px) {
    .quote-mini {
        flex-basis: 46%;
    }
}
@media (min-width: 992px) {
    .quote-strip-inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        margin: 0;
        padding: 0;
    }
    .quote-mini {
        padding: 0 28px;
        border-left: 1px solid var(--is-border);
    }
    .quote-mini:first-child {
        padding-left: 0;
        border-left: 0;
    }
    .quote-mini:last-child {
        padding-right: 0;
    }
}
#how,
#why,
#voices {
    scroll-margin-top: 88px;
}
.state-modal .form-label {
    font-weight: 500;
}
.state-modal .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.state-modal .modal-footer > * {
    margin: 0;
}
.state-modal .modal-footer p {
    font-size: 14px;
    color: var(--is-muted);
    text-align: center;
    margin: 10px 0 0;
}
.state-modal .modal-body > p {
    font-size: 14px;
    color: var(--is-muted);
}
.affiliate-banner {
    background: var(--is-navy);
    color: #fff;
    text-align: center;
    padding: 14px 0;
    font-size: 15px;
}
.affiliate-banner p:last-child {
    margin-bottom: 0;
}
@media (max-width: 767.98px) {
    .hero {
        padding: 40px 0 44px;
    }
    .hero-sub {
        font-size: 18px;
    }
}

/* 9. Motion preferences ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn, .footer-powered a {
        transition: none;
    }
    .btn:active {
        transform: none;
    }
}

/* 10. Print ------------------------------------------------------------------------------ */
/* the page's content only: no sticky header, menus, dialogs, chat button or footer chrome */
@media print {
    .skip-link,
    .utilbar,
    .site-header,
    .mobile-nav,
    .modal,
    .modal-backdrop,
    .offcanvas-backdrop,
    .site-footer,
    #Smallchat {
        display: none !important;
    }
    body,
    body.is-site {
        display: block;
        background: #fff;
    }
}