/* ============================================================================
   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 */
    /* The tick green (#28C76F) is a SHAPE colour — fine as a 2.5px checkmark, far too light to set
       type in: it lands near 2.3:1 on white. --green is its readable sibling, for the moments a
       number or a word has to actually say "free" / "included".
       5.4:1 on white and 5.1:1 on --bg-soft, so it clears AA at ANY size — deliberately, because a
       token that only works for headlines is a token somebody will eventually set a caption in. */
    --green: #0E7A41;
    --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; }
/* :not(.btn-fa) is load-bearing.
   This rule is one class + one element (0,1,1) and every button variant is a
   single class (0,1,0), so a plain `.fa-marketing a` BEAT `.btn-primary-fa`'s
   own colour: the pricing card's "Start 14 days free" inherited the card's navy
   ink and rendered dark-blue on orange — about 3:1, and it read as broken. The
   nav CTA escaped only because the nav sits outside .fa-marketing. */
.fa-marketing a:not(.btn-fa) { color: inherit; }
.fa-marketing a { 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; }
/* THE PRIMARY CTA — ONE ORANGE ACROSS THE WHOLE SITE: brand #F26722, darkening to
   --orange-deep on hover.

   Every filled orange on a public page is this colour: this button, the app
   banner's GET, the "Save 40%" badge, the for-buyers eyebrow and that page's
   "Start on this screen". They appear together — GET sits directly above Start
   free on a phone — and two nearly-identical oranges in one viewport read as a
   mistake rather than as a palette.

   Flat, with a tight shadow. The 30px orange halo at .32 alpha this used to carry
   was the genuinely dated part on a white header: a glow, not elevation.

   Small text on this fill is white and bold on purpose — see --orange in the
   palette block for why plain orange is never the TEXT colour on light. */
.btn-primary-fa {
    background: var(--orange);
    color: #fff;
    letter-spacing: .01em;
    box-shadow:
        0 1px 2px rgba(88, 32, 3, .20),
        0 8px 18px -8px rgba(242, 103, 34, .45);
}

.btn-primary-fa:hover {
    background: var(--orange-deep);
    color: #fff;
    box-shadow:
        0 2px 4px rgba(88, 32, 3, .24),
        0 12px 24px -10px rgba(242, 103, 34, .50);
}

.btn-primary-fa:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(88, 32, 3, .30); }
/* The brand-blue twin of the primary CTA, built the same way so the two read as a
   pair rather than as two unrelated buttons: flat brand fill, tight contact shadow,
   hover darkens. White on --blue is 8:1, so the label holds at any size. */
.btn-blue-fa {
    background: var(--blue);
    color: #fff;
    letter-spacing: .01em;
    box-shadow:
        0 1px 2px rgba(10, 30, 80, .22),
        0 8px 18px -8px rgba(27, 79, 188, .45);
}

.btn-blue-fa:hover {
    background: var(--blue-dark);
    color: #fff;
    box-shadow:
        0 2px 4px rgba(10, 30, 80, .26),
        0 12px 24px -10px rgba(27, 79, 188, .50);
}

.btn-blue-fa:active { transform: translateY(0); box-shadow: inset 0 2px 5px rgba(10, 30, 80, .30); }
/* The secondary CTA has to look clickable on its own. At --line the border was
   so faint that the monthly plan's "Start free" read as a disabled field next to
   the annual card's filled button. */
.btn-outline-fa { border-color: rgba(13, 27, 62, .22); color: var(--ink); background: #fff; }
.btn-outline-fa:hover { border-color: var(--ink); background: #fff; box-shadow: 0 8px 18px -10px rgba(13, 27, 62, .45); }
.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; }

/* THREE ITEMS, NOT NINE. The bar used to hold every chapter as its own nowrap link, which ran past
   the edge of the page between about 1220 and 1400px and gave the whole site a horizontal
   scrollbar. Two grouped menus and Pricing cannot overflow: the width no longer grows with the
   number of features. */
.fa-nav-links {
    display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px);
    font-size: .9rem; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.fa-nav-plain { opacity: .82; transition: opacity .15s ease; }
.fa-nav-plain:hover, .fa-nav-plain.on { opacity: 1; }

/* ---------- The grouped menus ----------
   position:static on the <details> itself, so the panel below resolves against .fa-nav (which is
   sticky, and therefore a positioned ancestor) rather than against the summary. That is what lets
   a full-width sheet sit under the bar without a single viewport unit or centring translate. */
.fa-mega { position: static; }
.fa-mega > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    opacity: .82; transition: opacity .15s ease;
}
.fa-mega > summary::-webkit-details-marker { display: none; }
.fa-mega > summary::marker { content: ''; }
.fa-mega > summary:hover, .fa-mega[open] > summary { opacity: 1; }
.fa-mega > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.fa-mega .fa-chev { transition: transform .18s ease; opacity: .6; }
.fa-mega[open] .fa-chev { transform: rotate(180deg); }

