/* ================================================================
   features.css — Bio Intelligence Wallet page
   ================================================================ */

/* ── Base ─────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #f4f4f8;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #111;
    overflow-x: hidden;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.feat-hero {
    text-align: center;
    padding: 140px 24px 72px;
    max-width: 680px;
    margin: 0 auto;
}

.feat-hero-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #e8651a;
    background: rgba(232, 101, 26, 0.1);
    border: 1px solid rgba(232, 101, 26, 0.25);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 22px;
}

.feat-hero-intro {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(13, 13, 18, 0.5);
    max-width: 560px;
    margin: 0 auto 22px;
}

.feat-hero-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(38px, 7vw, 64px);
    font-weight: 600;
    line-height: 1.1;
    color: #0d0d12;
    margin-bottom: 20px;
}

.feat-hero-title em {
    font-style: italic;
    color: #e8651a;   /* dusk orange */
}

.feat-hero-sub {
    font-size: 17px;
    color: #666;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto;
}

/* ── Side-by-side layout wrapper ─────────────────────────────── */
.biw-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px 80px;
    width: 100%;
}

/* ── Wallet Section ───────────────────────────────────────────── */
.biw-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    flex: 0 0 380px;
    position: sticky;
    top: 100px;
}

.biw-hint {
    font-size: 13px;
    font-weight: 500;
    color: rgba(17, 17, 17, 0.4);
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}

/* ── The big indigo pocket (wallet body) ──────────────────────── */
.biw-pocket-outer {
    width: 100%;
    max-width: 380px;
    background-color: #0c3a5e;
    background-image:
        /* Base gradient */
        linear-gradient(160deg, #0c3a5e 0%, #0284c7 100%),
        /* Diagonal thread — one direction */
        repeating-linear-gradient(45deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.035) 3px,
            rgba(255, 255, 255, 0.035) 4px),
        /* Diagonal thread — cross direction */
        repeating-linear-gradient(-45deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.025) 3px,
            rgba(255, 255, 255, 0.025) 4px);
    background-blend-mode: normal, overlay, overlay;
    border-radius: 32px;
    padding: 14px 14px 24px;
    box-shadow:
        0 28px 70px rgba(2, 132, 199, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Thread texture overlay via pseudo-element for better browser support */
.biw-pocket-outer::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.04) 3px,
            rgba(255, 255, 255, 0.04) 4px),
        repeating-linear-gradient(-45deg,
            transparent 0px,
            transparent 3px,
            rgba(255, 255, 255, 0.025) 3px,
            rgba(255, 255, 255, 0.025) 4px);
    pointer-events: none;
    z-index: 0;
}

/* Keep all pocket children above the texture */
.biw-pocket-outer>* {
    position: relative;
    z-index: 1;
}

/* Stitched hem — dashed thread line inset from wallet edge, like a sewn pocket */
.biw-pocket-outer::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
    border-radius: 26px;
    pointer-events: none;
    z-index: 2;
}

/* ── Stacked wallet cards inside the pocket ───────────────────── */
.biw-strips {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
    /* Negative gap creates the stacked overlap effect */
    gap: 0;
}

.biw-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    /* Each card overlaps the one below it — wallet stacking effect */
    margin-bottom: -28px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Last card (front) sits on top flush */
.biw-strip--front {
    margin-bottom: 0;
    z-index: 10;
}

.biw-strip:nth-child(1) {
    z-index: 1;
    border-radius: 18px 18px 0 0;
}

.biw-strip:nth-child(2) {
    z-index: 2;
    border-radius: 18px 18px 0 0;
}

.biw-strip:nth-child(3) {
    z-index: 3;
    border-radius: 18px 18px 0 0;
}

.biw-strip:nth-child(4) {
    z-index: 4;
    border-radius: 18px 18px 0 0;
}

.biw-strip:nth-child(5) {
    z-index: 10;
    border-radius: 18px 18px 0 0;
}

.biw-strip:hover {
    transform: translateY(-6px);
    filter: brightness(1.08);
}

.biw-strip:active {
    transform: scale(0.98);
}

.biw-strip span:first-child {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.01em;
}

.biw-strip span:last-child {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}



/* Shine on each card */
.biw-strip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 100%);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
}

/* ── Active / front card (full, inside pocket) ────────────────── */
.biw-active-card {
    border-radius: 20px;
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    margin-bottom: 10px;
    transition: background 0.4s ease;
    min-height: 120px;
}

.biw-active-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.biw-active-mid {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.biw-active-icon {
    font-size: 36px;
}

.biw-active-stat {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    line-height: 1.4;
}

.biw-active-bot {
    position: relative;
    z-index: 1;
}

/* ── Shared card text styles ──────────────────────────────────── */
.biw-card-name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.01em;
}

.biw-card-score {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.biw-card-chip {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 4px 11px;
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    display: inline-block;
}

/* Decorative circles on cards */
.biw-card-deco {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.biw-card-deco--1 {
    width: 180px;
    height: 180px;
    top: -60px;
    right: -40px;
    background: rgba(255, 255, 255, 0.1);
}

.biw-card-deco--2 {
    width: 120px;
    height: 120px;
    bottom: -50px;
    left: 10px;
    background: rgba(255, 255, 255, 0.07);
}

/* Card colour gradients — applied to strips AND active card */
/* User Data — warm amber/orange (front card) */
.biw-userdata {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 55%, #ef4444 100%);
}

/* Devices — electric blue/teal */
.biw-devices {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 50%, #06b6d4 100%);
}

/* Clinical — rose/crimson */
.biw-clinical {
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 55%, #fb7185 100%);
}

/* Environment — forest green */
.biw-environment {
    background: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 100%);
}

/* Labs — deep indigo/violet */
.biw-labs {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
}

/* ── Pocket body (score + button) ─────────────────────────────── */
.biw-pocket-body {
    text-align: center;
    padding: 24px 8px 0;
    position: relative;
    border: 1.5px dashed rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    margin: 8px 0 0;
    padding-bottom: 16px;
}

/* Crescent arc thread — ends touch the outer wallet stitching lines */
.biw-pocket-body::before {
    content: '';
    position: absolute;
    top: -42px;
    left: -7px;
    width: calc(100% + 14px);
    height: 42px;
    border-bottom: 1.5px dashed rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    pointer-events: none;
}


.biw-pocket-score-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 6px;
}

