/* ==== Homepage shared motion + layout ==== */

.home-section {
    padding: 45px 0;
}

/* Tile-bearing sections get a gray backdrop for contrast against their white cards.
   Each is its own rule so any one can be flipped back to white independently. */
#value-grid {
    background: #f4f4f4;
}

#build-for-exploration {
    background: var(--bg-secondary);
}

#memory-book {
    background: #f4f4f4;
}

.bfe-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2.5rem;
}

#build-for-exploration .bfe-title {
    font-size: 44px;
    margin: 0 0 -3px;
}

.bfe-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin: 0px 0px 28px 0px;
}

.bfe-cta-group {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 8px;
}

.bfe-cta-group a {
    padding: 12px 32px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .bfe-cta-group { flex-direction: column; }
    .bfe-cta-group a { white-space: normal; }
    .book-teaser-text > p { position: relative; }
    .book-teaser .mv-info-tip { position: static; }
    .book-teaser .mv-info-tip-bubble {
        left: 0;
        bottom: calc(1.6em + 10px);
        width: min(230px, calc(100% - 28px));
        transform: none;
    }
    .book-teaser .mv-info-tip-bubble::after { display: none; }
}

/* 
#packaging {
    background: var(--bg-secondary);
}
*/

/* Branded section template — brand-blue background with a white h2 heading.
   Everything else (cards, body text) is untouched. */
.section-branded {
    background: linear-gradient(135deg, #055592 0%, #1A6DAE 100%);
}

.section-branded h2 {
    color: #ffffff;
}

.reveal {
    overflow-anchor: none;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.home-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
    display: none;
}

.home-section h2 {
    font-size: 2.2rem;
    margin: 0 0 1rem;
}

.home-lead {
    color: var(--text-muted);
    font-size: 16.5px;
    max-width: 640px;
}

#problem .home-lead,
#value-grid .home-lead,
#packaging .home-lead {
    max-width: none;
}

/* "What is it?" intro card - bordered wrapper around the value-grid's
   heading/paragraph and its 3 supporting points, sitting on the section's
   gray backdrop like the .value-card tiles below it. */
.archive-intro-card {
    background: var(--bg-main);
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 28px;
}

