/**
 * Shanti Coaching — Landing page styles (Stillness redesign)
 *
 * Scoped via body.shanti-landing. Loaded on the site views that use the
 * custom Shanti header (see functions.php enqueue conditional).
 */

/* ─── Tokens ─────────────────────────────────────────── */

body.shanti-landing {
    --shanti-sage:        #9CAD9C;
    --shanti-sage-dark:   #6D806D;
    --shanti-sage-light:  #BAC7BA;
    --shanti-sage-tint:   #EDF2ED;
    --shanti-gold:        #C4A962;
    --shanti-cream:       #FAF8F5;
    --shanti-cream-deep:  #F4EFE6;
    --shanti-charcoal:    #3D3D3D;
    --shanti-white:       #FFFFFF;

    --shanti-font-display: 'Cormorant Garamond', Georgia, serif;
    --shanti-font-body:    'Nunito Sans', system-ui, sans-serif;
    --shanti-font-ui:      'Quicksand', system-ui, sans-serif;

    --shanti-section-pad-y:        clamp(72px, 7.5vw, 120px);
    --shanti-section-pad-y-mobile: 48px;
    --shanti-container:    1100px;
    --shanti-gap:          24px;
    --shanti-reading:      60ch;

    --shanti-card-bg:      var(--shanti-sage-tint);
    --shanti-card-border:  rgba(156, 173, 156, 0.18);
    --shanti-card-radius:  0;
    --shanti-card-gap:     clamp(18px, 2.4vw, 28px);
    --shanti-card-padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 32px);
    --shanti-card-min:     210px;
}

/* ─── Reset parent-theme page frame ──────────────────── */

/* Nirvata's topann/topbar/sitehead are skipped at the PHP level via the
 * child-theme header.php override. No CSS hiding needed. */

body.shanti-landing .loop-meta-wrap,
body.shanti-landing .entry-header,
body.shanti-landing .hentry > .loop-meta {
    display: none !important;
}

body.shanti-landing .main-content-grid,
body.shanti-landing .content-wrap {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.shanti-landing .hgrid.main-content-grid {
    padding: 0;
}

html:has(body.shanti-landing) {
    scroll-behavior: smooth;
    background: var(--shanti-cream, #FAF8F5);
}

body.shanti-landing {
    background: var(--shanti-cream, #FAF8F5) !important;
}

body.shanti-landing .shanti-landing-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    body.shanti-landing .shanti-landing-wrap {
        overflow-x: hidden;
    }
}

/* ─── Base typography ─────────────────────────────────── */

body.shanti-landing {
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-body);
    font-size: 17px;
    line-height: 1.65;
}

body.shanti-landing h1,
body.shanti-landing h2,
body.shanti-landing h3 {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: var(--shanti-charcoal);
}

body.shanti-landing p { margin: 0 0 1em; }

body.shanti-landing .shanti-section__heading {
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.15;
    text-align: center;
    margin: 0 0 0.6em;
}

body.shanti-landing .shanti-section__kicker {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--shanti-gold);
    text-align: center;
    margin: 0 0 1em;
}

body.shanti-landing .shanti-section__intro {
    font-size: 18px;
    max-width: var(--shanti-reading);
    margin: 0 auto 2.5em;
    text-align: center;
    line-height: 1.65;
}

body.shanti-landing .shanti-section__content p {
    max-width: var(--shanti-reading);
    margin-left: auto;
    margin-right: auto;
}

/* ─── Buttons ────────────────────────────────────────── */

body.shanti-landing .shanti-btn {
    display: inline-block;
    font-family: var(--shanti-font-ui);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    padding: 16px 36px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    text-decoration: none;
    line-height: 1;
}

body.shanti-landing .shanti-btn--primary {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    border-color: var(--shanti-sage);
}
body.shanti-landing .shanti-btn--primary:hover {
    background: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
    transform: translateY(-1px);
}

body.shanti-landing .shanti-btn--secondary {
    background: transparent;
    color: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
}
body.shanti-landing .shanti-btn--secondary:hover {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    border-color: var(--shanti-sage);
}

body.shanti-landing .shanti-btn--ghost {
    background: rgba(255,255,255,0.08);
    color: var(--shanti-white);
    border-width: 2px;
    border-color: var(--shanti-white);
}
body.shanti-landing .shanti-btn--ghost:hover {
    background: var(--shanti-white);
    color: var(--shanti-sage-dark);
}
body.shanti-landing .shanti-btn--ghost-alt {
    background: transparent;
    border-color: rgba(255,255,255,0.85);
}

/* Receipt CTA: WordPress puts shanti-btn classes on the wrapper; keep only
   the inner link styled as the button so it does not render as a double pill. */
body.shanti-landing .shanti-receipt-next-step .wp-block-button.shanti-btn {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: normal;
    transform: none;
}
body.shanti-landing .shanti-receipt-next-step .wp-block-button.shanti-btn:hover {
    background: transparent;
    border: 0;
    transform: none;
}
body.shanti-landing .shanti-receipt-next-step .wp-block-button.shanti-btn .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    background: var(--shanti-sage);
    border: 1.5px solid var(--shanti-sage);
    color: var(--shanti-white) !important;
    box-shadow: none;
    text-decoration: none !important;
}
body.shanti-landing .shanti-receipt-next-step .wp-block-button.shanti-btn .wp-block-button__link:hover,
body.shanti-landing .shanti-receipt-next-step .wp-block-button.shanti-btn .wp-block-button__link:focus-visible {
    background: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
    color: var(--shanti-white) !important;
}

body.shanti-landing .shanti-cta-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2em;
}

/* ─── Bands (full-width horizontal strips) ───────────── */

body.shanti-landing .shanti-band {
    padding: var(--shanti-section-pad-y) 24px;
    width: 100%;
}

body.shanti-landing .shanti-band__inner {
    max-width: var(--shanti-container);
    margin: 0 auto;
}

body.shanti-landing .shanti-band--white  { background: var(--shanti-white); }
body.shanti-landing .shanti-band--cream  { background: var(--shanti-cream); }

/* ─── HERO — Photo variant ───────────────────────────── */

body.shanti-landing .shanti-band--hero {
    padding: 0;
    width: 100%;
    position: relative;
    isolation: isolate;
}

body.shanti-landing .shanti-band--hero-photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: min(720px, 88vh);
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--shanti-white);
    overflow: hidden;
}

body.shanti-landing .shanti-band--hero-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 30, 20, 0.34) 0%, rgba(20, 30, 20, 0.48) 100%);
    z-index: 0;
}

body.shanti-landing .shanti-band--hero-photo .shanti-hero__inner {
    position: relative;
    z-index: 1;
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 80px);
    max-width: 880px;
    margin: 0 auto;
}

/* Long unbroken words (German compounds, URLs, CJK strings pasted by the
   client) must wrap instead of overflowing the hero horizontally. */
body.shanti-landing .shanti-hero__headline,
body.shanti-landing .shanti-hero__tagline {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.shanti-landing .shanti-band--hero-photo .shanti-hero__headline {
    font-family: var(--shanti-font-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--shanti-white);
    margin: 0 0 0.4em;
    text-shadow: none;
}

body.shanti-landing .shanti-band--hero-photo .shanti-hero__tagline {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 60ch;
    margin: 0 auto 2em;
}

body.shanti-landing .shanti-band--hero-photo .shanti-hero__cta {
    display: inline-block;
    font-family: var(--shanti-font-ui);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    padding: 18px 44px;
    border-radius: 999px;
    background: var(--shanti-white);
    color: var(--shanti-sage-dark);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    line-height: 1;
}

body.shanti-landing .shanti-band--hero-photo .shanti-hero__cta:hover {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    transform: translateY(-1px);
}

/* ─── HERO — Cream fallback variant ──────────────────── */

body.shanti-landing .shanti-band--hero-cream {
    background: linear-gradient(180deg, var(--shanti-cream) 0%, var(--shanti-cream-deep) 100%);
    min-height: min(640px, 80vh);
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--shanti-charcoal);
}

body.shanti-landing .shanti-band--hero-cream .shanti-hero__inner {
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 80px);
    max-width: 880px;
    margin: 0 auto;
}

body.shanti-landing .shanti-band--hero-cream .shanti-hero__headline {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--shanti-charcoal);
    margin: 0 0 0.4em;
}

body.shanti-landing .shanti-band--hero-cream .shanti-hero__tagline {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.4vw, 22px);
    line-height: 1.5;
    color: rgba(61, 61, 61, 0.8);
    max-width: 60ch;
    margin: 0 auto 2em;
}

body.shanti-landing .shanti-band--hero-cream .shanti-hero__cta {
    display: inline-block;
    font-family: var(--shanti-font-ui);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    padding: 18px 44px;
    border-radius: 999px;
    background: var(--shanti-sage);
    color: var(--shanti-white);
    border: 1.5px solid var(--shanti-sage);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    line-height: 1;
}

body.shanti-landing .shanti-band--hero-cream .shanti-hero__cta:hover {
    background: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
    transform: translateY(-1px);
}

/* ─── Floral mandala divider ─────────────────────────── */

body.shanti-landing .shanti-divider {
    display: flex;
    justify-content: center;
    padding: 40px 24px;
    background: var(--shanti-white);
}

body.shanti-landing .shanti-divider__glyph {
    width: 72px;
    height: 72px;
    color: var(--shanti-gold);
    opacity: 0.6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.shanti-landing .shanti-divider__glyph svg {
    width: 100%;
    height: 100%;
}

/* When a divider sits between two cream sections, match cream bg. */
body.shanti-landing .shanti-band--cream + .shanti-divider,
body.shanti-landing .shanti-divider + .shanti-band--cream {
    background: var(--shanti-cream);
}

/* ─── Pull-quote band ────────────────────────────────── */

body.shanti-landing .shanti-band--pullquote {
    background: var(--shanti-cream);
    text-align: center;
}
body.shanti-landing .shanti-pullquote {
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
    border: 0;
}
body.shanti-landing .shanti-pullquote__text {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.4;
    color: var(--shanti-charcoal);
    margin: 0 0 1.2em;
}
body.shanti-landing .shanti-pullquote__attribution {
    font-family: var(--shanti-font-display);
    font-style: italic;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--shanti-gold);
}

/* ─── Final CTA band ─────────────────────────────────── */

body.shanti-landing .shanti-band--final-cta {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    text-align: center;
    padding-top: var(--shanti-section-pad-y);
    padding-bottom: var(--shanti-section-pad-y);
}
body.shanti-landing .shanti-final-cta__heading {
    color: var(--shanti-white);
    font-size: clamp(32px, 4vw, 44px);
}
body.shanti-landing .shanti-final-cta__body {
    font-size: 18px;
    max-width: 640px;
    margin: 0 auto 0;
    color: rgba(255, 255, 255, 0.92);
}

/* ─── Section image (above heading) ──────────────────── */

