/* ==========================================================================
   VOX DISCIPLESHIP PATHWAY — /pathway
   Every rule is scoped to .vox-dp. Nothing here may leak into the theme.
   Font URLs are resolved to /Themes/Vox2021/Assets/Fonts/ (case matches the
   live folder; the server is case-insensitive today, don't rely on it).
   ========================================================================== */
/* THINGS — the real brand display face, self-hosted from the brand kit.
     Ships Regular + Italic only: never ask for a bold weight or the browser
     will synthesise one. All display type is weight 400. */
  @font-face { font-family:'Things'; src:url('/Themes/Vox2021/Assets/Fonts/Things-Regular.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:'Things'; src:url('/Themes/Vox2021/Assets/Fonts/Things-Italic.woff') format('woff');  font-weight:400; font-style:italic;  font-display:swap; }
/* ═══════════════════════════════════════════════════════════
     VOX DISCIPLESHIP PATHWAY
     Built to the official brand guide (26.DP.BrandingGuide2.pdf) plus the
     Sep 2026 print/social pieces:
       · beige-dominant field (NOT dark-dominant)
       · Things for display, all caps, havelock blue; pesto italic accents
       · santa's gray "NEW" pill
       · dolly yellow reserved as the ~5% accent (Believe bar)
       · vertical colour-swatch strip as a signature edge device
       · L-bracket date marker
       · stage bands full-bleed, colours + icons straight from the guide
     ═══════════════════════════════════════════════════════════ */
  .vox-dp {
    /* ── OFFICIAL PALETTE — 26.DP.BrandingGuide2.pdf ──
       Names are the guide's own. Do not add colours to this list. */
    --thistle:     #C3C7A1;  /* thistle green   background */
    --pine-cone:   #735C51;  /* pine cone       background */
    --heathered:   #BAA891;  /* heathered gray  background */
    --gray-nickel: #B9BAB5;  /* gray nickel     background */
    --beige:       #F4F4D9;  /* beige           background + light text */
    --swirl:       #DCD3CD;  /* swirl           background */
    --blue:        #4A80CE;  /* havelock blue   PRIMARY */
    --pesto:       #858C4D;  /* pesto           PRIMARY */
    --tom-thumb:   #48523A;  /* tom thumb       PRIMARY */
    --driftwood:   #AF7B50;  /* driftwood       PRIMARY */
    --santas-gray: #A4A2BB;  /* santa's gray    PRIMARY */
    --ink:         #363636;  /* mine shaft      the dark text colour */
    --dolly:       #F4FF7E;  /* dolly yellow    ACCENT — guide says ~5% */

    /* ── The one sanctioned departure ──
       Believe's bar is dolly-on-blue per the guide, but on true havelock
       blue that is 3.69:1 — under AA for the bar's body copy. This is the
       brand blue darkened 15%, which carries both the dolly title (4.85:1)
       and beige body copy (4.69:1). Visually near-identical to the brand
       blue. Used ONLY as that bar's background. (Dave, 2026-08-17.)
       Every other use of blue on this page is the true #4A80CE. */
    --blue-deep:   #3F6DAF;

    /* Body/meta text are mine shaft at reduced opacity — the guide's own
       sample body copy is a tint, not solid. Floors are set by SWIRL (the
       darkest ground these sit on, used for cards), not beige: 0.76 is the
       AA threshold there, so 0.78 is the meta floor. Do not lighten. */
    --ink-body: rgba(54,54,54,0.88);
    --ink-meta: rgba(54,54,54,0.78);

    --display: 'Things', Georgia, serif;
    --sans:    'Manrope', system-ui, sans-serif;
    --body:    'Inter', system-ui, sans-serif;
  }

  .vox-dp, .vox-dp * { margin: 0; padding: 0; box-sizing: border-box; }
  /* Anchored sections stop short of the top so headings don't hide under
     the live site's fixed masthead once this fragment is embedded. */
  .vox-dp section[id] { scroll-margin-top: 114px; }
  /* Keyboard focus: a visible ring everywhere, in the palette. */
.vox-dp a:focus-visible, .vox-dp button:focus-visible {
    outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 4px;
  }
.vox-dp .cta a:focus-visible, .vox-dp .tagline-bar a:focus-visible {
    outline-color: var(--dolly);
  }
  /* The fragment's own typographic ground. This has to sit on .vox-dp
     itself, not on a descendant body: there is no <body> inside the
     wrapper, so the six body-copy rules that omit font-family inherit
     from here. `clip` rather than `hidden` — and never on html, where it
     would silently kill position:sticky for the theme's masthead.
     scroll-behavior is deliberately not set, so the theme decides. */
.vox-dp {
    font-family: var(--body);
    color: var(--ink);
    background: var(--beige);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
  }

  /* ─── MOCKUP-ONLY REVIEW RIBBON (strip at build) ─── */
  /* ═══ SHARED ═══ */
  .wrap { max-width: 1120px; margin: 0 auto; }
.vox-dp .eyebrow {
    font-family: var(--sans); font-size: 11px; font-weight: 800;
    letter-spacing: 4px; text-transform: uppercase;
    /* tom-thumb, not pesto: pesto on beige is only 3.21:1 — fine for the
       big italic display accents, too weak for 11px tracked caps. */
    color: var(--tom-thumb);
  }
.vox-dp .display {
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase; line-height: 0.92;
    letter-spacing: -0.01em; color: var(--blue);
  }
  .display em { font-style: italic; color: var(--pesto); }

  /* The swatch strip — signature device off the print pieces */
.vox-dp .swatch-strip {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
  }
  .swatch-strip span { flex: 1; display: block; }
  .sw-1 { background: var(--gray-nickel); }
  .sw-2 { background: var(--tom-thumb); }
  .sw-3 { background: var(--heathered); }
  .sw-4 { background: var(--driftwood); }
  .sw-5 { background: var(--blue); }
  .sw-6 { background: var(--santas-gray); }
  .sw-7 { background: var(--pesto); }

  /* Horizontal version, used as a section rule */
  .swatch-rule { display: flex; height: 8px; width: 100%; }
  .swatch-rule span { flex: 1; }

  /* ═══ HERO ═══ */
.vox-dp .hero {
    position: relative;
    background: var(--beige);
    padding: 72px 48px 56px;
    overflow: hidden;
  }
.vox-dp .hero-swatch {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 88px;
  }
  .hero-inner { max-width: 1240px; margin: 0 auto; padding-right: 96px; }

.vox-dp .pill {
    display: inline-block;
    /* Print sets NEW in white on lavender; on screen that is 1.66:1.
       Dark olive text keeps the lavender chip but makes it readable. */
    background: var(--santas-gray); color: var(--tom-thumb);
    font-family: var(--display); font-weight: 700;
    font-size: 26px; letter-spacing: 0.06em;
    padding: 4px 30px 7px; border-radius: 999px;
    margin-bottom: 18px;
  }
.vox-dp .hero h1 {
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase;
    /* Cap sized so "DISCIPLESHIP" always clears the swatch strip;
       floor sized so it never overflows a 360px phone. */
    font-size: clamp(34px, 12.2vw, 172px);
    line-height: 0.84; letter-spacing: -0.02em;
    color: var(--blue);
    margin-bottom: 44px;
  }
  .hero h1 .line { display: block; }

  /* Two-column shelf under the headline — fills the desktop dead zone.
     Left = when (launch marker + countdown). Right = what + how to act. */
.vox-dp .hero-cols {
    display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1fr);
    gap: 56px; align-items: start;
  }
  /* Post-launch the left column empties out (countdown removed) — collapse
     to a single column so the CTA doesn't sit beside a hole. */
  .hero-cols.solo { grid-template-columns: 1fr; }

  /* Launch marker — the "COMING SOON └ SEP 27" bracket device */
  .launch-block { margin-bottom: 26px; }
.vox-dp .launch-label {
    font-family: var(--sans); font-weight: 800;
    font-size: clamp(26px, 4vw, 44px);
    letter-spacing: -0.01em; text-transform: uppercase;
    color: var(--pesto); line-height: 1;
  }
.vox-dp .launch-date {
    display: flex; align-items: flex-end; gap: 12px;
    margin-top: 6px; padding-left: 4px;
  }
.vox-dp .bracket {
    width: 26px; height: 30px;
    border-left: 3px solid var(--pesto);
    border-bottom: 3px solid var(--pesto);
    flex-shrink: 0;
  }
.vox-dp .launch-date-text {
    font-family: var(--sans); font-weight: 700;
    font-size: clamp(24px, 3.6vw, 40px);
    text-transform: uppercase; color: var(--tom-thumb);
    line-height: 1; padding-bottom: 2px;
  }

.vox-dp .hero-lead {
    font-family: var(--sans); font-weight: 500;
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.5; color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.01em;
    max-width: 640px; margin-bottom: 30px;
  }
  .hero-lead em { font-style: italic; font-weight: 800; }

  /* ═══ COUNTDOWN ═══ */
  /* Units flex to the column so all four always sit on one row. */
.vox-dp .countdown {
    display: flex; gap: 10px; flex-wrap: nowrap;
    margin-bottom: 0; max-width: 420px;
  }
.vox-dp .cd-unit {
    background: var(--swirl);
    border: 1px solid rgba(54,54,54,0.10);
    border-radius: 10px;
    padding: 14px 10px; text-align: center;
    flex: 1 1 0; min-width: 0;
  }
.vox-dp .cd-num {
    font-family: var(--display); font-weight: 500;
    font-size: 38px; line-height: 1; color: var(--tom-thumb);
    font-variant-numeric: tabular-nums;
  }
  /* One soft breath when a value changes — the page's only repeating motion. */
  @keyframes dp-cdTick { from { opacity: .35; } to { opacity: 1; } }
  .cd-num.tick { animation: dp-cdTick .5s ease; }
.vox-dp .cd-lab {
    font-family: var(--sans); font-size: 9.5px; font-weight: 700;
    letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--ink-meta); margin-top: 7px;
  }

  /* ═══ APP BUTTONS ═══ */
  .app-buttons { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.vox-dp .app-btn {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 13px 26px; border-radius: 8px;
    text-decoration: none; font-family: var(--sans);
    background: var(--tom-thumb); border: 1px solid var(--tom-thumb);
    color: var(--beige);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
  }
.vox-dp a.app-btn:hover {
    background: var(--ink); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(54,54,54,0.16);
  }
  .app-btn svg { flex-shrink: 0; }
  .app-btn-label { display: flex; flex-direction: column; text-align: left; }
  .app-btn-label small { font-size: 10.5px; font-weight: 500; letter-spacing: .5px; line-height: 1; color: rgba(244,244,217,0.82); }
  .app-btn-label strong { font-size: 15px; font-weight: 700; line-height: 1.3; }

.vox-dp .app-note {
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    letter-spacing: .4px; color: var(--ink-meta); margin-top: 12px;
  }

  /* ═══ TAGLINE BAR ═══ */
.vox-dp .tagline-bar {
    background: var(--tom-thumb);
    padding: 40px 48px; text-align: center;
  }
.vox-dp .tagline-bar p {
    font-family: var(--display); font-style: italic;
    font-size: clamp(22px, 3vw, 34px);
    color: var(--beige); max-width: 900px; margin: 0 auto;
  }
.vox-dp .tagline-ref {
    display: inline-block; margin-left: 6px;
    font-family: var(--sans); font-style: normal;
    font-size: clamp(11px, 1.1vw, 13px); font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--thistle); vertical-align: middle;
  }

  /* ═══ PAGE NAV ═══ */
