/* CSS Variables / Design Tokens */
:root {
    --primary-blue: #5D2B96; /* Shifted from Blue to Purple */
    --primary-blue-hover: #451b75;
    --accent-pink: #C930AD; /* Magenta */
    --gold: #D4AF37;
    --gold-light: #F3E5AB;
    --gold-deep: #8A6D0B; /* donation buttons: white text = 4.9:1 */
    --violet: #7C3AED;       /* accent fills: white text = 5.7:1 */
    --violet-dark: #6D28D9;  /* accent text on light backgrounds (7:1), button hover */
    --violet-light: #B794F6; /* accent text/icons on dark backgrounds (7:1) */
    --violet-pale: #DDD0FF;  /* soft highlights on dark backgrounds */
    --pink-text: #B3279A; /* magenta for small text on light backgrounds */
    --text-white: #FFFFFF;
    --text-grey: #7A5B8E; /* Shifted grey to purple hue */
    --text-muted: #7B5B90;
    --text-dark: #2B0B47; /* Replaced black with Deep Purple */
    --bg-white: #FFFFFF;
    --bg-footer: #1A0033; /* Replaced dark grey with Deep Purple */
    --bg-light: #F7EEFA; /* Shifted white/grey to very light pink/purple */
    --success: #28a745;
    --danger: #dc3545;
    
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Source Serif Pro', serif;
    --font-ui: 'Titillium Web', sans-serif;
    --font-tamil: 'Hind Madurai', 'Meera Inimai', sans-serif;

    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --radius: 12px; /* Modern semi-rounded corners across site */
    --shadow: 0 10px 30px rgba(93,43,150,0.08); /* Purple tinted shadow */
}

/* Reset & Base HTML */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-dark); font-weight: 700; }
a { text-decoration: none; color: inherit; transition: var(--transition); }

.text-pink { color: var(--pink-text); }
.text-primary { color: var(--primary-blue); }
.text-gold { color: var(--gold); }
.text-accent { color: var(--violet-light); }
.text-white { color: var(--text-white); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-grey { color: var(--text-grey); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.bg-primary { background-color: var(--primary-blue); color: white;}
.bg-light { background-color: var(--bg-light); }
.bg-white { background-color: var(--bg-white); }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 2rem; }
.p-3 { padding: 1rem; }
.w-100 { width: 100%; }

.text-sm { font-size: 0.9rem; font-family: var(--font-ui); }

/* SPA screens framework */
.app-screen { display: none; opacity: 0; transition: opacity 0.4s ease; }
.app-screen.show { display: block; opacity: 1; }

/* Urgent Notice */
.urgent-notice {
    background: var(--text-dark);
    color: var(--text-white);
    text-align: center;
    padding: 0.5rem 1rem;
    font-family: var(--font-ui);
    font-size: 0.85rem;
    position: relative;
    z-index: 1001;
}
.urgent-notice a { color: var(--violet-light); text-decoration: underline; font-weight: 600;}
.urgent-notice .notice-link { color: var(--accent-pink); margin-left: 10px; }

/* Navigation */
.navbar {
    position: sticky; top: 0;
    width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.8rem 3rem;
    background: rgba(255, 255, 255, 0.98);
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(93,43,150,0.08);
}
.nav-left, .nav-right { flex: 1; display: flex; align-items: center; }
.nav-left { gap: 12px; }
.nav-right { justify-content: flex-end; gap: 14px; }
.nav-center { flex: 1.5; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Header Logo Placeholder */
.header-logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
}

.highlight { color: var(--accent-pink); }

.font-tamil {
    font-family: var(--font-tamil) !important;
    font-weight: 500 !important;
}

/* Language Swap Toggle (Theme Adopted) */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    background: rgba(93, 43, 150, 0.08);
    border-radius: 30px;
    padding: 3px;
    border: 1.5px solid var(--primary-blue);
    gap: 2px;
}
.lang-btn {
    border: none;
    background: transparent;
    color: var(--primary-blue);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition);
    font-family: var(--font-ui);
    letter-spacing: 0.5px;
}
.lang-btn.active {
    background: var(--primary-blue);
    color: var(--text-white);
    box-shadow: 0 2px 6px rgba(93, 43, 150, 0.3);
}
.lang-btn.dim {
    background: transparent;
    color: var(--text-grey);
    opacity: 0.65;
}
.lang-btn.dim:hover {
    opacity: 1;
    color: var(--accent-pink);
}

/* Main Site Link in Header */
.btn-main-site {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--primary-blue);
    background: rgba(93, 43, 150, 0.06);
    border: 1px solid rgba(93, 43, 150, 0.25);
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: var(--transition);
}
.btn-main-site:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

/* Header Navigation Links */
.nav-menu-link {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
}
.nav-menu-link:hover {
    color: var(--accent-pink);
    background: rgba(201, 48, 173, 0.06);
}

/* Buttons & Embossed Styling */
.btn {
    display: inline-block; font-family: var(--font-ui); font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px; padding: 0.8rem 1.5rem;
    border: none; border-radius: var(--radius); cursor: pointer; transition: var(--transition); text-align: center;
}
.btn-primary { 
    background-color: var(--primary-blue); 
    color: var(--text-white); 
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(93, 43, 150, 0.25);
}
.btn-primary:hover { background-color: var(--accent-pink); box-shadow: 0 6px 18px rgba(201, 48, 173, 0.45); color: var(--text-white); transform: translateY(-2px); }
.btn-secondary { background-color: var(--accent-pink); color: var(--text-white); border-radius: var(--radius); }
.btn-secondary:hover { box-shadow: 0 6px 18px rgba(201, 48, 173, 0.45); transform: translateY(-2px); }
.btn-outline { background-color: transparent; border: 2px solid var(--primary-blue); color: var(--primary-blue); border-radius: var(--radius); }
.btn-outline:hover { background-color: var(--primary-blue); color: var(--text-white); }
.btn-outline-white { background-color: transparent; border: 2px solid var(--text-white); color: var(--text-white); border-radius: var(--radius); }
.btn-outline-white:hover { background-color: var(--text-white); color: var(--primary-blue); }

