/* ============================================
   Divine Call — Lord Krishna Audio Call UI
   ============================================ */

:root {
    --bg-primary: #0a0a12;
    --bg-secondary: #12121f;
    --bg-card: #1a1a2e;
    --bg-card-hover: #222240;
    --gold: #FFD700;
    --gold-dim: #B8860B;
    --gold-glow: rgba(255, 215, 0, 0.15);
    --krishna-blue: #1a5fb4;
    --krishna-blue-light: #3584e4;
    --krishna-blue-dark: #0d3b7a;
    --text-primary: #f0e6d3;
    --text-secondary: #a89b8c;
    --text-dim: #6b6157;
    --accent-red: #e74c3c;
    --accent-green: #2ecc71;
    --accent-pink: #FF69B4;
    --saffron: #FF9933;
    --font-display: 'Cinzel', serif;
    --font-body: 'Noto Sans Devanagari', 'Cormorant Garamond', serif;
    --font-ui: 'Noto Sans Devanagari', 'Inter', sans-serif;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* ---- Particles Background ---- */
#particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

#particles .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 8s infinite ease-in-out;
}

@keyframes particleFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.6; }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-100vh) scale(1.2); }
}

/* ---- App Layout ---- */
#app {
    position: relative;
    z-index: 1;
    /* 100vh on iOS Safari counts the URL bar area even when it's visible,
       so the bottom of our content lands below the fold. 100dvh tracks the
       dynamic viewport so height always equals what's actually on screen.
       100vh is kept as the fallback for older browsers. */
    height: 100vh;
    height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
}

/* ---- Screens ---- */
.screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: scale(0.97);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* iOS Safari sometimes swallows vertical pan gestures on nested
       overflow:auto containers and eats them as URL-bar-show gestures.
       Declaring pan-y explicitly (and overscroll-behavior: contain) tells
       the browser these touches are scrolls, not system chrome triggers. */
    touch-action: pan-y;
    overscroll-behavior: contain;
}

#screen-call {
    overflow-y: hidden;
}

#screen-call .call-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    background: var(--bg-dark);
    z-index: 30;
}

.screen.active {
    opacity: 1;
    pointer-events: all;
    transform: scale(1);
}

/* Boot screen — visible only between page paint and JS auth-check
   completion. Just the OM symbol pulsing softly so the moment reads
   as intentional rather than a stuck state. */
#screen-boot .boot-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
#screen-boot .boot-om {
    font-size: 4rem;
    color: var(--gold);
    opacity: 0.7;
    animation: bootPulse 1.6s ease-in-out infinite;
}
@keyframes bootPulse {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.85; }
}

/* ============================================
   LANDING SCREEN
   ============================================ */
.landing-content {
    text-align: center;
    /* Extra bottom padding so the CTA clears the fixed .disclaimer-banner
       (~26px) + iOS Safari safe-area on notched phones. */
    padding: 1.5rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Compact landing for most phones — trim vertical spacing so the primary
   CTA stays above the fold. Threshold is deliberately generous (≤860)
   because iOS Safari's URL bar eats ~90px, so a "844px" iPhone 13
   actually has ~755px of visible viewport most of the time. Larger
   iPads / desktops skip this and keep the roomier default. */
/* Specificity boosted with #screen-landing so these land over the base
   .app-title / .om-symbol rules that are defined later in the file. */
@media (max-height: 860px) {
    #screen-landing .landing-content { padding-top: 1rem; padding-bottom: calc(2.25rem + env(safe-area-inset-bottom)); gap: 0; }
    #screen-landing .landing-header { margin-bottom: 0.5rem; }
    #screen-landing .om-symbol { font-size: 1.5rem; margin-bottom: 0; }
    #screen-landing .app-title { font-size: 1.6rem; line-height: 1.1; }
    #screen-landing .app-subtitle { font-size: 0.8rem; }
    #screen-landing .section-label { margin: 0.6rem 0 0.4rem; font-size: 0.75rem; }
    #screen-landing .deity-card-inner { padding: 0.55rem 0.75rem; gap: 0.65rem; }
    #screen-landing .deity-avatar-circle { width: 44px; height: 44px; }
    #screen-landing .deity-preview-btn { width: 22px; height: 22px; bottom: -3px; right: -3px; }
    #screen-landing .deity-preview-btn svg { width: 13px; height: 13px; }
    #screen-landing .deity-name { font-size: 0.9rem; }
    #screen-landing .deity-desc { font-size: 0.7rem; }
    #screen-landing .deity-tags { display: none; }
    #screen-landing .deity-check { transform: scale(0.85); }
    #screen-landing .mode-hero-card { padding: 0.6rem 0.5rem 0.5rem; gap: 0.05rem; }
    #screen-landing .mode-hero-title { font-size: 0.85rem; }
    /* Pravachan-as-hero compact overrides — keep the primary card visible
       but tighten padding so pricing + trust strip stay above the fold on
       iPhone SE / 13 mini viewports. */
    html[data-hero="pravachan"] #screen-landing .mode-hero-card[data-mode="pravachan"] {
        padding: 0.7rem 0.75rem 0.6rem;
    }
    html[data-hero="pravachan"] #screen-landing .mode-hero-card[data-mode="pravachan"] .mode-hero-title {
        font-size: 0.95rem;
    }
    html[data-hero="pravachan"] #screen-landing .mode-hero-card[data-mode="audio"] {
        padding: 0.5rem 0.6rem 0.4rem;
    }
    html[data-hero="pravachan"] #screen-landing .mode-hero-card[data-mode="audio"]::before {
        margin-bottom: 0.1rem;
        font-size: 0.6rem;
    }
    #screen-landing .mode-hero-sub { font-size: 0.68rem; }
    #screen-landing .mode-hero-tag { font-size: 0.62rem; padding: 0.08rem 0.45rem; margin-top: 0.15rem; }
    #screen-landing .mode-hero-icon svg { width: 20px; height: 20px; }
    #screen-landing #btn-start-call { margin-top: 0.6rem; padding: 0.65rem 1.5rem; font-size: 0.85rem; }
    #screen-landing .disclaimer { margin-top: 0.4rem; font-size: 0.7rem; }
}

.landing-header {
    margin-bottom: 1.5rem;
}

.om-symbol {
    font-size: 2rem;
    color: var(--gold);
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    margin-bottom: 0.15rem;
    animation: omPulse 4s infinite ease-in-out;
}

.om-symbol.small {
    font-size: 1.8rem;
}

@keyframes omPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.app-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.05em;
    text-shadow: 0 0 40px rgba(255, 215, 0, 0.2);
    margin-bottom: 0.1rem;
}

.app-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Differentiator pitch — two-line emotional hook. First line is the claim,
   second line (smaller, gold-dim) reinforces availability and intimacy.
   Sits between the subtitle and the deity list; tight spacing so mobile
   above-the-fold still shows a deity card. */
.landing-pitch {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.45;
    margin: 0.5rem auto 0;
    max-width: 360px;
}
.landing-pitch-sub {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--gold);
    opacity: 0.75;
    letter-spacing: 0.06em;
    margin-top: 0.15rem;
}

.section-label {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
    align-self: flex-start;
}

/* ---- Deity Cards — Horizontal List ---- */
.deity-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    margin-bottom: 1.25rem;
}

.deity-card {
    position: relative;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.deity-card:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 255, 255, 0.12);
}

.deity-card.selected {
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.04);
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.08);
}

#deity-shiva.selected {
    border-color: rgba(176, 196, 222, 0.6);
    background: rgba(176, 196, 222, 0.04);
    box-shadow: 0 0 24px rgba(176, 196, 222, 0.08);
}

.deity-card-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.deity-avatar-circle {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    /* Was overflow:hidden — now handled by .deity-img's own border-radius
       so the absolutely-positioned voice-preview button can bleed out of
       the circle for better affordance. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.krishna-circle {
    background: radial-gradient(circle at 40% 40%, #1e3a6e, #0d2550);
    box-shadow: 0 0 15px rgba(26, 95, 180, 0.2);
}

.shiva-circle {
    background: radial-gradient(circle at 40% 40%, #4a5568, #2d3748);
    box-shadow: 0 0 15px rgba(176, 196, 222, 0.15);
}

.deity-svg {
    width: 55px;
    height: 55px;
}

/* Real deity images — fill the avatar circle and crop-to-center. The
   source images are 1440x810 (16:9); object-fit:cover on a square
   container produces a centered circular crop. */
.deity-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%; /* matches the parent; outline via border for clean crop */
}

/* Always-visible "आवाज़ सुनें" text link inside the deity-info column.
   The circular button on the portrait is a nice affordance but easy to
   miss on mobile thumbnails — this text link gives a second, higher-
   signal entry point. Clicking either triggers the same preview handler
   via the shared data-sample attribute. */
.deity-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 999px;
    padding: 0.2rem 0.65rem 0.2rem 0.5rem;
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    margin: 0.2rem 0 0.35rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.deity-preview-link:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.55);
}
.deity-preview-link svg { flex-shrink: 0; }
.deity-preview-link .preview-link-label { display: inline; }
.deity-preview-link .preview-link-playing-label { display: none; }
.deity-preview-link.playing {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.7);
    animation: previewPulse 1.4s ease-in-out infinite;
}
.deity-preview-link.playing .preview-link-label { display: none; }
.deity-preview-link.playing .preview-link-playing-label { display: inline; }

/* Voice-preview button — overlays the bottom-right of the deity portrait
   so visitors can hear the actual TTS voice before committing to sign-in.
   Sized to be tap-friendly on mobile (24px) but not dominate the card.
   Stops click propagation to keep "play sample" distinct from "select deity". */
.deity-preview-btn {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--bg-dark);
    background: var(--gold);
    color: #0a0f1f;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}
.deity-preview-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(255, 215, 0, 0.6);
}
.deity-preview-btn:active {
    transform: scale(0.96);
}
.deity-preview-btn .preview-play-icon { display: block; }
.deity-preview-btn .preview-pause-icon { display: none; }
.deity-preview-btn.playing .preview-play-icon { display: none; }
.deity-preview-btn.playing .preview-pause-icon { display: block; }
/* Pulsing halo when audio is playing — subtle attention cue that says
   "you're hearing the voice right now". */
.deity-preview-btn.playing {
    animation: previewPulse 1.4s ease-in-out infinite;
}
@keyframes previewPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4), 0 0 0 0 rgba(255, 215, 0, 0.4); }
    50%      { box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4), 0 0 0 8px rgba(255, 215, 0, 0); }
}

/* On selection, add a soft gold halo around the selected deity's image
   so the visual difference vs unselected is reinforced beyond just the
   card border. */
.deity-card.selected .deity-avatar-circle {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.35), 0 0 0 2px rgba(255, 215, 0, 0.4);
}

.deity-info {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.deity-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.1rem;
}

.deity-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.deity-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tag {
    font-family: var(--font-ui);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-full);
    color: var(--gold);
}

.tag-shiva {
    background: rgba(176, 196, 222, 0.08);
    border-color: rgba(176, 196, 222, 0.2);
    color: #B0C4DE;
}

