/* =========================================================================
   US / international landing hero — Figma "WEBSITE FOR US BUYER" (1:2003)

   Kept in its own file rather than appended to app.css: it is one page's hero,
   the class prefix (`fmm-u*`) is unique to it, and app.css is edited often
   enough that a shared tail would collide.

   Colours come from the app tokens wherever the design's hex already matches
   one (--fmm-yellow #fbbf24, --fmm-muted #6B7280, --fmm-border #E5E7EB). The
   few that don't are declared once here rather than scattered as literals.
   ========================================================================= */

.fmm-ushero {
    --us-ink: #0D0D0D;         /* the design's near-black; darker than --fmm-text */
    --us-amber: #FFB800;       /* headline highlight + background wash */
    --us-line: #F3F4F6;
    --us-panel: #F9FAFB;

    position: relative;
    padding: 24px 0 8px;
    overflow: hidden;
}

/* The warm radial wash behind the whole hero, centred on the card. */
.fmm-ushero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        1140px 466px at 60% 50%,
        rgba(255, 184, 0, .18) 0%,
        rgba(255, 184, 0, 0) 70%
    );
    pointer-events: none;
}

.fmm-ushero > .fmm-container { position: relative; }

.fmm-ushero__grid {
    display: grid;
    /* The illustration column only needs to hold the 448px card. Giving the
       copy the remaining width keeps "Bring checkout to FlymyMall" on one
       line at desktop, the way the Figma frame draws it. */
    grid-template-columns: minmax(0, 1fr) minmax(320px, 500px);
    gap: 48px;
    align-items: center;
}

.fmm-ushero__copy,
.fmm-ushero__art { min-width: 0; }

/* Size the headline from the copy column, not the viewport, so the third
   line stays one line beside the card and still wraps on a phone. */
.fmm-ushero__copy { container-type: inline-size; }

/* ── Headline ─────────────────────────────────────────────────────────── */

.fmm-ushero__title {
    margin: 0;
    font-weight: 800;
    font-size: clamp(32px, 7.15cqi, 54px);
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--us-ink);
    text-wrap: wrap;
}

/* The word "Facebook" is the scribble exported from the Figma file, letters
   included, so it stays the same stroke on every line length.
   `.fmm img` is display:block and would drop the word onto its own line. */
.fmm .fmm-ushero__fb {
    display: inline-block;
    height: 0.92em;
    width: auto;
    max-width: 100%;
    margin: 0 .06em;
    vertical-align: -0.08em;
}
.fmm .fmm-ushero__brand .fmm-ushero__fb { animation: fmm-ushero-brand-in .35s ease-out; }
@keyframes fmm-ushero-brand-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fmm .fmm-ushero__brand .fmm-ushero__fb { animation: none; }
}

/* "Physical Verification" — amber. */
.fmm-ushero__mark { color: var(--us-amber); }

/* The hand-drawn underline sits under the LAST line only ("Verification"),
   so it is painted on an inner span rather than on the two-line parent —
   a background on the parent repeats once per line box and would underline
   "Physical" too.

   `inline-block` gives the span a box tall enough to paint into; the stroke
   is 597x16 with preserveAspectRatio="none", so it stretches to whatever
   width the word takes. */
.fmm-ushero__ul {
    display: inline-block;
    padding-bottom: .16em;
    background-image: url("../../images/marketplace/us-hero/underline.svg");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% .18em;
}

.fmm-ushero__lead {
    max-width: 640px;
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
    color: #1a1a1a;
}

.fmm-ushero__lead b { font-weight: 600; }
.fmm-ushero__lead i { font-style: italic; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.fmm-ushero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.fmm-ubtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease;
}

.fmm-ubtn--primary {
    width: 214px;
    min-width: 214px;
    height: 59.5px;
    padding: 17.5px 32px 18px;
    gap: 8px;
    border-radius: 16px;
    background: var(--fmm-yellow);
    color: var(--us-ink);
    font-weight: 800;
    box-shadow: 0 20px 25px -5px rgba(250, 204, 21, .3),
                0 8px 10px -6px rgba(250, 204, 21, .3);
}

.fmm-ubtn--ghost {
    width: 214px;
    min-width: 214px;
    height: 59.5px;
    padding: 17.5px 32px 18px;
    gap: 8px;
    background: #fff;
    color: var(--us-ink);
    font-weight: 700;
    border: 2px solid var(--fmm-border);
    border-radius: 16px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.fmm-ubtn--dark {
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--us-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}

.fmm-ubtn:hover { transform: translateY(-1px); }
.fmm-ubtn:focus-visible { outline: 3px solid var(--us-ink); outline-offset: 2px; }

/* ── Social proof ─────────────────────────────────────────────────────── */

.fmm-ushero__proof {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
}

.fmm-ustack { display: flex; align-items: center; }

.fmm-ustack__face,
.fmm-ustack__more {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 2px solid #FFFBF0;
    object-fit: cover;
    flex: none;
}

.fmm-ustack__face + .fmm-ustack__face,
.fmm-ustack__more { margin-left: -10px; }

.fmm-ustack__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--us-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
}

.fmm-ustack--sm .fmm-ustack__face {
    width: 24px;
    height: 24px;
    border-color: #fff;
    border-width: 1px;
}

.fmm-ustars {
    display: flex;
    align-items: center;
    gap: 4px;
}

.fmm-ustars b {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    color: var(--us-ink);
}

.fmm-ushero__trusted {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--fmm-muted);
}

/* ── Right-hand card ──────────────────────────────────────────────────── */

.fmm-ushero__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Room for the two badges that hang outside the card. */
    padding: 24px;
}

.fmm-ushero__glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    background: rgba(255, 184, 0, .15);
    filter: blur(32px);
    pointer-events: none;
}

.fmm-ucard {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 448px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px;
    background: #fff;
    border: 1px solid rgba(243, 244, 246, .8);
    border-radius: 32px;
    box-shadow: 0 25px 50px -12px rgba(229, 231, 235, .8);
}

.fmm-ucard__head { display: flex; gap: 14px; align-items: flex-start; }

.fmm-ucard__badge {
    flex: none;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 16px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
}

.fmm-ucard__eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--fmm-muted);
}

.fmm-ucard__title {
    margin: 2px 0 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    color: var(--us-ink);
}