/* Embossed Join Now Button */
.btn-join-top { 
    background: linear-gradient(135deg, #6c32ac 0%, #4a1d7f 100%);
    color: var(--text-white); 
    padding: 0.6rem 1.6rem; 
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 12px rgba(93, 43, 150, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    font-weight: 700;
}
.btn-join-top:hover { 
    background: linear-gradient(135deg, #dc35bd 0%, #a4208c 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 16px rgba(201, 48, 173, 0.5);
    transform: translateY(-2px); 
    color: white; 
}

.btn-accent { background-color: var(--violet); color: var(--text-white); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); }
.btn-accent:hover { background-color: var(--violet-dark); box-shadow: 0 6px 18px rgba(124, 58, 237, 0.5); transform: translateY(-2px); }
/* Donation buttons: rich gold with deep-purple text (about 8:1), not the olive/bronze of a dark gold fill */
.btn-donate { background: linear-gradient(135deg, #F4D35E 0%, #D4AF37 55%, #C39A1F 100%); color: var(--text-dark); box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35); }
.btn-donate:hover { background: linear-gradient(135deg, #FBE08A 0%, #E2BC45 55%, #D4AF37 100%); color: var(--text-dark); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.55); transform: translateY(-2px); }

.btn-large { padding: 1rem 2.5rem; font-size: 1.1rem; }
.btn-whatsapp { background: #0B7A3E; color: white; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-whatsapp:hover { transform: scale(1.02); background: #096633; }

.btn-disabled { background-color: #ddd; color: #888; cursor: not-allowed; border: 1px solid #ccc;}

@keyframes pulseP { 
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 48, 173, 0.7); } 
    70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(201, 48, 173, 0); } 
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 95, 250, 0); } 
}
.btn-pulse { animation: pulseP 2s infinite; background-color: var(--accent-pink); }

/* Hero Slider */
.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* fallback */
    height: calc(100svh - var(--header-h, 72px)); /* fills the screen directly beneath the sticky header */
    min-height: 520px;
    background: url('assets/bg.png') center/cover no-repeat;
    background-image: image-set(url('assets/bg.webp') type('image/webp'), url('assets/bg.png') type('image/png'));
    overflow: hidden;
}
.hero-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hero-slides-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 3;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.hero-slide {
    width: 33.33333%;
    flex: 0 0 33.33333%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}
.hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
    object-fit: cover; object-position: center 40%; /* keeps the aisle and door in view when cropped on portrait screens */
    pointer-events: none;
}
.hero-overlay {
    position: absolute; inset: 0;
    /* Three layers, top to bottom: (1) a dark band across the middle where the slide text sits,
       (2) a light edge vignette, (3) a light directional brand tint.
       Away from the text the combined opacity stays <= 0.5 so the footage reads clearly; behind the text it is >= 0.63,
       which keeps the heading and subtitle >= 4.5:1 even over a pure-white pixel (the footage has a bright doorway). */
    background:
        linear-gradient(to bottom, rgba(26, 0, 51, 0) 0%, rgba(26, 0, 51, 0.48) 16%, rgba(26, 0, 51, 0.48) 84%, rgba(26, 0, 51, 0) 100%),
        linear-gradient(to bottom, rgba(26, 0, 51, 0.15) 0%, rgba(26, 0, 51, 0) 35%, rgba(26, 0, 51, 0.18) 100%),
        linear-gradient(135deg, rgba(43, 11, 71, 0.36) 0%, rgba(66, 26, 116, 0.30) 100%);
    z-index: 2;
}
.hero-content {
    position: relative; z-index: 4; padding: 0 2rem; max-width: 900px; margin: 0 auto;
}
.hero-badge {
    display: inline-block; max-width: 100%; padding: 6px 18px; border: 1px solid rgba(255,255,255,0.3);
    color: var(--text-white); font-size: 1rem; line-height: 1.45; text-transform: uppercase; letter-spacing: 1px;
    text-wrap: balance;
    margin-bottom: 1.5rem; background: rgba(0,0,0,0.3);
}
.hero-title { color: var(--text-white); font-size: 4.2rem; line-height: 1.1; margin-bottom: 1rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.hero-subtitle { font-size: 1.35rem; color: #F3ECFF; margin-bottom: 2.5rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }

/* Slider Controls & Indicators */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(43, 11, 71, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: var(--transition);
}
.slider-control:hover {
    background: var(--accent-pink);
    border-color: var(--accent-pink);
    transform: translateY(-50%) scale(1.1);
}
.slider-control.prev { left: 25px; }
.slider-control.next { right: 25px; }

.slider-dots {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 12px;
}
.slider-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: var(--transition);
}
.slider-dots .dot.active {
    background: var(--accent-pink);
    width: 32px;
    border-radius: 12px;
}

/* Counter Section Typography */
.counter-section { background: var(--text-dark); padding: 4rem 2rem; }
.hero-stats-row {
    display: flex; justify-content: center; gap: 4rem; margin-bottom: 0;
}
.run-counter { text-align: center; color: var(--violet-light); }
.run-counter .num {
    font-size: 3.2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--violet-light);
    display: inline-block;
    letter-spacing: 1px;
}
.run-counter .lbl {
    display: block;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    font-family: 'Meera Inimai', sans-serif !important;
    color: #E2D0F9 !important;
    margin-top: 4px;
}

/* Book Showcase Section: real covers, Tamil title only */
/* minmax(0, 1fr), not plain 1fr: with 1fr a long unbreakable title makes its column wider than the others, so covers differ in size */
.book-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    margin-top: 3rem;
}
@media (min-width: 700px) { .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; } }
@media (min-width: 1100px) { .book-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; } }
.book-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0.8rem 1.1rem;
    background: var(--bg-white);
    border: 1px solid rgba(93, 43, 150, 0.12);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
    color: inherit;
    transition: var(--transition);
}
.book-card:hover {
    transform: translateY(-8px);
    border-color: var(--violet);
    box-shadow: 0 15px 35px rgba(124, 58, 237, 0.2);
}
.book-cover {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-light);
    box-shadow: 0 10px 20px rgba(43, 11, 71, 0.22);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-title {
    font-family: var(--font-tamil);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--violet-dark);
    overflow-wrap: anywhere;
}
.book-subtitle {
    margin-top: -0.55rem; /* sits close under the Tamil title */
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.35;
    color: #6B7280; /* neutral grey, 4.8:1 on white */
}