.vox-dp .page-nav {
    /* "safe center": centred when it fits, left-anchored when it overflows —
       plain center + overflow-x makes the first links unreachable on phones. */
    display: flex; align-items: center; justify-content: safe center;
    gap: 14px; padding: 16px 24px;
    background: var(--beige);
    border-bottom: 1px solid rgba(54,54,54,0.10);
    white-space: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
.vox-dp .page-nav a {
    font-family: var(--sans); font-size: 11.5px; font-weight: 800;
    letter-spacing: 2.2px; text-transform: uppercase;
    color: var(--tom-thumb); text-decoration: none;
    padding: 4px 2px;
  }
  .page-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vox-dp .page-nav-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(54,54,54,0.35); flex: none;
  }
.vox-dp .page-nav-cta {
    border: 1.5px solid var(--tom-thumb); border-radius: 999px;
    padding: 5px 14px !important;
  }
  .page-nav-cta:hover { background: var(--tom-thumb); color: var(--beige) !important; text-decoration: none !important; }

  /* ═══ HEART ═══ */
  .heart { padding: 72px 48px 64px; background: var(--beige); }
  .heart-inner { max-width: 720px; margin: 0 auto; text-align: center; }
  .heart .eyebrow { display: block; margin-bottom: 20px; }
.vox-dp .heart h2 {
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase; line-height: 1.02;
    font-size: clamp(30px, 4.4vw, 56px);
    color: var(--blue); margin-bottom: 26px;
  }
  .heart h2 em { font-style: italic; color: var(--pesto); }
