/* Sizmo funnel kit. Reusable parts for niche funnel pages (first used by funnels/real-estate).
   Consumes the tokens in sizmo-base.css and the buttons in sizmo-buttons.css; never redefines the palette.
   Parts: page shell, section surfaces, pill + two-tone heading, phone mock, chat bubbles, lead list with
   stage chips, reminder card, step list, before/after, offer card, founder, FAQ, sticky mobile CTA. */

.fk { margin: 0; background: var(--sizmo-page); color: var(--sizmo-body); font: 400 17px/1.6 var(--sizmo-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.fk *, .fk *::before, .fk *::after { box-sizing: border-box; }
.fk img, .fk svg { display: block; max-width: 100%; }
.fk-wrap { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.fk-narrow { width: min(720px, calc(100% - 40px)); margin-inline: auto; }

/* Header: logo only, plus one small button. Funnels have no site navigation. */
.fk-header { position: absolute; inset: 0 0 auto; z-index: 5; padding-top: 20px; }
.fk-header .fk-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fk-logo { width: 112px; height: auto; }

/* Surfaces. Rotate light, band and forest so neighbours never match. */
.fk-section { padding-block: var(--sizmo-section-space); position: relative; }
.fk-section--light { background: var(--sizmo-page); }
.fk-section--band { background: var(--sizmo-band); }
.fk-section--forest { background: var(--sizmo-surface); color: var(--sizmo-text-muted); }
.fk-section--forest .fk-h2, .fk-section--forest .fk-h1 { color: var(--sizmo-text); }
.fk-section--forest .fk-tone { color: var(--sizmo-mint); }
.fk-hero { padding-top: clamp(112px, 14vw, 168px); background: radial-gradient(80% 60% at 70% 0%, var(--sizmo-glow) 0%, rgb(221 235 225 / 0%) 70%), var(--sizmo-page); overflow: hidden; }

/* Pill label and two-tone headings. */
.fk-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(to bottom, #3a6845, #274c30); color: #fff; font: 600 13px/1.2 var(--sizmo-font-body); letter-spacing: .08em; text-transform: uppercase; }
.fk-section--forest .fk-pill { background: var(--sizmo-mint); color: var(--sizmo-ink); }
.fk-h1, .fk-h2 { margin: 0; color: var(--sizmo-heading); font-family: var(--sizmo-font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.045em; text-wrap: balance; }
.fk-h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); max-width: 13ch; }
.fk-h2 { font-size: clamp(2.05rem, 4.4vw, 3.3rem); max-width: 16ch; }
.fk-tone { display: block; color: var(--sizmo-accent); }
.fk-sub { margin: 20px 0 0; max-width: 54ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; }
.fk-section--forest .fk-sub { color: var(--sizmo-text-muted); }
.fk-center { text-align: center; }
.fk-center .fk-h1, .fk-center .fk-h2, .fk-center .fk-sub { margin-inline: auto; }

/* Call to action: one primary button, a plain line under it. */
.fk-cta { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fk-center .fk-cta { align-items: center; }
.fk-cta .sz-btn { white-space: normal; text-align: center; }
.fk-cta-note { margin: 0; font-size: 15px; color: var(--sizmo-body); }
.fk-section--forest .fk-cta-note { color: var(--sizmo-text-muted); }
.fk-section--forest .sz-btn--primary { background: linear-gradient(to bottom, #d6f5df 0%, var(--sizmo-mint) 100%); color: var(--sizmo-ink); box-shadow: 0 6px 18px rgb(185 240 199 / 22%); }
.fk-section--forest .sz-btn--primary:hover { color: var(--sizmo-ink); }
.fk-msgr-icon { width: 22px; height: 22px; flex: none; }

/* Two-column split used by hero and story sections. */
.fk-split { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .fk-split { grid-template-columns: 1.05fr .95fr; } .fk-split--flip > :first-child { order: 2; } }

/* Phone mock. Pure HTML so text stays sharp and translatable. */
.fk-phone { position: relative; width: min(340px, 100%); margin-inline: auto; padding: 12px; border-radius: 44px; background: #0d120f; box-shadow: var(--sizmo-float-shadow), inset 0 0 0 2px #2a312c; }
.fk-phone-screen { border-radius: 33px; overflow: hidden; background: #fff; min-height: 560px; display: flex; flex-direction: column; }
.fk-phone-bar { display: flex; align-items: center; gap: 10px; padding: 18px 16px 12px; border-bottom: 1px solid var(--sizmo-card-line); font: 600 15px/1.2 var(--sizmo-font-body); color: var(--sizmo-heading); }
.fk-phone-bar small { display: block; font-weight: 400; font-size: 12px; color: var(--sizmo-body); }
.fk-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sizmo-highlight); color: var(--sizmo-accent); font: 600 13px/1 var(--sizmo-font-body); }

/* Messenger-style inbox rows (the "before" world). */
.fk-inbox { list-style: none; margin: 0; padding: 6px 0; }
.fk-inbox li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.fk-inbox b { display: block; font: 600 14px/1.25 var(--sizmo-font-body); color: var(--sizmo-heading); }
.fk-inbox span { display: block; font-size: 13px; line-height: 1.3; color: var(--sizmo-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.fk-inbox .is-unread b, .fk-inbox .is-unread span { color: var(--sizmo-heading); font-weight: 600; }
.fk-inbox .fk-dot { width: 9px; height: 9px; margin-left: auto; flex: none; border-radius: 50%; background: #0866ff; }
.fk-inbox .is-faded { opacity: .42; }

/* Chat thread. */
.fk-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #fff; }
.fk-bubble { max-width: 78%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.fk-bubble--them { align-self: flex-start; background: #f0f2f0; color: var(--sizmo-heading); border-bottom-left-radius: 6px; }
.fk-bubble--me { align-self: flex-end; background: #0866ff; color: #fff; border-bottom-right-radius: 6px; }
.fk-bubble--file { display: flex; align-items: center; gap: 8px; }
.fk-seen { align-self: flex-end; margin-top: 2px; font-size: 12px; color: var(--sizmo-body); }
.fk-day { align-self: center; margin: 6px 0; font-size: 12px; color: var(--sizmo-body); }

/* Lead list with stages (the "after" world). */
.fk-leads { list-style: none; margin: 0; padding: 8px 12px 14px; display: grid; gap: 8px; }
.fk-lead { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--sizmo-card-line); border-radius: 14px; background: #fff; }
.fk-lead b { display: block; font: 600 14px/1.25 var(--sizmo-font-body); color: var(--sizmo-heading); }
.fk-lead span { display: block; font-size: 12px; line-height: 1.35; color: var(--sizmo-body); }
.fk-chip { padding: 4px 9px; border-radius: 999px; font: 600 11px/1.2 var(--sizmo-font-body); white-space: nowrap; }
.fk-chip--new { background: #eef1ef; color: #3d4540; }
.fk-chip--talked { background: #e3eefc; color: #1d4f9a; }
.fk-chip--trip { background: #fdf0d9; color: #8a5a07; }
.fk-chip--reserve { background: var(--sizmo-highlight); color: var(--sizmo-accent); }
.fk-lead .fk-avatar, .fk-inbox .fk-avatar { display: grid; max-width: none; font: 600 13px/1 var(--sizmo-font-body); color: var(--sizmo-accent); }
.fk-today { margin: 12px 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--sizmo-accent); color: #fff; font-size: 13px; line-height: 1.4; }
.fk-today b { display: block; font: 600 14px/1.3 var(--sizmo-font-body); }

/* Hero visual: the "after" list on a phone, with the "before" Messenger bubbles beside it.
   Phones: the bubbles sit in a row above the phone. Wide screens: stacked to the left, barely touching it. */
.fk-hero-visual { position: relative; }
.fk-hero-visual .fk-phone-screen { min-height: 0; padding-bottom: 6px; }
.fk-floats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 22px; }
.fk-float { padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: #fff; box-shadow: var(--sizmo-card-shadow); font-size: 14px; line-height: 1.3; color: var(--sizmo-heading); white-space: nowrap; }
.fk-float small { display: block; font-size: 11px; color: var(--sizmo-body); }
.fk-float:nth-child(1) { transform: rotate(-3deg); }
.fk-float:nth-child(2) { transform: rotate(2deg); }
.fk-float:nth-child(3) { transform: rotate(-1deg); }
@media (min-width: 900px) {
  .fk-hero-visual .fk-phone { margin-right: 0; }
  .fk-floats { position: absolute; z-index: 2; left: 0; top: 70px; flex-direction: column; align-items: flex-start; gap: 64px; margin: 0; }
  .fk-float:nth-child(2) { margin-left: 14px; }
  .fk-floats { left: -24px; }
}

/* Pain list. */
.fk-pains { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.fk-pains li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-size: 17px; color: var(--sizmo-heading); }
.fk-pains svg { width: 24px; height: 24px; margin-top: 1px; color: #b4472f; }

/* Steps. */
.fk-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: fk-step; }
@media (min-width: 760px) { .fk-steps { grid-template-columns: repeat(2, 1fr); } }
.fk-step { counter-increment: fk-step; padding: 24px; border-radius: var(--sizmo-radius); background: #fff; border: 1px solid var(--sizmo-card-line); box-shadow: var(--sizmo-card-shadow); }
.fk-step::before { content: counter(fk-step); display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 50%; background: var(--sizmo-accent); color: #fff; font: 700 16px/1 var(--sizmo-font-display); }
.fk-step h3 { margin: 0 0 6px; color: var(--sizmo-heading); font: 600 20px/1.25 var(--sizmo-font-display); letter-spacing: -.02em; }
.fk-step p { margin: 0; }
.fk-stage-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* Before / after. Stacks on phones, rows read left to right on wide screens. */
.fk-compare { margin-top: 40px; display: grid; gap: 12px; }
.fk-compare-row { display: grid; gap: 1px; border-radius: var(--sizmo-radius); overflow: hidden; background: rgb(197 232 208 / 14%); }
@media (min-width: 760px) { .fk-compare-row { grid-template-columns: 1fr 1fr; } }
.fk-compare-cell { padding: 18px 20px; font-size: 16px; line-height: 1.5; }
.fk-compare-cell small { display: block; margin-bottom: 4px; font: 600 12px/1.2 var(--sizmo-font-body); letter-spacing: .08em; text-transform: uppercase; }
.fk-compare-cell--before { background: var(--sizmo-panel); color: var(--sizmo-text-muted); }
.fk-compare-cell--after { background: var(--sizmo-panel-raised); color: var(--sizmo-text); }
.fk-compare-cell--after small { color: var(--sizmo-mint); }

/* Offer card. */
.fk-offer { margin: 40px auto 0; max-width: 560px; padding: clamp(28px, 4vw, 40px); border-radius: 28px; background: #fff; border: 2px solid var(--sizmo-accent); box-shadow: 0 24px 60px rgb(39 76 48 / 16%); text-align: left; }
.fk-offer-tag { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; background: var(--sizmo-highlight); color: var(--sizmo-accent); font: 600 13px/1.2 var(--sizmo-font-body); }
.fk-price { margin: 0; color: var(--sizmo-accent); font: 700 clamp(2.6rem, 6vw, 3.4rem)/1 var(--sizmo-font-display); letter-spacing: -.04em; }
.fk-price small { font: 600 18px/1 var(--sizmo-font-body); letter-spacing: 0; color: var(--sizmo-body); }
.fk-price-then { margin: 10px 0 0; color: var(--sizmo-heading); }
.fk-ticks { list-style: none; margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--sizmo-card-line); display: grid; gap: 12px; }
.fk-ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--sizmo-heading); }
.fk-ticks svg { width: 22px; height: 22px; color: var(--sizmo-accent); }
.fk-offer .fk-cta { align-items: stretch; }

/* Founder. */
.fk-founder { display: grid; gap: 28px; align-items: center; }
@media (min-width: 760px) { .fk-founder { grid-template-columns: 240px 1fr; } }
.fk-portrait { aspect-ratio: 4 / 5; width: min(240px, 70%); border-radius: 24px; background: var(--sizmo-glow); display: grid; place-items: center; color: var(--sizmo-accent); font: 700 56px/1 var(--sizmo-font-display); overflow: hidden; }
.fk-portrait img { width: 100%; height: 100%; object-fit: cover; }
.fk-creds { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fk-creds li { padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sizmo-card-line); color: var(--sizmo-heading); font-size: 14px; }

/* FAQ with native details. */
.fk-faq { margin-top: 32px; border-top: 1px solid var(--sizmo-card-line); }
.fk-faq details { border-bottom: 1px solid var(--sizmo-card-line); }
.fk-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; color: var(--sizmo-heading); font: 600 18px/1.35 var(--sizmo-font-display); letter-spacing: -.01em; }
.fk-faq summary::-webkit-details-marker { display: none; }
.fk-faq summary::after { content: '+'; flex: none; font: 400 24px/1 var(--sizmo-font-body); color: var(--sizmo-accent); transition: transform .3s; }
.fk-faq details[open] summary::after { transform: rotate(45deg); }
.fk-faq p { margin: 0 0 20px; max-width: 60ch; }

/* Footer. */
.fk-footer { padding: 40px 0 120px; background: var(--sizmo-page); border-top: 1px solid var(--sizmo-card-line); font-size: 14px; }
.fk-footer .fk-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.fk-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.fk-footer a { color: var(--sizmo-body); text-decoration: none; }
.fk-footer a:hover { color: var(--sizmo-accent); }
@media (min-width: 760px) { .fk-footer { padding-bottom: 40px; } }

/* Sticky Messenger button on phones, shown after the hero. */
.fk-sticky { position: fixed; inset: auto 12px 12px; z-index: 20; transform: translateY(140%); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.fk-sticky.is-on { transform: none; }
.fk-sticky .sz-btn { width: 100%; box-shadow: 0 12px 30px rgb(16 39 27 / 30%); }
@media (min-width: 760px) { .fk-sticky { display: none; } }

/* Gentle reveal; static when motion is reduced or scripts are off. */
.fk-js .fk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.fk-js .fk-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fk-js .fk-reveal { opacity: 1; transform: none; transition: none; }
  .fk-sticky { transition: none; }
}

/* Phones: looser heading tracking so words never touch, and a button label that fits on one line. */
@media (max-width: 559px) {
  .fk-pill { font-size: 12px; letter-spacing: .05em; }
  .fk-portrait { width: 140px; font-size: 40px; }
  .fk-h1, .fk-h2 { letter-spacing: -.028em; line-height: 1.08; }
  .fk-cta .sz-btn { width: 100%; min-height: 54px; padding: 0 18px; font-size: 16px; white-space: nowrap; }
  .fk-cta { align-items: stretch; }
  .fk-cta-note { text-align: center; }
}