/* ============================================================
   PROCLAMATE — style.css v4
   Aesthetic: Refined Liturgical Editorial
   Fonts: Playfair Display (headings) + DM Sans (body)
   ============================================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Core palette */
    --cream:        #F8F5EF;
    --cream-dark:   #F0EBE0;
    --parchment:    #EDE5D4;
    --white:        #FFFFFF;
    --ink:          #213f5f;
    --ink-soft:     #2c4f74;
    --ink-mid:      #4A453D;
    --ink-light:    #7A7368;
    --ink-faint:    #A89F93;

    /* Brand */
    --purple:       #3a64b2;
    --purple-deep:  #2b4a83;
    --purple-glow:  rgba(58, 100, 178, 0.08);
    --gold:         #B8922A;
    --gold-light:   #C9A84C;
    --gold-bg:      rgba(184,146,42,0.10);
    --gold-border:  rgba(184,146,42,0.30);

    /* Utility */
    --success:      #2D7A4F;
    --error:        #B83232;
    --border:       rgba(28,26,23,0.10);
    --border-mid:   rgba(28,26,23,0.16);

    /* Type */
    --serif:        'Playfair Display', Georgia, serif;
    --sans:         'DM Sans', system-ui, sans-serif;

    /* Spacing scale */
    --s1: 0.5rem;
    --s2: 1rem;
    --s3: 1.5rem;
    --s4: 2rem;
    --s5: 3rem;
    --s6: 5rem;

    /* Radius */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 32px;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--sans);
    background: var(--cream);
    color: var(--ink);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--s4);
}

img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }

/* ── Shared section typography ── */
.section-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.section-title.left { text-align: left; }

.section-title em {
    font-style: italic;
    color: var(--purple);
}

.section-sub {
    font-size: 1.05rem;
    color: var(--ink-light);
    margin-top: var(--s1);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.section-header {
    text-align: center;
    margin-bottom: var(--s5);
}

/* ── Skip link ──
   Off-screen until focused, then anchored top-left. Must stay reachable by
   keyboard, so it is moved rather than hidden with display:none — a hidden
   element is not focusable and the link would do nothing. */
.skip-link {
    position: absolute;
    top: -60px;
    left: 12px;
    z-index: 2000;
    padding: 10px 18px;
    background: var(--purple);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--r-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 12px;
    outline: 2px solid var(--gold-light);
    outline-offset: 2px;
}

/* ── Fade-in animation ── */
.fade-in {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ══════════════════════════════════════════
   SEASON BANNER
══════════════════════════════════════════ */
.season-banner {
    background: var(--purple-deep);
    color: rgba(255,255,255,0.92);
    padding: 9px 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.season-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--s4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.season-pip {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-light);
    flex-shrink: 0;
    animation: pip-pulse 2.4s ease-in-out infinite;
}

@keyframes pip-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}

.season-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    position: absolute;
    right: var(--s4);
    padding: 0 4px;
    transition: color 0.2s;
}
.season-close:hover { color: white; }

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(248, 245, 239, 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow 0.3s;
}

.navbar.scrolled {
    box-shadow: 0 2px 20px rgba(28,26,23,0.08);
}

.nav-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--s4);
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand { display: flex; align-items: center; gap: 10px; }

.nav-logo { height: 42px; width: auto; }

.nav-logo-fallback {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--purple);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--s4);
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-mid);
    transition: color 0.2s;
    position: relative;
}

.nav-links a:not(.nav-cta):hover { color: var(--ink); }

.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--purple);
    transition: width 0.25s ease;
}

.nav-links a:not(.nav-cta):hover::after { width: 100%; }

.nav-cta {
    background: var(--purple);
    color: white !important;
    padding: 8px 20px;
    border-radius: var(--r-md);
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: background 0.2s, transform 0.2s !important;
}

.nav-cta:hover {
    background: var(--purple-deep) !important;
    transform: translateY(-1px);
}

.nav-cta::after { display: none !important; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: all 0.3s;
}

/* ══════════════════════════════════════════
   BUTTONS (shared)
══════════════════════════════════════════ */
.btn-primary {
    display: inline-block;
    background: var(--purple);
    color: white;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(58,100,178,0.30);
    letter-spacing: -0.01em;
}

.btn-primary:hover {
    background: var(--purple-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(58,100,178,0.38);
}

.btn-ghost {
    display: inline-block;
    background: transparent;
    color: var(--ink-mid);
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 13px 24px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border-mid);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    letter-spacing: -0.01em;
}

.btn-ghost:hover {
    border-color: var(--purple);
    color: var(--purple);
    background: var(--purple-glow);
}

.btn-ghost-dark {
    display: inline-block;
    background: transparent;
    color: var(--gold-light);
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--gold-border);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: -0.01em;
}

.btn-ghost-dark:hover {
    background: var(--gold-bg);
    border-color: var(--gold-light);
}

.btn-waitlist {
    width: 100%;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 700;
    padding: 15px;
    border-radius: var(--r-md);
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    letter-spacing: -0.01em;
}

.btn-waitlist:hover {
    background: #a07820;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(184,146,42,0.38);
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero {
    position: relative;
    padding: var(--s6) 0 calc(var(--s6) * 1.1);
    overflow: hidden;
}

.hero-bg-texture {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 75% 50%, rgba(58,100,178,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(184,146,42,0.07) 0%, transparent 60%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--s6);
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--purple);
    background: var(--purple-glow);
    border: 1px solid rgba(58,100,178,0.15);
    padding: 6px 14px;
    border-radius: 999px;
    width: fit-content;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--purple);
    flex-shrink: 0;
}

.hero-title {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.hero-title em {
    font-style: italic;
    color: var(--purple);
}

.hero-sub {
    font-size: 1.05rem;
    color: var(--ink-mid);
    line-height: 1.75;
    max-width: 460px;
}

.hero-actions {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
}

.hero-tagline {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--gold);
    letter-spacing: 0.01em;
}

/* Browser shell */
.hero-visual {
    position: relative;
}

.browser-shell {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-mid);
    background: white;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.03),
        0 28px 70px rgba(28,26,23,0.14),
        0 8px 24px rgba(58,100,178,0.07);
}