body.shanti-landing .shanti-section__image {
    max-width: 900px;
    margin: 0 auto 2.5em;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}
body.shanti-landing .shanti-section__image img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════
 * UNIFIED CARD SYSTEM (.shanti-card)
 * Replaces the previous per-type card classes. Sage-tinted
 * shell, optional auto-numbering, line-art icons, italic
 * supporting line.
 * ═══════════════════════════════════════════════════════ */

body.shanti-landing .shanti-card {
    position: relative;
    background: var(--shanti-card-bg);
    border: 1px solid var(--shanti-card-border);
    border-radius: var(--shanti-card-radius);
    padding: var(--shanti-card-padding);
    height: 100%;
    min-width: 0;
    text-align: left;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

body.shanti-landing .shanti-card:hover {
    border-color: rgba(156, 173, 156, 0.36);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(61, 61, 61, 0.06);
}

/* Numbered cards: auto-incremented index in top-left. */
body.shanti-landing .shanti-card--numbered .shanti-card__index::before {
    counter-increment: shanti-card;
    content: counter(shanti-card, decimal-leading-zero);
    font-family: var(--shanti-font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--shanti-sage-dark);
    display: block;
    margin-bottom: 16px;
}

/* Card icon (line-art SVG, image, or emoji fallback). */
body.shanti-landing .shanti-card__icon {
    display: block;
    margin-bottom: 18px;
    color: var(--shanti-sage-dark);
}
body.shanti-landing .shanti-card__icon--svg {
    width: 44px;
    height: 44px;
    line-height: 0;
}
body.shanti-landing .shanti-card__icon--svg svg {
    width: 100%;
    height: 100%;
    color: var(--shanti-sage-dark);
}
body.shanti-landing .shanti-card__icon--image {
    width: 48px;
    height: 48px;
    object-fit: contain;
}
body.shanti-landing .shanti-card__icon--emoji {
    font-size: 32px;
    line-height: 1;
}

/* Client-entered card text (tier names, credential titles, prices like
   "1,250") must wrap inside the card rather than overflow its box. The grid
   already caps column width via minmax(min(...,100%)); this handles a single
   long token within a card. */
body.shanti-landing .shanti-card__heading,
body.shanti-landing .shanti-card__body,
body.shanti-landing .shanti-card__supporting,
body.shanti-landing .shanti-card__amount {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.shanti-landing .shanti-card__heading {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: 22px;
    line-height: 1.25;
    color: var(--shanti-charcoal);
    margin: 0 0 6px;
}

body.shanti-landing .shanti-card__supporting {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(61, 61, 61, 0.7);
    margin: 0 0 12px;
}

body.shanti-landing .shanti-card__body {
    font-family: var(--shanti-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--shanti-charcoal);
    margin: 0;
}
body.shanti-landing .shanti-card__body p { margin: 0 0 0.8em; }
body.shanti-landing .shanti-card__body p:last-child { margin-bottom: 0; }

body.shanti-landing .shanti-card__footnote {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--shanti-card-border);
    font-family: var(--shanti-font-ui);
    font-size: 13px;
    color: var(--shanti-sage-dark);
}

/* ─── Card grids (counter-reset scopes) ──────────────── */

body.shanti-landing .shanti-style-grid,
body.shanti-landing .shanti-class-list,
body.shanti-landing .shanti-credentials-grid,
body.shanti-landing .shanti-pricing-grid,
body.shanti-landing .shanti-steps-grid {
    display: grid;
    align-items: stretch;
    gap: var(--shanti-card-gap);
    margin-top: clamp(32px, 4vw, 44px);
    counter-reset: shanti-card;
}

body.shanti-landing .shanti-style-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--shanti-card-min), 100%), 1fr));
}

body.shanti-landing .shanti-class-list {
    grid-template-columns: 1fr;
    gap: var(--shanti-card-gap);
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

body.shanti-landing .shanti-credentials-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--shanti-card-min), 100%), 1fr));
}

body.shanti-landing .shanti-pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    align-items: stretch;
}

body.shanti-landing .shanti-steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(var(--shanti-card-min), 100%), 1fr));
}

/* ─── Description card (Classes & Pricing) overrides ── */

body.shanti-landing .shanti-card--description {
    padding: var(--shanti-card-padding);
}
body.shanti-landing .shanti-card--description .shanti-card__head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}
body.shanti-landing .shanti-card--description .shanti-card__icon {
    margin-bottom: 0;
    flex-shrink: 0;
}
body.shanti-landing .shanti-card--description .shanti-card__head-text {
    flex: 1;
}
body.shanti-landing .shanti-card--description .shanti-card__heading {
    font-size: 26px;
}

/* ─── Pricing card overrides ─────────────────────────── */

body.shanti-landing .shanti-card--pricing {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 36px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.shanti-landing .shanti-card--pricing .shanti-card__icon {
    margin-left: auto;
    margin-right: auto;
}
body.shanti-landing .shanti-card--pricing .shanti-card__heading {
    text-align: center;
    font-family: var(--shanti-font-ui);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--shanti-gold);
    margin-bottom: 12px;
}
body.shanti-landing .shanti-card--pricing .shanti-card__price {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: 56px;
    line-height: 1;
    color: var(--shanti-charcoal);
    margin: 0 0 0.2em;
}
body.shanti-landing .shanti-card--pricing .shanti-card__currency {
    font-size: 32px;
    vertical-align: top;
    margin-right: 2px;
}
body.shanti-landing .shanti-card--pricing .shanti-card__supporting {
    text-align: center;
    margin-bottom: 16px;
}
body.shanti-landing .shanti-card--pricing .shanti-card__body {
    text-align: center;
    flex-grow: 1;
    margin-bottom: 1.5em;
}
body.shanti-landing .shanti-card--pricing .shanti-card__cta {
    width: 100%;
    box-sizing: border-box;
}

body.shanti-landing .shanti-card--pricing-featured {
    transform: translateY(-8px);
    box-shadow: 0 10px 28px rgba(61, 61, 61, 0.10);
    padding-top: 56px;
    background: var(--shanti-white);
}
body.shanti-landing .shanti-card--pricing-featured:hover {
    transform: translateY(-9px);
}

body.shanti-landing .shanti-card__featured-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--shanti-gold);
    color: var(--shanti-white);
    font-family: var(--shanti-font-ui);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 9px 14px 8px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

@media (max-width: 1024px) {
    body.shanti-landing .shanti-card--pricing-featured {
        transform: none;
    }
    body.shanti-landing .shanti-card--pricing-featured:hover {
        transform: translateY(-1px);
    }
    /* Force clean 2x2 instead of auto-fit's 3+1 orphan at tablet widths. */
    body.shanti-landing .shanti-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Home class tiles keep the reference's two-column rhythm on tablets. */
    body.shanti-landing .shanti-classes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Class picker pills: shrink padding so 5 fit on one row at this width. */
    body.shanti-landing .shanti-class-picker__chip {
        padding: 8px 14px;
        font-size: 13px;
    }
    body.shanti-landing .shanti-class-picker {
        gap: 8px;
    }
}

/* ─── Credential card overrides ──────────────────────── */

body.shanti-landing .shanti-card--credential {
    text-align: center;
}
body.shanti-landing .shanti-card--credential .shanti-card__icon {
    margin-left: auto;
    margin-right: auto;
}
body.shanti-landing .shanti-card--credential .shanti-card__heading {
    text-align: center;
    font-size: 20px;
}
body.shanti-landing .shanti-card--credential .shanti-card__body {
    text-align: center;
    font-size: 14px;
    color: rgba(61, 61, 61, 0.78);
}

/* ─── Step card overrides ────────────────────────────── */

body.shanti-landing .shanti-card--step {
    text-align: center;
}
body.shanti-landing .shanti-card--step .shanti-card__icon {
    margin-left: auto;
    margin-right: auto;
}
body.shanti-landing .shanti-card--step .shanti-card__heading {
    text-align: center;
    font-size: 22px;
}
body.shanti-landing .shanti-card--step .shanti-card__body {
    text-align: center;
}
body.shanti-landing .shanti-card--step.shanti-card--numbered .shanti-card__index::before {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Schedule table (unchanged from previous) ───────── */

body.shanti-landing .shanti-schedule {
    overflow-x: auto;
    margin: 2em 0;
    -webkit-overflow-scrolling: touch;
}
body.shanti-landing .shanti-schedule__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--shanti-white);
    border-radius: 12px;
    overflow: hidden;
    font-size: 16px;
}
body.shanti-landing .shanti-schedule__table thead th {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    font-family: var(--shanti-font-ui);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    padding: 18px;
    text-align: left;
}
body.shanti-landing .shanti-schedule__table tbody tr:nth-child(even) { background: var(--shanti-cream); }
body.shanti-landing .shanti-schedule__table th[scope="row"] {
    font-weight: 700;
    padding: 18px;
    font-family: var(--shanti-font-ui);
    color: var(--shanti-sage-dark);
    text-align: left;
}
body.shanti-landing .shanti-schedule__table td { padding: 18px; }
body.shanti-landing .shanti-schedule__legend {
    text-align: center;
    font-family: var(--shanti-font-ui);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    color: var(--shanti-sage-dark);
    margin: 1em 0 0;
}

body.shanti-landing .shanti-booking-policy {
    max-width: 900px;
    margin: 0 auto 30px;
    padding: 18px 22px 18px 24px;
    border: 1px solid var(--shanti-card-border);
    border-left: 3px solid var(--shanti-gold);
    background: var(--shanti-white);
    color: var(--shanti-charcoal);
    border-radius: 0;
    font-size: 16px;
    line-height: 1.55;
}
body.shanti-landing .shanti-booking-policy p {
    margin: 0 0 0.65em;
}
body.shanti-landing .shanti-booking-policy p:last-child {
    margin-bottom: 0;
}
body.shanti-landing .shanti-booking-policy a {
    color: var(--shanti-sage-dark);
    font-weight: 700;
    text-underline-offset: 0.18em;
}

body.shanti-landing .acsc-schedule-container {
    --schedule-primary-color: var(--shanti-sage-dark);
    --schedule-border-color: rgba(156, 173, 156, 0.28);
    --slot-height: 44px;
    font-family: var(--shanti-font-body);
    max-width: 1120px;
    margin: 0 auto;
    color: var(--shanti-charcoal);
}