/* Form Back Button Styled */
.back-btn-styled {
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1.2rem;
    border-radius: 4px;
}

/* Animations */
.animate-up { opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s ease forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

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

/* Universal Layout & Sections */
.section { padding: 5rem 2rem; }
.section-container { max-width: 1200px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 4rem; }
/* Section labels are violet boxes with white text (white on #7C3AED = 5.7:1); they shrink-wrap their text and are centred by the section */
.section-label {
    display: inline-block; max-width: 100%;
    background: var(--violet); color: var(--text-white);
    font-family: var(--font-ui); font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; font-size: 0.8rem; line-height: 1.3;
    padding: 0.4rem 0.95rem; border-radius: 8px; margin-bottom: 0.9rem;
}
.section-title { font-size: 2.5rem; color: var(--primary-blue); margin-bottom: 1rem; }

.border-card { 
    background: var(--bg-white); 
    border: 1px solid rgba(93,43,150,0.15); 
    box-shadow: var(--shadow); 
    border-radius: var(--radius);
}
.border-pink { border-top: 4px solid var(--accent-pink); }

/* Landing Overview: Plans Grid */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 2rem; }
.plan-card {
    background: var(--bg-white); 
    border: 1px solid rgba(93,43,150,0.15); 
    padding: 2.2rem 1.8rem;
    border-radius: var(--radius);
    position: relative; 
    overflow: visible; 
    transition: var(--transition); 
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.plan-card.disabled { opacity: 0.8; cursor: not-allowed; border-color: #ddd;}
.plan-card.disabled:hover { transform: none; box-shadow: none; border-color: #ddd;}

.plan-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: var(--radius) var(--radius) 0 0;
    background: var(--primary-blue); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.plan-card:hover:not(.disabled) { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(93,43,150,0.12); border-color: var(--primary-blue); }
.plan-card:hover:not(.disabled)::before { transform: scaleX(1); }

.plan-card.accent-theme::before { background: var(--violet); }
.plan-card.accent-theme:hover { border-color: var(--violet); }
.plan-card.accent-theme.featured { border-color: var(--violet); box-shadow: 0 12px 30px rgba(124, 58, 237, 0.25); border-top: 5px solid var(--violet); }
.plan-card.accent-theme.featured::before { display: none; }

.icon-btn-info {
    position: absolute; top: 1rem; right: 1rem;
    background: transparent; border: none; font-size: 1.2rem; color: var(--primary-blue); cursor: pointer;
}
.icon-btn-info:hover { color: var(--accent-pink); }

.plan-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    z-index: 2; white-space: nowrap;
    background: linear-gradient(135deg, var(--violet), var(--accent-pink));
    color: var(--text-white); font-family: var(--font-ui);
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 6px 16px; border-radius: 999px;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}
.plan-icon { font-size: 2.4rem; color: var(--primary-blue); margin-bottom: 1rem; }
.accent-theme .plan-icon, .accent-theme .plan-icon .text-accent { color: var(--violet-dark) !important; }
.accent-theme .plan-features .text-accent { color: var(--violet-dark); }
.plan-name { font-size: 1.5rem; margin-bottom: 0.3rem; color: var(--primary-blue); }
.accent-theme .plan-name { color: var(--violet-dark) !important; }
.plan-price { font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 0.2rem; color: var(--text-dark);}
.plan-price sup { font-size: 1.2rem; }
.plan-price span { font-size: 0.95rem; color: var(--text-muted); font-weight: 400; }
.plan-subprice { display: block; font-size: 0.85rem; color: var(--text-grey); margin-bottom: 0.8rem; font-family: var(--font-ui); }
.plan-desc { font-size: 0.95rem; color: var(--text-grey); margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(93,43,150,0.1); }
.plan-features { list-style: none; margin-bottom: 1.5rem; font-family: var(--font-ui); font-size: 0.95rem; flex-grow: 1; }
.plan-features li { margin-bottom: 0.5rem; display: flex; gap: 8px; align-items: start; }
.plan-btn { width: 100%; border-radius: var(--radius); }

/* Reading Space Temporarily Closed Section */
.reading-closed-section {
    background: linear-gradient(135deg, #2b0b47 0%, #1a0033 100%);
    color: white;
    padding: 4.5rem 2rem;
    border-top: 4px solid var(--accent-pink);
    border-bottom: 4px solid var(--violet-light);
}
.notice-box-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius);
    padding: 3rem 2.5rem;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}
.notice-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(201, 48, 173, 0.15);
    border: 2px solid var(--accent-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--accent-pink);
    margin: 0 auto 1.5rem;
}
.notice-title {
    color: #FFFFFF;
    font-size: clamp(1.5rem, 6.5vw, 2.2rem);
    overflow-wrap: anywhere;
    margin-bottom: 1.2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.notice-lead {
    font-size: 1.15rem;
    color: var(--violet-pale);
    font-weight: 600;
    margin-bottom: 1.2rem;
}
.notice-body {
    color: #e2d3ed;
    font-size: 1.05rem;
    line-height: 1.85;
    margin-bottom: 1.5rem;
    font-family: var(--font-body);
}
.notice-body p { margin-bottom: 1rem; }
.notice-highlight {
    background: rgba(183, 148, 246, 0.1);
    border-left: 3px solid var(--violet-light);
    padding: 12px 18px;
    border-radius: 6px;
    margin: 1.2rem 0;
    color: #FFF;
}
.notice-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 2rem 0 1.5rem;
}