.browser-chrome {
    background: #EDEAE3;
    border-bottom: 1px solid var(--border);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-r { background: #FF5F57; }
.dot-y { background: #FFBD2E; }
.dot-g { background: #28C840; }

.browser-address {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    color: var(--ink-light);
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 4px 12px;
    font-family: var(--sans);
}

/* No min-height here. It used to be 300px to reserve space while the
   screenshot loads, but the image is 1200x618 (1.94:1), so on a phone it
   renders ~168px tall inside a 300px box and leaves a 132px band of bare
   --cream-dark under it. The same bug showed on desktop as a ~32px sliver,
   small enough to pass unnoticed.
   The reservation now comes from the img's own width/height attributes, which
   give the browser the intrinsic ratio before the bytes arrive — correct at
   every width instead of one fixed guess. The fallback keeps its own
   min-height, since it has no intrinsic size to reserve from. */
.browser-viewport {
    width: 100%;
    background: var(--cream-dark);
}

.preview-screenshot {
    width: 100%;
    height: auto;
    display: block;
}

/* Fallback UI */
.fallback-ui {
    background: var(--cream-dark);
    min-height: 300px;
}

.fui-topbar {
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
    color: white;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fui-brand { font-family: var(--serif); font-weight: 600; font-size: 1rem; }

.fui-tabs { display: flex; gap: 18px; font-size: 0.8rem; }

.fui-tab { opacity: 0.6; }
.fui-tab.active { opacity: 1; font-weight: 600; border-bottom: 1.5px solid white; padding-bottom: 2px; }

.fui-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.fui-label { font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.fui-sub   { font-size: 0.75rem; color: var(--ink-light); }

.fui-card {
    background: white;
    border-radius: var(--r-sm);
    padding: 12px 14px;
    border-left: 3px solid var(--purple);
    font-size: 0.82rem;
}

.fui-card strong { display: block; margin-bottom: 3px; font-size: 0.84rem; }
.fui-card p      { color: var(--ink-light); margin: 0; }
.fui-card--gold  { border-left-color: var(--gold-light); }
.fui-card--alert { border-left-color: #D97706; }

/* Floating tag */
.hero-float-tag {
    position: absolute;
    bottom: -18px;
    left: -18px;
    background: white;
    border: 1px solid var(--border-mid);
    border-radius: var(--r-md);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--ink-mid);
    box-shadow: 0 6px 20px rgba(28,26,23,0.10);
    z-index: 2;
}

.float-icon { font-size: 1.1rem; }
.hero-float-tag strong { color: var(--ink); font-weight: 600; }

/* ══════════════════════════════════════════
   PAIN — Sound Familiar
══════════════════════════════════════════ */
.pain {
    padding: var(--s6) 0;
    background: var(--cream-dark);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.pain-header {
    text-align: center;
    margin-bottom: var(--s5);
}

.pain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
    max-width: 860px;
    margin: 0 auto;
}

.pain-grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px;
}

.pain-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s4) var(--s3);
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pain-card:hover {
    border-color: var(--purple);
    box-shadow: 0 6px 24px rgba(58,100,178,0.08);
}

.pain-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px; }

.pain-card p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.5;
}

.pain-resolve {
    text-align: center;
    margin-top: var(--s5);
    padding: var(--s4) var(--s5);
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
    border-radius: var(--r-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pain-resolve p {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-style: italic;
    color: white;
    line-height: 1.4;
}

/* ══════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════ */
.how {
    padding: var(--s6) 0;
    background: var(--cream);
}

.how-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
}

.how-step {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s4);
    display: flex;
    gap: var(--s3);
    transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}

.how-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(28,26,23,0.08);
    border-color: var(--purple);
}

.step-number {
    font-family: var(--serif);
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--parchment);
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    letter-spacing: -0.03em;
}

.step-body { display: flex; flex-direction: column; gap: var(--s1); }

.step-icon { font-size: 1.6rem; }

.step-body h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.step-body p {
    font-size: 0.9rem;
    color: var(--ink-light);
    line-height: 1.7;
}

/* ══════════════════════════════════════════
   WHY WE BUILT THIS
══════════════════════════════════════════ */
.why {
    padding: var(--s6) 0;
    background: var(--ink);
    color: white;
}

.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
    align-items: start;
}

.why-content {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.why-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.why-content .section-title {
    color: white;
}

.why-content .section-title em {
    color: var(--gold-light);
}

.why-content p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
}

.why-content p.why-resolve {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--gold-light);
    margin-top: 4px;
}

.why-stats {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.stat-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-md);
    padding: var(--s4);
    transition: background 0.2s, border-color 0.2s;
}

.stat-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
}

.stat-card--gold {
    background: var(--gold-bg);
    border-color: var(--gold-border);
}

.stat-num {
    font-family: var(--serif);
    font-size: 2rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.stat-card--gold .stat-num { color: var(--gold-light); }

.stat-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
    margin-top: 6px;
    line-height: 1.5;
}

.why-note {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: var(--s3);
}

.why-note p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.3);
    line-height: 1.6;
    font-style: italic;
}

/* ══════════════════════════════════════════
   DEMO VIDEOS
══════════════════════════════════════════ */
.demo {
    padding: var(--s6) 0;
    background: var(--cream-dark);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
}

.demo-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
}

.demo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(28,26,23,0.10);
}

.demo-frame {
    aspect-ratio: 16/9;
    background: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.demo-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(58,100,178,0.25) 0%, transparent 70%);
}

.demo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 1;
}

.play-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, transform 0.2s;
    cursor: default;
}

.demo-card:hover .play-ring {
    border-color: rgba(255,255,255,0.7);
    transform: scale(1.08);
}

.play-icon {
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    margin-left: 3px;
}

