/* ==========================================================================
   Bodyform — design system
   Rewritten from the original Lovable build. Palette + type pulled from
   the live site's CSS custom properties.
   ========================================================================== */

:root {
    /* Brand palette — June 2026 guidelines */
    --espresso: #985820;   /* Burnt Sienna */
    --bark: #4a1e14;       /* Deep Wood Maroon */
    --wood: #5a483e;       /* Bark */
    --beige: #c2a37a;      /* Earth Beige */
    --concrete: #8a8a85;   /* Concrete Grey */
    --charcoal: #1c1c1c;   /* Charcoal Black */
    --ivory: #f3f1ec;      /* Warm Ivory */
    --cream: #efe8d8;      /* Soft Cream */
    --background: #3a170f;
    --card: #efe8d8;
    --card-foreground: #1c1c1c;
    --muted: #421c15;
    --muted-foreground: #cfc2b3;
    --border: rgba(255, 255, 255, 0.12);
    --border-dark: rgba(19, 11, 9, 0.15);

    --font-display: 'Cormorant Garamond', ui-serif, Georgia, serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

    --container-max: 1400px;
    --ease: cubic-bezier(0.16, 1, 0.32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--background);
    color: var(--ivory);
    font-family: var(--font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

@media (min-width: 768px) { .container { padding-inline: 2.5rem; } }
@media (min-width: 1280px) { .container { padding-inline: 4rem; } }

.eyebrow {
    display: inline-block;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

.text-display {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
    font-weight: 400;
    line-height: 0.95;
}

em.accent { font-style: normal; color: var(--beige); }
em.accent-dark { font-style: normal; color: var(--espresso); }

/* ---- Buttons ------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    transition: all 0.5s var(--ease);
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary { background: var(--ivory); color: var(--charcoal); border-color: var(--ivory); }
.btn-primary:hover { background: var(--beige); border-color: var(--beige); }

.btn-outline { background: transparent; border-color: rgba(247, 241, 233, 0.6); color: var(--ivory); }
.btn-outline:hover { background: var(--ivory); color: var(--charcoal); }

.btn-dark { background: var(--charcoal); color: var(--ivory); }
.btn-dark:hover { background: var(--espresso); }

.btn-block { width: 100%; }

/* ---- Header / nav ---------------------------------------------------- */

.site-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(19,11,9,0.55) 0%, rgba(19,11,9,0.15) 100%);
    backdrop-filter: blur(10px);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5.5rem;
}

.logo img { height: 2.25rem; width: auto; filter: brightness(0) invert(1); }

.main-nav ul { display: flex; align-items: center; gap: 0.25rem; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.main-nav a {
    position: relative;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.main-nav a:hover, .main-nav a.active { opacity: 1; }

.main-nav a::after {
    content: '';
    position: absolute;
    left: 1rem; right: 1rem; bottom: -1px;
    height: 1px;
    background: rgba(247, 241, 233, 0.8);
    transform: scaleX(0);
    transition: transform 0.5s var(--ease);
}

.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 0.5rem;
}

.nav-toggle span { width: 22px; height: 2px; background: var(--ivory); }

@media (max-width: 900px) {
    .main-nav { display: none; }
    .site-header .header-actions .book-cta { display: none; }
    .nav-toggle { display: flex; }

    .main-nav.open {
        display: block;
        position: absolute;
        top: 5.5rem; left: 0; right: 0;
        background: var(--charcoal);
        border-bottom: 1px solid var(--border);
    }
    .main-nav.open ul { flex-direction: column; align-items: stretch; padding: 1rem 1.5rem 1.5rem; gap: 0; }
    .main-nav.open a { padding: 0.9rem 0; }
    .main-nav.open a::after { display: none; }
}

/* ---- Hero -------------------------------------------------------------- */

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--ivory);
    display: flex;
    align-items: flex-end;
}

.hero--full { height: 100dvh; min-height: 680px; }
.hero--tall { height: 80vh; min-height: 560px; }
.hero--med { height: 70vh; min-height: 520px; }

.hero img.hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

.hero .scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(19,11,9,0.7) 0%, rgba(19,11,9,0.5) 55%, rgba(19,11,9,0.9) 100%);
}

.hero .scrim-side {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(19,11,9,0.8) 0%, rgba(19,11,9,0.35) 55%, transparent 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-block-end: 5rem;
    width: 100%;
}

.hero h1 { font-size: clamp(2.75rem, 7vw, 6rem); margin: 1.5rem 0 0; max-width: 60rem; }

.hero p.lede { max-width: 36rem; margin-top: 2rem; font-size: 1.05rem; line-height: 1.7; color: rgba(247,241,233,0.85); }

.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

.scroll-hint {
    position: absolute;
    right: 2rem; bottom: 2rem;
    z-index: 2;
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase;
    color: rgba(247,241,233,0.6);
}
.scroll-hint::before { content: ''; width: 2.5rem; height: 1px; background: rgba(247,241,233,0.4); }

@media (max-width: 700px) { .scroll-hint { display: none; } }

/* ---- Marquee ------------------------------------------------------------ */

.marquee-strip {
    background: var(--charcoal);
    color: var(--ivory);
    padding-block: 1.5rem;
    overflow: hidden;
    border-block: 1px solid var(--border);
}

