/* ============================================================================
   Feedalto — public / marketing design system.

   One stylesheet shared by every page a visitor sees before they log in:
   the home page, /for-lenders, sign-in, register, privacy, terms. Before this
   existed each of those carried its own palette — the home page was blue and
   orange, /for-lenders was cyan and teal, and sign-in inherited the logged-in
   app chrome — so moving between them felt like three different companies.

   CONTRAST IS A HARD RULE HERE. Every colour pair below is checked against
   WCAG AA (4.5:1 for body text, 3:1 for large text and UI edges). The two
   traps this file exists to prevent:

     --muted was #7c88a3, which is 3.5:1 on white. It reads fine to someone who
     designed it on a calibrated monitor and badly to everyone else, and it was
     used for every caption on the page.

     Brand orange #F26722 is 3.1:1 on white. It is a fine FILL and a fine text
     colour on a dark ground, but it must never be small text on white. That is
     what --orange-ink exists for; --orange-deep is the same idea for buttons,
     where white sits on top of the orange instead of underneath it.

   So: --orange for graphics, --orange-ink for text on light, --orange-deep for
   filled buttons. Reach for plain --orange as a text colour only on dark.
   ============================================================================ */

:root {
    --blue: #1B4FBC;             /* 8.0:1 on white */
    --blue-dark: #143a8c;
    --orange: #F26722;           /* fills, and text on dark only */
    --orange-ink: #C0480C;       /* 5.0:1 on white — small text on light */
    --orange-deep: #D24E0B;      /* 4.3:1 against white text — filled buttons */
    --ink: #0d1b3e;              /* 16.4:1 on white */
    --body: #46536e;             /* 7.7:1 on white */
    --muted: #5b6884;            /* 5.4:1 on white, 4.9:1 on --bg-soft */
    --line: #e4e9f2;
    --bg-soft: #f5f8fd;
    --bg-deep: #070f26;
    --radius: 20px;
    --shadow: 0 18px 50px rgba(13,27,62,.10);
    --shadow-lg: 0 40px 90px rgba(13,27,62,.30);
    --max: 1200px;

    /* On the dark ground. All of these clear 4.5:1 against --bg-deep. */
    --on-deep: #b9cae6;
    --on-deep-soft: #93a8cc;
    --on-deep-accent: #FFB27A;
}

/* ---------- Base ---------- */
.fa-marketing {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--body);
    background: #fff;
    line-height: 1.62;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}
.fa-marketing h1, .fa-marketing h2, .fa-marketing h3,
.fa-marketing h4, .fa-marketing h5 {
    color: var(--ink); line-height: 1.1; letter-spacing: -.028em; font-weight: 700; margin: 0;
}

/* Headings on a dark ground.

   The rule above paints every heading --ink so that light pages are correct by default. The
   consequence is that a heading dropped into a dark block renders navy-on-navy — invisible
   except for whatever accent span it contains, which reads as a deliberate design until you
   look closely. That is exactly how the two statement panels on the home page shipped.

   So rather than rely on each dark block remembering to override, every dark container in the
   system is named once, here. Add a new dark section? Add it to this list in the same commit. */