/* Checkmark indicator */
.deity-check {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: transparent;
}

.deity-card.selected .deity-check {
    border-color: var(--gold);
    background: rgba(255, 215, 0, 0.15);
    color: var(--gold);
}

#deity-shiva.selected .deity-check {
    border-color: #B0C4DE;
    background: rgba(176, 196, 222, 0.15);
    color: #B0C4DE;
}

/* ---- Call Button ---- */
.btn-call {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--bg-primary);
    background: linear-gradient(135deg, var(--gold) 0%, #FFA500 100%);
    border: none;
    border-radius: var(--radius-full);
    padding: 1rem 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.25);
    letter-spacing: 0.03em;
}

.btn-call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.35);
}

.btn-call:active {
    transform: translateY(0);
}

.btn-call.btn-secondary {
    background: var(--bg-card);
    color: var(--gold);
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: none;
}

.btn-call.btn-secondary:hover {
    background: var(--bg-card-hover);
}

.btn-icon {
    display: flex;
    align-items: center;
}

/* ---- Call Mode Toggle ---- */
.call-mode-toggle {
    display: flex;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-full);
    padding: 3px;
    margin-bottom: 1.25rem;
    width: fit-content;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-dim);
    background: none;
    border: none;
    border-radius: var(--radius-full);
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.mode-btn.active {
    background: rgba(255, 215, 0, 0.12);
    color: var(--gold);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.08);
}

.mode-btn:hover:not(.active) {
    color: var(--text-secondary);
}

.disclaimer {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-top: 1rem;
}

/* "How it works" 3-step row — sits between the hero pitch and the
   deity cards. Compact horizontal flow with numbered nubs in gold.
   Goal: under 2 seconds of scan-time, a sceptic sees the whole loop
   (choose → use → outcome) so they don't have to imagine it. */
.landing-steps {
    list-style: none;
    margin: 0.85rem 0 0.4rem;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    background: rgba(255, 215, 0, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.10);
    border-radius: 12px;
}
.landing-steps li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-secondary);
}
.landing-steps .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.15);
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.landing-steps .step-sep {
    color: var(--gold);
    opacity: 0.4;
    font-size: 0.85rem;
}
@media (max-height: 860px) {
    #screen-landing .landing-steps {
        font-size: 0.7rem;
        padding: 0.4rem 0.6rem;
        gap: 0.35rem;
        margin: 0.5rem 0 0.3rem;
    }
    #screen-landing .landing-steps .step-num { width: 16px; height: 16px; font-size: 0.65rem; }
}
/* Login-screen variants of the same components — slightly tighter so
   they fit neatly inside the left column of the 2-column desktop grid
   without overflowing or pushing other content down. */
#screen-login .login-steps {
    margin: 0.6rem 0 0.5rem;
    font-size: 0.78rem;
}
#screen-login .login-trust-strip {
    margin: 0.4rem 0 0;
    font-size: 0.7rem;
    justify-content: center;
}

/* Bigger "how it works" blocks — 3 equal columns with prominent gold
   numerals + centered text. Replaces the inline pill row when more
   visual weight is needed (login screen primarily). */
.login-howitworks {
    list-style: none;
    margin: 0.85rem 0 0.6rem;
    padding: 0.85rem 0.5rem;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 215, 0, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.14);
    border-radius: 14px;
}
.login-howitworks .how-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
}
.login-howitworks .how-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 140, 0, 0.12));
    border: 1px solid rgba(255, 215, 0, 0.45);
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}
.login-howitworks .how-text {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
@media (max-height: 860px) {
    #screen-login .login-howitworks {
        padding: 0.55rem 0.35rem;
        gap: 0.25rem;
        margin: 0.55rem 0 0.4rem;
    }
    #screen-login .login-howitworks .how-num { width: 26px; height: 26px; font-size: 0.85rem; }
    #screen-login .login-howitworks .how-text { font-size: 0.72rem; }
}

/* Emotional hook line that sits directly above the start-call CTA.
   Italic + dim so it primes the click without competing with the gold
   CTA below — the eye reads "feeling promise → button" in one beat. */
.cta-hook {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-secondary);
    text-align: center;
    margin: 1.25rem 0 0.5rem;
    line-height: 1.4;
}
@media (min-width: 1024px) {
    .cta-hook { font-size: 1.05rem; margin-top: 1.5rem; }
}

/* Free-tier callout under the Google CTA — gold accent, semibold,
   bigger than the privacy footnote so the eye lands on it first. The
   "· कोई कार्ड नहीं · कोई बंधन नहीं" sub-clause is dimmer to keep the
   primary "10 मिनट मुफ्त" punchy. */
.login-free-callout {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gold);
    text-align: center;
    margin: 0.7rem 0 0.25rem;
    letter-spacing: 0.01em;
}
.login-free-callout .free-callout-sub {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0;
    display: inline-block;
    margin-left: 0.15rem;
}
@media (max-width: 600px) {
    .login-free-callout .free-callout-sub {
        display: block;
        margin: 0.15rem 0 0;
        font-size: 0.72rem;
    }
}

/* Pricing line under the CTA — upfront, specific, gold-tinted so it's
   noticed without shouting. Keeps the "hidden paywall" smell off the
   landing. JS regionaliser swaps INR → USD via data-usd attribute. */
.landing-pricing {
    font-family: var(--font-ui);
    font-size: 0.82rem;
    color: var(--gold);
    opacity: 0.88;
    margin-top: 0.9rem;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Trust strip — three equal-weight, verifiable claims separated by the
   · glyph. Low-weight dim text; the point is to build trust without
   visual noise. Scales down on compact viewports via the #screen-landing
   override so it never pushes the CTA off-screen. */
.landing-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--text-dim);
    line-height: 1.4;
}
.landing-trust-strip .trust-sep {
    color: var(--gold);
    opacity: 0.45;
}
@media (max-height: 860px) {
    #screen-landing .landing-pitch { font-size: 0.8rem; margin-top: 0.35rem; }
    #screen-landing .landing-pitch-sub { font-size: 0.65rem; }
    #screen-landing .landing-pricing { font-size: 0.72rem; margin-top: 0.55rem; }
    #screen-landing .landing-trust-strip { font-size: 0.62rem; margin-top: 0.25rem; }
}

/* ---- Video Avatar Container ---- */
.call-video-container {
    position: relative;
    z-index: 1;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 215, 0, 0.25);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.1);
}

.call-video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.call-video-container audio {
    display: none;
}

.call-video-container.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

/* ============================================
   CALL SCREEN
   ============================================ */
.call-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

/* ---- Call Header ---- */
.call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.5rem 0;
}

.btn-end-top {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 0.4rem 1rem;
    border-radius: 22px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    letter-spacing: 0.5px;
    /* WCAG 2.5.5 minimum tap target — critical mid-session button. */
    min-height: 44px;
    min-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.call-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-green);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
}

.pulse-dot.connecting {
    background: var(--saffron);
    animation-name: pulseDotOrange;
}

@keyframes pulseDotOrange {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 153, 51, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(255, 153, 51, 0); }
}

#call-timer {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

/* ---- Deity Area (In-Call) ---- */
.call-deity-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    padding: 1rem 0;
}

.call-deity-area.ringing .call-deity-circle {
    animation: ringPulse 1.5s ease-in-out infinite;
}

.call-deity-area.picked-up .call-deity-circle {
    animation: pickupFlash 0.6s ease-out;
}

@keyframes ringPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes pickupFlash {
    0% { transform: scale(1.1); box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
    100% { transform: scale(1); box-shadow: none; }
}

.call-aura {
    position: absolute;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aura-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.1);
    animation: auraExpand 4s infinite ease-out;
}

.aura-ring-1 {
    width: 180px;
    height: 180px;
    animation-delay: 0s;
}

.aura-ring-2 {
    width: 220px;
    height: 220px;
    animation-delay: 1.3s;
}

.aura-ring-3 {
    width: 260px;
    height: 260px;
    animation-delay: 2.6s;
}

@keyframes auraExpand {
    0% { opacity: 0.6; transform: scale(0.8); }
    100% { opacity: 0; transform: scale(1.3); }
}

.call-aura.speaking .aura-ring {
    border-color: rgba(26, 95, 180, 0.25);
    animation-duration: 2s;
}

.call-aura.thinking .aura-ring {
    border-color: rgba(255, 153, 51, 0.2);
    animation-duration: 1.5s;
}

.call-deity-circle {
    position: relative;
    z-index: 1;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #1e2742, var(--bg-secondary));
    border: 2px solid rgba(255, 215, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.call-deity-circle.speaking {
    border-color: rgba(26, 95, 180, 0.5);
    box-shadow: 0 0 40px rgba(26, 95, 180, 0.2);
}

.call-deity-circle.thinking {
    border-color: rgba(255, 153, 51, 0.4);
    box-shadow: 0 0 40px rgba(255, 153, 51, 0.15);
}

.krishna-svg-call {
    width: 120px;
    height: 120px;
}

/* Real deity portrait inside the aura circle. Sits above the fallback SVG
   so if the image is missing we still see the silhouette. object-fit: cover
   keeps the square image filling the circular frame cleanly. */
.deity-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 2;
}

.call-deity-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 0.75rem;
    position: relative;
    z-index: 1;
}

/* ---- Transcript Area ---- */
.transcript-area {
    min-height: 80px;
    max-height: 120px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    margin: 0 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

#transcript-content {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

#transcript-content .user-text {
    color: var(--text-dim);
    font-style: italic;
    margin-bottom: 0.25rem;
}

#transcript-content .deity-text {
    color: var(--gold);
    opacity: 0.9;
}

#transcript-content .interim {
    opacity: 0.5;
}

/* ---- Audio Visualizer ---- */
.audio-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 40px;
    padding: 0.5rem 0;
}

.viz-bar {
    width: 3px;
    height: 4px;
    background: var(--krishna-blue-light);
    border-radius: 2px;
    transition: height 0.1s ease;
}

.audio-visualizer.active .viz-bar {
    animation: vizPulse 0.8s infinite ease-in-out;
}

.viz-bar:nth-child(1) { animation-delay: 0s; }
.viz-bar:nth-child(2) { animation-delay: 0.1s; }
.viz-bar:nth-child(3) { animation-delay: 0.2s; }
.viz-bar:nth-child(4) { animation-delay: 0.3s; }
.viz-bar:nth-child(5) { animation-delay: 0.15s; }
.viz-bar:nth-child(6) { animation-delay: 0.25s; }
.viz-bar:nth-child(7) { animation-delay: 0.35s; }
.viz-bar:nth-child(8) { animation-delay: 0.05s; }
.viz-bar:nth-child(9) { animation-delay: 0.2s; }

@keyframes vizPulse {
    0%, 100% { height: 4px; }
    50% { height: 28px; }
}

.audio-visualizer.speaking .viz-bar {
    background: var(--krishna-blue-light);
}

.audio-visualizer.user-speaking .viz-bar {
    background: var(--saffron);
}

/* ---- Call Controls ---- */
.call-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    margin-top: auto;
    flex-shrink: 0;
}