.fmm-ucard__seller {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--fmm-muted);
}

.fmm-ucard__seller img {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--fmm-border);
    object-fit: cover;
}

.fmm-ucard__seller b { color: var(--us-ink); font-weight: 600; }

.fmm-ucard__shot {
    height: 208px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(152deg, #F9FAFB 0%, #F3F4F6 100%);
}

/* The export is a cut-out on white; multiply drops the box edge. */
.fmm-ucard__shot img {
    max-width: 78%;
    height: auto;
    mix-blend-mode: multiply;
}

.fmm-ucard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fmm-ucard__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 36px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--us-ink);
}

.fmm-ucard__price s {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--fmm-muted);
}

.fmm-ucard__verified {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #16A34A;
}

.fmm-ucard__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22C55E;
    flex: none;
}

/* ── Escrow progress ──────────────────────────────────────────────────── */

.fmm-uescrow {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 17px;
    background: var(--us-panel);
    border: 1px solid var(--us-line);
    border-radius: 16px;
}

.fmm-uescrow__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.fmm-uescrow__k {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--fmm-muted);
}

.fmm-uescrow__step {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: var(--fmm-yellow);
}

.fmm-uescrow__bars {
    display: flex;
    gap: 4px;
    padding-top: 2px;
}

.fmm-uescrow__bars span {
    flex: 1 1 0;
    height: 8px;
    border-radius: 999px;
    background: var(--fmm-border);
}

.fmm-uescrow__bars .is-done { background: var(--fmm-yellow); }

.fmm-uescrow__row--labels span {
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
    color: var(--us-ink);
}

.fmm-uescrow__row--labels .is-pending { color: var(--fmm-muted); }

/* ── Floating badges ──────────────────────────────────────────────────── */

.fmm-ufloat {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--us-line);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    white-space: nowrap;
}

.fmm-ufloat--watching {
    top: 4px;
    left: 4px;
    gap: 8px;
    padding: 11px 17px;
}

.fmm-ufloat--watching b {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: var(--us-ink);
}

.fmm-ufloat__live {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #EF4444;
}

.fmm-ufloat--passed {
    bottom: 0;
    left: 0;
    padding: 13px 17px;
}

.fmm-ufloat__icon {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background: #DCFCE7;
    border-radius: 12px;
}
.fmm-ufloat__icon img {
    display: block;
    flex: none;
    width: 13px;
    height: 20px;
    margin: 0 auto;
    object-fit: contain;
}

.fmm-ufloat--passed b {
    display: block;
    font-size: 12px;
    line-height: 16px;
    font-weight: 800;
    color: var(--us-ink);
}

.fmm-ufloat--passed em {
    display: block;
    font-size: 10px;
    line-height: 15px;
    font-style: normal;
    color: var(--fmm-muted);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .fmm-ushero__grid { grid-template-columns: 1fr; gap: 48px; }
    .fmm-ushero__lead { max-width: none; }
    .fmm-ushero__art { justify-content: flex-start; }
}

@media (min-width: 921px) and (max-width: 1100px) {
    .fmm-ushero__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 28px;
    }
    .fmm-ushero__lead { max-width: 512px; }
    .fmm-ushero__art { justify-content: center; padding: 16px 0; }
    .fmm-ufloat--watching { top: -8px; }
}

@media (min-width: 641px) and (max-width: 920px) {
    .fmm-ushero__art { justify-content: center; }
}

@media (max-width: 640px) {
    .fmm-ushero__title { font-size: 32px; text-wrap: wrap; }
    .fmm-ushero__grid,
    .fmm-ushero__copy,
    .fmm-ushero__art,
    .fmm-ucard { min-width: 0; max-width: 100%; }
    .fmm-ushero__lead { font-size: 17px; line-height: 1.65; }
    .fmm-ubtn--primary,
    .fmm-ubtn--ghost { flex: 1 1 100%; min-width: 0; }
    .fmm-ucard { padding: 18px; border-radius: 24px; }
    .fmm-ucard__price { font-size: 30px; }
    /* The overhang stops working once the card is edge-to-edge. */
    .fmm-ufloat--passed { position: static; margin-top: 12px; }
    .fmm-ufloat--watching { top: -8px; left: -4px; }
}

@media (prefers-reduced-motion: reduce) {
    .fmm-ubtn { transition: none; }
    .fmm-ubtn:hover { transform: none; }
}

/* ── From Social grid ─────────────────────────────────────────────────────
   Four across at the container width, matching the Figma section (1344×448).
   The Nigeria page rails these instead; here they fit, and a scroll container
   would hide half the row behind an affordance nobody needs. */

.fmm-ugrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 1100px) { .fmm-ugrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .fmm-ugrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    .fmm-ugrid { gap: 12px; }
    .fmm-ugrid .fmm-pcard--social .fmm-pcard__body { padding: 10px; gap: 5px; }
    .fmm-ugrid .fmm-pcard--social .fmm-pcard__title {
        min-height: 36px;
        font-size: 12px;
        line-height: 18px;
    }
    .fmm-ugrid .fmm-pcard--social .fmm-pcard__meta { font-size: 11px; }
    .fmm-ugrid .fmm-pcard--social .fmm-pcard__price { font-size: 17px; line-height: 24px; }
    .fmm-ugrid .fmm-pcard--social .fmm-pcard__foot { gap: 4px; }
    .fmm-ugrid .fmm-pcard--social .fmm-plat {
        top: 8px;
        left: 8px;
        padding: 4px 7px;
        font-size: 10px;
    }
    .fmm-ugrid .fmm-pcard--social .fmm-heart { top: 8px; right: 8px; width: 28px; height: 28px; }
}

@media (max-width: 360px) {
    .fmm-ugrid { gap: 10px; }
    .fmm-ugrid .fmm-pcard--social .fmm-pcard__foot { align-items: flex-start; flex-direction: column; }
}

/* =========================================================================
   "No Zelle Required" banner — Figma node 1:2890

   A photographic dark banner, not a flat panel: the artwork (a hand holding a
   card with a neon shield) is the point, so the copy has to stay legible over
   it rather than sitting on a solid block.

   The design's amber is #FFC107 — a shade warmer than --fmm-yellow (#FBBF24).
   Declared locally rather than swapped for the token, because the banner reads
   against a near-black photograph where the difference is visible.
   ========================================================================= */