.marquee-track {
    display: flex;
    gap: 4rem;
    white-space: nowrap;
    width: max-content;
    animation: marquee 22s linear infinite;
}

.marquee-track span {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    display: flex; align-items: center; gap: 4rem;
}

.marquee-track .sep { color: var(--beige); }

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* ---- Generic sections --------------------------------------------------- */

.section { padding-block: 6rem; }
@media (min-width: 768px) { .section { padding-block: 9rem; } }

.section--tight { padding-block: 4rem; }

.section--bark { background: var(--bark); color: var(--ivory); }
.section--charcoal { background: var(--charcoal); color: var(--ivory); }
.section--ivory { background: var(--ivory); color: var(--charcoal); }

.grid-12 { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .grid-12 { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }

@media (min-width: 768px) {
    .col-4 { grid-column: span 4; }
    .col-8 { grid-column: span 8; }
}

.lede-text { margin-top: 2.5rem; max-width: 42rem; font-size: 1.05rem; line-height: 1.75; color: var(--muted-foreground); }
.lede-text p + p { margin-top: 1.5rem; }
.lede-text p.lead-line { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ivory); line-height: 1.35; }

/* ---- Experience rows (image + text alternating) -------------------------- */

.experience-row {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    margin-block: 5rem;
}
@media (min-width: 768px) { .experience-row { grid-template-columns: 7fr 5fr; gap: 4rem; margin-block: 7rem; } }
.experience-row.reverse { direction: rtl; }
.experience-row.reverse > * { direction: ltr; }
@media (max-width: 767px) { .experience-row.reverse { direction: ltr; } }

.experience-row .image-frame { overflow: hidden; }
.experience-row .image-frame img { width: 100%; height: 520px; object-fit: cover; transition: transform 1.2s var(--ease); }
.experience-row .image-frame:hover img { transform: scale(1.03); }
@media (min-width: 768px) { .experience-row .image-frame img { height: 680px; } }

.experience-row h3 { font-size: clamp(2.25rem, 4vw, 3.25rem); margin: 1.25rem 0 0; }
.experience-row p { margin-top: 1.5rem; max-width: 26rem; line-height: 1.75; color: var(--muted-foreground); font-size: 0.95rem; }

.reserve-link {
    margin-top: 2rem;
    display: inline-flex; align-items: center; gap: 0.75rem;
    font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
    border-bottom: 1px solid rgba(247,241,233,0.6);
    padding-bottom: 0.25rem;
    transition: gap 0.3s;
}
.reserve-link:hover { gap: 1.25rem; }

/* ---- Feature grid (numbered cards) --------------------------------------- */

.feature-grid, .card-grid {
    display: grid;
    gap: 1px;
    background: var(--border);
    margin-top: 2rem;
}
@media (min-width: 640px) { .feature-grid, .card-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); } }

.feature-card {
    background: var(--bark);
    padding: 2.5rem;
    transition: background 0.7s;
}
.feature-card:hover { background: var(--espresso); }
.feature-card .num { font-family: var(--font-body); font-weight: 500; font-size: 3.5rem; color: rgba(209,177,147,0.7); margin-bottom: 2rem; }
.feature-card h3 { font-family: var(--font-display); font-size: 1.75rem; margin: 0; }
.feature-card p { margin-top: 1.25rem; font-size: 0.9rem; line-height: 1.7; color: rgba(247,241,233,0.7); }

/* ---- Testimonials ---------------------------------------------------------- */

.testimonials-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3rem; gap: 1rem; flex-wrap: wrap; }

.testimonial-nav { display: flex; gap: 0.5rem; }
.testimonial-nav button {
    width: 3rem; height: 3rem;
    border: 1px solid rgba(247,241,233,0.3);
    background: transparent; color: var(--ivory);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s;
}
.testimonial-nav button:hover { background: var(--ivory); color: var(--charcoal); }

.testimonial-slider { position: relative; min-height: 220px; }
.testimonial-slide {
    display: none;
}
.testimonial-slide.active { display: block; }
.testimonial-slide .quote-mark { font-size: 2.5rem; color: var(--beige); line-height: 1; margin-bottom: 1rem; display: block; }
.testimonial-slide p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.9rem); line-height: 1.4; max-width: 50rem; }
.testimonial-slide .attr { margin-top: 2rem; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(247,241,233,0.6); }
.testimonial-slide .attr .dot { color: var(--beige); margin-inline: 0.5rem; }

.testimonial-dots { display: flex; gap: 0.5rem; margin-top: 2.5rem; }
.testimonial-dots button { height: 1px; border: none; background: rgba(247,241,233,0.3); width: 2rem; padding: 0; transition: all 0.5s; }
.testimonial-dots button.active { background: var(--beige); width: 4rem; }

/* ---- Final CTA banner ------------------------------------------------------ */

.cta-banner { position: relative; overflow: hidden; background: var(--charcoal); color: var(--ivory); }
.cta-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.cta-banner .inner { position: relative; padding-block: 6rem; text-align: center; }
@media (min-width: 768px) { .cta-banner .inner { padding-block: 9rem; } }
.cta-banner h2 { font-size: clamp(2.5rem, 8vw, 6rem); margin-top: 1.5rem; line-height: 0.95; }
.cta-banner .btn { margin-top: 2.5rem; }
.cta-banner .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }

/* ---- Footer ---------------------------------------------------------------- */

.site-footer { background: var(--charcoal); color: var(--ivory); }
.footer-main { padding-block: 5rem; display: grid; gap: 3rem; }
@media (min-width: 768px) { .footer-main { grid-template-columns: repeat(12, 1fr); gap: 3rem; } }
@media (min-width: 768px) { .footer-brand { grid-column: 1 / span 4; } }
.footer-brand .headline { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 0.95; }
.footer-brand .btn { margin-top: 2rem; }

@media (min-width: 768px) {
    .footer-col--studio { grid-column: 5 / span 2; }
    .footer-col--legal { grid-column: 7 / span 3; }
    .footer-col--touch { grid-column: 10 / span 3; }
}
.footer-col ul { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem; }
.footer-col a:hover { color: var(--beige); }

/* ---- Legal / policy pages --------------------------------------------- */
.section--policy { padding-block: clamp(3rem, 8vw, 6rem); }
.policy-wrap { max-width: 820px; }
.policy-wrap .eyebrow { color: var(--beige); }
.policy-wrap h1 { margin: 0.75rem 0 2rem; color: var(--ivory); }
.policy-card {
    background: var(--ivory);
    color: var(--charcoal);
    border-radius: 16px;
    padding: clamp(1.5rem, 4vw, 3rem);
}
.policy-body { white-space: pre-wrap; font-size: 0.95rem; line-height: 1.75; color: var(--charcoal); }

.newsletter-form { margin-top: 1.25rem; display: flex; align-items: center; border-bottom: 1px solid rgba(247,241,233,0.3); }
.newsletter-form input {
    flex: 1; background: transparent; border: none; padding: 0.75rem 0;
    color: var(--ivory); font-size: 0.9rem; font-family: inherit;
}
.newsletter-form input::placeholder { color: rgba(247,241,233,0.4); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button { background: none; border: none; color: var(--ivory); padding: 0.5rem; }
.newsletter-form button:hover { color: var(--beige); }
.newsletter-note { margin-top: 0.6rem; font-size: 0.78rem; color: var(--beige); }

.footer-social { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.footer-social:hover { color: var(--beige); }

.footer-bottom { border-top: 1px solid var(--border); padding-block: 2rem; }
.footer-bottom .container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: center; }
@media (min-width: 768px) { .footer-bottom .container { flex-direction: row; text-align: left; } }
.footer-bottom img { height: 2rem; opacity: 0.9; filter: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(286%) hue-rotate(11deg) brightness(102%) contrast(92%); }
.footer-bottom .meta { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(247,241,233,0.5); }
@media (min-width: 768px) { .footer-bottom .meta { flex-direction: row; } }
.footer-bottom .meta .sep { color: rgba(247,241,233,0.3); }

/* ---- Page headers (non-home) ------------------------------------------------ */

.page-head { padding-top: 8rem; padding-bottom: 4rem; }
.page-head h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); margin-top: 1rem; }
.page-head p.lede { margin-top: 1.5rem; }

/* ---- Class ritual cards (About) ---------------------------------------------- */

.ritual-card { background: var(--bark); padding: 2.5rem; transition: background 0.7s; }
.ritual-card:hover { background: var(--espresso); }
.ritual-card .top { display: flex; align-items: baseline; justify-content: space-between; }
.ritual-card .num { font-family: var(--font-body); font-weight: 500; font-size: 2.75rem; color: rgba(209,177,147,0.7); }
.ritual-card h3 { font-family: var(--font-display); font-size: 1.6rem; margin: 2rem 0 0; }
.ritual-card p { margin-top: 1.1rem; font-size: 0.9rem; line-height: 1.7; color: rgba(247,241,233,0.75); max-width: 24rem; }

.sweat-level { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.sweat-level .drops { display: flex; gap: 2px; }
.sweat-level svg { width: 14px; height: 14px; }
.sweat-level svg.filled { fill: var(--beige); color: var(--beige); }
.sweat-level svg.empty { color: rgba(247,241,233,0.25); }

/* ---- Schedule page ------------------------------------------------------------ */

.filter-bar {
    margin-top: 3.5rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
    border-block: 1px solid var(--border-dark);
    padding-block: 1.25rem;
}
.filter-bar form { display: contents; }
.filter-pill {
    padding: 0.5rem 1rem; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    border: 1px solid rgba(19,11,9,0.2); background: transparent; color: inherit; transition: all 0.2s;
}
.filter-pill:hover { border-color: var(--charcoal); }
.filter-pill.active { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.filter-bar select {
    background: transparent; border: 1px solid rgba(19,11,9,0.2); padding: 0.5rem 1rem;
    font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: inherit; font-family: inherit;
}
.filter-bar .push { margin-left: auto; }

.day-tabs { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border-dark); }
.day-tabs a { padding: 1.25rem 0; text-align: center; font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; background: var(--background-alt, transparent); transition: background 0.2s; }
.day-tabs a.active { background: var(--charcoal); color: var(--ivory); }
.day-tabs a:not(.active):hover { background: rgba(19,11,9,0.06); }

.class-list { margin-top: 2.5rem; }
.class-row {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; align-items: center;
    padding: 1.75rem 0.75rem; border-bottom: 1px solid var(--border-dark);
    transition: background 0.2s;
}
.class-row:hover { background: rgba(19,11,9,0.04); }
.class-row .time { grid-column: span 3; font-family: var(--font-body); font-weight: 500; font-size: 1.6rem; }
.class-row .info { grid-column: span 6; }
.class-row .info h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0; }
.class-row .info .meta { margin-top: 0.25rem; letter-spacing: 0.22em; }
.class-row .badge-col { grid-column: span 3; }
.class-row .book-col { grid-column: span 12; text-align: right; }
@media (min-width: 768px) {
    .class-row .time { grid-column: span 2; }
    .class-row .info { grid-column: span 5; }
    .class-row .badge-col { grid-column: span 3; }
    .class-row .book-col { grid-column: span 2; }
}