.archive-intro-top {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.archive-intro-heading {
    flex: 0 0 auto;
    max-width: 320px;
}

.archive-intro-heading h3 {
    font-size: 49px;
    font-weight: 800;
    margin: 0;
    color: #055592;
}

.archive-intro-top .home-lead {
    margin: 0;
    flex: 1 1 auto;
}

.archive-intro-divider {
    border-top: 1px solid #d4d4d4;
    margin: 32px 0;
}

.archive-intro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.archive-intro-card + .archive-intro-card {
    margin-top: 24px;
}

.archive-intro-card-split {
    display: flex;
    gap: 32px;
    align-items: stretch;
}

.archive-intro-image-slot {
    flex: 0 0 41%;
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border-radius: 8px;
}

.archive-intro-image {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.archive-intro-image.active {
    opacity: 1;
    z-index: 1;
}

.archive-intro-items-stack {
    flex: 1 1 59%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.archive-intro-item {
    display: flex;
    align-items: stretch;
    gap: 14px;
    background: var(--bg-secondary);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
}

.archive-intro-item-icon {
    flex: 0 0 auto;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archive-intro-emoji {
    font-size: 43px;
    line-height: 1;
    margin-left: 14px;
}

.archive-intro-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    margin-left: 20px
}

.archive-intro-item-title {
    font-weight: 700;
    color: var(--text-main);
    font-size: 1.05rem;
    margin: 0;
}

.archive-intro-item p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Stacked split card: image on top, feature tiles full-width below */
@media (max-width: 1024px) {
    .archive-intro-card-split {
        flex-direction: column;
    }

    .archive-intro-image-slot {
        flex: none;
        width: 100%;
        aspect-ratio: 1152 / 928;
        /* Base min-height would override the ratio on narrow screens */
        min-height: 0;
    }

    /* contain never crops, but leaves the image's own square corners visible
       when the box ratio drifts from the image's - known trade-off, revisit */
    .archive-intro-image {
        object-fit: contain;
    }
}

/* Above phone width the slot is wide enough that min-height never overrides the
   ratio, so cover fills the box exactly and the slot's border-radius applies */
@media (min-width: 641px) and (max-width: 1024px) {
    .archive-intro-image {
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .archive-intro-card {
        padding: 24px;
    }

    .archive-intro-top {
        flex-direction: column;
        gap: 16px;
    }

    .archive-intro-heading {
        max-width: none;
    }

    .archive-intro-divider {
        margin: 24px 0;
    }

    .archive-intro-grid {
        grid-template-columns: 1fr;
    }
}

.graphic-placeholder {
    border: 2px dashed #ccc;
    border-radius: 8px;
    background: #fafafa;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.95rem;
    padding: 2rem;
    min-height: 220px;
}

.problem-image {
    display: block;
    width: 100%;
    aspect-ratio: 2032 / 528;
    object-fit: cover;
    border-radius: 8px;
}

/* Value grid (2 rows x 3 columns) */
.value-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 2.5rem;
}

.value-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    position: relative;
}

.value-card-pill {
    position: absolute;
    top: -12px;
    right: 24px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border: 1px solid;
}

.value-card-pill-both {
    background: #f0f4f8;
    color: #2965e8;
    border-color: #2965e8;
}

.value-card-pill-stories {
    background: #eefff3;
    color: #149644;
    border-color: #149644;
}

.value-card-image {
    display: block;
    width: 100%;
    height: 182px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.value-card h3 {
    font-size: 1.15rem;
    color: var(--text-main);
    margin: 0 0 10px;
}

.value-card p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.feature-card {
    position: relative;
}

.feature-card .btn-primary {
    padding: 10px 35px;
    width: stretch;
    text-align: center;
}

.feature-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.feature-card-header h3 {
    margin: 0;
    flex: 1;
}

.feature-card-badge-subtle {
    background: #0070F3;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.feature-card-featured {
    position: relative;
    border: 2px solid var(--accent-primary);
}

.feature-card-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--accent-primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pricing cards on tablet: 2-up with the third centered below.
   Grid also equalizes widths — the Stories card's nowrap badge gives it a
   larger min-content width, so it shrinks less than the others under flex. */
@media (min-width: 641px) and (max-width: 1024px) {
    #packaging .features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    #packaging .feature-card {
        max-width: none;
    }

    #packaging .feature-card:last-child {
        grid-column: 1 / -1;
        width: calc((100% - 1.5rem) / 2);
        justify-self: center;
    }
}

@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
    #pricing .features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 1.5rem;
    }

    #pricing .feature-card {
        max-width: none;
    }

    #pricing .feature-card:last-child {
        grid-column: 1 / -1;
        width: calc((100% - 1.5rem) / 2);
        justify-self: center;
    }
}

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

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