.demo-soon {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.demo-meta {
    padding: var(--s3) var(--s4);
}

.demo-meta h3 {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.demo-meta p {
    font-size: 0.87rem;
    color: var(--ink-light);
    line-height: 1.6;
}

.demo-notify {
    text-align: center;
    margin-top: var(--s4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    flex-wrap: wrap;
}

.demo-notify p {
    font-size: 0.95rem;
    color: var(--ink-mid);
}

/* ══════════════════════════════════════════
   PRICING CONTEXT
══════════════════════════════════════════ */
.pricing {
    padding: var(--s6) 0;
    background: var(--cream);
}

.pricing-context {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    align-items: stretch;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-tools {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.pricing-tool {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

/* Suppress the last row's hairline so it doesn't double up with the 2px
   border-top on .pricing-divider directly below it.
   NOT :last-of-type — every child here is a div, so that resolves to
   .pricing-divider (which has no .pricing-tool class) and quietly matches
   nothing, which is why the doubled line survived. :nth-last-child(2) is the
   Translation row, since the divider is always the final child; :last-child
   is a fallback for if the divider is ever removed. */
.pricing-tool:nth-last-child(2),
.pricing-tool:last-child { border-bottom: none; }

.tool-name { color: var(--ink-mid); }
.tool-cost { font-weight: 600; color: var(--ink); }

.pricing-divider {
    margin-top: auto;
    padding-top: var(--s2);
    border-top: 2px solid var(--border-mid);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    color: var(--ink-light);
}

.pricing-divider strong {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

/* justify-content: center puts the slack above the lockup as well as below it.
   The card stretches to match the taller tools column, and with the note pinned
   to the bottom by its auto margin all of that slack used to collect in one
   lump above the fine print — which read as an unfinished card rather than
   breathing room. */
/* space-between, not center: the three groups anchor to top / middle / bottom
   so the card's height is used rather than pooled in one gap. The three
   promise lines stay tight because they are one <p> with <br>s — flex gap
   never gets between them, only between the wordmark, the promise and the
   note.

   Deliberately NO min-height. A 640px floor was tried and removed: the grid
   stretches both columns to the taller one, and the tools column is only 606px
   naturally, so the floor forced *it* 34px past its content. That surplus went
   to .pricing-divider's margin-top:auto, opening a 50px gap above the 2px rule
   where the rows sit 16px apart — the rule looked misaligned on desktop while
   staying correct on mobile, where the card is content-sized and auto collapses
   to zero. Letting the grid match the columns keeps the rhythm even and needs
   no magic number. */
.pricing-proclamate {
    background: linear-gradient(150deg, var(--purple) 0%, var(--purple-deep) 100%);
    border-radius: var(--r-lg);
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s4);
    align-items: flex-start;
}

/* The gold wordmark replaces what used to be "Proclamate" set in Playfair
   inside a gold pill. The pill is gone with it — a wordmark boxed in a badge
   reads as a label rather than a signature. Gold on the card's blue is the
   one combination that works here: the blue wordmark would be ~1.1:1. */
/* The negative left margin is optical, not arithmetic. The script face carries
   left side bearing, so flushing the image box to the padding edge leaves the
   P visibly indented against the O of "One login" beneath it. Nudging the box
   left lines up the letterforms rather than the boxes.
   The old negative margin-bottom is gone — it pulled the promise up toward the
   wordmark, which fights the larger gap that space-between is now creating. */
.pricing-badge {
    display: block;
    width: 240px;
    max-width: 68%;
    height: auto;
    margin-left: -12px;
}

/* 960px is where .pricing-context drops to one column. Once the card is no
   longer sharing a row with the tools column it has no height to match, so the
   floor is released and the groups are spaced by an explicit gap instead of by
   distribution. */
@media (max-width: 960px) {
    .pricing-proclamate {
        justify-content: flex-start;
        gap: 40px;
    }

    .pricing-badge {
        width: 260px;
        max-width: 100%;
    }

    /* On its own line rather than trailing the sentence. At this width the
       call to action was starting mid-line and pushing its arrow onto the
       next one; breaking the whole phrase down keeps it intact and gives it
       the emphasis it deserves as the only action in the card. */
    .pricing-note a {
        display: block;
        margin-top: 12px;
    }
}

/* Scaled up from 1.7rem: this is the payoff line of the whole section and it
   was losing to the dense tools column beside it. clamp keeps it from
   overflowing the card once the columns stack on phones — the longest line,
   "One platform.", is the constraint. */
.pricing-value {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 600;
    color: white;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* No margin-top: auto. That auto margin absorbed every pixel of free space and
   pinned the note to the bottom, which defeated justify-content on the parent
   and left one large hole mid-card. Without it the three elements centre as a
   group and the slack splits evenly above and below. */
.pricing-note {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
}

/* nowrap keeps the arrow welded to "spot" — it is part of the phrase, and an
   arrow alone on a line reads as a rendering fault rather than a link. */
.pricing-note a {
    color: var(--gold-light);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.faq {
    padding: var(--s6) 0;
    background: var(--cream-dark);
    border-top: 1px solid var(--border);
}

.faq-list {
    max-width: 740px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-q {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    transition: color 0.2s;
}

.faq-q:hover { color: var(--purple); }

.faq-chevron {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--ink-faint);
    transition: transform 0.25s, color 0.2s;
    line-height: 1;
}

.faq-item.open .faq-chevron {
    transform: rotate(45deg);
    color: var(--purple);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.25s ease;
}

.faq-item.open .faq-a {
    max-height: 400px;
    padding-bottom: var(--s3);
}

.faq-a p {
    font-size: 0.93rem;
    color: var(--ink-mid);
    line-height: 1.8;
}

/* ══════════════════════════════════════════
   WAITLIST
══════════════════════════════════════════ */
.waitlist {
    position: relative;
    padding: var(--s6) 0;
    overflow: hidden;
}

.waitlist-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, var(--ink) 0%, var(--ink-soft) 100%);
}

.waitlist .container { position: relative; z-index: 1; }

.waitlist-inner {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.waitlist-ornament {
    display: block;
    font-size: 1.8rem;
    color: var(--gold-light);
    margin-bottom: var(--s2);
    opacity: 0.8;
}

.waitlist-title {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 600;
    color: white;
    letter-spacing: -0.03em;
    margin-bottom: var(--s2);
}

.waitlist-sub {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: var(--s4);
    line-height: 1.7;
}

.waitlist-form {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    text-align: left;
    margin-bottom: var(--s3);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

.optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
}

.form-field input,
.form-field select {
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: 0.93rem;
    font-family: var(--sans);
    color: white;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
}

.form-field select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.form-field input:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--gold-light);
    background: rgba(255,255,255,0.11);
}

.form-field input::placeholder { color: rgba(255,255,255,0.25); }
.form-field select option { background: var(--ink-soft); color: white; }

.waitlist-note {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.35);
    text-align: center;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer {
    background: #152a40;
    color: white;
    padding: var(--s5) 0 var(--s4);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
    padding-bottom: var(--s4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: var(--s3);
}

.footer-col { display: flex; flex-direction: column; gap: 10px; }

.footer-col h3 {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 4px;
}

.footer-col a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.5);
    transition: color 0.2s;
}

.footer-col a:hover { color: rgba(255,255,255,0.9); }

.footer-col p { font-size: 0.88rem; color: rgba(255,255,255,0.5); }

.footer-small {
    font-size: 0.78rem !important;
    color: rgba(255,255,255,0.5) !important;
    margin-top: 0;
}

/* Centred column: Boston lines, small signature wordmark, tagline, copyright. */
.footer-base {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s2);
}

/* The blue statement wordmark (with the gold period), chosen over the gold
   one. Note it is ~2.3:1 on this navy and this is a deliberately small mark,
   so it reads as a faint signature rather than a legible logo. */
.footer-signature {
    display: block;
    width: 145px;
    height: auto;
}

/* Desktop: Boston lines left, signature centred, tagline right, copyright on
   its own line beneath. Mobile keeps the single centred stack above. */
@media (min-width: 768px) {
    .footer-base {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: var(--s4);
        row-gap: var(--s3);
        text-align: center;
    }

    .footer-base .footer-small { text-align: left;  margin: 0; justify-self: start; }
    .footer-base .footer-sub   { text-align: right; margin: 0; justify-self: end; }
    .footer-base .footer-copy  { grid-column: 1 / -1; }

    /* Slightly larger once it sits in the centre column with room around it;
       145px stays the mobile size, where the stack is tighter. */
    .footer-signature { width: 175px; }
}

/* 0.2 alpha put these under 2:1 on the navy — present in the markup but not
   actually readable. 0.5 is still plainly secondary and stays quieter than
   the link columns above, while clearing 4.5:1 at this size. */
.footer-base p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
}

.footer-sub { letter-spacing: 0.04em; }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#toastContainer {
    position: fixed;
    bottom: var(--s4);
    right: var(--s4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--ink);
    color: white;
    padding: 12px 20px;
    border-radius: var(--r-md);
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    animation: toast-in 0.3s ease;
    border-left: 3px solid var(--success);
}

.toast.error { border-left-color: var(--error); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 960px) {
    .hero-grid     { grid-template-columns: 1fr; }
    .hero-visual   { order: -1; }
    .hero-float-tag { left: 0; }
    .why-grid      { grid-template-columns: 1fr; }
    .pricing-context { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    :root { --s6: 3.5rem; }

    .nav-toggle { display: flex; }

    .nav-links {
        display: none;
        position: absolute;
        top: 62px;
        left: 0;
        right: 0;
        background: rgba(248,245,239,0.98);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        padding: var(--s3) var(--s4);
        gap: var(--s2);
        box-shadow: 0 8px 24px rgba(28,26,23,0.08);
        backdrop-filter: blur(14px);
    }

    .nav-links.open { display: flex; }

    .nav-cta { text-align: center; }

    .hero-actions { flex-direction: column; }
    .hero-actions .btn-primary,
    .hero-actions .btn-ghost { width: 100%; text-align: center; }

    .pain-grid  { grid-template-columns: 1fr; }
    .how-steps  { grid-template-columns: 1fr; }
    .demo-grid  { grid-template-columns: 1fr; }
    .form-row   { grid-template-columns: 1fr; }

    .footer-links { grid-template-columns: 1fr 1fr; }
    .footer-base  { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .container { padding: 0 var(--s3); }
    .hero-float-tag { display: none; }
    .footer-links { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════
   SHARED — section eyebrow & light variants
══════════════════════════════════════════ */
.section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: var(--s2);
}

.section-eyebrow--gold { color: var(--gold-light); }

.section-title--light { color: white; }
.section-title--light em { color: var(--gold-light); }

.section-sub--light { color: rgba(255,255,255,0.6); }

.section-header--dark { text-align: center; margin-bottom: var(--s5); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════
   HERO TRUST LINE
══════════════════════════════════════════ */
.hero-trust {
    margin-top: calc(var(--s6) * 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    padding: var(--s3) var(--s4);
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    backdrop-filter: blur(6px);
}

.hero-trust p {
    font-size: 0.92rem;
    color: var(--ink-mid);
    line-height: 1.6;
    margin: 0;
}

.hero-trust p strong {
    color: var(--ink);
    font-weight: 600;
}

/* ══════════════════════════════════════════
   CORE FOUR
══════════════════════════════════════════ */
.core-four {
    padding: var(--s6) 0;
    background: var(--cream);
    position: relative;
}

.core-four .section-header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.core-four-grid {
    display: grid;
    grid-template-columns: 0.9fr 1fr 1.2fr 0.9fr;
    gap: var(--s3);
    align-items: end;
    max-width: 1080px;
    margin: 0 auto;
}

.core-format {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.format-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.format-name {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.format-use {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ink-light);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.format-canvas {
    background: linear-gradient(155deg, #1f3a63 0%, var(--purple-deep) 55%, #16294a 100%);
    color: white;
    border-radius: var(--r-md);
    padding: var(--s3) var(--s2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 14px 34px rgba(28,26,23,0.14);
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

.format-canvas::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 10%, rgba(201,168,76,0.18) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(58,100,178,0.35) 0%, transparent 60%);
    pointer-events: none;
}

.core-format:hover .format-canvas {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 22px 46px rgba(28,26,23,0.2);
}

.format-canvas--portrait { aspect-ratio: 3/4; }
.format-canvas--square   { aspect-ratio: 1/1; }
.format-canvas--landscape { aspect-ratio: 16/9; align-items: stretch; justify-content: stretch; padding: var(--s3); }
.format-canvas--story    { aspect-ratio: 9/16; }

/* Canvas content */
.fc-ornament {
    font-size: 1.2rem;
    color: var(--gold-light);
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

.fc-season {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.55);
    position: relative;
    z-index: 1;
}

.fc-season--sq { font-size: 0.65rem; }
.fc-season--st { font-size: 0.6rem; }

.fc-headline {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: white;
    position: relative;
    z-index: 1;
}

.fc-headline--sq { font-size: 1.7rem; }
.fc-headline--ls { font-size: 1.55rem; text-align: left; }
.fc-headline--st { font-size: 1.5rem; }

.fc-meta {
    font-size: 0.62rem;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

.fc-meta--st { font-size: 0.68rem; margin-top: auto; }

/* Landscape-specific layout */
.fc-lshape {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: var(--s2);
    position: relative;
    z-index: 1;
}

.fc-lleft {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}

.fc-lright {
    text-align: right;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: var(--s2);
}

.core-four-footer {
    max-width: 720px;
    margin: var(--s5) auto 0;
    text-align: center;
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--border);
}

.core-four-footer p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--ink-mid);
    line-height: 1.7;
}

/* ══════════════════════════════════════════
   CULTURAL FLUENCY
══════════════════════════════════════════ */
.fluency {
    padding: var(--s6) 0;
    background: var(--cream-dark);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.fluency .section-header {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.fluency-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s4);
    max-width: 960px;
    margin: 0 auto;
}

.fluency-card {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.fluency-flag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--purple);
    background: var(--purple-glow);
    border: 1px solid rgba(58,100,178,0.15);
    padding: 6px 12px;
    border-radius: 999px;
    width: fit-content;
}

.fluency-flag--es {
    color: var(--gold);
    background: var(--gold-bg);
    border-color: var(--gold-border);
}

.fluency-canvas {
    aspect-ratio: 4/5;
    border-radius: var(--r-md);
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        0 14px 34px rgba(28,26,23,0.12);
}

.fluency-canvas--en {
    background: #F4F0E6;
    color: var(--ink);
    border: 1px solid rgba(28,26,23,0.06);
    justify-content: flex-end;
}

/* Guadalupe — Marian blue with gold rays, after her actual iconography
   (blue mantle, gold stars) rather than generic seasonal colour. */
.fluency-canvas--es {
    background: linear-gradient(160deg, #23838f 0%, #1b6b75 45%, #124953 100%);
    color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.fluency-eyebrow {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ink-light);
    position: relative;
    z-index: 1;
}

/* Guadalupe's counterpart to the music notes, in the same 40px slot.
   Four eight-pointed stars at varied size (9-13.5), height (14-29 of 40)
   and spacing (30/36/34) — a constellation, after the stars on the tilma's
   mantle. Uniform size on a level baseline would read as a flag, which is
   exactly what this must not look like. Four, not more: it has to carry the
   same visual weight as the notes opposite, and the full-bleed scatter it
   replaces read as maximalist beside them and collided with the text on
   phones. */
.fluency-canvas--es::before {
    width: 132px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 40' fill='%23C9A84C'%3E%3Cpolygon points='17.6,17.1 18.0,22.8 23.4,20.8 19.7,25.2 24.9,27.6 19.2,28.0 21.2,33.4 16.8,29.7 14.4,34.9 14.0,29.2 8.6,31.2 12.3,26.8 7.1,24.4 12.8,24.0 10.8,18.6 15.2,22.3'/%3E%3Cpolygon points='44.1,0.6 47.4,8.5 54.1,3.2 50.9,11.1 59.4,12.1 51.5,15.4 56.8,22.1 48.9,18.9 47.9,27.4 44.6,19.5 37.9,24.8 41.1,16.9 32.6,15.9 40.5,12.6 35.2,5.9 43.1,9.1'/%3E%3Cpolygon points='84.9,20.0 84.6,26.0 90.5,24.7 86.0,28.7 91.0,31.9 85.0,31.6 86.3,37.5 82.3,33.0 79.1,38.0 79.4,32.0 73.5,33.3 78.0,29.3 73.0,26.1 79.0,26.4 77.7,20.5 81.7,25.0'/%3E%3Cpolygon points='115.2,4.5 117.5,11.4 123.5,7.3 120.3,13.8 127.5,15.2 120.6,17.5 124.7,23.5 118.2,20.3 116.8,27.5 114.5,20.6 108.5,24.7 111.7,18.2 104.5,16.8 111.4,14.5 107.3,8.5 113.8,11.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
    pointer-events: none;
}

/* Cream, not gold. Gold #C9A84C on Marian blue is only 2.52:1 — both are
   mid-luminance, so gold type on this background is genuinely hard to read
   (it worked on the old dark red, which was much darker). Gold is kept for
   the rays and the rule below, where it is decorative rather than read. */
.fluency-eyebrow--es {
    color: #f8f4e8;
}

.fluency-title {
    font-family: var(--serif);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    position: relative;
    z-index: 1;
}

.fluency-title--es {
    color: white;
    font-size: 1.8rem;
}

.fluency-date {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink-mid);
    position: relative;
    z-index: 1;
}

.fluency-date--es {
    color: #f8f4e8;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
}

/* align-self: stretch so the rule spans the card's full content width in both
   cards. The parent centres its children, which sizes each note to its own
   longest line — so the two rules were drawn at different lengths (218px vs
   174px) as well as different heights. The rule is this element's border-top,
   so its width is the note's width. */
.fluency-note {
    margin-top: auto;
    align-self: stretch;
    font-size: 0.78rem;
    /* 2.1, not 1.5. Each <br> is a separate event, and at prose line-height
       the two or three of them read as one centred paragraph. The extra leading
       is what makes them read as a list. Keep min-height below in step with
       this value: 3 lines x 2.1 = 6.3em. */
    line-height: 2.1;
    color: var(--ink-light);
    border-top: 1px solid rgba(28,26,23,0.08);
    padding-top: 10px;
    position: relative;
    z-index: 1;
}

/* The Spanish note runs to three lines and the English to two, so their
   heights diverge — and because each card centres its own stack, that pulled
   the two rules 8px out of line. Reserving three lines on both keeps the rules
   level. Scoped to the side-by-side layout: below 961px the cards stack, there
   is nothing to align against, and the reservation would only add dead space
   under the English note.
   4.5em = 3 lines at line-height 1.5, +11px for padding-top and the border
   (box-sizing is border-box). Expressed in em so it tracks the font-size. */
@media (min-width: 961px) {
    .fluency-note { min-height: calc(6.3em + 11px); }
}

.fluency-note--es {
    color: rgba(255,255,255,0.9);
    border-top-color: rgba(201,168,76,0.4);
    margin-top: var(--s2);
    font-weight: 500;
}

.fluency-caption {
    font-size: 0.85rem;
    color: var(--ink-light);
    line-height: 1.6;
    padding: 0 4px;
}

.fluency-footnote {
    max-width: 760px;
    margin: var(--s5) auto 0;
    text-align: center;
    padding: var(--s3) var(--s4);
}

.fluency-footnote p {
    font-size: 0.95rem;
    color: var(--ink-mid);
    line-height: 1.7;
}

.fluency-footnote strong { color: var(--ink); font-weight: 600; }

/* ══════════════════════════════════════════
   AI — Intelligent Automation
══════════════════════════════════════════ */
.ai {
    padding: var(--s6) 0;
    background:
        radial-gradient(ellipse 60% 40% at 85% 10%, rgba(58,100,178,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 10% 90%, rgba(184,146,42,0.12) 0%, transparent 60%),
        var(--ink);
    color: white;
}

.ai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
    max-width: 1080px;
    margin: 0 auto;
}

.ai-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--r-md);
    padding: var(--s4) var(--s3);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.ai-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(201,168,76,0.35);
    transform: translateY(-3px);
}

.ai-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.ai-card h3 {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.01em;
}

.ai-card p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.65;
}

.ai-principle {
    max-width: 820px;
    margin: var(--s5) auto 0;
    padding: var(--s4) var(--s5);
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    border-radius: var(--r-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
}

.ai-principle p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.78);
}

.ai-principle p strong {
    color: var(--gold-light);
    font-weight: 600;
}

/* ══════════════════════════════════════════
   DEMO — single full card variant
══════════════════════════════════════════ */
.demo-single {
    max-width: 760px;
    margin: 0 auto;
}

.demo-card--full .demo-frame {
    aspect-ratio: 16/9;
}

.demo-card--full .demo-meta {
    padding: var(--s4);
}

.demo-card--full .demo-meta h3 {
    font-size: 1.25rem;
}

.demo-card--full .demo-meta p {
    font-size: 0.92rem;
    line-height: 1.7;
}

/* ══════════════════════════════════════════
   FOUNDER
══════════════════════════════════════════ */
.founder {
    padding: var(--s6) 0;
    background: var(--cream);
}

.founder-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--s6);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}