.control-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-card);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-btn:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 255, 255, 0.2);
}

.control-btn.active {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.control-btn.btn-end {
    width: 64px;
    height: 64px;
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: white;
}

.control-btn.btn-end:hover {
    background: #c0392b;
    transform: scale(1.05);
}

.control-btn.muted {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: var(--accent-red);
}

/* ============================================
   POST-CALL SCREEN
   ============================================ */
.postcall-content {
    text-align: center;
    padding: 2rem;
    width: 100%;
}

.postcall-blessing {
    margin-bottom: 2rem;
}

.postcall-blessing h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.blessing-text {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    max-width: 300px;
    margin: 0 auto;
}

.call-summary {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 215, 0, 0.08);
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}

.summary-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---- Donation Section ---- */
.donation-section {
    margin-bottom: 2rem;
}

.donation-section h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.donation-section p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.donation-options {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.donation-btn {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    background: var(--bg-card);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-sm);
    color: var(--gold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.donation-btn:hover {
    background: var(--bg-card-hover);
    border-color: rgba(255, 215, 0, 0.35);
    transform: translateY(-1px);
}

.donation-btn.selected {
    background: rgba(255, 215, 0, 0.1);
    border-color: var(--gold);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* ---- Responsive ---- */
@media (max-height: 700px) {
    .deity-avatar { width: 100px; height: 100px; }
    .deity-card { padding: 1.25rem 1rem 1rem; }
    .call-deity-circle { width: 120px; height: 120px; }
    .krishna-svg-call { width: 95px; height: 95px; }
    .transcript-area { max-height: 80px; }
}

@media (min-width: 481px) {
    #app {
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* ============================================
   OVERLAYS (Mic permission, End confirm, Error)
   ============================================ */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.overlay.hidden {
    display: none;
}

.overlay-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 215, 0, 0.12);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    max-width: 340px;
    width: 100%;
}

.overlay-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.overlay-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.overlay-icon {
    margin-bottom: 1rem;
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
/* ---- Login Landing Redesign ---- */
.login-landing {
    gap: 1.25rem;
}

.login-hero {
    text-align: center;
}

.login-hero-tagline {
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--gold);
    margin-top: 0.5rem;
    letter-spacing: 0.3px;
}

.login-hero-sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
    line-height: 1.4;
}

.login-deities {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.login-deity-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-card);
    border: 1px solid rgba(255, 215, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    flex: 1;
    max-width: 160px;
}

/* Legacy — colored dots replaced by real portrait thumbnails. Kept for
   backwards compat in case any old CSS/JS still references the class. */
.login-deity-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 0.2rem;
}

/* Real deity portrait inside the login chip, with an overlayed voice-
   preview button at the bottom-right. Same affordance pattern as the
   landing deity cards so the mental model is consistent. */
.login-deity-avatar {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin-bottom: 0.35rem;
}
.login-deity-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.15);
}
.login-deity-avatar .deity-preview-btn {
    width: 22px;
    height: 22px;
    bottom: -2px;
    right: -2px;
}

.login-deity-chip span:first-of-type {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.login-deity-hint {
    font-family: var(--font-ui);
    font-size: 0.6rem;
    color: var(--text-dim);
}

.login-demo-quote {
    background: rgba(255, 215, 0, 0.04);
    border-left: 2px solid var(--gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 0.75rem 1rem;
    text-align: left;
}

.login-quote-icon {
    font-size: 1.2rem;
    color: var(--gold);
    opacity: 0.6;
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* Setup line for the demo quote — a specific, universal scenario that
   prepares the reader for the deity's reply. Plain style, no italic,
   so it reads like narration vs. the italic quote that follows. */
.login-quote-setup {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.45;
    margin-bottom: 0.4rem;
}
.login-quote-setup em {
    color: var(--text-secondary);
    font-style: italic;
}

.login-quote-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    font-style: italic;
}

.login-quote-attr {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 0.4rem;
}

.login-social-proof {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.login-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.login-stat-num {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
}

.login-stat-label {
    font-family: var(--font-body);
    font-size: 0.6rem;
    color: var(--text-dim);
    margin-top: 0.1rem;
}

.login-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
}

/* Benefit bullets — replaces the stat row. Vertical list of three
   icon+label rows; left-aligned within a centered group so the eye
   reads "what I get" rather than parsing three competing stats. */
.login-benefits {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: flex-start;
}
.login-benefit {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}
.lb-icon {
    flex-shrink: 0;
    width: 1.4rem;
    text-align: center;
    font-size: 1rem;
    color: var(--gold);
}
@media (min-width: 1024px) {
    .login-benefits { gap: 0.65rem; }
    .login-benefit { font-size: 0.95rem; }
    .lb-icon { font-size: 1.15rem; }
}

/* Secondary CTA — WhatsApp share. Visually clearly subordinate to the
   gold primary button (no fill, just a green outlined pill in WhatsApp
   brand colour) but emotional enough to invite a viral share. The
   distinct colour also signals "this is a different action, not another
   sign-in option" so first-time visitors don't get paralysed. */
.login-share-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.5);
    color: #25D366;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.7rem 1.25rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    margin-top: 0.85rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.login-share-cta:hover {
    background: rgba(37, 211, 102, 0.16);
    transform: translateY(-1px);
}
@media (min-width: 1024px) {
    .login-share-cta { font-size: 1rem; padding: 0.8rem 1.5rem; }
}

/* Variant B (call) curiosity hook — small uppercase pre-tagline, gold
   accent so it punches above the title without competing with the CTA.
   [hidden] by default in HTML; JS reveals only for the call variant.
   The [hidden] rule MUST win — `display: inline-block` here would
   otherwise stomp the user-agent's default `display: none` for hidden
   elements, leaking the hook onto Variant A. */
.login-curiosity-hook {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    margin: 0 0 0.75rem;
}
.login-curiosity-hook[hidden] {
    display: none;
}
@media (min-width: 1024px) {
    .login-curiosity-hook { font-size: 0.85rem; padding: 0.4rem 1rem; }
}

.login-cta {
    text-align: center;
}

.btn-google {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 500;
    color: #222;
    background: white;
    border: none;
    border-radius: var(--radius-full);
    padding: 0.75rem 1.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Primary emotional-CTA variant — gold pill, larger weight, headphones
   leading. Used on the login screen so the visitor's eye lands on the
   action ("listen now") rather than the auth verb ("sign in"). The
   underlying click target is still Google Sign-In; we expose that as
   small submeta below so the auth method is honest, just deprioritised. */
.btn-google.btn-google-primary {
    background: linear-gradient(135deg, #FFE680, #FFD700);
    color: #1a1408;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.95rem 1.75rem;
    box-shadow: 0 6px 22px rgba(255, 215, 0, 0.25);
}
.btn-google.btn-google-primary:hover {
    box-shadow: 0 10px 28px rgba(255, 215, 0, 0.35);
    transform: translateY(-1px);
}
.btn-google-headphones {
    color: #1a1408;
    flex-shrink: 0;
}
.btn-google-submeta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.01em;
}
.btn-google-submeta svg {
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .btn-google.btn-google-primary { font-size: 1.15rem; padding: 1.1rem 2rem; }
    .btn-google-submeta { font-size: 0.8rem; }
}

.btn-google:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.login-footnote {
    font-family: var(--font-ui);
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 0.75rem;
}

/* Post-call WhatsApp share section */
.share-section {
    text-align: center;
    margin: 1.25rem 0;
    padding: 0.5rem 0;
}
.share-caption {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #25D366;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-whatsapp:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}
.btn-whatsapp:active { transform: translateY(0); }
.btn-whatsapp svg { flex-shrink: 0; }

/* Payment status banner (shown after returning from checkout) */
/* Pre-call disclaimer */
.disclaimer-card {
    max-width: 380px;
    text-align: center;
}
.disclaimer-om {
    font-size: 3rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.disclaimer-card h3 {
    font-family: var(--font-display, var(--font-body));
    font-size: 1.2rem;
    color: var(--gold);
    margin-bottom: 1rem;
}
.disclaimer-main {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.disclaimer-sub {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--text-dim);
    margin-bottom: 1.25rem;
    padding: 0 0.5rem;
}
#btn-disclaimer-proceed:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* AI-based badge on call screen */
.ai-badge {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-ui);
    font-size: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    z-index: 15;
    pointer-events: none;
    letter-spacing: 0.3px;
}

.payment-banner {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 95, 180, 0.95);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    max-width: 90%;
    text-align: center;
    animation: slideDownFade 0.4s ease-out;
}
.payment-banner.success {
    background: rgba(39, 174, 96, 0.95);
}
.payment-banner.warning {
    background: rgba(243, 156, 18, 0.95);
}
@keyframes slideDownFade {
    from { transform: translate(-50%, -60px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* Upgrade button in user bar */
.btn-upgrade-bar {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #0a0a0a;
    border: 1.5px solid rgba(255, 215, 0, 0.9);
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-ui);
    cursor: pointer;
    margin-left: 0.4rem;
    letter-spacing: 0.02em;
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    transition: transform 0.12s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.btn-upgrade-bar:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.btn-upgrade-bar:active { transform: translateY(0); }
/* Pulse when the user is critically low on trial minutes — tells the
   eye "this is the next thing to do" without text changes. JS adds
   .urgent class when remaining trial < 60s. */
.btn-upgrade-bar.urgent {
    animation: upgradePulse 1.5s ease-in-out infinite;
}
@keyframes upgradePulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.4); }
    50%      { box-shadow: 0 0 28px rgba(255, 215, 0, 0.85); }
}

/* Sanchaalak (refer & earn) button — distinct green accent so users
   read it as a different lever than Upgrade. WhatsApp green ties to
   the actual share channel where they'll use it. The "earnings ready"
   dot at the corner appears when JS detects approved earnings — same
   pattern as Gmail's unread dot. Visible to ALL authed users. */
.btn-sanchaalak {
    position: relative;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.08));
    border: 1.5px solid rgba(37, 211, 102, 0.6);
    color: #25d366;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
    letter-spacing: 0.01em;
    box-shadow: 0 0 12px rgba(37, 211, 102, 0.18);
    transition: transform 0.12s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.btn-sanchaalak:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.28), rgba(37, 211, 102, 0.14));
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.35);
}
.btn-sanchaalak:active { transform: translateY(0); }
.btn-sanchaalak::after {
    /* Earnings-ready dot — hidden by default, visible when JS adds
       the .has-earnings class. Bright gold so it stands out against
       the green pill. */
    content: "";
    position: absolute;
    top: -3px; right: -3px;
    width: 9px; height: 9px;
    background: var(--gold);
    border: 2px solid var(--bg-dark);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-sanchaalak.has-earnings::after {
    opacity: 1;
    transform: scale(1);
    animation: sanchaalakDot 2.2s ease-in-out infinite;
}
@keyframes sanchaalakDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 213, 128, 0.7); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 213, 128, 0); }
}