.book-teaser {
    display: grid;
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 40px;
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.book-teaser-image {
    display: block;
    width: 100%;
    aspect-ratio: 982 / 677;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 9px;
    transform: translateX(20px);
}

.book-teaser-text {
    margin-left: 30px;
}

.book-teaser-text h3 {
    font-size: 1.55rem;
    color: var(--text-main);
    margin: 0 0 10px;
}

.book-teaser-text p {
    font-size: 16.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 16px;
}

.book-teaser-text .home-hero-list {
    margin: 0;
}

.book-teaser-cta-group {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.book-teaser-cta-group .btn-primary {
    padding: 12px 28px;
}

.book-teaser-cta-orange {
    background: #e1660c;
}

@media (max-width: 1024px) {
    .book-teaser {
        grid-template-columns: 1fr;
    }

    .book-teaser-text {
        margin-left: 0;
    }

    .book-teaser-image {
        margin-top: 0;
        transform: none;
    }
}

@media (max-width: 640px) {
    .book-teaser-cta-group {
        flex-direction: column;
    }

    .book-teaser-cta-group .btn-primary {
        padding: 12px 32px;
        border-radius: 6px;
        font-weight: 600;
        font-size: 16px;
        text-align: center;
        white-space: normal;
    }
}

/* Hero */
.home-hero {
    padding: 50px 0;
    position: relative;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    background-image: radial-gradient(#055592 1.5px, transparent 1.5px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(90deg, black 0%, transparent 13%, transparent 85%, black 100%)
    mask-image: linear-gradient(90deg, black 0%, transparent 13%, transparent 85%, black 100%);
}

/* Touch query catches landscape tablets, which are wider than 1024px */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .home-hero::before { display: none; }
}

/* style.css gives .home-hero::before z-index: 1, so content must sit above it */
.home-hero > .container {
    position: relative;
    z-index: 2;
}

.home-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: #ffffff;
    z-index: -1;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 60px;
}

.home-hero-text h1 {
    font-size: 60px;
    line-height: 60px;
    margin-top: 0;
    margin-bottom: 20px;
}

.home-hero-text p {
    color: var(--text-muted);
    font-size: 16.5px;
    margin-bottom: 32px;
}

.home-hero-list {
    color: var(--text-muted);
    font-size: 16.5px;
    line-height: 1.6;
    margin: -14px 0 20px;
    padding-left: 20px;
}

.home-hero-list li {
    margin-bottom: 8px;
}

.home-hero-list strong {
    color: var(--text-main);
}

.home-hero-checklist {
    list-style: none;
    margin: -14px 0 20px;
    padding: 0;
}

.home-hero-checklist li {
    margin-bottom: 14px;
}

.home-hero-checklist .hhc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text-main);
    font-size: 16.5px;
    margin-bottom: 2px;
}

.home-hero-checklist .hhc-check {
    flex-shrink: 0;
}

.home-hero-checklist .hhc-text {
    color: var(--text-muted);
    font-size: 16.5px;
    line-height: 1.6;
    margin: 0;
}

.home-hero-image {
    display: block;
    width: 97%;
    aspect-ratio: 870 / 960;
    object-fit: cover;
    border-radius: 8px;
}

.hero-cta-group {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    max-width: fit-content;
}

.hero-cta-group a {
    flex: 1;
    padding: 12px 32px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    min-width: 140px;
}

@media (max-width: 768px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .home-hero-text h1 { font-size: 35.2px; }
    .home-hero-image { max-width: 320px; margin: 0 auto; }
}

@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
    .home-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .home-hero-visual { order: -1; }
    .home-hero-image {
        width: 100%;
        max-width: none;
        height: min(55vh, 500px);
        object-fit: contain;
        margin: 0;
    }
    .home-hero-text h1 {
        font-size: 48px;
        line-height: 1.12;
    }
}

@media (max-width: 640px) {
    .home-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .home-hero-visual { order: -1; }
    .home-hero-text h1 { line-height: 1.12; }
    .hero-cta-group {
        flex-direction: column;
        max-width: none;
        width: 100%;
    }
    .hero-cta-group a {
        box-sizing: border-box;
        min-width: 0;
        white-space: normal;
    }
    .home-hero-image { width: 100%; }
}

/* Fallback for JavaScript disabled */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

/* How It Works — split layout (text | animation) */
.setup-responsive-title {
    display: none;
}

.setup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

.setup-text p {
    color: var(--text-muted);
    font-size: 16.5px;
    margin: 0 0 1.5rem;
}

.setup-text .home-hero-list {
    font-size: 16.5px;
}

.setup-text a:not(.btn-secondary):not(.btn-primary) {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
}

.setup-visual {
    display: flex;
    justify-content: center;
}

