/* Home · "How we are paid" (23 Sep 2026). Warm panel between the dark proof wall and the service cards:
   the fee on the left as one large number, the payment sequence on the right, credentials underneath. */
.sf-fe { margin: 0 0 96px; padding: clamp(24px, 3vw, 46px) clamp(20px, 2.6vw, 40px) clamp(26px, 3vw, 38px); border: 1px solid #e9e4dd; border-radius: 22px; background: #fbf9f6; }

.sf-fe__head { max-width: 860px; margin-bottom: 30px; }
.sf-fe__kicker { margin: 0 0 12px; color: #c8102e; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.sf-fe h2 { margin: 0 0 12px; font: 800 clamp(28px, 3.1vw, 44px)/1.1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.03em; color: #1f2328; text-wrap: balance; }
.sf-fe__lede { margin: 0; max-width: 70ch; color: #5f6368; font-size: 16px; line-height: 1.65; text-wrap: pretty; }

.sf-fe__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px; margin-bottom: 18px; }

.sf-fe__rate { padding: 26px 26px 24px; border: 1px solid #e4ded6; border-radius: 16px; background: #fff; }
.sf-fe__rate-num { display: block; color: #c8102e; font: 800 clamp(52px, 6vw, 76px)/1 "Plus Jakarta Sans", sans-serif; letter-spacing: -.05em; }
.sf-fe__rate-num i { font-style: normal; font-size: .46em; letter-spacing: -.02em; }
.sf-fe__rate-note { margin: 10px 0 24px; color: #5f6368; font-size: 14.5px; line-height: 1.55; }
.sf-fe__rate-lbl, .sf-fe__flow-lbl { margin: 0 0 14px; color: #858a90; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sf-fe__covers { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.sf-fe__covers li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: start; color: #1f2328; font-size: 14.5px; line-height: 1.5; }
.sf-fe__covers svg { width: 20px; height: 20px; margin-top: 1px; color: #1a7f4b; }

.sf-fe__flow { padding: 26px 26px 22px; border: 1px solid #e4ded6; border-radius: 16px; background: #fff; }
.sf-fe__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: none; }
.sf-fe__steps li { position: relative; padding: 16px 18px 18px; border: 1px solid #ece8e2; border-radius: 12px; background: #fbf9f6; }
.sf-fe__steps li.is-hot { border-color: #c8102e; background: #fdf5f6; }
.sf-fe__step-num { display: block; margin-bottom: 8px; color: #c8102e; font: 800 12px/1 "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; }
.sf-fe__steps b { display: block; margin-bottom: 5px; color: #1f2328; font: 800 16px/1.3 "Plus Jakarta Sans", sans-serif; letter-spacing: -.01em; }
.sf-fe__steps p { margin: 0; color: #5f6368; font-size: 14px; line-height: 1.55; }
.sf-fe__flow-foot { margin: 0; color: #858a90; font-size: 13.5px; line-height: 1.6; }
.sf-fe__flow-foot a { color: #1f2328; font-weight: 700; border-bottom: 1px solid #d5cec5; }
.sf-fe__flow-foot a:hover { color: #c8102e; border-bottom-color: #c8102e; }

.sf-fe__why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.sf-fe__why article { padding: 22px 22px 20px; border: 1px solid #e4ded6; border-radius: 16px; background: #fff; }
.sf-fe__why svg { width: 34px; height: 34px; margin-bottom: 14px; color: #c8102e; }
.sf-fe__why b { display: block; margin-bottom: 7px; color: #1f2328; font: 800 16.5px/1.3 "Plus Jakarta Sans", sans-serif; letter-spacing: -.01em; }
.sf-fe__why p { margin: 0; color: #5f6368; font-size: 14.5px; line-height: 1.6; }
.sf-fe__why a { color: #1f2328; font-weight: 700; border-bottom: 1px solid #d5cec5; }
.sf-fe__why a:hover { color: #c8102e; border-bottom-color: #c8102e; }

.sf-fe__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 24px; border-top: 1px solid #e9e4dd; }
.sf-fe__btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 8px; background: #c8102e; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background-color .18s ease, transform .18s ease; }
.sf-fe__btn:hover { background: #a90d26; color: #fff; transform: translateY(-2px); }
.sf-fe__cta span { color: #5f6368; font-size: 13.5px; }

@media (max-width: 1024px) {
  .sf-fe__grid { grid-template-columns: 1fr; }
  .sf-fe__why { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sf-fe { margin-bottom: 64px; border-radius: 16px; }
  .sf-fe__rate, .sf-fe__flow, .sf-fe__why article { padding: 20px 18px; }
  .sf-fe__steps { grid-template-columns: 1fr; }
  .sf-fe__lede { font-size: 15.5px; }
  .sf-fe__btn { flex: 1 1 100%; justify-content: center; }
}