:root{
  --brand:#0e6f3b;--brand-600:#0a5a30;--accent:#ffcc00;--ink:#1a1a1a;--muted:#6b7280;--line:#e5e7eb;--surface:#ffffff;--bg:#f7f8fb;--danger:#c0392b;--ok:#0e7a0d;--info:#2563eb;--psea:#004b8d;--psea-600:#0066c2;
}
*{box-sizing:border-box}
body{margin:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--ink); background:var(--bg); line-height:1.35;}
.container{max-width:1160px;margin:0 auto;padding:16px}

/* Header */
header{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px;display:flex !important;align-items: flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;position:sticky;top:0;z-index:1000;}
.logo-wrap{display:flex;align-items:center;gap:10px}
.logo-wrap img{height:40px;width:auto;display:block;}
header nav,#navButtons {display:flex;align-items: flex-start;font-size:14px;width:100%;justify-content:space-between;gap: 12px;}
header nav button{color:#222;text-decoration:none;font-weight:600 !important;position:relative;cursor:pointer;}
header nav button:hover{color:var(--psea);text-decoration:underline}
select.goog-te-combo{
    padding:5px 8px !important;
    border-radius:6px !important;
    border:1px solid var(--line);
    border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133)) !important;
    margin-inline: unset !important;
}