.biw-pocket-score {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 52px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
    margin-bottom: 18px;
    letter-spacing: -2px;
}

.biw-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 9px 22px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(8px);
}

.biw-open-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.biw-open-btn:active {
    transform: scale(0.97);
}

.biw-open-icon {
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* ── Card tabs ────────────────────────────────────────────────── */
.biw-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
    max-width: 420px;
}

.biw-tab {
    border: none;
    outline: none;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.1s;
    font-family: 'Inter', sans-serif;
}

.biw-tab:hover {
    background: rgba(0, 0, 0, 0.1);
}

.biw-tab:active {
    transform: scale(0.96);
}

.biw-tab--active {
    background: #6366f1;
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

/* ── Explainability section ───────────────────────────────────── */
.biw-explain {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
}

.biw-panel {
    display: none;
    animation: panelIn 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.biw-panel--active {
    display: block;
}

@keyframes panelIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Panel header */
.biw-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-radius: 20px 20px 0 0;
    margin-bottom: 2px;
}

.biw-userdata-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(249, 115, 22, 0.08));
    border-top: 3px solid #f97316;
}

.biw-devices-header {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(6, 182, 212, 0.08));
    border-top: 3px solid #0ea5e9;
}

.biw-clinical-header {
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.1), rgba(251, 113, 133, 0.08));
    border-top: 3px solid #f43f5e;
}

.biw-environment-header {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(52, 211, 153, 0.08));
    border-top: 3px solid #10b981;
}

.biw-labs-header {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(139, 92, 246, 0.08));
    border-top: 3px solid #6366f1;
}

.biw-panel-icon {
    font-size: 32px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    flex-shrink: 0;
}

.biw-panel-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    color: #111;
}

.biw-panel-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    font-weight: 500;
}

.biw-panel-badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 12px;
    white-space: nowrap;
}

.biw-badge--green {
    background: rgba(52, 199, 89, 0.12);
    color: #059669;
    border: 1px solid rgba(52, 199, 89, 0.25);
}

.biw-badge--blue {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.25);
}

.biw-badge--amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.biw-badge--purple {
    background: rgba(167, 139, 250, 0.15);
    color: #7c3aed;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Nutrition specifics */
.biw-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 12px;
    background: #fff;
    padding: 20px;
    border-radius: 0 0 0 0;
}

.biw-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.05);
    border-radius: 16px;
    padding: 16px 12px;
}

.biw-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
}

.biw-stat-ring {
    position: relative;
    width: 72px;
    height: 72px;
}

.biw-stat-ring svg {
    width: 100%;
    height: 100%;
}

.biw-stat-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #f59e0b;
}

.biw-stat-val {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    text-align: center;
}

.biw-macro-card {
    background: rgba(245, 158, 11, 0.03);
    border-radius: 16px;
    padding: 16px;
}

.biw-macro-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 12px;
}

.biw-macro-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.biw-macro-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    width: 46px;
    flex-shrink: 0;
}

.biw-macro-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.biw-macro-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.biw-macro-val {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* Sleep specifics */
.biw-sleep-stages {
    background: #fff;
    padding: 20px;
}

.biw-stage-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 14px;
}

.biw-stage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.biw-stage-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    width: 40px;
}

.biw-stage-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
}

.biw-stage-fill {
    height: 100%;
    border-radius: 999px;
}

.biw-stage-val {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    width: 38px;
    text-align: right;
}

.biw-sleep-stats {
    display: flex;
    gap: 0;
    margin-top: 18px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 14px;
    overflow: hidden;
}

.biw-sleep-stat {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    border-right: 1px solid rgba(99, 102, 241, 0.1);
}

.biw-sleep-stat:last-child {
    border-right: none;
}

.biw-sleep-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #4f46e5;
    line-height: 1;
    margin-bottom: 3px;
}

.biw-sleep-stat-label {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

/* Activities specifics */
.biw-act-week {
    background: #fff;
    padding: 20px;
}

.biw-act-week-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 14px;
}

.biw-act-bars {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 80px;
}

.biw-act-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.biw-act-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    overflow: hidden;
}

.biw-act-bar {
    width: 100%;
    border-radius: 6px;
    transition: height 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.biw-act-bar--today {
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.4);
}

.biw-act-day {
    font-size: 10px;
    font-weight: 600;
    color: #999;
}

.biw-act-day--today {
    color: #10b981;
}

.biw-act-metrics {
    display: flex;
    gap: 0;
    background: rgba(5, 150, 105, 0.05);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 12px;
}

.biw-act-metric {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    border-right: 1px solid rgba(5, 150, 105, 0.1);
}

.biw-act-metric:last-child {
    border-right: none;
}

.biw-act-metric-val {
    font-size: 17px;
    font-weight: 700;
    color: #059669;
    margin-bottom: 3px;
}

.biw-act-metric-label {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

/* Vitals specifics */
.biw-vitals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: #fff;
    padding: 20px;
}

.biw-vital-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.biw-vital-card--alert {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
}

.biw-vital-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.biw-vital-val {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    line-height: 1;
}

.biw-vital-val span {
    font-size: 13px;
    font-weight: 500;
    color: #888;
}

.biw-vital-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-top: 2px;
}

.biw-vital-range {
    font-size: 11px;
    color: #34C759;
    font-weight: 500;
}

.biw-vital-range--warn {
    color: #d97706;
}

/* Moods specifics */
.biw-mood-week {
    background: #fff;
    padding: 20px;
}

.biw-mood-week-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 14px;
}

.biw-mood-dots {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.biw-mood-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.biw-mood-dot {
    width: 36px;
    height: calc(var(--v) * 5px + 10px);
    border-radius: 999px;
    min-height: 16px;
    transition: height 0.5s ease;
}

.biw-mood-day {
    font-size: 10px;
    font-weight: 600;
    color: #aaa;
}

.biw-mood-day--today {
    color: #34d399;
}

.biw-mood-val {
    font-size: 11px;
    font-weight: 700;
    color: #555;
}

.biw-mood-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    padding: 12px 20px 20px;
}

.biw-mood-tag {
    font-size: 12px;
    font-weight: 600;
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 999px;
    padding: 5px 12px;
}

