/* =====================================================================
   PAGE-LOCAL STYLES — landing/index.html
   Organized in sections so updates stay easy to find.
     1. Base / page background
     2. Color palette helpers (no Tailwind rebuild required)
     3. Typography helpers
     4. Buttons
     5. Cards (step-card, reason-card, totals-card, hiw shells)
     6. Logo wall
     7. Embed framing (screenshots, scaling)
     8. Reveal animations (embeds, hero steps, pain-points)
     9. Hero flow line (animated pulse)
    10. Hero rotating headline (index)
    11. Tilt cards (3D hover)
    12. Shimmer card sweep
    13. Misc legacy shimmer effects
   ===================================================================== */


/* -- 1. Base / page background ----------------------------------- */
.gradient-bg { background: #FBF8F1; }
.paper-grain {
    background-color: #FBF8F1;
    background-image:
        radial-gradient(ellipse 900px 500px at 50% -5%, rgba(15,61,46,0.06), transparent 60%),
        radial-gradient(ellipse 700px 300px at 100% 20%, rgba(15,61,46,0.03), transparent 60%);
}
.hero-glow { display: none; }

/* -- 1b. Hero rotating phrase (serif, moss italic) -------------- */
#hero .hero-rotator-shell {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    max-width: 100%;
    transition: width 420ms cubic-bezier(0.23, 1, 0.32, 1), height 420ms cubic-bezier(0.23, 1, 0.32, 1);
}
#hero .hero-rotator-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    will-change: transform, opacity;
    /* Room for italic/serif ascenders (f, p, d, b, etc.); shell uses overflow:hidden */
    padding: 0.22em 0.12em;
    box-sizing: border-box;
    line-height: 1.2;
}
@media (max-width: 480px) {
    #hero .hero-rotator-layer {
        white-space: normal;
        line-height: 1.18;
    }
}
@media (prefers-reduced-motion: reduce) {
    #hero .hero-rotator-layer {
        transition: none !important;
    }
}