.vox-dp .heart p {
    font-size: 16px; line-height: 1.85; color: var(--ink-body);
    max-width: 600px; margin: 0 auto;
  }
  .heart p + p { margin-top: 16px; }

  /* ═══ STAGES — the app mirror ═══ */
  .stages { padding: 76px 0 0; background: var(--beige); }
  .stages-header { text-align: center; margin-bottom: 42px; padding: 0 48px; }
  .stages-header .eyebrow { display: block; margin-bottom: 18px; }
.vox-dp .stages-header h2 {
    font-family: var(--display); font-weight: 400;
    text-transform: uppercase; line-height: 1.0;
    font-size: clamp(32px, 5vw, 62px);
    color: var(--blue); margin-bottom: 18px;
  }
  .stages-header h2 em { font-style: italic; color: var(--pesto); }
.vox-dp .stages-header p {
    font-size: 15px; line-height: 1.75; color: var(--ink-body);
    max-width: 560px; margin: 0 auto;
  }

  /* Full-bleed bands, exactly as the guide presents them. Edge-to-edge with
     no gaps means Belong's beige bar is delineated by its neighbours instead
     of needing a border against the section ground. */
  .stage-list { display: block; }
.vox-dp .stage-row {
    display: flex; align-items: center; gap: 26px;
    padding: 30px 48px;
    position: relative; overflow: hidden;
    transition: none;
  }
  /* Bands enter from the left — a directional cue that this is a path —
     and the numeral follows a beat later from the right. */
  .stage-row.reveal { transform: translateX(-20px); }
  .stage-row.reveal.visible { transform: translateX(0); }