.founder-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
}

.founder-portrait-inner {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(201,168,76,0.25) 0%, transparent 60%),
        linear-gradient(150deg, var(--purple) 0%, var(--purple-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 0 0 6px var(--cream),
        0 0 0 7px var(--border-mid),
        0 20px 50px rgba(58,100,178,0.22);
}

.founder-initials {
    font-family: var(--serif);
    font-size: 4rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1;
}

.founder-ornament {
    position: absolute;
    bottom: 14px;
    right: 30px;
    font-size: 1.5rem;
    color: var(--gold-light);
    opacity: 0.9;
}

.founder-caption {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-top: var(--s1);
}

.founder-caption span {
    display: block;
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 500;
    font-style: normal;
    color: var(--ink-light);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 4px;
}

.founder-content {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.founder-content p {
    font-size: 0.98rem;
    color: var(--ink-mid);
    line-height: 1.8;
}

.founder-content p strong { color: var(--ink); font-weight: 600; }

/* A signature statement, not a pull-quote: no rule, no card, no background,
   and larger than the testimonials that follow so the founder's own voice
   reads as distinct from the external ones. clamp covers the 20px mobile /
   ~27px desktop range. !important because .founder-content p sets font-size,
   colour and line-height on every paragraph in this column. */
.founder-quote {
    margin: var(--s5) 0 0;
    font-family: var(--serif) !important;
    font-style: italic;
    font-size: clamp(1.25rem, 2.2vw, 1.72rem) !important;
    color: var(--ink) !important;
    line-height: 1.4 !important;
}

/* Right-aligned and tight to the quote so it reads as signing off the
   statement. Flush-left at a paragraph's distance it read as a new paragraph
   instead — same serif as the quote, upright against its italic. */
.founder-content .founder-quote-attr {
    margin: 4px 0 var(--s5);
    text-align: right;
    font-family: var(--serif);
    font-style: normal;
    font-size: 0.95rem;
    color: var(--ink-mid);
    letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════
   WAITLIST — inline/simple variant
══════════════════════════════════════════ */
.waitlist-form--simple {
    margin-bottom: var(--s2);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.form-field--inline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: stretch;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: var(--r-md);
    padding: 6px;
    transition: border-color 0.2s, background 0.2s;
}

.form-field--inline:focus-within {
    border-color: var(--gold-light);
    background: rgba(255,255,255,0.08);
}

.form-field--inline input {
    background: transparent !important;
    border: none !important;
    padding: 10px 12px !important;
    font-size: 0.98rem !important;
    color: white !important;
}

.form-field--inline input:focus {
    outline: none;
    background: transparent !important;
    border: none !important;
}

.btn-waitlist--inline {
    width: auto !important;
    padding: 10px 20px !important;
    font-size: 0.92rem !important;
    border-radius: calc(var(--r-md) - 4px) !important;
    white-space: nowrap;
}

/* ══════════════════════════════════════════
   RESPONSIVE — additions for new sections
══════════════════════════════════════════ */
@media (max-width: 960px) {
    .core-four-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s4);
    }

    .fluency-compare {
        grid-template-columns: 1fr;
        max-width: 460px;
    }

    .ai-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .founder-grid {
        grid-template-columns: 1fr;
        gap: var(--s5);
        text-align: center;
    }

    .founder-content .section-title.left {
        text-align: center;
    }

    .founder-quote {
        text-align: left;
        max-width: 540px;
        margin: var(--s4) auto 0;
    }

    /* width: 100% matters — .founder-content is a flex column, and auto side
       margins make a flex item shrink-wrap rather than stretch, which centred
       an 89px box and left text-align: right with nothing to align to. */
    .founder-content .founder-quote-attr {
        text-align: right;
        width: 100%;
        max-width: 540px;
        margin: 4px auto var(--s4);
    }
}

@media (max-width: 768px) {
    .pain-grid--three { grid-template-columns: 1fr; }

    .core-four-grid { grid-template-columns: 1fr; max-width: 380px; }

    .ai-grid { grid-template-columns: 1fr; }

    .hero-trust {
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin-top: var(--s5);
    }

    .ai-principle { flex-direction: column; gap: var(--s2); text-align: left; }

    .founder-portrait-inner { width: 200px; height: 200px; }
    .founder-initials { font-size: 3rem; }

    .form-field--inline {
        grid-template-columns: 1fr;
        gap: 6px;
        background: transparent;
        border: none;
        padding: 0;
    }

    .form-field--inline input {
        background: rgba(255,255,255,0.07) !important;
        border: 1.5px solid rgba(255,255,255,0.12) !important;
        border-radius: var(--r-md) !important;
        padding: 12px 14px !important;
    }

    .form-field--inline input:focus {
        border-color: var(--gold-light) !important;
        background: rgba(255,255,255,0.11) !important;
    }

    .btn-waitlist--inline {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1rem !important;
        border-radius: var(--r-md) !important;
    }
}

@media (max-width: 480px) {
    .core-four-grid { max-width: 320px; }
}

/* ══════════════════════════════════════════
   WAITLIST SUCCESS STATE
══════════════════════════════════════════ */
.waitlist-success {
    text-align: center;
    padding: var(--s5) var(--s3);
    max-width: 440px;
    margin: 0 auto;
}

.waitlist-success-mark {
    font-size: 2rem;
    color: var(--gold-light);
    margin-bottom: var(--s2);
    line-height: 1;
}

.waitlist-success h3 {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
    margin-bottom: var(--s2);
}

.waitlist-success p {
    color: rgba(255,255,255,0.6);
    font-size: 0.95rem;
    line-height: 1.7;
}
/* ══════════════════════════════════════════
   DEMO — live demo card
══════════════════════════════════════════ */
.demo-live-link { display: block; }

.demo-frame--live {
    aspect-ratio: auto;
    background: var(--ink-soft);
    display: block;
    position: relative;
}

.demo-frame--live::before { display: none; }

.demo-live-img {
    width: 100%;
    display: block;
}

.demo-live-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to top, rgba(15,14,12,0.5) 0%, rgba(15,14,12,0.12) 45%, rgba(15,14,12,0.05) 100%);
    transition: background 0.25s;
}