.type-badge { display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; }
.type-badge.megaformer { background: var(--espresso); color: var(--ivory); }
.type-badge.hot-pilates { background: var(--charcoal); color: var(--beige); }
.type-badge.signature { background: var(--bark); color: var(--ivory); }
.type-badge.foundations { background: rgba(19,11,9,0.08); color: var(--charcoal); }

.book-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; border-bottom: 1px solid var(--charcoal); padding-bottom: 0.25rem; transition: gap 0.2s; }
.book-link:hover { gap: 1rem; }

.empty-state { padding: 4rem 0; text-align: center; color: rgba(19,11,9,0.5); }

/* ---- Packages page ------------------------------------------------------------- */

.summary-grid, .drop-in-grid, .tier-grid { border-radius: 1rem; overflow: hidden; }

.summary-card, .drop-in-card, .tier-card { background: var(--card); color: var(--card-foreground); padding: 2.25rem; }
.summary-card .label { text-transform: uppercase; letter-spacing: 0.32em; font-size: 0.7rem; color: var(--espresso); }
.summary-card .value { font-family: var(--font-body); font-weight: 500; font-size: 1.5rem; margin-top: 0.75rem; }
.summary-card .note { margin-top: 0.25rem; font-size: 0.75rem; font-style: italic; color: rgba(19,11,9,0.6); }

.drop-in-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.drop-in-card .badge { position: absolute; top: 1rem; right: 1rem; background: var(--beige); color: var(--charcoal); padding: 0.35rem 0.75rem; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; }
.drop-in-card h3 { font-family: var(--font-display); font-size: 1.75rem; margin: 0; }
.drop-in-card .credits { margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(19,11,9,0.6); }
.drop-in-card .price { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.25rem); }

.tier-card { position: relative; display: flex; flex-direction: column; }
.tier-card.highlight { background: var(--espresso); color: var(--ivory); }
.tier-card .badge { position: absolute; top: 1rem; left: 2rem; background: var(--beige); color: var(--charcoal); padding: 0.35rem 0.75rem; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; }
.tier-card.highlight { padding-top: 3.5rem; }
.tier-card h3 { font-family: var(--font-display); font-size: 2rem; margin: 0; }
.tier-card .credits-line { margin-top: 1rem; font-size: 0.9rem; }
.tier-card .credits-line .amount { font-weight: 500; font-size: 1rem; }
.tier-card .credits-line .validity { margin-top: 0.25rem; opacity: 0.7; }
.tier-card .price-block { margin-top: 2rem; }
.tier-card .was { font-size: 1rem; min-height: 1.5rem; text-decoration: line-through; opacity: 0.4; }
.tier-card .now { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.25rem); margin-top: 0.25rem; }
.tier-card .per-credit { margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--espresso); }
.tier-card.highlight .per-credit { color: var(--beige); }
.tier-card .equivalent { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(19,11,9,0.15); font-size: 0.9rem; }
.tier-card.highlight .equivalent { border-top-color: rgba(247,241,233,0.2); }
.tier-card .equivalent .label { font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 1rem; opacity: 0.55; }
.tier-card .equivalent .line { opacity: 0.75; }
.tier-card .equivalent .or { margin-block: 0.75rem; font-size: 0.65rem; font-style: italic; opacity: 0.5; }
.tier-card form { margin-top: auto; padding-top: 2.5rem; }

.notes-box { margin-top: 2.5rem; background: var(--bark); color: var(--ivory); padding: 2.5rem; border-radius: 1rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .notes-box { grid-template-columns: 4fr 8fr; gap: 1.5rem; } }
.notes-box .lead { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; line-height: 1.4; }
.notes-box ul { display: flex; flex-direction: column; gap: 0.75rem; font-size: 0.9rem; line-height: 1.6; color: rgba(247,241,233,0.8); }
.notes-box ul li::before { content: '· '; color: var(--beige); }

/* ---- FAQ ------------------------------------------------------------------------ */

.faq-layout { display: grid; gap: 3rem; }
@media (min-width: 768px) { .faq-layout { grid-template-columns: 4fr 8fr; gap: 3rem; } }
.faq-intro { }
.faq-intro p { margin-top: 1.5rem; max-width: 24rem; color: rgba(19,11,9,0.7); line-height: 1.7; }

.faq-group { margin-bottom: 3rem; }
.faq-group .group-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.5rem; }
.faq-group .group-head .n { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(153,57,25,0.7); }
.faq-group .group-head h3 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.faq-group .group-head .rule { flex: 1; height: 1px; background: rgba(19,11,9,0.15); }

