/* Market One look for the funnel kit. Loaded after funnel.css on pages that use it.
   Colours come from the theme in src/ui/funnel/index.js (app.css tokens); this file
   brings the kit's blocks into the calm monochrome + mint system of app.css. */

.top { top: var(--fk-promo-h, 0px); }
.fk-promo-bar { background: var(--bg-2); color: var(--ink); font-weight: 400; border-bottom: 1px solid var(--line-2); }
.fk-promo-bar a { font-weight: 500; color: var(--ink); }
.fk-promo-bar .fk-x { color: var(--mut); }

/* Buttons: black pill, outline pill */
.fk-btn { min-height: 40px; padding: 0 18.6px; font: 500 14px/1 var(--f) !important; letter-spacing: var(--track); }
.fk-btn:hover { transform: none; }
.fk-btn--primary { background: var(--ink); color: #fff; } .fk-btn--primary:hover { background: #333; }
.fk-btn--ghost { background: #fff; border-color: rgba(0,0,0,.12); color: var(--ink); }
.fk-btn .fk-i { width: 16px; height: 16px; }

/* Headings: medium weight, tight tracking */
[data-fk] h1, [data-fk] h2, [data-fk] h3 { font-weight: 500; letter-spacing: var(--track-h); color: var(--ink); }
[data-fk] .fk-pre, .fk-pre { color: var(--mut); font-weight: 400; text-transform: none; letter-spacing: var(--track); }

/* Feature tabs: one pill group, the screen floats on mint */
.fk-tabs { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 9999px; padding: 4px; box-shadow: 0 4px 16px -8px rgba(0,0,0,.12); width: fit-content; max-width: 100%; }
.fk-tabs button { color: var(--ink); background: transparent; border: 1px solid transparent; font-weight: 400; border-radius: 9999px; }
.fk-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); border-color: rgba(0,0,0,.12); }
.fk-ft-media, .fk-shot { background: var(--mint); border-radius: var(--r-lg); }
.fk-shot-screen { box-shadow: var(--sh-lg); border-color: rgba(255,255,255,.7); }
.fk-ft-panel p, .fk-tc-text p, .fk-bento-text p { color: var(--mut); }

/* Bento and shelf cards */
.fk-bento article, .fk-news a { background: var(--bg-3); border: 1px solid var(--line); box-shadow: none; }
.fk-bento-lg::after { background: linear-gradient(0deg, rgba(250,250,250,.97) 6%, rgba(250,250,250,.7) 34%, rgba(250,250,250,0) 62%); }
.fk-badge2 { background: var(--ink); color: #fff; }
.fk-shelf-cover { background: var(--bg-2); border: 1px solid var(--line); aspect-ratio: 8 / 5; }
.fk-shelf-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.fk-shelf-price { font-weight: 500; }
.fk-shelf-card small { color: var(--mut); display: block; }
.fk-shelf-nav { background: #fff !important; box-shadow: var(--sh); }
.fk-shelf-list { grid-auto-columns: minmax(230px, 270px); }

/* Tier cards: quiet grey cards */
.fk-tc { --metal: var(--ink); background: var(--bg-3); border-color: var(--line); }
.fk-tc::after { background: linear-gradient(180deg, rgba(250,250,250,0) 10%, rgba(250,250,250,.96) 70%); }
.fk-tc-text h3 { color: var(--ink); } .fk-tc-text .fk-i { color: var(--ink); }
.fk-tc-text .fk-btn { background: var(--soft); color: var(--ink); border-color: var(--soft); }
.fk-tc:hover .fk-btn { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (min-width: 900px) { .fk-tc-grid { grid-template-columns: repeat(3, 1fr); } }

/* Proof */
.fk-stats { text-align: center; }
.fk-stats strong { font-weight: 500; letter-spacing: var(--track-h); color: var(--ink); }

/* Hero band: the grey rounded panel, centred, no photo */
.fk-hero-band { width: min(100% - 32px, var(--max)) !important; margin: clamp(48px, 7vw, 96px) auto !important; padding: clamp(48px, 7vw, 88px) 24px !important; border-radius: var(--r-lg); background: var(--bg-2) !important; color: var(--ink-2); }
@media (min-width: 900px) { .fk-hero-band { width: min(100% - 96px, var(--max)) !important; } }
.fk-hero-band::before { display: none; }
.fk-hero-band h2 { color: var(--ink); font-size: clamp(2rem, 3.4vw, 3rem); } .fk-hero-band p { color: var(--mut); }

/* Panel */
.fk-panel { background: var(--bg-2); border-radius: var(--r-lg); }

/* Narrow screens: grid children may shrink, tab rows wrap instead of widening the page. */
.fk-ft > *, .fk-ft-text > *, .fk-panel > *, .fk-bento > * { min-width: 0; }
.fk-tabs { flex-wrap: wrap; }