.demo-card:hover .demo-live-overlay {
    background: linear-gradient(to top, rgba(15,14,12,0.6) 0%, rgba(15,14,12,0.2) 45%, rgba(15,14,12,0.08) 100%);
}

.demo-live-btn {
    background: var(--purple);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 13px 28px;
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(15,14,12,0.35);
    transition: background 0.2s, transform 0.2s;
}

.demo-card:hover .demo-live-btn {
    background: var(--purple-deep);
    transform: scale(1.04);
}

.demo-meta-link {
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.faq-a a {
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hero screenshot link */
.browser-viewport a { display: block; }

/* Logos — nav and footer both use the real transparent PNG.
   The footer used to rebuild the lockup by hand: an inline SVG mark plus the
   word "Proclamate" set in Playfair. That was wrong — the actual wordmark is
   a script face, so the hand-built version was an imitation of the logo, not
   the logo. Don't reintroduce it; use Assets/logo.png. */

/* ══════════════════════════════════════════
   LINE-ART ICONS (replace emoji)
══════════════════════════════════════════ */
.pain-icon svg,
.step-icon svg,
.ai-icon svg,
.float-icon svg { display: block; }

.pain-icon svg  { width: 26px; height: 26px; color: var(--purple); }
.step-icon svg  { width: 28px; height: 28px; color: var(--purple); }
.ai-icon svg    { width: 26px; height: 26px; color: var(--gold-light); }
.float-icon svg { width: 18px; height: 18px; color: var(--purple); }

/* The demo section sits on a light background — use the
   standard ghost button there, gold reads too faint on cream */
.demo-notify .btn-ghost-dark {
    color: var(--purple);
    border-color: rgba(58,100,178,0.35);
}
.demo-notify .btn-ghost-dark:hover {
    background: var(--purple-glow);
    border-color: var(--purple);
}

/* ══════════════════════════════════════════
   INSIDE THE PLATFORM — module tour
══════════════════════════════════════════ */
.platform {
    padding: var(--s6) 0;
    background: var(--cream);
    position: relative;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
    max-width: 1080px;
    margin: 0 auto;
}

.module-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--s3);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}