.faq-item { border-top: 1px solid rgba(19,11,9,0.15); }
.faq-item:last-child { border-bottom: 1px solid rgba(19,11,9,0.15); }
.faq-item summary {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
    padding: 1.5rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.2rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex-shrink: 0; margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; position: relative; }
.faq-item summary .plus::before, .faq-item summary .plus::after { content: ''; position: absolute; background: currentColor; }
.faq-item summary .plus::before { inset-inline: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.faq-item summary .plus::after { inset-block: 0; left: 50%; width: 1px; transform: translateX(-50%); transition: opacity 0.2s; }
.faq-item[open] summary .plus::after { opacity: 0; }
.faq-item .faq-answer { padding-bottom: 1.75rem; max-width: 42rem; font-size: 0.95rem; line-height: 1.7; color: rgba(19,11,9,0.7); }

/* ---- Location page --------------------------------------------------------------- */

.info-blocks { display: flex; flex-direction: column; gap: 3rem; }
.info-block { border-top: 1px solid var(--border-dark); padding-top: 1.5rem; }
.info-block .head { display: flex; align-items: center; gap: 0.75rem; color: var(--espresso); }
.info-block .body { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--font-display); font-size: 1.2rem; }
.info-block .body a { display: flex; align-items: center; gap: 0.75rem; transition: color 0.2s; }
.info-block .body a:hover { color: var(--espresso); }
.info-block .body a svg { color: var(--espresso); flex-shrink: 0; }
.info-block .actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.map-frame { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border-dark); }
.map-frame iframe, .map-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); border: 0; display: block; }
@media (min-width: 768px) { .map-frame { aspect-ratio: 4/5; } }

/* ---- Member dashboard ---------------------------------------------------------------- */

.member-app { background: var(--ivory); color: var(--charcoal); min-height: 100vh; }

.member-topbar { background: var(--charcoal); color: var(--ivory); border-bottom: 1px solid var(--border); }
.member-topbar .container { display: flex; align-items: center; justify-content: space-between; height: 5.5rem; }
.member-topbar .logo img { height: 2rem; width: auto; filter: brightness(0) invert(1); }
.member-topbar .exit-link { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(247,241,233,0.7); transition: color 0.3s; }
.member-topbar .exit-link:hover { color: var(--ivory); }

.member-shell { padding-block: 4rem; }

.member-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .member-layout { grid-template-columns: 1fr; } }

.member-sidebar { background: var(--card); color: var(--card-foreground); border-radius: 1rem; padding: 2.5rem 2rem; text-align: center; }
.member-avatar {
    width: 72px; height: 72px; margin: 0 auto 1.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--espresso); color: var(--ivory);
    font-family: var(--font-display); font-size: 1.75rem;
}
.member-sidebar h2 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 0; }
.member-sidebar .meta { margin-top: 0.5rem; font-size: 0.78rem; line-height: 1.6; color: rgba(19,11,9,0.55); }

.member-nav { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-dark); display: flex; flex-direction: column; gap: 0.25rem; text-align: left; }
.member-nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: 0.6rem; font-size: 0.85rem; color: rgba(19,11,9,0.7); transition: background 0.2s, color 0.2s; }
.member-nav a svg { flex-shrink: 0; }
.member-nav a:hover { background: rgba(19,11,9,0.05); color: var(--charcoal); }
.member-nav a.active { background: var(--charcoal); color: var(--ivory); }

.member-main h1 { font-family: var(--font-body); font-size: 1.6rem; font-weight: 600; margin: 0 0 1.5rem; }

.member-tabs { display: flex; gap: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border-dark); }
.member-tabs a { position: relative; padding-bottom: 0.85rem; font-size: 0.85rem; color: rgba(19,11,9,0.5); }
.member-tabs a.active { color: var(--charcoal); font-weight: 600; }
.member-tabs a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--espresso); }

.membership-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--card); color: var(--card-foreground); border-radius: 1rem; padding: 2.25rem; }
.membership-card .credits-line { margin-top: 0.75rem; font-size: 0.95rem; }
.membership-card .validity { margin-top: 0.25rem; font-size: 0.8rem; color: rgba(19,11,9,0.55); }

.member-main .class-row:hover { background: rgba(19,11,9,0.04); }
.member-main .eyebrow { color: rgba(19,11,9,0.5); }
.member-main .meta { font-size: 0.8rem; color: rgba(19,11,9,0.55); margin: 0.2rem 0 0; }
.member-main h2 { font-family: var(--font-body); font-size: 1.2rem; font-weight: 600; margin: 2.5rem 0 1rem; }
.member-main .lede-sm { color: rgba(19,11,9,0.6); font-size: 0.95rem; margin: 0 0 1.5rem; }

.member-logout { display: block; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-dark); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(19,11,9,0.5); transition: color 0.2s; }
.member-logout:hover { color: var(--espresso); }

.back-link { display: inline-block; margin-bottom: 1rem; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(19,11,9,0.55); }
.back-link:hover { color: var(--espresso); }

.member-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; }
.member-section-head h1, .member-section-head h2 { margin: 0; }
.link-more { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--espresso); white-space: nowrap; }
button.link-more, .link-btn { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }

.pill { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(19,11,9,0.06); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(19,11,9,0.7); }