.fmm-zelle {
    --z-amber: #FFC107;
    --z-green: #4ADE80;
    --z-ink: #0A0A0A;
    --z-body: #D1D5DB;
    --z-mute: #9CA3AF;

    position: relative;
    overflow: hidden;
    border-radius: 24px;
    min-height: 452px;
    display: flex;
    align-items: center;
    background: var(--z-ink);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .12);
}

/* The 4px amber rule along the bottom, fading out to the right. */
.fmm-zelle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--z-amber) 0%, rgba(255, 193, 7, .5) 50%, rgba(255, 193, 7, 0) 100%);
    border-radius: 0 0 24px 24px;
}

.fmm-zelle__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The Figma crop keeps the neon card and hand high in the short banner. */
    object-position: center 49%;
    /* Restore the neon/card detail after the wide crop; the scrim still keeps
       the copy readable on the left without dulling the artwork itself. */
    filter: brightness(1.14) contrast(1.06) saturate(1.08);
}

/* Keep enough contrast below the copy without dimming the card and hand — the
   neon artwork is intentionally a bright focal point in the Figma layout. */
.fmm-zelle__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .78) 24%, rgba(10, 10, 10, .24) 42%, rgba(10, 10, 10, .04) 59%, rgba(10, 10, 10, .16) 100%);
}

.fmm-zelle__inner {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    padding: 40px;
}

.fmm-zelle__copy {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ── Pills ────────────────────────────────────────────────────────────── */

.fmm-zelle__pills {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.fmm-zelle__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.fmm-zelle__pill--secure {
    background: rgba(34, 197, 94, .2);
    border: 1px solid rgba(34, 197, 94, .4);
    color: var(--z-green);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fmm-zelle__pill--brand {
    background: rgba(255, 193, 7, .15);
    border: 1px solid rgba(255, 193, 7, .3);
    backdrop-filter: blur(2px);
    color: var(--z-amber);
    letter-spacing: .05em;
}

/* ── Copy ─────────────────────────────────────────────────────────────── */

.fmm-zelle__title {
    margin: 24px 0 8px;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.07;
    font-weight: 900;
    letter-spacing: -.021em;
    color: #fff;
}

.fmm-zelle__title em {
    font-style: normal;
    color: var(--z-amber);
}

.fmm-zelle__lead {
    max-width: 442px;
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 34px;
    font-weight: 500;
    color: var(--z-body);
}

.fmm-zelle__lead b {
    font-weight: 600;
    color: #fff;
}

.fmm-zelle__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 999px;
    background: var(--z-amber);
    color: var(--z-ink);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(255, 193, 7, .35);
    transition: transform .15s ease;
}

.fmm-zelle__btn:hover { transform: translateY(-1px); }
.fmm-zelle__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Glass cards ──────────────────────────────────────────────────────── */

.fmm-zelle__cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex: none;
}

.fmm-zcard {
    width: 112px;
    padding: 18px 14px;
    border-radius: 16px;
    text-align: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(12px);
}

.fmm-zcard--amber {
    background: rgba(255, 193, 7, .15);
    border-color: rgba(255, 193, 7, .3);
}

.fmm-zcard__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 193, 7, .2);
    border: 1px solid rgba(255, 193, 7, .4);
}

/* The second card's check has no plate behind it in the design. */
.fmm-zcard__ico--bare {
    width: auto;
    height: auto;
    background: none;
    border: 0;
}

.fmm-zcard b {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 900;
    color: #fff;
}

.fmm-zcard em {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 15px;
    font-style: normal;
    color: var(--z-mute);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .fmm-zelle { min-height: 0; }
    .fmm-zelle__inner { flex-direction: column; padding: 28px; gap: 22px; }
    .fmm-zelle__lead { font-size: 17px; line-height: 28px; }
    /* Stacked, the copy no longer occupies only the left half. */
    .fmm-zelle__scrim {
        background: linear-gradient(180deg, rgba(10, 10, 10, .9) 0%, rgba(10, 10, 10, .72) 60%, rgba(10, 10, 10, .85) 100%);
    }
    .fmm-zelle__cards { flex-direction: row; }
    .fmm-zcard { flex: 1 1 0; width: auto; }
}

