/*
Theme Name: Raleigh Christian Singles
Description: Hand-coded theme for Raleigh Christian Singles. Header/footer authored once, per-page templates, token-based design system. Ported from the Claude Design "RCS Funnel Landing - Final".
Version: 1.0
Author: Snazzy Solutions
*/

/* =========================================================================
   DESIGN SYSTEM — every value the site uses lives here.
   Source: Brand Kit "Direction 01 — Warm & Gathered" + RCS Funnel Landing.
   Templates compose .rcs-* classes; they never carry their own <style>.
   ========================================================================= */
:root {
    /* Surfaces */
    --c-cream:      #F6F1E7;   /* page background */
    --c-card:       #FFFDF6;   /* raised cards */
    --c-dark:       #1B1613;   /* dark bands + footer */

    /* Ink */
    --c-ink:        #1B1613;
    --c-ink-soft:   #5E544A;   /* body copy */
    --c-muted:      #93867A;   /* attributions, meta */
    --c-line:       #D8CDBB;   /* hairline rules on cream */

    /* Ink on dark */
    --c-dark-body:  #BBAE9E;
    --c-dark-line:  #372E27;
    --c-dark-field: #57493E;
    --c-dark-label: #8A7D6F;
    --c-dark-brand: #D6CCBE;

    /* Accents */
    --c-terra:      #C65D3B;   /* primary */
    --c-terra-lt:   #D98E6A;   /* primary on dark */
    --c-terra-dk:   #A34B2E;   /* chip text */
    --c-terra-pale: #F3C8A6;   /* verse band caption */
    --c-verse-ink:  #FBF3E7;
    --c-sage:       #6F7F5E;
    --c-sage-dk:    #4E5A41;
    --c-ochre:      #C98A2E;
    --c-ochre-dk:   #8A5A2B;

    /* Type */
    --font-head: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --wrap:      1140px;
    --wrap-mid:  900px;
    --wrap-tight:800px;
    --pad-x:     48px;
    --header-h:  76px;
    --shadow-card:  0 18px 44px -24px rgba(27, 22, 19, .25);
    --shadow-photo: 0 18px 44px -22px rgba(27, 22, 19, .28);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-ink);
    background: var(--c-cream);
    overflow-x: clip;              /* clip, NOT hidden — hidden kills sticky + iOS momentum */
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--c-ink); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--c-terra); }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 500;
    line-height: 1.1;
    color: var(--c-ink);
    margin: 0 0 .5em;
}

::selection { background: var(--c-terra); color: var(--c-cream); }

:focus-visible { outline: 2px solid var(--c-terra); outline-offset: 3px; }

/* anchor targets clear the sticky header */
section[id], [id].rcs-anchor { scroll-margin-top: calc(var(--header-h) + 8px); }

/* ---- layout primitives ----
   NOTE: .rcs-wrap owns the horizontal gutter. Section classes set ONLY
   padding-top/padding-bottom — never the `padding` shorthand, which would
   zero out the gutter and shove a section flush to the screen edge. */