.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.72rem; }
.btn-disabled { opacity: 0.45; pointer-events: none; }
.btn-danger { background: #a3352b; color: #fff; }
.btn-danger:hover { background: #8a2a22; }

/* Home */
.member-greeting { margin-bottom: 1.5rem; }
.member-greeting h1 { margin: 0.25rem 0 0; }
.balance-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--charcoal); color: var(--ivory); border-radius: 1rem; padding: 1.75rem 2rem; transition: transform 0.2s; }
.balance-card:hover { transform: translateY(-2px); }
.balance-card.static:hover { transform: none; }
.balance-card .eyebrow { color: rgba(247,241,233,0.6); }
.balance-card .amount { font-family: var(--font-body); font-weight: 600; font-size: 2.25rem; line-height: 1.1; margin-top: 0.25rem; }
.balance-card .amount small { font-size: 1rem; opacity: 0.7; }
.balance-card .meta { color: rgba(247,241,233,0.6) !important; }
.balance-card .chev { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }

.promo-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (max-width: 640px) { .promo-strip { grid-template-columns: 1fr; } }
.promo-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.5rem; }
.promo-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 0; }
.promo-card p { margin: 0.4rem 0 0; font-size: 0.85rem; color: rgba(19,11,9,0.6); }

.article-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 760px) { .article-strip { grid-template-columns: 1fr; } }
.article-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.5rem; transition: transform 0.2s; }
.article-card:hover { transform: translateY(-2px); }
.article-card h3 { font-family: var(--font-display); font-size: 1.25rem; margin: 0.5rem 0; }
.article-card p { margin: 0; font-size: 0.85rem; color: rgba(19,11,9,0.6); }

/* Schedule */
.date-strip { display: flex; gap: 0.5rem; overflow-x: auto; margin: 1.5rem 0; }
.date-cell { flex: 0 0 auto; width: 3.25rem; padding: 0.75rem 0; text-align: center; border-radius: 0.75rem; border: 1px solid var(--border-dark); color: rgba(19,11,9,0.6); }
.date-cell .dow { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.date-cell .dom { display: block; font-family: var(--font-body); font-weight: 500; font-size: 1.25rem; margin-top: 0.15rem; }
.date-cell.active { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }
.filter-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .filter-row { flex-direction: column; } }
.filter { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(19,11,9,0.55); }
.filter select { padding: 0.7rem 0.85rem; border: 1px solid var(--border-dark); border-radius: 0.6rem; background: var(--card); font-family: var(--font-body); font-size: 0.9rem; color: var(--charcoal); }
.class-row .time .dur { display: block; font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(19,11,9,0.5); }
.class-row .book-col .spots { margin: 0.4rem 0 0; font-size: 0.75rem; color: rgba(19,11,9,0.55); }

/* Schedule rows: align Book/Booked/Full and centre the spots indicator */
.schedule-row .book-col { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.45rem; }
.schedule-row .book-col .btn { min-width: 6.5rem; text-align: center; }
.schedule-row .book-col .spots { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.schedule-row .book-col .spots::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; }

/* Member home: drop-in quick-buy card */
.dropin-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; background: var(--card); border: 1px solid var(--espresso); border-radius: 1rem; padding: 1.35rem 1.75rem; transition: transform 0.2s; }
.dropin-card:hover { transform: translateY(-2px); }
.dropin-card .eyebrow { color: var(--espresso); }
.dropin-card h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 0.3rem 0 0; }
.dropin-card .meta { margin: 0.25rem 0 0; }
.dropin-card .chev { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--espresso); }
.status-badge { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(45,90,60,0.12); color: #2d5a3c; font-size: 0.72rem; letter-spacing: 0.08em; }
.status-badge.warn { background: rgba(163,53,43,0.12); color: #a3352b; }

/* Metrics */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.35rem; text-align: center; }
.stat-value { font-family: var(--font-body); font-weight: 600; font-size: 1.85rem; line-height: 1; }
.stat-value .unit { font-size: 0.85rem; opacity: 0.6; margin-left: 0.2rem; }
.stat-label { margin-top: 0.4rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(19,11,9,0.55); }
.timeline-title { margin-top: 2rem; }
.timeline-month { margin: 1.5rem 0 0.75rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(19,11,9,0.45); }
.timeline-row { background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.35rem; margin-bottom: 0.75rem; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.timeline-head h3 { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.effort-badge { flex: 0 0 auto; padding: 0.3rem 0.7rem; border-radius: 999px; background: rgba(19,11,9,0.06); font-size: 0.75rem; }
.timeline-metrics { display: flex; gap: 1.5rem; margin: 0.85rem 0; font-size: 0.85rem; color: rgba(19,11,9,0.6); }
.timeline-metrics strong { color: var(--charcoal); }
.effort-bar { height: 6px; border-radius: 999px; background: rgba(19,11,9,0.08); overflow: hidden; }
.effort-fill { height: 100%; background: var(--espresso); }
.hr-chart { margin-top: 0.85rem; }
.hr-chart-title { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(19,11,9,0.55); margin-bottom: 0.4rem; }
.hr-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; font-size: 0.7rem; color: rgba(19,11,9,0.55); }
.hr-swatch { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 0.2rem; }
.hr-avg { margin-left: auto; opacity: 0.7; }

/* Mail */
.notif-list { display: flex; flex-direction: column; }
.notif-row { display: flex; gap: 0.85rem; padding: 1.25rem 0.5rem; border-bottom: 1px solid var(--border-dark); }
.notif-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 0.5rem; border-radius: 50%; background: transparent; }
.notif-row.unread .notif-dot { background: var(--espresso); }
.notif-body { flex: 1; }
.notif-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.notif-top h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin: 0; }
.notif-when { font-size: 0.72rem; color: rgba(19,11,9,0.45); white-space: nowrap; }
.notif-body p { margin: 0.3rem 0; font-size: 0.88rem; color: rgba(19,11,9,0.65); }