.module-card:hover {
    border-color: var(--purple);
    box-shadow: 0 10px 30px rgba(58,100,178,0.09);
    transform: translateY(-3px);
}

.module-tag {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    background: var(--gold-bg);
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    padding: 3px 10px;
    width: fit-content;
}

.module-name {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.module-card p {
    font-size: 0.85rem;
    color: var(--ink-light);
    line-height: 1.65;
}

.platform-footer {
    max-width: 720px;
    margin: var(--s5) auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    padding-top: var(--s4);
    border-top: 1px solid var(--border);
}

.platform-footer p {
    font-size: 0.98rem;
    color: var(--ink-mid);
    line-height: 1.7;
}

.platform-footer p strong { color: var(--ink); }

@media (max-width: 960px) {
    .module-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .module-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* EN fluency card — a treatment as crafted as the ES card:
   candlelit Advent evening rather than plain paper, so neither
   stream reads as the "lesser" one. Evergreen + candlelight cream,
   set against Guadalupe's Marian blue so the two streams read as
   distinct seasons rather than variations on one palette.
   Centred to match the ES card — the two are a set. */
.fluency-canvas--en {
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(244,228,184,0.20) 0%, transparent 62%),
        linear-gradient(165deg, #245a44 0%, #1e4d3a 45%, #16382a 100%);
    color: white;
    border: none;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Shared ornament slot, reserved on BOTH cards even though only the English
   one paints anything into it.

   Each card centres its own content, so any difference in content height moves
   every horizontal element inside it — including the thin rule above the note.
   The music notes are 46px of flow that Guadalupe has no counterpart for (its
   stars are an absolutely-positioned background), which pushed the English
   card's rule 27px below its neighbour's. Reserving the slot on the base class
   equalises the two stacks, so the rules land level.

   The notes are a flex item rather than absolutely positioned: they were once
   pinned at top: 21% while the text was centred — two independent systems, so
   on a narrow phone (taller card, title wrapping) the 21% mark drifted onto
   the eyebrow and the notes sat on the text. In the flow that cannot recur. */
.fluency-canvas::before {
    content: '';
    flex-shrink: 0;
    margin-bottom: 6px;
    height: 40px;
}

.fluency-canvas--en::before {
    width: 132px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 40' fill='none' stroke='%23f4e4b8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 31 V9'/%3E%3Cpath d='M40 27 V5'/%3E%3Cpath d='M14 9 L40 5'/%3E%3Cpath d='M14 13 L40 9'/%3E%3Cellipse cx='9' cy='31' rx='6.2' ry='4.6' transform='rotate(-20 9 31)' fill='%23f4e4b8' stroke='none'/%3E%3Cellipse cx='35' cy='27' rx='6.2' ry='4.6' transform='rotate(-20 35 27)' fill='%23f4e4b8' stroke='none'/%3E%3Cpath d='M89 32 V8'/%3E%3Cpath d='M89 8 c9 2 13 7 11 14'/%3E%3Cellipse cx='84' cy='32' rx='6.2' ry='4.6' transform='rotate(-20 84 32)' fill='%23f4e4b8' stroke='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.72;
    pointer-events: none;
}

.fluency-canvas--en .fluency-note { margin-top: var(--s2); }

/* Desktop-only breathing room. These cards are aspect-ratio 4/5, so the card
   is 580px tall beside the tools column but only 409px on a phone. At the
   compact rhythm the desktop stack filled just 49% of the card and read as
   crammed between two large voids; at the generous rhythm the phone stack
   overflows its 345px of inner height (352px) and gets clipped by the
   canvas's overflow: hidden. So the spacing opens up only where there is room
   for it. 961px is where the two cards stop sharing a row.
   Hierarchy, not uniformity: eyebrow -> title stays the tightest pair because
   they read as one unit; the ornament and the note sit further off. */
@media (min-width: 961px) {
    .fluency-canvas { gap: 12px; }
    .fluency-canvas::before { margin-bottom: 14px; }
    .fluency-date { margin-top: 4px; }
    .fluency-note--es,
    .fluency-canvas--en .fluency-note { margin-top: 20px; }
}

.fluency-canvas--en .fluency-eyebrow { color: #f4e4b8; }

.fluency-canvas--en .fluency-title { color: white; }

.fluency-canvas--en .fluency-date {
    color: #f4e4b8;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
}

.fluency-canvas--en .fluency-note {
    color: rgba(255,255,255,0.9);
    border-top-color: rgba(244,228,184,0.3);
    font-weight: 500;
}

/* ══════════════════════════════════════════
   FOUNDER PHOTO
══════════════════════════════════════════ */
.founder-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ══════════════════════════════════════════
   TESTIMONIAL — pastor endorsement
══════════════════════════════════════════ */
.testimonial {
    padding: var(--s6) 0;
    background: var(--parchment);
    border-top: 1px solid var(--gold-border);
    border-bottom: 1px solid var(--gold-border);
}

.testimonial-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.testimonial-mark {
    display: block;
    font-size: 1.6rem;
    color: var(--gold);
    margin-bottom: var(--s3);
}

.testimonial-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 2.2vw, 1.45rem);
    font-weight: 500;
    color: var(--ink-soft);
    line-height: 1.65;
    letter-spacing: -0.01em;
    margin-bottom: var(--s4);
}

.testimonial-attr {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.testimonial-role {
    font-size: 0.85rem;
    color: var(--ink-light);
    margin-top: 2px;
}

/* Hero: the live demo is the strongest conversion tool —
   give its button more visual weight than the waitlist CTA */
.hero-actions .btn-primary {
    font-size: 1.02rem;
    padding: 16px 34px;
}

/* Secondary testimonial cards — grid grows gracefully as more
   quotes arrive (archdiocese director slot is ready in the HTML) */
.testimonial-grid {
    margin-top: var(--s5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 460px));
    justify-content: center;
    gap: var(--s3);
}

/* Flex column so the attribution can be pinned to the bottom. Grid already
   stretches sibling cards to equal height, but without this the shorter quote
   leaves its dead space *below* the name, which reads as a stranded card. */
.testimonial-card {
    background: rgba(255,255,255,0.75);
    border: 1px solid var(--gold-border);
    border-radius: var(--r-lg);
    padding: var(--s4);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.tc-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.02rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: var(--s3);
}

/* margin-top: auto collects the slack above the name, so attributions line up
   along the bottom of both cards regardless of quote length. */
.tc-attr {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: auto;
}

.tc-role {
    font-size: 0.8rem;
    color: var(--ink-light);
    margin-top: 2px;
}

/* Founder LinkedIn link */
.founder-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    /* Navy at rest, Marian blue on hover — deliberately not LinkedIn's own
       brand blue. The glyph is fill="currentColor", so icon and label shift
       together without a separate rule. */
    color: var(--ink);
    background: var(--purple-glow);
    border: 1px solid rgba(58,100,178,0.18);
    padding: 6px 14px;
    border-radius: 999px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.founder-linkedin:hover {
    background: rgba(58,100,178,0.18);
    border-color: var(--purple);
    color: var(--purple);
}

.founder-linkedin svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Pricing rows — function name above, how-parishes-cope below,
   so longer descriptions breathe instead of fighting a flex row */
.pricing-tool {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.pricing-tool .tool-name {
    font-weight: 600;
    color: var(--ink);
}

.pricing-tool .tool-cost {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--ink-light);
    line-height: 1.55;
}

/* "Your ministry, your voice, always." — its own line, as a refrain */
.sub-refrain {
    display: block;
    margin-top: 10px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gold-light);
}

/* ══════════════════════════════════════════
   LEGAL PAGES (privacy policy)
══════════════════════════════════════════ */
.legal {
    padding: var(--s6) 0;
    background: var(--cream);
    min-height: 70vh;
}

.legal-inner {
    max-width: 720px;
    margin: 0 auto;
}

.legal-title {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 3.5vw, 2.6rem);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 6px;
}