/* How to Take Books & Membership Workflow Section */
.workflow-section {
    padding: 5rem 2rem;
    background: var(--bg-light);
}
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 3.5rem 0 3rem;
    position: relative;
}
.step-card {
    background: var(--bg-white);
    border: 1px solid rgba(93, 43, 150, 0.12);
    border-radius: var(--radius);
    padding: 2.2rem 1.4rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.step-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-blue);
    box-shadow: 0 12px 30px rgba(93, 43, 150, 0.15);
}
.step-number-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-blue);
    color: white;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(93, 43, 150, 0.4);
}
.step-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(93, 43, 150, 0.08);
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    transition: var(--transition);
}
.step-card:hover .step-icon-box {
    background: var(--accent-pink);
    color: white;
}
.step-card h4 {
    font-size: 1.15rem;
    color: var(--primary-blue);
    margin-bottom: 0.6rem;
}
.step-card p {
    font-size: 0.9rem;
    color: var(--text-grey);
    font-family: var(--font-ui);
    line-height: 1.5;
}
.step-arrow-icon {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    color: var(--accent-pink);
    font-size: 1.2rem;
    z-index: 2;
}

/* Light Box / Image Placeholder */
.hub-image-placeholder {
    max-width: 850px;
    margin: 2.5rem auto 0;
    background: var(--bg-white);
    border: 2px dashed rgba(93, 43, 150, 0.25);
    border-radius: var(--radius);
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: inset 0 2px 6px rgba(93, 43, 150, 0.04);
}

/* Landing Overview: Benefits */
.benefits-strip { background: var(--text-dark); padding: 4rem 2rem; border-radius: 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 3rem;}
.embossed-icon-box {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(183, 148, 246, 0.2); 
    border-radius: var(--radius);
    padding: 2rem 1rem; text-align: center; color: rgba(255,255,255,0.8);
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.05), 0 5px 15px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.embossed-icon-box:hover { transform: translateY(-5px); border-color: rgba(183, 148, 246, 0.5); }
.benefit-icon { font-size: 3rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); margin-bottom: 1rem; }
.embossed-icon-box h4 { color: white; font-size: 1.3rem; margin-bottom: 0.5rem; text-shadow: 1px 1px 2px rgba(0,0,0,0.8);}

/* FAQ */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; }
.faq-card { padding: 2rem; border-radius: var(--radius); }
.faq-q { color: var(--primary-blue); font-size: 1.2rem; margin-bottom: 0.5rem; }
.faq-a { font-family: var(--font-ui); color: var(--text-grey); }

/* REGISTRATION LAYOUT */
.registration-layout {
    max-width: 1200px; margin: 0 auto; padding: 4rem 2rem 4rem;
    display: grid; grid-template-columns: 1fr 350px; gap: 3rem;
}
.form-wrapper { padding: 3rem; position: relative; border-radius: var(--radius); }
.back-link { font-family: var(--font-ui); font-weight: 600; color: var(--text-muted); margin-bottom: 2rem; display: inline-block; }
.back-link:hover { color: var(--primary-blue); }

/* Stepper */
.stepper { display: flex; justify-content: space-between; margin-bottom: 3rem; position: relative; }
.step-progress { position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: #eeddf2; z-index: 1; }
.progress-fill { height: 100%; background: var(--primary-blue); transition: width 0.4s ease; }
.step { position: relative; z-index: 2; text-align: center; }
.step-num { 
    width: 32px; height: 32px; border: 2px solid #eeddf2; background: white; 
    display: flex; align-items: center; justify-content: center; margin: 0 auto 5px; 
    font-family: var(--font-ui); font-weight: 700; color: #eeddf2; border-radius: 50%; transition: var(--transition);
}
.step span { font-size: 0.85rem; font-family: var(--font-ui); font-weight: 600; color: var(--text-muted); text-transform: uppercase; }

.step.active .step-num { border-color: var(--primary-blue); background: var(--primary-blue); color: white; }
.step.active span { color: var(--primary-blue); }
.step.done .step-num { border-color: var(--success); background: var(--success); border: none; font-size:0; }
.step.done .step-num::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: white; font-size: 12px; }

/* Form Elements */
.form-step { display: none; }
.form-step.active { display: block; animation: fadeUp 0.4s ease forwards; }
.step-title { font-size: 2rem; color: var(--primary-blue); margin-bottom: 0.5rem; }
.step-sub { font-family: var(--font-ui); color: var(--text-grey); margin-bottom: 2.5rem; }

.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

.input-group { position: relative; margin-bottom: 2rem; }
.input-group input, .input-group select {
    width: 100%; padding: 0.8rem 0; font-size: 1rem; font-family: var(--font-ui);
    border: none; border-bottom: 2px solid #cebbd6; background: transparent; outline: none; border-radius: 0;
    transition: var(--transition); color: var(--text-dark);
}
.input-group label {
    position: absolute; top: 0.8rem; left: 0; font-family: var(--font-ui); color: var(--text-muted);
    transition: var(--transition); pointer-events: none;
}
.input-group input:focus, .input-group input:not(:placeholder-shown) { border-bottom-color: var(--primary-blue); }
.input-group input:focus ~ label, .input-group input:not(:placeholder-shown) ~ label {
    top: -1rem; font-size: 0.8rem; color: var(--primary-blue); font-weight: 600;
}
.select-group select { color: var(--text-dark); cursor: pointer; }
.select-group select:focus { border-bottom-color: var(--primary-blue); }

.step-actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
.step-actions.split { justify-content: space-between; }
.btn-dual-row { display: flex; justify-content: flex-end; gap:10px; margin-top: 1rem; flex-wrap: wrap; }