/* Account */
.account-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.account-head .member-avatar { margin: 0; width: 56px; height: 56px; font-size: 1.35rem; }
.account-head h2 { margin: 0; }
.account-group { margin-bottom: 1.75rem; }
.section-label { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(19,11,9,0.45); margin-bottom: 0.6rem; }
.account-rows { background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; overflow: hidden; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border); transition: background 0.2s; }
.account-row:last-child { border-bottom: 0; }
.account-row:hover { background: rgba(19,11,9,0.03); }
.account-row h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin: 0; }
.account-row p { margin: 0.2rem 0 0; font-size: 0.8rem; color: rgba(19,11,9,0.55); }
.account-row.danger h3 { color: #a3352b; }
.chev { color: rgba(19,11,9,0.35); flex: 0 0 auto; }

/* Credit */
.batch-list, .txn-list { display: flex; flex-direction: column; }
.batch-row, .txn-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border-dark); }
.batch-row h3, .txn-row h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin: 0; }
.batch-credits { font-family: var(--font-body); font-weight: 600; font-size: 1.2rem; }
.txn-amount { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.txn-amount.purchase { color: #2d5a3c; }
.txn-amount.usage { color: rgba(19,11,9,0.55); }
.pool-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .pool-list { grid-template-columns: 1fr; } }
.pool-card { background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.35rem; }
.pool-top { display: flex; align-items: center; justify-content: space-between; }
.pool-top h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 0; }
.pool-credits { margin-top: 0.75rem; font-family: var(--font-body); font-weight: 600; font-size: 1.35rem; }
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 760px) { .package-grid { grid-template-columns: 1fr; } }
.package-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; padding: 1.75rem 1.35rem; text-align: center; }
.package-card.featured { border-color: var(--espresso); box-shadow: 0 8px 30px rgba(19,11,9,0.08); }
.package-card .tag { position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%); background: var(--espresso); color: var(--ivory); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 999px; }
.package-card h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 0; }
.package-card .price { font-family: var(--font-body); font-weight: 600; font-size: 1.5rem; margin: 0.5rem 0 0.25rem; }
.package-card .btn { margin-top: 1rem; }