/* ── Alison insight block (shared) ───────────────────────────── */
.biw-alison-insight {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(99, 102, 241, 0.04);
    border-radius: 0 0 20px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.biw-alison--blue {
    background: rgba(79, 70, 229, 0.05);
}

.biw-alison--green {
    background: rgba(5, 150, 105, 0.05);
}

.biw-alison--amber {
    background: rgba(245, 158, 11, 0.06);
}

.biw-alison--purple {
    background: rgba(124, 58, 237, 0.05);
}

.biw-alison-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}

.biw-alison-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 5px;
}

.biw-alison-text p {
    font-size: 13.5px;
    color: #444;
    line-height: 1.6;
}

/* ── CTA ──────────────────────────────────────────────────────── */
.feat-cta {
    padding: 80px 24px 100px;
}

.feat-cta-inner {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.feat-cta-inner h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 600;
    color: #0d0d12;
    line-height: 1.2;
    margin-bottom: 14px;
}

.feat-cta-inner p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 28px;
}

/* ── Spatial Intelligence Section ────────────────────────────── */
.si-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 1160px;
    margin: 0 auto;
    padding: 80px 40px 100px;
    position: relative;
}

/* ── Page-level header ────────────────────────────────────────── */
.si-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 44px;
}

/* ══ Dark glass app frame ═════════════════════════════════════════ */
.si-app-frame {
    width: 100%;
    max-width: 1040px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(10, 13, 26, 0.88);
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 40px 100px rgba(0, 0, 0, 0.55),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ── Top bar ──────────────────────────────────────────────────── */
.si-app-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    height: 52px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.si-app-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.si-app-logo img {
    border-radius: 6px;
    opacity: 0.9;
}

.si-app-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 3px;
    flex-shrink: 0;
}

.si-tab {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    background: none;
    border: none;
    border-radius: 7px;
    padding: 5px 14px;
    cursor: default;
    transition: all 0.2s;
    letter-spacing: 0.02em;
}

.si-tab--active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.92);
}

.si-app-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 7px 14px;
    width: 220px;
    color: rgba(255, 255, 255, 0.35);
}

.si-app-search svg {
    flex-shrink: 0;
}

.si-app-search input {
    background: none;
    border: none;
    outline: none;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    width: 100%;
    cursor: default;
    font-family: inherit;
}

.si-app-search input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* ── App body row ─────────────────────────────────────────────── */
.si-app-body {
    display: flex;
    height: 540px;
}

/* ── Left nav rail ────────────────────────────────────────────── */
.si-app-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    width: 52px;
    flex-shrink: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
}

.si-nav-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
    transition: all 0.2s;
    flex-shrink: 0;
}

.si-nav-btn--active {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

/* ── 3D Scene — fills full app body now (no right panel) ─────── */
.si-scene {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* Three.js mount point — fills full scene */
#siCanvas {
    position: absolute;
    inset: 0;
}

#siCanvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ── Glass metric panels ──────────────────────────────────────── */
.si-glass {
    position: absolute;
    width: 148px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    padding: 12px 14px;
    z-index: 10;
    pointer-events: none;
}

/* Left column */
.si-glass--left {
    left: 12px;
}

.si-glass--right {
    right: 12px;
}

.si-glass--top {
    top: 40px;
}

.si-glass--mid {
    top: 50%;
    transform: translateY(-50%);
}

.si-glass--bot {
    bottom: 40px;
}

.si-glass-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
    margin-bottom: 4px;
}

.si-glass-value {
    font-size: 26px;
    font-weight: 700;
    color: rgba(13, 13, 18, 0.75);
    line-height: 1;
    margin-bottom: 8px;
}

.si-glass-value span {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.35);
    margin-left: 1px;
}

/* Progress bar */
.si-glass-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 6px;
}

.si-glass-fill {
    height: 100%;
    border-radius: 99px;
    background: var(--clr, #6366f1);
}

/* Dot indicator */
.si-glass-dots {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.si-glass-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c, #d1d5db);
}

/* Sub-label */
.si-glass-sub {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 500;
}

/* Ring (SpO₂) */
.si-glass-ring {
    position: relative;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
}

.si-glass-ring svg {
    width: 44px;
    height: 44px;
}

.si-glass-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #0284c7;
}