/* Plan Radio Selection */
.plan-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.radio-card { cursor: pointer; display: block; }
.radio-card.disabled { opacity: 0.5; cursor: not-allowed; }
.radio-card input { display: none; }
.rc-inner { 
    border: 2px solid rgba(93,43,150,0.15); padding: 1.2rem; background: var(--bg-white); transition: var(--transition); 
    display: flex; flex-direction: column; align-items: flex-start; border-radius: var(--radius);
}
.rc-name { font-weight: 700; color: var(--primary-blue); margin-bottom: 4px; font-size: 1.1rem; }
.rc-accent .rc-name { color: var(--violet-dark); }
.rc-price { font-family: var(--font-ui); color: var(--text-grey); font-weight: 600; }
.rc-deposit { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.radio-card input:checked + .rc-inner { border-color: var(--primary-blue); background: rgba(93,43,150, 0.05); }
.radio-card input:checked + .rc-accent { border-color: var(--violet); }

/* Review Summary */
.summary-box { padding: 0; border-radius: var(--radius); overflow: hidden; }
.summary-head { background: rgba(93,43,150,0.05); padding: 10px 15px; font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; color: var(--primary-blue);}
.summary-body { padding: 15px; font-family: var(--font-ui); font-size: 1rem; line-height: 1.8; color: var(--text-dark);}

.alert-info { background: rgba(93,43,150, 0.05); border: 1px solid rgba(93,43,150, 0.2); padding: 15px; font-family: var(--font-ui); color: var(--primary-blue); border-radius: var(--radius); }

/* Sidebar Data */
.sidebar-wrapper { border-top: 4px solid var(--primary-blue); border-radius: var(--radius); }
.sidebar-widget { padding: 2rem; margin-bottom: 1.5rem; border-radius: var(--radius); }
.sidebar-widget h4 { margin-bottom: 1.5rem; font-size: 1.2rem; }

.sidebar-active-plan { background: rgba(93,43,150, 0.05); border: 1px solid rgba(93,43,150, 0.2); padding: 15px; margin-bottom: 1.5rem; border-radius: 8px; }
.sap-title { font-weight: 700; font-size: 1.1rem; color: var(--text-dark); }
.sap-price { font-family: var(--font-ui); color: var(--text-grey); font-size: 0.95rem; }
.sap-deposit { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

.sidebar-perks { list-style: none; font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-dark); margin-bottom: 1.2rem; }
.sidebar-perks li { padding: 8px 0; border-bottom: 1px solid rgba(93,43,150,0.1); display: flex; align-items: center; gap: 10px; }
.sidebar-perks li:last-child { border: none; }
.perk-dot { font-size: 8px; color: var(--accent-pink); }

/* PAYMENT SCREEN (Screen 3) */
.payment-container { max-width: 600px; margin: 6rem auto; padding: 3rem; border-radius: var(--radius); }
.os-header { color: white; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-radius: 8px 8px 0 0; }
.os-header h3 { color: white; margin: 0; font-size: 1.2rem;}
.os-header span { font-family: var(--font-ui); font-size: 0.85rem; }
.os-row { display: flex; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(93,43,150,0.1); font-family: var(--font-ui); }
.os-label { color: var(--text-grey); }
.os-val { font-weight: 600; color: var(--text-dark);}
.total-row { background: rgba(93,43,150, 0.05); font-size: 1.2rem; border-bottom: none; border-radius: 0 0 8px 8px; }

/* Custom Modals */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(43, 11, 71, 0.6); backdrop-filter: blur(4px);
    z-index: 2000; display: none; opacity: 0; transition: opacity 0.3s;
}
.modal-overlay.show { display: block; opacity: 1; }

.custom-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -45%);
    background: var(--bg-white); padding: 3rem; width: 90%; max-width: 460px;
    z-index: 2001; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    border-radius: var(--radius);
    border-top: 5px solid var(--primary-blue); display: none; opacity: 0; transition: all 0.3s;
}
.custom-modal.show { display: block; opacity: 1; transform: translate(-50%, -50%); }

.close-modal {
    position: absolute; top: 1rem; right: 1rem;
    background: none; border: none; font-size: 1.2rem; color: var(--text-muted); cursor: pointer;
}
.close-modal:hover { color: var(--accent-pink); }
.modal-perk-list { list-style: none; padding: 0; font-family: var(--font-ui); }
.modal-perk-list li { margin-bottom: 8px; font-size: 0.95rem; display: flex; gap:10px; align-items:start;}

.modal-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 1.5rem;
}
.modal-btn-row .btn { flex: 1; }