.vox-dp .stage-row .stage-watermark {
    opacity: 0; transform: translate(14px, -50%);
    transition: opacity .6s ease .25s, transform .6s ease .25s;
  }
.vox-dp .stage-row.visible .stage-watermark {
    opacity: 0.16; transform: translate(0, -50%);
  }

  /* Oversized numeral watermark on the band's right edge — fills the dead
     space on wide screens and counts the path 01→07. Pure typography
     (Things, the band's own title colour at low opacity), decorative only. */
.vox-dp .stage-watermark {
    position: absolute; right: 40px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--display); font-weight: 400;
    font-size: clamp(120px, 13vw, 190px); line-height: 1;
    letter-spacing: -0.02em;
    color: currentColor;
    pointer-events: none; user-select: none;
  }
.vox-dp .stage-inner {
    display: flex; align-items: center; gap: 26px;
    max-width: 1120px; margin: 0 auto; width: 100%;
  }
  .stage-text { flex: 1; min-width: 0; }
  /* Name + icon sit together on one line, icon to the RIGHT — per the guide. */
  /* font-size lives on .stage-head so the glyph can size in em against the
     name rather than against the inherited body size. */
.vox-dp .stage-head {
    display: flex; align-items: center; gap: 0.38em;
    font-size: clamp(30px, 4vw, 52px);
  }