/* Loading text */
.si-loader {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* ── Shared bio-card glass style ─────────────────────────────── */
.bio-card {
    position: absolute;
    width: 200px;
    background: rgba(15, 15, 20, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    z-index: 20;
}

/* Positions */
.bio-card--tl {
    top: 24px;
    left: 24px;
}

.bio-card--tr {
    top: 24px;
    right: 24px;
}

.bio-card--ml {
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
}

.bio-card--br {
    bottom: 24px;
    right: 24px;
}

/* Header row */
.bio-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.bio-card-icon {
    font-size: 13px;
    line-height: 1;
}

.bio-card-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    flex: 1;
}

.bio-card-badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--bc, #6366f1);
    background: color-mix(in srgb, var(--bc, #6366f1) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--bc, #6366f1) 35%, transparent);
    border-radius: 99px;
    padding: 2px 7px;
}

/* Stat row */
.bio-card-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.bio-card-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bio-stat-n {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
}

.bio-stat-n small {
    font-size: 10px;
    font-weight: 400;
}

.bio-stat-l {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

/* Mini bar chart */
.bio-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
}

.bio-mini-bar {
    flex: 1;
    height: var(--h, 50%);
    background: var(--c, #6366f1);
    border-radius: 3px 3px 0 0;
    opacity: 0.85;
}

/* Nutrition macro rows */
.bio-macro-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bio-macro-r {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bio-macro-r>span {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    width: 28px;
    flex-shrink: 0;
}

.bio-macro-track {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    overflow: hidden;
}

.bio-macro-track div {
    height: 100%;
    border-radius: 99px;
}

/* SpO₂ ring */
.bio-spo2-ring {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.bio-spo2-ring svg {
    width: 48px;
    height: 48px;
}

.bio-spo2-ring span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
}

/* ── Heart Rate Glassmorphic Card ─────────────────────────────── */
.hr-card {
    position: absolute;
    bottom: 28px;
    left: 28px;
    width: 240px;
    background: rgba(15, 15, 20, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 10px 14px 10px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 20;
}

.hr-card-top {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.hr-card-icon {
    color: #f43f5e;
    display: flex;
    align-items: center;
}

.hr-card-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    flex: 1;
}

.hr-card-live {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 99px;
    padding: 2px 7px;
    animation: hrLivePulse 2s ease-in-out infinite;
}

@keyframes hrLivePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.hr-card-value {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.hr-card-value span {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    margin-left: 3px;
}

.hr-card-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.hr-card-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;
    flex-shrink: 0;
}

/* ECG graph */
.hr-card-graph {
    height: 40px;
    margin-bottom: 10px;
    overflow: hidden;
}

.hr-card-graph svg {
    width: 100%;
    height: 100%;
}

.hr-ecg-line {
    fill: none;
    stroke: #f43f5e;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.7));
}

.hr-scan {
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 1;
    animation: hrScan 2.8s linear infinite;
}

@keyframes hrScan {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(280px);
    }
}

/* Min / Max / Avg row */
.hr-card-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

.hr-card-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.hr-card-stat+.hr-card-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hr-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
}

.hr-stat-lbl {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

/* Data nodes */
.si-node {
    position: absolute;
    background: rgba(2, 132, 199, 0.18);
    border: 1px solid rgba(125, 211, 252, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    color: #7dd3fc;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    animation: siFloat 4s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.2);
}

.si-node span {
    pointer-events: none;
}

/* JS sets left/top each frame; transform is handled in spatial.js */
.si-node--1 {
    animation-delay: 0s;
}

.si-node--2 {
    animation-delay: 0.7s;
}

.si-node--3 {
    animation-delay: 1.4s;
}

.si-node--4 {
    animation-delay: 2.1s;
}

.si-node--5 {
    animation-delay: 2.8s;
}

.si-node--6 {
    animation-delay: 0.4s;
}

/* SVG connection lines — JS updates x/y each frame */
.si-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 20;
}

.si-lines line {
    stroke: rgba(125, 211, 252, 0.55);
    stroke-width: 1.5;
    stroke-dasharray: 5 7;
}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes siPulse {

    0%,
    100% {
        box-shadow: 0 0 6px rgba(14, 165, 233, 0.8);
    }

    50% {
        box-shadow: 0 0 12px rgba(14, 165, 233, 1.0);
    }
}

@keyframes siFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06);
    }
}

/* ── Footer (CTA only) ───────────────────────────────────────── */
.si-footer {
    width: 100%;
    max-width: 1040px;
    margin-top: 36px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   Right Data Panel  (.si-panel + .sip-*)   — DARK THEME
   ═══════════════════════════════════════════════════════════════ */
.si-panel {
    width: 300px;
    flex-shrink: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

/* Each panel stacks; JS toggles .sip--active */
.sip {
    position: absolute;
    inset: 0;
    padding: 22px 18px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sip--active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Default panel ───────────────────────────────────────────── */
.sip--default {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
}

.sip-score-wrap {
    position: relative;
    width: 80px;
    height: 80px;
}

.sip-score-ring {
    width: 80px;
    height: 80px;
}

.sip-score-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #818cf8;
    font-variant-numeric: tabular-nums;
}

.sip-score-label {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.03em;
}

.sip-score-hint {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.6;
    max-width: 200px;
}

.sip-domains {
    display: flex;
    gap: 10px;
    font-size: 18px;
    margin-top: 4px;
    opacity: 0.6;
}

/* ── Data panel header ───────────────────────────────────────── */
.sip-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.sip-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.sip-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
}

.sip-subtitle {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 1px;
}

.sip-badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--bc, #818cf8);
    background: color-mix(in srgb, var(--bc, #818cf8) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--bc, #818cf8) 30%, transparent);
    border-radius: 99px;
    padding: 3px 8px;
    white-space: nowrap;
}

/* ── Metric trio ─────────────────────────────────────────────── */
.sip-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
}

.sip-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 11px 6px;
    background: rgba(255, 255, 255, 0.03);
}

.sip-metric-val {
    font-size: 16px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sip-metric-lbl {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    letter-spacing: 0.03em;
}

/* ── Weekly bar chart ────────────────────────────────────────── */
.sip-mini-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 48px;
    padding: 0 2px;
}

.sip-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.sip-bar {
    width: 100%;
    height: var(--h, 50%);
    background: var(--c, #818cf8);
    border-radius: 3px 3px 0 0;
    opacity: 0.8;
}

.sip-bar-col>span {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── SpO₂ ring row ───────────────────────────────────────────── */
.sip-ring-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0;
}

.sip-ring-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.sip-ring-wrap svg {
    width: 60px;
    height: 60px;
}

.sip-ring-wrap span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.sip-ring-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sip-ring-stat {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

/* ── ECG graph ───────────────────────────────────────────────── */
.sip-ecg {
    height: 40px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.05);
}

.sip-ecg svg {
    width: 100%;
    height: 100%;
}

.sip-ecg-line {
    fill: none;
    stroke: #f87171;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.6));
}

.sip-ecg-scan {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1.5;
    animation: sipScan 2.8s linear infinite;
}

@keyframes sipScan {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(260px);
    }
}

.sip-ecg-stats {
    display: flex;
    justify-content: space-around;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
    margin-top: -4px;
}

/* ── Nutrition macro bars ────────────────────────────────────── */
.sip-macro-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sip-macro-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sip-macro-row>span:first-child {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
    width: 36px;
    flex-shrink: 0;
}

.sip-macro-row>span:last-child {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.sip-macro-bar {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 99px;
    overflow: hidden;
}

.sip-macro-bar>div {
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}

/* ── Alison insight ──────────────────────────────────────────── */
.sip-alison {
    background: rgba(129, 140, 248, 0.07);
    border: 1px solid rgba(129, 140, 248, 0.18);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: auto;
}

.sip-alison-name {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #a5b4fc;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.sip-alison p {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
}

.si-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 999px;
    padding: 5px 14px 5px 10px;
    margin-bottom: 18px;
}

.si-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0ea5e9;
    box-shadow: 0 0 6px #0ea5e9;
    animation: siPulse 2s ease-in-out infinite;
}

.si-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 600;
    line-height: 1.1;
    color: #0d0d12;
    margin-bottom: 16px;
}