.setup-anim {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 460 / 340;
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

/* ===== Inbox icon (envelope with rows) ===== */
.setup-anim-inbox {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 67%;
    height: 63%;
    transform: translate(-50%, -50%);
    animation: setupAnimInboxCycle 19.5s infinite;
}

.setup-anim-inbox-body {
    width: 100%;
    height: 100%;
    background: #f7f9fc;
    border: 2px solid #d7deea;
    border-radius: 10px;
    position: relative;
    padding: 22px;
    box-sizing: border-box;
}

.setup-anim-row {
    height: 28px;
    border-radius: 6px;
    background: #e3e8f0;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.setup-anim-check {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0070f3;
    opacity: 0;
}

.setup-anim-check::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.setup-anim-row1 .setup-anim-check { animation: setupAnimPopCheck 19.5s infinite; animation-delay: 0.3s; }
.setup-anim-row2 .setup-anim-check { animation: setupAnimPopCheck 19.5s infinite; animation-delay: 0.5s; }
.setup-anim-row3 .setup-anim-check { animation: setupAnimPopCheck 19.5s infinite; animation-delay: 0.7s; }
.setup-anim-row4 .setup-anim-check { animation: setupAnimPopCheck 19.5s infinite; animation-delay: 0.9s; }

.setup-anim-row1, .setup-anim-row2, .setup-anim-row3, .setup-anim-row4 { animation: setupAnimRowSelect 19.5s infinite; }
.setup-anim-row1 { animation-delay: 0.3s; }
.setup-anim-row2 { animation-delay: 0.5s; }
.setup-anim-row3 { animation-delay: 0.7s; }
.setup-anim-row4 { animation-delay: 0.9s; }

/* ===== Arrow (forward) ===== */
.setup-anim-arrow {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: setupAnimArrowCycle 19.5s infinite;
}

.setup-anim-arrow svg {
    display: block;
    width: 192px;
    height: 192px;
}

/* ===== Media (Google Photos being sent) ===== */
.setup-anim-media {
    position: absolute;
    left: 50%;
    top: 47%;
    width: 67%;
    height: 63%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-anim-media-icon {
    position: absolute;
    left: 50%;
    top: calc(50% - 20px);
    width: 240px;
    height: auto;
    opacity: 0;
    animation: setupAnimGPhotoCycle 19.5s infinite;
}

/* ===== Farewell & Homecoming media (photos/video/audio being sent) ===== */
.setup-anim-fh {
    position: absolute;
    left: 50%;
    top: calc(47% - 15px);
    width: 80%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.setup-anim-fh-heading {
    font-size: 17px;
    font-weight: 600;
    color: #666;
    text-align: center;
    letter-spacing: 0.2px;
    opacity: 0;
    animation: setupAnimFHHeadingCycle 19.5s infinite;
}

.setup-anim-fh-icons {
    display: flex;
    gap: 28px;
    opacity: 0;
    animation: setupAnimFHIconsCycle 19.5s infinite;
}

.setup-anim-fh-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.setup-anim-fh-icon {
    width: 88px;
    height: 88px;
    border-radius: 18px;
    background: #eef4ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-anim-fh-icon-label {
    font-size: 14.4px;
    font-weight: 600;
    color: #999;
}

/* ===== Checkmark (done) ===== */
.setup-anim-done {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 67%;
    height: 63%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: setupAnimDoneCycle 19.5s infinite;
}

.setup-anim-done-card {
    width: 100%;
    height: 100%;
    background: #f7f9fc;
    border: 2px solid #d7deea;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-anim-done-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-anim-done-circle::after {
    content: '';
    width: 37px;
    height: 67px;
    border: solid white;
    border-width: 0 9px 9px 0;
    transform: rotate(45deg) translate(-5px, -9px);
}

.setup-anim-label {
    position: absolute;
    bottom: 46px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.3px;
    opacity: 0;
    animation: setupAnimLabelCycle 19.5s infinite;
}

.setup-anim.no-subtitle .setup-anim-label {
    bottom: 31px;
}

.setup-anim-subtitle {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    letter-spacing: 0.2px;
    opacity: 0;
    min-height: 16px;
    animation: setupAnimLabelCycle 19.5s infinite;
}

@keyframes setupAnimInboxCycle {
    0%     { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    1.7%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    17.1%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    20.6%  { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    100%   { opacity: 0; }
}

@keyframes setupAnimRowSelect {
    0%, 2.4% { background: #e3e8f0; }
    3.6%, 17.1% { background: #d6e6fd; }
    20.6%, 100% { background: #e3e8f0; }
}

@keyframes setupAnimPopCheck {
    0%, 2.4% { opacity: 0; transform: translateY(-50%) scale(0); }
    3.6%, 17.1% { opacity: 1; transform: translateY(-50%) scale(1); }
    20.6%, 100% { opacity: 0; transform: translateY(-50%) scale(0); }
}

@keyframes setupAnimArrowCycle {
    0%, 19.5% { opacity: 0; transform: translate(-90%, -50%) scale(0.7); }
    23.1%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    35.8%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    40.1%     { opacity: 0; transform: translate(10%, -50%) scale(0.7); }
    100%      { opacity: 0; }
}

/* Same shape/pacing as the arrow — enters, holds still (readable), then
   exits to the right ("sent") — occupying the slot between the arrow and
   the done card. Hold is 1s longer than the other steps, per request. */
@keyframes setupAnimGPhotoCycle {
    0%, 38.1%   { opacity: 0; transform: translate(-160%, -50%); }
    41.4%       { opacity: 1; transform: translate(-50%, -50%); }
    58.4%       { opacity: 1; transform: translate(-50%, -50%); }
    62.4%, 100% { opacity: 0; transform: translate(90%, -50%); }
}

/* "Farewell & Homecoming Media" heading — crossfades in as the GPhotos
   icon exits, holds briefly (also +1s per request), then fades out in
   place (no motion). */
@keyframes setupAnimFHHeadingCycle {
    0%, 58.4%   { opacity: 0; }
    61.9%       { opacity: 1; }
    76.3%       { opacity: 1; }
    80.2%, 100% { opacity: 0; }
}

/* Same window as the heading, but exits by sliding right + fading —
   the "sending it to us" motion. */
@keyframes setupAnimFHIconsCycle {
    0%, 58.4%   { opacity: 0; transform: translateX(0); }
    61.9%       { opacity: 1; transform: translateX(0); }
    76.3%       { opacity: 1; transform: translateX(0); }
    80.2%, 100% { opacity: 0; transform: translateX(220px); }
}

@keyframes setupAnimDoneCycle {
    0%, 79.3% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    82.9%     { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    85.4%     { transform: translate(-50%, -50%) scale(1); }
    98.7%     { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100%      { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

@keyframes setupAnimLabelCycle {
    0%, 1.7% { opacity: 0; }
    3.6%, 98.8% { opacity: 1; }
    100%     { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .setup-anim-inbox,
    .setup-anim-row1, .setup-anim-row2, .setup-anim-row3, .setup-anim-row4,
    .setup-anim-check,
    .setup-anim-arrow,
    .setup-anim-media-icon,
    .setup-anim-fh-heading,
    .setup-anim-fh-icons,
    .setup-anim-done,
    .setup-anim-label,
    .setup-anim-subtitle {
        animation: none;
    }
    .setup-anim-inbox { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    .setup-anim-arrow, .setup-anim-media-icon, .setup-anim-fh-heading, .setup-anim-fh-icons, .setup-anim-done { opacity: 0; }
}

@media (max-width: 768px) {
    .setup-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    #how-it-works .setup-responsive-title {
        display: block;
    }

    #how-it-works .setup-title-break {
        display: none;
    }

    #how-it-works .setup-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    #how-it-works .setup-text > h2 {
        display: none;
    }

    #how-it-works .setup-visual {
        order: -1;
    }

    #how-it-works .how-it-works-cta-group {
        flex-wrap: nowrap;
    }

    #how-it-works .how-it-works-cta-group a {
        box-sizing: border-box;
        flex: 1 1 0;
        padding: 12px 32px !important;
        border-radius: 6px;
        font-size: 16px !important;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    #how-it-works .setup-title-break {
        display: initial;
    }

    #how-it-works .setup-visual {
        display: none;
    }

    #how-it-works .how-it-works-cta-group {
        flex-direction: column;
    }

    #how-it-works .how-it-works-cta-group a {
        width: 100%;
        white-space: normal;
    }
}

/* Pinned section (Transformation) */
.pinned-section {
    min-height: 140vh;
}

.pinned-layout {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.pinned-visual {
    flex: 0 0 38%;
    position: sticky;
    top: 100px;
}

.pinned-steps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 140px;
    padding-top: 40px;
}

.pinned-steps h3 {
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .pinned-layout { flex-direction: column; }
    .pinned-visual { position: static; flex: none; width: 100%; }
    .pinned-steps { gap: 40px; padding-top: 0; }
    .pinned-section { min-height: auto; }
}

/* Card rows (differentiators, who it's for, packaging) */
.home-card-row {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 10px;
}

.home-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 2rem;
    flex: 1 1 200px;
    max-width: 340px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.home-card h3 {
    margin-top: 0;
}

/* Trailing <p> margin stacked on top of the card padding, so the gap below the
   blurb read ~1.5x the gap above the title. */
#who-for .home-card > :last-child {
    margin-bottom: 0;
}

.home-card .price {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

@media (max-width: 768px) {
    .home-card-row { flex-direction: column; align-items: center; }

    /* In a column flex container flex-basis applies to height, so the 200px
       basis was padding out cards whose content is shorter than that. */
    #who-for .home-card { flex: 0 0 auto; }
}

.pricing-step-header {
    text-align: left;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-primary);
    margin: 2rem 0 0.75rem;
}

.pricing-plans-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.pricing-plans-or {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
}

.pricing-plan-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.75rem;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    position: relative;
}

.pricing-plan-card.featured {
    border: 2px solid #2965e8;
}

.pricing-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #eef4ff;
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.pricing-plan-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.25rem;
}

.pricing-plan-desc {
    color: var(--text-muted);
    font-size: 1.2rem;
    margin: 0 0 1.25rem;
}

.pricing-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-feature-list li {
    font-size: 1.1rem;
    color: #334155;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pricing-feature-list li strong {
    color: var(--text-main);
}

.pricing-check {
    color: var(--accent-primary);
    font-weight: bold;
    flex-shrink: 0;
}

.pricing-book-banner {
    background: white;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
}

.pricing-book-banner-content h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 2px;
}

.pricing-book-banner-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin: 0;
}

