/*
 * Homepage: sections, app mockups and their animation.
 *
 * Animated elements start hidden only under `html.js`, so the page reads
 * fine without JavaScript. Everything settles to its final state under
 * prefers-reduced-motion (see the end of this file).
 */

/* =========================================================
   Reveal on scroll
   ========================================================= */

.js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--dur-reveal) var(--ease-out) var(--d, 0ms),
        transform var(--dur-reveal) var(--ease-out) var(--d, 0ms);
}

.js [data-reveal="rise"] {
    transform: translateY(60px) scale(0.97);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Loops pause while their section is off screen */
.is-paused,
.is-paused * {
    animation-play-state: paused !important;
}

/* =========================================================
   Illustration drawing
   ========================================================= */

.illo .obj,
.illo .stroke {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.illo .halo,
.illo .ground,
.illo .leaf,
.illo .fruit,
.illo .wave,
.illo .bell-body,
.illo .card-back {
    transform-box: fill-box;
    transform-origin: center;
}

.js .illo:not(.is-drawn) .halo { opacity: 0; scale: 0.7; }
.js .illo:not(.is-drawn) .ground { opacity: 0; scale: 0.4 1; }
.js .illo:not(.is-drawn) .obj { stroke-dashoffset: 1; fill-opacity: 0; }
.js .illo:not(.is-drawn) .stroke { stroke-dashoffset: 1; }
.js .illo:not(.is-drawn) .fill-in { opacity: 0; }
.js .illo:not(.is-drawn) .leaf,
.js .illo:not(.is-drawn) .fruit { scale: 0; }

.illo.is-drawn .halo { transition: opacity 700ms var(--ease-out), scale 900ms var(--ease-out); }
.illo.is-drawn .ground { transition: opacity 600ms var(--ease-out) 150ms, scale 800ms var(--ease-out) 150ms; }
.illo.is-drawn .obj { transition: stroke-dashoffset 1100ms var(--ease-in-out) 250ms, fill-opacity 700ms ease 600ms; }
.illo.is-drawn .stroke { transition: stroke-dashoffset 900ms var(--ease-in-out) 700ms; }
.illo.is-drawn .wave { transition-delay: calc(900ms + var(--n, 0) * 70ms); transition-duration: 400ms; }
.illo.is-drawn .pen { transition-delay: 1100ms; }
.illo.is-drawn .fill-in { transition: opacity 600ms ease 1000ms; }
.illo.is-drawn .leaf {
    transition: scale 650ms var(--ease-spring) calc(1200ms + var(--n, 0) * 90ms);
}
.illo.is-drawn .fruit { transition: scale 500ms var(--ease-spring) 1700ms; }

/* Gentle life once drawn and on screen */
.in-view .illo.is-drawn .leaf {
    animation: sway 7s ease-in-out calc(2000ms + var(--n, 0) * -900ms) infinite;
}

.in-view .illo--recorder.is-drawn .wave,
.in-view .illo--transcript.is-drawn .wave {
    animation: wave 1.4s ease-in-out calc(1600ms + var(--n, 0) * 130ms) infinite;
}

.in-view .illo--bell.is-drawn .bell-body {
    transform-origin: 50% 0%;
    animation: bell 5s ease-in-out 2s infinite;
}

.in-view .illo--bell.is-drawn .ring {
    animation: ring 5s ease-out 2s infinite;
}

.in-view .illo--cards.is-drawn .card-back {
    animation: card-nudge 6s ease-in-out 2s infinite;
}

@keyframes sway {
    0%, 100% { rotate: -5deg; }
    50% { rotate: 5deg; }
}

@keyframes wave {
    0%, 100% { scale: 1 1; }
    50% { scale: 1 0.55; }
}

@keyframes bell {
    0%, 30%, 100% { rotate: 0deg; }
    5% { rotate: 7deg; }
    10% { rotate: -6deg; }
    15% { rotate: 4deg; }
    20% { rotate: -2deg; }
}

@keyframes ring {
    0%, 30%, 100% { opacity: 1; }
    6%, 18% { opacity: 0.2; }
}

@keyframes card-nudge {
    0%, 100% { translate: 0 0; }
    50% { translate: 4px -4px; }
}

/* =========================================================
   Section heads
   ========================================================= */

.section-head {
    display: grid;
    gap: var(--space-4);
    max-width: 760px;
    margin: 0 auto var(--space-16);
    text-align: center;
}

.section-head .lead {
    max-width: 60ch;
    margin-inline: auto;
}

.section-head--start {
    margin-inline: 0;
    text-align: start;
}

.section-head--start .lead {
    margin-inline: 0;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
    position: relative;
    padding-block: clamp(32px, 5vw, 72px) clamp(72px, 8vw, 128px);
}

.hero__grid {
    display: grid;
    gap: var(--space-16);
    align-items: center;
}

@media (min-width: 960px) {
    .hero__grid {
        grid-template-columns: 1.05fr 1fr;
    }
}

.hero__copy {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
}

.hero__title {
    max-width: 14ch;
}

.hero__lead {
    max-width: 52ch;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-2);
}

.hero__secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.hero__secondary svg {
    transition: transform 300ms var(--ease-out);
}

.hero__secondary:hover svg {
    transform: translateY(3px);
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.hero__facts li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hero__facts li::before {
    content: "";
    width: 12px;
    height: 4.5px;
    border-radius: 50%;
    background: var(--leaf);
    transform: rotate(-45deg);
}

.hero__art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 560px;
    isolation: isolate;
}

.hero__halo {
    position: absolute;
    z-index: -2;
    width: min(500px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--scripture-tint);
}

.js .hero__halo {
    animation: halo-in 1400ms var(--ease-out) both;
}

@keyframes halo-in {
    from { opacity: 0; scale: 0.6; }
}

.hero__branch {
    position: absolute;
    z-index: -1;
    top: 9%;
    left: -18%;
    width: 84%;
}

.hero__branch .fruit {
    transform-box: fill-box;
    transform-origin: center;
}

/* Hero branch plays on load rather than on scroll */
.js .hero__branch .draw {
    stroke-dasharray: 1;
    animation: draw 1800ms var(--ease-in-out) 300ms both;
}

.js .hero__branch .leaf {
    transform-box: fill-box;
    transform-origin: center;
    animation:
        grow 800ms var(--ease-spring) calc(700ms + var(--n) * 140ms) both,
        sway 8s ease-in-out calc(2000ms + var(--n) * -700ms) infinite;
}

.js .hero__branch .fruit {
    animation: grow 600ms var(--ease-spring) 1900ms both;
}

@keyframes draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes grow {
    from { scale: 0; }
    to { scale: 1; }
}

.float-chip {
    position: absolute;
    box-shadow: var(--shadow-lift);
    background-clip: padding-box;
    font-size: 0.875rem;
    padding: 10px 16px;
}

.float-chip--a {
    left: 4%;
    bottom: 20%;
    background: var(--surface);
}

.float-chip--b {
    right: 0;
    top: 22%;
    background: var(--surface);
}

/*
 * The drift is slow enough that, unpromoted, the pill snaps from pixel to
 * pixel and repaints its large shadow every frame. Its own compositor layer
 * plus translate3d lets it glide at sub-pixel precision; `alternate` with a
 * sine ease turns around at each end without a seam.
 */
.js .float-chip {
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation:
        chip-in 900ms var(--ease-spring) var(--chip-delay, 1400ms) both,
        chip-float var(--float-dur, 3.2s) cubic-bezier(0.37, 0, 0.63, 1) calc(var(--chip-delay, 1400ms) + 900ms) infinite alternate;
}

.js .float-chip--b {
    --chip-delay: 2100ms;
    --float-dur: 3.7s;
}

@keyframes chip-in {
    from { opacity: 0; scale: 0.6; translate: 0 20px; }
}

@keyframes chip-float {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -8px, 0); }
}