.si-title em {
    font-style: italic;
    color: #0284c7;
}

.si-sub {
    font-size: 16px;
    color: #555;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto;
    /* centre within .si-header */
}

/* si-features removed — content now lives in the right panel */

.si-feat-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(2, 132, 199, 0.1);
    border: 1px solid rgba(2, 132, 199, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #0284c7;
    margin-top: 2px;
}

.si-features li strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #0d0d12;
    margin-bottom: 3px;
}

.si-features li p {
    font-size: 13.5px;
    color: #666;
    line-height: 1.55;
}

.si-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.si-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0284c7, #0ea5e9);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(2, 132, 199, 0.35);
    transition: transform 0.18s, box-shadow 0.18s;
}

.si-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(2, 132, 199, 0.45);
}

.si-cta-note {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .si-section {
        padding: 60px 16px 80px;
    }

    .si-app-bar {
        padding: 0 14px;
        gap: 12px;
    }

    .si-app-search {
        display: none;
    }

    .si-app-body {
        flex-direction: column;
        height: auto;
    }

    .si-app-nav {
        flex-direction: row;
        width: 100%;
        height: 44px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding: 0 12px;
        gap: 4px;
        justify-content: flex-start;
    }

    .si-scene {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        height: 380px;
    }

    .si-panel {
        width: 100%;
        min-height: 340px;
    }

    .sip {
        position: relative;
        inset: auto;
    }

    .biw-layout {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 0 20px 60px;
    }

    .biw-section {
        flex: none;
        width: 100%;
        position: static;
    }

    .biw-explain {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .biw-wallet {
        width: 290px;
    }

    .biw-card {
        width: 290px;
    }

    .biw-pocket {
        width: 290px;
    }

    .biw-panel-grid {
        grid-template-columns: 1fr;
    }

    .biw-vitals-grid {
        grid-template-columns: 1fr 1fr;
    }

    .feat-hero {
        padding: 120px 20px 56px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Hotspot Interaction System
   ═══════════════════════════════════════════════════════════════ */

/* ── All bio-cards + hr-card hidden by default ─────────────────── */
.bio-card {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bio-card--tl {
    transform: translate(0, 0) scale(0.88);
}

.bio-card--tr {
    transform: translate(0, 0) scale(0.88);
}

.bio-card--br {
    transform: translate(0, 0) scale(0.88);
}

/* --ml already has translateY(-50%) — keep it; just shrink */
.bio-card--ml {
    transform: translateY(calc(-50% + 6px)) scale(0.88);
}

.hr-card {
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 8px) scale(0.88);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Active state — visible ─────────────────────────────────────── */
.bio-card.is-active {
    opacity: 1;
    pointer-events: auto;
}

.bio-card--tl.is-active,
.bio-card--tr.is-active,
.bio-card--br.is-active {
    transform: translate(0, 0) scale(1);
}

.bio-card--ml.is-active {
    transform: translateY(-50%) scale(1);
}

.hr-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, 0) scale(1);
}

/* ── SVG connector lines overlay ────────────────────────────────── */
.hs-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    /* lines can draw outside the box slightly */
    z-index: 25;
    /* No viewBox — JS uses pixel coords matching the container */
}

.hs-lines line {
    stroke: rgba(255, 255, 255, 0.55);
    stroke-width: 1.5;
    stroke-dasharray: 5 6;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.hs-lines line.is-active {
    opacity: 1;
}

/* ── Hotspot button base ─────────────────────────────────────────── */
.hs {
    position: absolute;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    padding: 4px;
    /* JS sets left/top in px; this centres the dot on that point */
    transform: translate(-50%, -50%);
    /* Hidden until spatial.js positions them after model load */
    visibility: hidden;
}

/* Pill to the left of dot (card is on left side) */
.hs--left {
    flex-direction: row-reverse;
    gap: 7px;
}

/* Pill to the right of dot (card is on right side) */
.hs--right {
    flex-direction: row;
    gap: 7px;
}

/* ── Pulsing dot ─────────────────────────────────────────────────── */
.hs-ring {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    flex-shrink: 0;
    position: relative;
    animation: hsDotPulse 2.4s ease-out infinite;
}

/* Expanding sonar ring */
.hs-ring::before,
.hs-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    animation: hsRing 2.4s ease-out infinite;
}

.hs-ring::after {
    inset: -6px;
    border-color: rgba(255, 255, 255, 0.25);
    animation-delay: 0.6s;
}

@keyframes hsDotPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.18);
        opacity: 0.85;
    }
}

@keyframes hsRing {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    80% {
        transform: scale(2.4);
        opacity: 0;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

/* ── Pill label ──────────────────────────────────────────────────── */
.hs-pill {
    background: rgba(10, 10, 16, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 99px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    user-select: none;
}

/* ── Active / pressed state ──────────────────────────────────────── */
.hs.is-active .hs-ring {
    background: #fff;
    animation: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28), 0 0 10px rgba(255, 255, 255, 0.35);
}

.hs.is-active .hs-ring::before,
.hs.is-active .hs-ring::after {
    display: none;
}

.hs.is-active .hs-pill {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
}

/* ── Hover (non-active) ──────────────────────────────────────────── */
.hs:not(.is-active):hover .hs-pill {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ── Med-dashboard dot-only variant ─────────────────────────────── */
/* Smaller, non-interactive pulsing dot — no pill, no pointer */
.hs--dot-only {
    cursor: default;
    pointer-events: none;
    padding: 2px;
}
.hs--dot-only .hs-ring {
    width: 7px;
    height: 7px;
}
.hs--dot-only .hs-ring::before {
    inset: -2px;
}
.hs--dot-only .hs-ring::after {
    inset: -4px;
}

/* ═══════════════════════════════════════════════════════════════
   Health Dashboard Section  (.med-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ─────────────────────────────────────────── */
.med-section {
    max-width: 1160px;
    margin: 0 auto;
    padding: 80px 40px 60px;
}

.med-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 44px;
}

.med-intro-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #0d0d12;
    margin-bottom: 12px;
}

.med-intro-eyebrow-accent {
    color: #e8651a;   /* dusk orange */
}

.med-intro-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    color: #0d0d12;
    margin: 12px 0 14px;
}