.vox-dp .stage-name {
    font-family: var(--display); font-weight: 400; font-style: normal;
    text-transform: uppercase;
    font-size: 1em; line-height: 1;
    letter-spacing: -0.005em;
  }
  .stage-glyph { flex-shrink: 0; display: block; height: 0.68em; width: auto; }
  .stage-glyph svg { height: 100%; width: auto; display: block; }
.vox-dp .stage-num {
    font-family: var(--sans); font-size: 10px; font-weight: 800;
    letter-spacing: 2.6px; text-transform: uppercase;
    margin-bottom: 8px;
  }
.vox-dp .stage-sub {
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase;
    margin-top: 10px;
  }
.vox-dp .stage-desc {
    font-family: var(--body); font-size: 14.5px; line-height: 1.65;
    margin-top: 10px; max-width: 520px;
  }

  /* ── OFFICIAL STAGE PAIRINGS (branding guide, left column) ──
     bar background          title + icon           measured contrast
     1 thistle green         tom thumb              4.72
     2 pine cone             beige                  5.56
     3 blue-deep             dolly yellow           4.85   (see --blue-deep)
     4 beige                 pine cone              5.56
     5 santa's gray          mine shaft             4.87   (guide shows beige
                                                    here = 2.22, unusable)
     6 tom thumb             thistle green          4.72
     7 swirl                 pine cone              4.22 title / ink body   */
  .st-1 { background: var(--thistle);     color: var(--tom-thumb); }
  .st-2 { background: var(--pine-cone);   color: var(--beige); }
  .st-3 { background: var(--blue-deep);   color: var(--dolly); }
  .st-4 { background: var(--beige);       color: var(--pine-cone); }
  .st-5 { background: var(--santas-gray); color: var(--ink); }
  .st-6 { background: var(--tom-thumb);   color: var(--thistle); }
  .st-7 { background: var(--swirl);       color: var(--pine-cone); }
  /* Body copy takes the darker of the two official text colours wherever the
     title colour itself would fall under 4.5:1 at 14.5px. */
  .st-7 .stage-desc, .st-7 .stage-num, .st-7 .stage-sub { color: var(--ink); }
  .st-3 .stage-desc, .st-3 .stage-num, .st-3 .stage-sub { color: var(--beige); }


  /* ═══ PHOTO ═══ */
  /* ═══ PHOTO BAND (removed) — restore alongside the markup stub ═══
  .photo-section { position: relative; height: 420px; overflow: hidden; }
  .photo-section img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
  .photo-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(54,54,54,0.28) 0%, rgba(54,54,54,0.10) 45%, rgba(54,54,54,0.34) 100%); }
  ═══════════════════════════════════════════════════════════════ */

  /* ═══ HOW IT WORKS ═══
     Pattern + copy adopted from the team's Rock test page
     (rock.voxchurch.org/page/2631#how-it-works), translated into this
     page's type + palette: numbered rows with hairline dividers, then a
     closing band. It is the page's only "mechanics" section — what you
     literally do — so it sits right after the stages and hands off to
     The App via step 1. */
  .howto { padding: 76px 48px; background: var(--beige); }
  .howto-inner { max-width: 680px; margin: 0 auto; }
  .howto-header { text-align: center; margin-bottom: 44px; }
  .howto-header .eyebrow { display: block; margin-bottom: 18px; }