@media (max-width: 959px) {
    .hero__copy {
        justify-items: center;
        text-align: center;
    }

    .hero__actions,
    .hero__facts {
        justify-content: center;
    }

    .hero__art {
        min-height: 0;
        padding-block: var(--space-8);
    }

    .float-chip--a { left: 0; }

    .hero__branch {
        left: -10%;
        width: 80%;
    }
}

/* =========================================================
   Phone mockup
   ========================================================= */

.phone {
    --w: 300px;
    position: relative;
    width: var(--w);
    padding: calc(var(--w) * 0.032);
    border-radius: calc(var(--w) * 0.155);
    background: linear-gradient(145deg, #3a3e34, #1b1d17 45%, #2c3027);
    box-shadow: var(--shadow-phone), inset 0 0 0 1.5px rgb(255 255 255 / 0.12);
}

.phone--hero {
    --w: min(310px, 72vw);
}

.phone--story {
    --w: min(320px, 35vh);
}

.phone--step {
    --w: min(280px, 70vw);
    margin-inline: auto;
}

.phone__screen {
    container-type: inline-size;
    position: relative;
    aspect-ratio: 390 / 844;
    overflow: hidden;
    border-radius: calc(var(--w) * 0.125);
    background: var(--canvas);
    transform: translateZ(0);
}

/* Dynamic Island */
.phone__screen::before {
    content: "";
    position: absolute;
    z-index: 20;
    top: calc(100cqi / 390 * 11);
    left: 50%;
    width: calc(100cqi / 390 * 120);
    height: calc(100cqi / 390 * 35);
    translate: -50% 0;
    border-radius: 999px;
    background: #050505;
}

/* ---------- App canvas ---------- */

.app {
    --pt: calc(100cqi / 390);
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: calc(12 * var(--pt));
    padding: 0 calc(16 * var(--pt));
    overflow: hidden;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: calc(15 * var(--pt));
    line-height: 1.3;
    text-align: start;
    user-select: none;
}

.app svg {
    width: 1em;
    height: 1em;
    flex: none;
}

.m-status {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(54 * var(--pt));
    padding: calc(4 * var(--pt)) calc(18 * var(--pt)) 0 calc(22 * var(--pt));
    font-size: calc(16 * var(--pt));
    font-weight: 600;
}

.m-status svg {
    width: calc(68 * var(--pt));
    height: calc(14 * var(--pt));
}

.m-toolbar {
    display: flex;
    justify-content: space-between;
    margin-top: calc(-4 * var(--pt));
}

.m-toolbar--end {
    justify-content: flex-end;
    gap: calc(10 * var(--pt));
}

.m-round {
    display: inline-grid;
    place-items: center;
    width: calc(44 * var(--pt));
    height: calc(44 * var(--pt));
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 calc(4 * var(--pt)) calc(14 * var(--pt)) rgb(0 0 0 / 0.08);
    font-size: calc(19 * var(--pt));
}

.m-round--brand {
    background: var(--brand-fill);
    color: var(--on-brand-fill);
}

.m-round--sm {
    width: calc(36 * var(--pt));
    height: calc(36 * var(--pt));
    font-size: calc(15 * var(--pt));
}

.m-round--lg {
    width: calc(58 * var(--pt));
    height: calc(58 * var(--pt));
    font-size: calc(22 * var(--pt));
}

.m-round--wide {
    display: inline-flex;
    gap: calc(18 * var(--pt));
    width: auto;
    padding-inline: calc(16 * var(--pt));
}

.m-large-title {
    font-size: calc(32 * var(--pt));
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.m-navbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: calc(8 * var(--pt));
    min-height: calc(36 * var(--pt));
}

.m-navbar__title {
    text-align: center;
    font-weight: 600;
    font-size: calc(16 * var(--pt));
}

.m-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: calc(3 * var(--pt));
    border-radius: 999px;
    background: var(--surface-sunken);
    font-weight: 600;
    font-size: calc(14 * var(--pt));
    text-align: center;
}