body.shanti-landing .acsc-schedule-container .schedule-header {
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom-color: var(--schedule-border-color);
}
body.shanti-landing .acsc-schedule-container .schedule-header-center {
    gap: 10px;
}
body.shanti-landing .acsc-schedule-container .schedule-date-range {
    margin: 0 0 18px;
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-display);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
    text-align: center;
}
body.shanti-landing .acsc-schedule-container #acsc-schedule-content-wrapper {
    transition: opacity 0.18s ease;
}
body.shanti-landing .acsc-schedule-container .nav-button,
body.shanti-landing .calendar-link {
    background: var(--shanti-white);
    color: var(--shanti-sage-dark);
    border: 1.5px solid var(--shanti-sage-dark);
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 14px;
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
body.shanti-landing .acsc-schedule-container .today-button {
    background: var(--shanti-sage);
    border-color: var(--shanti-sage);
    color: var(--shanti-white);
}
body.shanti-landing .acsc-schedule-container .nav-button:hover,
body.shanti-landing .acsc-schedule-container .nav-button:focus-visible,
body.shanti-landing .calendar-link:hover {
    background: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
    color: var(--shanti-white);
    transform: translateY(-1px);
}
body.shanti-landing .acsc-schedule-container .user-credit-balance {
    margin-top: 0;
    padding: 7px 12px;
    border: 1px solid rgba(156, 173, 156, 0.24);
    background: var(--shanti-sage-tint);
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.shanti-landing .acsc-schedule-container .user-credit-balance strong {
    color: var(--shanti-sage-dark);
}
body.shanti-landing .acsc-schedule-container .schedule-grid-wrapper,
body.shanti-landing .acsc-schedule-container .mobile-day-selector,
body.shanti-landing .acsc-schedule-container .my-bookings-list {
    overflow: hidden;
    border-color: var(--schedule-border-color);
    border-radius: 0;
    background: var(--shanti-white);
    box-shadow: 0 18px 48px rgba(61, 61, 61, 0.07);
}
body.shanti-landing .acsc-schedule-container .schedule-grid-wrapper {
    border-width: 1px;
}
body.shanti-landing .acsc-schedule-container .day-header,
body.shanti-landing .acsc-schedule-container .time-column-header,
body.shanti-landing .acsc-schedule-container .mobile-day-selector .day-toggle {
    background: var(--shanti-sage-tint);
    color: var(--shanti-sage-dark);
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.shanti-landing .acsc-schedule-container .day-header {
    padding: 14px 8px;
    border-color: var(--schedule-border-color);
}
body.shanti-landing .acsc-schedule-container .time-column {
    background: var(--shanti-white);
}
body.shanti-landing .acsc-schedule-container .time-column .time-slot-label {
    border-bottom-color: rgba(156, 173, 156, 0.14);
    color: rgba(61, 61, 61, 0.58);
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    font-weight: 600;
}
body.shanti-landing .acsc-schedule-container .day-column {
    border-left-color: var(--schedule-border-color);
}
body.shanti-landing .acsc-schedule-container .day-content {
    background-image: linear-gradient(to bottom, rgba(156, 173, 156, 0.14) 1px, transparent 1px);
}
body.shanti-landing .acsc-schedule-container .class-entry {
    border: 1px solid rgba(156, 173, 156, 0.22);
    border-left-width: 5px;
    border-radius: 0;
    background: var(--shanti-white);
    color: var(--shanti-charcoal);
    box-shadow: 0 4px 14px rgba(61, 61, 61, 0.06);
    transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
body.shanti-landing .acsc-schedule-container .class-entry:hover {
    background: var(--shanti-cream);
    box-shadow: 0 8px 22px rgba(61, 61, 61, 0.1);
    transform: translateY(-1px);
}
body.shanti-landing .acsc-schedule-container .class-entry-header {
    gap: 8px;
    align-items: flex-start;
}
body.shanti-landing .acsc-schedule-container .class-entry .class-title {
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-ui);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
body.shanti-landing .acsc-schedule-container .class-entry .class-time-mobile {
    color: var(--shanti-sage-dark);
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    font-weight: 700;
}
body.shanti-landing .acsc-schedule-container .class-entry .class-spaces,
body.shanti-landing .acsc-schedule-container .class-entry .class-login-prompt,
body.shanti-landing .acsc-schedule-container .class-entry .class-restricted-label {
    color: rgba(61, 61, 61, 0.66);
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
body.shanti-landing .acsc-schedule-container .class-entry .class-login-prompt {
    color: var(--shanti-gold);
    font-style: normal;
}
body.shanti-landing .acsc-schedule-container .class-entry.full {
    background: #F3F1ED;
    border-left-color: rgba(61, 61, 61, 0.28) !important;
    color: rgba(61, 61, 61, 0.55);
}
body.shanti-landing .acsc-schedule-container .class-entry.restricted {
    opacity: 0.62;
    filter: none;
}
body.shanti-landing .acsc-schedule-container .class-entry[data-user-booked="true"] {
    background: var(--shanti-sage-tint);
}
body.shanti-landing .acsc-schedule-container .class-entry[data-user-booked="true"]::after {
    background: var(--shanti-gold);
    box-shadow: 0 2px 8px rgba(61, 61, 61, 0.18);
}
body.shanti-landing .acsc-schedule-container .mobile-day-selector {
    margin-bottom: 14px;
}
body.shanti-landing .acsc-schedule-container .mobile-day-selector .day-toggle {
    min-width: 0;
    border-left-color: var(--schedule-border-color);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
body.shanti-landing .acsc-schedule-container .mobile-day-selector .day-toggle:hover {
    background: var(--shanti-cream);
}
body.shanti-landing .acsc-schedule-container .mobile-day-selector .day-toggle.active {
    background: var(--shanti-sage);
    color: var(--shanti-white);
}
body.shanti-landing .acsc-schedule-container .mobile-day-selector .day-toggle .day-long,
body.shanti-landing .acsc-schedule-container .mobile-day-selector .day-toggle .day-of-week {
    overflow-wrap: anywhere;
}
body.shanti-landing .acsc-schedule-container .my-bookings-section {
    margin-top: 36px;
    padding-top: 24px;
    border-top-color: var(--schedule-border-color);
}
body.shanti-landing .acsc-schedule-container .my-bookings-title,
body.shanti-landing .acsc-schedule-container .my-bookings-section h4 {
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-display);
    font-weight: 500;
}
body.shanti-landing .acsc-schedule-container .my-bookings-list li {
    border-bottom-color: rgba(156, 173, 156, 0.18);
}
body.shanti-landing .acsc-schedule-container .my-bookings-list .booking-title {
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-ui);
}
body.shanti-landing .acsc-schedule-container .my-bookings-list .booking-time,
body.shanti-landing .acsc-schedule-container .my-bookings-list .cancellation-closed {
    color: rgba(61, 61, 61, 0.66);
}
body.shanti-landing .acsc-schedule-container .my-bookings-list .cancel-booking-button {
    border-radius: 0;
    font-family: var(--shanti-font-ui);
    font-weight: 700;
}
body.shanti-landing .acsc-modal {
    --schedule-border-color: rgba(156, 173, 156, 0.28);
    background-color: rgba(61, 61, 61, 0.62);
}
body.shanti-landing .acsc-modal .modal-content {
    width: min(520px, calc(100% - 32px));
    max-width: 520px;
    margin: min(12vh, 96px) auto;
    padding: 32px;
    border-color: var(--schedule-border-color);
    border-radius: 0;
    background: var(--shanti-white);
    color: var(--shanti-charcoal);
    box-shadow: 0 24px 70px rgba(61, 61, 61, 0.22);
    font-family: var(--shanti-font-body);
}
body.shanti-landing .acsc-modal .close-button {
    top: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--shanti-sage-dark);
    border-radius: 0;
    font-size: 28px;
    line-height: 1;
}
body.shanti-landing .acsc-modal .close-button:hover,
body.shanti-landing .acsc-modal .close-button:focus {
    color: var(--shanti-charcoal);
}
body.shanti-landing .acsc-modal .close-button.close-button--success {
    top: 16px;
    right: 16px;
    width: auto;
    height: auto;
    padding: 8px 14px;
    background: var(--shanti-sage);
    color: var(--shanti-white);
    border-radius: 0;
    font-family: var(--shanti-font-ui);
    font-size: 13px;
}
body.shanti-landing .acsc-modal h3 {
    margin: 0 34px 10px 0;
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-display);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.15;
}
body.shanti-landing .acsc-modal p,
body.shanti-landing .acsc-modal li {
    color: var(--shanti-charcoal);
    line-height: 1.55;
}
body.shanti-landing .acsc-modal ul {
    margin: 16px 0;
    padding-left: 20px;
}
body.shanti-landing .acsc-modal #modal-class-time {
    color: var(--shanti-sage-dark);
    font-family: var(--shanti-font-ui);
    font-weight: 700;
}
body.shanti-landing .acsc-modal #booking-response p,
body.shanti-landing #cancellation-response p {
    border-radius: 0;
    font-family: var(--shanti-font-ui);
    font-weight: 700;
}
body.shanti-landing .acsc-modal #booking-response .success,
body.shanti-landing #cancellation-response .success {
    border-color: rgba(156, 173, 156, 0.38);
    background: var(--shanti-sage-tint);
    color: var(--shanti-sage-dark);
}
body.shanti-landing .acsc-modal #booking-response .error,
body.shanti-landing #cancellation-response .error {
    border-color: rgba(160, 36, 38, 0.22);
    background: #FFF4F1;
    color: #9E302D;
}
body.shanti-landing .acsc-modal .spinner {
    border-color: rgba(156, 173, 156, 0.2);
    border-top-color: var(--shanti-sage-dark);
}
body.shanti-landing .acsc-modal #add-to-calendar-links,
body.shanti-landing .acsc-modal #modal-admin-attendees {
    border-top-color: var(--schedule-border-color);
}
body.shanti-landing .acsc-modal #add-to-calendar-links h4,
body.shanti-landing .acsc-modal #modal-admin-attendees h4 {
    color: var(--shanti-charcoal);
    font-family: var(--shanti-font-ui);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.shanti-landing .acsc-modal #modal-admin-attendees {
    border-color: var(--schedule-border-color);
    border-radius: 0;
    background: var(--shanti-cream);
}
body.shanti-landing .acsc-modal #modal-admin-attendees li {
    border-bottom-color: rgba(156, 173, 156, 0.18);
}
body.shanti-landing .acsc-modal #book-now-button,
body.shanti-landing .acsc-modal #cancel-booking-button {
    min-height: 42px;
    padding: 9px 18px;
    border: 1.5px solid var(--shanti-sage);
    border-radius: 0;
    background: var(--shanti-sage);
    color: var(--shanti-white);
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
body.shanti-landing .acsc-modal #book-now-button:hover,
body.shanti-landing .acsc-modal #book-now-button:focus-visible {
    background: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
    transform: translateY(-1px);
}
body.shanti-landing .acsc-modal #book-now-button:disabled,
body.shanti-landing .acsc-modal #cancel-booking-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}
body.shanti-landing .acsc-modal #cancel-booking-button,
body.shanti-landing .acsc-modal .button-delete {
    border-color: #B94A48;
    background: #B94A48;
    color: var(--shanti-white);
}
body.shanti-landing .acsc-modal #cancel-booking-button:hover,
body.shanti-landing .acsc-modal .button-delete:hover {
    border-color: #943331;
    background: #943331;
}