.rcs-wrap       { max-width: var(--wrap);       margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.rcs-wrap--mid  { max-width: var(--wrap-mid); }
.rcs-wrap--tight{ max-width: var(--wrap-tight); }

.rcs-section        { padding-top: 110px; padding-bottom: 110px; }
.rcs-section--dark  { background: var(--c-dark); color: var(--c-cream); }
.rcs-section--dark h1, .rcs-section--dark h2, .rcs-section--dark h3 { color: var(--c-cream); }

/* vertical-rhythm modifiers — used where two sections butt together and the
   combined padding would double up. Top/bottom only, never the shorthand. */
.rcs-section--flush-top    { padding-top: 0; }
.rcs-section--flush-bottom { padding-bottom: 0; }
.rcs-section--tight-bottom { padding-bottom: 30px; }

/* measure helper */
.rcs-measure-24 { max-width: 24ch; }

/* visually hidden, still reachable by keyboard + screen readers */
.screen-reader-text {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
    position: fixed; top: 12px; left: 12px; z-index: 200;
    width: auto; height: auto; margin: 0; padding: 12px 20px;
    clip-path: none; white-space: normal;
    background: var(--c-terra); color: var(--c-cream);
    border-radius: 999px; font-weight: 600;
}

/* a hairline rule that sits inside the wrap, above a section's content */
.rcs-ruled { border-top: 1px solid var(--c-line); padding-top: 80px; }

/* ---- header ---- */
.rcs-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(246, 241, 231, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.admin-bar .rcs-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .rcs-header { top: 46px; } }

.rcs-header-inner {
    max-width: var(--wrap); margin: 0 auto;
    padding: 18px var(--pad-x);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.rcs-brand {
    display: inline-flex; align-items: center; gap: 11px;
    font-family: var(--font-head); font-weight: 600; font-size: 22px;
    letter-spacing: -.3px; line-height: 1.15;
}
.rcs-brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
/* Newsreader's cap-height sits high in its line box, so flex centering
   leaves the wordmark looking a couple of pixels above the mark's centre.
   Optical nudge — not a layout fix. */
.rcs-brand-name { display: inline-block; position: relative; top: 2px; }

.rcs-nav { display: flex; gap: 30px; font-size: 15px; margin-left: auto; }

/* ---- buttons ---- */
.rcs-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    padding: 15px 32px; border-radius: 999px; border: none;
    cursor: pointer; white-space: nowrap; transition: filter .18s ease, color .18s ease;
}
.rcs-btn--sm      { font-size: 14px; padding: 11px 24px; }

.rcs-btn--primary { background: var(--c-terra); color: var(--c-cream); }
.rcs-btn--primary:hover { color: var(--c-cream); filter: brightness(1.07); }
.rcs-btn--cream   { background: var(--c-cream); color: var(--c-ink); box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
.rcs-btn--cream:hover { color: var(--c-ink); filter: brightness(1.03); }

/* ---- shared type helpers ---- */
.rcs-eyebrow { font-size: 14px; font-weight: 600; color: var(--c-terra); margin-bottom: 20px; }
.rcs-section--dark .rcs-eyebrow { color: var(--c-terra-lt); }

.rcs-h2      { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -1px; margin: 0 0 64px; }
.rcs-h2--tight { margin-bottom: 22px; }
.rcs-accent  { color: var(--c-terra); }
.rcs-section--dark .rcs-accent { color: var(--c-terra-lt); }

.rcs-body    { font-size: 17px; line-height: 1.7; color: var(--c-ink-soft); margin: 0; }
.rcs-body + .rcs-body { margin-top: 16px; }

/* decorative opening quote mark */
.rcs-quotemark { font-family: var(--font-head); color: var(--c-terra); line-height: .6; }

/* ---- HERO ---- */
.rcs-hero { position: relative; height: 74vh; min-height: 540px; }
.rcs-hero-media { position: absolute; inset: 0; }
.rcs-hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* legibility scrim — the design leans on a heavy text-shadow for the same job;
   this keeps the headline readable once the photo crops tighter on mobile */
.rcs-hero-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(27,22,19,.55) 0%, rgba(27,22,19,.15) 38%, transparent 62%);
}
.rcs-hero-body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding-bottom: 56px; pointer-events: none;
}
.rcs-hero h1 {
    margin: 0 0 24px;
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1.05; letter-spacing: -1.5px;
    color: #FFFDF8; text-shadow: 0 2px 30px rgba(0,0,0,.45);
    max-width: 21ch;   /* holds the headline to two lines on desktop */
}
.rcs-hero .rcs-btn { pointer-events: auto; }

/* ---- PAIN quote cards ---- */
.rcs-quotecard {
    background: var(--c-card); border-top: 3px solid var(--c-terra);
    padding: 36px 32px; box-shadow: var(--shadow-card);
}
.rcs-quotecard .rcs-quotemark { font-size: 44px; margin-bottom: 20px; }
.rcs-quotecard p {
    margin: 0; font-family: var(--font-head); font-style: italic;
    font-size: 22px; line-height: 1.35; color: var(--c-ink);
}

/* ---- grids ---- */
.rcs-grid    { display: grid; gap: 28px; }
.rcs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- BRIDGE (dark, centered) ---- */
.rcs-bridge { text-align: center; }
.rcs-bridge h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.15; letter-spacing: -1px; margin: 0 0 24px; }
.rcs-bridge p {
    margin: 0 auto; max-width: 56ch;
    font-size: 18px; line-height: 1.7; color: var(--c-dark-body);
}
.rcs-bridge p + p { margin-top: 20px; }