.m-segmented span {
    padding: calc(6 * var(--pt));
    border-radius: 999px;
    color: var(--ink-2);
}

.m-segmented .is-on {
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: 0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgb(0 0 0 / 0.1);
}

.m-detail-tabs {
    display: flex;
    gap: calc(4 * var(--pt));
    margin-right: calc(-16 * var(--pt));
    padding: calc(3 * var(--pt));
    border-radius: 999px 0 0 999px;
    background: var(--surface-sunken);
    font-size: calc(14 * var(--pt));
    font-weight: 500;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
}

.m-detail-tabs span {
    padding: calc(7 * var(--pt)) calc(13 * var(--pt));
    border-radius: 999px;
}

.m-detail-tabs .is-on {
    background: var(--surface-raised);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 calc(2 * var(--pt)) calc(6 * var(--pt)) rgb(0 0 0 / 0.1);
}

.m-card {
    display: flex;
    gap: calc(12 * var(--pt));
    padding: calc(14 * var(--pt));
    border-radius: calc(22 * var(--pt));
    background: var(--surface);
    box-shadow: 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgb(0 0 0 / 0.06);
}

.m-card > span:last-child {
    display: grid;
    gap: calc(2 * var(--pt));
    min-width: 0;
}

.m-card-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: calc(18 * var(--pt));
    line-height: 1.2;
}

.m-meta {
    display: inline-flex;
    align-items: center;
    gap: calc(4 * var(--pt));
    font-size: calc(13 * var(--pt));
    color: var(--ink-2);
}

.m-meta b {
    font-weight: 600;
}

.m-ref {
    color: var(--scripture);
    font-weight: 600;
}

.m-label {
    font-size: calc(13 * var(--pt));
    font-weight: 600;
    color: var(--brand);
}

.m-label--clay {
    color: var(--scripture);
}

.m-tile {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(44 * var(--pt));
    height: calc(44 * var(--pt));
    border-radius: calc(12 * var(--pt));
    background: var(--brand-tint);
}

/* Live “transcribing” equalizer */
.m-eq {
    display: flex;
    align-items: center;
    gap: calc(2.5 * var(--pt));
    height: calc(18 * var(--pt));
}

.m-eq i {
    width: calc(2.5 * var(--pt));
    height: 100%;
    border-radius: 2px;
    background: var(--brand);
    animation: eq 1.1s ease-in-out infinite;
}

.m-eq i:nth-child(1) { height: 40%; animation-delay: -0.2s; }
.m-eq i:nth-child(2) { height: 75%; animation-delay: -0.5s; }
.m-eq i:nth-child(3) { animation-delay: -0.1s; }
.m-eq i:nth-child(4) { height: 70%; animation-delay: -0.7s; }
.m-eq i:nth-child(5) { height: 40%; animation-delay: -0.35s; }

@keyframes eq {
    0%, 100% { scale: 1 1; }
    50% { scale: 1 0.35; }
}

.m-processing {
    align-items: center;
    padding: calc(10 * var(--pt)) calc(14 * var(--pt));
}

.m-featured {
    position: relative;
    display: grid;
    gap: calc(8 * var(--pt));
    padding: calc(18 * var(--pt)) calc(18 * var(--pt)) calc(18 * var(--pt));
    border-radius: calc(26 * var(--pt));
    background: var(--brand-tint);
    overflow: hidden;
}