@media (min-width: 768px) {
    body.shanti-landing .acsc-schedule-container .class-entry {
        padding: 8px 9px;
    }
    body.shanti-landing .acsc-schedule-container .class-entry .class-time-mobile {
        display: none;
    }
    body.shanti-landing .acsc-schedule-container .class-entry .class-title {
        font-size: 13px;
    }
    body.shanti-landing .acsc-schedule-container .class-entry .class-spaces,
    body.shanti-landing .acsc-schedule-container .class-entry .class-login-prompt,
    body.shanti-landing .acsc-schedule-container .class-entry .class-restricted-label {
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    body.shanti-landing .acsc-schedule-container .schedule-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        gap: 8px;
    }
    body.shanti-landing .acsc-schedule-container .schedule-header-center {
        min-width: 0;
    }
    body.shanti-landing .acsc-schedule-container .nav-button,
    body.shanti-landing .calendar-link {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 11px;
    }
    body.shanti-landing .acsc-schedule-container .prev-week {
        justify-self: start;
    }
    body.shanti-landing .acsc-schedule-container .next-week {
        justify-self: end;
    }
    body.shanti-landing .acsc-schedule-container .user-credit-balance {
        text-align: center;
    }
    body.shanti-landing .acsc-schedule-container .schedule-date-range {
        margin-bottom: 14px;
        font-size: 26px;
    }
    body.shanti-landing .acsc-schedule-container .mobile-day-selector {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        box-shadow: none;
    }
    body.shanti-landing .acsc-schedule-container .mobile-day-selector .day-toggle {
        padding: 10px 2px;
        font-size: 11px;
        line-height: 1.2;
    }
    body.shanti-landing .acsc-schedule-container .schedule-grid-wrapper {
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    body.shanti-landing .acsc-schedule-container .day-content {
        padding: 0;
        background-image: none;
    }
    body.shanti-landing .acsc-schedule-container .class-entry {
        margin-bottom: 10px;
        padding: 14px;
    }
    body.shanti-landing .acsc-schedule-container .class-entry .class-title {
        font-size: 15px;
    }
    body.shanti-landing .acsc-schedule-container .my-bookings-list li {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    body.shanti-landing .acsc-modal .modal-content {
        margin: 56px auto;
        padding: 28px 22px 24px;
    }
    body.shanti-landing .acsc-modal h3 {
        font-size: 26px;
    }
}

/* ─── FAQ accordion ──────────────────────────────────── */

body.shanti-landing .shanti-faq {
    max-width: 780px;
    margin: 2em auto 0;
}
body.shanti-landing .shanti-faq__item {
    background: var(--shanti-white);
    border: 1px solid var(--shanti-card-border);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 0;
}
body.shanti-landing .shanti-faq__question {
    font-family: var(--shanti-font-ui);
    font-weight: 600;
    font-size: 16px;
    padding: 22px 56px 22px 28px;
    cursor: pointer;
    list-style: none;
    position: relative;
    color: var(--shanti-charcoal);
}
body.shanti-landing .shanti-faq__question::-webkit-details-marker { display: none; }
body.shanti-landing .shanti-faq__question::after {
    content: '+';
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: var(--shanti-sage);
    transition: transform 0.18s ease;
    line-height: 1;
}
body.shanti-landing .shanti-faq__item[open] .shanti-faq__question::after {
    transform: translateY(-50%) rotate(45deg);
}
body.shanti-landing .shanti-faq__answer {
    padding: 0 28px 22px;
    font-size: 15px;
    color: var(--shanti-charcoal);
}
body.shanti-landing .shanti-faq__answer p { margin: 0 0 0.8em; }
body.shanti-landing .shanti-faq__answer p:last-child { margin-bottom: 0; }

/* ─── Mix-match note ─────────────────────────────────── */

body.shanti-landing .shanti-note--mix-match {
    background: var(--shanti-cream);
    border-left: 3px solid var(--shanti-gold);
    padding: 16px 20px;
    margin: 1.5em auto;
    max-width: 780px;
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--shanti-sage-dark);
    border-radius: 0 6px 6px 0;
}
body.shanti-landing .shanti-note--mix-match p { margin: 0 0 0.5em; }
body.shanti-landing .shanti-note--mix-match p:last-child { margin-bottom: 0; }

/* ─── Class picker chips ─────────────────────────────── */

body.shanti-landing .shanti-class-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 1.5em 0 2em;
}
body.shanti-landing .shanti-class-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--shanti-white);
    border: 1.5px solid var(--shanti-sage-light);
    color: var(--shanti-sage-dark);
    padding: 10px 18px;
    border-radius: 999px;
    font-family: var(--shanti-font-ui);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
    cursor: pointer;
}
body.shanti-landing .shanti-class-picker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
body.shanti-landing .shanti-class-picker__icon--svg {
    width: 18px;
    height: 18px;
}
body.shanti-landing .shanti-class-picker__icon--svg svg {
    width: 100%;
    height: 100%;
}
body.shanti-landing .shanti-class-picker__icon--image {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
body.shanti-landing .shanti-class-picker__icon--emoji {
    font-size: 16px;
    line-height: 1;
}
body.shanti-landing .shanti-class-picker__chip:hover,
body.shanti-landing .shanti-class-picker__chip--active {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    border-color: var(--shanti-sage);
}

/* ═══════════════════════════════════════════════════════
 * HOME — Stillness reference layout
 * Sections specific to front-page.php: intro band with mandala
 * + thin gold line, 2x2 classes grid with one sage-filled tile,
 * atmosphere split, testimonial stack on sage, dark photo CTA.
 * ═══════════════════════════════════════════════════════ */

/* ─── Intro band (cream, mandala + kicker + body + line) ──── */

body.shanti-landing .shanti-band--intro {
    background: var(--shanti-cream);
    text-align: center;
    padding-top: var(--shanti-section-pad-y);
    padding-bottom: var(--shanti-section-pad-y);
}
body.shanti-landing .shanti-intro {
    max-width: 720px;
    text-align: center;
}
body.shanti-landing .shanti-intro__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: var(--shanti-gold);
    opacity: 0.55;
    margin: 0 auto 32px;
}
body.shanti-landing .shanti-intro__glyph svg {
    width: 100%;
    height: 100%;
}
body.shanti-landing .shanti-intro__kicker {
    font-family: var(--shanti-font-ui);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 12px;
    color: var(--shanti-sage-dark);
    margin: 0 0 28px;
}
body.shanti-landing .shanti-intro__body {
    font-family: var(--shanti-font-display);
    font-weight: 400;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.55;
    color: var(--shanti-charcoal);
    margin: 0 auto;
    max-width: 600px;
}
body.shanti-landing .shanti-intro__line {
    display: block;
    width: 1px;
    height: 72px;
    margin: 56px auto 0;
    position: relative;
    color: var(--shanti-gold);
    background: currentColor;
    opacity: 0.5;
}
body.shanti-landing .shanti-intro__line::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    transform: translateX(-50%);
}

/* ─── Classes grid (reference-style wide horizontal tiles) ──────────── */

body.shanti-landing .shanti-band--classes .shanti-band__inner {
    max-width: 1120px;
}

body.shanti-landing .shanti-classes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--shanti-card-gap);
    margin: clamp(32px, 4vw, 44px) auto 0;
    counter-reset: shanti-card;
}

body.shanti-landing .shanti-classes-grid > .shanti-card--tile {
    margin-block: 0;
}

/* Tile shell: keep the client's pale sage palette, but use the spacious
 * reference composition: title block left, icon centered right. */
body.shanti-landing .shanti-card--tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(76px, 9vw, 112px);
    align-items: center;
    gap: clamp(14px, 2.2vw, 28px);
    min-height: 0;
    padding: var(--shanti-card-padding);
}
body.shanti-landing .shanti-card--tile .shanti-card__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
body.shanti-landing .shanti-card--tile .shanti-card__index {
    display: block;
}
body.shanti-landing .shanti-card--tile .shanti-card__index::before {
    margin-bottom: clamp(14px, 2vw, 22px);
}
body.shanti-landing .shanti-card--tile .shanti-card__heading {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.12;
    margin: 0;
    max-width: 10ch;
}
body.shanti-landing .shanti-card--tile .shanti-card__body {
    color: rgba(61, 61, 61, 0.78);
    max-width: 24ch;
    margin: 12px 0 0;
    font-size: clamp(15px, 1.25vw, 17px);
    line-height: 1.55;
}

/* Featured tiles keep the same size/color so custom yoga rows stay consistent. */
body.shanti-landing .shanti-card--tile-featured {
    grid-column: span 1;
}
body.shanti-landing .shanti-card--tile-featured .shanti-card__heading {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.12;
}
body.shanti-landing .shanti-card--tile-featured .shanti-card__body {
    font-size: clamp(15px, 1.25vw, 17px);
    max-width: 24ch;
}
body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--svg,
body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--image,
body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--emoji {
    width: clamp(72px, 9vw, 112px);
    height: clamp(72px, 9vw, 112px);
}
body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--emoji {
    font-size: clamp(52px, 7vw, 82px);
}
body.shanti-landing .shanti-card--tile .shanti-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.shanti-landing .shanti-card--tile .shanti-card__icon {
    margin: 0;
}
body.shanti-landing .shanti-card--tile .shanti-card__icon--svg,
body.shanti-landing .shanti-card--tile .shanti-card__icon--image,
body.shanti-landing .shanti-card--tile .shanti-card__icon--emoji {
    width: clamp(72px, 9vw, 112px);
    height: clamp(72px, 9vw, 112px);
}
body.shanti-landing .shanti-card--tile .shanti-card__icon--svg svg {
    stroke-width: 1;
}
body.shanti-landing .shanti-card--tile .shanti-card__icon--image {
    object-fit: contain;
}
body.shanti-landing .shanti-card--tile .shanti-card__icon--emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(52px, 7vw, 82px);
    line-height: 1;
}

@media (max-width: 439px) {
    body.shanti-landing .shanti-classes-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Atmosphere split (text + two vertical photos) ───────── */

body.shanti-landing .shanti-band--split {
    background: var(--shanti-cream);
}
body.shanti-landing .shanti-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}
body.shanti-landing .shanti-split__text {
    max-width: 420px;
}
body.shanti-landing .shanti-split__kicker {
    text-align: left;
    margin-bottom: 18px;
}
body.shanti-landing .shanti-split__heading {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: clamp(32px, 3.6vw, 44px);
    line-height: 1.15;
    margin: 0 0 0.7em;
}
body.shanti-landing .shanti-split__body {
    font-size: 15px;
    line-height: 1.75;
    color: rgba(61, 61, 61, 0.78);
    margin: 0 0 1.6em;
}
body.shanti-landing .shanti-split__link {
    font-family: var(--shanti-font-ui);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    color: var(--shanti-charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--shanti-charcoal);
    padding-bottom: 4px;
}
body.shanti-landing .shanti-split__link:hover {
    color: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
}
body.shanti-landing .shanti-split__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
body.shanti-landing .shanti-split__image {
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
body.shanti-landing .shanti-split__image img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
}
/* When there are no images yet, hide the right column and re-center the
 * text block so the section doesn't look broken. */