.vox-dp .howto-header h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(28px, 4vw, 50px); line-height: 1.0;
    color: var(--blue);
  }
  .howto-header h2 em { font-style: italic; color: var(--pesto); }
  .howto ol { list-style: none; margin: 0; padding: 0; }
.vox-dp .howto-step {
    display: flex; gap: 18px; align-items: flex-start;
    padding: 22px 4px;
    border-top: 1px solid rgba(54,54,54,0.14);
  }
  .howto-step:last-of-type { border-bottom: 1px solid rgba(54,54,54,0.14); }
.vox-dp .howto-num {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    background: var(--tom-thumb); color: var(--beige);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-size: 15px; font-weight: 800;
    transition: transform .25s ease;
  }
  .howto-step:hover .howto-num { transform: scale(1.12); }
.vox-dp .howto-title {
    font-family: var(--sans); font-size: 17px; font-weight: 700;
    color: var(--ink); line-height: 1.35; padding-top: 6px;
  }
.vox-dp .howto-title a {
    color: var(--ink);
    text-decoration: underline; text-decoration-thickness: 1px;
    text-decoration-color: rgba(54,54,54,0.35); text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
  }
  .howto-title a:hover { text-decoration-color: var(--ink); }
  .howto-text { font-size: 14.5px; line-height: 1.6; color: var(--ink-body); margin-top: 5px; }
  /* closing band */
.vox-dp .howto-band {
    margin-top: 36px; padding: 22px 26px;
    background: var(--swirl); border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
  }
  .howto-band p { font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.vox-dp .howto-band-btn {
    flex: none; display: inline-block;
    padding: 12px 24px; border-radius: 8px;
    background: var(--tom-thumb); color: var(--beige);
    font-family: var(--sans); font-size: 13px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
    text-decoration: none;
    transition: background .3s ease, transform .3s ease;
  }
  .howto-band-btn:hover { background: var(--ink); transform: translateY(-2px); }

  /* ═══ PLATFORM ═══ */
  .platform { padding: 72px 48px 80px; background: var(--beige); }
  .platform-header { text-align: center; margin-bottom: 54px; }
  .platform-header .eyebrow { display: block; margin-bottom: 18px; }
.vox-dp .platform-header h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(30px, 4.4vw, 54px); line-height: 1.0;
    color: var(--blue); margin-bottom: 14px;
  }
  .platform-header h2 em { font-style: italic; color: var(--pesto); }
  .platform-header p { font-size: 14.5px; line-height: 1.7; color: var(--ink-meta); max-width: 440px; margin: 0 auto; }
  .platform-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1060px; margin: 0 auto; }
.vox-dp .platform-card {
    background: var(--swirl); border: 1px solid rgba(54,54,54,0.08);
    border-radius: 12px; padding: 36px 30px 34px;
    position: relative; overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .platform-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(54,54,54,0.09); }
  .platform-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; }
  .platform-card:nth-child(1)::before { background: var(--blue); }
  .platform-card:nth-child(2)::before { background: var(--driftwood); }
  .platform-card:nth-child(3)::before { background: var(--pesto); }
  .card-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
  .platform-card:nth-child(1) .card-icon { background: rgba(74,128,206,0.16); }
  .platform-card:nth-child(2) .card-icon { background: rgba(175,123,80,0.18); }
  .platform-card:nth-child(3) .card-icon { background: rgba(133,140,77,0.18); }
  .dp-card-title { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
  .dp-card-subtitle { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--tom-thumb); margin-bottom: 15px; }
  .card-desc { font-size: 14px; line-height: 1.7; color: var(--ink-body); }

  /* ═══ WHERE DO I START ═══ */
  .start-finder { padding: 72px 48px; background: var(--beige); text-align: center; }
  .start-finder-header { margin-bottom: 42px; }