/* -- 2. Color palette helpers ------------------------------------ */
.c-ink         { color: #0B1510; }
.c-forest      { color: #0F3D2E; }
.c-forest-80   { color: rgba(15, 61, 46, 0.80); }
.c-moss        { color: #1B5E46; }
.c-sage        { color: #8DAE9E; }
.c-mint        { color: #B9D3C4; }
.c-stone       { color: #6B7560; }
.c-bone        { color: #F4EFE6; }
.c-bone-75     { color: rgba(244, 239, 230, 0.75); }
.c-bone-70     { color: rgba(244, 239, 230, 0.70); }
.c-bone-65     { color: rgba(244, 239, 230, 0.65); }
.c-bone-60     { color: rgba(244, 239, 230, 0.60); }

.bg-ink        { background-color: #0B1510; }
.bg-forest     { background-color: #0F3D2E; }
.bg-moss       { background-color: #1B5E46; }
.bg-paper      { background-color: #FBF8F1; }
.bg-bone       { background-color: #F4EFE6; }
.bg-rule       { background-color: #E3DBCD; }

.border-rule    { border-color: #E3DBCD; }
.border-bone-15 { border-color: rgba(244, 239, 230, 0.15); }
.border-bone-30 { border-color: rgba(244, 239, 230, 0.30); }
.hover-bg-bone-10:hover { background-color: rgba(244, 239, 230, 0.10); }


/* -- 3. Typography helpers --------------------------------------- */
.font-georgia { font-family: Georgia, "Times New Roman", ui-serif, serif; }
/* Inline numeric unit label (italic Inter, sits next to a serif numeral) */
.unit-label   { font-family: 'Inter', sans-serif; font-style: italic; }


/* -- 4. Buttons (pill-style, paper-friendly) --------------------- */
.btn-primary {
    background: #0F3D2E;
    color: #F4EFE6;
    border-radius: 9999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 180ms, transform 180ms, box-shadow 180ms;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 10px 24px -14px rgba(15,61,46,0.45);
}
.btn-primary:hover { background: #0A2F23; }

/* Gold CTA, flips to forest green on hover */
.btn-gold {
    background: #D9A441;
    color: #0B1510;
    border-radius: 9999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 180ms, color 180ms, box-shadow 180ms, transform 180ms;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 10px 24px -14px rgba(217,164,65,0.55);
}
.btn-gold:hover {
    background: #0F3D2E;
    color: #F4EFE6;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 10px 24px -14px rgba(15,61,46,0.45);
}

.btn-ghost {
    color: #0B1510;
    border-radius: 9999px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #E3DBCD;
    background: rgba(255,255,255,0.4);
    transition: border-color 180ms, background 180ms;
}
.btn-ghost:hover { border-color: #C4B8A0; background: rgba(255,255,255,0.8); }


/* -- 5. Cards ---------------------------------------------------- */
/* Step card, solid, paper-tinted, quiet (Claude design) */
.step-card {
    background: #FFFFFF;
    border: 1px solid #E3DBCD;
    box-shadow:
        0 1px 0 rgba(15, 61, 46, 0.02),
        0 8px 24px -18px rgba(15, 61, 46, 0.25);
    transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms, border-color 260ms;
}
.step-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(15, 61, 46, 0.03),
        0 18px 40px -22px rgba(15, 61, 46, 0.3);
    border-color: #CBB9A0;
}
.step-num {
    font-family: Georgia, serif;
    font-style: italic;
    color: #0F3D2E;
    letter-spacing: -0.01em;
}

/* Reason card (Six Reasons editorial style) */
.reason-card {
    background: #FFFFFF;
    border: 1px solid #E3DBCD;
    border-radius: 14px;
    transition: border-color 260ms, transform 260ms, box-shadow 260ms;
}
.reason-card:hover {
    border-color: #C8B99E;
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -26px rgba(15,61,46,0.35);
}

/* Six Reasons totals card */
.totals-card {
    background-color: #EFE6D2;
    box-shadow: 0 24px 60px -32px rgba(15, 61, 46, 0.35);
}

/* How It Works copy + visual panels */
.hiw-visual-shell {
    background: linear-gradient(165deg, #F4EFE6 0%, #FBF8F1 50%, #EEE6D6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 2px rgba(15, 61, 46, 0.04);
    border: 1px solid #E3DBCD;
}
.hiw-copy-shell {
    box-shadow:
        0 4px 6px -1px rgba(15, 61, 46, 0.04),
        0 20px 50px -20px rgba(15, 61, 46, 0.15);
}

/* HiW timeline (editorial scrolling timeline) */
.hiw-timeline,
#how-it-works {
    overflow-x: hidden;
}
.hiw-timeline { position: relative; }
.hiw-flow-line {
    position: absolute;
    top: 32px; bottom: 32px;
    left: 27px;
    width: 2px;
    background: linear-gradient(
        180deg,
        #E3DBCD 0%,
        #E3DBCD 35%,
        #9FBFAD 50%,
        #E3DBCD 65%,
        #E3DBCD 100%
    );
    background-size: 100% 260%;
    animation: hiwFlowPulse 14s linear infinite;
    border-radius: 9999px;
    z-index: 0;
    pointer-events: none;
}
@media (min-width: 768px) {
    .hiw-flow-line { left: 31px; }
}
@keyframes hiwFlowPulse {
    0%   { background-position: 50% 100%; }
    100% { background-position: 50% 0%; }
}
@media (prefers-reduced-motion: reduce) {
    .hiw-flow-line { animation: none; }
}
.hiw-step-marker {
    width: 56px; height: 56px;
    border-radius: 9999px;
    background: #FFFFFF;
    border: 2px solid var(--rule, #E3DBCD);
    display: flex; align-items: center; justify-content: center;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--forest, #0F3D2E);
    box-shadow: 0 4px 12px rgba(15, 61, 46, 0.10);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .hiw-step-marker { width: 64px; height: 64px; font-size: 20px; }
}
.hiw-bullet {
    width: 5px; height: 5px;
    border-radius: 9999px;
    background: var(--forest, #0F3D2E);
    margin-top: 9px;
    flex-shrink: 0;
}

/* HiW timeline scroll reveal: slide in from the right + fade */
.hiw-reveal-group .hiw-step-marker,
.hiw-reveal-group .hiw-step-text,
.hiw-reveal-group .hiw-step-visual {
    opacity: 0;
    transform: translate3d(48px, 0, 0);
    transition:
        opacity   0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
}
.hiw-reveal-group .hiw-step-text   { transition-delay: 0.10s; }
.hiw-reveal-group .hiw-step-visual { transition-delay: 0.20s; }

.hiw-reveal-group.is-revealed .hiw-step-marker,
.hiw-reveal-group.is-revealed .hiw-step-text,
.hiw-reveal-group.is-revealed .hiw-step-visual {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Suppress the embed's own reveal inside the HiW timeline so the
   group-level slide-in is the only animation that runs there. */
.hiw-reveal-group .embed-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .hiw-reveal-group .hiw-step-marker,
    .hiw-reveal-group .hiw-step-text,
    .hiw-reveal-group .hiw-step-visual {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Small dot used between hero timeline cards */
.connector-dot {
    width: 7px; height: 7px; border-radius: 9999px;
    background: #FFF;
    border: 1.5px solid #0F3D2E;
    box-shadow: 0 0 0 4px #FBF8F1;
}


/* -- 6. Logo wall ------------------------------------------------ */
.logo-mark {
    filter: saturate(0) contrast(0.9);
    opacity: 0.62;
    transition: opacity 200ms;
}
.logo-mark:hover { opacity: 0.9; }
.logo-mark--invert {
    filter: invert(1) saturate(0) contrast(0.8);
    opacity: 0.7;
}
.logo-mark--invert:hover { opacity: 0.9; }


/* -- 7. Embed framing ------------------------------------------- */
.screenshot-shadow {
    box-shadow:
        0 25px 60px -22px rgba(15,61,46,0.25),
        0 0 0 1px rgba(15,61,46,0.06);
}
.embed-scale-wrapper { overflow: hidden; }
.embed-scale-inner {
    width: 100%;
    max-width: 100%;
    transform-origin: top left;
}
@media (max-width: 767px) {
    .embed-scale-wrapper { width: 100%; }
    .embed-scale-inner   { transform: scale(var(--embed-scale, 1)); }
}
/* Hide the "Start proposal" footer CTA in the hero relevancy embed on mobile */
@media (max-width: 767px) {
    .hero-relevancy-embed .pipeline-embed-root > div:last-child { display: none; }
}


/* -- 8. Reveal animations --------------------------------------- */
/* Generic embed scroll reveal */
.embed-scroll-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.embed-scroll-reveal.embed-scroll-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}
/* HiW copy cards: fade-only on mobile, instant on desktop */
.hiw-copy-shell.embed-scroll-reveal {
    transform: none;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.hiw-copy-shell.embed-scroll-reveal.embed-scroll-reveal--visible { transform: none; }
@media (min-width: 640px) {
    .hiw-copy-shell.embed-scroll-reveal { opacity: 1; transition: none; }
}

/* Mobile hero step reveal (slide in from the right) */
@media (max-width: 767px) {
    .hero-step-reveal {
        opacity: 0;
        transform: translate3d(2.25rem, 0, 0);
        transition:
            opacity   0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: opacity, transform;
    }
    .hero-step-reveal.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Six Reasons (pain-points) ledger reveal */
@keyframes rfp-card-pop {
    from { opacity: 0; transform: translateY(1.125rem) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)        scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
    #rfp-pain-points .rfp-pain-grid > article,
    #rfp-pain-points .rfp-pain-list > li,
    #rfp-pain-points .rfp-reveal-summary,
    #rfp-pain-points .rfp-reveal-testimonials,
    #rfp-pain-points .rfp-reveal-cta {
        opacity: 0;
        transform: translateY(1.125rem) scale(0.97);
    }
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-grid > article,
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-list > li,
    #rfp-pain-points.rfp-pain-in-view .rfp-reveal-summary,
    #rfp-pain-points.rfp-pain-in-view .rfp-reveal-testimonials,
    #rfp-pain-points.rfp-pain-in-view .rfp-reveal-cta {
        animation: rfp-card-pop 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-grid > article:nth-child(1),
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-list > li:nth-child(1) { animation-delay:   0ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-grid > article:nth-child(2),
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-list > li:nth-child(2) { animation-delay: 110ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-grid > article:nth-child(3),
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-list > li:nth-child(3) { animation-delay: 220ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-grid > article:nth-child(4),
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-list > li:nth-child(4) { animation-delay: 330ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-grid > article:nth-child(5),
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-list > li:nth-child(5) { animation-delay: 440ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-grid > article:nth-child(6),
    #rfp-pain-points.rfp-pain-in-view .rfp-pain-list > li:nth-child(6) { animation-delay: 550ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-reveal-summary      { animation-delay: 660ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-reveal-testimonials { animation-delay: 780ms; }
    #rfp-pain-points.rfp-pain-in-view .rfp-reveal-cta          { animation-delay: 900ms; }
}


/* -- 9. Hero flow line (animated pulse, horizontal + vertical) -- */
@keyframes heroFlowPulse {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
@keyframes heroFlowPulseV {
    0%   { background-position: 50% 100%; }
    100% { background-position: 50%   0%; }
}
.hero-flow-line {
    background: linear-gradient(90deg,
        #E3DBCD 0%,  #E3DBCD 38%,
        #9FBFAD 50%,
        #E3DBCD 62%, #E3DBCD 100%);
    background-size: 260% 100%;
    animation: heroFlowPulse 14s linear infinite;
}
.hero-flow-line-v {
    background: linear-gradient(180deg,
        #E3DBCD 0%,  #E3DBCD 38%,
        #9FBFAD 50%,
        #E3DBCD 62%, #E3DBCD 100%);
    background-size: 100% 260%;
    animation: heroFlowPulseV 14s linear infinite;
}


/* -- 10. Tilt cards (3D hover) ---------------------------------- */
.tilt-card {
    transform: perspective(1100px) rotateX(0) rotateY(0);
    transform-style: preserve-3d;
    transition:
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}
.tilt-card.is-tilting {
    transition:
        transform 0.08s linear,
        box-shadow 0.08s linear;
}


/* -- 11. Shimmer card sweep ------------------------------------- */
/* Single diagonal streak; held off-canvas, then sweeps across once per loop. */
.shimmer-card {
    position: relative;
    isolation: isolate;
}
.shimmer-card::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 35%;
    pointer-events: none;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 100%);
    transform: translateX(-180%) skewX(-18deg);
    animation: shimmerSweep 5s ease-in-out infinite;
    animation-play-state: paused;
    z-index: 2;
}
.shimmer-card.shimmer-active::after { animation-play-state: running; }
@keyframes shimmerSweep {
    0%     { transform: translateX(-180%) skewX(-18deg); }
    66.67% { transform: translateX(-180%) skewX(-18deg); }
    100%   { transform: translateX( 380%) skewX(-18deg); }
}


/* -- 12. Misc legacy shimmer effects ---------------------------- */
@keyframes logo-ticker  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes shimmer {
    0%, 100% { box-shadow: 0 0  0  0 rgba(6, 78, 59, 0.1); }
    50%      { box-shadow: 0 0 30px 15px rgba(6, 78, 59, 0.2); }
}
@keyframes buttonShimmer {
    0%   { left: -100%; }
    100% { left:  100%; }
}
.shimmer-glow   { animation: shimmer 3s ease-in-out infinite; }
.button-shimmer { position: relative; overflow: hidden; }
.button-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: buttonShimmer 3s ease-in-out infinite;
    pointer-events: none;
}


/* -- Reduced-motion preference: disable all motion -------------- */
@media (prefers-reduced-motion: reduce) {
    .embed-scroll-reveal { opacity: 1; transform: none; transition: none; }
    .hero-step-reveal    { opacity: 1 !important; transform: none !important; transition: none !important; }
    .tilt-card           { transition: none !important; transform: none !important; }
    .shimmer-card::after { animation: none; display: none; }
}