/* ---- SOLUTION intro (headline / arrow / paragraph) ---- */
/* Headline and explanation sit inline on one row (as the design has it).
   The headline column is widened and the font capped at 40px so the line
   breaks ONCE rather than three times — a true single line would need
   ~874px, which no side-by-side row can give it. */
.rcs-solution-intro {
    display: grid; grid-template-columns: minmax(0, 1.35fr) auto minmax(0, .8fr);
    gap: 32px; align-items: center; margin-bottom: 88px;
}
.rcs-solution-intro h2 {
    font-size: clamp(28px, 2.9vw, 40px);
    line-height: 1.12; letter-spacing: -.8px; margin: 0;
}
.rcs-solution-aside { display: contents; }
.rcs-solution-aside p {
    font-size: 17px; line-height: 1.7; color: var(--c-ink-soft); margin: 0;
}
.rcs-arrow { transform: rotate(-14deg); flex-shrink: 0; }

/* ---- pillar cards (Rec / Social / Church) ---- */
.rcs-pillar {
    background: var(--c-card); overflow: hidden;
    box-shadow: var(--shadow-photo);
    display: flex; flex-direction: column;
}
.rcs-pillar-media { height: 230px; flex-shrink: 0; }
.rcs-pillar-media img { width: 100%; height: 100%; object-fit: cover; }
.rcs-pillar-body {
    padding: 28px 28px 32px;
    display: flex; flex-direction: column; gap: 14px;
    border-top: 4px solid var(--pillar, var(--c-terra));
}
.rcs-pillar-head { display: flex; align-items: center; gap: 14px; }
.rcs-pillar-icon {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--pillar, var(--c-terra));
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rcs-pillar-icon svg { width: 22px; height: 22px; }
.rcs-pillar h3 { margin: 0; font-size: 25px; letter-spacing: -.3px; }
.rcs-pillar p  { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); }

.rcs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rcs-chip {
    font-size: 13px; font-weight: 500; padding: 6px 13px; border-radius: 999px;
    color: var(--chip-ink, var(--c-terra-dk)); background: var(--chip-bg, rgba(198,93,59,.14));
}
/* pillar themes — set the two custom props, everything downstream follows */
.rcs-pillar--sage  { --pillar: var(--c-sage);  --chip-ink: var(--c-sage-dk);  --chip-bg: rgba(111,127,94,.16); }
.rcs-pillar--terra { --pillar: var(--c-terra); --chip-ink: var(--c-terra-dk); --chip-bg: rgba(198,93,59,.14); }
.rcs-pillar--ochre { --pillar: var(--c-ochre); --chip-ink: var(--c-ochre-dk); --chip-bg: rgba(201,138,46,.16); }

/* ---- split rows (testimonial + host) ---- */
.rcs-split {
    display: grid; gap: 72px; align-items: center;
}
.rcs-split--quote    { grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); }
.rcs-split--host     { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); }
.rcs-split--host-rev { grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); } /* mirrored: copy left, photo right */
.rcs-split > * { min-width: 0; }

.rcs-square { aspect-ratio: 1 / 1; }
.rcs-square img { width: 100%; height: 100%; object-fit: cover; }

.rcs-testimonial .rcs-quotemark { font-size: 40px; }
.rcs-testimonial blockquote {
    margin: 18px 0 28px; max-width: 28ch;
    font-family: var(--font-head); font-weight: 400;
    font-size: clamp(22px, 2.8vw, 34px); line-height: 1.3; letter-spacing: -.5px;
}
.rcs-attrib { font-size: 15px; font-weight: 500; color: var(--c-muted); }

.rcs-host h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -1px; margin: 0 0 22px; }
.rcs-host .rcs-body { max-width: 52ch; }
.rcs-signoff { font-family: var(--font-head); font-style: italic; font-size: 20px; color: var(--c-terra); margin-top: 24px; }

/* ---- HOW IT WORKS ---- */
.rcs-steps {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px;
    border-top: 1px solid var(--c-line); padding-top: 48px;
}
.rcs-step-num { font-family: var(--font-head); font-size: 32px; font-weight: 400; color: var(--c-terra); letter-spacing: -1px; }
.rcs-step h3  { margin: 18px 0 10px; font-size: 22px; letter-spacing: -.3px; }
.rcs-step p   { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); }

