/* welcome.css — marketing / brochureware page (welcome.html).

   Reuses login.css for the brand header lockup; everything below the header
   is declared here. Palette aligns with the rest of the unauthenticated
   surface: amber accents (#f59e0b / #78350f) for warmth, slate body text
   (#1c1917 / #475569) for legibility. */

/* ── Header nav (right-hand side of the brand band) ─────────────────────── */
.welcome-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}
.welcome-nav__link {
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.welcome-nav__link:hover { color: #1c1917; text-decoration: underline; }
.welcome-nav__cta {
    background: #f59e0b;
    color: #1c1917;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.welcome-nav__cta:hover { background: #d97706; }

/* ── Body shell ─────────────────────────────────────────────────────────── */
.welcome-body {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    color: #1c1917;
    line-height: 1.55;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.welcome-hero {
    text-align: center;
    padding: 48px 16px 32px;
}
.welcome-hero__title {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.025em;
    color: #1c1917;
}
.welcome-hero__sub {
    font-size: clamp(18px, 2.4vw, 22px);
    color: #78350f;
    font-weight: 500;
    margin: 0 0 20px;
}
.welcome-hero__lede {
    font-size: 17px;
    max-width: 640px;
    margin: 0 auto 28px;
    color: #475569;
}
.welcome-hero__ctas {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.welcome-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.welcome-btn--primary {
    background: #f59e0b;
    color: #1c1917;
}
.welcome-btn--primary:hover { background: #d97706; transform: translateY(-1px); }
.welcome-btn--secondary {
    background: #ffffff;
    color: #78350f;
    border: 1.5px solid #f59e0b;
}
.welcome-btn--secondary:hover { background: #fef3c7; transform: translateY(-1px); }

/* ── Section blocks ────────────────────────────────────────────────────── */
.welcome-section {
    margin: 40px 0;
    padding: 0;
}
.welcome-section h2 {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 14px;
    color: #1c1917;
    letter-spacing: -0.01em;
}
.welcome-section p {
    font-size: 16px;
    color: #1c1917;
    margin: 0 0 12px;
}
.welcome-section__caption {
    font-size: 14px;
    color: #64748b;
    font-style: italic;
}

/* AI Advisor section gets a soft amber wash so it stands out as the headline
   differentiator. */
.welcome-section--advisor {
    background: #fef9ef;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 28px;
}
.welcome-questions {
    list-style: none;
    padding: 0;
    margin: 16px 0 12px;
    display: grid;
    gap: 10px;
}
.welcome-questions li {
    background: #ffffff;
    border-left: 3px solid #f59e0b;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 15px;
    color: #1c1917;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* AI Advisor screenshot — sits in place of the old sample-questions list.
   Capped width keeps the image readable on wide screens; the soft border
   and shadow lift it off the amber section background. */
.welcome-advisor-shot {
    margin: 16px 0 12px;
    text-align: center;
}
.welcome-advisor-shot img {
    max-width: 100%;
    height: auto;
    border: 1px solid #fde68a;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Privacy section pulls the same amber-100 / amber-400 palette used by the
   demo banner on the in-app surface, signalling continuity. */
.welcome-section--privacy {
    background: #f8fafc;
    border-left: 4px solid #f59e0b;
    padding: 20px 24px;
    border-radius: 4px;
}

/* ── Feature grid ──────────────────────────────────────────────────────── */
.welcome-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 16px;
}
.welcome-feature {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 18px 18px 16px;
}
.welcome-feature h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    color: #78350f;
}
.welcome-feature p {
    font-size: 14px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}

/* ── Final CTA ─────────────────────────────────────────────────────────── */
.welcome-cta {
    text-align: center;
    margin: 56px 0 24px;
    padding: 36px 20px;
    background: linear-gradient(180deg, #fef9ef 0%, #fef3c7 100%);
    border-radius: 12px;
}
.welcome-cta h2 {
    font-size: 26px;
    margin: 0 0 18px;
}
/* Friction reassurance block — sits between the CTA buttons and the demo line.
   A soft amber card so it reads as a friendly aside, not fine print. */
.welcome-cta__friction {
    font-size: 15px;
    color: #1c1917;
    margin: 20px auto 0;
    max-width: 560px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 14px 18px;
}
.welcome-cta__friction strong { color: #78350f; }
.welcome-cta__demo {
    font-size: 14px;
    color: #78350f;
    margin: 18px auto 0;
    max-width: 520px;
    font-style: italic;
}

/* ── Animations & modern polish ────────────────────────────────────────────
   Restrained motion: a staggered hero entrance on load, scroll-reveal for
   sections/cards/figures, a card-hover lift, and a slow gradient drift on the
   final CTA. Everything here is disabled by the prefers-reduced-motion block
   at the foot of this section. */

/* Hero entrance — each tagged child rises and fades in, staggered. The hero
   has exactly four .welcome-hero__anim children in order: title, sub, lede,
   CTAs — so nth-child gives the stagger without per-element classes. */
@keyframes welcomeRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.welcome-hero__anim {
    opacity: 0;
    animation: welcomeRise 0.6s ease forwards;
}
.welcome-hero__anim:nth-child(1) { animation-delay: 0.05s; }
.welcome-hero__anim:nth-child(2) { animation-delay: 0.15s; }
.welcome-hero__anim:nth-child(3) { animation-delay: 0.25s; }
.welcome-hero__anim:nth-child(4) { animation-delay: 0.35s; }

/* Scroll-reveal — welcome-anim.js adds .is-visible as elements enter view. */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Screenshots get a subtle scale-up as their figure reveals, for a bit of depth. */
.welcome-advisor-shot.reveal img {
    transform: scale(0.98);
    transition: transform 0.6s ease;
}
.welcome-advisor-shot.reveal.is-visible img {
    transform: none;
}

/* Card-hover lift — mirrors the existing button hover idiom. */
.welcome-feature {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.welcome-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(120, 53, 15, 0.1);
    border-color: #fde68a;
}

/* Slow gradient drift on the final CTA wash — alive, not distracting. The
   larger background-size gives the animation room to travel. */
@keyframes welcomeDrift {
    from { background-position: 50% 0%; }
    to   { background-position: 50% 100%; }
}
.welcome-cta {
    background-size: 100% 200%;
    animation: welcomeDrift 14s ease-in-out infinite alternate;
}

/* Honour the user's reduced-motion preference: show everything in its final
   state with no entrance, reveal, drift or hover movement. welcome-anim.js
   makes the same call for the scroll-reveal observer. */
@media (prefers-reduced-motion: reduce) {
    .welcome-hero__anim,
    .reveal,
    .welcome-advisor-shot.reveal img,
    .welcome-cta {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .welcome-feature:hover { transform: none; }
}

/* ── Inline links ──────────────────────────────────────────────────────── */
.welcome-link {
    color: #78350f;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #f59e0b;
}
.welcome-link:hover { color: #1c1917; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.welcome-footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}
.welcome-footer a {
    color: #475569;
    text-decoration: none;
}
.welcome-footer a:hover { color: #1c1917; text-decoration: underline; }

/* ── Mobile tweaks ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .welcome-nav { gap: 10px; }
    .welcome-nav__link { display: none; }    /* keep just the Sign-in CTA */
    .welcome-body { padding: 16px 16px 48px; }
    .welcome-hero { padding: 28px 8px 20px; }
    .welcome-section--advisor { padding: 20px 16px; }
}