body.shanti-landing .shanti-split:not(:has(.shanti-split__images)) {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
}
body.shanti-landing .shanti-split:not(:has(.shanti-split__images)) .shanti-split__kicker {
    text-align: center;
}

/* ─── Stories from the Mat (sage band, layered quotes) ────── */

body.shanti-landing .shanti-band--stories {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    text-align: center;
    padding-top: var(--shanti-section-pad-y);
    padding-bottom: var(--shanti-section-pad-y);
}
body.shanti-landing .shanti-stories__heading {
    font-family: var(--shanti-font-display);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 44px);
    color: var(--shanti-white);
    margin: 0 0 clamp(32px, 4vw, 56px);
    line-height: 1.2;
}
body.shanti-landing .shanti-stories__quote-mark {
    display: none;
}
body.shanti-landing .shanti-stories__stack {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: center;
}
body.shanti-landing .shanti-stories__quote {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--shanti-white);
}
body.shanti-landing .shanti-stories__text {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 1.8vw, 22px);
    line-height: 1.55;
    color: var(--shanti-white);
    margin: 0 0 0.8em;
}
body.shanti-landing .shanti-stories__attribution {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.85);
}
body.shanti-landing .shanti-stories__quote--faded {
    opacity: 0.62;
    max-width: 600px;
}
body.shanti-landing .shanti-stories__quote--faded .shanti-stories__text {
    font-size: 16px;
}

/* ─── Final CTA — dark photo variant ──────────────────────── */

body.shanti-landing .shanti-band--final-cta-photo {
    position: relative;
    isolation: isolate;
    background-color: #1a2218;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--shanti-white);
    padding-top: clamp(96px, 9vw, 150px);
    padding-bottom: clamp(96px, 9vw, 150px);
}
body.shanti-landing .shanti-band--final-cta-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 25, 18, 0.52) 0%, rgba(15, 25, 18, 0.64) 100%);
    z-index: 0;
}
body.shanti-landing .shanti-band--final-cta-photo .shanti-band__inner {
    position: relative;
    z-index: 1;
}
body.shanti-landing .shanti-band--final-cta-photo .shanti-final-cta__heading,
body.shanti-landing .shanti-band--final-cta-photo .shanti-final-cta__body {
    color: var(--shanti-white);
}
body.shanti-landing .shanti-band--final-cta-photo .shanti-btn--ghost {
    background: var(--shanti-white);
    color: var(--shanti-charcoal);
    border-color: var(--shanti-white);
}
body.shanti-landing .shanti-band--final-cta-photo .shanti-btn--ghost:hover {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    border-color: var(--shanti-sage);
}

/* ─── Mobile breakpoint ──────────────────────────────── */

@media (max-width: 768px) {
    body.shanti-landing .shanti-band {
        padding: var(--shanti-section-pad-y-mobile) 20px;
    }

    body.shanti-landing .shanti-band--hero {
        padding: 0;
    }

    body.shanti-landing .shanti-band--hero-photo {
        min-height: 560px;
    }
    body.shanti-landing .shanti-band--hero-cream {
        min-height: 480px;
    }
    body.shanti-landing .shanti-band--hero-photo .shanti-hero__inner,
    body.shanti-landing .shanti-band--hero-cream .shanti-hero__inner {
        padding: 56px 24px;
    }
    body.shanti-landing .shanti-band--hero-photo .shanti-hero__cta,
    body.shanti-landing .shanti-band--hero-cream .shanti-hero__cta {
        padding: 16px 32px;
    }

    body.shanti-landing .shanti-section__heading { font-size: 28px; }
    body.shanti-landing .shanti-final-cta__heading { font-size: 28px; }

    body.shanti-landing .shanti-divider {
        padding: 40px 24px;
    }
    body.shanti-landing .shanti-divider__glyph {
        width: 58px;
        height: 58px;
    }
    body.shanti-landing .shanti-intro__glyph {
        width: 48px;
        height: 48px;
        margin-bottom: 28px;
    }

    body.shanti-landing .shanti-card {
        padding: 28px 24px;
    }
    body.shanti-landing .shanti-card--description {
        padding: 28px 24px;
    }
    body.shanti-landing .shanti-card--description .shanti-card__head {
        flex-direction: column;
        gap: 12px;
    }

    body.shanti-landing .shanti-section__image img { height: 260px; }

    /* Home Stillness reference layout */
    body.shanti-landing .shanti-classes-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(var(--shanti-card-min), 100%), 1fr));
        gap: var(--shanti-card-gap);
        margin-top: clamp(32px, 4vw, 44px);
    }
    body.shanti-landing .shanti-card--tile,
    body.shanti-landing .shanti-card--tile-featured {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--shanti-card-padding);
        min-height: 0;
        gap: 14px;
    }
    body.shanti-landing .shanti-card--tile .shanti-card__icon--svg,
    body.shanti-landing .shanti-card--tile .shanti-card__icon--image,
    body.shanti-landing .shanti-card--tile .shanti-card__icon--emoji {
        width: 88px;
        height: 88px;
    }
    body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--svg,
    body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--image,
    body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--emoji {
        width: 88px;
        height: 88px;
    }
    body.shanti-landing .shanti-card--tile .shanti-card__icon--emoji { font-size: 64px; }
    body.shanti-landing .shanti-card--tile-featured .shanti-card__icon--emoji { font-size: 64px; }
    body.shanti-landing .shanti-card--tile .shanti-card__heading {
        font-size: 22px;
    }
    body.shanti-landing .shanti-card--tile-featured .shanti-card__heading {
        font-size: 22px;
    }
    body.shanti-landing .shanti-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    body.shanti-landing .shanti-split__text {
        max-width: none;
        text-align: center;
    }
    body.shanti-landing .shanti-split__kicker {
        text-align: center;
    }
    body.shanti-landing .shanti-split__image img {
        height: 320px;
    }
    body.shanti-landing .shanti-stories__quote--faded { display: none; }
    body.shanti-landing .shanti-intro__line { height: 52px; margin-top: 40px; }

    body.shanti-landing .shanti-schedule__table { font-size: 14px; }
    body.shanti-landing .shanti-schedule__table thead th,
    body.shanti-landing .shanti-schedule__table th[scope="row"],
    body.shanti-landing .shanti-schedule__table td { padding: 12px 10px; }
}

/* ═══════════════════════════════════════════════════════
 * STILLNESS NAV (custom header injected via wp_body_open)
 * Centered horizontal menu with the abstract logo glyph
 * floating in the middle. Transparent over the photo hero
 * on the home/about pages, sage-tinted everywhere else.
 * ═══════════════════════════════════════════════════════ */

/* Nirvata's parent theme draws a 4px accent-green border across the top of
   <body>. On Stillness pages the nav is transparent over the hero photo, so
   that green strip looks like a stray bar above the menu — remove it here. */
body.shanti-landing {
    border-top: 0 !important;
}

body.shanti-landing .shanti-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 18px clamp(20px, 4vw, 80px);
    background: rgba(20, 20, 20, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* When the WordPress admin bar is active, push the nav below it so the
 * 32px (desktop) / 46px (mobile) admin bar doesn't cover the menu. */
body.admin-bar.shanti-landing .shanti-nav {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar.shanti-landing .shanti-nav {
        top: 46px;
    }
}

body.shanti-landing .shanti-nav__inner {
    max-width: 1280px;
    min-width: 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 56px);
}

/* Hamburger toggle — hidden on desktop, shown at <=768px (see media query). */
body.shanti-landing .shanti-nav__toggle {
    display: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 10px;
    margin: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.95);
    line-height: 0;
    border-radius: 4px;
}
body.shanti-landing .shanti-nav__toggle-bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 26px;
    height: 18px;
}
body.shanti-landing .shanti-nav__toggle-bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
}
/* Animate to an X when open. */
body.shanti-landing .shanti-nav.is-open .shanti-nav__toggle-bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.shanti-landing .shanti-nav.is-open .shanti-nav__toggle-bars span:nth-child(2) {
    opacity: 0;
}
body.shanti-landing .shanti-nav.is-open .shanti-nav__toggle-bars span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
body.shanti-landing .shanti-nav__toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 3px;
}
body.shanti-landing.shanti-shop .shanti-nav__toggle { color: var(--shanti-charcoal); }
body.shanti-landing.shanti-shop .shanti-nav__toggle:focus-visible { outline-color: var(--shanti-sage-dark); }

body.shanti-landing .shanti-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 64px);
}

body.shanti-landing .shanti-nav__list--left {
    justify-content: flex-end;
    flex: 1;
}

body.shanti-landing .shanti-nav__list--right {
    justify-content: flex-start;
    flex: 1;
}

body.shanti-landing .shanti-nav__brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: color 0.18s ease, opacity 0.18s ease;
    line-height: 0;
}

body.shanti-landing .shanti-nav__brand:hover {
    opacity: 0.85;
}

body.shanti-landing .shanti-nav__glyph {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.shanti-landing .shanti-nav__glyph svg {
    width: 100%;
    height: 100%;
}

body.shanti-landing .shanti-nav__logo {
    max-height: 44px;
    width: auto;
    display: block;
}

body.shanti-landing .shanti-nav__wordmark {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1;
}


body.shanti-landing .shanti-nav__list li {
    margin: 0;
    padding: 0;
}

body.shanti-landing .shanti-nav__list a {
    position: relative;
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.02em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.95);
    transition: color 0.18s ease, opacity 0.18s ease;
    padding: 6px 0;
    text-transform: none;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    line-height: 1.3;
}

/* Kill the parent theme's ::before pseudo, but use ::after for our own
   underline indicator (shared by hover and the current page). */
body.shanti-landing .shanti-nav__list a::before {
    display: none !important;
    content: none !important;
}

body.shanti-landing .shanti-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s ease;
    opacity: 0.85;
}

body.shanti-landing .shanti-nav__list a:hover {
    color: var(--shanti-cream);
    opacity: 0.85;
}

body.shanti-landing .shanti-nav__list a:hover::after {
    transform: scaleX(1);
}

/* Current page: a persistent, slightly dimmer underline so visitors always
   know where they are. WordPress sets these classes on the active item. */
body.shanti-landing .shanti-nav__list .current-menu-item > a::after,
body.shanti-landing .shanti-nav__list .current_page_item > a::after,
body.shanti-landing .shanti-nav__list a[aria-current="page"]::after {
    transform: scaleX(1);
    opacity: 0.55;
}

/* Keyboard focus: a clear ring that reads on the photo hero without the
   browser's default outline clashing with the light-on-dark nav. */
body.shanti-landing .shanti-nav__list a:focus-visible,
body.shanti-landing .shanti-nav__brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
    border-radius: 2px;
}

/* FluentCart product pages do not have a photo hero behind the nav, so use a
 * solid header treatment and let the product content begin beneath it. */
body.shanti-landing.shanti-shop .shanti-nav {
    position: sticky;
    background: rgba(250, 248, 245, 0.96);
    border-bottom: 1px solid rgba(156, 173, 156, 0.22);
    box-shadow: 0 12px 32px rgba(61, 61, 61, 0.08);
}

body.admin-bar.shanti-landing.shanti-shop .shanti-nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar.shanti-landing.shanti-shop .shanti-nav {
        top: 46px;
    }
}

body.shanti-landing.shanti-shop .shanti-nav__brand,
body.shanti-landing.shanti-shop .shanti-nav__wordmark,
body.shanti-landing.shanti-shop .shanti-nav__list a {
    color: var(--shanti-charcoal);
}

body.shanti-landing.shanti-shop .shanti-nav__list a:hover {
    color: var(--shanti-sage-dark);
}

/* On the light product-page nav, the white focus ring would be invisible —
   use a sage ring against the cream header instead. */
body.shanti-landing.shanti-shop .shanti-nav__list a:focus-visible,
body.shanti-landing.shanti-shop .shanti-nav__brand:focus-visible {
    outline-color: var(--shanti-sage-dark);
}

body.shanti-landing.shanti-shop .shanti-product-wrap {
    padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 64px);
    background: var(--shanti-cream);
}

body.shanti-landing.shanti-shop .shanti-product-shell {
    max-width: 1160px;
    margin: 0 auto;
}

/* When the page is scrolled OR the nav sits over content (not a hero photo),
 * switch to dark text + sage-cream background.
 * Detect "no hero photo on page" by the presence of body.shanti-blog (blog
 * pages don't have a photo hero) or body.shanti-landing without a hero photo. */
/* Blog now uses the same photo hero as home, so the nav stays absolute over
 * the photo with the same dark translucent treatment. No override needed. */

/* Mobile (<=768px): hamburger menu. The header row shows the brand (left)
 * and the toggle button (right). Menu lists collapse into a slide-down panel
 * that the toggle reveals via the .is-open class on .shanti-nav. */
@media (max-width: 768px) {
    body.shanti-landing .shanti-nav {
        padding: 12px 16px;
    }
    body.shanti-landing .shanti-nav__inner {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 0;
        column-gap: 12px;
    }

    /* Brand: left, normal size (no longer stacked/centered). */
    body.shanti-landing .shanti-nav__brand {
        order: 0;
        flex: 0 1 auto;
        justify-content: flex-start;
        margin: 0;
    }
    body.shanti-landing .shanti-nav__glyph,
    body.shanti-landing .shanti-nav__logo { max-height: 36px; width: auto; }
    body.shanti-landing .shanti-nav__glyph { width: 36px; height: 36px; }
    body.shanti-landing .shanti-nav__wordmark { font-size: 18px; }

    /* Show the hamburger, on the right. */
    body.shanti-landing .shanti-nav__toggle {
        display: inline-flex;
        order: 1;
    }

    /* The two menu lists become one full-width stacked panel below the row.
       Collapsed by default (max-height 0 + fade); revealed when .is-open.
       max-height is a robust collapse for a <ul> with a variable item count. */
    body.shanti-landing .shanti-nav__list {
        order: 2;
        flex: 1 1 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 0.2s ease;
    }
    body.shanti-landing .shanti-nav.is-open .shanti-nav__list {
        max-height: 60vh;
        opacity: 1;
    }

    /* Breathing room above the first list (under the brand row) when open. */
    body.shanti-landing .shanti-nav.is-open .shanti-nav__list--left {
        margin-top: 8px;
    }

    /* Big, easy-to-tap stacked links. */
    body.shanti-landing .shanti-nav__list a {
        display: block;
        font-size: 17px;
        padding: 13px 4px;            /* ~44px tap target */
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }
    body.shanti-landing.shanti-shop .shanti-nav__list a {
        border-bottom-color: rgba(61, 61, 61, 0.12);
    }
    /* The growing underline indicator is for the desktop inline nav; in the
       stacked panel use a left-edge accent on hover/current instead. */
    body.shanti-landing .shanti-nav__list a::after { content: none; }
    body.shanti-landing .shanti-nav__list .current-menu-item > a,
    body.shanti-landing .shanti-nav__list .current_page_item > a,
    body.shanti-landing .shanti-nav__list a[aria-current="page"] {
        font-weight: 600;
        padding-left: 12px;
        box-shadow: inset 3px 0 0 currentColor;
    }
}

/* Small phones: tighten typography and spacing further. */
@media (max-width: 480px) {
    body.shanti-landing { font-size: 16px; }
    body.shanti-landing .shanti-nav { padding: 10px 16px; }
    body.shanti-landing .shanti-nav__glyph,
    body.shanti-landing .shanti-nav__logo { max-height: 30px; }
    body.shanti-landing .shanti-nav__glyph { width: 30px; height: 30px; }

    body.shanti-landing .shanti-band--hero-photo .shanti-hero__headline {
        font-size: 40px;
        line-height: 1.08;
    }
    body.shanti-landing .shanti-band--hero-photo .shanti-hero__tagline {
        font-size: 16px;
    }
    body.shanti-landing .shanti-band {
        padding: var(--shanti-section-pad-y-mobile) 16px;
    }
    body.shanti-landing .shanti-section__heading { font-size: 26px; }

    body.shanti-landing .shanti-card,
    body.shanti-landing .shanti-card--description,
    body.shanti-landing .shanti-card--tile {
        padding: 22px 18px;
    }
    /* Keep room for the absolutely-positioned "MOST POPULAR" badge so it
       doesn't overlap the heading on small phones (the padding reset above
       removed the featured card's reserved top space). */
    body.shanti-landing .shanti-card--pricing-featured {
        padding-top: 52px;
    }
    body.shanti-landing .shanti-card--tile {
        grid-template-columns: minmax(0, 1fr) auto;
        text-align: left;
    }
    body.shanti-landing .shanti-card--tile .shanti-card__media {
        justify-content: center;
    }
    body.shanti-landing .shanti-card--tile .shanti-card__body {
        padding-top: 0;
    }

    body.shanti-landing .shanti-pricing-grid,
    body.shanti-landing .shanti-style-grid,
    body.shanti-landing .shanti-credentials-grid,
    body.shanti-landing .shanti-steps-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body.shanti-landing .shanti-cta-row {
        flex-direction: column;
        align-items: stretch;
    }
    body.shanti-landing .shanti-btn { width: 100%; text-align: center; }
}

@media (min-width: 440px) and (max-width: 768px) {
    body.shanti-landing .shanti-classes-grid,
    body.shanti-landing .shanti-style-grid,
    body.shanti-landing .shanti-credentials-grid,
    body.shanti-landing .shanti-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--shanti-card-gap);
    }

    body.shanti-landing .shanti-card,
    body.shanti-landing .shanti-card--description,
    body.shanti-landing .shanti-card--tile {
        padding: var(--shanti-card-padding);
    }

    /* The featured pricing card carries an absolutely-positioned "MOST
       POPULAR" badge at top:0. The card-padding reset above wiped its
       reserved top space, so the badge overlapped the heading — restore
       enough top padding to clear the ~28px badge with breathing room. */
    body.shanti-landing .shanti-card--pricing-featured {
        padding-top: 52px;
    }

    body.shanti-landing .shanti-card--tile,
    body.shanti-landing .shanti-card--tile-featured {
        grid-column: auto;
    }
}

/* ═══════════════════════════════════════════════════════
 * BLOG PAGES (single posts, archives, search, blog index)
 * Wrap the post in our band system; serif title + italic
 * supporting line + Cormorant body type.
 * ═══════════════════════════════════════════════════════ */

body.shanti-blog .shanti-post-hero {
    background: linear-gradient(180deg, var(--shanti-cream) 0%, var(--shanti-cream-deep) 100%);
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 80px);
    text-align: center;
}

body.shanti-blog .shanti-post-hero__kicker {
    font-family: var(--shanti-font-display);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--shanti-gold);
    margin: 0 0 1em;
}

body.shanti-blog .shanti-post-hero__title {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.15;
    color: var(--shanti-charcoal);
    margin: 0 0 0.4em;
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
}

body.shanti-blog .shanti-post-hero__meta {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-size: 16px;
    color: rgba(61, 61, 61, 0.7);
    margin: 0;
}

body.shanti-blog .shanti-post-body {
    background: var(--shanti-white);
    padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 80px);
}

body.shanti-blog .shanti-post-body__inner {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--shanti-font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--shanti-charcoal);
}
body.shanti-blog .shanti-post-body__inner--center {
    text-align: center;
}

body.shanti-blog .shanti-post-body__inner p { margin: 0 0 1.4em; }
body.shanti-blog .shanti-post-body__inner h2 {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.25;
    margin: 1.6em 0 0.6em;
    color: var(--shanti-charcoal);
}
body.shanti-blog .shanti-post-body__inner h3 {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.3;
    margin: 1.4em 0 0.5em;
}
body.shanti-blog .shanti-post-body__inner blockquote {
    border-left: 3px solid var(--shanti-gold);
    padding: 4px 0 4px 24px;
    margin: 1.6em 0;
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--shanti-sage-dark);
}
body.shanti-blog .shanti-post-body__inner img,
body.shanti-blog .shanti-post-body__inner figure {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.6em 0;
}
body.shanti-blog .shanti-post-body__inner a {
    color: var(--shanti-sage-dark);
    text-decoration: underline;
    text-decoration-color: rgba(156, 173, 156, 0.4);
    text-underline-offset: 3px;
}
body.shanti-blog .shanti-post-body__inner a:hover {
    color: var(--shanti-sage);
}

/* ── 404 "gentle detour" composition ─────────────────────────────────────
   Self-contained, vertically-centred hero so the page reads as one calm
   moment instead of a stranded headline above an empty band. */
