/* ==========================================================================
   PropertyFlow — Coming from Spreadsheets page dark redesign
   (Figma file AfDgwLGK6PWvMXXcqqtZUb, frame 729:1924 "Coming from spreadsheet")

   Loaded ONLY by for-landlords/coming-from-spreadsheets/index.html, after
   home-dark.css (nav, labels, pills, CTA2, footer pattern reused from
   there). Component classes below use the `cfs-` prefix to avoid any
   collision with home-dark.css or the other redesigned pages' CSS
   files. Scoped under body.hd-page.
   ========================================================================== */

/* ---------- Hero ---------- */

body.hd-page .cfs-hero { padding: 160px 0 100px; }
body.hd-page .cfs-hero__copy { max-width: 800px; }
body.hd-page .cfs-hero__heading {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5.6vw, 71.66px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--text-primary);
  margin: 28px 0 0;
}
body.hd-page .cfs-hero__heading span { display: block; }
body.hd-page .cfs-hero__heading span.muted { color: #87878f; }
body.hd-page .cfs-hero__desc {
  font-family: "Krub", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 24px 0 0;
}
body.hd-page .cfs-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
body.hd-page .cfs-hero__stats { display: flex; align-items: center; gap: 24px; margin-top: 36px; max-width: 640px; }
body.hd-page .cfs-hero__stat-divider { width: 1px; height: 32px; background: var(--border-subtle); flex-shrink: 0; }
body.hd-page .cfs-hero__stat-value { font-family: "Inter", sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--text-primary); display: block; }
body.hd-page .cfs-hero__stat-label { font-family: "Krub", sans-serif; font-size: 12px; line-height: 1.45; color: var(--text-secondary); margin: 4px 0 0; max-width: 190px; }