/* Explicit display:none while shut — NOT just an [open] selector. Chrome lays out a closed
   <details>' contents, so a wide panel left merely invisible is measured on every page load and
   pushes the document past the viewport. That is the exact bug this menu replaced. */
.fa-mega:not([open]) .fa-mega-panel { display: none; }
.fa-mega-panel {
    position: absolute; top: 100%; left: 0; right: 0;
    /* INHERITED nowrap IS THE ENEMY HERE. .fa-nav-links sets white-space:nowrap so the three bar
       items can never fold inside a 64px bar — and every description in this panel inherited it.
       One unbreakable line per row blew the grid tracks wider than the sheet: the columns
       overlapped each other, the featured card ran off the right edge, and the page got the
       horizontal scrollbar this menu was built to remove. The panel is prose; it wraps. */
    white-space: normal;
    background: #fff;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px rgba(13,27,62,.14);
    animation: faNavDrop .18s cubic-bezier(.2,.7,.2,1);
    transform-origin: top center;
}
.fa-mega-in {
    display: grid; grid-template-columns: 1fr 1fr 1.15fr;
    gap: 40px; padding: 34px 0 30px;
    align-items: start;
}
/* ---------- Who we serve: three cards across ----------
   A single narrow column in a full-bleed sheet left two thirds of it white, and empty space that
   large reads as a page that failed to load rather than as restraint. Three cards fill the room
   with something real instead of padding it out. */
/* align-items:stretch undoes the sheet's default `start`. Three cards of different text lengths
   otherwise end at three different heights, and the three "→" links they exist to offer land on
   three different lines — which is exactly the ragged look this was meant to replace. */