.med-intro-title em {
    font-style: italic;
    color: #e8651a;   /* dusk orange */
}

.med-intro-sub {
    font-size: 16px;
    color: #555;
    line-height: 1.65;
}

/* ── Dark glass frame ────────────────────────────────────────── */
.med-frame {
    --mz-bg: #0e1117;
    --mz-bg2: #141820;
    --mz-panel: rgba(255, 255, 255, 0.045);
    --mz-border: rgba(255, 255, 255, 0.09);
    --mz-border2: rgba(255, 255, 255, 0.05);
    --mz-blue: #3b82f6;
    --mz-red: #ef4444;
    --mz-text: #e8eaf0;
    --mz-muted: rgba(255, 255, 255, 0.38);
    --mz-muted2: rgba(255, 255, 255, 0.18);
    --mz-green: #22c55e;
    --mz-amber: #f59e0b;

    border-radius: 22px;
    overflow: hidden;
    background: var(--mz-bg);
    color: var(--mz-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 40px 100px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ── Top bar ─────────────────────────────────────────────────── */
.med-topbar {
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: rgba(14, 17, 23, 0.85);
    border-bottom: 1px solid var(--mz-border2);
    gap: 20px;
}

.med-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--mz-text);
    flex-shrink: 0;
}

.med-brand-badge {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.45);
}

.med-nav-tabs {
    display: flex;
    gap: 5px;
}

.med-nav-tab {
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mz-muted);
    background: transparent;
    border: 1px solid transparent;
    cursor: default;
    transition: all 0.2s;
}

.med-nav-tab--active {
    background: var(--mz-blue);
    color: #fff;
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.4);
}

.med-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.med-search-box {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--mz-muted);
    width: 190px;
}

.med-search-box input {
    background: none;
    border: none;
    outline: none;
    color: var(--mz-text);
    font-size: 12px;
    width: 100%;
    font-family: inherit;
}

.med-search-box input::placeholder {
    color: var(--mz-muted);
}

.med-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    color: var(--mz-muted);
    position: relative;
}

.med-icon-btn--blue {
    background: var(--mz-blue);
    color: #fff;
    border-color: var(--mz-blue);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
}

.med-notif-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mz-red);
    border: 2px solid var(--mz-bg);
}

.med-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    cursor: default;
}

/* ── Main layout grid ────────────────────────────────────────── */
.med-layout {
    display: grid;
    grid-template-columns: 56px 1fr 1fr 264px;
    height: 560px;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.med-sidebar {
    border-right: 1px solid var(--mz-border2);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 6px;
    background: rgba(14, 17, 23, 0.6);
}

.med-side-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    color: var(--mz-muted);
    border: 1px solid transparent;
}

.med-side-btn svg {
    width: 17px;
    height: 17px;
}

.med-side-btn--active {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mz-red);
    border-color: rgba(239, 68, 68, 0.22);
}

.med-side-spacer {
    flex: 1;
}

/* ── Hero / heart panel ──────────────────────────────────────── */
.med-hero-panel {
    padding: 28px 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: visible;   /* allow hotspot pills to escape the panel edge */
    border-right: 1px solid var(--mz-border2);
    gap: 12px;
}

.med-hero-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mz-muted);
    margin-bottom: 2px;
}

.med-hero-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
}

/* Heart stage — now hosts Three.js canvas + hotspot markers */
.med-heart-stage {
    flex: 1;
    position: relative;
    min-height: 200px;
    overflow: visible;   /* allow hotspot pills to extend beyond canvas edge */
}

/* Three.js mount — fills stage absolutely */
#medCanvas {
    position: absolute;
    inset: 0;
}

#medCanvas canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.med-loader-txt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* Floating HR card */
.med-hr-float {
    position: absolute;
    bottom: 8%;
    left: 4%;
    background: rgba(20, 24, 32, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--mz-border);
    border-radius: 14px;
    padding: 12px 16px;
    min-width: 156px;
    z-index: 4;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.med-hr-float-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--mz-muted);
    margin-bottom: 3px;
}

.med-hr-float-val {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.med-hr-float-val span {
    font-size: 12px;
    color: var(--mz-muted);
    font-weight: 400;
}

.med-ecg-mini {
    margin-top: 8px;
}

.med-ecg-mini svg {
    width: 100%;
    height: 28px;
}

/* ECG animation */
@keyframes mzEcgScroll {
    from {
        stroke-dashoffset: 600;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.med-ecg-line-mini {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: mzEcgScroll 1.5s linear infinite;
}

.med-ecg-line {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: mzEcgScroll 2s linear infinite;
}

/* Organs row */
.med-organs-label {
    font-size: 10px;
    color: var(--mz-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    font-weight: 500;
}

.med-organs-row {
    display: flex;
    gap: 8px;
}

.med-organ-card {
    flex: 1;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 14px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.med-organ-card--selected {
    border-color: var(--mz-blue);
    background: rgba(59, 130, 246, 0.1);
}

.med-organ-card--selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--mz-blue), transparent);
}

.med-organ-icon {
    font-size: 22px;
    line-height: 1;
}

.med-organ-name {
    font-size: 9px;
    color: var(--mz-muted);
    font-weight: 500;
}

.med-organ-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--mz-blue);
    color: #fff;
    font-size: 7px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 20px;
}

/* ── Vitals panel ────────────────────────────────────────────── */
.med-vitals-panel {
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    border-right: 1px solid var(--mz-border2);
}

.med-vitals-panel::-webkit-scrollbar {
    width: 3px;
}

.med-vitals-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.med-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mz-text);
}

.med-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mz-blue);
    box-shadow: 0 0 8px var(--mz-blue);
    flex-shrink: 0;
    animation: mzBlink 2s infinite;
}

@keyframes mzBlink {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.3
    }
}

.med-vitals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.med-vital-tile {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 16px;
    padding: 14px;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.med-vt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.med-vt-label {
    font-size: 10px;
    color: var(--mz-muted);
    font-weight: 500;
    letter-spacing: 0.03em;
}

.med-vt-icon {
    color: var(--mz-muted2);
}

.med-vt-icon svg {
    width: 14px;
    height: 14px;
}

.med-vt-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #fff;
}

.med-vt-value span {
    font-size: 12px;
    color: var(--mz-muted);
    font-weight: 400;
    letter-spacing: 0;
}