.m-featured__sprig {
    position: absolute;
    top: calc(8 * var(--pt));
    right: calc(-6 * var(--pt));
    width: calc(96 * var(--pt)) !important;
    height: auto !important;
    opacity: 0.6;
}

.m-featured__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: calc(26 * var(--pt));
    line-height: 1.1;
}

.m-pull {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: calc(17 * var(--pt));
    line-height: 1.4;
}

.m-buttons {
    display: flex;
    gap: calc(8 * var(--pt));
    margin-top: calc(4 * var(--pt));
}

.m-btn {
    display: inline-grid;
    place-items: center;
    padding: calc(10 * var(--pt)) calc(18 * var(--pt));
    border-radius: 999px;
    background: var(--surface);
    font-weight: 600;
    font-size: calc(15 * var(--pt));
    box-shadow: 0 calc(3 * var(--pt)) calc(10 * var(--pt)) rgb(0 0 0 / 0.06);
}

.m-btn--brand {
    background: var(--brand-fill);
    color: var(--on-brand-fill);
}

.m-month {
    margin-top: calc(6 * var(--pt));
    font-family: var(--font-serif);
    font-size: calc(22 * var(--pt));
}

.m-month span {
    font-family: var(--font-sans);
    font-size: calc(15 * var(--pt));
    color: var(--ink-2);
}

.m-sermon {
    align-items: start;
}

.m-date {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(48 * var(--pt));
    height: calc(54 * var(--pt));
    border-radius: calc(12 * var(--pt));
    background: var(--brand-tint);
    font-family: var(--font-serif);
    font-size: calc(20 * var(--pt));
    line-height: 1;
    padding-top: calc(6 * var(--pt));
}

.m-date small {
    font-family: var(--font-sans);
    font-size: calc(10 * var(--pt));
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--brand);
}

.m-excerpt {
    font-size: calc(13.5 * var(--pt));
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.m-tabbar {
    position: absolute;
    left: calc(14 * var(--pt));
    right: calc(14 * var(--pt));
    bottom: calc(22 * var(--pt));
    display: flex;
    align-items: center;
    gap: calc(10 * var(--pt));
}

.m-tabs {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: calc(4 * var(--pt));
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgb(0 0 0 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.25);
}

.m-tabs span {
    display: grid;
    justify-items: center;
    gap: calc(2 * var(--pt));
    padding: calc(6 * var(--pt)) 0;
    border-radius: 999px;
    font-size: calc(10.5 * var(--pt));
    font-weight: 600;
}

.m-tabs svg {
    font-size: calc(22 * var(--pt));
}

.m-tabs .is-on {
    background: var(--brand-tint);
    color: var(--brand);
}

.m-tabbar .m-round {
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* =========================================================
   Story scenes
   ========================================================= */

.scene {
    opacity: 0;
    visibility: hidden;
    transform: translateY(3%) scale(0.98);
    transition: opacity 500ms ease, transform 700ms var(--ease-out), visibility 0s 700ms;
}

.scene.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 500ms ease, transform 700ms var(--ease-out), visibility 0s;
}

/* Hidden-until-playing states (JS only) */
.js .scene:not(.is-playing) :is(.m-transcript li, .m-quote, .m-also, .m-pad[style], .m-journal, .m-push, .m-sheet) {
    opacity: 0;
}

/* --- Record --- */

.m-notes {
    flex: 0 0 auto;
    height: 38%;
    flex-direction: column;
    gap: calc(8 * var(--pt));
    min-height: 0;
    padding: calc(18 * var(--pt));
    box-shadow: 0 0 0 calc(1.5 * var(--pt)) var(--brand), 0 calc(6 * var(--pt)) calc(20 * var(--pt)) rgb(0 0 0 / 0.06);
}

.m-notes__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.m-notes__body {
    font-family: var(--font-serif);
    font-size: calc(16 * var(--pt));
    line-height: 1.55;
    white-space: pre-line;
}

.m-caret {
    display: inline-block;
    width: calc(2 * var(--pt));
    height: 1.1em;
    margin-left: 1px;
    vertical-align: text-bottom;
    background: var(--brand);
    animation: caret 1s steps(1) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

/* Live input level: bars ripple outward from the middle */
.m-live-wave {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4 * var(--pt));
    min-height: 0;
}

.m-live-wave i {
    width: calc(4 * var(--pt));
    height: calc(56 * var(--pt));
    border-radius: 99px;
    background: var(--ornament);
    opacity: 0.85;
    scale: 1 0.12;
    animation: live-wave 1.3s ease-in-out infinite;
    animation-delay: calc(-0.11s * var(--k));
}

.m-live-wave i:nth-child(3n) { animation-duration: 1.7s; }
.m-live-wave i:nth-child(4n+1) { animation-duration: 0.9s; }

@keyframes live-wave {
    0%, 100% { scale: 1 0.12; }
    50% { scale: 1 0.9; }
}

.m-rec-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 * var(--pt));
    font-weight: 600;
    font-size: calc(14 * var(--pt));
    color: var(--ink-2);
}