.pricing-book-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.pricing-book-features .pricing-feature-list li {
    margin-bottom: 0.5rem;
}

.pricing-cta-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.pricing-cta {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pricing-cta-primary {
    background: var(--accent-primary);
    color: white;
    border: 2px solid var(--accent-primary);
}

.pricing-cta-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.pricing-cta-secondary {
    background: var(--text-main);
    color: white;
    border: 2px solid var(--text-main);
}

.pricing-cta-secondary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

    .pricing-book-features {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pricing-cta-group {
        flex-direction: column;
    }
}

.testimonial-page {
    display: none;
}

.testimonial-page.active {
    display: block;
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5rem;
}

.testimonial-arrows {
    display: none;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
}

.testimonial-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #d0d0d0;
    cursor: pointer;
    padding: 0;
}

.testimonial-dot.active {
    background: var(--text-main);
}

.testimonial-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.testimonial-card {
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 56px;
    transition: transform 0.2s ease;
}

.testimonial-card:hover {
    transform: scale(1.12);
    position: relative;
    z-index: 2;
}

.testimonial-avatar {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    margin: -104px auto 1.25rem;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

@media (min-width: 641px) and (max-width: 1024px) {
    .testimonial-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: calc(2rem + 38px);
    }

    .testimonial-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc((100% - 2rem) / 2);
        justify-self: center;
    }
}