.med-vt-sub {
    font-size: 10px;
    color: var(--mz-muted);
    font-family: 'DM Mono', 'Courier New', monospace;
    margin-top: 2px;
}

/* Mini bar chart */
.med-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin-top: 10px;
    height: 36px;
}

.med-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: rgba(255, 255, 255, 0.10);
}

.med-bar--hi {
    background: rgba(59, 130, 246, 0.65);
}

/* ECG chart */
.med-ecg-chart {
    margin-top: 10px;
    height: 44px;
}

.med-ecg-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.med-ecg-pill-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.med-ecg-pill {
    background: var(--mz-blue);
    border-radius: 8px;
    padding: 4px 10px 4px 7px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
}

.med-ecg-pill-sub {
    font-size: 9px;
    opacity: 0.7;
}

/* Wave chart */
.med-wave-chart {
    margin-top: 10px;
    height: 32px;
}

.med-wave-chart svg {
    width: 100%;
    height: 100%;
}

/* Body condition scroll */
.med-bc-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.med-bc-scroll::-webkit-scrollbar {
    height: 3px;
}

.med-bc-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.med-bc-card {
    min-width: 74px;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 14px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: default;
    flex-shrink: 0;
}

.med-bc-card--active {
    border-color: var(--mz-blue);
    background: rgba(59, 130, 246, 0.1);
}

.med-bc-icon {
    font-size: 26px;
    line-height: 1;
}

.med-bc-name {
    font-size: 9px;
    color: var(--mz-muted);
    font-weight: 500;
}

.med-bc-status {
    font-size: 8px;
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 600;
}

.med-bc-status--ok {
    background: rgba(34, 197, 94, 0.15);
    color: var(--mz-green);
}

.med-bc-status--warn {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mz-red);
}

/* ── Schedule panel ──────────────────────────────────────────── */
.med-schedule-panel {
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    background: rgba(14, 17, 23, 0.5);
}

.med-schedule-panel::-webkit-scrollbar {
    width: 3px;
}

.med-schedule-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

.med-next-checkup {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 16px;
    padding: 14px;
}

.med-nc-label {
    font-size: 9px;
    color: var(--mz-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    font-weight: 600;
}

.med-nc-date {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.med-nc-day {
    font-size: 11px;
    color: var(--mz-muted);
    margin-top: 2px;
}

.med-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.med-cal-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    color: var(--mz-muted);
    font-size: 11px;
}

.med-cal-month {
    font-size: 11px;
    font-weight: 600;
    color: var(--mz-text);
}

/* Doctors */
.med-doctors-label {
    font-size: 10px;
    color: var(--mz-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.med-doctor-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 12px;
    cursor: default;
}

.med-doctor-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.med-doctor-info {
    flex: 1;
}

.med-doctor-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--mz-text);
}

.med-doctor-spec {
    font-size: 10px;
    color: var(--mz-muted);
    margin-top: 1px;
}

.med-doctor-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mz-green);
    box-shadow: 0 0 6px var(--mz-green);
    flex-shrink: 0;
}

.med-consult-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--mz-blue);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 8px 28px rgba(59, 130, 246, 0.35);
    font-family: inherit;
    transition: all 0.2s;
}

.med-consult-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

/* Week stats */
.med-week-stats {
    background: var(--mz-panel);
    border: 1px solid var(--mz-border);
    border-radius: 14px;
    padding: 14px;
}

.med-week-title {
    font-size: 10px;
    color: var(--mz-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    font-weight: 600;
}

.med-week-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.med-week-row:last-child {
    margin-bottom: 0;
}

.med-week-row>span:first-child {
    font-size: 11px;
    color: var(--mz-muted);
    width: 52px;
}

.med-week-row>span:last-child {
    font-size: 11px;
    color: var(--mz-text);
    font-family: 'DM Mono', 'Courier New', monospace;
    width: 40px;
    text-align: right;
}

.med-week-track {
    flex: 1;
    margin: 0 10px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.med-week-track>div {
    height: 100%;
    border-radius: 2px;
}

/* med-layout reflow rules removed — proportional CSS scale is used instead */
/* ═══════════════════════════════════════════════════════════════
   VisionOS / Apple Vision Pro Room Stage
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer section override when inside VR stage ────────────── */
.med-section {
    padding-bottom: 0;   /* stage handles bottom spacing */
}

/* ── Full-bleed room photo container ─────────────────────────── */
.vr-stage {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    border-radius: 0;
    /* Subtle perspective tilt to feel spatial */
    perspective: 1400px;
}

.vr-room-bg {
    position: absolute;
    inset: 0;
    background: url('img/vr_room.png') center / cover no-repeat;
    /* Slight scale-up so vignette crops the edges cleanly */
    transform: scale(1.04);
    filter: brightness(0.88) saturate(0.9);
}

/* ── Lens vignette (rounded corners with fade, like a headset) ── */
.vr-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    /* Oval peripheral darkening — the signature Vision Pro look */
    background:
        radial-gradient(ellipse 78% 72% at 50% 50%,
            transparent 55%,
            rgba(0,0,0,0.35) 78%,
            rgba(0,0,0,0.72) 100%);
    /* Soft rounded crop on the very edges */
    mask-image: radial-gradient(ellipse 96% 90% at 50% 50%, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 96% 90% at 50% 50%, black 60%, transparent 100%);
}

/* ── Floating window wrapper (centred in the stage) ──────────── */
.vr-window-wrap {
    position: relative;
    z-index: 10;
    padding: 64px 40px 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;

    /* Subtle float animation */
    animation: vrFloat 6s ease-in-out infinite;
}

@keyframes vrFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}

/* ── Scale host: native 1040 px wide; JS applies transform ────── */
.vr-scale-host {
    width: 1040px;
    transform-origin: top center;
    /* height compensation is handled by JS (marginBottom trick) */
    flex-shrink: 0;
}