.m-dot {
    width: calc(9 * var(--pt));
    height: calc(9 * var(--pt));
    border-radius: 50%;
    background: #D2463A;
    animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink {
    50% { opacity: 0.25; }
}

.m-timer {
    text-align: center;
    font-family: var(--font-mono);
    font-size: calc(40 * var(--pt));
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.m-rec-controls {
    display: flex;
    justify-content: center;
    gap: calc(44 * var(--pt));
    padding-bottom: calc(40 * var(--pt));
}

.m-rec-btn {
    position: relative;
    display: grid;
    justify-items: center;
    gap: calc(8 * var(--pt));
    font-size: calc(12 * var(--pt));
    font-weight: 600;
    color: var(--ink-2);
}

.m-rec-btn__face {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: calc(72 * var(--pt));
    height: calc(72 * var(--pt));
    border-radius: 50%;
    background: var(--glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 calc(6 * var(--pt)) calc(18 * var(--pt)) rgb(0 0 0 / 0.12), inset 0 0 0 1px rgb(255 255 255 / 0.3);
    color: var(--ink);
    font-size: calc(26 * var(--pt));
}

.m-rec-btn--save .m-rec-btn__face {
    background: var(--brand-fill);
    color: var(--on-brand-fill);
}

.m-rec-btn__ring {
    position: absolute;
    top: 0;
    width: calc(72 * var(--pt));
    height: calc(72 * var(--pt));
    border-radius: 50%;
    background: var(--brand-tint);
    box-shadow: 0 0 0 calc(2 * var(--pt)) rgb(75 93 51 / 0.35);
    animation: mic-level 2.2s ease-in-out infinite;
}

@keyframes mic-level {
    0%, 100% { scale: 1.08; }
    20% { scale: 1.26; }
    35% { scale: 1.12; }
    55% { scale: 1.3; }
    75% { scale: 1.15; }
}

/* --- Transcribe --- */

.m-push {
    position: absolute;
    z-index: 30;
    top: calc(10 * var(--pt));
    left: calc(10 * var(--pt));
    right: calc(10 * var(--pt));
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: calc(10 * var(--pt));
    align-items: start;
    padding: calc(12 * var(--pt));
    border-radius: calc(22 * var(--pt));
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: 0 calc(10 * var(--pt)) calc(30 * var(--pt)) rgb(0 0 0 / 0.2);
    font-size: calc(13.5 * var(--pt));
}

.m-push img {
    width: calc(38 * var(--pt));
    height: calc(38 * var(--pt));
    border-radius: calc(9 * var(--pt));
}

.m-push > span {
    display: grid;
    gap: 1px;
}

.m-push small {
    font-size: calc(12 * var(--pt));
    color: var(--ink-2);
}

.scene.is-playing .m-push {
    animation: push 4.8s var(--ease-out) 300ms both;
}

@keyframes push {
    0% { opacity: 0; translate: 0 -130%; }
    12%, 82% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 -130%; }
}

.m-searchfield {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--pt));
    padding: calc(10 * var(--pt)) calc(14 * var(--pt));
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--ink-2);
}

.m-transcript-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m-chip {
    gap: calc(5 * var(--pt));
    padding: calc(6 * var(--pt)) calc(12 * var(--pt));
    font-size: calc(12.5 * var(--pt));
}

.m-transcript {
    display: grid;
    gap: calc(6 * var(--pt));
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-serif);
    font-size: calc(15.5 * var(--pt));
    line-height: 1.5;
}

.m-transcript li {
    display: grid;
    grid-template-columns: calc(44 * var(--pt)) 1fr;
    padding: calc(6 * var(--pt)) calc(8 * var(--pt));
    margin-inline: calc(-8 * var(--pt));
    border-radius: calc(12 * var(--pt));
    transition: background-color 600ms;
}

.m-transcript time {
    padding-top: calc(3 * var(--pt));
    font-family: var(--font-mono);
    font-size: calc(12 * var(--pt));
    color: var(--ink-2);
}

.m-transcript mark {
    background: var(--scripture-tint);
    color: var(--scripture);
    border-radius: 4px;
    padding-inline: 2px;
}

.scene.is-playing .m-transcript li {
    animation: line-in 700ms var(--ease-out) calc(1100ms + var(--i) * 380ms) both;
}

.scene.is-playing .m-transcript .is-hit {
    animation:
        line-in 700ms var(--ease-out) calc(1100ms + var(--i) * 380ms) both,
        hit 900ms ease 3600ms both;
}

@keyframes line-in {
    from { opacity: 0; translate: 0 calc(12 * var(--pt)); }
}

@keyframes hit {
    to { background: var(--brand-tint); }
}

/* --- Summary --- */

.m-pad {
    display: grid;
    gap: calc(4 * var(--pt));
    padding-inline: calc(4 * var(--pt));
}

.m-pad-x {
    padding-inline: calc(4 * var(--pt));
}

.m-display {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: calc(32 * var(--pt));
    line-height: 1.1;
}

.m-display-sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: calc(19 * var(--pt));
    color: var(--ink-2);
}

.m-meta--book svg {
    color: var(--scripture);
}