/* Upgrade CTA on post-call screen */
.postcall-upgrade-cta {
    text-align: center;
    padding: 1rem;
    margin: 0.75rem 0;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: var(--radius-md);
}
.postcall-upgrade-cta p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.btn-upgrade-gold {
    background: linear-gradient(135deg, #DAA520, #FFD700);
    color: #0a0a0a;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: var(--font-ui);
    cursor: pointer;
}

/* Video coming soon */
.coming-soon-email {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center;
}
.input-email {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    font-family: var(--font-ui);
    outline: none;
    width: 180px;
}
.input-email::placeholder {
    color: var(--text-dim);
}

/* Cookie / analytics consent banner */
.consent-banner {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 560px;
    width: calc(100% - 2rem);
    background: rgba(15, 15, 20, 0.96);
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    z-index: 150;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    animation: slideUpFade 0.5s ease-out;
}
@keyframes slideUpFade {
    from { transform: translate(-50%, 40px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}
.consent-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.consent-text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    flex: 1 1 260px;
}
.consent-text a {
    color: var(--gold);
    text-decoration: underline;
}
.consent-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.consent-btn {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    padding: 0.45rem 0.9rem;
    border-radius: 18px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.consent-accept {
    background: var(--gold);
    color: #0a0a0a;
    font-weight: 600;
}
.consent-accept:hover { filter: brightness(1.1); }
.consent-decline {
    background: transparent;
    color: var(--text-dim);
    border-color: rgba(255, 255, 255, 0.15);
}
.consent-decline:hover { color: var(--text-secondary); }

/* ============================================
   UPGRADE SCREEN
   ============================================ */
.upgrade-topbar {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}
.upgrade-logout {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    margin-left: auto;
}
.upgrade-logout:hover {
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.3);
}

.upgrade-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    min-height: 44px;
    transition: all 0.15s ease;
}
.upgrade-back:hover {
    color: var(--text-primary);
    border-color: rgba(255, 215, 0, 0.4);
}

.upgrade-card {
    background: var(--bg-card);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    width: 100%;
    text-align: center;
}

.upgrade-card h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.upgrade-card p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.upgrade-plans {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.plan-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 1rem 0.75rem;
    flex: 1;
    max-width: 160px;
    position: relative;
}

.plan-card.plan-recommended {
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.08);
}

.plan-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--bg-primary);
    font-family: var(--font-ui);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
}

.plan-price {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.1;
}

.plan-price > span {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-dim);
}

.plan-mrp {
    display: block;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-dim);
    text-decoration: line-through;
    margin-bottom: 0.1rem;
}

.plan-current {
    font-weight: 700;
}

.plan-discount {
    display: inline-block;
    font-family: var(--font-ui);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4cb567;
    background: rgba(76, 181, 103, 0.14);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-full);
    margin-top: 0.1rem;
}

.plan-name {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.2rem 0;
}

.plan-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin: 0;
}

/* ---- Language Toggle (login + landing) ----
   Small pill in the top-right corner. Click flips locale via
   window.setAppLang. Same visual treatment on both screens; on landing
   it sits beside the user-bar pill, on login it floats free. */
.lang-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: var(--radius-full);
    padding: 0.3rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    z-index: 50;
    opacity: 0.85;
    transition: opacity 0.15s, background 0.15s;
}
.lang-toggle:hover, .lang-toggle:focus-visible {
    opacity: 1;
    background: rgba(255, 215, 0, 0.08);
    outline: none;
}

/* User-bar dropdown sub-options for language picking. Active locale
   gets a small dot indicator. */
.user-bar-menu-item.lang-option-active::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.4rem;
}

/* ---- User Welcome Bar ----
   Collapsed pill: [avatar][name][▾] then optional Upgrade pill.
   Secondary actions (sanchaalak, blessings, cancel-sub, logout, trial info)
   live inside .user-bar-menu, hidden until the trigger is clicked. Keeps
   the top-right chrome from growing with new options. */
.user-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-bottom: 0.5rem;
}

.user-bar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.25rem 0.65rem 0.25rem 0.3rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.user-bar-trigger:hover,
.user-bar-trigger[aria-expanded="true"] {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.user-bar-chevron {
    font-size: 0.7rem;
    color: var(--text-dim);
    transition: transform 0.15s ease;
    margin-left: 0.1rem;
}
.user-bar-trigger[aria-expanded="true"] .user-bar-chevron {
    transform: rotate(180deg);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.user-name {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    color: var(--text-secondary);
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trial-info {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--saffron);
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
}

/* Dropdown menu — anchored to the trigger. Floats above content. */
.user-bar-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem;
    background: rgba(14, 18, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 60;
}
.user-bar-menu[hidden] { display: none; }

.user-bar-menu-item {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.user-bar-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* Legacy class kept so .btn-logout uses are not broken if any survive
   outside the user-bar (cancel-sub overlay, etc). */
.btn-logout {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.5);
    font-size: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: all 0.2s;
}
.btn-logout:hover {
    border-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.8);
}

/* ---- Trial Banner ---- */
.trial-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    background: rgba(255, 153, 51, 0.15);
    border: 1px solid rgba(255, 153, 51, 0.3);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 0.3rem 1rem;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    color: var(--saffron);
    text-align: center;
}

.trial-banner.hidden {
    display: none;
}

.trial-banner.warning {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
    color: var(--accent-red);
}

/* ---- Disclaimer Banner ---- */
.disclaimer-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(10, 10, 18, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.4rem 1rem;
    font-family: var(--font-ui);
    font-size: 0.6rem;
    color: var(--text-dim);
    text-align: center;
}

.disclaimer-banner a {
    color: var(--gold);
    text-decoration: none;
    margin: 0 0.15rem;
}

/* ============================================
   MODE HERO CARDS — two-pillar chooser on landing
   (Audio Call · Pravachan Satsang)
   ============================================ */
.mode-hero-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: 100%;
    margin: 0.5rem 0 1rem;
}

.mode-hero-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1rem 0.85rem 0.85rem;
    color: var(--text-primary);
    font-family: var(--font-ui);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-height: 0;
}

.mode-hero-card:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.25);
    transform: translateY(-1px);
}

.mode-hero-card.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 140, 0, 0.10));
    border: 2px solid rgba(255, 215, 0, 0.9);
    box-shadow: 0 0 28px rgba(255, 215, 0, 0.22), inset 0 0 0 1px rgba(255, 215, 0, 0.35);
}

.mode-hero-icon {
    color: var(--gold);
    margin-bottom: 0.2rem;
}

.mode-hero-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.mode-hero-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* ============================================
   HERO VARIANT — Pravachan-as-hero (default) vs Call-as-hero.
   Controlled atomically via [data-hero="..."] on <html>. Flipping the
   attribute rearranges order + primary/secondary weight without any
   DOM changes, keeping the switch A/B-safe.
   ============================================ */

/* Hero-variant primary/secondary treatment. Both A/B variants get the
   same shape: hero card leads visually, the other is clearly secondary
   with a small "बाद में आज़माएं" label so the user mentally registers
   "main option is X, the other is available later". Equal-weight cards
   diluted the variant signal. Flex order lets us re-sequence without
   touching HTML.

   Visual de-emphasis on the secondary card:
   - opacity 0.6 (not invisible — still affordant)
   - no gold glow / softer border
   - smaller padding, smaller title, smaller icon
   - small uppercase "बाद में आज़माएं" header */

/* ----- Pravachan-hero (Variant A): satsang primary, call secondary ----- */
html[data-hero="pravachan"] .mode-hero-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
html[data-hero="pravachan"] .mode-hero-card[data-mode="pravachan"] {
    order: 1;
    padding: 1.1rem 1rem 1rem;
}
html[data-hero="pravachan"] .mode-hero-card[data-mode="pravachan"] .mode-hero-title {
    font-size: 1.1rem;
}
html[data-hero="pravachan"] .mode-hero-card[data-mode="audio"] {
    order: 2;
    padding: 0.7rem 0.85rem;
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}
html[data-hero="pravachan"] .mode-hero-card[data-mode="audio"] .mode-hero-title {
    font-size: 0.9rem;
}
html[data-hero="pravachan"] .mode-hero-card[data-mode="audio"] .mode-hero-icon svg {
    width: 22px;
    height: 22px;
}
html[data-hero="pravachan"] .mode-hero-card[data-mode="audio"]::before {
    content: "बाद में आज़माएं";
    display: block;
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ----- Call-hero (Variant B): call primary, satsang secondary ----- */
html[data-hero="call"] .mode-hero-cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
html[data-hero="call"] .mode-hero-card[data-mode="audio"] {
    order: 1;
    padding: 1.1rem 1rem 1rem;
}
html[data-hero="call"] .mode-hero-card[data-mode="audio"] .mode-hero-title {
    font-size: 1.1rem;
}
html[data-hero="call"] .mode-hero-card[data-mode="pravachan"] {
    order: 2;
    padding: 0.7rem 0.85rem;
    opacity: 0.6;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}
html[data-hero="call"] .mode-hero-card[data-mode="pravachan"] .mode-hero-title {
    font-size: 0.9rem;
}
html[data-hero="call"] .mode-hero-card[data-mode="pravachan"] .mode-hero-icon svg {
    width: 22px;
    height: 22px;
}
html[data-hero="call"] .mode-hero-card[data-mode="pravachan"]::before {
    content: "बाद में आज़माएं";
    display: block;
    font-size: 0.65rem;
    color: var(--text-dim);
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.mode-hero-tag {
    font-size: 0.7rem;
    color: var(--gold);
    opacity: 0.85;
    margin-top: 0.25rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 999px;
}

/* Compact deity selector on the landing page. Shows the current
   deity's avatar + name + a small "बदलें" hint. Tap toggles between
   Krishna and Shiva. Replaces the big two-card deity-list section
   (kept in DOM but hidden via id="landing-deity-list" style="display:none"
   so the existing JS hooks for voice preview / selection still work
   when the user navigates to the satsang setup screen via the "बदलें"
   link). */
.landing-deity-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 999px;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    margin: 0.5rem auto 1rem;
    color: var(--text-primary);
    font-family: var(--font-ui);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}
.landing-deity-pill:hover {
    border-color: rgba(255, 215, 0, 0.45);
    background: rgba(255, 215, 0, 0.04);
}
.landing-deity-pill img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 215, 0, 0.3);
}
.landing-deity-pill #landing-deity-pill-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gold);
}
.landing-deity-pill .landing-deity-pill-change {
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0.55rem;
    margin-left: 0.1rem;
}
/* Hide on call-hero variant where mode tile dominates the screen
   already; deity selection on call mode happens on the call screen. */
html[data-hero="call"] .landing-deity-pill {
    display: none;
}

/* Inline topic chips + input on landing. Sits between the mode tiles
   and the CTA. Removes the old "configure first" detour through the
   satsang setup screen. */