/* Global App Toast Notification */
.app-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, var(--primary-blue), #2b0b47);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 600;
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}
.app-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Footer */
.site-footer { background: var(--bg-footer); color: #B09CBF; padding: 4rem 2rem; font-family: var(--font-ui); font-size: 0.9rem; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto;}
.social-icons { display: flex; gap: 15px; margin-top: 1rem; }
.social-icons a { color: #B09CBF; font-size: 1.5rem; transition: var(--transition);}
.social-icons a:hover { color: var(--accent-pink); }

.subscribe-box { display: flex; gap:0; border-radius: var(--radius); overflow: hidden; }
.subscribe-box input { border: none; padding: 10px 14px; font-family: var(--font-ui); outline:none; width:100%;}
.subscribe-box button { border-radius: 0; padding: 10px 16px; }

/* Responsive */
@media (max-width: 992px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .step-arrow-icon { display: none; }
}
@media (max-width: 900px) {
    .registration-layout { grid-template-columns: 1fr; }
    .sidebar-wrapper { display: none; }
    .btn-dual-row { flex-direction: column; }
}
@media (max-width: 768px) {
    .hero-title { font-size: 3rem; }
    .nav-links .nav-menu-link { padding: 0.7rem 0.6rem; }
    .nav-links .btn-share { align-self: flex-start; margin-top: 4px; }
    .steps-grid { grid-template-columns: 1fr; gap: 2rem; }
    .input-row { grid-template-columns: 1fr; gap: 0; }
    .hero-stats-row { gap: 1rem; flex-wrap: wrap; }
    .run-counter .num { font-size: 2rem; }
    .slider-control { width: 40px; height: 40px; font-size: 1rem; }
    .slider-control.prev { left: 10px; }
    .slider-control.next { right: 10px; }
    .btn-dual-row { flex-direction: column; }
}

/* Floating WhatsApp */
.float-wa {
    position: fixed; bottom: 30px; right: 30px; background-color: #25D366; color: white;
    border-radius: 50%; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center;
    font-size: 32px; box-shadow: 0px 4px 15px rgba(0,0,0,0.25); z-index: 1500; transition: var(--transition);
}
.float-wa:hover { transform: scale(1.1); color: white; box-shadow: 0px 6px 20px rgba(37, 211, 102, 0.4); }

/* ===== Navigation helpers (desktop defaults) ===== */
.nav-links { display: flex; align-items: center; gap: 14px; }
.menu-toggle {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
    background: rgba(93, 43, 150, 0.08); border: 1.5px solid var(--primary-blue);
    color: var(--primary-blue); font-size: 1.1rem;
}
.mobile-only { display: none; }
.btn-share { padding: 0.4rem 1rem; border-radius: 20px; white-space: nowrap; }
button.btn-join-top { cursor: pointer; }

/* ===== Slider pause button ===== */
.slider-dots { align-items: center; }
.slide-pause {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    background: rgba(43, 11, 71, 0.7); border: 1px solid rgba(255,255,255,0.4);
    color: #fff; font-size: 0.65rem; display: inline-flex; align-items: center; justify-content: center;
    margin-left: 6px; padding: 0;
}
.slide-pause:hover { background: var(--accent-pink); }

/* ===== Honeypot (hidden from people, visible to naive bots) ===== */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ===== Inline form errors & consent ===== */
.field-error { position: absolute; left: 0; bottom: -1.4rem; font-family: var(--font-ui); font-size: 0.8rem; color: var(--danger); }
.field-error:empty { display: none; }
.input-group input[aria-invalid="true"], .input-group select[aria-invalid="true"] { border-bottom-color: var(--danger); }
.consent-box { font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-dark); }
.consent-label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.5; }
.consent-label input { margin-top: 4px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--primary-blue); }
.consent-label a { color: var(--primary-blue); text-decoration: underline; }

/* ===== Pricing clarity ===== */
.plan-first-payment { display: block; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; color: var(--primary-blue); margin: -0.4rem 0 0.8rem; }
.plans-footnote { text-align: center; font-family: var(--font-ui); font-size: 0.85rem; margin-top: 2rem; }

/* ===== Payment trust note ===== */
.trust-note { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-grey); margin-top: 0.6rem; }
.trust-note i { color: var(--success); margin-right: 4px; }

/* ===== Buttons used in place of links ===== */
.back-link { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0; }
.footer-link-btn { background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: #B09CBF; font: inherit; }
.footer-link-btn:hover { color: var(--accent-pink); }

/* ===== Keyboard focus ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--accent-pink); outline-offset: 2px;
}
.input-group input:focus-visible, .input-group select:focus-visible { outline-offset: 4px; }
.hero a:focus-visible, .hero button:focus-visible, .counter-section a:focus-visible { outline-color: var(--violet-light); }

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
    .animate-up { opacity: 1; transform: none; }
}

/* ===== Small phones: keep hero text clear of arrows/dots ===== */
@media (max-width: 480px) {
    .hero { min-height: 620px; }
    .hero-slide { padding-bottom: 70px; }
    .hero-content { padding: 0 1.2rem; }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.05rem; margin-bottom: 1.5rem; }
    .hero-badge { font-size: 0.85rem; padding: 5px 12px; margin-bottom: 1rem; }
    .slider-control { display: none; } /* swipe or use the dots on phones */
    .section { padding: 3.5rem 1.2rem; }
    .section-title { font-size: 2rem; }
    /* Two narrow book columns: slimmer side padding and a title size that scales with the screen, so the longest
       Tamil word (about 8.4 em wide) always fits on one line instead of being split */
    .book-card { padding: 0.7rem 0.4rem 1rem; }
    .book-title { font-size: clamp(0.8rem, 4.2vw, 1.05rem); }
    .notice-box-card { padding: 2rem 1.2rem; }
    .form-wrapper { padding: 1.5rem; }
}

/* ===== Header collapses into a menu on tablets and phones ===== */
@media (max-width: 1180px) {
    .navbar { padding: 0.5rem 0.8rem; gap: 8px; flex-wrap: nowrap; }
    .nav-left { flex: 0 0 auto; }
    .nav-center { flex: 1 1 auto; min-width: 0; }
    .nav-right { flex: 0 0 auto; gap: 8px; }
    .desktop-only { display: none !important; }
    .mobile-only { display: inline-flex !important; }
    .navbar .menu-toggle { display: inline-flex; }
    .btn-join-top { padding: 0.45rem 1rem; font-size: 0.85rem; letter-spacing: 0.5px; }
    .navbar .nav-links {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 4px;
        background: var(--bg-white); padding: 0.8rem 1rem 1rem;
        box-shadow: 0 10px 20px rgba(93,43,150,0.15);
        border-top: 1px solid rgba(93,43,150,0.1);
    }
    .navbar.menu-open .nav-links { display: flex; }
    .navbar .nav-links .btn-share { margin-top: 4px; }

    /* Menu text: 16px minus 2pt = 13.3px */
    .navbar .nav-links .nav-menu-link { font-size: 0.8333rem; }
    /* "Main site": a highlighted pill, icon and text on one centre line (same look as the desktop "Go to main site" button) */
    .navbar .nav-links .nav-menu-link.mobile-only {
        display: flex !important; align-items: center; gap: 8px; align-self: flex-start;
        margin: 4px 0; padding: 0.45rem 0.95rem; line-height: 1.2;
        font-weight: 700; color: var(--primary-blue); background: rgba(93, 43, 150, 0.14);
        border: 1px solid rgba(93, 43, 150, 0.45); border-radius: 999px;
    }
    .navbar .nav-links .nav-menu-link.mobile-only i { font-size: 0.85em; line-height: 1; }
    .navbar .nav-links .nav-menu-link.mobile-only:hover { color: var(--text-white); background: var(--primary-blue); border-color: var(--primary-blue); }
}