.m-sprig-rule {
    display: flex;
    align-items: center;
    gap: calc(8 * var(--pt));
    width: calc(150 * var(--pt));
    margin: calc(6 * var(--pt)) auto 0;
    color: var(--ornament);
}

.m-sprig-rule::before,
.m-sprig-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.m-sprig-rule svg {
    width: calc(30 * var(--pt));
    height: calc(16 * var(--pt));
}

.m-quote {
    display: grid;
    gap: calc(6 * var(--pt));
    padding: calc(16 * var(--pt)) calc(20 * var(--pt));
    border-radius: calc(26 * var(--pt));
    background: var(--scripture-tint);
}

.m-quote__mark {
    height: calc(18 * var(--pt));
    font-family: var(--font-serif);
    font-size: calc(40 * var(--pt));
    line-height: 1;
    color: var(--ornament);
}

.m-quote p {
    font-family: var(--font-serif);
    font-size: calc(21 * var(--pt));
    line-height: 1.35;
}

.m-quote__foot {
    display: flex;
    justify-content: space-between;
    font-size: calc(13 * var(--pt));
    color: var(--ink-2);
}

.m-also {
    font-size: calc(13 * var(--pt));
    color: var(--ink-2);
    padding-inline: calc(4 * var(--pt));
}

.m-section {
    font-family: var(--font-serif);
    font-size: calc(22 * var(--pt));
}

.m-reading {
    font-family: var(--font-serif);
    font-size: calc(16 * var(--pt));
    line-height: 1.6;
}

.m-reading sup {
    font-family: var(--font-sans);
    font-size: 0.6em;
    font-weight: 600;
    color: var(--brand);
    margin-right: 2px;
}

.scene.is-playing :is(.m-quote, .m-also, .m-pad[style]) {
    animation: line-in 800ms var(--ease-out) calc(400ms + var(--i) * 300ms) both;
}

.m-ref--pulse {
    position: relative;
    border-radius: 4px;
}

.scene.is-playing .m-ref--pulse {
    animation: ref-pulse 1.2s ease 2.2s 2 both;
}

@keyframes ref-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; background: transparent; }
    40% { box-shadow: 0 0 0 4px var(--scripture-tint); background: var(--scripture-tint); }
}

.m-sheet {
    position: absolute;
    z-index: 10;
    left: calc(8 * var(--pt));
    right: calc(8 * var(--pt));
    bottom: calc(8 * var(--pt));
    display: grid;
    gap: calc(8 * var(--pt));
    padding: calc(10 * var(--pt)) calc(20 * var(--pt)) calc(28 * var(--pt));
    border-radius: calc(34 * var(--pt));
    background: var(--surface);
    box-shadow: 0 calc(-10 * var(--pt)) calc(40 * var(--pt)) rgb(0 0 0 / 0.18);
}

.m-sheet__grabber {
    justify-self: center;
    width: calc(36 * var(--pt));
    height: calc(5 * var(--pt));
    border-radius: 999px;
    background: var(--hairline);
}

.scene.is-playing .m-sheet {
    animation: sheet-up 900ms var(--ease-out) 4.4s both;
}

@keyframes sheet-up {
    from { opacity: 1; translate: 0 110%; }
    to { opacity: 1; translate: 0 0; }
}

/* --- Study --- */

.m-cards-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.m-progress {
    height: calc(6 * var(--pt));
    border-radius: 999px;
    background: var(--surface-sunken);
    overflow: hidden;
}

.m-progress i {
    display: block;
    width: 33.3%;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-fill);
    transform-origin: left;
}

.scene.is-playing .m-progress i {
    animation: progress 1s var(--ease-out) 300ms both;
}

@keyframes progress {
    from { scale: 0 1; }
}

.m-chips {
    display: flex;
    gap: calc(6 * var(--pt));
    margin-right: calc(-16 * var(--pt));
    overflow: hidden;
}

.m-chips .tag--outline {
    background: var(--surface);
}

.m-flip {
    flex: 1;
    min-height: 0;
    max-height: calc(320 * var(--pt));
    perspective: calc(1200 * var(--pt));
}

.m-flip__inner {
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
}

.scene.is-playing .m-flip__inner {
    animation: flip 7s var(--ease-in-out) 1.2s infinite;
}

@keyframes flip {
    0%, 30% { transform: rotateY(0); }
    40%, 80% { transform: rotateY(180deg); }
    90%, 100% { transform: rotateY(360deg); }
}

.m-flip__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--pt));
    padding: calc(22 * var(--pt));
    border-radius: calc(22 * var(--pt));
    background: var(--surface);
    box-shadow: 0 calc(10 * var(--pt)) calc(26 * var(--pt)) rgb(0 0 0 / 0.08);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.m-flip__face--back {
    transform: rotateY(180deg);
}

.m-flip__tags {
    display: flex;
    gap: calc(6 * var(--pt));
}

.m-flip__q {
    flex: 1;
    display: grid;
    align-items: center;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: calc(24 * var(--pt));
    line-height: 1.25;
}