body.shanti-blog .shanti-404 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(520px, 78vh, 840px);
    padding: clamp(56px, 9vw, 120px) clamp(20px, 4vw, 80px);
    text-align: center;
    background:
        radial-gradient(125% 90% at 50% 6%, var(--shanti-sage-tint, #EDF2ED) 0%, transparent 58%),
        linear-gradient(180deg, var(--shanti-warm-white, #FFFEF9) 0%, var(--shanti-cream, #FAF8F5) 100%);
}

/* Oversized, barely-there numeral for editorial depth behind the message. */
body.shanti-blog .shanti-404__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -56%);
    font-family: var(--shanti-font-display, 'Cormorant Garamond', Georgia, serif);
    font-weight: 600;
    font-size: clamp(220px, 44vw, 540px);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--shanti-sage, #9CAD9C);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

body.shanti-blog .shanti-404__inner {
    position: relative;
    z-index: 1;
    max-width: 38ch;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.shanti-blog .shanti-404__lotus {
    display: block;
    width: clamp(56px, 8vw, 76px);
    margin-bottom: clamp(20px, 3vw, 34px);
    color: var(--shanti-sage-dark, #6D806D);
}
body.shanti-blog .shanti-404__lotus svg {
    display: block;
    width: 100%;
    height: auto;
}

body.shanti-blog .shanti-404__kicker {
    font-family: var(--shanti-font-display, 'Cormorant Garamond', Georgia, serif);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 13px;
    color: var(--shanti-gold, #C4A962);
    margin: 0 0 0.9em;
    padding-left: 0.3em; /* optical balance for the trailing letter-spacing */
}

body.shanti-blog .shanti-404__title {
    font-family: var(--shanti-font-display, 'Cormorant Garamond', Georgia, serif);
    font-weight: 500;
    font-size: clamp(34px, 5.5vw, 68px);
    line-height: 1.08;
    color: var(--shanti-charcoal, #3D3D3D);
    margin: 0 0 0.5em;
}

body.shanti-blog .shanti-404__text {
    font-family: var(--shanti-font-body, 'Nunito Sans', sans-serif);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.7;
    color: rgba(61, 61, 61, 0.72);
    margin: 0 0 clamp(28px, 4vw, 40px);
    max-width: 34ch;
}

body.shanti-blog .shanti-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 0;
}

/* One orchestrated entrance: a soft, staggered rise; lotus then breathes. */
@media (prefers-reduced-motion: no-preference) {
    body.shanti-blog .shanti-404__lotus,
    body.shanti-blog .shanti-404__kicker,
    body.shanti-blog .shanti-404__title,
    body.shanti-blog .shanti-404__text,
    body.shanti-blog .shanti-404-actions {
        opacity: 0;
        transform: translateY(14px);
        animation: shanti404Rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    body.shanti-blog .shanti-404__lotus   { animation-delay: 0.05s; }
    body.shanti-blog .shanti-404__kicker  { animation-delay: 0.16s; }
    body.shanti-blog .shanti-404__title   { animation-delay: 0.26s; }
    body.shanti-blog .shanti-404__text    { animation-delay: 0.36s; }
    body.shanti-blog .shanti-404-actions  { animation-delay: 0.46s; }

    body.shanti-blog .shanti-404__lotus svg {
        animation: shanti404Float 6s ease-in-out 1.1s infinite;
    }
}

@keyframes shanti404Rise {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes shanti404Float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* 404 action buttons need their own colours: the generic .shanti-btn--secondary
   rule was rendering the "View Classes" button with no legible text on this view.
   These rules are scoped tightly to the 404 actions so both buttons stay readable
   (solid sage primary + white-filled sage-outline secondary). */
body.shanti-blog .shanti-404-actions .shanti-btn {
    display: inline-block;
    font-family: var(--shanti-font-ui);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 13px;
    padding: 16px 36px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    text-decoration: none;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
body.shanti-blog .shanti-404-actions .shanti-btn--primary {
    background: var(--shanti-sage);
    color: #ffffff;
    border-color: var(--shanti-sage);
}
body.shanti-blog .shanti-404-actions .shanti-btn--primary:hover,
body.shanti-blog .shanti-404-actions .shanti-btn--primary:focus-visible {
    background: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
    color: #ffffff;
}
body.shanti-blog .shanti-404-actions .shanti-btn--secondary {
    background: #ffffff;
    color: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
}
body.shanti-blog .shanti-404-actions .shanti-btn--secondary:hover,
body.shanti-blog .shanti-404-actions .shanti-btn--secondary:focus-visible {
    background: var(--shanti-sage);
    color: #ffffff;
    border-color: var(--shanti-sage);
}

body.shanti-blog .shanti-page-links {
    margin-top: 2em;
    font-family: var(--shanti-font-ui);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.shanti-blog .shanti-blog-intro {
    background: var(--shanti-white);
    padding: clamp(32px, 4vw, 64px) clamp(20px, 4vw, 80px);
}

body.shanti-blog .shanti-blog-intro__inner {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--shanti-font-body);
    font-size: 18px;
    line-height: 1.75;
    color: var(--shanti-charcoal);
    text-align: center;
}

body.shanti-blog .shanti-blog-intro__inner > :last-child {
    margin-bottom: 0;
}

body.shanti-blog .shanti-post-footer,
body.shanti-blog .shanti-comments {
    background: var(--shanti-cream);
    padding: clamp(32px, 4vw, 64px) clamp(20px, 4vw, 80px);
}

body.shanti-blog .shanti-post-footer__inner,
body.shanti-blog .shanti-comments__inner {
    max-width: 900px;
    margin: 0 auto;
}

body.shanti-blog .shanti-post-taxonomy {
    font-family: var(--shanti-font-ui);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(61, 61, 61, 0.7);
    margin-bottom: 36px;
}

body.shanti-blog .shanti-post-taxonomy p {
    margin: 0 0 10px;
}

body.shanti-blog .shanti-post-taxonomy span {
    color: var(--shanti-gold);
}

body.shanti-blog .shanti-post-taxonomy a,
body.shanti-blog .post-navigation a {
    color: var(--shanti-sage-dark);
    text-decoration: none;
}

body.shanti-blog .post-navigation .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.shanti-blog .post-navigation .nav-next {
    text-align: right;
}

body.shanti-blog .post-navigation a {
    display: block;
    background: var(--shanti-white);
    border: 1px solid var(--shanti-card-border);
    border-radius: var(--shanti-card-radius);
    padding: 22px 24px;
}

body.shanti-blog .post-navigation a:hover {
    border-color: rgba(156, 173, 156, 0.35);
    box-shadow: 0 8px 22px rgba(61, 61, 61, 0.07);
}

body.shanti-blog .shanti-post-nav__label {
    display: block;
    font-family: var(--shanti-font-ui);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--shanti-gold);
    margin-bottom: 8px;
}

body.shanti-blog .shanti-post-nav__title {
    display: block;
    font-family: var(--shanti-font-display);
    font-size: 22px;
    line-height: 1.25;
    color: var(--shanti-charcoal);
}

body.shanti-blog .shanti-comments {
    border-top: 1px solid rgba(156, 173, 156, 0.16);
}

/* Blog archive (list of posts) */
body.shanti-blog .shanti-archive {
    background: var(--shanti-cream);
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 80px);
}

body.shanti-blog .shanti-archive__inner {
    max-width: 1100px;
    margin: 0 auto;
}

body.shanti-blog .shanti-archive__header {
    text-align: center;
    margin: 0 0 64px;
}

body.shanti-blog .shanti-archive__kicker {
    font-family: var(--shanti-font-display);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--shanti-gold);
    margin: 0 0 1em;
}

body.shanti-blog .shanti-archive__title {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: clamp(36px, 5vw, 56px);
    color: var(--shanti-charcoal);
    margin: 0;
}

body.shanti-blog .shanti-archive__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 32px;
}

body.shanti-blog .shanti-post-card {
    background: var(--shanti-white);
    border: 1px solid var(--shanti-card-border);
    border-radius: var(--shanti-card-radius);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
}

body.shanti-blog .shanti-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(61, 61, 61, 0.08);
    border-color: rgba(156, 173, 156, 0.3);
}

body.shanti-blog .shanti-post-card__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--shanti-sage-tint);
}

body.shanti-blog .shanti-post-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.shanti-blog .shanti-post-card__body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

body.shanti-blog .shanti-post-card__meta {
    font-family: var(--shanti-font-display);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--shanti-gold);
    margin: 0;
}

body.shanti-blog .shanti-post-card__title {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
    color: var(--shanti-charcoal);
}

body.shanti-blog .shanti-post-card__title a {
    color: inherit;
    text-decoration: none;
}

body.shanti-blog .shanti-post-card__title a:hover {
    color: var(--shanti-sage-dark);
}

body.shanti-blog .shanti-post-card__excerpt {
    font-family: var(--shanti-font-body);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(61, 61, 61, 0.78);
    margin: 0;
    flex: 1;
}

body.shanti-blog .shanti-post-card__readmore {
    font-family: var(--shanti-font-ui);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--shanti-sage-dark);
    text-decoration: none;
    margin-top: auto;
    align-self: flex-start;
    padding-top: 8px;
    border-top: 1px solid var(--shanti-card-border);
    width: 100%;
}

body.shanti-blog .shanti-post-card__readmore:hover {
    color: var(--shanti-sage);
}

/* Pagination */
body.shanti-blog .shanti-pagination {
    text-align: center;
    margin-top: 64px;
    font-family: var(--shanti-font-ui);
    font-size: 14px;
    letter-spacing: 0.1em;
}

body.shanti-blog .shanti-pagination .page-numbers {
    display: inline-block;
    padding: 10px 16px;
    margin: 0 4px;
    color: var(--shanti-sage-dark);
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
}

body.shanti-blog .shanti-pagination .page-numbers:hover,
body.shanti-blog .shanti-pagination .page-numbers.current {
    background: var(--shanti-sage);
    color: var(--shanti-white);
    border-color: var(--shanti-sage);
}

body.shanti-blog .shanti-archive .search-form {
    max-width: 520px;
    margin: 28px auto 0;
    display: flex;
    gap: 10px;
}

body.shanti-blog .shanti-archive .search-field {
    flex: 1;
    min-width: 0;
}

@media (max-width: 680px) {
    body.shanti-blog .post-navigation .nav-links,
    body.shanti-blog .shanti-archive .search-form {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    body.shanti-blog .post-navigation .nav-next {
        text-align: left;
    }
}

/* ========================================
   WELCOME FORM (post-checkout intake)
   ======================================== */

body.shanti-landing .shanti-welcome-form {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
    color: var(--shanti-charcoal);
    font-family: var(--shanti-body-font);
}

body.shanti-landing .shanti-welcome-form__section {
    border: 1px solid rgba(156, 173, 156, 0.25);
    background: var(--shanti-warm-white, #FFFEF9);
    padding: 1.75rem 1.5rem 1.25rem;
    margin: 0 0 1.5rem;
}

body.shanti-landing .shanti-welcome-form__section legend {
    font-family: var(--shanti-heading-font);
    font-size: 1.35rem;
    color: var(--shanti-sage-dark);
    padding: 0 0.5rem;
    letter-spacing: 0.02em;
}

body.shanti-landing .shanti-welcome-form p {
    margin: 0 0 1rem;
    line-height: 1.55;
}

body.shanti-landing .shanti-welcome-form label {
    display: block;
    font-size: 0.95rem;
    color: var(--shanti-charcoal);
}

body.shanti-landing .shanti-welcome-form .req {
    color: var(--shanti-gold);
    font-weight: 600;
}

body.shanti-landing .shanti-welcome-form input[type="text"],
body.shanti-landing .shanti-welcome-form input[type="email"],
body.shanti-landing .shanti-welcome-form input[type="tel"],
body.shanti-landing .shanti-welcome-form textarea {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.75rem 0.9rem;
    font: inherit;
    color: var(--shanti-charcoal);
    background: #fff;
    border: 1px solid rgba(61, 61, 61, 0.18);
    border-radius: 0;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

body.shanti-landing .shanti-welcome-form input:focus,
body.shanti-landing .shanti-welcome-form textarea:focus {
    outline: none;
    border-color: var(--shanti-sage);
    box-shadow: 0 0 0 3px rgba(156, 173, 156, 0.18);
}

body.shanti-landing .shanti-welcome-form textarea {
    min-height: 120px;
    resize: vertical;
}

body.shanti-landing .shanti-welcome-form .wpcf7-list-item {
    display: block;
    margin: 0 0 0.5rem;
}

body.shanti-landing .shanti-welcome-form .wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
}

body.shanti-landing .shanti-welcome-form .wpcf7-list-item label:hover {
    background: rgba(156, 173, 156, 0.08);
    border-color: rgba(156, 173, 156, 0.25);
}

body.shanti-landing .shanti-welcome-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--shanti-sage);
}