.landing-topic-section {
    margin: 1rem auto 0.5rem;
    max-width: 480px;
    padding: 0 0.5rem;
    text-align: center;
}
html[data-hero="call"] .landing-topic-section {
    /* Topic input is satsang-specific; hide on call-hero variant. */
    display: none;
}
.landing-topic-label {
    font-family: var(--font-ui);
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 0.6rem;
}
.landing-topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-bottom: 0.65rem;
}
.landing-topic-chips .topic-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 36px;
}
.landing-topic-chips .topic-chip:hover {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.05);
    color: var(--text-primary);
}
.landing-topic-chips .topic-chip.active {
    background: rgba(255, 215, 0, 0.12);
    border-color: var(--gold);
    color: var(--gold);
}
.landing-topic-input {
    width: 100%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
}
.landing-topic-input:focus {
    border-color: rgba(255, 215, 0, 0.35);
}
.landing-topic-input::placeholder {
    color: var(--text-dim);
}

/* Micro-personalization hint — sits between reassurance and customize
   link when the user has picked a topic. "This is tailored for me"
   signal at the highest-leverage moment. Subtle gold tint so it reads
   as an affirmation, not a label. */
.landing-cta-personalize {
    margin: 0.4rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--gold);
    opacity: 0.75;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Power-user customize link below the CTA reassure line. */
.landing-customize-link {
    display: block;
    margin: 0.5rem auto 0;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 0.78rem;
    text-decoration: underline;
    text-decoration-color: rgba(176, 196, 222, 0.4);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}
.landing-customize-link:hover {
    opacity: 1;
    color: var(--text-secondary);
}

/* Cross-mode escape hatch. Discovery, not decision — small + faint
   so it doesn't pull attention from the primary CTA. Lives below
   the share button (out of the decision fold). */
.landing-mode-switch-link {
    display: block;
    margin: 0.5rem auto 0;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 0.72rem;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.landing-mode-switch-link:hover {
    opacity: 1;
    color: var(--gold);
}

/* Hide the full mode-tile section on variant A — replaced by the
   thin "या सीधे बात करें" link above. The section label "सुनना शुरू
   करें" was a header for the tiles; without tiles, it's noise. */
html[data-hero="pravachan"] .mode-hero-cards,
html[data-hero="pravachan"] #landing-mode-label {
    display: none;
}
/* Hide topic chips + input when user has switched to call mode at
   runtime — the topic input is satsang-specific. JS toggles
   .mode-call on body when state.callMode flips to 'audio'. */
body.mode-call .landing-topic-section {
    display: none;
}
/* When in call mode on landing, swap the mode-switch link copy back
   to "या सत्संग सुनें" so the user can flip back. */
body.mode-call .landing-mode-switch-link {
    /* JS replaces the textContent — no CSS-only swap needed; this
       rule exists as a hook in case we later want a styling difference. */
}

/* "सुझावित" — small recommended-pill on the primary card per variant.
   Lives as a corner badge so it doesn't push existing content around. */
.mode-hero-card .mode-hero-suggested {
    position: absolute;
    top: -0.5rem;
    right: 0.85rem;
    background: var(--gold);
    /* Dark base background variable — needs to be the actual token
       (--bg-primary), not a non-existent --bg-dark that would silently
       fall back to inherited (white) and give unreadable white-on-gold. */
    color: var(--bg-primary);
    font-family: var(--font-ui);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.35);
    pointer-events: none;
}
.mode-hero-card { position: relative; }
/* Show the badge only on the variant's primary card. */
html[data-hero="pravachan"] .mode-hero-card[data-mode="audio"] .mode-hero-suggested,
html[data-hero="call"] .mode-hero-card[data-mode="pravachan"] .mode-hero-suggested {
    display: none;
}

/* Reassurance line below the landing CTA — same softer-text treatment
   as the satsang setup screen's reassure line, scaled for the landing
   layout (smaller, dimmer, centered under the gold button). */
.landing-cta-reassure {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

/* ============================================
   PRAVACHAN SETUP SCREEN — duration + topic picker
   ============================================ */
.pravachan-setup-content {
    padding: 2rem 1.25rem 1.5rem;
}

.label-optional {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 0.8em;
}

.pravachan-duration-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.5rem;
}

.pravachan-duration-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.9rem 0.5rem 0.75rem;
    color: var(--text-primary);
    font-family: var(--font-ui);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.pravachan-duration-card:hover:not(:disabled) {
    border-color: rgba(255, 215, 0, 0.3);
    background: rgba(255, 215, 0, 0.04);
}

.pravachan-duration-card.selected {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.05));
    border-color: var(--gold);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.pravachan-duration-card.locked {
    opacity: 0.45;
    cursor: pointer;
}

.pravachan-duration-card .pd-num {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--gold);
    line-height: 1;
}

.pravachan-duration-card .pd-unit {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.pravachan-duration-card .pd-tag {
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 0.35rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.pravachan-topic-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.5rem;
}

.pravachan-mic-btn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    min-height: 44px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pravachan-mic-btn:hover {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.05);
}

.pravachan-mic-btn.recording {
    border-color: #e74c3c;
    color: #e74c3c;
    animation: pulseDot 1.6s infinite;
}

.pravachan-topic-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    width: 100%;
}

.pravachan-topic-input::placeholder {
    color: var(--text-dim);
}

.pravachan-topic-input:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.35);
}

/* One-tap topic chips below the input. Replace the "blank page" feel
   with 4 of the most common pain themes; one click fills the input. */
.pravachan-topic-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.6rem;
}
.pravachan-topic-chips .topic-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 36px;
}
.pravachan-topic-chips .topic-chip:hover {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.05);
    color: var(--text-primary);
}
.pravachan-topic-chips .topic-chip.active {
    background: rgba(255, 215, 0, 0.12);
    border-color: var(--gold);
    color: var(--gold);
}

/* Postcall daily-habit nudge — appears right after a satsang/call ends,
   in the emotional-peak window. Soft gold gradient with a single CTA. */
.postcall-blessings-nudge {
    margin: 1rem auto 1.25rem;
    padding: 1rem 1.25rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 140, 0, 0.04));
    border: 1px solid rgba(255, 215, 0, 0.25);
    text-align: center;
    max-width: 360px;
}
.postcall-blessings-nudge .pbn-headline {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--gold);
    margin: 0 0 0.15rem;
    font-weight: 600;
}
.postcall-blessings-nudge .pbn-sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
}
.btn-postcall-blessings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold) 0%, #FFA500 100%);
    color: var(--bg-primary);
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-postcall-blessings:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 215, 0, 0.35);
}
.btn-postcall-blessings:active {
    transform: translateY(0);
}
.btn-postcall-blessings:disabled {
    opacity: 0.7;
    cursor: progress;
}

/* Dominant primary CTA — bigger, brighter, with breathing room above
   so the eye lands here after seeing the duration grid + topic. */
.pravachan-cta-primary {
    margin-top: 1.75rem;
    font-size: 1.2rem;
    padding: 1.15rem 2.75rem;
    box-shadow: 0 6px 28px rgba(255, 215, 0, 0.35);
}

.pravachan-cta-reassure {
    margin: 0.55rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

/* ============================================
   SEVIKA TOGGLE (on Pravachan setup screen)
   ============================================ */
.sevika-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    width: 100%;
    margin-top: 1rem;
    cursor: pointer;
    user-select: none;
}
.sevika-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 22px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}
.sevika-toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.2s ease;
}
.sevika-toggle input[type="checkbox"]:checked {
    background: var(--gold);
}
.sevika-toggle input[type="checkbox"]:checked::after {
    left: 18px;
    background: var(--bg-primary);
}
.sevika-toggle-track { display: none; } /* track is painted via pseudo-element on the input itself */
.sevika-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-start;
    text-align: left;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text-primary);
}
.sevika-toggle-label strong {
    font-weight: 500;
}
.sevika-toggle-hint {
    font-size: 0.72rem;
    color: var(--text-dim);
    font-weight: 400;
}

/* ============================================
   SEVIKA CARD (on Pravachan active screen, shown during greeter phase)
   ============================================ */
.sevika-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 140, 0, 0.02));
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 14px;
    padding: 0.65rem 0.8rem;
    margin: 0 0.25rem 0.75rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.05);
    animation: sevikaPulse 3s ease-in-out infinite;
}
@keyframes sevikaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
    50% { box-shadow: 0 0 24px 2px rgba(255, 215, 0, 0.12); }
}
.sevika-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sevika-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.sevika-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold);
}
.sevika-status {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sevika-skip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
}
.sevika-skip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* ============================================
   LANDING MONETISATION BANNERS — bigger pitch-style CTAs that sit
   below the trust strip. The user-bar buttons cover quick-access;
   these banners cover discovery + pitch for users who scroll.
   ============================================ */
.monetisation-banners {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin: 1.25rem 0 0.5rem;
}
.monetise-banner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    font-family: var(--font-ui);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
    border: 1.5px solid transparent;
}
.monetise-banner--gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.14), rgba(255, 140, 0, 0.06));
    border-color: rgba(255, 215, 0, 0.55);
    color: var(--text-primary);
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.12);
}
.monetise-banner--gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(255, 215, 0, 0.28);
}
.monetise-banner--green {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.14), rgba(37, 211, 102, 0.05));
    border-color: rgba(37, 211, 102, 0.55);
    color: var(--text-primary);
    box-shadow: 0 0 16px rgba(37, 211, 102, 0.12);
}
.monetise-banner--green:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 26px rgba(37, 211, 102, 0.28);
}
.mb-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
}
.monetise-banner--gold .mb-icon { color: var(--gold); border: 1px solid rgba(255, 215, 0, 0.4); }
.monetise-banner--green .mb-icon { color: #25d366; border: 1px solid rgba(37, 211, 102, 0.4); }
.mb-text { flex: 1; min-width: 0; }
.mb-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.monetise-banner--gold .mb-title { color: var(--gold); }
.monetise-banner--green .mb-title { color: #25d366; }
.mb-sub {
    font-size: 0.74rem;
    color: var(--text-dim);
    line-height: 1.4;
    margin-top: 0.15rem;
}
.mb-arrow {
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.7;
}
.monetise-banner--gold .mb-arrow { color: var(--gold); }
.monetise-banner--green .mb-arrow { color: #25d366; }
@media (max-height: 860px) {
    #screen-landing .monetisation-banners { margin: 0.7rem 0 0.3rem; gap: 0.45rem; }
    #screen-landing .monetise-banner { padding: 0.6rem 0.75rem; gap: 0.6rem; }
    #screen-landing .mb-icon { width: 34px; height: 34px; }
    #screen-landing .mb-icon svg { width: 18px; height: 18px; }
    #screen-landing .mb-title { font-size: 0.82rem; }
    #screen-landing .mb-sub { font-size: 0.66rem; }
}

/* ============================================
   SANCHAALAK (humse-jude affiliate program) PAGE
   ============================================ */
.sanchaalak-content { padding: 1.5rem 1rem 3rem; max-width: 540px; margin: 0 auto; }

.sanchaalak-content .sanchaalak-content { padding: 0; }

.sanch-pitch, .sanchaalak-pitch {
    text-align: center;
    margin: 0.5rem 0 1.25rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(255, 140, 0, 0.04));
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 14px;
}
.sanch-headline {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}
.sanch-amount { color: var(--gold); font-weight: 700; }
.sanch-sub {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-dim);
    margin: 0;
    line-height: 1.4;
}

.sanch-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin: 1rem 0 1.25rem;
}
.sanch-stat {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.7rem 0.5rem;
    text-align: center;
}
.sanch-stat--approved {
    border-color: rgba(255, 215, 0, 0.5);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), transparent);
}
.sanch-stat-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.sanch-stat-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.2rem;
    line-height: 1;
}
.sanch-stat--approved .sanch-stat-value { color: var(--gold); }
.sanch-stat-meta {
    font-size: 0.62rem;
    color: var(--text-dim);
    margin-top: 0.3rem;
    line-height: 1.3;
}