.m-flip__face--back .m-reading {
    flex: 1;
    display: grid;
    align-items: center;
    font-size: calc(19 * var(--pt));
}

.m-flip__foot {
    justify-content: center;
}

.m-card-controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(8 * var(--pt));
    padding-bottom: calc(36 * var(--pt));
}

.m-card-controls .m-btn {
    padding-inline: 0;
}

/* --- Reflect --- */

.m-journal {
    flex-direction: column;
    gap: calc(8 * var(--pt));
    padding: calc(20 * var(--pt));
}

.m-journal__q {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: calc(19 * var(--pt));
    line-height: 1.3;
}

.m-journal__a {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: calc(15.5 * var(--pt));
    line-height: 1.5;
    color: var(--ink-2);
    min-height: 4.5em;
}

.m-journal__status {
    display: flex;
    justify-content: space-between;
    padding-top: calc(10 * var(--pt));
    border-top: 1px solid var(--hairline);
    font-size: calc(14 * var(--pt));
    font-weight: 600;
}

.m-answered,
.m-write {
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--pt));
}

.m-answered { color: var(--success); }
.m-write { color: var(--brand); }

/* “Write your reflection” turns into “Answered” once the entry is typed */
.m-journal .m-answered { display: none; }
.m-journal.is-done .m-answered { display: inline-flex; animation: grow 500ms var(--ease-spring) both; }
.m-journal.is-done .m-write:not(.is-shown) { display: none; }
.m-journal.is-done .m-caret { display: none; }

.scene.is-playing .m-journal {
    animation: line-in 800ms var(--ease-out) calc(300ms + var(--i) * 250ms) both;
}

/* =========================================================
   Scripture band
   ========================================================= */

.scripture-band {
    position: relative;
    padding-block: clamp(72px, 9vw, 140px);
    background: var(--scripture-tint);
    overflow: hidden;
}

.scripture-band__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-8);
    max-width: 980px;
    text-align: center;
}

.scripture-band__mark {
    width: 40px;
    height: 30px;
}

.scripture-band__quote {
    display: grid;
    gap: var(--space-6);
}

.scripture-band__quote p {
    font-family: var(--font-serif);
    font-size: var(--text-scripture);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.scripture-band__quote cite {
    font-style: normal;
    color: var(--ink-2);
}

.scripture-band__note {
    max-width: 52ch;
    color: var(--ink-2);
    font-size: var(--text-lead);
}

.word {
    display: inline-block;
    transition:
        opacity 900ms var(--ease-out) calc(var(--i) * 85ms),
        filter 900ms var(--ease-out) calc(var(--i) * 85ms),
        translate 900ms var(--ease-out) calc(var(--i) * 85ms);
}

.js [data-words]:not(.is-visible) .word {
    opacity: 0.12;
    filter: blur(4px);
    translate: 0 0.15em;
}

/* =========================================================
   Week story layout
   ========================================================= */

.story {
    position: relative;
}

.story__steps {
    display: grid;
    gap: var(--space-16);
    margin: 0;
    padding: 0;
    list-style: none;
}

.story-step__text {
    display: grid;
    gap: var(--space-4);
    max-width: 46ch;
}

.story-step__text > p:not(.story-step__day) {
    color: var(--ink-2);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.story-step__day {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-label);
    font-weight: 600;
    color: var(--brand);
}

.story-step__day span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-tint);
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background-color 400ms, color 400ms;
}

.story-step.is-active .story-step__day span {
    background: var(--brand-fill);
    color: var(--on-brand-fill);
}

.story-step__phone {
    display: none;
}

.story__stage {
    display: grid;
    place-items: center;
    margin-top: var(--space-12);
}

@media (min-width: 900px) {
    .story__layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
        align-items: start;
    }

    .story__steps {
        gap: 0;
        padding-block: 8vh 22vh;
    }

    .story-step .h3 {
        font-size: clamp(1.75rem, 1.1rem + 1.1vw, 2.375rem);
        line-height: 1.15;
    }

    .story-step {
        display: flex;
        align-items: center;
        min-height: 82vh;
    }

    .js .story-step__text {
        opacity: 0.32;
        transition: opacity 500ms ease;
    }

    .js .story-step.is-active .story-step__text {
        opacity: 1;
    }

    .story__stage {
        position: sticky;
        top: 0;
        height: 100vh;
        margin-top: 0;
    }

    .story__stage::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: min(460px, 100%);
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--brand-tint);
    }
}

@media (max-width: 899px) {
    .js .story__stage {
        display: none;
    }

    .js .story-step__phone {
        display: block;
        margin-top: var(--space-8);
        padding-block: var(--space-6);
        background: radial-gradient(circle at center, var(--brand-tint) 0 55%, transparent 56%);
    }

    .story-step__text {
        margin-inline: auto;
    }

    .story__steps {
        gap: var(--space-24);
    }
}

/* =========================================================
   Features
   ========================================================= */

.features {
    background: var(--surface);
    border-block: 1px solid var(--hairline);
}

.bento {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 720px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 720px) {
    .feature--wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .bento {
        grid-template-columns: repeat(3, 1fr);
    }

    .feature--wide {
        grid-column: span 2;
    }

    .feature--reverse {
        grid-column: 1 / -1;
    }
}