@media (max-width: 560px) {
    .fmm-zelle { border-radius: 18px; }
    .fmm-zelle__inner { padding: 22px; }
    .fmm-zelle__pills { flex-wrap: wrap; justify-content: flex-start; }
    .fmm-promo--meetups::before {
        background: linear-gradient(90deg, rgba(2, 3, 5, .97) 0%, rgba(2, 3, 5, .88) 42%, rgba(2, 3, 5, .56) 76%, rgba(2, 3, 5, .28) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fmm-zelle__btn { transition: none; }
    .fmm-zelle__btn:hover { transform: none; }
}

/* Keep the hero illustration and its proof badge inside a phone viewport. */
@media (max-width: 640px) {
    .fmm-ushero__art { flex-direction: column; align-items: stretch; padding: 12px 0 0; min-width: 0; }
    .fmm-ucard { min-width: 0; }
    .fmm-ucard__head > div { min-width: 0; }
    .fmm-ucard__row { flex-wrap: wrap; }
    .fmm-ucard__price { flex-wrap: wrap; line-height: 1.2; }
    .fmm-ucard__verified { flex-wrap: wrap; }
    .fmm-uescrow__row { flex-wrap: wrap; }
    .fmm-ufloat--watching { position: static; align-self: flex-start; margin-bottom: 12px; }
    .fmm-ufloat--passed { align-self: stretch; white-space: normal; }
    .fmm-ufloat--passed > span:last-child { min-width: 0; }
}

/* All US social shelves support click-to-advance and mouse dragging. */
.fmm-rail[data-rail] {
    cursor: grab;
    scroll-behavior: auto;
}

.fmm-rail[data-rail].is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
}

/* Keep the source mark and label on the photo without the white badge. */
.fmm-pcard--social .fmm-plat {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

/* =========================================================================
   Social Imports — coloured platform frames, heading underneath the row.
   Icons are the shared platform marks; the frame colours come from the design.
   ========================================================================= */

/* Same shelf width as From Social. Snap is off here: with it on, a click
   jumped to the next cards and the slide never showed. The bar stays hidden. */
.fmm-usimports__rail {
    min-width: 0;
    cursor: grab;
    scroll-snap-type: none;
    scroll-behavior: auto;
    overflow-x: auto;
    scrollbar-width: none;
}

.fmm-usimports__rail::-webkit-scrollbar {
    display: none;
    height: 0;
}

.fmm-usimports__rail.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.fmm-usimports__rail a,
.fmm-usimports__rail button { cursor: pointer; }

.fmm-usimports__rail > .fmm-sic {
    flex: 0 0 246px;
    scroll-snap-align: none;
}

.fmm-sic {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 12px;
    border-radius: 22px;
    color: #fff;
}

.fmm-sic--tiktok { background: #111111; }
.fmm-sic--facebook { background: #1877F2; }
.fmm-sic--instagram { background: linear-gradient(160deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%); }
.fmm-sic--whatsapp { background: #1ebe57; }
.fmm-sic--craigslist { background: #6d28d9; }
.fmm-sic--ebay { background: #e53238; }
.fmm-sic--pinterest { background: #e60023; }

.fmm-sic__plat {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 2px 6px 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #fff;
}

.fmm-sic__icon {
    display: block;
    flex: none;
    width: 20.7965px;
    height: 20.7965px;
}

.fmm-sic__icon--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8664.34px;
    background: #fff;
    box-sizing: border-box;
}

.fmm-sic__icon--fallback svg {
    width: 12px;
    height: 12px;
    flex: none;
}

.fmm-sic--tiktok .fmm-sic__plat svg { color: #111; }
.fmm-sic--facebook .fmm-sic__plat svg { color: #1877F2; }
.fmm-sic--instagram .fmm-sic__plat svg { color: #E4405F; }
.fmm-sic--whatsapp .fmm-sic__plat svg { color: #25D366; }
.fmm-sic--pinterest .fmm-sic__plat svg { color: #E60023; }
.fmm-sic--ebay .fmm-sic__plat svg { color: #E53238; }
.fmm-sic--craigslist .fmm-sic__plat svg { color: #5E2D90; }

.fmm-sic__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 8px 8px 10px;
    background: #fff;
    color: var(--us-ink, #0d0d0d);
    border-radius: 16px;
}

.fmm-sic__shot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112px;
    border-radius: 12px;
    background: #f4f5f7;
    overflow: hidden;
}

.fmm-sic__shot img {
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
}

.fmm-sic__body { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }

.fmm-sic__top {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.fmm-sic__top h3 {
    flex: 1 1 auto;
    margin: 0;
    min-height: 32px;
    font-size: 13px;
    line-height: 16px;
    font-weight: 700;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fmm-sic .fmm-sic__heart {
    position: static;
    top: auto;
    right: auto;
    flex: none;
    width: 26px;
    height: 26px;
    box-shadow: none;
}
.fmm-sic .fmm-sic__heart img { display:block; width:16px; height:15px; object-fit:contain; flex:none; }
.fmm-sic .fmm-sic__heart:hover { background: transparent; }
.fmm-sic .fmm-sic__heart[aria-pressed="true"] { background: rgba(255, 255, 255, .92); }
.fmm-sic .fmm-sic__heart:hover img,
.fmm-sic .fmm-sic__heart[aria-pressed="true"] img { width:16px; height:15px; filter:none; }

.fmm-sic__seller {
    font-size: 11px;
    line-height: 14px;
    color: #6b7280;
}

.fmm-sic__seller--ok {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-weight: 600;
}

.fmm-sic__seller img { width: 12px; height: 12px; }

.fmm-sic__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.fmm-sic__foot b {
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
}

.fmm-sic .fmm-chip { align-self: flex-start; }

.fmm-usimports__head { margin: 16px 0 0; }

.fmm-usimports__all {
    color: #e0a100;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.fmm-usimports__all:hover { color: #b78100; }

/* The collage float now lives with the shared band in app.css, so the
   Nigeria home gets the same motion as this page. */

/* =========================================================================
   App banner — "FlymyMall Goes Where you goes"
   ========================================================================= */

/* The Figma frame is 1344 wide, the same as the container's border box,
   so this section drops the 24px gutter and lets the artwork sit on that frame. */
.fmm-section:has(.fmm-usapp) > .fmm-container {
    padding-left: 0;
    padding-right: 0;
}

.fmm-usapp {
    position: relative;
    max-width: 1344px;
    margin: 0 auto;
}

.fmm-usapp__title { margin: 0; }

.fmm .fmm-usapp__art {
    display: block;
    width: 100%;
    height: auto;
}

/* Store buttons are drawn in the SVG. These anchors cover those rectangles:
   Apple x=403 y=327.5, Play x=678 y=327.5, both 263×67, frame 1344×530. */
.fmm-usapp__hit {
    position: absolute;
    top: 61.7925%;
    width: 19.5685%;
    height: 12.6415%;
    border-radius: 16px;
    color: transparent;
    font-size: 0;
    overflow: hidden;
}

.fmm-usapp__hit--apple { left: 29.9851%; }
.fmm-usapp__hit--play { left: 50.4464%; }

.fmm-usapp__hit:focus-visible {
    outline: 2px solid #FFBE2E;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .fmm-section:has(.fmm-usapp) > .fmm-container { padding-left: 16px; padding-right: 16px; }
    .fmm-usimports__rail > .fmm-sic { flex-basis: 200px; }
    /* The shared banner title is nowrap so the desktop line stays intact.
       On a phone that clips "on FaceBook or TikTok?". */
    .fmm-sband__title { white-space: normal; }
}

/* Figma verified seller label */
.fmm-sic__seller--ok { font-family: Inter, sans-serif; font-weight: 400; font-style: normal; font-size: 8.87px; line-height: 13.3px; letter-spacing: 0; vertical-align: middle; color: #6B7280; }

/* Phone-only promo cards (US mobile Figma). Hidden above phone width. */
.fmm-mpromo, .fmm-mapp { display: none; }
/* "Skip the Midnight Meetups" is split (row 135): the phone card sits under How it
   Works, the desktop banner in its old place. Each wrapper is empty at the other
   width, so hide it there rather than leave a blank section. */
.fmm-section--mpromo-meetups { display: none; }
@media (max-width: 560px) {
    .fmm .fmm-section--mpromo-meetups { display: block; }
    .fmm .fmm-section--promo-meetups { display: none; }
}

@media (max-width: 560px) {
    .fmm .fmm-promo--meetups, .fmm .fmm-zelle, .fmm .fmm-usapp { display: none; }

    .fmm .fmm-mpromo {
        position: relative; display: block; overflow: hidden;
        padding: 26px 22px 24px; border-radius: 20px; color: #fff;
        background: radial-gradient(120% 90% at 0% 0%, #3a3628 0%, #2a2924 45%, #1f1e1b 100%);
        box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .35);
    }
    .fmm .fmm-mpromo--zelle { background: radial-gradient(120% 90% at 0% 0%, #161b16 0%, #0b0d0b 55%, #050505 100%); }
    .fmm .fmm-mpromo__pill {
        display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
        border: 1px solid rgba(251, 191, 36, .45); border-radius: 999px; background: rgba(251, 191, 36, .14);
        color: #FBBF24; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    }
    .fmm .fmm-mpromo__pill--green { border-color: rgba(74, 222, 128, .4); background: rgba(22, 101, 52, .35); color: #4ADE80; }
    .fmm .fmm-mpromo__bar { display: block; width: 32px; height: 4px; margin: 12px 0 14px; border-radius: 4px; background: #FBBF24; }
    .fmm .fmm-mpromo__title {
        margin: 0 0 10px; font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
        font-size: 40px; line-height: 1; font-weight: 400; letter-spacing: .01em; color: #fff; text-transform: uppercase;
    }
    .fmm .fmm-mpromo__title em { font-style: normal; color: #FBBF24; }
    .fmm .fmm-mpromo__lead { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: #fff; }
    .fmm .fmm-mpromo__sub { max-width: 260px; margin: 0 0 22px; font-size: 13px; line-height: 1.35; color: #E5E7EB; }
    .fmm .fmm-mpromo__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .fmm .fmm-mpromo__btn {
        display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px;
        background: #FBBF24; color: #111827; font-size: 15px; font-weight: 700; letter-spacing: .02em;
    }
    .fmm .fmm-mpromo__chip {
        display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #E5E7EB; font-size: 13px;
    }
    .fmm .fmm-mpromo__chip svg { color: #FBBF24; }
    .fmm .fmm-mpromo__escrow {
        position: absolute; top: 22px; right: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px;
        width: 86px; padding: 12px 6px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
        background: rgba(255, 255, 255, .06); text-align: center;
    }
    .fmm .fmm-mpromo__escrow-ico {
        display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 6px;
        border: 1px solid rgba(251, 191, 36, .5); border-radius: 50%; background: rgba(251, 191, 36, .2);
    }
    .fmm .fmm-mpromo__escrow b { font-size: 12px; color: #fff; }
    .fmm .fmm-mpromo__escrow em { font-style: normal; font-size: 11px; color: #9CA3AF; }
    .fmm .fmm-mpromo__escrow u { margin-top: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(22, 101, 52, .5); color: #4ADE80; font-size: 9.5px; font-weight: 700; text-decoration: none; text-transform: uppercase; }
    .fmm .fmm-mpromo--zelle .fmm-mpromo__lead, .fmm .fmm-mpromo--zelle .fmm-mpromo__sub { max-width: 200px; }

    .fmm .fmm-mapp {
        position: relative; display: block; overflow: hidden; padding: 30px 18px 22px; border-radius: 20px; text-align: center;
        background: radial-gradient(90% 60% at 50% 35%, #3a2f17 0%, #1d1b18 60%, #141414 100%); color: #fff;
        box-shadow: 0 20px 34px -14px rgba(0, 0, 0, .35);
    }
    .fmm .fmm-mapp__ghost { position: absolute; top: 4px; right: -6px; font-size: 64px; font-weight: 800; letter-spacing: -.02em; color: rgba(255, 255, 255, .06); }
    .fmm .fmm-mapp__title { position: relative; margin: 0 0 18px; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; }
    .fmm .fmm-mapp__title em {
        display: inline-block; font-style: normal; color: #FBBF24;
        background: linear-gradient(transparent 86%, rgba(251, 191, 36, .5) 86%, rgba(251, 191, 36, .5) 94%, transparent 94%);
    }
    .fmm .fmm-mapp__lead { position: relative; max-width: 270px; margin: 0 auto 22px; font-size: 13.5px; line-height: 1.75; color: #BDBDBD; }
    .fmm .fmm-mapp__store {
        position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; height: 56px; margin-top: 12px; border-radius: 14px;
        background: #fff; color: #111; text-align: left;
    }
    .fmm .fmm-mapp__store--play { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #fff; }
    .fmm .fmm-mapp__store span { display: flex; flex-direction: column; line-height: 1.1; }
    .fmm .fmm-mapp__store small { font-size: 10px; opacity: .75; }
    .fmm .fmm-mapp__store--play small { text-transform: uppercase; }
    .fmm .fmm-mapp__store b { font-size: 16px; font-weight: 700; }
}
@media (max-width: 560px) {
    .fmm .fmm-mpromo__acts { flex-wrap: nowrap; gap: 10px; }
    .fmm .fmm-mpromo__btn { flex: none; padding: 10px 16px; font-size: 14px; }
    .fmm .fmm-mpromo__chip { flex: none; padding: 8px 12px; font-size: 12.5px; }
    .fmm .fmm-mpromo--zelle .fmm-mpromo__lead, .fmm .fmm-mpromo--zelle .fmm-mpromo__sub { max-width: 220px; }
    .fmm .fmm-mpromo--zelle .fmm-mpromo__lead { font-size: 14.5px; }
}

/* US hero on phones (mobile Figma): headline, illustration, paste-a-link import, Get Started.
   The desktop lead, buttons and social proof give way to it. */
.fmm-mhero { display: none; }

@media (max-width: 560px) {
    .fmm .fmm-ushero { padding-top: 18px; }
    .fmm .fmm-ushero__title { font-size: 22px; line-height: 1.5; font-weight: 600; letter-spacing: -.01em; }
    .fmm .fmm-ushero__lead, .fmm .fmm-ushero__cta, .fmm .fmm-ushero__proof { display: none; }

    .fmm .fmm-mhero { display: block; margin-top: 18px; }
    .fmm .fmm-mhero__art { display: block; width: 100%; height: auto; border-radius: 16px; }
    .fmm .fmm-mhero__lead { margin: 16px 0 12px; font-size: 13px; line-height: 1.55; font-weight: 500; color: #4B5563; }
    .fmm .fmm-mhero__import {
        display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 6px 0 16px;
        border: 1px solid #FDE68A; border-radius: 16px; background: #FFFBEB;
    }
    .fmm .fmm-mhero__import svg { flex: none; color: #9CA3AF; }
    .fmm .fmm-mhero__import input {
        flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
        font: inherit; font-size: 13px; color: #111827;
    }
    .fmm .fmm-mhero__import input::placeholder { color: #9CA3AF; }
    .fmm .fmm-mhero__import button {
        flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
        background: #FBBF24; color: #111827; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
    }
    .fmm .fmm-mhero__go {
        display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; margin-top: 16px;
        border-radius: 16px; background: #FBBF24; color: #111827; font-size: 16px; font-weight: 700;
        box-shadow: 0 10px 24px -10px rgba(251, 191, 36, .8);
    }
}
@media (max-width: 560px) {
    .fmm .fmm-mhero__import { gap: 8px; padding-left: 14px; }
    .fmm .fmm-mhero__import input { font-size: 12.5px; text-overflow: ellipsis; }
    .fmm .fmm-mhero__import button { padding: 0 14px; }
}

/* ── Phone hero + "Send this to seller" (updated mobile Figma, sheet row 135) ──
   Headline in the Figma face with the platform name as text in a yellow pill,
   the lead above the illustration, the import box with the Figma link icon and
   the platform list, then the "Send this to seller" card in place of the
   sample deal card. Phones only; the desktop hero is unchanged. */
.fmm-ushero__pill { display: none; }
.fmm-sendseller { display: none; }

@media (max-width: 560px) {
    .fmm .fmm-ushero__title {
        font-family: 'Plus Jakarta Sans', Inter, sans-serif;
        font-size: 25px; font-weight: 800; line-height: 1.32; letter-spacing: -.025em;
    }
    /* White like the frame: the desktop amber wash left a seam above the illustration. */
    .fmm .fmm-ushero::before { display: none; }
    .fmm .fmm-ushero__brand .fmm-ushero__fb { display: none; }
    .fmm .fmm-ushero__pill {
        display: inline-block; padding: 0 .3em; border-radius: 8px;
        background: #FBBF24; color: #111827; line-height: 1.25;
        animation: fmm-ushero-brand-in .35s ease-out;
    }
    /* The sample deal card gives way to "Send this to seller" below. */
    .fmm .fmm-ushero__art { display: none; }

    .fmm .fmm-mhero { margin-top: 14px; }
    .fmm .fmm-mhero__lead { margin: 0 0 6px; font-size: 15px; line-height: 1.6; font-weight: 400; color: #374151; }
    /* The illustration runs to both screen edges, as in the frame. */
    .fmm .fmm-mhero__art { width: calc(100% + 32px); max-width: none; margin: 0 -16px; border-radius: 0; }
    .fmm .fmm-mhero__import {
        height: 56px; margin-top: 18px; padding: 0 6px 0 14px;
        border: 1px solid #FDE68A; border-radius: 18px; background: #FFFDF5;
    }
    /* The Figma link icon carries its own 40% fill opacity; no extra fade on top. */
    .fmm .fmm-mhero__import > img { flex: none; width: 18px; height: 20px; }
    .fmm .fmm-mhero__import, .fmm .fmm-mhero__import input, .fmm .fmm-mhero__import button,
    .fmm .fmm-mhero__platforms { font-family: 'Plus Jakarta Sans', Inter, sans-serif; }
    .fmm .fmm-mhero__import { gap: 7px; padding-left: 12px; }
    .fmm .fmm-mhero__import input { font-size: 10.5px; }
    .fmm .fmm-mhero__import button { height: 38px; padding: 0 12px; border-radius: 12px; background: #FCC52B; font-size: 14px; }
    .fmm .fmm-mhero__platforms { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.6; font-weight: 700; letter-spacing: .02em; color: #6B7280; }

    .fmm .fmm-sendseller { display: block; padding: 34px 0 26px; text-align: center; font-family: 'Plus Jakarta Sans', Inter, sans-serif; }
    .fmm-sendseller__pill {
        display: inline-block; padding: 6px 16px; border: 1px solid #FDE68A; border-radius: 999px;
        background: #FEF9C3; color: #374151; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    }
    .fmm-sendseller__title { margin: 14px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: #111827; }
    .fmm-sendseller__title span {
        background: linear-gradient(transparent 62%, #FDE68A 62%, #FDE68A 92%, transparent 92%);
        padding: 0 .35em;
    }
    .fmm-sendseller__sub { margin: 10px 4px 22px; font-size: 14px; line-height: 1.65; color: #6B7280; }
}

/* ── Desktop hero (Figma "US Home Page", 1440 frame; sheet rows 4 and 135) ──
   Values from the frame: copy column 712px, 64px gap, the 618 x 525
   illustration (which runs 50px past the 1344px container, as in the frame),
   headline Onest Bold 55.35/72.8 with the platform name in a #FFBE2E box,
   lead Plus Jakarta Sans 20/36, two 214 x 60 buttons. Phones keep the mobile
   hero above. */
@media (min-width: 561px) {
    .fmm .fmm-ushero { padding: 24px 0 8px; }
    .fmm .fmm-ushero__title {
        font-family: 'Onest', Inter, sans-serif;
        font-weight: 700;
        font-size: clamp(34px, 7.77cqi, 55.35px);
        line-height: 1.315;
        letter-spacing: 0;
        color: #000;
    }
    .fmm .fmm-ushero__pill {
        display: inline-block;
        margin-left: .2em;
        padding: .2em .23em;
        border-radius: 12.76px;
        background: #FFBE2E;
        color: #000;
        font-family: Inter, sans-serif;
        font-size: .842em;
        font-weight: 700;
        line-height: .93;
        vertical-align: .04em;
        animation: fmm-ushero-brand-in .35s ease-out;
    }
    .fmm .fmm-ushero__lead,
    .fmm .fmm-ushero__cta .fmm-ubtn,
    .fmm .fmm-ushero__proof { font-family: 'Plus Jakarta Sans', Inter, sans-serif; }
    .fmm .fmm-ushero__lead { max-width: 668px; margin-top: 28px; font-size: 20px; line-height: 36px; color: #000; }
    .fmm .fmm-ushero__lead b { font-weight: 600; }
    .fmm .fmm-ushero__cta { gap: 12px; margin-top: 28px; }
    .fmm .fmm-ushero__cta .fmm-ubtn { min-width: 214px; height: 60px; padding: 0 32px; border-radius: 16px; font-size: 16px; color: #0D0D0D; }
    .fmm .fmm-ushero__cta .fmm-ubtn--primary {
        background: #FFB800; font-weight: 800;
        box-shadow: 0 4px 10px rgba(255, 184, 0, .25), 0 10px 25px -5px rgba(255, 184, 0, .3);
    }
    .fmm .fmm-ushero__cta .fmm-ubtn--ghost {
        background: #fff; border: 2px solid #E5E7EB; font-weight: 700;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }
    .fmm .fmm-ushero__proof { margin-top: 37px; }

    .fmm .fmm-ushero__art { display: block; padding: 0; }
    .fmm .fmm-ushero__figart { display: block; width: 100%; max-width: 618px; height: auto; margin: 0 auto; }
}
@media (min-width: 1101px) {
    /* Desktop hero fills the first screen (window minus the 121px header) with its
       content centred, so How it Works only appears once the visitor scrolls. */
    .fmm .fmm-ushero {
        display: flex; align-items: center;
        min-height: calc(100vh - 121px); min-height: calc(100svh - 121px);
        padding: 32px 0;
    }
    .fmm .fmm-ushero > .fmm-container { width: 100%; }
    .fmm .fmm-ushero__grid { grid-template-columns: minmax(0, 1fr) 568px; gap: 64px; }
    /* Three lines as in the frame, where the 786px headline runs past the
       712px column into the gap beside the phone. */
    .fmm .fmm-ushero__title { white-space: nowrap; }
    .fmm .fmm-ushero__figart {
        width: 618px; max-width: none; margin: 0;
        /* The art is cropped where the frame clips it; fade that edge into the page. */
        -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
        mask-image: linear-gradient(to bottom, #000 88%, transparent);
    }
}

/* ── "Send this to seller" message card ──────────────────────────────────
   Shared by the phone section under the hero and the desktop panel beside a
   From Social shelf (partials/us-send-seller-card). */
/* Layer geometry from the Figma frame (front card 331 x 427 at x 24.7):
   back card 93% as wide, 4.4px in, 1.6px up, rotated -1.61deg about its
   top-left; front card rotated +0.5deg about its top-left. */
.fmm-sendseller__stack { position: relative; margin: 14px 4px 0; text-align: left; }
.fmm-sendseller__stack::before {
    content: ""; position: absolute; z-index: 0;
    left: 1.33%; top: -1.6px; width: 93%; height: 100%;
    border: 1px solid rgba(26, 26, 26, .1); border-radius: 23px;
    background: rgba(255, 255, 255, .7);
    transform: rotate(-1.61deg); transform-origin: 0 0;
}
.fmm-sendseller__card {
    position: relative; z-index: 1; padding: 18px 16px 16px; text-align: left;
    border: 1px solid rgba(26, 26, 26, .1); border-radius: 23px; background: #fff;
    box-shadow: 0 18px 40px -24px rgba(17, 24, 39, .25);
    transform: rotate(.5deg); transform-origin: 0 0;
}
.fmm-sendseller__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fmm-sendseller__logo { width: 68px; height: auto; }
.fmm-sendseller__apps { width: 91px; height: auto; }
.fmm-sendseller__route { margin: 14px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9CA3AF; }
.fmm-sendseller__msg {
    margin: 0; padding: 14px 14px 16px; border-radius: 20px; background: #F8F5EC;
    font-size: 14.5px; line-height: 1.6; font-weight: 400; color: #1F2937;
}
.fmm-sendseller__handle { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #FCC52B; color: #111827; font-weight: 700; }
.fmm-sendseller__ref { display: flex; align-items: center; gap: 10px; margin: 12px 4px 14px; font-size: 12px; color: #9CA3AF; }
.fmm-sendseller__ref img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.fmm-sendseller__copy, .fmm-sendseller__share {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    font: inherit; cursor: pointer;
}
.fmm-sendseller__copy { height: 52px; border: 0; border-radius: 18px; background: #FCC52B; color: #111827; font-size: 17px; font-weight: 800; }
.fmm-sendseller__copy img { width: 18px; height: auto; }
.fmm-sendseller__share { height: 42px; margin-top: 10px; border: 1px solid #E5E7EB; border-radius: 16px; background: #fff; color: #374151; font-size: 14px; font-weight: 600; }

/* ── Desktop section order (desktop Figma "US Home Page") ─────────────────
   Phones follow the mobile Figma's order, desktop the desktop frame's: the
   app section, "Found Something" and "No Zelle" render in both slots and
   each copy shows at one size only. Same 560px switch as Midnight Meetups. */
@media (max-width: 560px) {
    .fmm .fmm-us-desk { display: none; }
}
@media (min-width: 561px) {
    .fmm .fmm-us-phone { display: none; }
}

/* ── Desktop "Send this to Seller" panel (desktop Figma, node 19:1694) ────
   Two From Social cards, then a 19% #FCE98B panel: "Copy message" pill,
   Onest 39.7 title on a 40% #FFD700 bar, Onest 17.4 lead, and the message
   card at 240px (the 331px phone card at 72.5%). */
.fmm-sendrail__panel { display: none; }
@media (min-width: 561px) {
    .fmm .fmm-sendrail__row { display: grid; grid-template-columns: 512px minmax(0, 1fr); gap: 20px; align-items: stretch; }
    .fmm .fmm-sendrail__row .fmm-rail { min-width: 0; }
    .fmm .fmm-sendrail__panel {
        display: flex; align-items: center; justify-content: space-between; gap: 24px;
        padding: 25px; border-radius: 16px; background: rgba(252, 233, 139, .19);
    }
    .fmm-sendrail__copy { max-width: 413px; }
    .fmm-sendrail__pill {
        display: inline-block; padding: 6px 16px; border: 1px solid #FFD700; border-radius: 999px;
        background: rgba(255, 215, 0, .2); color: #111;
        font-family: Inter, sans-serif; font-size: 10.1px; font-weight: 700; line-height: 16px; letter-spacing: 1px; text-transform: uppercase;
    }
    .fmm .fmm-sendrail__title {
        margin: 19px 0 0; font-family: 'Onest', Inter, sans-serif; font-size: 39.7px; font-weight: 700;
        line-height: 46px; letter-spacing: -1px; color: #111;
    }
    .fmm-sendrail__title span { position: relative; z-index: 0; display: inline-block; }
    .fmm-sendrail__title span::after {
        content: ""; position: absolute; z-index: -1; left: 3px; right: -53px; bottom: -7px; height: 15px;
        border-radius: 999px; background: rgba(255, 215, 0, .4);
    }
    .fmm .fmm-sendrail__sub {
        margin: 23px 0 0; font-family: 'Onest', Inter, sans-serif; font-size: 17.4px; line-height: 28.2px;
        color: rgba(26, 26, 26, .87);
    }
    .fmm-sendrail__card { flex: none; width: 240px; font-family: 'Plus Jakarta Sans', Inter, sans-serif; }
    .fmm-sendrail__card .fmm-sendseller__stack { width: 331px; margin: 0; zoom: .725; }
}
@media (min-width: 561px) and (max-width: 1100px) {
    .fmm .fmm-sendrail__row { grid-template-columns: minmax(0, 1fr); }
    .fmm .fmm-sendrail__panel { flex-wrap: wrap; justify-content: center; }
}

/* ── Desktop section details (visual pass against the desktop Figma) ─────
   Midnight Meetups and No Zelle: 1284 x 452 banners inset 30px inside
   their 1344 frames, 24px radius, "SAFE SHOPPING" in capitals.
   Social Imports: 153 x 267 cards, 10px radius, 22px apart.
   Found Something: Plus Jakarta Sans ExtraBold 63/80 title; 620px lead.
   This file loads on the US page only, so the Nigeria page keeps its panel. */
@media (min-width: 1101px) {
    .fmm .fmm-promo--meetups,
    .fmm .fmm-zelle { margin-left: 30px; margin-right: 30px; border-radius: 24px; }
    .fmm .fmm-section--promo-meetups .fmm-promo__pill { text-transform: uppercase; letter-spacing: .06em; }
    /* "Verified Sellers / ID checked", "Protected Pay / Held in escrow": one line each, as drawn. */
    .fmm .fmm-section--promo-meetups .fmm-promo__proof-card strong,
    .fmm .fmm-section--promo-meetups .fmm-promo__proof-card small { white-space: nowrap; }
    .fmm .fmm-section--promo-meetups .fmm-promo__proof-card small { color: rgba(255, 255, 255, .85); }

    .fmm .fmm-usimports__rail { gap: 22px; }
    /* Card geometry from the Figma export (Frame 1000004711): 152.6 x 266.8
       frame, 20.8 logo circle, 131.8 x 212.8 white card 10.4 in and 40 down,
       110.8 x 80.6 photo, 51.9 x 17.2 chip, 25.8 add button. */
    .fmm .fmm-usimports__rail > .fmm-sic {
        flex: 0 0 152.6px; height: 266.8px; min-height: 0;
        gap: 0; padding: 8.9px 10.4px 13.6px; border-radius: 10.4px;
    }
    .fmm .fmm-usimports .fmm-sic__plat { height: 20.8px; margin-bottom: 10.4px; padding: 0; gap: 7px; font-size: 10px; line-height: 12px; font-weight: 600; }
    .fmm .fmm-usimports .fmm-sic__icon { width: 20.8px; height: 20.8px; }
    .fmm .fmm-usimports .fmm-sic__card {
        flex: 1 1 auto; gap: 0; padding: 10.5px 10.5px 8.6px;
        border: .8px solid rgba(229, 231, 235, .5); border-radius: 16.1px;
    }
    .fmm .fmm-usimports .fmm-sic__shot { flex: none; height: 80.6px; border-radius: 11.3px; background: #F3F4F6; }
    .fmm .fmm-usimports .fmm-sic__shot img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
    .fmm .fmm-usimports .fmm-sic__body { flex: 1 1 auto; gap: 5px; padding: 8px 0 0; }
    .fmm .fmm-usimports .fmm-sic__top { gap: 4px; }
    .fmm .fmm-usimports .fmm-sic__top h3 { min-height: 24px; font-size: 9.5px; line-height: 12px; }
    .fmm .fmm-usimports .fmm-sic__heart, .fmm .fmm-usimports .fmm-sic__heart img { width: 14px; height: 14px; }
    .fmm .fmm-usimports .fmm-chip {
        align-self: flex-start; height: 17.2px; padding: 0 6px; border: 0; border-radius: 4.8px;
        background: #F3F4F6; color: #6B7280; font-size: 8px; line-height: 17.2px; font-weight: 500;
    }
    .fmm .fmm-usimports .fmm-sic__seller { font-size: 8px; line-height: 10px; }
    .fmm .fmm-usimports .fmm-sic__seller img { width: 10px; height: 10px; }
    .fmm .fmm-usimports .fmm-sic__foot { margin-top: auto; align-items: center; }
    .fmm .fmm-usimports .fmm-sic__foot b { font-size: 14px; line-height: 18px; }
    .fmm .fmm-usimports .fmm-vp__add, .fmm .fmm-usimports .fmm-vp__add img { width: 25.8px; height: 25.8px; }

    /* The title runs past its 612px column into the empty left of the 748px
       art stage, as in the frame (cards start at 844px, the title ends at 812). */
    .fmm .fmm-sband { min-height: 668px; }
    .fmm .fmm-sband__title {
        font-family: 'Plus Jakarta Sans', Inter, sans-serif;
        font-size: clamp(44px, 4.7vw, 63px); line-height: 1.27;
    }
    .fmm .fmm-sband__lead { max-width: 620px; }
}