.sanch-link-card, .sanch-upi-card, .sanch-how, .sanch-faq {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}
.sanch-link-label, .sanch-upi-label {
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
}
.sanch-link-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.sanch-link-row input {
    flex: 1;
    background: var(--bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.55rem 0.7rem;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    min-width: 0;
}
.sanch-link-row input:focus {
    outline: none;
    border-color: rgba(255, 215, 0, 0.5);
}
.btn-sanch-secondary {
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--gold);
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.btn-sanch-secondary:hover { background: rgba(255, 215, 0, 0.08); }

.btn-sanch-share {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(37, 211, 102, 0.08));
    border: 1.5px solid rgba(37, 211, 102, 0.5);
    border-radius: 999px;
    color: #25d366;
    padding: 0.7rem 1.2rem;
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.4rem;
    box-shadow: 0 0 18px rgba(37, 211, 102, 0.12);
}
.btn-sanch-share:hover {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.25), rgba(37, 211, 102, 0.12));
    box-shadow: 0 0 24px rgba(37, 211, 102, 0.22);
}

.sanch-tip {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.45;
    margin: 0.6rem 0 0;
}

.sanch-how-title {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.sanch-how-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.sanch-how-list li { margin-bottom: 0.35rem; }
.sanch-how-list strong { color: var(--gold); margin-right: 0.4rem; }

.sanch-faq summary {
    cursor: pointer;
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 0.4rem;
}
.sanch-faq p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.5rem 0;
}
.sanch-faq strong { color: var(--text-primary); }

/* ============================================
   SANCHAALAK — DESKTOP OVERRIDES (≥1024px)
   The mobile layout (540px column) looks lost on a 1440px+ viewport,
   and the stats / how-it-works don't read as a real earnings dashboard.
   On desktop we widen the container, bump the hero, and split into a
   2-column grid: left = "money-side" (hero + stats + link/UPI cards),
   right = "context-side" (how-it-works + FAQ). Fits everything on one
   screen with no scroll for the typical desktop user.
   ============================================ */
@media (min-width: 1024px) {
    #screen-sanchaalak .sanchaalak-content {
        max-width: 1080px;
        padding: 3rem 3rem 4rem;
    }
    #screen-sanchaalak .landing-header { margin-bottom: 1.5rem; }
    #screen-sanchaalak .landing-header .app-title { font-size: 2.25rem !important; }
    #screen-sanchaalak .landing-header .app-subtitle { font-size: 1.05rem; }

    /* Bigger hero pitch — "₹49 per subscriber" should feel like a value
       proposition, not a footnote. */
    #screen-sanchaalak .sanchaalak-pitch {
        padding: 1.75rem 2rem;
        margin-bottom: 1.75rem;
    }
    #screen-sanchaalak .sanch-headline { font-size: 1.85rem; margin-bottom: 0.5rem; }
    #screen-sanchaalak .sanch-sub { font-size: 1rem; }

    /* Two-column body: money-side | context-side. */
    #screen-sanchaalak .sanch-body {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 1.5rem;
        align-items: start;
    }
    /* Stats live in the money column at the top so the earnings are the
       eye's first stop. Bigger values, comfortable card padding. */
    #screen-sanchaalak .sanch-stats {
        gap: 0.85rem;
        margin: 0 0 1rem;
    }
    #screen-sanchaalak .sanch-stat { padding: 1.25rem 0.75rem; }
    #screen-sanchaalak .sanch-stat-label { font-size: 0.72rem; }
    #screen-sanchaalak .sanch-stat-value { font-size: 2.1rem; margin-top: 0.4rem; }
    #screen-sanchaalak .sanch-stat-meta { font-size: 0.7rem; margin-top: 0.5rem; }

    /* All card chrome: roomier, easier to read. */
    #screen-sanchaalak .sanch-link-card,
    #screen-sanchaalak .sanch-upi-card,
    #screen-sanchaalak .sanch-how,
    #screen-sanchaalak .sanch-faq {
        padding: 1.5rem 1.5rem;
        margin-bottom: 1rem;
    }
    #screen-sanchaalak .sanch-link-row input { font-size: 0.95rem; padding: 0.7rem 0.85rem; }
    #screen-sanchaalak .btn-sanch-secondary { font-size: 0.9rem; padding: 0.6rem 1.1rem; }
    #screen-sanchaalak .btn-sanch-share { font-size: 1rem; padding: 0.85rem 1.5rem; }

    /* "कैसे काम करता है" list was centering numbers + text; on desktop
       force a clean left-aligned numbered list so it scans like steps,
       not floating fragments. */
    #screen-sanchaalak .sanch-how-list {
        font-size: 0.95rem;
        text-align: left;
    }
    #screen-sanchaalak .sanch-how-list li {
        padding-left: 0.25rem;
        margin-bottom: 0.5rem;
    }
    #screen-sanchaalak .sanch-faq p { font-size: 0.88rem; }

    #screen-sanchaalak #btn-sanchaalak-back {
        margin-top: 2rem !important;
        font-size: 0.95rem !important;
        padding: 0.7rem 1.75rem !important;
    }
}

/* ============================================
   PRAVACHAN HISTORY LIBRARY
   ============================================ */
.pravachan-history-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid rgba(255, 215, 0, 0.18);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    color: var(--gold);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.pravachan-history-link:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.35);
}

/* Landing WhatsApp share — HERO-sized secondary CTA. Bigger than a
   footnote pill so it reads as a real action, but visually distinct
   from the gold primary CTA (green WhatsApp colour) so the two don't
   compete for the same intent. Visible to all visitors — authed users
   get a personal invite link, anonymous users get a generic share. */
.landing-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    max-width: 360px;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15), rgba(37, 211, 102, 0.08));
    border: 1.5px solid rgba(37, 211, 102, 0.5);
    border-radius: 999px;
    padding: 0.75rem 1.25rem;
    color: #25d366;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    margin: 0.85rem 0 0.15rem;
    box-shadow: 0 0 20px rgba(37, 211, 102, 0.12);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.landing-share-btn:hover {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.22), rgba(37, 211, 102, 0.12));
    border-color: rgba(37, 211, 102, 0.75);
    box-shadow: 0 0 28px rgba(37, 211, 102, 0.22);
}
.landing-share-btn:active {
    transform: scale(0.98);
}
.landing-share-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}
/* Compact override so the share button stays above fold on short
   viewports (iPhone SE / 13 mini). Slightly shorter padding + smaller
   font; SVG stays readable. */
@media (max-height: 860px) {
    #screen-landing .landing-share-btn {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
        margin-top: 0.6rem;
    }
}

.pravachan-history-content {
    padding: 2rem 1.25rem calc(2.25rem + env(safe-area-inset-bottom));
}

.pravachan-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}

/* Filter chips — All / Krishna / Shiva at top of history screen. */
.history-filter-chips {
    display: flex;
    gap: 0.4rem;
    margin: 0.75rem 0;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}
.history-filter-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.history-filter-chip:hover {
    border-color: rgba(255, 215, 0, 0.3);
    color: var(--text-primary);
}
.history-filter-chip.active {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 140, 0, 0.05));
    border-color: var(--gold);
    color: var(--gold);
}

.pravachan-history-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    color: var(--text-primary);
    font-family: var(--font-body);
    text-align: left;
    width: 100%;
    transition: all 0.2s ease;
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}
.pravachan-history-item:hover {
    border-color: rgba(255, 215, 0, 0.35);
    background: rgba(255, 215, 0, 0.03);
    transform: translateY(-1px);
}

/* The row is split: main area (taps → replay) + action column. */
.pravachan-history-item .ph-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    cursor: pointer;
    min-width: 0;
}
.pravachan-history-item .ph-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}
.ph-icon-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    color: var(--text-dim);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}
.ph-icon-btn:hover {
    background: rgba(255, 215, 0, 0.06);
    border-color: rgba(255, 215, 0, 0.3);
    color: var(--gold);
}
.ph-icon-btn.ph-delete:hover {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.4);
    color: #e74c3c;
}
.ph-icon-btn.ph-fav:has(svg[fill="#FFD700"]) {
    /* styled directly via inline fill when favourited */
    color: var(--gold);
    border-color: rgba(255, 215, 0, 0.4);
}
.pravachan-history-item .ph-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}
.pravachan-history-item .ph-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.pravachan-history-item .ph-meta {
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
}
.pravachan-history-item .ph-deity {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.pravachan-history-item .ph-teaser {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.4;
    margin-top: 0.25rem;
    opacity: 0.85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pravachan-history-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}
.pravachan-history-empty .empty-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

/* ============================================
   PRAVACHAN ACTIVE SCREEN — meditation playback
   ============================================ */

/* Full-bleed deity image as temple backdrop. Low opacity + dark gradient
   scrim keep it atmospheric rather than dominant — aura and text stay
   visually primary. Gently pulses so the background breathes with the
   meditation pacing. */
.pravachan-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.22;
    /* Subtle zoom-in animation — 30-sec cycle gives a "breathing" feel. */
    animation: backdropBreathe 30s ease-in-out infinite alternate;
    pointer-events: none;
    /* Slight blur keeps photographic detail from competing with the aura. */
    filter: blur(2px) saturate(0.85);
}
.pravachan-backdrop.krishna-backdrop {
    background-image: url('/static/images/krishna_landscape.jpg');
}
.pravachan-backdrop.shiva-backdrop {
    background-image: url('/static/images/shiva_landscape.jpg');
}
@keyframes backdropBreathe {
    0%   { transform: scale(1);    opacity: 0.18; }
    100% { transform: scale(1.06); opacity: 0.26; }
}
/* Dark radial scrim — keeps the center of the stage dark so the deity
   avatar + aura punch through, while edges show the temple imagery. */
.pravachan-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(10, 14, 28, 0.55) 0%, rgba(10, 14, 28, 0.2) 50%, rgba(10, 14, 28, 0.75) 100%),
        linear-gradient(180deg, rgba(10, 14, 28, 0.4) 0%, rgba(10, 14, 28, 0.15) 30%, rgba(10, 14, 28, 0.7) 100%);
}

/* The container needs to sit above the backdrop. */
#screen-pravachan-active .pravachan-active-container {
    position: relative;
    z-index: 1;
}
#screen-pravachan-active {
    overflow: hidden;
}

/* End-of-pravachan fade-in overlay. Shown after pravachan_ended fires;
   the deity's vocal outro plays underneath while this fades up. After
   the audio queue drains the JS transitions to postcall, so this is on
   screen for ~3-5 seconds total. Pure visual cushion, no buttons. */