/* ── Apple visionOS browser chrome bar ───────────────────────── */
.vr-chrome-bar {
    width: 100%;
    max-width: 1040px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;

    /* Frosted glass chrome — authentic visionOS look */
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(32px) saturate(1.6);
    -webkit-backdrop-filter: blur(32px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px 18px 0 0;

    /* Glass shine on top edge */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        0 -2px 12px rgba(0,0,0,0.15);
}

.vr-chrome-nav {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.vr-chrome-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    cursor: default;
    transition: background 0.15s;
    flex-shrink: 0;
}

.vr-chrome-btn:hover { background: rgba(255,255,255,0.18); }

.vr-chrome-btn--tabs {
    border-radius: 9px;
    width: 32px;
}

/* URL / address pill */
.vr-chrome-address {
    flex: 1;
    max-width: 340px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    padding: 5px 14px 5px 10px;
    cursor: default;
}

.vr-chrome-lock {
    color: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.vr-chrome-url {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    text-align: center;
    letter-spacing: 0.01em;
    font-family: 'Inter', -apple-system, sans-serif;
}

.vr-chrome-reload {
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
}

.vr-chrome-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Override med-frame when inside VR stage ─────────────────── */
.vr-window-wrap .med-frame {
    /* Sharper top corners since chrome bar sits above */
    border-radius: 0 0 22px 22px;
    border-top: none;     /* chrome bar's bottom border acts as this */

    /* Floating spatial shadow */
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 40px 120px rgba(0, 0, 0, 0.75),
        0 80px 200px rgba(0, 0, 0, 0.45),
        0 4px 0 rgba(255,255,255,0.06);    /* subtle bottom rim */

    width: 100%;
    max-width: 1040px;
}

/* ── Responsive: reduce outer padding on small screens; scale handles the rest ── */
@media (max-width: 1100px) {
    .vr-window-wrap { padding: 40px 0 52px; overflow: hidden; }
    .vr-stage       { overflow: hidden; }
}

/* ═══════════════════════════════════════════════════════════════
   visionOS Spatial Glass — translucent overrides
   All scoped under .vr-window-wrap so they only apply inside the VR stage
   ═══════════════════════════════════════════════════════════════ */

/* Main frame: translucent + heavy blur so room bleeds through */
.vr-window-wrap .med-frame {
    background: rgba(8, 10, 20, 0.36) !important;
    backdrop-filter: blur(52px) saturate(1.7) brightness(0.92) !important;
    -webkit-backdrop-filter: blur(52px) saturate(1.7) brightness(0.92) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Top bar — lighter frosted tier */
.vr-window-wrap .med-topbar {
    background: rgba(255, 255, 255, 0.055) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar */
.vr-window-wrap .med-sidebar {
    background: rgba(0, 0, 0, 0.12) !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

/* Hero panel */
.vr-window-wrap .med-hero-panel {
    background: transparent !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

/* Vitals panel */
.vr-window-wrap .med-vitals-panel {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Schedule panel */
.vr-window-wrap .med-schedule-panel {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Individual tiles — ultra-light frosted */
.vr-window-wrap .med-vital-tile {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Doctor cards, checkup box, week stats */
.vr-window-wrap .med-doctor-item,
.vr-window-wrap .med-next-checkup,
.vr-window-wrap .med-week-stats {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Organ cards */
.vr-window-wrap .med-organ-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.vr-window-wrap .med-organ-card--selected {
    background: rgba(59, 130, 246, 0.18) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
}

/* Body condition cards */
.vr-window-wrap .med-bc-card {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.vr-window-wrap .med-bc-card--active {
    background: rgba(59, 130, 246, 0.18) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
}

/* Bar chart bars */
.vr-window-wrap .med-bar {
    background: rgba(255, 255, 255, 0.14) !important;
}

/* HR float card — slightly more opaque so it stays readable */
.vr-window-wrap .med-hr-float {
    background: rgba(14, 18, 32, 0.65) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ── Spatial glass — increased transparency pass ─────────────── */
.vr-window-wrap .med-frame {
    background: rgba(6, 8, 16, 0.22) !important;
    backdrop-filter: blur(64px) saturate(1.9) brightness(0.96) !important;
    -webkit-backdrop-filter: blur(64px) saturate(1.9) brightness(0.96) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.vr-window-wrap .med-topbar {
    background: rgba(255, 255, 255, 0.04) !important;
}

.vr-window-wrap .med-sidebar {
    background: rgba(255, 255, 255, 0.03) !important;
}

.vr-window-wrap .med-layout {
    background: transparent !important;
}

.vr-window-wrap .med-vitals-panel {
    background: rgba(255, 255, 255, 0.02) !important;
}

.vr-window-wrap .med-schedule-panel {
    background: rgba(255, 255, 255, 0.025) !important;
}

.vr-window-wrap .med-vital-tile {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.vr-window-wrap .med-doctor-item,
.vr-window-wrap .med-next-checkup,
.vr-window-wrap .med-week-stats {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Chrome bar — lighter frosted glass to not absorb room color */
.vr-chrome-bar {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(40px) saturate(2) brightness(1.08) !important;
    -webkit-backdrop-filter: blur(40px) saturate(2) brightness(1.08) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 -2px 12px rgba(0,0,0,0.12) !important;
}

.vr-chrome-url { color: rgba(30, 30, 40, 0.85) !important; }
.vr-chrome-lock { color: rgba(30, 30, 40, 0.55) !important; }
.vr-chrome-reload { color: rgba(30, 30, 40, 0.45) !important; }
.vr-chrome-btn { color: rgba(30, 30, 40, 0.7) !important; background: rgba(0,0,0,0.06) !important; }

.vr-chrome-address {
    background: rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Spatial Intelligence Explainer  (.si-explainer)
   ═══════════════════════════════════════════════════════════════ */

.si-explainer {
    padding: 96px 24px 80px;
    background: #fff;
    text-align: center;
}

.si-explainer-inner {
    max-width: 660px;
    margin: 0 auto;
}

.si-explainer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    background: #0d0d14;
    padding: 12px 24px;
    border-radius: 9999px;
    margin-bottom: 20px;
}

.si-explainer-badge .si-badge-dot {
    background: #ffffff;
    box-shadow: none;
}

.si-explainer-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    color: #0d0d12;
    margin: 0 0 22px;
    letter-spacing: -0.02em;
}

.si-explainer-body {
    font-size: 17px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 32px;
}

.si-explainer-body em {
    font-style: italic;
    color: #0d0d12;
}

.si-explainer-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.si-explainer-pills span {
    display: inline-block;
    background: #f4f4f6;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 99px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}