/* Order summary + detail */
.summary-card, .detail-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.75rem; }
.summary-line { display: flex; justify-content: space-between; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.summary-line.total { border-bottom: 0; border-top: 2px solid var(--border-dark); margin-top: 0.5rem; padding-top: 1rem; font-size: 1.05rem; }
.summary-card .btn { margin: 1.25rem 0 0.5rem; }
.detail-card h2 { margin: 0.75rem 0 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; }
.detail-item .eyebrow { display: block; font-size: 0.68rem; color: rgba(19,11,9,0.45); }
.detail-item p { margin: 0.25rem 0 0; font-size: 0.95rem; }
.detail-actions { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
@media (max-width: 480px) { .detail-actions { flex-direction: column; } }

/* Forms + setup */
.member-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (max-width: 560px) { .member-form .form-grid { grid-template-columns: 1fr; } }
.member-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(19,11,9,0.55); }
.member-form .form-wide { grid-column: 1 / -1; }
.member-form input { padding: 0.75rem 0.85rem; border: 1px solid var(--border-dark); border-radius: 0.6rem; background: var(--card); font-family: var(--font-body); font-size: 0.95rem; color: var(--charcoal); }
.setup-steps { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.setup-steps li { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border-dark); }
.step-badge { flex: 0 0 auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(19,11,9,0.08); font-size: 0.85rem; }
.setup-steps li.done .step-badge { background: #2d5a3c; color: #fff; }
.setup-steps h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin: 0; }
.waiver-box { margin: 0.75rem 0; padding: 1rem; border: 1px solid var(--border-dark); border-radius: 0.6rem; background: rgba(19,11,9,0.03); font-size: 0.85rem; color: rgba(19,11,9,0.7); }
.signature-pad { margin-top: 0.75rem; height: 90px; border: 1px dashed var(--border-dark); border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; color: rgba(19,11,9,0.35); font-style: italic; }
.check { display: flex; align-items: center; gap: 0.6rem; margin: 0.85rem 0; font-size: 0.88rem; text-transform: none; letter-spacing: normal; color: rgba(19,11,9,0.75); }
.check input { width: auto; }

/* Link lists + about + danger */
.link-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 0.85rem; overflow: hidden; }
.link-list-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--border); }
.link-list-row:last-child { border-bottom: 0; }
.link-list-row:hover { background: rgba(19,11,9,0.03); }
.link-list-row h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin: 0; }
.link-list-row p { margin: 0.2rem 0 0; font-size: 0.82rem; color: rgba(19,11,9,0.55); }
.about-block { text-align: center; margin-bottom: 2rem; }
.about-logo { height: 2.5rem; width: auto; margin-bottom: 1rem; }
.about-block p { color: rgba(19,11,9,0.7); }
.danger-card { background: rgba(163,53,43,0.05); border: 1px solid rgba(163,53,43,0.25); border-radius: 1rem; padding: 1.75rem; }
.danger-card h2 { margin-top: 0; color: #a3352b; }
.danger-list { margin: 1rem 0; padding-left: 1.25rem; color: rgba(19,11,9,0.7); font-size: 0.9rem; }
.danger-list li { margin-bottom: 0.4rem; }
.danger-card .btn-danger { margin: 0.5rem 0; }

.article-feed { display: flex; flex-direction: column; gap: 2rem; }
.article-full { padding-bottom: 2rem; border-bottom: 1px solid var(--border-dark); }
.article-full h2 { margin: 0.5rem 0; }
.article-full p { color: rgba(19,11,9,0.75); line-height: 1.7; }

/* Header member login button */
.member-cta { padding: 0.6rem 1.3rem; }

/* ---- Member theme toggle ------------------------------------------------------------ */

.topbar-right { display: flex; align-items: center; gap: 1.25rem; }
.theme-toggle { display: inline-flex; border: 1px solid rgba(247,241,233,0.28); border-radius: 999px; overflow: hidden; }
.theme-btn { padding: 0.4rem 0.9rem; font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,241,233,0.7); background: transparent; border: 0; cursor: pointer; transition: background 0.2s, color 0.2s; }
.theme-btn:hover { color: var(--ivory); }
.theme-btn.active { background: rgba(247,241,233,0.92); color: #130b09; }
[data-theme="bfapp"] .theme-btn.active { background: #efe8d8; color: #3a0002; }
@media (max-width: 900px) { .theme-btn { padding: 0.4rem 0.7rem; } }

/* ---- Member theme: bfapp colour scheme (beige + maroon/brown) ----------------------- */
/* Light is the default (no override). bfapp mirrors lib/app_colors.dart:
   beige #EFE8D8, brown #9B5B4B, darkBrown #983820, charcoal text #404040,
   and the black→maroon→brown app-bar gradient. Scoped to .member-app so the
   marketing site is untouched. */

[data-theme="bfapp"] .member-app { background: #efe8d8; }
[data-theme="bfapp"] .member-main { color: #404040; }

[data-theme="bfapp"] .member-topbar { background: linear-gradient(165deg, #010101 0%, #3a0002 45%, #712a18 100%); border-bottom-color: rgba(0,0,0,0.35); }
[data-theme="bfapp"] .member-topbar .exit-link { color: rgba(239,232,216,0.75); }
[data-theme="bfapp"] .member-topbar .exit-link:hover { color: #efe8d8; }

/* Cream surfaces lift off the beige page */
[data-theme="bfapp"] .member-sidebar,
[data-theme="bfapp"] .promo-card,
[data-theme="bfapp"] .article-card,
[data-theme="bfapp"] .stat-card,
[data-theme="bfapp"] .timeline-row,
[data-theme="bfapp"] .pool-card,
[data-theme="bfapp"] .package-card,
[data-theme="bfapp"] .account-rows,
[data-theme="bfapp"] .link-list,
[data-theme="bfapp"] .summary-card,
[data-theme="bfapp"] .detail-card,
[data-theme="bfapp"] .membership-card,
[data-theme="bfapp"] .filter select,
[data-theme="bfapp"] .member-form input { background: #f7f1e5; border-color: rgba(64,64,64,0.16); }

/* Brand accents → brown/maroon */
[data-theme="bfapp"] .member-avatar { background: #983820; }
[data-theme="bfapp"] .member-nav a.active,
[data-theme="bfapp"] .date-cell.active { background: #983820; border-color: #983820; color: #efe8d8; }
[data-theme="bfapp"] .member-nav a:hover { background: rgba(152,56,32,0.08); color: #983820; }
[data-theme="bfapp"] .link-more,
[data-theme="bfapp"] .member-logout:hover,
[data-theme="bfapp"] .back-link:hover { color: #983820; }
[data-theme="bfapp"] .membership-card .eyebrow { color: #983820 !important; }
[data-theme="bfapp"] .member-tabs a.active::after,
[data-theme="bfapp"] .effort-fill,
[data-theme="bfapp"] .notif-row.unread .notif-dot { background: #983820; }
[data-theme="bfapp"] .package-card.featured { border-color: #983820; }
[data-theme="bfapp"] .package-card .tag { background: #983820; }

/* Hero / dark surfaces → maroon gradient */
[data-theme="bfapp"] .balance-card { background: linear-gradient(160deg, #3a0002 0%, #712a18 100%); }

/* Buttons */
[data-theme="bfapp"] .btn-dark { background: #983820; color: #efe8d8; }
[data-theme="bfapp"] .btn-dark:hover { background: #712a18; }
[data-theme="bfapp"] .btn-outline { border-color: #983820; color: #983820; }
[data-theme="bfapp"] .btn-danger { background: #8a2a22; }

/* ---- Utility ------------------------------------------------------------------------ */

.icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.text-center { text-align: center; }
.mt-lg { margin-top: 3rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }