/* ============================================================
   Anywhere Prayer — Landing Page Stylesheet
   Extends the PurpleMouse design system with gold/sacred tokens
   ============================================================ */

:root {
    /* ── PurpleMouse base tokens ── */
    --bg:           #FFFFFF;
    --bg-2:         #F9F8F5;
    --bg-3:         #EEE9DC;
    --surface:      #FFFFFF;
    --card:         #FFFFFF;

    --border:       #E8E2D4;
    --border-2:     #D4CAB2;

    --pm:           #6B4EFF;
    --pm-light:     #8B6FFF;
    --pm-dark:      #4B2EDF;
    --pm-50:        #F0ECFF;
    --pm-100:       #DDD5FF;

    --navy:         #0D1035;
    --navy-2:       #1E2255;

    --text:         #0D1035;
    --text-2:       #4A4830;
    --text-3:       #8B8770;

    --green:        #10B981;

    --shadow-sm:    0 1px 4px rgba(13,16,53,.06), 0 1px 3px rgba(13,16,53,.04);
    --shadow-md:    0 4px 16px rgba(13,16,53,.08), 0 2px 8px rgba(13,16,53,.05);
    --shadow-lg:    0 12px 40px rgba(13,16,53,.10), 0 4px 16px rgba(13,16,53,.06);
    --shadow-pm:    0 8px 24px rgba(107,78,255,.22);

    --radius:       16px;
    --radius-sm:    10px;
    --radius-chip:  100px;
    --nav-h:        68px;

    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
            "Inter", "Helvetica Neue", Arial, sans-serif;

    /* ── Anywhere Prayer accent tokens ── */
    --cnp:          #C9A84C;   /* gold primary   */
    --cnp-light:    #E8C97A;   /* light gold     */
    --cnp-dark:     #8B6914;   /* deep gold      */
    --cnp-50:       #FDF8EC;   /* warm ivory     */
    --cnp-100:      #F5E9C0;   /* pale gold      */
    --night:        #080D1A;   /* deep dark bg   */
    --night-2:      #0D1628;   /* slightly lifted dark */
    --ivory:        #F5F0E8;   /* warm ivory text on dark */
    --shadow-cnp:   0 8px 24px rgba(201,168,76,.22);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
ol   { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* ── Utility ── */
.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-chip);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--cnp);
    color: #fff;
    box-shadow: var(--shadow-cnp);
}
.btn--primary:hover {
    background: var(--cnp-dark);
    box-shadow: 0 10px 28px rgba(201,168,76,.35);
}
.btn--ghost {
    background: transparent;
    color: rgba(255,255,255,.80);
    border: 1.5px solid rgba(255,255,255,.30);
}
.btn--ghost:hover {
    border-color: var(--cnp);
    color: var(--cnp);
    background: rgba(201,168,76,.08);
}
.btn--ghost--light {
    background: transparent;
    color: var(--text);
    border: 1.5px solid var(--border-2);
}
.btn--ghost--light:hover {
    border-color: var(--cnp);
    color: var(--cnp-dark);
    background: var(--cnp-50);
}
.btn--sm { padding: 8px 18px; font-size: 14px; }
.btn--gold-inv {
    background: #fff;
    color: var(--cnp-dark);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.btn--gold-inv:hover {
    background: var(--cnp-50);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.20);
}

/* ── Nav ── */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: rgba(8,13,26,.90);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(201,168,76,.15);
    transition: box-shadow .3s;
}
.nav.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.35);
    background: rgba(8,13,26,.96);
}
.nav__inner {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 28px;
    gap: 24px;
}
.nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    text-decoration: none;
}
.nav__logo img { height: 32px; width: auto; filter: brightness(0) invert(1) opacity(.80); }
.nav__wordmark { font-weight: 700; font-size: 1rem; color: rgba(255,255,255,.70); letter-spacing: -0.01em; }
.nav__sep {
    color: rgba(255,255,255,.20);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
}
.nav__app {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cnp);
    letter-spacing: -0.01em;
}
.nav__links {
    display: flex;
    gap: 4px;
    margin-right: auto;
}
.nav__links a {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}
.nav__links a:hover { color: var(--cnp); background: rgba(201,168,76,.08); }
.nav__links a.active { color: var(--cnp); font-weight: 600; }

.nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 40px; height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: background .15s;
}
.nav__burger:hover { background: rgba(255,255,255,.06); }
.nav__burger span {
    display: block;
    width: 22px; height: 2px;
    background: rgba(255,255,255,.70);
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(8,13,26,.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(201,168,76,.15);
    padding: 16px 28px 28px;
    gap: 4px;
    z-index: 99;
    box-shadow: 0 12px 40px rgba(0,0,0,.40);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255,255,255,.60);
    border-radius: var(--radius-sm);
    transition: background .1s, color .1s;
}
.nav__mobile a:hover { background: rgba(201,168,76,.08); color: var(--cnp); }
.nav__mobile .btn { margin-top: 12px; width: 100%; justify-content: center; }

/* ── Page wrapper ── */
main { padding-top: var(--nav-h); }

/* ── Sections ── */
.section { padding: 96px 0; background: var(--bg); }
.section--sm { padding: 64px 0; }
.section--alt  { background: var(--cnp-50); }
.section--dark {
    background: var(--night);
    position: relative;
    overflow: hidden;
}
.section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(201,168,76,.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--cnp-dark);
    margin-bottom: 16px;
}
.section__eyebrow::before {
    content: '';
    display: block;
    width: 20px; height: 2px;
    background: var(--cnp);
    border-radius: 2px;
}
.section--dark .section__eyebrow { color: var(--cnp); }
.section--dark .section__eyebrow::before { background: var(--cnp); }

.section__title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.6px;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 16px;
}
.section--dark .section__title { color: var(--ivory); }

.section__subtitle {
    font-size: 17px;
    color: var(--text-2);
    line-height: 1.7;
    max-width: 560px;
}
.section--dark .section__subtitle { color: rgba(245,240,232,.60); }

.section__header { margin-bottom: 56px; }
.section__header--center { text-align: center; }
.section__header--center .section__eyebrow { justify-content: center; }
.section__header--center .section__subtitle { margin: 0 auto; }

/* ── Cards ── */
.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--cnp-100);
}
.card--dark {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(201,168,76,.15);
    box-shadow: none;
}
.card--dark:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(201,168,76,.30);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* ── Hero ── */
.hero {
    min-height: calc(100vh - var(--nav-h));
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 80px 0 72px;
    background: var(--night);
}
/* Star-field dot pattern */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    opacity: .35;
}
/* Warm gold glow from image side */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 80% at 75% 50%, rgba(201,168,76,.10) 0%, transparent 70%),
                radial-gradient(ellipse 50% 60% at 10% 80%, rgba(107,78,255,.08) 0%, transparent 60%);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 72px;
    align-items: center;
}
.hero__content { max-width: 600px; }
.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201,168,76,.12);
    border: 1px solid rgba(201,168,76,.25);
    color: var(--cnp);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 6px 14px;
    border-radius: var(--radius-chip);
    margin-bottom: 28px;
}
.hero__tag-dot {
    width: 7px; height: 7px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(16,185,129,.60);
    animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:.5; transform:scale(.8); }
}
.hero__brand {
    font-size: clamp(52px, 7vw, 88px);
    font-weight: 900;
    letter-spacing: -3px;
    line-height: 1;
    color: var(--ivory);
    margin-bottom: 8px;
}
.hero__brand-accent { color: var(--cnp); }
.hero__tagline {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 600;
    letter-spacing: -.3px;
    color: rgba(245,240,232,.70);
    margin-bottom: 24px;
    line-height: 1.35;
}
.hero__sub {
    font-size: 17px;
    color: rgba(245,240,232,.55);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 40px;
}
.hero__ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.hero__note {
    margin-top: 20px;
    font-size: 13px;
    color: rgba(245,240,232,.30);
}

/* ── Hero place image ── */
.hero__place {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 8px 32px rgba(0,0,0,.35);
    aspect-ratio: 3/4;
    flex-shrink: 0;
}
.hero__place img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.hero__place::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8,13,26,.25) 0%,
        rgba(8,13,26,.10) 40%,
        rgba(8,13,26,.50) 100%
    );
}
/* Subtle gold border glow */
.hero__place::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    border: 1px solid rgba(201,168,76,.35);
    z-index: 2;
    pointer-events: none;
}

/* ── About split ── */
.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.about-split__text .section__subtitle { max-width: none; }
.about-split__text .section__subtitle + .section__subtitle { margin-top: 16px; }

/* ── Place mosaic ── */
.place-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
}
.place-mosaic__item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
.place-mosaic__item:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 16/9;
}
.place-mosaic__item:not(:first-child) {
    aspect-ratio: 4/3;
}
.place-mosaic__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.place-mosaic__item:hover img { transform: scale(1.04); }
.place-mosaic__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(8,13,26,.55) 100%);
    pointer-events: none;
}
.place-mosaic__label {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(245,240,232,.75);
    z-index: 1;
}

/* ── Feature grids ── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.feature-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feature-card__icon {
    width: 52px; height: 52px;
    background: var(--cnp-50);
    border: 1px solid var(--cnp-100);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}
/* SVG icon inside */
.feature-card__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--cnp-dark);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.section--dark .feature-card__icon {
    background: rgba(201,168,76,.08);
    border-color: rgba(201,168,76,.18);
}
.section--dark .feature-card__icon svg {
    stroke: var(--cnp);
}
.feature-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.2px;
}
.section--dark .feature-card__title { color: var(--ivory); }
.feature-card__body {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.65;
}
.section--dark .feature-card__body { color: rgba(245,240,232,.55); }