body.shanti-landing .shanti-welcome-form__submit {
    text-align: center;
    margin-top: 2rem;
}

body.shanti-landing .shanti-welcome-form input[type="submit"],
body.shanti-landing .shanti-welcome-form button[type="submit"] {
    background: var(--shanti-sage);
    color: #fff;
    border: 1.5px solid var(--shanti-sage);
    padding: 0.95rem 2.4rem;
    font-family: var(--shanti-accent-font, inherit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

body.shanti-landing .shanti-welcome-form input[type="submit"]:hover,
body.shanti-landing .shanti-welcome-form button[type="submit"]:hover {
    background: var(--shanti-sage-dark);
    border-color: var(--shanti-sage-dark);
    transform: translateY(-1px);
}

body.shanti-landing .wpcf7-response-output {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--shanti-sage);
    background: rgba(156, 173, 156, 0.08);
    color: var(--shanti-charcoal);
    font-size: 0.95rem;
}

body.shanti-landing .wpcf7-not-valid-tip {
    color: #b94a48;
    font-size: 0.85rem;
    margin-top: 0.25rem;
    display: block;
}

@media (max-width: 600px) {
    body.shanti-landing .shanti-welcome-form__section {
        padding: 1.25rem 1rem 0.75rem;
    }
}

/* ───────────────────────────────────────────────────────────
 * Class-pass product page: credit clarity + Stillness styling
 * ─────────────────────────────────────────────────────────── */

/* Two-column product layout */
body.shanti-landing.shanti-shop .fct-single-product-page-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 56px);
    align-items: flex-start;
}
body.shanti-landing.shanti-shop .fct-product-gallery-wrapper,
body.shanti-landing.shanti-shop [data-fct-product-gallery] {
    flex: 1 1 320px;
    min-width: 280px;
}
body.shanti-landing.shanti-shop .fct-product-summary {
    flex: 1 1 360px;
    min-width: 300px;
}

/* No-image products: hide the broken placeholder, show a branded credit tile.
 * The gradient tile + glyph only apply when the gallery is showing the
 * placeholder (no real product image), so an uploaded photo is never overlaid.
 * :has() scopes this to the no-image state; on engines without :has() the rules
 * simply don't apply (the placeholder img is still hidden, leaving plain space). */
body.shanti-landing.shanti-shop [data-fct-product-gallery] img[src*="placeholder"] {
    display: none;
}
body.shanti-landing.shanti-shop .shanti-product-shell--pass [data-fct-product-gallery]:has(img[src*="placeholder"]) {
    position: relative;
    min-height: 320px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--shanti-sage, #9bb8a4) 0%, var(--shanti-sage-dark, #6f8f78) 100%);
}
body.shanti-landing.shanti-shop .shanti-product-shell--pass [data-fct-product-gallery]:has(img[src*="placeholder"])::after {
    content: "🎟️";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(64px, 12vw, 120px);
    opacity: 0.92;
    pointer-events: none;
}

/* Credit callout above the product UI */
body.shanti-landing.shanti-shop .shanti-credit-callout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 28px;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--shanti-cream, #f6f3ec);
    border: 1px solid rgba(111, 143, 120, 0.35);
}
body.shanti-landing.shanti-shop .shanti-credit-callout__icon {
    font-size: 28px;
    line-height: 1.1;
}
body.shanti-landing.shanti-shop .shanti-credit-callout__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
body.shanti-landing.shanti-shop .shanti-credit-callout__text strong {
    font-size: 18px;
    color: var(--shanti-charcoal, #2c333a);
}
body.shanti-landing.shanti-shop .shanti-credit-callout__text span {
    color: rgba(44, 51, 58, 0.78);
}

/* Live credit math line under the quantity stepper */
body.shanti-landing.shanti-shop .shanti-credit-math {
    margin: 12px 0 0;
    font-weight: 600;
    color: var(--shanti-sage-dark, #6f8f78);
}
body.shanti-landing.shanti-shop .shanti-credit-math--locked {
    font-weight: 500;
    color: rgba(44, 51, 58, 0.7);
}

/* Quantity stepper polish */
body.shanti-landing.shanti-shop .fct-product-quantity-container {
    margin: 18px 0;
}
body.shanti-landing.shanti-shop .fct-product-quantity {
    border-radius: 10px;
    overflow: hidden;
}
body.shanti-landing.shanti-shop .fct-quantity-decrease-button[disabled],
body.shanti-landing.shanti-shop .fct-quantity-increase-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Purchase buttons → match shanti-btn look */
body.shanti-landing.shanti-shop .fct-product-buttons-wrap {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}
body.shanti-landing.shanti-shop .fct-product-buttons-wrap button,
body.shanti-landing.shanti-shop .fct-product-buttons-wrap a {
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* How-to steps + back link below the product UI */
body.shanti-landing.shanti-shop .shanti-credit-howto {
    margin: 40px 0 0;
    padding: 28px clamp(20px, 4vw, 40px);
    background: var(--shanti-cream, #f6f3ec);
    border-radius: 18px;
}
body.shanti-landing.shanti-shop .shanti-credit-howto__heading {
    margin: 0 0 16px;
}
body.shanti-landing.shanti-shop .shanti-credit-howto__steps {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 12px;
}
body.shanti-landing.shanti-shop .shanti-credit-howto__steps li {
    display: flex;
    gap: 12px;
    align-items: center;
}
body.shanti-landing.shanti-shop .shanti-credit-howto__num {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: var(--shanti-sage-dark, #6f8f78);
}

/* The "← Back to booking" link sits on the light cream credits-howto card, but
   .shanti-btn--ghost is styled for dark/photo bands (white text + white border),
   making it nearly invisible here. Override to a solid, accessible sage button
   on light: white fill, sage-dark text/border, and a clear filled hover. */
body.shanti-landing.shanti-shop .shanti-credit-howto__back,
body.shanti-landing.shanti-shop .shanti-credit-howto__back:link,
body.shanti-landing.shanti-shop .shanti-credit-howto__back:visited {
    background: #ffffff;
    color: var(--shanti-sage-dark, #6D806D);
    border: 2px solid var(--shanti-sage-dark, #6D806D);
    font-weight: 700;
}
body.shanti-landing.shanti-shop .shanti-credit-howto__back:hover,
body.shanti-landing.shanti-shop .shanti-credit-howto__back:focus-visible {
    background: var(--shanti-sage-dark, #6D806D);
    color: #ffffff;
    border-color: var(--shanti-sage-dark, #6D806D);
}
/* Visible keyboard focus ring for accessibility. */
body.shanti-landing.shanti-shop .shanti-credit-howto__back:focus-visible {
    outline: 3px solid var(--shanti-sage, #9CAD9C);
    outline-offset: 2px;
}

/* Pricing-card credit badge + legend on the Book a Class page */
body.shanti-landing .shanti-card__credit-badge {
    margin: 6px 0 2px;
    font-weight: 600;
    color: var(--shanti-sage-dark, #6f8f78);
}
/* Per-package expiry terms under the pricing-card credit badge */
body.shanti-landing .shanti-card__credit-terms {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(44, 51, 58, 0.7);
}
body.shanti-landing .shanti-pricing-legend {
    max-width: 640px;
    margin: 24px auto 0;
    text-align: center;
    color: rgba(44, 51, 58, 0.75);
    font-size: 15px;
}

/* Mobile: single column */
@media (max-width: 768px) {
    body.shanti-landing.shanti-shop .fct-single-product-page-row {
        flex-direction: column;
    }
}

/* ========================================================================
   Reduced motion — respect the OS/browser preference. Animations and
   transitions collapse to near-instant so state still changes (the nav
   underline still appears for the current page / on hover) without motion.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    body.shanti-landing *,
    body.shanti-landing *::before,
    body.shanti-landing *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════
 * LOGIN PAGE  (/login/)
 * Generic page that inherits .shanti-blog, but should present a single
 * centered card on a calm cream field — not the tall hero + body-copy
 * frame. We drop the duplicate hero title (the card carries its own
 * "Log In" heading) and let the card sit centered with comfortable
 * breathing room above and below.
 * ═══════════════════════════════════════════════════════ */

/* Hide the page-title hero band; the card is self-titled below. */
body.shanti-login-page .shanti-post-hero {
    display: none;
}

/* Center the card vertically in the available viewport, with a soft
 * cream background instead of the white body-copy slab. */
body.shanti-login-page .shanti-post-body {
    background: linear-gradient(180deg, var(--shanti-cream) 0%, var(--shanti-cream-deep) 100%);
    padding: clamp(40px, 8vh, 96px) 20px;
    min-height: calc(100vh - 220px); /* viewport minus nav + footer-ish */
    display: flex;
    align-items: center;
    justify-content: center;
}

body.shanti-login-page .shanti-post-body__inner {
    max-width: none;
    width: 100%;
}

/* The card heading: give it the Stillness display face so the page still
 * reads as branded even with the hero removed. */
body.shanti-login-page .shanti-login__title {
    font-family: var(--shanti-font-display);
    font-weight: 500;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    color: var(--shanti-charcoal);
    text-align: center;
    margin: 0 0 1.5rem;
}

/* Reset the card's own top/bottom margin since the flex parent handles
 * centering now. */
body.shanti-login-page .shanti-login {
    margin: 0 auto;
}

/* Branded inline error shown when a login attempt fails and we bounce
 * the user back to /login/. */
body.shanti-login-page .shanti-login__error {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: #fbeaea;
    border: 1px solid #e3b3b3;
    color: #8a3a3a;
    font-size: 0.92rem;
    text-align: center;
}