@media (max-width: 640px) {
  body.hd-page .cfs-hero { padding: 128px 0 72px; }
  body.hd-page .cfs-hero__stats { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
  body.hd-page .cfs-hero__stat-divider { display: none; }
  body.hd-page .cfs-hero__stat-label { max-width: 260px; }
  body.hd-page .cfs-hero__visual { margin-top: 56px; }
}

body.hd-page .cfs-hero__visual {
  margin-top: 80px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 50px 120px rgba(0, 0, 0, 0.85);
}

/* ---------- Hero visual: spreadsheet-vs-PropertyFlow comparison (Figma:
   729:3257 "Frame 2085665115"). Live markup, not a flat screenshot, so it
   stays crisp at any size — 1cqw = 1% of .cfs-compare's own width, and the
   original Figma frame is 1139px wide, so cqw = design-px / 11.39. ---------- */
body.hd-page .cfs-compare { container-type: inline-size; position: relative; display: flex; border-radius: 16px; overflow: hidden; border: 1px solid #26262b; background: #131316; }
body.hd-page .cfs-compare__panel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; aspect-ratio: 568 / 549; }
body.hd-page .cfs-compare__panel--sheet { background: #e9e9eb; }

body.hd-page .cfs-sheet__formula { display: flex; align-items: center; gap: 2.28cqw; min-height: 4.04cqw; padding: 0 1.58cqw; background: #d7d7da; border-bottom: 1px solid #797979; font-family: "Krub", sans-serif; font-size: 1.405cqw; line-height: 2.107cqw; color: #000; }
body.hd-page .cfs-sheet__row { display: flex; min-height: 4.04cqw; border-bottom: 1px solid #797979; }
body.hd-page .cfs-sheet__num { box-sizing: border-box; flex: 0 0 8.6268%; display: flex; align-items: center; padding-left: 1.32cqw; background: #dcdce0; border-right: 1px solid #000; font-family: "Krub", sans-serif; font-size: 1.054cqw; line-height: 1.58cqw; color: #000; }
body.hd-page .cfs-sheet__cell { box-sizing: border-box; flex: 0 0 22.8873%; min-width: 0; display: block; align-content: center; padding-left: 1.229cqw; background: #fff; border-right: 1px solid #000; font-family: "Krub", sans-serif; font-size: 1.054cqw; line-height: 1.58cqw; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.hd-page .cfs-sheet__cell--last { flex-basis: 22.7113%; border-right: none; }
body.hd-page .cfs-sheet__row--head { background: #dcdce0; }
body.hd-page .cfs-sheet__row--head .cfs-sheet__cell { background: #dcdce0; }
body.hd-page .cfs-sheet__cell--conflict { background: #FF0257; color: #fff; }
body.hd-page .cfs-sheet__badge { position: absolute; left: 5.09cqw; top: 18.7cqw; width: 7.73cqw; height: 2.9cqw; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding-top: 0.3cqw; font-family: "Krub", sans-serif; font-weight: 500; font-size: 1.054cqw; line-height: 1.405cqw; color: #f0f0f5; }
body.hd-page .cfs-sheet__badge img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
body.hd-page .cfs-sheet__tabbar { min-height: 4.04cqw; display: flex; align-items: center; padding-left: 1.405cqw; background: #f2f2f3; border-bottom: 1px solid #797979; font-family: "Krub", sans-serif; font-size: 1.405cqw; line-height: 2.107cqw; color: #000; }

body.hd-page .cfs-compare__panel--pf { background: #0f0f11; }
body.hd-page .cfs-pf__head { min-height: 8.6cqw; padding: 0 2.107cqw; display: flex; flex-direction: column; justify-content: center; gap: 0.53cqw; background: #141416; border-bottom: 1px solid #26262b; }
body.hd-page .cfs-pf__title { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.58cqw; line-height: 2.019cqw; color: #f0f0f5; margin: 0; }
body.hd-page .cfs-pf__sub { font-family: "Krub", sans-serif; font-size: 1.229cqw; line-height: 1.756cqw; color: #a0a0aa; margin: 0; }
body.hd-page .cfs-pf__list { display: flex; flex-direction: column; gap: 2.107cqw; padding: 2.107cqw; }
body.hd-page .cfs-pf__row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 2.107cqw; border-bottom: 1px solid #26262b; }
body.hd-page .cfs-pf__row:last-child { border-bottom: none; padding-bottom: 0; }
body.hd-page .cfs-pf__main { display: flex; align-items: center; gap: 1.405cqw; }
body.hd-page .cfs-pf__check { width: 2.107cqw; height: 2.107cqw; flex-shrink: 0; }
body.hd-page .cfs-pf__text { display: flex; flex-direction: column; gap: 0.7cqw; }
body.hd-page .cfs-pf__name { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.58cqw; line-height: 2.019cqw; color: #f0f0f5; margin: 0; }
body.hd-page .cfs-pf__meta { font-family: "Krub", sans-serif; font-size: 1.405cqw; line-height: 2.107cqw; color: #a0a0aa; margin: 0; }
body.hd-page .cfs-pf__date { font-family: "Krub", sans-serif; font-size: 1.405cqw; line-height: 2.107cqw; color: #a0a0aa; white-space: nowrap; }
body.hd-page .cfs-pf__banner { margin: auto 0 0; background: rgba(255, 2, 87, 0.14); border-top: 1px solid rgba(255, 2, 87, 0.4); color: #f0f0f5; font-family: "Krub", sans-serif; font-size: 1.054cqw; line-height: 1.58cqw; padding: 1.756cqw 2.107cqw; }

@media (max-width: 700px) {
  body.hd-page .cfs-compare { flex-direction: column; }
  body.hd-page .cfs-compare__panel { aspect-ratio: auto; }
  body.hd-page .cfs-sheet__formula, body.hd-page .cfs-sheet__tabbar { font-size: 12px; line-height: 18px; padding-left: 12px; min-height: 34px; gap: 16px; }
  body.hd-page .cfs-sheet__row { min-height: 34px; }
  body.hd-page .cfs-sheet__num, body.hd-page .cfs-sheet__cell { font-size: 10px; line-height: 14px; padding-left: 8px; }
  body.hd-page .cfs-sheet__badge { width: 64px; height: 24px; left: 40px; top: 154px; font-size: 9px; line-height: 12px; padding-top: 2px; }
  body.hd-page .cfs-pf__head { min-height: 70px; padding: 0 16px; }
  body.hd-page .cfs-pf__title, body.hd-page .cfs-pf__name { font-size: 15px; line-height: 19px; }
  body.hd-page .cfs-pf__sub, body.hd-page .cfs-pf__meta, body.hd-page .cfs-pf__date { font-size: 12px; line-height: 17px; }
  body.hd-page .cfs-pf__check { width: 20px; height: 20px; }
  body.hd-page .cfs-pf__list { padding: 16px; gap: 16px; }
  body.hd-page .cfs-pf__row { padding-bottom: 16px; }
  body.hd-page .cfs-pf__banner { font-size: 11px; line-height: 15px; padding: 14px 16px; }
}

/* ---------- Shared section header ---------- */

body.hd-page .cfs-section-head { max-width: 648px; }
body.hd-page .cfs-h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 4.1vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 28px 0 0;
}
body.hd-page .cfs-h2 span.muted { color: #87878f; }
body.hd-page .cfs-lede { font-family: "Krub", sans-serif; font-size: 17px; line-height: 1.65; color: #b5b5b5; max-width: 648px; margin: 24px 0 0; }

/* ---------- Section 02: 3-step timeline (same shape as Managing for Owners) ---------- */

body.hd-page .cfs-steps-card { background: #0c0c0f; border: 1px solid #26262b; border-radius: 24px; padding: 32px 24px; margin-top: 56px; overflow-x: auto; }
body.hd-page .cfs-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 640px; }
body.hd-page .cfs-step { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; text-align: center; }
body.hd-page .cfs-step__connector { flex-shrink: 0; width: 60px; height: 1px; background: var(--border-subtle); margin-top: 32px; }
body.hd-page .cfs-step__num {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: #131316; border: 0.8px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-family: "Krub", sans-serif; font-weight: 600; font-size: 20px; color: var(--text-primary);
}
body.hd-page .cfs-step__body { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
body.hd-page .cfs-step__title { font-family: "Krub", sans-serif; font-weight: 500; font-size: 17px; color: var(--text-primary); margin: 0; }
body.hd-page .cfs-step__desc { font-family: "Krub", sans-serif; font-size: 14px; line-height: 1.5; color: #a0a0aa; margin: 0; max-width: 195px; }
body.hd-page .cfs-step__chip {
  background: #141416; border: 0.8px solid var(--border-subtle); border-radius: 4px;
  padding: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Krub", sans-serif; font-size: 12px; color: var(--text-primary);
  min-height: 22px; width: 100%; max-width: 199px;
}
body.hd-page .cfs-step__chip-dot { width: 4px; height: 4px; border-radius: 50%; background: #f0f0f5; }
body.hd-page .cfs-step__chip-pill { background: #070707; border: 0.8px solid #525252; border-radius: 8px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; }

@media (max-width: 820px) {
  body.hd-page .cfs-steps { flex-direction: column; align-items: stretch; min-width: 0; }
  body.hd-page .cfs-step { flex-direction: row; text-align: left; align-items: flex-start; }
  body.hd-page .cfs-step__body { align-items: flex-start; }
  body.hd-page .cfs-step__desc { max-width: none; }
  body.hd-page .cfs-step__chip { max-width: none; flex-wrap: wrap; height: auto; justify-content: flex-start !important; }
  body.hd-page .cfs-step__connector { display: none; }
}

/* ---------- Final CTA: keep each headline line whole on narrow phones ---------- */
@media (max-width: 440px) {
  body.hd-page .hd-cta2 .hd-cta2__heading { font-size: 23px; letter-spacing: -0.01em; line-height: 1.15; }
}