/* ---- VERSE band ---- */
.rcs-verse { background: var(--c-terra); padding-top: 72px; padding-bottom: 72px; text-align: center; }
.rcs-verse p {
    margin: 0 0 18px;
    font-family: var(--font-head); font-style: italic; font-weight: 400;
    font-size: clamp(20px, 2.6vw, 30px); line-height: 1.45; color: var(--c-verse-ink);
}
.rcs-verse cite {
    font-family: var(--font-body); font-style: normal;
    font-size: 13px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--c-terra-pale);
}

/* ---- JOIN ---- */
.rcs-join { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
.rcs-join > * { min-width: 0; }
.rcs-join h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -1.2px; margin: 0 0 20px; }
.rcs-join-lede { margin: 0 0 32px; max-width: 40ch; font-size: 16px; line-height: 1.65; color: var(--c-dark-body); }

.rcs-perks { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--c-dark-body); }
.rcs-perk  { display: flex; align-items: center; gap: 11px; }
.rcs-perk::before {
    content: '✓'; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--c-sage); color: var(--c-cream);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}

/* ---- form ---- */
.rcs-form { display: flex; flex-direction: column; gap: 28px; }
/* end-align so a label that wraps to two lines (e.g. "What types of events
   would you like us to do?") doesn't push its input out of line with its
   neighbour's — the underlines stay on one baseline across the row. */
.rcs-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.rcs-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rcs-label {
    font-size: 12px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--c-dark-label);
}
.rcs-form input[type=text],
.rcs-form input[type=email],
.rcs-form input[type=tel],
.rcs-form input[type=number],
.rcs-form select {
    width: 100%; min-width: 0;
    padding: 9px 0;
    border: none; border-bottom: 1.5px solid var(--c-dark-field);
    border-radius: 0;                 /* iOS rounds inputs by default */
    background: transparent;
    font-family: var(--font-body);
    font-size: 16px;                  /* 16px min or iOS Safari zooms on focus */
    color: var(--c-cream);
    -webkit-appearance: none; appearance: none;
}
.rcs-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238A7D6F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 2px center;
    padding-right: 22px;
}
.rcs-form option { color: var(--c-ink); }
.rcs-form input:focus, .rcs-form select:focus { outline: none; border-bottom-color: var(--c-terra-lt); }
.rcs-form input::placeholder { color: var(--c-dark-label); }
/* kill the number-input spinners — they collide with the hairline underline */
.rcs-form input[type=number] { -moz-appearance: textfield; }
.rcs-form input[type=number]::-webkit-outer-spin-button,
.rcs-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* small speech-bubble hint under a field (currently the age check) */
.rcs-hint {
    position: relative;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--c-terra);
    color: var(--c-cream);
    font-size: 13px; line-height: 1.45; font-weight: 500;
    text-transform: none; letter-spacing: 0;
}
.rcs-hint::before {          /* little pointer up toward the input */
    content: '';
    position: absolute; bottom: 100%; left: 16px;
    border: 6px solid transparent;
    border-bottom-color: var(--c-terra);
}
.rcs-hint[hidden] { display: none; }

.rcs-radio-set { display: flex; gap: 10px; }
.rcs-radio {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid var(--c-dark-field); padding: 9px 0;
    font-size: 15px; color: var(--c-cream); cursor: pointer;
}
.rcs-radio input { accent-color: var(--c-terra); }

.rcs-submit-row { display: flex; align-items: center; gap: 18px; margin-top: 4px; flex-wrap: wrap; }
.rcs-submit-note { font-size: 13px; color: var(--c-dark-label); }

/* inline status line — the form has no backend yet, so submit says so
   rather than silently swallowing a real signup */
.rcs-form-notice {
    margin: 0; padding: 14px 18px;
    border-left: 3px solid var(--c-terra-lt);
    background: rgba(214, 142, 106, .1);
    font-size: 14px; line-height: 1.55; color: var(--c-dark-body);
}
.rcs-form-notice[hidden] { display: none; }
.rcs-notice-link { color: var(--c-terra-lt); text-decoration: underline; text-underline-offset: 3px; }
.rcs-notice-link:hover { color: var(--c-cream); }

/* ---- contact page (Fluent Forms harness) ----
   The Fluent build of the join form carries NO background of its own, so it
   can be dropped into any container. This panel supplies the dark band and
   holds the form to the same column width it has in the funnel design
   (1.1fr of a 1140px two-column row, minus the 72px gutter). */