.pravachan-end-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: radial-gradient(ellipse at center, rgba(10, 14, 28, 0.85) 0%, rgba(10, 14, 28, 0.95) 75%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-out;
}
.pravachan-end-overlay.visible {
    opacity: 1;
    pointer-events: all;
}
.pravachan-end-overlay .end-overlay-glyph {
    font-size: 3.5rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.25rem;
    text-shadow: 0 0 24px rgba(255, 215, 0, 0.45);
    animation: endOverlayBreathe 3s ease-in-out infinite alternate;
}
@keyframes endOverlayBreathe {
    0%   { opacity: 0.85; transform: scale(1);    }
    100% { opacity: 1;    transform: scale(1.05); }
}
.pravachan-end-overlay .end-overlay-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.04em;
}
.pravachan-end-overlay .end-overlay-sub {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-style: italic;
}

.pravachan-active-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.pravachan-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.pravachan-topic-label {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pravachan-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 0;
    padding: 1.25rem 0 0.5rem;
}

/* Slower, more meditative pulse than the call-screen ring pulse (1.5s).
   Kicks in when .meditation-pulse is on .call-aura. */
.call-aura.meditation-pulse .aura-ring {
    animation-duration: 6s;
    opacity: 0.25;
}

.pravachan-progress-wrap {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 0.5rem 0.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Prominent MM:SS counter. The elapsed figure is the focal element; the
   total is a soft reference in dim grey. */
.pravachan-timer {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
}
.pravachan-timer-elapsed {
    font-size: 2rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.02em;
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.18);
}
.pravachan-timer-sep,
.pravachan-timer-total {
    font-size: 0.9rem;
    color: var(--text-dim);
    font-weight: 400;
}

.pravachan-chapter-pips {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 0.5rem;
}

.pravachan-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.3s ease;
}

.pravachan-pip.active {
    background: var(--gold);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Prep state (shown before deity starts speaking) — subtle pulsing dots
   and a rotating Hindi status message under the deity name. */
.pravachan-preparing {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    animation: prepFadeIn 0.6s ease forwards;
}
@keyframes prepFadeIn {
    to { opacity: 1; }
}
.prep-dots {
    display: flex;
    gap: 6px;
}
.prep-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.3;
    animation: prepDotPulse 1.4s infinite ease-in-out;
}
.prep-dots span:nth-child(2) { animation-delay: 0.2s; }
.prep-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes prepDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
    40% { opacity: 1; transform: scale(1.3); }
}
.prep-joining {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold);
    text-align: center;
    letter-spacing: 0.02em;
    text-shadow: 0 0 18px rgba(255, 215, 0, 0.35);
    animation: prepJoiningPulse 2.4s ease-in-out infinite;
}
@keyframes prepJoiningPulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

.prep-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--gold);
    opacity: 0.85;
    font-style: italic;
    text-align: center;
    transition: opacity 0.4s ease;
    min-height: 1.4em;
}
.prep-text.fading {
    opacity: 0;
}

/* Skip / Replay media-player controls on the pravachan-active screen. */
.pravachan-controls {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin: 0.5rem auto 0;
    max-width: 440px;
}

.prav-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    min-height: 44px;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.prav-control-btn:hover {
    background: rgba(255, 215, 0, 0.07);
    border-color: rgba(255, 215, 0, 0.3);
    color: var(--gold);
}
.prav-control-btn:active {
    transform: scale(0.97);
}

/* Mute toggle — when tanpura is muted, the button dims slightly so the
   user can see the off state at a glance. */
.prav-control-btn.muted {
    color: var(--text-dim);
    border-color: rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
}

/* Brief confirmation flash when skip/replay is registered. */
.pravachan-chapter-pips.flashing .pravachan-pip {
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
    background: var(--gold);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.pravachan-transcript-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin: 0.75rem 0.25rem 0;
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pravachan-transcript-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

#pravachan-transcript {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.pravachan-sentence {
    color: var(--gold);
    opacity: 0.9;
    margin: 0 0 0.4rem 0;
}

/* ============================================
   PRAVACHAN — DESKTOP OVERRIDES (≥1024px)
   ============================================ */
@media (min-width: 1024px) {
    /* ----- Variant A (pravachan-hero): single Satsang tile as the
       sole hero on desktop. Call tile hidden — variant A is
       satsang-led; the cross-mode escape lives as a thin link below
       the share button. The mobile rule already hides BOTH tiles for
       this variant via Option B; on desktop we re-surface ONLY the
       satsang tile because horizontal real estate is cheap and the
       gold-bordered hero card sells the action better than chips
       alone. ----- */
    html[data-hero="pravachan"] #screen-landing .mode-hero-cards {
        display: flex;
        justify-content: center;
        max-width: 540px;
        margin: 1rem auto 0;
    }
    /* Section label "सुनना शुरू करें" stays hidden — without a list of
       tiles to introduce, it reads as orphan copy above a single hero
       card whose own title ("रोज़ का सत्संग") already names the action. */
    html[data-hero="pravachan"] #screen-landing .mode-hero-card[data-mode="audio"] {
        display: none;
    }
    html[data-hero="pravachan"] #screen-landing .mode-hero-card[data-mode="pravachan"] {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 1.75rem 1.75rem 1.4rem;
        opacity: 1;
        order: 0;
    }
    html[data-hero="pravachan"] #screen-landing .mode-hero-card[data-mode="pravachan"] .mode-hero-title {
        font-size: 1.35rem;
    }

    /* ----- Variant B (call-hero): keep the side-by-side equalize
       layout. Two cards read as "pick one" on a wide viewport. ----- */
    html #screen-landing .mode-hero-cards,
    html[data-hero="call"] #screen-landing .mode-hero-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        margin-top: 1rem;
    }
    #screen-landing .mode-hero-card,
    html[data-hero="call"] #screen-landing .mode-hero-card[data-mode="pravachan"],
    html[data-hero="call"] #screen-landing .mode-hero-card[data-mode="audio"] {
        padding: 1.5rem 1.5rem 1.25rem;
        opacity: 1;
        order: 0;
        border-color: rgba(255, 255, 255, 0.08);
    }
    html[data-hero="call"] #screen-landing .mode-hero-card[data-mode="pravachan"]::before {
        display: none;
    }
    html[data-hero="call"] #screen-landing .mode-hero-card[data-mode="audio"] .mode-hero-title,
    html[data-hero="call"] #screen-landing .mode-hero-card[data-mode="pravachan"] .mode-hero-title {
        font-size: 1.2rem;
    }
    #screen-landing .mode-hero-sub { font-size: 0.9rem; }
    #screen-landing .mode-hero-tag { font-size: 0.8rem; }

    /* Pravachan setup — wider card, larger duration tiles */
    #screen-pravachan-setup .pravachan-setup-content {
        max-width: 720px;
        padding: 3rem 4rem;
    }
    #screen-pravachan-setup .pravachan-duration-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    #screen-pravachan-setup .pravachan-duration-card .pd-num {
        font-size: 2.25rem;
    }

    /* Pravachan active — break out of the 480px cap like the call screen.
       Single-column stage (no transcript rail split) — transcript card sits
       below stage, progress bar above it. Everything centered within 960px. */
    #screen-pravachan-active {
        position: fixed;
        inset: 0;
        max-width: none;
        z-index: 10;
    }
    #screen-pravachan-active .pravachan-active-container {
        max-width: 960px;
        margin: 0 auto;
        padding: 1.5rem 2rem 2.5rem;
    }
    #screen-pravachan-active .call-aura {
        width: 480px;
        height: 480px;
    }
    #screen-pravachan-active .aura-ring-1 { width: 300px; height: 300px; }
    #screen-pravachan-active .aura-ring-2 { width: 400px; height: 400px; }
    #screen-pravachan-active .aura-ring-3 { width: 480px; height: 480px; }
    #screen-pravachan-active .call-deity-circle {
        width: 240px;
        height: 240px;
    }
    #screen-pravachan-active .krishna-svg-call {
        width: 200px;
        height: 200px;
    }
    #screen-pravachan-active .call-deity-name {
        font-size: 1.5rem;
        margin-top: 1.25rem;
    }
    #screen-pravachan-active .pravachan-progress-wrap {
        max-width: 640px;
    }
    #screen-pravachan-active .pravachan-transcript-card {
        max-height: 200px;
        margin: 1rem auto 0;
        max-width: 720px;
        width: 100%;
    }
    #screen-pravachan-active #pravachan-transcript {
        font-size: 1rem;
        line-height: 1.7;
    }
}


/* ============================================
   DESKTOP ZOOM-STYLE CALL LAYOUT (≥1024px)

   Only #screen-call breaks out of the 480px phone-cap; every other screen
   (login, landing, postcall, upgrade) keeps its centered mobile layout,
   which deliberately feels elegant on desktop too. The call screen becomes
   a 2-column grid: main stage left, transcript rail right, floating
   glassmorphic control dock anchored at the bottom.
   ============================================ */