/* ===== Violet identity (replaces gold; gold remains only in the Donate section) ===== */
.benefits-strip .section-title { color: var(--violet-light); }
.donate-section { background: var(--bg-footer); border-top: 4px solid var(--gold); }
.donate-section .section-title { color: var(--gold); }
.donate-section .donate-text { color: #E2D0F9; font-size: 1.1rem; line-height: 1.8; margin-bottom: 2rem; }
.plan-footnote { display: block; text-align: center; margin-top: 0.7rem; font-family: var(--font-ui); font-size: 0.78rem; opacity: 0.7; color: var(--text-grey); }
.btn-accent:focus-visible, .btn-donate:focus-visible { outline-color: var(--violet-pale); }

/* Pills straddle the card's outer top edge regardless of border thickness */
.plan-badge { top: -1px; }
.plan-card.featured .plan-badge { top: -5px; }


/* ===== Logo ===== */
.header-logo-container { display: inline-flex; align-items: center; justify-content: center; }
.logo-img { height: 62px; width: auto; display: block; transition: var(--transition); }
.header-logo-container:hover .logo-img { transform: scale(1.04); }
.footer-logo { width: 150px; height: auto; display: block; margin: 0 auto 1rem; } /* transparent WebP, centred; white halo keeps the dark lettering legible on the dark footer */
@media (max-width: 1180px) { .logo-img { height: 48px; } }


/* ===== Scroll reveal =====
   Hidden only when <html> has .js-reveal (set in <head> when motion is allowed and IntersectionObserver exists).
   The keyframe has no "to" state, so once it ends the element returns to its normal styles and hover effects keep working.
   Keep this selector list in sync with REVEAL_SELECTOR in main.js. */
.js-reveal :where(.section-header, .book-card, .plan-card, .notice-box-card, .step-card, .benefit-item, .faq-card, .section.bg-light.text-center .section-container, #about .section-container > p, .donate-section .section-container, .footer-grid .foot-col):not(.is-visible) { opacity: 0; transform: translateY(28px); }
.js-reveal :where(.section-header, .book-card, .plan-card, .notice-box-card, .step-card, .benefit-item, .faq-card, .section.bg-light.text-center .section-container, #about .section-container > p, .donate-section .section-container, .footer-grid .foot-col).is-visible {
    animation: reveal-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    animation-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(28px); } }

/* ===== Small polish ===== */
.hero-title { text-wrap: balance; }
@media (max-width: 768px) { .site-footer { padding-bottom: 6rem; } } /* keeps the floating WhatsApp button off the Subscribe button */

/* ===== About: "Read more" text link ===== */
.about-more { margin-top: 1.5rem; font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; }
.read-more-link { color: var(--violet-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.read-more-link:hover { color: var(--pink-text); }

/* ===== Contact strip: green WhatsApp call-to-action (white on #0B7A3E = 5.4:1) =====
   The button is white with the brand-green WhatsApp glyph; the label shows from 481px up, below that it is the logo alone. */
.contact-strip { background: #0B7A3E; color: var(--text-white); padding: 1.6rem 2rem; }
.contact-strip-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.contact-strip-text { min-width: 0; }
.contact-strip h2 { color: var(--text-white); font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.25rem; }
.contact-strip p { font-family: var(--font-ui); font-size: 1rem; color: var(--text-white); }
.contact-strip-wa {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    min-width: 52px; min-height: 52px; padding: 0 1.3rem 0 0.9rem;
    background: var(--text-white); color: #0B7A3E; border-radius: 999px;
    font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.contact-strip-wa i { font-size: 2rem; line-height: 1; color: #25D366; }
.contact-strip-wa:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.contact-strip a:focus-visible { outline-color: var(--text-white); outline-offset: 3px; }
@media (max-width: 480px) {
    .contact-strip { padding: 1.2rem 1rem; }
    .contact-strip h2 { font-size: 1.25rem; }
    .contact-strip p { font-size: 0.9rem; }
    .contact-strip-wa { width: 52px; padding: 0; }
    .contact-strip-wa .wa-label { display: none; }
}
/* One WhatsApp button at a time: the floating one hides while the strip is on screen */
body.contact-in-view .float-wa { opacity: 0; visibility: hidden; transform: scale(0.8); pointer-events: none; }

/* ===== Footer bottom bar: copyright sits directly above "Powered by" ===== */
.footer-copy { margin-bottom: 0.5rem; }


/* ===== Portrait polish (viewport <= 768px) =====
   Compact buttons with one consistent layout: icon and label share a centred row (a long label wraps beside
   its icon, never leaving it alone on a line) and trailing icons move to the left, like the buttons that already
   have a leading icon. Desktop sizes are untouched. */
@media (max-width: 768px) {
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
        font-size: 0.82rem; line-height: 1.25; letter-spacing: 0.6px;
        padding: 0.55rem 1.1rem; min-height: 40px;
    }
    .btn-large { font-size: 0.9rem; padding: 0.65rem 1.4rem; min-height: 44px; }
    .btn.w-100, .btn.plan-btn, .btn.btn-whatsapp { display: flex; }
    .btn > i:last-child { order: -1; }
    /* controls with their own compact sizing keep it */
    .btn-join-top { padding: 0.45rem 1rem; font-size: 0.85rem; min-height: 0; }
    .btn-share { padding: 0.4rem 1rem; min-height: 0; }
}


/* ===== Plan cards: Classic per-month note, Avid Reader theme + gold Premium pill ===== */
.plan-permonth { position: absolute; top: 3rem; right: 1.1rem; max-width: 45%; text-align: right; font-family: var(--font-ui); font-size: 0.78rem; line-height: 1.25; color: var(--text-grey); }
.plan-card.avid-theme::before { background: #ae33c3; }
.plan-card.avid-theme:hover:not(.disabled) { border-color: #ae33c3; box-shadow: 0 15px 35px rgba(174, 51, 195, 0.18); }
.plan-card.avid-theme { border-top: 5px solid #ae33c3; }
.avid-theme .plan-icon, .avid-theme .plan-name, .text-avid { color: #ae33c3; }
.btn-avid { background-color: #ae33c3; color: var(--text-white); box-shadow: 0 4px 14px rgba(174, 51, 195, 0.35); }
.btn-avid:hover { background-color: #8f27a1; color: var(--text-white); box-shadow: 0 6px 18px rgba(174, 51, 195, 0.5); transform: translateY(-2px); }
.btn-avid:focus-visible { outline-color: var(--violet-pale); }
.plan-badge.badge-gold { background: linear-gradient(135deg, #F4D35E, #D4AF37 60%, #C39A1F); color: var(--text-dark); box-shadow: 0 4px 12px rgba(212, 175, 55, 0.45); }
.plan-card.avid-theme .plan-badge { top: -5px; }

/* ===== Header: Contact Us and Donate buttons ===== */
.btn-nav-cta { padding: 0.4rem 1rem; border-radius: 20px; white-space: nowrap; font-size: 0.85rem; }
.btn-nav-cta i { margin-right: 6px; }
@media (max-width: 1180px) { .navbar .nav-links .btn-nav-cta { align-self: flex-start; margin-top: 4px; } }
@media (max-width: 768px) { .btn-nav-cta { min-height: 0; } }

/* ===== Language switch (EN | FR) in the header ===== */
.navbar .lang-toggle { flex: 0 0 auto; }
.lang-btn { min-width: 36px; }
.lang-btn.dim { opacity: 1; color: var(--primary-blue); }
.lang-btn.dim:hover { color: var(--text-white); background: var(--primary-blue); }
.lang-btn:focus-visible { outline: 3px solid var(--accent-pink); outline-offset: 2px; }
@media (max-width: 1180px) { .navbar .nav-left { gap: 8px; } .lang-btn { padding: 4px 9px; font-size: 0.75rem; min-width: 32px; } }

/* French writes prices as "25 €": move the euro sign after the number on plan cards */
html[lang="fr"] .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; }
html[lang="fr"] .plan-price sup { order: 1; align-self: flex-start; margin: 0 0.1em 0 0.12em; }
html[lang="fr"] .plan-price span { order: 2; margin-left: 0.3em; }
/* Mid-size desktops: tighter header so Contact and Donate fit beside the language switch (English and French) */
@media (min-width: 1181px) and (max-width: 1400px) {
    .navbar { padding-left: 1.5rem; padding-right: 1.5rem; }
    .nav-right, .nav-links { gap: 8px; }
    .nav-menu-link { padding: 0.3rem 0.4rem; font-size: 0.85rem; }
    .btn-nav-cta, .btn-share { padding: 0.35rem 0.75rem; }
    .btn-join-top { padding: 0.6rem 1.2rem; }
}

/* ===== Very small phones (<= 380px): keep menu, language switch, logo and Join Now on one row without overlap ===== */
.nav-center { min-width: 0; }
.header-logo-container { max-width: 100%; }
.logo-img { max-width: 100%; object-fit: contain; }
@media (max-width: 380px) {
    .navbar { padding: 0.4rem 0.5rem; gap: 6px; }
    .navbar .nav-left { gap: 6px; }
    .navbar .menu-toggle { width: 36px; height: 36px; font-size: 1rem; }
    .lang-btn { padding: 3px 7px; font-size: 0.7rem; min-width: 28px; }
    .btn-join-top { padding: 0.4rem 0.7rem; font-size: 0.75rem; letter-spacing: 0; }
    .logo-img { height: 40px; }
}

/* Button label that must wrap as one block (a phone number never splits across lines) */
.nowrap { white-space: nowrap; }
.btn-label { text-align: center; line-height: 1.3; }

/* ===== Footer: centred logo/address/social, purple pin, animated social icons ===== */
.footer-logo { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.35)); }
.footer-grid .foot-col:first-child { text-align: center; }
.pin-icon { margin-right: 8px; color: #ae33c3; } /* 3.8:1 on the footer, fine for an icon */
.social-icons { justify-content: center; gap: 18px; }
.social-icons a { display: inline-flex; animation: social-bob 3.2s ease-in-out infinite; }
.social-icons a:nth-child(2) { animation-delay: 0.3s; }
.social-icons a:nth-child(3) { animation-delay: 0.6s; }
.social-icons a:nth-child(4) { animation-delay: 0.9s; }
.social-icons a:hover, .social-icons a:focus-visible { animation: social-pop 0.55s ease; }
.social-icons a[title="Facebook"]:hover, .social-icons a[title="Facebook"]:focus-visible { color: #5B9BFF; }
.social-icons a[title="Instagram"]:hover, .social-icons a[title="Instagram"]:focus-visible { color: #F06292; }
.social-icons a[title="Twitter / X"]:hover, .social-icons a[title="Twitter / X"]:focus-visible { color: #4FC3F7; }
@keyframes social-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes social-pop { 0% { transform: scale(1); } 40% { transform: translateY(-8px) scale(1.25); } 70% { transform: translateY(1px) scale(0.95); } 100% { transform: scale(1.1); } }
.social-icons a:hover { transform: scale(1.1); }

@media (max-width: 768px) {
    .footer-grid .foot-col { text-align: center; }
    .footer-grid .foot-col > div { align-items: center; }
    .subscribe-box { justify-content: center; }
}
@media (max-width: 480px) {
    .contact-strip-text { flex: 1; text-align: center; }
}

/* FAQ reassurance notes */
.faq-note { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed rgba(93, 43, 150, 0.25); font-size: 0.92rem; display: flex; gap: 8px; align-items: flex-start; }
.faq-note i { color: var(--violet-dark); margin-top: 0.25em; }