.vox-dp .start-finder-header h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(28px, 4vw, 50px); line-height: 1.0;
    color: var(--blue); margin-bottom: 12px;
  }
  .start-finder-header h2 em { font-style: italic; color: var(--pesto); }
  .start-finder-header p { font-size: 14.5px; line-height: 1.7; color: var(--ink-body); max-width: 400px; margin: 0 auto; }
  .start-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.vox-dp .start-option {
    padding: 34px 26px; border-radius: 12px;
    border: 2px solid rgba(54,54,54,0.09);
    background: var(--swirl); text-align: left;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .start-option:hover { border-color: var(--tom-thumb); transform: translateY(-4px); box-shadow: 0 14px 40px rgba(54,54,54,0.10); }
  .start-option-icon { display: block; margin-bottom: 16px; color: var(--tom-thumb); }
  .start-option h3 { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
  .start-option p { font-size: 13.5px; line-height: 1.65; color: var(--ink-body); }
  /* "Start the Pathway" — always live; points at voxchurch.org/app. */
.vox-dp .start-link {
    display: inline-block; margin-top: 16px;
    font-family: var(--sans); font-size: 11px; font-weight: 800;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--tom-thumb); text-decoration: none;
    border-bottom: 2px solid var(--tom-thumb); padding-bottom: 3px;
    transition: opacity .3s ease, border-color .3s ease, color .3s ease;
  }
  a.start-link:hover { border-color: var(--blue-deep); color: var(--blue-deep); }

  /* ═══ CTA ═══ */
  .cta { padding: 88px 48px 76px; background: var(--tom-thumb); text-align: center; position: relative; overflow: hidden; }
.vox-dp .cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 55% at 50% 100%, rgba(133,140,77,0.35) 0%, transparent 70%);
  }
  .cta > * { position: relative; z-index: 2; }
  .cta .eyebrow { display: block; color: var(--thistle); margin-bottom: 20px; }