.feature {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background: var(--canvas);
    transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}

.feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.feature .illo {
    width: 100%;
    max-width: 240px;
    margin: 0 auto var(--space-2);
}

.feature p {
    color: var(--ink-2);
}

@media (min-width: 720px) {
    .feature--wide {
        grid-template-columns: minmax(180px, 1fr) 1.2fr;
        align-items: center;
        gap: var(--space-8);
    }

    .feature--wide > div {
        display: grid;
        gap: var(--space-3);
    }

    .feature--wide .illo {
        max-width: 300px;
        margin: 0;
    }

    .feature--reverse .illo {
        order: 2;
        justify-self: end;
    }
}

.feature--reverse {
    background: var(--scripture-tint);
}

.feature-row {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-5);
}

@media (min-width: 720px) {
    .feature-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .feature-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mini {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

.mini .illo {
    width: 88px;
    flex: none;
}

.mini h3 {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 500;
}

.mini p {
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.mini__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 88px;
    height: 70px;
    color: var(--brand);
    background: radial-gradient(circle, var(--brand-tint) 0 34px, transparent 35px);
}

/* =========================================================
   Personas
   ========================================================= */

.personas__grid {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 860px) {
    .personas__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.persona {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--radius-xl);
    background: var(--brand-tint);
}

.persona--clay {
    background: var(--scripture-tint);
}

.persona .illo {
    width: 200px;
    margin-left: -16px;
}

.persona .illo .halo {
    fill: var(--surface);
}

.persona__sub {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1875rem;
    color: var(--ink-2);
}

.persona .leaf-list {
    margin-top: var(--space-2);
}

/* =========================================================
   FAQ
   ========================================================= */

.faq__layout {
    display: grid;
    gap: var(--space-12);
}

@media (min-width: 960px) {
    .faq__layout {
        grid-template-columns: 0.8fr 1.2fr;
        align-items: start;
    }

    .faq__layout .section-head {
        position: sticky;
        top: 120px;
    }
}

.faq__layout .section-head {
    margin-bottom: 0;
}

.faq .lead a {
    color: var(--brand);
    font-weight: 600;
}

.faq__list {
    display: grid;
    gap: var(--space-3);
}

.faq-item {
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: box-shadow 300ms;
}

.faq-item summary {
    position: relative;
    display: block;
    padding: var(--space-5) calc(var(--space-6) + 32px) var(--space-5) var(--space-6);
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    border-radius: inherit;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "";
    position: absolute;
    right: var(--space-6);
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--brand);
    border-bottom: 2px solid var(--brand);
    transform: rotate(45deg);
    transition: transform 350ms var(--ease-out), margin 350ms var(--ease-out);
}

.faq-item[open]:not(.is-closing) summary::after {
    margin-top: -2px;
    transform: rotate(225deg);
}

.faq-item summary:hover {
    color: var(--brand);
}

.faq-item__body {
    overflow: hidden;
}

.faq-item__body p {
    padding: 0 var(--space-6) var(--space-6);
    color: var(--ink-2);
    line-height: 1.65;
}

.faq-item__body a {
    color: var(--brand);
    font-weight: 600;
}

/* =========================================================
   Closing call to action
   ========================================================= */

.cta {
    padding-block: 0 var(--section-y);
}

.cta__inner {
    width: calc(100% - 2 * var(--gutter));
    max-width: calc(var(--max-width) - 2 * var(--gutter));
    display: grid;
    gap: var(--space-8);
    align-items: center;
    padding-block: clamp(40px, 6vw, 80px);
    border-radius: 36px;
    background: var(--brand-tint);
    text-align: center;
}

@media (min-width: 860px) {
    .cta__inner {
        grid-template-columns: 1fr 1.2fr;
        padding-inline: clamp(32px, 5vw, 80px);
        text-align: start;
    }
}

.cta__art .illo {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
}

.cta__art .illo .halo {
    fill: var(--surface);
}

.cta__copy {
    display: grid;
    gap: var(--space-5);
    justify-items: center;
}

@media (min-width: 860px) {
    .cta__copy {
        justify-items: start;
    }
}

.cta__fine {
    font-size: var(--text-label);
    color: var(--ink-2);
}

/* =========================================================
   Reduced motion: show every final state, no movement
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }

    .js [data-reveal],
    .js [data-words] .word,
    .js .illo .halo,
    .js .illo .ground,
    .js .illo .leaf,
    .js .illo .fruit,
    .js .scene :is(.m-transcript li, .m-quote, .m-also, .m-pad[style], .m-journal, .m-sheet) {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        scale: none !important;
        filter: none !important;
    }

    .js .illo .obj,
    .js .illo .stroke {
        stroke-dashoffset: 0 !important;
        fill-opacity: 1 !important;
    }

    .js .illo .fill-in {
        opacity: 1 !important;
    }

    .m-push,
    .m-caret {
        display: none !important;
    }

    .feature:hover,
    .btn:hover,
    .store-badge:hover {
        transform: none;
    }
}