@media (max-width: 640px) {
    .testimonial-row {
        grid-template-columns: 1fr;
        row-gap: calc(3rem + 20px);
    }
}

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .testimonial-dots {
        display: none;
    }

    .testimonial-arrows {
        display: flex;
    }
}

.testimonial-quote {
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.testimonial-attribution {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* TEMP DEBUG — spacing outline, remove when done adjusting Hero layout
.home-hero .container,
.home-hero-text,
.home-hero-visual {
    outline: 2px dotted red;
}
END TEMP DEBUG */

/* Mini-Banner CTA */
.mini-banner {
    margin-top: -27px;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mini-banner-upper {
    margin-top: 20px;
}

.mini-banner-link {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
    transition: opacity 0.2s;
}

.mini-banner-link:hover {
    opacity: 0.8;
}

.mini-banner-text {
    font-size: 16.5px;
    color: var(--text-main);
}

@media (max-width: 640px) {
    .mini-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .mini-banner {
        display: grid;
        grid-template-columns: 5fr 7fr;
        column-gap: 24px;
    }
    .mini-banner-link {
        justify-self: end;
        text-align: right;
    }
}

/* CTA Experiment Options */
.cta-experiment-wrapper {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.cta-experiment-option {
    text-align: center;
}

.cta-experiment-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Pill Badge */
.cta-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f0f0f0;
    color: #333;
    padding: 10px 20px;
    border-radius: 9999px;
    font-size: 16.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.cta-pill-badge:hover {
    background-color: #e0e0e0;
}

/* Normal Button */
.cta-button-compare {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--text-main);
    color: white;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 18.5px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.cta-button-compare:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.cta-button-compare::after {
    content: '›';
    font-size: 1.2em;
    line-height: 1;
}

/* Pricing Link CTA */
.cta-pricing-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-primary);
    font-size: 18.5px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
}

.cta-pricing-link:hover {
    opacity: 0.8;
}

.cta-pricing-link::after {
    content: '›';
    font-size: 1.2em;
    line-height: 1;
}

/* Integrated Pricing Module */
.pricing-module-integrated {
    background: #f5f5f5;
    border-radius: 16px;
    padding: 40px;
    margin-top: 3rem;
}

.pricing-module-integrated .features {
    margin-bottom: 0;
}

.pricing-module-footer {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing-module-footer-text {
    font-size: 16.5px;
    color: var(--text-muted);
    font-weight: 500;
}

.pricing-module-footer-link {
    font-size: 16.5px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
}

.pricing-module-footer-link:hover {
    text-decoration: underline;
}

/* Text Link */
.cta-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-size: 16.5px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: opacity 0.2s;
}

.cta-text-link:hover {
    opacity: 0.7;
}

.cta-text-link::after {
    content: '→';
    transition: transform 0.2s;
}

.cta-text-link:hover::after {
    transform: translateX(4px);
}

/* CTA Button — Feature Comparison section
   Lives inside .fm-explainer itself so it rides along with that
   element's existing (working) sticky behavior, defined in style.css.
   No changes made to .fm-explainer / .fm-explainer-wrap positioning. */
.btn-cta-primary {
    display: block;
    margin-top: 20px;
    padding: 12px 32px;
    text-align: center;
    background: var(--bg-brand);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-cta-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .btn-cta-primary {
        padding: 11px 28px;
        font-size: 15px;
    }
}

/* Learn More + Compare Pricing CTAs in How It Works section */
.how-it-works-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.home-how-it-works {
    padding: 15px 35px !important;
    font-size: 1.1rem !important;
    background: #e1660c !important;
}