/* Study with Aivee Page Specific Styles */

.demo-player {
    aspect-ratio: 16 / 9; width: 100%; max-width: 860px; margin: 0 auto; position: relative;
    border-radius: 16px; border: 1px solid #e9ecef; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #f3ecfb 0%, #eef1fb 100%);
}
/*
 * The poster is the demo's own opening frame, so the play button sits at the
 * bottom of it rather than in the middle: centred, it would cover the Aivee
 * mascot and title the image is there to show. The caption moved out from
 * under the button to below the whole player for the same reason.
 */
.demo-poster {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 1.5rem; text-align: center; cursor: pointer;
}
.demo-poster-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Scrim: the opening frame is pale, so the dark play button needs a little
   shading under it to separate from the image. */
.demo-poster::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(26, 19, 48, 0.34) 0%, rgba(26, 19, 48, 0.08) 24%, rgba(26, 19, 48, 0) 42%);
}
.demo-poster .demo-play { position: relative; }
.demo-play {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: none; border-radius: 999px;
    background: #2c3e50; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18); transition: transform 0.3s ease;
}
.demo-play:hover { transform: translateY(-2px); }
.demo-caption { font-size: 0.85rem; color: #8d97a1; text-align: center; margin: 0.9rem 0 0; }
/* On a phone the player is only ~200px tall, so the button has to shrink or it
   swallows the frame behind it. */
@media (max-width: 560px) {
    .demo-poster { padding: 0.9rem; }
    .demo-play { padding: 10px 18px; font-size: 0.85rem; }
}
.demo-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Sound toggle under the demo player */
.demo-music {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem;
    max-width: 860px; margin: 1.1rem auto 0;
}
.demo-music[hidden] { display: none; }
.demo-music-toggle {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid #8B5DC3; background: #8B5DC3; color: #fff; font-family: inherit;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.demo-music-toggle[aria-pressed="false"] { background: transparent; color: #6c757d; border-color: #dee2e6; }
.demo-music-icon {
    width: 14px; height: 14px; flex: none; border-radius: 2px;
    /* Speaker glyph drawn in CSS so the control needs no icon font or SVG file. */
    background: currentColor;
    clip-path: polygon(0 32%, 30% 32%, 60% 5%, 60% 95%, 30% 68%, 0 68%);
}
.demo-music-toggle[aria-pressed="false"] .demo-music-icon { opacity: 0.55; }

.campaign-hero {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 150px 0 70px;
    border-bottom: 1px solid #dee2e6;
}
.campaign-hero .eyebrow {
    display: inline-block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; color: #8B5DC3; background: rgba(139, 93, 195, 0.08);
    padding: 0.4rem 1rem; border-radius: 50px; margin-bottom: 1.2rem;
}
.campaign-hero h1 { font-size: 2.8rem; font-weight: 700; color: #2c3e50; line-height: 1.2; margin-bottom: 1rem; max-width: 680px; }
.campaign-hero .sub { font-size: 1.15rem; color: #495057; max-width: 620px; margin-bottom: 2rem; }
.campaign-hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }

.progress-card { background: #ffffff; border: 1px solid #e9ecef; border-radius: 12px; padding: 1.75rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06); }
.progress-card .amounts { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.6rem; }
.progress-card .raised { font-size: 1.3rem; font-weight: 700; color: #2c3e50; }
.progress-card .goal { font-size: 0.9rem; color: #6c757d; }
.progress-track { height: 12px; background: #f0f1f3; border-radius: 50px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(135deg, #8B5DC3, #B084CC); border-radius: 50px; }
.progress-note { margin-top: 0.75rem; font-size: 0.85rem; color: #6c757d; }

.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

.girls-card { background: #ffffff; border: 1px solid #e9ecef; border-radius: 12px; padding: 1.75rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06); }
.girls-card .cap { font-size: 0.9rem; color: #495057; margin-bottom: 1rem; }
.girls-card .cap strong { color: #2c3e50; }
.girls-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; }
.girls-grid .cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; color: #ddc9e8; }
.girls-grid .cell.funded {
    background: linear-gradient(135deg, #8B5DC3, #B084CC);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.grid-legend { display: flex; gap: 1.25rem; margin-top: 0.9rem; font-size: 0.8rem; color: #6c757d; }
.grid-legend .swatch { display: inline-block; margin-right: 4px; vertical-align: -1px; color: #8B5DC3; }
.grid-legend .swatch.empty { color: #ddc9e8; }

@media (prefers-reduced-motion: no-preference) {
    .girls-grid .cell.funded { animation: swaivee-rise 0.45s ease backwards; }
}
@keyframes swaivee-rise {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

.story-band { background: #ffffff; padding: 80px 0; }
.story-copy { max-width: 620px; margin: 0 auto; }
.story-copy p { font-size: 1.05rem; color: #495057; margin-bottom: 1.4rem; }
.story-copy p.lede { font-size: 1.15rem; color: #2c3e50; }
.story-copy p.stanza { margin-bottom: 0.2rem; }
.story-copy p.stanza + p.stanza { margin-top: 0.2rem; }
.story-tagline {
    text-align: center; font-weight: 700; font-size: 1.3rem; color: #8B5DC3;
    margin: 2.5rem auto 0; max-width: 520px; line-height: 1.5;
}

.value-prop { padding: 80px 0; background: #ffffff; overflow-x: hidden; }

.two-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 3rem; }
.path-card { border-radius: 12px; padding: 2.25rem; border: 1px solid #e9ecef; }
.path-card.sponsor { background: linear-gradient(135deg, #8B5DC3, #B084CC); color: white; border: none; }
.path-card .tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; display: block; margin-bottom: 0.6rem; }
.path-card h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.path-card.sponsor h3 { color: white; }
.path-card p { color: #6c757d; margin-bottom: 1.5rem; }
.path-card.sponsor p { color: rgba(255, 255, 255, 0.92); }

.calc-row { display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.calc-row label { flex: 1; font-size: 0.85rem; font-weight: 600; color: #2c3e50; }
.calc-row input {
    display: block; width: 100%; margin-top: 0.4rem; padding: 0.6rem 0.75rem;
    border: 2px solid #e1e8ed; border-radius: 8px; font-size: 1rem; background: #fafbfc;
}
.calc-row input:focus { outline: none; border-color: #8B5DC3; box-shadow: 0 0 0 3px rgba(139, 93, 195, 0.1); background: white; }
.calc-total { background: #f8f9fa; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.95rem; color: #495057; margin-bottom: 1.5rem; }
.calc-total strong { color: #8B5DC3; }

@media (max-width: 900px) {
    .campaign-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .two-paths { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .campaign-hero { padding: 130px 0 50px; }
    .campaign-hero h1 { font-size: 2.1rem; }
}