.fa-mega.audiences .fa-mega-in {
    grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 28px 0 30px;
    align-items: stretch;
}
.aud-card {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 18px;
    padding: 22px 22px 20px;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.aud-card:hover { background: #fff; border-color: #cddcf7; transform: translateY(-2px); }
.aud-card .ic {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line); color: var(--blue); margin-bottom: 14px;
}
.aud-card:hover .ic { background: var(--bg-soft); }
.aud-card .ic svg { width: 21px; height: 21px; }
.aud-card strong { display: block; font-size: 1.05rem; font-weight: 650; color: var(--ink); }
.aud-card.on strong { color: var(--blue); }
.aud-card p { font-size: .875rem; line-height: 1.55; color: var(--muted); margin: 7px 0 14px; }
/* margin-top:auto pushes the link to the foot of whichever card is tallest, so all three sit on
   one line however long the copy above them runs. */
.aud-go {
    display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
    font-size: .85rem; font-weight: 650; color: var(--blue);
}
.aud-card:hover .aud-go svg { transform: translateX(3px); }
.aud-go svg { transition: transform .16s ease; }

.fa-mega-head {
    font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px;
}
.fa-mega-head.on-dark { color: rgba(255,255,255,.62); }

/* min-width:0 on every grid child. A grid track's default minimum is its content's intrinsic
   width, so one long unbroken string — a URL, a long product name, anything — can still force a
   track wider than the sheet even with wrapping on. This makes the columns genuinely shrinkable. */
.fa-mega-col, .fa-mega-feat { min-width: 0; }
.fa-mega-col { display: grid; gap: 2px; }
.fa-mega-col > a {
    display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start;
    padding: 11px 12px; margin: 0 -12px; border-radius: 14px;
    transition: background .14s ease;
}
.fa-mega-col > a:hover, .fa-mega-col > a:focus-visible { background: var(--bg-soft); }
.fa-mega-col > a .ic {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--bg-soft); color: var(--blue);
}
.fa-mega-col > a:hover .ic { background: #fff; }
.fa-mega-col > a .ic svg { width: 18px; height: 18px; }
.fa-mega-col > a .tx { display: block; min-width: 0; }
.fa-mega-col > a strong {
    display: block; font-size: .98rem; font-weight: 650; color: var(--ink); line-height: 1.35;
}
.fa-mega-col > a em {
    display: block; font-style: normal; font-size: .84rem; color: var(--muted);
    line-height: 1.45; margin-top: 3px;
}
.fa-mega-col > a.on strong { color: var(--blue); }

/* The featured card. Dark on a white sheet, because the one thing here a visitor could not have
   guessed from a link label deserves to be the thing their eye lands on first. */
.fa-mega-feat .feat-card {
    display: block; background: var(--ink); color: #fff;
    border-radius: 20px; padding: 24px 24px 22px;
}
.fa-mega-feat .feat-card:hover { background: #0a1637; }

/* The ring sits BESIDE the words, not above them: on its own it is a number with no unit, and the
   whole point of Feedalto Match is what the number is measured against. */
.feat-top { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.feat-ring { flex: 0 0 auto; }
.feat-lede { min-width: 0; }
.feat-badge {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: #fff;
    background: rgba(255,255,255,.14); border-radius: 999px; padding: 5px 11px; margin-bottom: 9px;
}
.fa-mega-feat h4 { font-size: 1.02rem; line-height: 1.32; margin: 0; color: #fff; }
.fa-mega-feat p { font-size: .87rem; line-height: 1.55; color: rgba(255,255,255,.76); margin: 0 0 15px; }
.feat-go { display: inline-flex; align-items: center; gap: 8px; font-size: .87rem; font-weight: 650; color: #fff; }
.fa-mega-feat .feat-card:hover .feat-go svg { transform: translateX(3px); }
.feat-go svg { transition: transform .16s ease; }

.fa-mega-foot { border-top: 1px solid var(--line); background: var(--bg-soft); }
.fa-mega-foot a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 0; font-size: .88rem; font-weight: 650; color: var(--blue);
}
.fa-mega-foot a:hover svg { transform: translateX(3px); }
.fa-mega-foot svg { transition: transform .16s ease; }
.fa-nav-cta { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
/* A touch heavier than the shared 650: at .87rem on a saturated fill, the extra
   weight is what keeps the label crisp rather than smudged. */
.fa-nav-cta .btn-fa { padding: 10px 22px; font-size: .87rem; font-weight: 700; }
.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 1220px 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; }

/* THE SAME GROUPING AS THE DESKTOP SHEET. A visitor who learned that Agreements lives under "Win
   the business" on a laptop should find it in the same place on their phone — and eleven ungrouped
   rows in a 264px card is a scroll with no landmarks. */
.fa-nav-panel-head {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
    color: var(--muted); padding: 14px 14px 6px;
}
.fa-nav-panel-in > .fa-nav-panel-head:first-child { padding-top: 6px; }
/* The grouped list is taller than the old flat one, and on a landscape phone it would otherwise
   run off the bottom of the screen with no way to reach the end. */
.fa-nav-panel { max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; }

/* ---------- Nav breakpoints ----------
   1220px, not 900px. An iPad in landscape is 1024px wide, and at 900 the full row was still being
   asked to hold the 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.

   Raised from 1100 when "For buyers" was added: an eighth chapter link is roughly 110px of bar,
   and at 1100 it reintroduced exactly the wrap this breakpoint exists to prevent.

   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: 1220px) {
    .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, .fa-mega-panel { animation: none; }
    .fa-burger i, .fa-mega .fa-chev, .feat-go svg, .fa-mega-foot svg { 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: 1px solid var(--line); border-radius: 22px; padding: 34px;
    position: relative;
    box-shadow: 0 1px 2px rgba(13, 27, 62, .04), 0 10px 28px -18px rgba(13, 27, 62, .30);
}

/* The recommended plan is raised, not outlined in highlighter.
   A 1.5px saturated orange rectangle plus a 60px orange bloom is a 2014 pricing
   table: the glow spreads onto the white section and looks like a print bleed.
   A hairline orange edge, a real elevation shadow and a thin brand rule along the
   top say "this is the one" without shouting. */
.plan.best {
    border-color: rgba(210, 78, 11, .38);
    box-shadow:
        0 2px 6px rgba(13, 27, 62, .06),
        0 22px 48px -26px rgba(13, 27, 62, .38);
    overflow: hidden;
}

.plan.best::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, #F26722 0%, var(--orange-deep) 100%);
}

.plan .flag {
    position: absolute; top: 16px; right: 18px;
    background: var(--orange);
    color: #fff; font-size: .7rem; font-weight: 750;
    padding: 5px 12px; border-radius: 999px; letter-spacing: .045em;
    box-shadow: 0 1px 2px rgba(88, 32, 3, .28);
}
.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; } }

/* ---------- Honeypot ----------
   Kept in the layout flow and pushed off-screen rather than display:none'd. A bot that parses the
   DOM ignores display:none and fills the field anyway, which is the entire point; a human never
   sees it either way. aria-hidden + tabindex="-1" on the markup keep it away from screen readers
   and the tab order, so it is invisible to assistive technology as well as to sighted users. */
.fa-hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Free for buyers ----------
   Sits below the plans rather than beside them. Deliberately NOT a third card in .price-grid: a
   card in that row is one of a set to choose between, and "free" in a row of paid plans either
   undercuts them or gets read as the stripped-down tier. This is a different question, from a
   different person, so it gets a different shape — wider, quieter, and unmissable. */
.buyer-free {
    display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: start;
    max-width: 800px; margin: 2.6rem auto 0;
    background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 24px;
    padding: 30px 34px;
}
.bf-price { text-align: center; padding-right: 30px; border-right: 1px solid var(--line); }
/* Same weight and tracking as .plan .amt — a buyer is comparing this with the number above it
   whether or not the page invites the comparison, so it is stated in the same language. */
.bf-amt { font-size: 2.9rem; font-weight: 780; color: var(--green); letter-spacing: -.035em; line-height: 1; }
.bf-forever { font-size: .82rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 7px; }
.buyer-free h3 { font-size: 1.22rem; margin: 0 0 .5rem; }
.buyer-free p { font-size: .95rem; color: var(--body); margin: 0 0 1rem; }
.bf-list { list-style: none; display: grid; gap: 9px; margin: 0 0 1.4rem; padding: 0; }
.bf-list li { position: relative; padding-left: 26px; font-size: .93rem; color: var(--body); }
.bf-list li::before {
    content: ''; position: absolute; left: 0; top: .34em;
    width: 14px; height: 8px; border-left: 2.5px solid #28C76F; border-bottom: 2.5px solid #28C76F;
    transform: rotate(-45deg);
}
.buyer-free .btn-fa { display: inline-flex; align-items: center; gap: 8px; background: #fff; }

@media (max-width: 700px) {
    /* The divider rule is vertical between two columns; stacked, it has to become horizontal or
       it hangs off the side of the price with nothing beside it. */
    .buyer-free { grid-template-columns: 1fr; gap: 20px; padding: 26px 24px; }
    .bf-price {
        text-align: left; padding-right: 0; padding-bottom: 18px;
        border-right: 0; border-bottom: 1px solid var(--line);
        display: flex; align-items: baseline; gap: 12px;
    }
    .bf-forever { margin-top: 0; }
}

/* ---------- 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; } }

/* ---------- Open House Playbook (home page, #playbook) ----------
   The lock-screen reminder with its Mark done button, beside the playbook timeline and the broker's
   seal. Pure HTML/CSS + one inline SVG; no images. Colours are the tokens above, and the four phase
   colours each clear 4.5:1 on white because they carry the phase names as text. */
.pbk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1080px; margin: 0 auto; }
.pbk-visual { position: relative; display: flex; gap: 22px; align-items: flex-start; justify-content: center; }

.pbk-phone {
    flex: 0 0 236px; width: 236px; border-radius: 34px; padding: 26px 14px 34px;
    background: radial-gradient(260px 200px at 70% 0%, #2a5bd0 0%, transparent 70%), linear-gradient(170deg, #16224a, #070f26);
    box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.14);
    color: #fff; text-align: center;
}
.pbk-clock { font-size: 2.9rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; color: #fff; }
.pbk-date { font-size: .8rem; color: var(--on-deep); margin: 4px 0 22px; }
.pbk-notif {
    text-align: left; background: rgba(255,255,255,.95); color: var(--ink); border-radius: 16px;
    padding: 11px 12px 10px; box-shadow: 0 10px 26px -12px rgba(0,0,0,.5);
}
/* Both animations wait for the section's reveal, so they play when the reader gets there. */
.reveal.in .pbk-notif { animation: pbkDrop .8s cubic-bezier(.2,.9,.3,1.2) both .2s; }
.pbk-notif-app { display: flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 650; color: var(--muted); letter-spacing: .02em; }
.pbk-app-ic { width: 18px; height: 18px; border-radius: 5px; background: var(--orange); color: #fff; font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pbk-now { margin-left: auto; font-weight: 500; }
.pbk-notif-title { font-size: .84rem; font-weight: 700; margin-top: 6px; line-height: 1.3; }
.pbk-notif-body { font-size: .8rem; color: var(--body); line-height: 1.35; margin-top: 2px; }
.pbk-notif-actions { display: flex; gap: 6px; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.pbk-act { flex: 1; text-align: center; font-size: .76rem; font-weight: 650; border-radius: 9px; padding: 6px 4px; background: #eef2f9; color: var(--ink); }
.pbk-act-done { background: var(--blue); color: #fff; }

.pbk-card {
    position: relative; flex: 1 1 auto; max-width: 290px; margin-top: 46px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 18px;
    box-shadow: var(--shadow);
}
.pbk-card-head b { display: block; font-size: .92rem; color: var(--ink); }
.pbk-card-head span { font-size: .74rem; color: var(--muted); }
.pbk-tl { list-style: none; margin: 14px 0 0; padding: 0; }
.pbk-tl li { position: relative; display: flex; gap: 11px; padding: 0 0 13px; }
.pbk-tl li:last-child { padding-bottom: 0; }
.pbk-tl li::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--line); }
.pbk-tl li:last-child::before { display: none; }
.pbk-tl i {
    flex: 0 0 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pbk-c); background: #fff;
    position: relative; margin-top: 2px;
}
.pbk-tl li.is-done i { background: var(--pbk-c); }
.pbk-tl li.is-done i::after {
    content: ""; position: absolute; left: 4px; top: 1.5px; width: 5px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pbk-tl b { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pbk-c); line-height: 1.3; }
.pbk-tl span { display: block; font-size: .8rem; color: var(--body); line-height: 1.35; }
.pbk-tl li.is-done span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(91,104,132,.5); }
.pbk-before { --pbk-c: #1B4FBC; }
.pbk-setup { --pbk-c: #6D28D9; }
.pbk-during { --pbk-c: var(--orange-ink); }
.pbk-after { --pbk-c: var(--green); }

.pbk-seal {
    position: absolute; right: -30px; top: -44px; width: 96px; color: var(--green);
    transform: rotate(-10deg); filter: drop-shadow(0 8px 14px rgba(14,122,65,.28));
}
.pbk-seal svg { display: block; width: 100%; height: auto; }
.reveal.in .pbk-seal { animation: pbkStamp .6s cubic-bezier(.2,1.4,.4,1) both .5s; }
@keyframes pbkStamp {
    0%   { opacity: 0; transform: rotate(-24deg) scale(1.5); }
    70%  { opacity: 1; transform: rotate(-8deg) scale(.95); }
    100% { opacity: 1; transform: rotate(-10deg) scale(1); }
}
@keyframes pbkDrop {
    0%   { opacity: 0; transform: translateY(-14px) scale(.97); }
    100% { opacity: 1; transform: none; }
}

.pbk-copy { display: grid; gap: 26px; }
.pbk-aud .p-tag { margin-bottom: 14px; }
.pbk-copy .p-note { font-size: .9rem; color: var(--muted); max-width: 34rem; margin: 0; }
.pbk-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
/* a.pbk-link, not .pbk-link: `.fa-marketing a:not(.btn-fa)` (0,2,1) would otherwise paint it body ink. */
.fa-marketing a.pbk-link, a.pbk-link { color: var(--blue); font-weight: 650; font-size: .96rem; }
.fa-marketing a.pbk-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
    .pbk-grid { grid-template-columns: 1fr; gap: 44px; }
}
/* The seal hangs off the card's corner, so the side-by-side picture needs ~600px before it would push
   the page sideways; below that the phone and the card stack. */
@media (max-width: 640px) {
    .pbk-visual { flex-direction: column; align-items: center; }
    .pbk-card { margin-top: 10px; max-width: 320px; width: 100%; }
    .pbk-seal { right: -6px; top: -34px; width: 78px; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal.in .pbk-notif, .reveal.in .pbk-seal { animation: none; }
}

/* ---------- Contract to Close (home page, #contract-to-close) ----------
   The product's deal card drawn in HTML/CSS: health pill, "next" line, the runway from acceptance to
   closing with dots coloured by state, steps done — then the morning notification (reuses .pbk-notif)
   and two more deals. Every colour that carries words clears 4.5:1 on its tint; the dot colours are
   graphics only and the legend names them. Layout holds at 400 / 768 / 1024:
     > 1000px  two columns (visual sticky beside the agent list), broker/client cards side by side;
     ≤ 1000px  one column, the visual capped at 520px and centred;
     ≤ 560px   the notification and the other deals stack under the card. */
.c2c-grid { align-items: start; }
.c2c-visual { display: grid; gap: 16px; width: 100%; max-width: 520px; margin: 0 auto; }
@media (min-width: 1001px) { .c2c-visual { position: sticky; top: 100px; } }

.c2c-deal {
    background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 16px 14px;
    box-shadow: var(--shadow);
}
.c2c-deal-top { display: flex; gap: 11px; align-items: flex-start; }
.c2c-av {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: #EEF4FF;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.c2c-deal-main { flex: 1 1 auto; min-width: 0; }
.c2c-deal-main b { display: block; font-size: .98rem; color: var(--ink); line-height: 1.25; }
.c2c-deal-main span { display: block; font-size: .78rem; color: var(--muted); }
.c2c-pill { flex: 0 0 auto; font-size: .72rem; font-weight: 750; border-radius: 999px; padding: 3px 9px; line-height: 1.3; white-space: nowrap; }
.c2c-pill.is-ok { background: #E3F6EA; color: #155E30; }
.c2c-pill.is-soon { background: #FEF6D8; color: #7A4A00; }
.c2c-pill.is-risk { background: #FEE4E2; color: #912018; }
.c2c-next { margin-top: 9px; font-size: .84rem; font-weight: 650; color: var(--ink); line-height: 1.35; }
.c2c-arrow { color: var(--blue); }

/* The runway: one track, labels alternating above and below so six dates fit at 360px. */
.c2c-runway { position: relative; height: 136px; margin: 10px 18px 2px; }
.c2c-track { position: absolute; left: 0; right: 0; top: 64px; height: 4px; border-radius: 4px; background: #E3E7EF; overflow: hidden; }
.c2c-track > span { display: block; height: 100%; background: linear-gradient(90deg, #12B76A, #7AD7A8); }
.c2c-pt { position: absolute; top: 0; bottom: 0; width: 0; --c2c-c: #A3ACBD; }
.c2c-pt i {
    position: absolute; top: 59px; left: -7px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--c2c-c); box-shadow: 0 0 0 3px #fff;
}
.c2c-pt.is-done { --c2c-c: #12B76A; }
.c2c-pt.is-today { --c2c-c: #2E6BE6; }
.c2c-pt.is-today i { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(46,107,230,.25); }
.c2c-pt.is-soon { --c2c-c: #F79009; }
.c2c-pt.is-upcoming { --c2c-c: #A3ACBD; }
.c2c-lab {
    position: absolute; left: 0; width: 86px; transform: translateX(-50%); text-align: center;
    font-size: .68rem; line-height: 1.2; color: var(--muted);
}
.c2c-lab b { display: block; color: var(--ink); font-weight: 700; }
.c2c-pt.up .c2c-lab { bottom: 84px; }
.c2c-pt.down .c2c-lab { top: 82px; }
.c2c-pt.al-start .c2c-lab { transform: translateX(-10px); text-align: left; }
.c2c-pt.al-end .c2c-lab { transform: translateX(calc(-100% + 10px)); text-align: right; }
.reveal.in .c2c-pt.is-today i { animation: c2cPulse 2.4s ease-in-out infinite 1s; }
@keyframes c2cPulse {
    0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(46,107,230,.25); }
    50%      { box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(46,107,230,.08); }
}

.c2c-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.c2c-bar { flex: 1 1 auto; height: 7px; border-radius: 99px; background: #EEF0F4; overflow: hidden; }
.c2c-bar > span { display: block; height: 100%; border-radius: 99px; background: #12B76A; }
.c2c-count { font-size: .76rem; font-weight: 650; color: var(--muted); white-space: nowrap; }
.c2c-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: .72rem; color: var(--muted); }
.c2c-legend span { display: inline-flex; align-items: center; gap: 5px; }
.c2c-legend i { width: 9px; height: 9px; border-radius: 50%; background: #A3ACBD; }
.c2c-legend i.is-done { background: #12B76A; }
.c2c-legend i.is-today { background: #2E6BE6; }
.c2c-legend i.is-soon { background: #F79009; }
.c2c-hist { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--body); line-height: 1.35; }

.c2c-under { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.c2c-notif { border: 1px solid var(--line); box-shadow: var(--shadow); }
.c2c-others { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c2c-others li {
    display: flex; gap: 8px; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
}
.c2c-o-addr { min-width: 0; font-size: .84rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.c2c-o-addr small { display: block; font-size: .72rem; font-weight: 500; color: var(--muted); }

/* Broker-owners and clients: the second row, two cards side by side on wide screens. */
.c2c-more { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1080px; margin: 56px auto 0; }
.c2c-aud { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 22px; }
.c2c-aud .p-tag { margin-bottom: 14px; }
.c2c-aud .ticks { max-width: none; }
.c2c-close { max-width: 1080px; margin: 30px auto 0; display: grid; gap: 18px; justify-items: start; }
.c2c-close .p-note { font-size: .9rem; color: var(--muted); max-width: 46rem; margin: 0; }

@media (max-width: 1000px) {
    /* Stacked: the agent list lines up with the cards below it rather than hugging the left edge. */
    .c2c-grid .pbk-copy { width: 100%; max-width: 640px; margin: 0 auto; }
    .c2c-grid .pbk-copy .ticks { max-width: none; }
    .c2c-more { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; max-width: 640px; }
    .c2c-close { max-width: 640px; }
}
@media (max-width: 560px) {
    .c2c-under { grid-template-columns: 1fr; }
    .c2c-deal { padding: 14px 12px 12px; }
    .c2c-runway { margin: 10px 12px 2px; }
    .c2c-lab { width: 76px; }
    .c2c-aud { padding: 20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .reveal.in .c2c-pt.is-today i { animation: none; }
}

/* ---------- Investors with several agents (home page, #investors) ----------
   The "My agents" card beside the overlap reminder. Reuses .pbk-phone / .pbk-card; each pill's text clears
   4.5:1 on its own tint because it carries the agreement type as words. */
.inv-mock { max-width: 300px; }
.inv-mock-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 11px; }
.inv-mock-list li { display: flex; gap: 10px; align-items: flex-start; }
.inv-mock-list b { display: block; font-size: .84rem; color: var(--ink); line-height: 1.25; }
.inv-mock-av {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: #EEF3FE; color: #1B4FBC;
    font-size: .7rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .02em;
}
.inv-mock-pill { display: inline-block; margin-top: 3px; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; line-height: 1.35; }
.inv-mock-pill.is-ex { background: #F1EAFE; color: #5B21B6; }
.inv-mock-pill.is-non { background: #E8F0FF; color: #1B3F8F; }
.inv-mock-pill.is-prop { background: #FFF1E6; color: #8A3A07; }
.inv-mock-cov {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--line); font-size: .74rem; color: var(--body); line-height: 1.35;
}
.inv-mock-chip { font-size: .7rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: #E3F6EA; color: #155E30; white-space: nowrap; }

/* ---------- Referrals (home page #referrals) ----------
   The product's own referral card: client + route between two agents, the timeline, the fee line and
   the checklist. Reuses .pbk-card / .pbk-phone / .pbk-notif; aria-hidden in the page. */
.ref-mock { max-width: 320px; }
.ref-mock-route { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .74rem; color: var(--body); }
.ref-mock-route b { color: var(--ink); font-size: .8rem; display: block; line-height: 1.2; }
.ref-mock-arrow { color: #1B4FBC; font-weight: 800; }
.ref-mock-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.ref-mock-steps li { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: #94A3B8; }
.ref-mock-steps li i { width: 10px; height: 10px; border-radius: 50%; background: #D5DCEA; flex: 0 0 auto; }
.ref-mock-steps li.is-done { color: var(--ink); }
.ref-mock-steps li.is-done i { background: #12A150; }
.ref-mock-steps li.is-now { color: var(--ink); font-weight: 700; }
.ref-mock-steps li.is-now i { background: #1B4FBC; box-shadow: 0 0 0 3px rgba(27,79,188,.18); }
.ref-mock-steps li span { margin-left: auto; color: var(--body); font-weight: 400; }
.ref-mock-fee {
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .74rem; color: var(--body);
    display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.ref-mock-fee b { color: var(--ink); }
.ref-mock-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ref-mock-checks span { font-size: .68rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: #E3F6EA; color: #155E30; }
.ref-mock-checks span.is-flag { background: #FFF3DC; color: #8A5300; }

/* ---------- 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; }
}