/* Cart in header */
.cart-btn{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.cart-btn:hover{filter:brightness(.98)}
.cart-btn .cart-icon{width:18px;height:18px;display:inline-block}
.cart-btn .cart-amt{font-weight:800}
.cart-btn .cart-count{min-width:18px;height:18px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:#f3f4f6;color:#111}

/* Welcome banner */
.welcome{
    display:flex;
    /*align-items:center;
    gap:16px;
    position:sticky;
    top:56px;
    z-index:999;
    min-height:105px;
    background-size:50% auto;
    background-repeat:repeat-x;
    background-position:center;
    color:#fff;
    padding:24px 16px*/
    height: 40vh;
    max-height: 200px;
    padding-block: 10px;
    background-size: cover;
    background-position: right bottom;
    display: flex;
    align-items: center;
    padding-inline: 5vw;
}
.welcome h1{font-size:18px;margin:0 0 6px}
.welcome-overlay{padding:16px;border-radius:8px;background:rgba(0,0,0,.25)}

/* Chloe inside Welcome banner (upper-right) */
.welcome-chloe{position:absolute; top:70px; right:16px; display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,0.92); color:#111; border:1px solid var(--line); backdrop-filter:saturate(1.2) blur(2px); cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.12)}
.welcome-chloe:hover{ filter:brightness(0.98) }
.welcome-chloe .avatar{ width:32px; height:32px; border-radius:50%; overflow:hidden; display:block; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.15) }
.welcome-chloe .name{ font-weight:700; font-size:13px }
.welcome-chloe .hint{ font-size:12px; color:#374151 }

.step{background:#fff6d6;border:1px solid #f5d67a;border-left:6px solid var(--accent);border-radius:8px;padding:12px 14px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.step .title{font-weight:700}
.radio-group{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.radio-group label{display:flex;align-items:center;gap:8px;font-weight:600}
.hint{color:var(--muted);font-size:13px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:14px}
.card h2{margin:0;padding:10px 14px;background:#f4f6f9;border-bottom:1px solid var(--line);font-size:15px;font-weight:700}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:#f4f6f9;color:#374151;font-size:12px;font-weight:700;padding:10px;border-bottom:1px solid var(--line);text-align:left}
tbody td{padding:8px 10px;border:none !important;vertical-align:middle;font-size:14px}
tbody tr.flash{animation:rowflash .9s ease-out}
@keyframes rowflash{0%{background:#fffbea}100%{background:transparent}}

.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#f9fafb}
.badge.ok{color:#0f5132;background:#eaf7ed;border-color:#bde5c5}

select, input[type="number"], input[type="text"]{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;background:#fff;min-width:120px}

.agreement{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-top:1px solid var(--line);background:#fcfcfd}
.agreement p{margin:0;font-size:14px}
a{color:var(--psea);text-decoration:none}
a:hover{text-decoration:underline}

/* Sticky CTA footer */
.sticky{position:sticky;bottom:0;left:0;right:0;z-index:50;background:rgba(255,255,255,0.96);border-top:1px solid var(--line);backdrop-filter: blur(6px)}
.cta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 16px;gap:12px}
.cta-left{justify-self:start;display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.cta-center{justify-self:center}
.cta-right{justify-self:end;display:flex;gap:8px}

.btn{appearance:none;border:0;border-radius:10px;padding:12px 20px;font-weight:800;cursor:pointer}
.btn-primary{background:var(--psea);color:#fff}
.btn-primary:hover{background:var(--psea-600)}
.btn-secondary{background:#fff;border:2px solid var(--ink);color:var(--ink)}
.btn-secondary:hover{filter:brightness(.98)}
.btn-ghost{background:#ffffff; border:1px dashed var(--line); color:var(--ink)}

.note{color:var(--muted);font-size:13px;padding:14px 2px;text-align:center}

/* Inline info & docs icons */
.inline-actions{display:inline-flex;gap:8px;margin-left:8px;vertical-align:middle}
.icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;font-size:12px;cursor:pointer;position:relative}
.icon.info{background:#eef2ff;color:#243b8a;font-weight:700}
.icon.docs{background:#e8f5e9;color:#0e6f3b;font-weight:900}
.tooltip{opacity:0;transition:opacity .15s ease;position:absolute;left:50%;transform:translateX(-50%);bottom:130%;background:#111827;color:#fff;padding:8px 10px;border-radius:8px;min-width:220px;max-width:320px;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:10}
.icon:hover .tooltip,.icon:focus .tooltip{visibility:visible;opacity:1}

/* Benefits section contrast theme */
.benefits-surface{background:linear-gradient(180deg,#f5f8ff 0%, #f8fbff 100%);border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:16px}
.benefits-surface .card{background:#fff;border-color:#e3e8ef;box-shadow:0 1px 0 rgba(2,6,23,0.02)}
.benefits-surface .card:hover{box-shadow:0 4px 20px rgba(2,6,23,0.06)}
.card[aria-label="Life with LTC"] h2{background:#ecfdf5;color:#065f46;border-bottom-color:#d1fae5}
.card[aria-label="Voluntary Plans"] h2{background:#eef2ff;color:#3730a3;border-bottom-color:#e0e7ff}

/* Modals */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.45);z-index:2000}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:860px;width:92%;overflow:hidden}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.modal-header h3{margin:0;font-size:16px}
.modal-body{padding:16px}
.modal-body .doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.doc{border:1px solid var(--line);border-radius:10px;padding:10px}
.close{background:transparent;border:0;font-size:20px;cursor:pointer}
.mock-screen{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfdff}

/* Chloe – Floating avatar & chat panel */
.chloe-fab{position:fixed;right:16px;bottom:84px;z-index:1200;display:flex;align-items:center;gap:10px}
.chloe-bubble{background:#fff;border:1px solid var(--line);padding:8px 10px;border-radius:10px;font-size:13px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.chloe-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;display:block;border:2px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer}
.chloe-avatar svg{width:100%;height:100%;display:block}
.chloe-pulse{position:absolute;right:16px;bottom:84px;width:56px;height:56px;border-radius:999px;background:rgba(79,70,229,.15);filter:blur(4px);animation:pulse 2s infinite;z-index:1199}
@keyframes pulse{0%{transform:scale(.95);opacity:.9}70%{transform:scale(1.2);opacity:0}100%{opacity:0}}

.ai-panel{position:fixed;right:16px;bottom:16px;width:380px;max-width:92vw;height:560px;max-height:74vh;background:#ffffff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.25);display:none;flex-direction:column;overflow:hidden;z-index:1300}
.ai-panel.open{display:flex}
.ai-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#f8fafc}
.ai-header .mini{width:32px;height:32px;border-radius:50%;overflow:hidden}
.ai-header .mini svg{width:100%;height:100%}
.ai-header h4{margin:0;font-size:14px}
.ai-header .tog{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:#374151}
.ai-messages{flex:1;overflow:auto;padding:12px;background:#fbfdff}
.msg{display:flex;gap:8px;margin-bottom:10px}
.msg .bubble{padding:10px 12px;border-radius:12px;max-width:85%}
.msg.bot .bubble{background:#eef2ff}
.msg.user{justify-content:flex-end}
.msg.user .bubble{background:#e8f5e9}
.ai-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.ai-input input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px}
.ai-input .mic{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.ai-input .mic.recording{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.2)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.chip{font-size:12px;border:1px solid var(--line);padding:6px 8px;border-radius:999px;background:#fff;cursor:pointer}

/* Virtual Agent overlay */
.va-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1400}
.va-overlay.open{display:flex}
.va-card{width:min(980px,92vw);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.va-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:#f8fafc}
.va-head .avatar{width:36px;height:36px;border-radius:50%;overflow:hidden}
.va-head .avatar svg{width:100%;height:100%}
.va-body{padding:16px}
.va-steps{display:grid;grid-template-columns:280px 1fr;gap:14px}
.va-steps .left{border:1px solid var(--line);border-radius:10px;padding:10px}
.va-steps .right{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fbfdff}
.va-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line);background:#fff}
.ghost{opacity:.65}

/* Nav pills */
header nav .nav-left{display:flex;align-items:center;gap:12px}
header nav .nav-right{display:flex;align-items:center;gap:12px;margin-left:auto}
header nav .nav-pill{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#f8fafc;box-shadow:0 1px 0 rgba(2,6,23,.02);transition:all .15s ease;line-height:1;text-decoration:none}
#postcardButton.nav-pill{background:#eef2ff;border-color:#e0e7ff;color:#1e3a8a}
#postcardButton.nav-pill:hover{background:#e0e7ff;color:#111827;border-color:#c7d2fe}
#currentBenefitsButton.nav-pill{background:#ecfdf5;border-color:#d1fae5;color:#065f46}
#currentBenefitsButton.nav-pill:hover{background:#d1fae5;color:#064e3b;border-color:#10b981}
#navProfile.nav-pill{background:#fff7ed;border-color:#fde68a;color:#92400e}
#navProfile.nav-pill:hover{background:#fde68a;color:#78350f;border-color:#f59e0b}

va{display:none!important}
/* Header one-line alignment overrides */
header{flex-wrap:nowrap}
header nav{margin-left:auto;flex-wrap:nowrap;width:auto;flex-direction: column;}

.popup{
    background-color:white;
    width:70vw;
    position: absolute;
    top: 10vh;
    color:black;
    padding:1rem;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
}

.cover {
    position: fixed;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

div#google_translate_element {
    height: 35px;
}
.goog-te-gadget{color: transparent !important;}
.goog-te-gadget span{
    display:none;
}

img.actionIcon {
    max-height: 25px;
    margin-left: 5px;
    cursor: pointer;
}

.enrollButton, .collapsibleButton {
    background: #2497c5;
    color: white;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    font-family: arial !important;
    font-size: 13px;
    padding: 0.65rem;
}

#myAccount {
    display:none !important;
    padding: 5px 0px;
    width:100%;
    min-width: 150px;
    text-align:center;
    background-color: #0A486D;
    padding-inline: 10px;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease, background-color 0.3s ease;
}

@media (min-width: 1024px) {
    #navButtons{
        display:flex !important;
    }
}
@media(max-width: 1023px){
    nav{gap:0px !important}
    #myAccount{
        display:block !important;
    }
    #navButtons{
        flex-direction: column;
        display:none;
        background:white;
        gap:0px;
    }
    header{
        padding-inline:5vw;
        column-gap: 6px;
    }
    #popupContent{
        width:80% !important;
        background: white;
    }
    
    #popupImage{
        width:100%;
        background-position: center top;
        height:30vh;
        background-size: cover;
    }
    #cartBtn{
        display:none;
    }
    .nav-pill, #edit-profile {
        border: none !important;
        background: none !important;
        color: black !important;
        width: 100%;
        box-shadow: none !important;
        border-radius: 0px !important;
    }
    .nav-pill:hover, #edit-profile:hover {
        background-color: #02416A !important;
        color: white !important;
    }
    .popup {width: 100vw !important;}
}

header {
    position: absolute;
    width: 100%;
    background: none;
    border: none;
}

.welcome {
    max-height: 260px !important;
}

.userDetails {
    top: 0px;
    margin-block: 5vh;
    position: absolute;
    border: 1px solid black;
    background-color: white;
    padding: 1rem;
}
.infoBlock {
    display: inline-flex;
    width: 33vh;
    flex-direction: column;
    margin: 1vw;
}