@media (min-width: 1024px) {
    /* ---- App container unlocks ----
       Remove the 480px phone cap and the 1px vertical rules that framed it.
       Every screen now gets the full viewport to design against. */
    #app {
        max-width: none;
    }

    .screen {
        justify-content: center;
    }
    /* Landing has more vertical content than the viewport at typical
       desktop sizes (header + steps + deities + mode cards + CTA + …).
       With justify-content:center the column is centered vertically and
       the top (steps row + landing header) overflows above the visible
       area. Keep it top-aligned so the page reads from the top down. */
    #screen-landing {
        justify-content: flex-start;
    }
    /* Same reasoning for sanchaalak — the dashboard has lots of stacked
       cards that overflow when centered. */
    #screen-sanchaalak {
        justify-content: flex-start;
    }

    /* ============================================
       LOGIN — 2-column hero: value prop left, signin right.
       The right column is a tight vertical stack: horizontal deity chip
       row → Google sign-in → footnote. Previous version stacked chips
       VERTICALLY which made the right column feel cramped and top-heavy
       vs the left column's rich content.
       ============================================ */
    #screen-login .login-landing {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "hero    deities"
            "quote   cta"
            "stats   footnote";
        column-gap: 4rem;
        row-gap: 1.5rem;
        max-width: 1180px;
        padding: 3rem 4rem;
        align-items: start;
        text-align: left;
    }
    #screen-login .login-hero { grid-area: hero; text-align: left; }
    #screen-login .login-demo-quote { grid-area: quote; max-width: none; text-align: left; }
    #screen-login .login-social-proof,
    #screen-login .login-benefits { grid-area: stats; justify-content: flex-start; align-items: flex-start; }
    /* Horizontal deity chip row — each chip takes equal width. The chips
       show real portraits + voice-preview buttons so the visitor's first
       visual impression on desktop is "oh, I can hear them speak". */
    #screen-login .login-deities {
        grid-area: deities;
        flex-direction: row;
        align-items: stretch;
        gap: 1rem;
    }
    #screen-login .login-cta { grid-area: cta; width: 100%; }
    #screen-login .login-footnote { grid-area: footnote; text-align: center; }

    #screen-login .login-hero .om-symbol { margin: 0 0 1.25rem; font-size: 3rem; text-align: left; }
    #screen-login .app-title { font-size: 3.25rem; text-align: left; }
    #screen-login .login-hero-tagline { font-size: 1.5rem; line-height: 1.3; }
    #screen-login .login-hero-sub { font-size: 1.05rem; line-height: 1.6; }
    #screen-login .login-deity-chip {
        flex: 1;
        justify-content: flex-start;
        align-items: center;
        padding: 1.75rem 1rem 1.25rem;
        gap: 0.75rem;
    }
    /* Larger portrait so the deity face dominates the chip the way a
       temple mural dominates a shrine. Previously 64px felt like a
       content-management placeholder; 140px reads as the hero element. */
    #screen-login .login-deity-avatar {
        width: 140px;
        height: 140px;
        margin-bottom: 0.5rem;
    }
    #screen-login .login-deity-avatar img {
        box-shadow: 0 0 28px rgba(255, 215, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.4);
    }
    #screen-login .login-deity-avatar .deity-preview-btn {
        width: 36px;
        height: 36px;
        bottom: 2px;
        right: 2px;
        border-width: 3px;
    }
    #screen-login .login-deity-avatar .deity-preview-btn svg { width: 16px; height: 16px; }
    #screen-login .login-deity-chip span:first-of-type { font-size: 1rem; }
    #screen-login .login-deity-hint { font-size: 0.8rem; }
    #screen-login .login-demo-quote { padding: 1.25rem 1.5rem; }
    #screen-login .login-quote-text { font-size: 1.05rem; }
    #screen-login .btn-google { width: 100%; font-size: 1rem; padding: 1rem 1.25rem; }

    /* ============================================
       LANDING — richer deity gallery, side-by-side cards.
       Top section is a single visual "chrome band": user-bar absolutely
       positioned to the top-right of landing-content so it reads as
       page chrome rather than a stray pill, while the header (om +
       title + subtitle + pitch) stays centred. Everything is tighter
       vertically — the pre-fix layout had ~2rem of dead space between
       the header and the steps row that made the page feel "loose"
       above the deity cards.
       ============================================ */
    #screen-landing .landing-content {
        position: relative;
        max-width: 1100px;
        padding: 1.25rem 4rem 3rem;
    }
    #screen-landing .landing-header { margin-bottom: 0.5rem; }
    #screen-landing .app-title { font-size: 2.5rem; line-height: 1.05; margin-bottom: 0.4rem; }
    #screen-landing .app-subtitle { font-size: 1.1rem; }
    #screen-landing .landing-pitch { margin-top: 0.5rem; }
    #screen-landing .landing-steps { margin: 0.5rem auto 0; }
    #screen-landing .section-label { font-size: 1rem; margin: 1.25rem 0 1rem; }

    /* User chrome — anchored to the top-right of the landing-content
       band so it sits in the same visual row as the header instead of
       floating alone. position:absolute (not sticky) escapes the flex
       column's vertical-flow pressure that previously pushed it down
       and away from the header. landing-content is `position:relative`
       above so this lands in the top-right of the content card, not
       the viewport — and isn't trapped by .screen's transform-induced
       containing block (transform creates a containing block only for
       fixed children, not absolute). */
    #screen-landing .user-bar {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        align-self: auto;
        z-index: 50;
        width: auto;
        max-width: none;
        background: rgba(14, 18, 32, 0.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        padding: 0.4rem 0.5rem 0.4rem 0.4rem;
        margin-bottom: 0;
    }

    #screen-landing .deity-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    #screen-landing .deity-card { width: 100%; }
    #screen-landing .deity-card-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.75rem;
        gap: 1rem;
    }
    #screen-landing .deity-avatar-circle { width: 112px; height: 112px; align-self: center; }
    #screen-landing .deity-info { width: 100%; text-align: center; }
    #screen-landing .deity-name { font-size: 1.35rem; }
    #screen-landing .deity-desc { font-size: 0.95rem; }
    #screen-landing .deity-tags { justify-content: center; }
    #screen-landing .deity-check { position: absolute; top: 1rem; right: 1rem; }

    #screen-landing .call-mode-toggle { margin: 2rem auto 0; }
    #screen-landing #btn-start-call { margin: 1.25rem auto 0; max-width: 420px; }
    #screen-landing .disclaimer { margin-top: 1rem; }

    /* ============================================
       SHARE SCREEN — wider centered card
       ============================================ */
    #screen-share .postcall-content {
        max-width: 640px;
        padding: 3rem 4rem;
    }
    #screen-share .postcall-blessing h2 { font-size: 2.25rem; }
    #screen-share .blessing-text { font-size: 1.1rem; line-height: 1.6; }
    #screen-share .share-cta-wrap { max-width: 480px; margin-inline: auto; }
    #screen-share #btn-share-whatsapp { font-size: 1.05rem; padding: 1rem 1.5rem; }

    /* ============================================
       POSTCALL (donation + new call) — 2-col: reflection left, actions right.
       Explicit grid-column placement (not grid-template-areas) because the left
       column only has 2 children and the right has 3 — a named-area template
       would need a non-rectangular area which invalidates the whole template.
       ============================================ */
    #screen-postcall .postcall-content {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        column-gap: 3.5rem;
        row-gap: 1.25rem;
        max-width: 1000px;
        padding: 3rem 4rem;
        align-items: start;
        text-align: left;
        width: 100%;
    }
    #screen-postcall .postcall-blessing { grid-column: 1; text-align: left; }
    #screen-postcall .postcall-blessing h2 { font-size: 2.25rem; text-align: left; }
    #screen-postcall .postcall-blessing .blessing-text { text-align: left; font-size: 1.05rem; }
    #screen-postcall .postcall-blessing .om-symbol { text-align: left; }
    #screen-postcall .call-summary { grid-column: 1; justify-content: flex-start; text-align: left; }
    #screen-postcall .donation-section { grid-column: 2; grid-row: 1; text-align: left; }
    #screen-postcall .donation-section h3 { text-align: left; }
    #screen-postcall .donation-options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
    #screen-postcall .donation-btn { padding: 1rem 0; font-size: 1.1rem; }
    #screen-postcall .postcall-upgrade-cta { grid-column: 2; grid-row: 2; text-align: left; }
    #screen-postcall #btn-new-call { grid-column: 2; grid-row: 3; justify-self: start; }

    /* ============================================
       UPGRADE — plans side-by-side with comparison feel.
       Keep the column narrow so the two cards stay close together;
       a 1000px card on a 27" monitor leaves the eye searching.
       ============================================ */
    #screen-upgrade .landing-content {
        max-width: 720px;
        padding: 2rem 2.5rem;
    }
    #screen-upgrade .landing-header { margin-bottom: 1.5rem; }
    #screen-upgrade .upgrade-card {
        max-width: none;
        padding: 2rem;
    }
    #screen-upgrade .upgrade-card > h3 { font-size: 1.5rem; }
    #screen-upgrade .upgrade-card > p { font-size: 1rem; margin-bottom: 1.5rem; }
    #screen-upgrade .upgrade-plans {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        align-items: stretch;
    }
    /* Equal-height cards so the recommended card's badge protrusion
       is the only visual offset — content baselines stay aligned.
       The base mobile rule caps cards at max-width:160px (so they don't
       stretch on a phone with the small flex layout). On desktop we want
       each card to fill its grid column, so cancel the cap. */
    #screen-upgrade .plan-card {
        padding: 1.5rem 1.25rem;
        max-width: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    #screen-upgrade .plan-price { font-size: 2rem; }
    #screen-upgrade .plan-name { font-size: 1.1rem; }
    #screen-upgrade .plan-desc { font-size: 0.9rem; }
    #screen-upgrade #btn-subscribe { font-size: 0.95rem !important; padding: 0.85rem 2.25rem !important; margin-top: 1.5rem !important; }

    /* ============================================
       CALL SCREEN (Zoom-style) — unchanged rules below
       ============================================ */
    /* Break the call screen out of the 480px #app container. */
    #screen-call {
        position: fixed;
        inset: 0;
        max-width: none;
        overflow: hidden;
        z-index: 10;
    }

    #screen-call .call-container {
        display: grid;
        grid-template-columns: 1fr 400px;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "header rail"
            "stage  rail";
        column-gap: 1.25rem;
        padding: 1.25rem 1.5rem 7rem; /* leave room for floating dock */
        max-width: 1600px;
        margin: 0 auto;
        height: 100%;
    }

    /* Header spans full stage column (not the rail). */
    #screen-call .ai-badge {
        grid-area: header;
        position: static;
        transform: none;
        justify-self: start;
        align-self: center;
    }
    #screen-call .call-header {
        grid-area: header;
        justify-self: end;
        gap: 1.25rem;
        padding: 0;
    }

    /* ---- Main stage ---- */
    #screen-call .call-deity-area {
        grid-area: stage;
        padding: 0;
        justify-content: center;
    }

    #screen-call .call-aura {
        width: 480px;
        height: 480px;
    }
    #screen-call .aura-ring-1 { width: 300px; height: 300px; }
    #screen-call .aura-ring-2 { width: 400px; height: 400px; }
    #screen-call .aura-ring-3 { width: 480px; height: 480px; }

    #screen-call .call-deity-circle {
        width: 260px;
        height: 260px;
    }
    #screen-call .krishna-svg-call {
        width: 210px;
        height: 210px;
    }
    #screen-call .call-deity-name {
        font-size: 1.6rem;
        margin-top: 1.5rem;
        letter-spacing: 0.5px;
    }

    /* Video mode: make the Simli stream fill more of the stage. */
    #screen-call .call-video-container {
        width: min(640px, 55vw);
        aspect-ratio: 4 / 3;
    }

    /* Visualizer lives under the stage; not its own grid row on desktop. */
    #screen-call .audio-visualizer {
        grid-area: stage;
        align-self: end;
        height: 56px;
        padding-bottom: 0.5rem;
    }

    /* ---- Side rail (transcript) ---- */
    #screen-call .transcript-area {
        grid-area: rail;
        max-height: none;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: var(--radius-lg, 16px);
    }
    #screen-call .transcript-area::before {
        content: "संवाद";
        display: block;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--gold);
        opacity: 0.7;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 215, 0, 0.08);
        flex-shrink: 0;
    }
    #screen-call #transcript-content {
        flex: 1;
        overflow-y: auto;
        font-size: 1rem;
        line-height: 1.7;
    }
    #screen-call #transcript-content:empty::before {
        content: "आपकी बातचीत यहाँ दिखाई देगी";
        color: var(--text-dim);
        font-style: italic;
        opacity: 0.5;
        font-size: 0.9rem;
    }

    /* ---- Glassmorphic control dock ---- */
    #screen-call .call-controls {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 2rem;
        transform: translateX(-50%);
        width: auto;
        gap: 1.25rem;
        padding: 0.85rem 1.75rem;
        background: rgba(14, 18, 32, 0.72);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    }
    #screen-call .control-btn {
        width: 52px;
        height: 52px;
    }
    /* Fixed dock is the primary end-call affordance on desktop, but keep
       the top-right End button visible — it's already styled fine. */
}