/* ============================================================
   IASA TELEHEALTH MODULE — brand styles
   Tokens copied verbatim from the main site's style.css /
   THEME_GUIDE.md so the module is pixel-faithful to
   iamstillalive.com and drops in without restyling.
   "Warm, hopeful companion — never a cold tech dashboard."
   ============================================================ */

:root {
    --iasa-navy:        #0C204D;
    --iasa-navy-2:      #0D224F;
    --iasa-teal:        #2D86AD;
    --iasa-sky:         #28BAED;
    --iasa-sky-2:       #5CACE2;
    --iasa-blue:        #002F9F;
    --iasa-blue-light:  #57C7F8;
    --iasa-magenta:     #934397;
    --iasa-purple:      #5C2C90;
    --iasa-danger:      #EC6D6D;

    --iasa-grad-primary: linear-gradient(140deg, #0C204D 25%, #2D86AD 50%);
    --iasa-grad-pill:    linear-gradient(270deg, #57C7F8 0.09%, #002F9F 100%);
    --iasa-grad-explore: linear-gradient(to right, #556FFD, #FD66C4);
    --iasa-grad-pastel:  linear-gradient(140deg, #A9BFFC 25%, #F5A3F9 50%);
    --iasa-grad-warm:    linear-gradient(140deg, #FFD04E 25%, #FF8C45 50%);
    --iasa-grad-ribbon:  linear-gradient(107.83deg, #EC1C24 -10.92%, #CC1F4A -2.73%, #B32368 5.47%, #A1257D 13.66%, #96268A 20.68%, #93278F 28.88%, #7F288F 37.07%, #5C2C90 56.97%, #422E91 75.69%, #333091 93.25%, #2E3192 106.13%);

    --iasa-font-body:   'Book Antiqua', Palatino, 'Palatino Linotype', 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Noto Sans Tamil', 'Noto Sans Sinhala', serif;
    --iasa-font-serif:  'Times New Roman', Times, serif;
    --iasa-font-script: 'Kaushan Script', 'Dancing Script', cursive;
    --iasa-font-ui:     'Poppins', 'Inter', 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Noto Sans Tamil', 'Noto Sans Sinhala', sans-serif;

    --iasa-radius:      16px;
    --iasa-radius-pill: 40px;
    --iasa-shadow-soft: 0 2px 16px rgba(40, 186, 237, 0.10);
    --iasa-border:      rgba(12, 32, 77, 0.12);
}

/* ---------- base ---------- */
body {
    font-family: var(--iasa-font-body);
    color: var(--iasa-navy);
    min-height: 100vh;
    /* Sticky footer. Short pages — a care section with three tiles, Start Care
       before anything is filled in — used to leave the footer stranded halfway
       up the screen with white space beneath it. The page now stretches to the
       viewport and the footer sits at the bottom where it belongs. */
    display: flex;
    flex-direction: column;
}
body > main,
body > .page-wrap { flex: 1 0 auto; }
body > footer { flex-shrink: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--iasa-navy); font-family: var(--iasa-font-body); }
a { color: var(--iasa-magenta); text-decoration: none; }
a:hover { color: var(--iasa-teal); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--iasa-sky); border-radius: 8px; }
::-webkit-scrollbar-track { background: #eef6fb; }

.font-Kaushan, .h-script { font-family: var(--iasa-font-script); color: var(--iasa-navy); }
/* i18n (Phase 1): Kaushan/Dancing Script carry no Devanagari/Gujarati/Tamil/Sinhala
   glyphs. Appending the Noto families lets script headings fall back gracefully for
   Indic/Sinhala text while Latin text keeps the hand-lettered look. */
.font-Kaushan, .h-script { font-family: 'Kaushan Script', 'Dancing Script', 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Noto Sans Tamil', 'Noto Sans Sinhala', cursive; }
.font-Poppins, .font-ui { font-family: var(--iasa-font-ui); }

.page-wrap {
    position: relative; z-index: 1;
    max-width: 1180px; margin: 0 auto;
    padding: 96px 24px 64px;
}

/* ---------- header / nav ---------- */
.iasa-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1050;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--iasa-border);
}
.iasa-nav .navbar-brand img { height: 46px; width: auto; }
.iasa-nav .nav-link {
    font-family: var(--iasa-font-ui); font-size: 14.5px; font-weight: 500;
    color: var(--iasa-navy); padding: 8px 14px; border-radius: 12px;
}
.iasa-nav .nav-link:hover { background: rgba(40, 186, 237, 0.12); color: var(--iasa-navy); }
.iasa-nav .nav-link.active { color: var(--iasa-teal); font-weight: 600; }

.home_btns, .btn-pill {
    border-radius: var(--iasa-radius-pill);
    background: linear-gradient(0deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 100%), var(--iasa-grad-pill);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
    display: inline-flex; padding: 8px 22px; justify-content: center; align-items: center; gap: 10px;
    color: #FFF !important; font-size: 15px; font-weight: 700; line-height: 150%;
    letter-spacing: -0.528px; font-family: var(--iasa-font-body) !important;
    border: none; outline: none;
}
.home_btns:hover, .btn-pill:hover { color: #fff !important; filter: brightness(1.08); }

.btn-iasa {
    background: var(--iasa-grad-primary); color: #fff !important;
    border: none; border-radius: var(--iasa-radius-pill);
    padding: .65rem 1.5rem; font-family: var(--iasa-font-ui); font-size: 14.5px;
}
.btn-iasa:hover { filter: brightness(1.1); color: #fff !important; }
.btn-iasa-outline {
    background: #fff; color: var(--iasa-teal) !important;
    border: 1.5px solid var(--iasa-teal); border-radius: var(--iasa-radius-pill);
    padding: .6rem 1.4rem; font-family: var(--iasa-font-ui); font-size: 14px;
}
.btn-iasa-outline:hover { background: rgba(45, 134, 173, 0.08); }
.btn-warm {
    background: var(--iasa-grad-warm); color: var(--iasa-navy) !important;
    border: none; border-radius: var(--iasa-radius-pill);
    padding: .6rem 1.4rem; font-family: var(--iasa-font-ui); font-weight: 600; font-size: 14px;
}

/* ---------- cards ---------- */
.card-soft {
    background: #fff; border-radius: var(--iasa-radius);
    box-shadow: var(--iasa-shadow-soft);
    border: 1px solid rgba(45, 134, 173, 0.12);
}
.card-soft .card-header {
    background: transparent; border-bottom: 1px solid rgba(45, 134, 173, 0.12);
    font-family: var(--iasa-font-ui); font-weight: 600; color: var(--iasa-navy);
}
.card-accent { border-left: 4px solid var(--iasa-teal); }
.card-ribbon-top { border-top: 4px solid transparent;
    border-image: var(--iasa-grad-ribbon) 1; border-radius: 0 0 var(--iasa-radius) var(--iasa-radius); }

.service-card { transition: transform .25s ease, box-shadow .25s ease; height: 100%; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(40,186,237,0.18); }
.service-card .icon-wrap {
    width: 58px; height: 58px; border-radius: 16px; display: flex;
    align-items: center; justify-content: center; font-size: 24px; color: #fff;
    background: var(--iasa-grad-primary); margin-bottom: 14px;
}
.service-card.warm .icon-wrap { background: var(--iasa-grad-warm); color: var(--iasa-navy); }
.service-card.explore .icon-wrap { background: var(--iasa-grad-explore); }
.service-card.pastel .icon-wrap { background: var(--iasa-grad-pastel); color: var(--iasa-navy); }

/* ---------- status badges ---------- */
.badge-status {
    font-family: var(--iasa-font-ui); font-size: 12px; font-weight: 600;
    border-radius: 20px; padding: 5px 12px;
}
.badge-status.requested  { background: #FFF4D6; color: #8a6100; }
.badge-status.confirmed  { background: #DDF3FF; color: #035c86; }
.badge-status.completed  { background: #DFF7E8; color: #14693a; }
.badge-status.cancelled  { background: #f2f2f2; color: #666; }
.badge-status.no_show    { background: #FFE4E4; color: #a33; }
.badge-status.pending    { background: #FFF4D6; color: #8a6100; }
.badge-status.verified   { background: #DFF7E8; color: #14693a; }

/* ---------- clearance timeline ---------- */
.steps { display: flex; gap: 0; flex-wrap: wrap; }
.step { flex: 1 1 0; min-width: 110px; text-align: center; position: relative;
    font-family: var(--iasa-font-ui); font-size: 12.5px; color: #8aa0b8; padding-top: 30px; }
.step::before {
    content: ''; width: 22px; height: 22px; border-radius: 50%;
    background: #e3edf5; border: 2px solid #c4d7e6;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
.step::after {
    content: ''; position: absolute; top: 10px; left: calc(50% + 13px); right: calc(-50% + 13px);
    height: 2px; background: #d7e5f0;
}
.step:last-child::after { display: none; }
.step.reached { color: var(--iasa-navy); font-weight: 600; }
.step.reached::before { background: var(--iasa-sky); border-color: var(--iasa-teal); }

/* ---------- ratings ---------- */
.stars { color: #FFC83D; letter-spacing: 2px; }
.dim-row { display: flex; justify-content: space-between; align-items: center;
    font-family: var(--iasa-font-ui); font-size: 13.5px; padding: 4px 0; }
.rate-scale { display: flex; gap: 14px; flex-wrap: wrap; }
.rate-scale label { font-family: var(--iasa-font-ui); font-size: 14px; cursor: pointer; }
.rate-scale input { margin-right: 4px; }

/* ---------- forms & tables ---------- */
.form-label { font-family: var(--iasa-font-ui); font-weight: 500; font-size: 14px; }
.form-text { font-family: var(--iasa-font-ui); font-size: 12.5px; }
.form-control:focus, .form-select:focus {
    border-color: var(--iasa-sky);
    box-shadow: 0 0 0 .2rem rgba(40, 186, 237, 0.18);
}
.table { font-family: var(--iasa-font-ui); font-size: 14px; }
.table thead th { color: var(--iasa-navy); font-weight: 600; border-bottom-color: var(--iasa-teal); }

/* ---------- misc ---------- */
.quote-line { font-family: var(--iasa-font-script); font-size: 20px; color: var(--iasa-teal); }
.disclaimer {
    background: #FFF9E8; border: 1px solid #F2DFA6; border-radius: 12px;
    padding: 12px 16px; font-family: var(--iasa-font-ui); font-size: 13px; color: #6b5a13;
}
.footer-iasa {
    position: relative; z-index: 1;
    background: #EFEFEF; padding: 28px 0 22px; margin-top: 48px;
    font-family: var(--iasa-font-ui); font-size: 13.5px; color: var(--iasa-navy);
}
.footer-iasa img { height: 40px; }
.empty-state { text-align: center; padding: 36px 12px; color: #7d93ab; font-family: var(--iasa-font-ui); }
.empty-state i { font-size: 34px; color: var(--iasa-sky-2); margin-bottom: 10px; display: block; }

.avatar-circle {
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--iasa-grad-pastel); color: var(--iasa-navy);
    font-family: var(--iasa-font-ui); font-weight: 700; font-size: 19px; flex-shrink: 0;
}
.chip {
    display: inline-block; font-family: var(--iasa-font-ui); font-size: 12px;
    background: rgba(40, 186, 237, 0.12); color: var(--iasa-teal);
    border-radius: 14px; padding: 3px 11px; margin: 2px;
}
.chip.warm { background: #FFF1DC; color: #9a6312; }

/* ---------- wellness — survivor need picker ---------- */
.need-pick { transition: border-color .15s ease, box-shadow .15s ease; }
.need-pick.picked { border: 1px solid var(--iasa-teal); box-shadow: 0 6px 18px rgba(45,134,173,0.18); }

/* ---------- secure messaging (Halo-style) ---------- */
.msg-stream { display: flex; flex-direction: column; gap: 10px; max-height: 54vh; overflow-y: auto; padding: 4px 2px; }
.msg-row { display: flex; flex-direction: column; align-items: flex-start; }
.msg-row.mine { align-items: flex-end; }
.msg-bubble { max-width: 78%; background: #fff; border: 1px solid rgba(45,134,173,0.14); border-radius: 14px; padding: 9px 13px; box-shadow: var(--iasa-shadow-soft); }
.msg-row.mine .msg-bubble { background: #eef7fc; border-color: rgba(40,186,237,0.28); }
.msg-receipt { font-family: var(--iasa-font-ui); font-size: 11px; color: #9ab0c5; margin-top: 3px; }
.thread-row:hover { background: rgba(40,186,237,0.06); }

/* ---------- accessibility & responsive polish ---------- */
/* Skip link: first focusable element, hidden until focused. */
.skip-link {
    position: absolute; left: 12px; top: -56px; z-index: 2000;
    background: var(--iasa-navy); color: #fff !important;
    padding: 10px 18px; border-radius: 0 0 12px 12px;
    font-family: var(--iasa-font-ui); font-size: 14px; font-weight: 600;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; }

/* Visible keyboard-focus ring on the brand colour (mouse clicks unaffected). */
:focus-visible { outline: 3px solid var(--iasa-sky); outline-offset: 2px; }
.btn-iasa:focus-visible, .btn-iasa-outline:focus-visible, .btn-warm:focus-visible,
.home_btns:focus-visible, .btn-pill:focus-visible {
    outline: 3px solid var(--iasa-navy); outline-offset: 2px;
}
main:focus { outline: none; }  /* programmatic focus target, no ring */

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
    .service-card:hover { transform: none; }
}

/* Second-opinion case workspace: compact, calm, and readable on mobile. */
.so-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.so-step { position: relative; padding-top: 18px; color: #7890a8; font: 500 11px/1.3 var(--iasa-font-ui); }
.so-step::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 4px; border-radius: 8px; background: #dfeaf2; }
.so-step.complete::before { background: var(--iasa-teal); }
.so-step.current::before { background: var(--iasa-grad-pill); box-shadow: 0 0 0 3px rgba(40,186,237,.12); }
.so-step.complete, .so-step.current { color: var(--iasa-navy); font-weight: 600; }
.so-readiness { height: 8px; overflow: hidden; border-radius: 999px; background: #e5eef5; }
.so-readiness > span { display: block; height: 100%; border-radius: inherit; background: var(--iasa-grad-pill); }
.so-check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(12,32,77,.08); font: 13px/1.45 var(--iasa-font-ui); }
.so-check:last-child { border-bottom: 0; }
.so-check i { margin-top: 3px; color: #91a5b8; }
.so-check.ready i { color: #26835a; }
.so-case-card { display: block; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.so-case-card:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(12,32,77,.13); }
.so-record { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(45,134,173,.15); border-radius: 12px; background: rgba(255,255,255,.54); }
.so-report-section { padding: 18px 0; border-bottom: 1px solid rgba(12,32,77,.1); }
.so-report-section:last-child { border-bottom: 0; }
@media (max-width: 767.98px) {
    .so-progress { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
    .so-step { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .so-case-card { transition: none; } .so-case-card:hover { transform: none; } }

/* Symptom Safety: shares the calm card language, with restrained clinical states. */
.symptom-tier { display:inline-flex; align-items:center; border-radius:999px; padding:5px 10px; font:600 11px/1.2 var(--iasa-font-ui); }
.symptom-tier.routine { background:#e8f5ee; color:#216844; }
.symptom-tier.priority { background:#fff2cf; color:#7a5700; }
.symptom-tier.urgent { background:#ffe2e2; color:#9b2929; }
.symptom-result-routine { border-left-color:#4a9d73 !important; }
.symptom-result-priority { border-left-color:#d39a22 !important; }
.symptom-result-urgent { border-left-color:var(--iasa-danger) !important; }
.symptom-question { min-width:0; margin:0 0 18px; padding:18px; border:1px solid rgba(45,134,173,.16); border-radius:14px; background:rgba(255,255,255,.5); }
.symptom-question legend { float:none; width:auto; margin-bottom:8px; }
.symptom-question ul { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.symptom-question li label { display:flex; align-items:center; gap:6px; font:13px var(--iasa-font-ui); cursor:pointer; }
.symptom-instruction { padding:18px; border-radius:14px; background:rgba(246,251,255,.82); border:1px solid rgba(45,134,173,.16); font-size:16px; line-height:1.65; }
.symptom-instruction p:last-child { margin-bottom:0; }
.symptom-answer { padding:12px 0; border-bottom:1px solid rgba(12,32,77,.09); }
.symptom-answer:last-child { border-bottom:0; }
.symptom-list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid rgba(12,32,77,.09); color:inherit; }
.symptom-list-row:last-child { border-bottom:0; }
.symptom-list-row:hover { color:inherit; }
@media (max-width:575.98px) { .symptom-list-row { align-items:flex-start; } .symptom-question { padding:14px; } }

/* Tighter spacing + comfortable tap targets on small screens. */
@media (max-width: 575.98px) {
    .page-wrap { padding: 84px 16px 48px; }
    .footer-iasa { text-align: center; }
    .footer-iasa .text-md-end { text-align: center !important; }
    .iasa-nav .nav-link { padding: 10px 14px; }
    .display-6 { font-size: 1.8rem; }
}

/* ---------- quality badges (plan §6, opt-in public) ---------- */
.quality-badge {
    display: inline-block; font-family: var(--iasa-font-ui); font-size: 12px; font-weight: 600;
    background: var(--iasa-grad-warm); color: var(--iasa-navy);
    border-radius: 14px; padding: 4px 12px; margin: 2px;
    box-shadow: 0 1px 4px rgba(255, 140, 69, 0.28);
}

/* ---------- patient dashboard (My Care) ---------- */
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    text-align: center; padding: 18px 10px; border-radius: var(--iasa-radius);
    background: rgba(40, 186, 237, 0.06); border: 1px solid var(--iasa-border);
    font-family: var(--iasa-font-ui); font-size: 13px; font-weight: 500; color: var(--iasa-navy);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.quick-tile:hover { transform: translateY(-2px); background: rgba(40, 186, 237, 0.12); box-shadow: var(--iasa-shadow-soft); color: var(--iasa-navy); }
/* Legacy flat badge — only applies to a DIRECT <i> child now. The tiles on
   /telehealth/me/ wrap their glyph in `.ic .gN`, which brings the Command
   Center's twelve colour plates and their per-glyph animations (tele_icons.css)
   instead of one teal square repeated nineteen times. */
.quick-tile > i {
    width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px; color: #fff;
    background-image: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 52%),
                      linear-gradient(150deg, var(--iasa-teal), var(--iasa-sky));
    box-shadow: 0 6px 13px rgba(40,134,173,.35), inset 0 1px 1px rgba(255,255,255,.5), inset 0 -2px 4px rgba(0,0,0,.14);
}
.quick-tile .q-badge {
    font-style: normal; background: var(--iasa-magenta); color: #fff; border-radius: 10px;
    padding: 0 7px; font-size: 11px; margin-left: 2px;
}
.todo-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
    background: #fffaf2; border: 1px solid rgba(255, 140, 69, 0.25); color: var(--iasa-navy);
    font-size: 14px; transition: background .15s ease;
}
.todo-row:hover { background: #fff3e0; color: var(--iasa-navy); }
.todo-ic {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--iasa-grad-warm); color: var(--iasa-navy);
}

/* ---------- reschedule slot picker ---------- */
.slot-pick {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--iasa-border); background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.slot-pick:hover { border-color: var(--iasa-sky); background: rgba(40, 186, 237, 0.06); }
.slot-pick:has(input:checked) { border-color: var(--iasa-teal); background: rgba(45, 134, 173, 0.10); }
.slot-pick .slot-when { font-weight: 500; }

/* ---------- in-platform 1:1 call ---------- */
.call-stage {
    position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0C204D;
    border-radius: var(--iasa-radius); overflow: hidden; box-shadow: var(--iasa-shadow-soft);
}
.call-stage .video-remote { width: 100%; height: 100%; object-fit: cover; background: #0C204D; }
.call-stage .video-local {
    position: absolute; right: 14px; bottom: 14px; width: 26%; max-width: 220px; min-width: 120px;
    aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.6);
    background: #0a1a3d; box-shadow: 0 4px 14px rgba(0,0,0,.35); z-index: 3;
}
body.call-audio-only .call-stage .video-local { display: none; }
.remote-placeholder {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #cfe6f6; font-family: var(--iasa-font-ui); text-align: center; padding: 20px; z-index: 1;
}
.remote-placeholder i { font-size: 40px; opacity: .8; }
.call-join {
    position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
    background: rgba(12, 32, 77, 0.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    color: #fff; padding: 20px;
}
.call-join .join-ic {
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--iasa-grad-pill); font-size: 26px; color: #fff;
}
.call-controls { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.call-btn {
    width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
    background: #fff; color: var(--iasa-navy); border: 1px solid var(--iasa-border);
    font-size: 18px; box-shadow: var(--iasa-shadow-soft); transition: transform .12s ease, background .12s ease;
}
.call-btn:hover { transform: translateY(-2px); }
.call-btn.off { background: #e9eef5; color: #6c87a3; }
.call-btn.hang { background: var(--iasa-danger); color: #fff; border-color: var(--iasa-danger); }

@media (max-width: 575.98px) {
    .quick-grid { grid-template-columns: 1fr 1fr; }
    .call-controls { gap: 10px; }
}

/* ===========================================================================
   LIQUID GLASS CONSISTENCY LAYER (v0.12)
   Apple-style glassmorphism applied globally so EVERY page inherits it:
   frosted cards, liquid pill buttons with lift/press physics, glass rims.
   Sits at the end of the sheet on purpose — it refines the rules above.
   =========================================================================== */

/* Buttons — one liquid feel everywhere. */
.home_btns, .btn-pill, .btn-iasa, .btn-iasa-outline, .btn-warm, .wz-btn {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 18px rgba(12, 32, 77, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
    will-change: transform;
}
.home_btns:hover, .btn-pill:hover, .btn-iasa:hover, .btn-warm:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(12, 32, 77, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.home_btns:active, .btn-pill:active, .btn-iasa:active, .btn-iasa-outline:active, .btn-warm:active {
    transform: translateY(0) scale(0.975);
    box-shadow: 0 4px 12px rgba(12, 32, 77, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-iasa-outline {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
    border: 1.5px solid rgba(45, 134, 173, 0.55);
    box-shadow: 0 4px 14px rgba(12, 32, 77, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn-iasa-outline:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
}

/* Cards — frosted over the nature backdrop instead of flat white. */
.card-soft {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.68));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 26px rgba(12, 32, 77, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Nav + footer pick up the same frost. */
.iasa-nav {
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}

/* Form controls: glass fields that solidify on focus. */
.form-control, .form-select, .wz-input {
    background-color: rgba(255, 255, 255, 0.78);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, .wz-input:focus {
    background-color: #fff;
    border-color: var(--iasa-sky);
    box-shadow: 0 0 0 3px rgba(40, 186, 237, 0.16);
}

/* Chips get a soft glass rim too. */
.chip {
    border: 1px solid rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Respect users who prefer stillness. */
@media (prefers-reduced-motion: reduce) {
    .home_btns, .btn-pill, .btn-iasa, .btn-iasa-outline, .btn-warm, .wz-btn,
    .home_btns:hover, .btn-iasa:hover, .btn-warm:hover {
        transition: none;
        transform: none;
    }
}