.vox-dp .cta h2 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(32px, 5vw, 64px); line-height: 0.98;
    color: var(--beige); margin-bottom: 22px;
  }
  .cta h2 em { font-style: italic; color: var(--thistle); }
  .cta-body { font-size: 16px; line-height: 1.8; color: rgba(244,244,217,0.82); max-width: 520px; margin: 0 auto 36px; }
  .cta .app-buttons { justify-content: center; }
  .cta .app-btn { background: rgba(244,244,217,0.10); border-color: rgba(244,244,217,0.20); }
  .cta a.app-btn:hover { background: rgba(244,244,217,0.18); box-shadow: none; }
  .cta .app-note { color: rgba(244,244,217,0.80); }
  .cta-scripture { max-width: 560px; margin: 46px auto 0; padding-top: 34px; border-top: 1px solid rgba(244,244,217,0.20); }
  /* Bumped 15px→18px: a didone's hairlines disappear light-on-dark at 15px.
     Alpha 0.44→0.84 for the same reason. */
  .cta-scripture p { font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1.7; color: rgba(244,244,217,0.84); }
  .scripture-ref { font-family: var(--sans); font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--thistle); margin-top: 14px; display: block; }

  /* ═══ REVEAL ═══ */
  /* ── Entrance choreography ──
     One quiet sequence on load: the swatch strip paints in, then the pill,
     headline lines, and the two hero columns rise in turn. Everything ends
     at rest — nothing loops except the countdown's once-a-second breath. */
  @keyframes dp-riseIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes dp-paintDown {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
  .hero .pill          { animation: dp-riseIn .6s ease both .10s; }
  .hero h1 .line:nth-child(1) { animation: dp-riseIn .7s ease both .20s; }
  .hero h1 .line:nth-child(2) { animation: dp-riseIn .7s ease both .32s; }
  .hero-col-left       { animation: dp-riseIn .7s ease both .48s; }
  .hero-col-right      { animation: dp-riseIn .7s ease both .60s; }
.vox-dp .hero-swatch .swatch-strip span {
    transform-origin: top;
    animation: dp-paintDown .5s ease both;
  }
  .hero-swatch .swatch-strip span:nth-child(1) { animation-delay: .05s; }
  .hero-swatch .swatch-strip span:nth-child(2) { animation-delay: .11s; }
  .hero-swatch .swatch-strip span:nth-child(3) { animation-delay: .17s; }
  .hero-swatch .swatch-strip span:nth-child(4) { animation-delay: .23s; }
  .hero-swatch .swatch-strip span:nth-child(5) { animation-delay: .29s; }
  .hero-swatch .swatch-strip span:nth-child(6) { animation-delay: .35s; }
  .hero-swatch .swatch-strip span:nth-child(7) { animation-delay: .41s; }

  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-d1 { transition-delay: .06s; }
  .reveal-d2 { transition-delay: .12s; }
  .reveal-d3 { transition-delay: .18s; }
  @media (prefers-reduced-motion: reduce) {
    .hero .pill, .hero h1 .line, .hero-col-left, .hero-col-right,
    .vox-dp .hero-swatch .swatch-strip span { animation: none; }
    .vox-dp .stage-row.reveal { transform: none; }
    .vox-dp .stage-row .stage-watermark { opacity: 0.16; transform: translate(0, -50%); transition: none; }
    .vox-dp .cd-num.tick { animation: none; }
    .vox-dp .howto-step:hover .howto-num { transform: none; }
    .vox-dp .reveal { opacity: 1; transform: none; transition: none; }
    .vox-dp .stage-row:hover, .vox-dp .platform-card:hover, .vox-dp .start-option:hover, .vox-dp a.app-btn:hover { transform: none; }
  }

  /* ═══ RESPONSIVE ═══ */
  @media (max-width: 900px) {
    .vox-dp .hero { padding: 52px 24px 44px; }
    .vox-dp .hero-swatch { width: 46px; }
    .vox-dp .hero-inner { padding-right: 62px; }
    .vox-dp .tagline-bar, .vox-dp .heart, .vox-dp .howto, .vox-dp .platform, .vox-dp .start-finder, .vox-dp .testimonies, .vox-dp .cta { padding-left: 24px; padding-right: 24px; }
    .vox-dp .page-nav { justify-content: flex-start; gap: 12px; }
    .vox-dp .stages-header { padding-left: 24px; padding-right: 24px; }
    .vox-dp .stage-row { padding: 26px 24px; }
    .vox-dp .stage-watermark { display: none; }
    .vox-dp .platform-cards, .vox-dp .start-options { grid-template-columns: 1fr; max-width: 420px; }
    .vox-dp .hero-cols { grid-template-columns: 1fr; gap: 34px; }
  }
  @media (max-width: 560px) {
    .vox-dp section[id] { scroll-margin-top: 60px; }
    .vox-dp .hero-swatch { width: 0; }
    .vox-dp .hero-inner { padding-right: 0; }
    .vox-dp .hero h1 { font-size: clamp(34px, 13vw, 70px); }
    .vox-dp .pill { font-size: 20px; padding: 3px 22px 5px; }
    .vox-dp .countdown { gap: 7px; }
    .vox-dp .cd-unit { padding: 11px 6px; }
    .vox-dp .cd-num { font-size: 27px; }
    .vox-dp .cd-lab { font-size: 8px; letter-spacing: 1.1px; }
    .vox-dp .app-buttons { flex-direction: column; align-items: stretch; }
    .vox-dp .app-btn { justify-content: center; }
    .vox-dp .stage-row { padding: 22px 20px; }
    .vox-dp .stage-inner { gap: 16px; }
    .vox-dp .stage-head { gap: 14px; }
    .vox-dp .stage-head { font-size: clamp(26px, 8vw, 34px); }
  }