/* ── Faith chips ── */
.faith-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 48px;
}
.faith-chips__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(245,240,232,.35);
    align-self: center;
    margin-right: 4px;
}
.faith-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: var(--radius-chip);
    font-size: 13px;
    font-weight: 600;
    background: rgba(201,168,76,.08);
    border: 1px solid rgba(201,168,76,.20);
    color: var(--cnp-light);
    letter-spacing: .02em;
}
.faith-chip__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.faith-chip--christian .faith-chip__dot { background: #6B8CFF; }
.faith-chip--catholic  .faith-chip__dot { background: #FFD166; }
.faith-chip--jewish    .faith-chip__dot { background: #A8E6CF; }
.faith-chip--muslim    .faith-chip__dot { background: #88D8B0; }
.faith-chip--hindu     .faith-chip__dot { background: #FF8B8B; }

/* ── How it works ── */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0;
    counter-reset: steps;
    position: relative;
}
.steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(28px + 10%);
    right: calc(28px + 10%);
    height: 2px;
    background: linear-gradient(90deg, var(--cnp-100), var(--cnp-100));
    z-index: 0;
}
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    counter-increment: steps;
}
.step__num {
    width: 56px; height: 56px;
    background: var(--cnp);
    color: var(--night);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    flex-shrink: 0;
    box-shadow: var(--shadow-cnp);
    border: 4px solid var(--bg);
}
.step__num::after { content: counter(steps); }
.step__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
    letter-spacing: -.2px;
}
.step__body {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.65;
}

/* ── CTA banner ── */
.section--sm { background: var(--night); padding: 64px 0; }
.cta-banner {
    background: linear-gradient(135deg, rgba(201,168,76,.14) 0%, rgba(107,78,255,.08) 100%);
    border: 1px solid rgba(201,168,76,.22);
    border-radius: 24px;
    padding: 64px 56px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(201,168,76,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    border-radius: 24px;
}
.cta-banner__content { position: relative; z-index: 1; }
.cta-banner__title {
    font-size: clamp(26px, 3.5vw, 40px);
    font-weight: 800;
    color: var(--ivory);
    letter-spacing: -.6px;
    margin-bottom: 14px;
    line-height: 1.15;
}
.cta-banner__sub {
    font-size: 17px;
    color: rgba(245,240,232,.60);
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 36px;
}
.cta-banner__form {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.cta-banner__input {
    padding: 12px 20px;
    font-size: 15px;
    font-family: var(--font);
    border-radius: var(--radius-chip);
    border: 2px solid rgba(201,168,76,.25);
    background: rgba(201,168,76,.06);
    color: var(--ivory);
    outline: none;
    width: 280px;
    transition: border-color .18s, background .18s;
}
.cta-banner__input::placeholder { color: rgba(245,240,232,.30); }
.cta-banner__input:focus {
    border-color: rgba(201,168,76,.55);
    background: rgba(201,168,76,.10);
}
.cta-banner__note {
    font-size: 13px;
    color: rgba(245,240,232,.35);
    margin-top: 8px;
}
.cta-banner__note a {
    color: rgba(245,240,232,.50);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.cta-banner__note a:hover { color: var(--cnp); }

/* ── Badge ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--radius-chip);
}
.badge--coming {
    background: rgba(201,168,76,.12);
    color: var(--cnp);
    border: 1px solid rgba(201,168,76,.25);
}

/* ── Footer ── */
.footer {
    background: var(--night);
    border-top: 1px solid rgba(201,168,76,.10);
    padding: 64px 0 32px;
}
.footer__top {
    display: flex;
    gap: 64px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.footer__brand { flex: 1; min-width: 220px; }
.footer__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.footer__logo img { height: 28px; filter: brightness(0) invert(1) opacity(.70); }
.footer__logo-pm { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: -.01em; }
.footer__logo-sep { color: rgba(255,255,255,.18); font-weight: 300; }
.footer__logo-app { font-size: 15px; font-weight: 700; color: var(--cnp); letter-spacing: -.01em; }
.footer__tagline { font-size: 14px; color: rgba(255,255,255,.32); line-height: 1.65; max-width: 220px; margin-top: 4px; }
.footer__cols { display: flex; gap: 48px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 12px; min-width: 120px; }
.footer__col-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    margin-bottom: 2px;
}
.footer__col a {
    font-size: 14px;
    color: rgba(255,255,255,.45);
    transition: color .15s;
}
.footer__col a:hover { color: var(--cnp); }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer__bottom p,
.footer__bottom a { font-size: 13px; color: rgba(255,255,255,.24); }
.footer__bottom a:hover { color: rgba(255,255,255,.50); }
.footer__attribution { font-size: 12px; color: rgba(255,255,255,.18); line-height: 1.55; }
.footer__attribution a { color: rgba(255,255,255,.30); text-decoration: underline; text-underline-offset: 2px; }
.footer__attribution a:hover { color: var(--cnp); }

/* ── Responsive ── */
@media (max-width: 900px) {
    :root { --nav-h: 60px; }

    .nav__links { display: none; }
    .nav__burger { display: flex; margin-left: auto; }
    .nav__cta-btn { display: none; }

    .hero { padding: 48px 0 56px; min-height: auto; }
    .hero__inner { grid-template-columns: 1fr; }
    .hero__place { display: none; }
    .hero__brand { letter-spacing: -2px; }
    .hero__ctas { flex-direction: column; align-items: flex-start; }

    .about-split { grid-template-columns: 1fr; gap: 48px; }
    .about-split__media { order: -1; }

    .place-mosaic { grid-template-columns: 1fr 1fr; }

    .steps::before { display: none; }
    .steps { grid-template-columns: 1fr 1fr; gap: 36px; }

    .cta-banner { padding: 44px 28px; }
    .cta-banner__input { width: 100%; }
    .cta-banner__form { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }

    .footer__top { flex-direction: column; gap: 36px; }
    .footer__cols { gap: 28px; }
}

@media (max-width: 600px) {
    .steps { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .cta-banner { border-radius: var(--radius); }
    .place-mosaic { grid-template-columns: 1fr; }
    .place-mosaic__item:first-child { grid-column: auto; aspect-ratio: 16/9; }
    .place-mosaic__item:not(:first-child) { aspect-ratio: 16/9; }
    .faith-chips { gap: 8px; }
}