.rcs-form-panel { max-width: 600px; margin: 0 auto; }
.rcs-form-panel-intro { margin-bottom: 44px; }
.rcs-form-panel-intro > :first-child { margin-top: 0; }
.rcs-form-panel-intro > :last-child  { margin-bottom: 0; }
.rcs-form-panel-intro p { font-size: 16px; line-height: 1.65; color: var(--c-dark-body); }

/* ---- FOOTER ---- */
.rcs-footer { background: var(--c-dark); color: var(--c-cream); padding-bottom: 44px; }
.rcs-footer-inner {
    max-width: var(--wrap); margin: 0 auto;
    padding-left: var(--pad-x); padding-right: var(--pad-x);
}
.rcs-footer-row {
    border-top: 1px solid var(--c-dark-line); padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
    font-size: 13px; color: var(--c-dark-label);
}
/* only the brand cell needs a manufactured gap; the others use word spaces */
.rcs-footer-cell--brand { display: inline-flex; align-items: baseline; gap: 10px; }
.rcs-footer-brand { font-family: var(--font-head); font-size: 16px; color: var(--c-dark-brand); }
.rcs-footer-copy  { color: var(--c-dark-label); }
.rcs-footer-credit {
    color: var(--c-dark-label);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.rcs-footer-credit:hover { color: var(--c-terra-lt); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* ---- tablet ---- */
@media (max-width: 1024px) {
    :root { --pad-x: 32px; }

    .rcs-section { padding-top: 88px; padding-bottom: 88px; }
    .rcs-ruled   { padding-top: 60px; }

    .rcs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* headline / arrow / paragraph → stack, drop the decorative arrow */
    .rcs-solution-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 60px; }
    .rcs-arrow { display: none; }

    .rcs-split--quote, .rcs-split--host, .rcs-split--host-rev { grid-template-columns: 1fr; gap: 40px; }
    /* photo above the copy on every split row, regardless of DOM order */
    .rcs-split--quote .rcs-square,
    .rcs-split--host-rev .rcs-square { order: -1; }

    .rcs-steps { gap: 36px; }
    .rcs-join  { grid-template-columns: 1fr; gap: 48px; }
}

/* ---- mobile ---- */
@media (max-width: 768px) {
    :root { --pad-x: 20px; --header-h: 68px; }

    .rcs-header-inner { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
    .rcs-brand { font-size: 17px; max-width: 60%; }
    .rcs-nav   { display: none; }
    .rcs-btn--sm { font-size: 13px; padding: 10px 18px; }

    .rcs-section { padding-top: 64px; padding-bottom: 64px; }
    .rcs-ruled   { padding-top: 48px; }

    /* svh, not vh — vh jumps when the iOS URL bar collapses */
    .rcs-hero { height: 82svh; min-height: 460px; }
    .rcs-hero-body { padding-bottom: 40px; }
    .rcs-hero h1 { max-width: 100%; letter-spacing: -.8px; margin-bottom: 20px; }

    .rcs-grid { gap: 20px; }
    .rcs-grid--3 { grid-template-columns: 1fr; }

    .rcs-h2 { margin-bottom: 40px; }
    .rcs-quotecard { padding: 28px 24px; }
    .rcs-quotecard p { font-size: 19px; }

    .rcs-bridge p { font-size: 16px; }

    .rcs-pillar-media { height: 200px; }
    .rcs-pillar-body  { padding: 24px 22px 28px; }

    .rcs-split--quote, .rcs-split--host, .rcs-split--host-rev { gap: 32px; }
    .rcs-testimonial blockquote { max-width: 100%; }

    .rcs-steps { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; }

    .rcs-verse { padding-top: 56px; padding-bottom: 56px; }

    .rcs-join { gap: 40px; }
    .rcs-join-lede { max-width: 100%; }
    /* single column form — two fields per row is unusable at 375px */
    .rcs-field-row { grid-template-columns: 1fr; gap: 22px; }
    .rcs-form { gap: 22px; }
    .rcs-submit-row { gap: 14px; }
    .rcs-btn { width: 100%; }
    .rcs-submit-note { text-align: center; width: 100%; }

    .rcs-footer-row { flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
}

/* keep the header CTA from going full-width along with the rest */
@media (max-width: 768px) {
    .rcs-header .rcs-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}