.legal-updated {
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-bottom: var(--s4);
}

.legal-inner h2 {
    font-family: var(--serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-top: var(--s4);
    margin-bottom: var(--s1);
}

.legal-inner p,
.legal-inner li {
    font-size: 0.95rem;
    color: var(--ink-mid);
    line-height: 1.75;
    margin-bottom: var(--s2);
}

.legal-inner ul {
    padding-left: 1.3rem;
    margin-bottom: var(--s2);
}

.legal-inner li { margin-bottom: 6px; }

.legal-inner a {
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-back {
    margin-top: var(--s5);
    padding-top: var(--s3);
    border-top: 1px solid var(--border);
}

/* Waitlist privacy link on the dark background */
.waitlist-note a {
    color: rgba(255,255,255,0.55);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hero brandline — the tagline, plain and clean (no pill) */
.hero-brandline {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--purple);
}

/* How-it-works coda — "Sacred tradition, modern communication." */
.how-coda {
    margin-top: var(--s5);
    text-align: center;
}

/* Inline separator, not a block above the line — the ornament now does the
   work the comma used to, which also gives it a job rather than sitting
   decoratively on its own row. */
.how-coda-mark {
    color: var(--gold-light);
    font-size: 0.95em;
    padding: 0 0.45em;
}

.how-coda p {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--gold);
    letter-spacing: 0.01em;
}

/* ══════════════════════════════════════════
   REDUCED MOTION
   Honour the visitor's OS setting. The fade-ins are set to their finished
   state rather than merely un-animated: script.js adds .visible on scroll,
   so simply killing the transition would leave content stuck at opacity 0
   for anyone whose observer had not fired yet.
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }
}