.fa-sec.dark   :is(h1, h2, h3, h4, h5, h6),
.fa-final      :is(h1, h2, h3, h4, h5, h6),
.fa-foot       :is(h1, h2, h3, h4, h5, h6),
.statement     :is(h1, h2, h3, h4, h5, h6),
.hero          :is(h1, h2, h3, h4, h5, h6),
.chapter.dark  :is(h1, h2, h3, h4, h5, h6),
.lp-dark       :is(h1, h2, h3, h4, h5, h6),
.lp-darker     :is(h1, h2, h3, h4, h5, h6),
.lp-card-dark  :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.fa-marketing a { color: inherit; text-decoration: none; }
.fa-marketing img { max-width: 100%; display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 26px; }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn-fa {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 14px 26px; border-radius: 999px; font-weight: 650; font-size: .98rem;
    border: 1.5px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-fa:hover { transform: translateY(-2px); }
.btn-fa:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn-primary-fa { background: var(--orange-deep); color: #fff; box-shadow: 0 12px 30px rgba(210,78,11,.32); }
.btn-primary-fa:hover { background: #c04709; box-shadow: 0 18px 40px rgba(210,78,11,.42); color: #fff; }
.btn-blue-fa { background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(27,79,188,.30); }
.btn-blue-fa:hover { color: #fff; }
.btn-outline-fa { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost-fa { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ghost-fa:hover { background: rgba(255,255,255,.10); color: #fff; }
.btn-lg-fa { padding: 17px 34px; font-size: 1.05rem; }

/* ---------- Public nav ---------- */
.fa-nav {
    position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.80);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(13,27,62,.07);
}
.fa-nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 22px; }
.fa-nav-logo { flex: 0 0 auto; }
.fa-nav-logo img { height: 30px; width: auto; }

/* The gap shrinks with the viewport instead of holding 28px until the row breaks. nowrap is the
   rule that actually mattered: without it "Open houses" and "Listings & AI" each folded onto two
   lines inside a 64px bar, which is what an iPad in landscape was showing. */
.fa-nav-links {
    display: flex; align-items: center; gap: clamp(16px, 2.1vw, 28px);
    font-size: .87rem; font-weight: 550; color: var(--ink); white-space: nowrap;
}
.fa-nav-links a { opacity: .82; transition: opacity .15s ease; }
.fa-nav-links a:hover, .fa-nav-links a.on { opacity: 1; }
.fa-nav-cta { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.fa-nav-cta .btn-fa { padding: 9px 20px; font-size: .87rem; }
.fa-nav-cta .signin { font-weight: 600; color: var(--ink); font-size: .87rem; }
.fa-nav-cta .tv-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: .87rem; color: var(--ink); opacity: .82;
    transition: opacity .15s ease;
}
.fa-nav-cta .tv-link:hover { opacity: 1; }

/* "Get the app" in the top bar. The store badges used to live only in the footer, which means the
   fact that Feedalto is a phone app was the last thing a visitor learned rather than the first.
   Styled as a utility link, not a second CTA: the trial pill stays the one loud thing up here.

   DESKTOP ONLY (see the 1100px block below, which hides it). Below that width the bar is already
   carrying logo + TV + Sign in + Start free + menu, and a phone visitor is being offered the
   install strip above the nav anyway — a second prompt in the same screenful is one too many. */
.fa-nav-cta .app-link {
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; font-size: .87rem; color: var(--ink); opacity: .82;
    transition: opacity .15s ease;
}
.fa-nav-cta .app-link:hover { opacity: 1; }

/* ---------- The collapsed menu ----------
   Hidden entirely on a wide screen, so it costs nothing there. */
.fa-nav-menu { display: none; position: relative; }
.fa-nav-menu > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -6px; border-radius: 12px;
    transition: background .15s ease;
}
.fa-nav-menu > summary::-webkit-details-marker { display: none; }
.fa-nav-menu > summary::marker { content: ''; }
.fa-nav-menu > summary:hover { background: rgba(13,27,62,.06); }
.fa-nav-menu > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.fa-burger { display: block; width: 20px; }
.fa-burger i {
    display: block; height: 2px; border-radius: 2px; background: var(--ink);
    transition: transform .22s ease, opacity .18s ease;
}
.fa-burger i + i { margin-top: 5px; }
/* Becomes a close cross while the panel is open — the button has to say what pressing it does now,
   not what it did a moment ago. */
.fa-nav-menu[open] .fa-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fa-nav-menu[open] .fa-burger i:nth-child(2) { opacity: 0; }
.fa-nav-menu[open] .fa-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-bleed under the bar rather than a small dropdown hanging off the right edge: at these
   widths the panel IS the navigation, and a cramped popover reads like an afterthought. */
/* A CARD ANCHORED TO THE BUTTON, not a full-bleed sheet.
   The full-bleed version needed width:100vw with a centring translate, and two things went wrong
   with it. Chrome lays out a closed <details>' contents rather than display:none-ing them, so that
   100vw box was measured on every page load — on a 390px phone it pushed the document to 492px
   wide and gave the whole marketing site a horizontal scrollbar. And the panel resolved its
   position against the <details> rather than the nav, so it hung off the right edge anyway.

   A fixed-width card anchored to the button has neither problem: no viewport units, no centring
   maths, and nothing to overflow. The explicit display:none is belt and braces — the panel must
   cost nothing at all while it is shut. */
.fa-nav-menu:not([open]) .fa-nav-panel { display: none; }
.fa-nav-panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 264px; max-width: calc(100vw - 36px);
    background: #fff;
    border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 26px 60px rgba(13,27,62,.22);
    padding: 10px;
    animation: faNavDrop .18s cubic-bezier(.2,.7,.2,1);
    transform-origin: top right;
}
@keyframes faNavDrop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.fa-nav-panel-in { display: grid; gap: 1px; }
.fa-nav-panel a {
    display: flex; align-items: center; gap: 11px;
    /* 46px tall: a touch target on a tablet, not a menu entry for a mouse. */
    padding: 12px 14px; border-radius: 12px;
    font-size: .98rem; font-weight: 600; color: var(--ink);
    transition: background .14s ease;
}
.fa-nav-panel a:hover, .fa-nav-panel a:focus-visible { background: var(--bg-soft); }
.fa-nav-panel a.on { color: var(--blue); }
.fa-nav-panel a.util { font-weight: 550; color: var(--body); font-size: .97rem; }
.fa-nav-panel-rule { height: 1px; background: var(--line); margin: 8px 14px; }

/* ---------- Nav breakpoints ----------
   1100px, not 900px. An iPad in landscape is 1024px wide, and at 900 the full row was still being
   asked to hold six chapter links, Show on TV, Sign in and a filled pill — it fitted only by
   wrapping every link onto two lines and pushing the pill out of the bar. Everything folds into
   one menu before it can get that far.

   Show on TV is the exception: it loses its LABEL and becomes an icon button, rather than
   disappearing into the panel. It is the one action a visitor performs while standing next to a
   television, and two taps into a menu is the wrong depth for it. */
@media (max-width: 1100px) {
    .fa-nav-links { display: none; }
    .fa-nav-menu { display: block; }

    .fa-nav-cta .tv-link {
        width: 40px; height: 40px; justify-content: center; gap: 0;
        border-radius: 12px; border: 1px solid var(--line); background: #fff;
        opacity: 1; color: var(--blue);
        transition: background .15s ease, border-color .15s ease;
    }
    .fa-nav-cta .tv-link:hover { background: var(--bg-soft); border-color: #cddcf7; }
    .fa-nav-cta .tv-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
    .fa-nav-cta .tv-link svg { width: 19px; height: 19px; }
    .tv-label { display: none; }
    /* Not squeezed into an already-full bar: it stays available in the collapsed panel, and the
       phone install strip above the nav is the real prompt at these widths. */
    .fa-nav-cta .app-link { display: none; }
}
/* ---------- Phone ----------
   Sign in moves into the panel, and everything left in the bar gets measured rather than assumed.
   A phone bar now carries four things — logo, TV, Start free, menu — where it used to carry two,
   and at 390px the untouched desktop sizes added up to more than the screen: the pill was clipped
   and the menu button was off the edge entirely, which also gave the whole page a horizontal
   scroll. The numbers below add up to ~316px inside an 18px gutter, so it fits a 360px phone with
   room to spare, and the logo's max-width keeps it honest on anything narrower still. */
@media (max-width: 560px) {
    .wrap { padding: 0 18px; }
    .fa-nav-in { gap: 10px; }
    .fa-nav-logo img { height: 26px; max-width: 38vw; object-fit: contain; object-position: left center; }
    .fa-nav-cta { gap: 6px; }
    .fa-nav-cta .signin { display: none; }
    .fa-nav-cta .btn-fa { padding: 9px 14px; font-size: .84rem; }
    .fa-nav-cta .tv-link { width: 36px; height: 36px; }
    .fa-nav-menu > summary { width: 36px; height: 36px; margin-right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
    .fa-nav-panel { animation: none; }
    .fa-burger i { transition: none; }
}

/* ---------- Sections ---------- */
.fa-sec { padding: 96px 0; }
.fa-sec.soft { background: var(--bg-soft); }
.fa-sec.dark { background: var(--bg-deep); color: var(--on-deep); }
.fa-sec.dark h2, .fa-sec.dark h3, .fa-sec.dark h4 { color: #fff; }

.sec-head { max-width: 42rem; margin: 0 auto 60px; text-align: center; }
.sec-head h2 { font-size: clamp(2rem, 3.9vw, 3rem); margin-bottom: 1rem; }
.sec-head p { font-size: 1.1rem; }
.fa-sec.dark .sec-head p { color: var(--on-deep-soft); }

/* Small uppercase label. Orange at this size fails AA on white, so the light
   variant uses --orange-ink and only the dark variant gets the bright brand orange. */
.kicker {
    display: inline-block; font-size: .78rem; font-weight: 750; letter-spacing: .16em;
    text-transform: uppercase; color: var(--orange-ink); margin-bottom: 14px;
}
.fa-sec.dark .kicker, .dark .kicker { color: var(--orange); }

/* ---------- Ticks ---------- */
.ticks { list-style: none; display: grid; gap: 12px; max-width: 34rem; padding: 0; margin: 0; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: .99rem; }
.ticks svg { flex: 0 0 20px; margin-top: 3px; }
.ticks b { color: var(--ink); font-weight: 650; }
.fa-sec.dark .ticks b, .dark .ticks b { color: #fff; }

/* ---------- "On any TV, open feedalto.com/tv" ----------
   A URL a reader is expected to retype on a television, so it's set as an address to copy down —
   monospaced, high contrast, roomy — rather than styled like the body links around it. It is still a
   real link for anyone reading on a smart TV. */
.tv-addr {
    display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-top: 20px; padding: 11px 16px; border-radius: 12px;
    background: rgba(27, 79, 188, .07); border: 1px solid rgba(27, 79, 188, .18);
    text-decoration: none; transition: background .15s ease, border-color .15s ease;
}
.tv-addr:hover { background: rgba(27, 79, 188, .12); border-color: rgba(27, 79, 188, .32); }
.tv-addr-label { font-size: .86rem; color: var(--muted); }
.tv-addr-url {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.02rem; font-weight: 650; color: var(--blue); letter-spacing: -.01em;
}

/* On a dark panel the blue-on-navy tint disappears and the URL fails contrast — go light instead. */
.fa-sec.dark .tv-addr, .dark .tv-addr {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22);
}
.fa-sec.dark .tv-addr:hover, .dark .tv-addr:hover { background: rgba(255, 255, 255, .14); }
.fa-sec.dark .tv-addr-label, .dark .tv-addr-label { color: #B9C4DA; }
.fa-sec.dark .tv-addr-url, .dark .tv-addr-url { color: #fff; }

/* ---------- Cards ---------- */
.fa-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fa-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fa-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cddcf7; }
.fa-card .ic { width: 46px; height: 46px; margin-bottom: 1rem; }
.fa-card .ic svg { width: 100%; height: 100%; display: block; }
.fa-card h4 { font-size: 1.04rem; margin-bottom: .45rem; }
.fa-card p { font-size: .93rem; margin: 0; }
@media (max-width: 950px) { .fa-grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .fa-grid3 { grid-template-columns: 1fr; } }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
.plan { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 34px; position: relative; }
.plan.best { border-color: var(--orange-deep); box-shadow: 0 24px 60px rgba(210,78,11,.16); }
.plan .flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--orange-deep); color: #fff; font-size: .72rem; font-weight: 750;
    padding: 5px 15px; border-radius: 999px; letter-spacing: .05em;
}
.plan h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.plan .amt { font-size: 2.5rem; font-weight: 780; color: var(--ink); letter-spacing: -.035em; }
.plan .amt span { font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan .sub { font-size: .88rem; color: var(--muted); margin-bottom: 1.4rem; }
.plan ul { list-style: none; display: grid; gap: 11px; margin: 0 0 1.8rem; padding: 0; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; }
@media (max-width: 700px) { .price-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--line); padding: 20px 0; }
.qa summary {
    cursor: pointer; font-weight: 650; color: var(--ink); font-size: 1.04rem;
    list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; font-size: 1.5rem; color: var(--muted); font-weight: 400; line-height: 1; }
.qa[open] summary::after { content: '\2013'; }
.qa p { margin: .8rem 0 0; font-size: .98rem; }

/* ---------- Final CTA ---------- */
.fa-final { background: linear-gradient(140deg, #143a8c, #070f26); color: #fff; text-align: center; padding: 108px 0; }
.fa-final h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 22ch; margin: 0 auto 1.1rem; }
.fa-final p { color: var(--on-deep); max-width: 34rem; margin: 0 auto 2rem; font-size: 1.06rem; }
.stores { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }
.stores img { height: 48px; }

/* ---------- Footer ---------- */
.fa-foot { background: #050b1c; color: #94a6c4; padding: 62px 0 30px; font-size: .92rem; }
.fa-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 40px; }
.fa-foot h5 { color: #fff; font-size: .93rem; margin-bottom: .9rem; }
.fa-foot a { display: block; margin-bottom: .55rem; color: #94a6c4; }
.fa-foot a:hover { color: #fff; }
.fa-foot p { margin: 0; }
.fa-foot-bottom { border-top: 1px solid rgba(255,255,255,.10); padding-top: 22px; font-size: .84rem; color: #8195b6; }
@media (max-width: 820px) { .fa-foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Reveal on scroll ----------
   Starts at .001 rather than 0 so anything that ignores opacity still shows the
   content, and .no-js pins it on outright. Nothing is ever JS-gated. */
.reveal { opacity: .001; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

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