/* Sumpay — spacious, tactile sections for the warm orange identity. */
section.block,
.about-hero,
.about-wide-photo,
.prod-hero,
footer {
  --ink: #24251f;
  --ink-soft: #4c4e43;
  --muted: #65685c;
  --muted-2: #65685c;
  --surface: #fffefa;
  --bg: #faf9f5;
  --bg-2: #f1f0e9;
  --brand: #a53c12;
  --brand-2: #a53c12;
  --brand-tint: #ffe6d7;
  --orange: #ff6b2b;
  --orange-deep: #f75c1c;
  --green: #465b32;
  --green-soft: #e5e9d6;
  --blue: #465b32;
  --blue-soft: #e5e9d6;
  --band-warm: #f1f0e9;
  --band-cool: #faf9f5;
  --line: #deded4;
  --line-2: #e8e8df;
  color: var(--ink);
}

section.block { padding-block: 106px; }
section.block .eyebrow,
.about-hero .eyebrow,
.prod-hero .eyebrow {
  color: #a53c12;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.sec-head h2,
.product-heading h2,
.relationship-copy h2 {
  color: #24251f;
  font-size: clamp(35px, 3.9vw, 54px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.sec-head p { color: #65685c; font-size: 16px; line-height: 1.75; }
.product-heading { align-items: end; margin-bottom: 40px; }
.product-heading h2 { max-width: 680px; margin-top: 14px; }
.product-heading > p { color: #65685c; font-size: 14px; }

/* Three products, with a distinct material and generous breathing room. */
.solution-grid { gap: 20px; }
.solution {
  padding: 32px 30px 25px;
  border-radius: 24px;
  border: 1px solid transparent;
  box-shadow: none;
}
.solution.salary { background: #ffe6d7; }
.solution.invoice { background: #f0eee7; }
.solution.stock { background: #e5e9d6; }
.solution-top { color: #56574b; font-size: 12px; }
.solution-icon { border-color: #24251f33; color: #24251f; width: 36px; height: 36px; }
.solution h3 { color: #24251f; font-size: 35px; font-weight: 500; letter-spacing: -.04em; margin-top: 29px; }
.solution p { color: #5f6155; font-size: 14px; line-height: 1.75; max-width: 280px; }
.solution-art { height: 154px; margin-block: 14px; }
.solution > a { color: #24251f; border-color: #24251f25; padding-top: 20px; font-size: 13px; }
.solution > a svg { width: 31px; height: 31px; border-color: #24251f45; padding: 7px; }
.pay-line i { background: #ffc09d; width: 9px; }
.pay-line i:nth-child(3n) { background: #ff6b2b; }
.pay-check { color: #a53c12; background: #fffefa; }
.paper { background: #fffefa; box-shadow: 0 12px 24px #24251f0a; }
.paper i { background: #e6e4da; }
.paper-tag { background: #464a3b; color: #fffefa; border-radius: 8px; }
.stock-art svg { fill: #c2cba7; color: #657548; }

/* The people and the relationship stay central. */
.relationship { gap: 88px; border-top-color: #deded4; }
.relationship-photo { height: 520px; }
.relationship-photo > img { border-radius: 28px 110px 28px 28px; }
.relationship-stamp {
  background: #fffefa;
  color: #24251f;
  border: 1px solid #e7e6db;
  border-radius: 15px;
  box-shadow: 0 12px 36px #24251f0d;
  padding: 22px 24px;
}
.relationship-stamp > svg { color: #9f3d17; }
.relationship-copy h2 { max-width: 500px; margin: 19px 0 23px; }
.relationship-copy > p { font-size: 15px; color: #65685c; line-height: 1.8; }
.relationship-steps { margin-block: 26px 30px; }
.relationship-steps article { gap: 18px; padding-block: 14px; }
.relationship-steps article > span { border-color: #cfd3bf; color: #4c573c; background: #e5e9d6; width: 32px; height: 32px; }
.relationship-steps h3 { color: #24251f; font-size: 16px; font-weight: 600; }
.relationship-steps p { color: #65685c; font-size: 13px; margin-top: 6px; }
.relationship-copy > .text-link { color: #a53c12; font-size: 14px; }

/* An intentional dark surface makes the live result the focus. */
#estimate::before { background: #f0f0e8; }
.est-card { margin-top: 42px; grid-template-columns: 1.15fr 1fr; border-radius: 28px; border: 1px solid #e1e2d6; }
.est-controls { padding: 46px; background: #fffefa; }
.est-types { gap: 4px; padding: 5px; border-radius: 12px; background: #f0f0e8; }
.est-type { font-size: 12px; padding: 12px 11px; border-radius: 8px; color: #5f6255; }
.est-type.active { background: #24251f; color: #fffefa; }
.est-type:not(.active):hover { background: #e5e9d6; color: #24251f; }
.est-controls .est-inlabel { margin-top: 39px; color: #595d4e; }
.est-amount { color: #24251f; font-size: 44px; font-weight: 500; letter-spacing: -.045em; margin-top: 7px; }
.est-slider { height: 5px; margin-top: 25px; }
.est-slider::-webkit-slider-thumb { background: #ff6b2b; border: 5px solid #fffefa; box-shadow: 0 0 0 1px #ff6b2b; }
.est-slider::-moz-range-thumb { background: #ff6b2b; border: 5px solid #fffefa; box-shadow: 0 0 0 1px #ff6b2b; }
.est-range { color: #65685c; margin-top: 13px; }
.est-result { padding: 46px; background: #24251f; color: #fffefa; }
.est-result .rlabel { color: #c8cbbd; font-weight: 400; }
.est-result .rnum { color: #fffefa; font-size: clamp(42px, 4.5vw, 62px); font-weight: 500; letter-spacing: -.055em; margin-top: 14px; }
.est-result .rnote { color: #d5d7ca; }
.est-result .rrow { border-color: #ffffff26; }
.est-result .rrow .k { color: #c8cbbd; }
.est-result .rrow .v { color: #fffefa; font-size: 16px; font-weight: 500; }
.est-result .disc { color: #bec3b2; font-size: 12px; line-height: 1.65; }
.est-result .est-cta { background: #ff6b2b; color: #24251f; border-radius: 10px; }
.est-result .est-cta:hover { background: #ff8651; }

/* Partnership stories feel more like real places than dashboard cards. */
.aud-grid { gap: 26px; }
.aud-card { background: #f3f2eb; border: 0; border-radius: 24px; grid-template-columns: 1.2fr .8fr; }
.aud-card .content { padding: 34px 28px; }
.aud-card .ic { color: #82502f; background: #ffe6d7; border-radius: 50%; }
.aud-card:nth-child(2) .ic { color: #4c573c; background: #e5e9d6; }
.aud-card h3 { color: #24251f; font-size: 28px; font-weight: 500; line-height: 1.13; letter-spacing: -.035em; }
.aud-card > .content > p { color: #65685c; font-size: 14px; }
.aud-list { gap: 13px; }
.aud-list li { color: #565b4c; font-size: 13px; line-height: 1.5; align-items: flex-start; }
.aud-list .tick { width: 19px; height: 19px; background: #e2e7d4; color: #4b5c36; margin-top: 1px; }
.aud-list .tick svg { width: 11px; height: 11px; }
.aud-card .cta { color: #a53c12; font-size: 14px; }
.aud-card .photo { margin: 10px 10px 10px 0; border-radius: 16px; }
.aud-card .photo img { object-position: 50%; }
.aud-card:hover .photo img { transform: none; }

/* Quiet, readable evidence of the controls behind each relationship. */
.trust { background: #e9ecdf; border: 0; }
.trust-grid { grid-template-columns: 1fr 1.55fr; gap: 90px; align-items: start; }
.trust-intro h2 { color: #24251f; font-size: clamp(35px, 3.7vw, 50px); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.trust-intro p { color: #626956; font-size: 15px; max-width: 340px; line-height: 1.75; }
.trust .eyebrow { color: #4b5c36; }
.trust-items { grid-template-columns: repeat(2, 1fr); gap: 34px 32px; padding-top: 5px; }
.titem { display: grid; grid-template-columns: 37px 1fr; column-gap: 13px; align-items: start; }
.titem .ic { width: 36px; height: 36px; border-radius: 10px; background: #dbe2ca; color: #4b5c36; grid-row: span 2; margin: 0; }
.titem .ic svg { width: 18px; height: 18px; }
.trust .titem h3 { color: #24251f; font-size: 15px; line-height: 1.25; font-weight: 600; letter-spacing: -.015em; padding-top: 1px; }
.trust .titem p { color: #626956; font-size: 12px; line-height: 1.7; margin-top: 7px; }

.faq-wrap { grid-template-columns: .85fr 1.15fr; gap: 100px; }
.faq-wrap .sec-head h2 { max-width: 390px; }
.faq-item { background: transparent; border-bottom-color: #deded4; }
.faq-item[open] { border-color: #bfc5ae; }
.faq-item summary { font-size: 16px; padding-block: 25px; color: #24251f; font-weight: 500; }
.faq-item summary .chev { color: #59634a; width: 22px; height: 22px; }
.faq-item .ans { color: #65685c; font-size: 14px; line-height: 1.8; padding-bottom: 26px; }

/* The strongest brand colour belongs to the invitation. */
section.final.block { padding-block: 0 30px; }
.final-band { padding: 62px; border-radius: 32px; background: #ff6b2b; box-shadow: none; }
.final-inner { flex-wrap: nowrap; gap: 40px; }
.final .final-band h2 { color: #24251f; font-size: clamp(36px, 4.1vw, 56px); font-weight: 500; letter-spacing: -.05em; line-height: 1.07; max-width: 670px; }
.final .final-band p { color: #542912; font-size: 15px; line-height: 1.7; }
.final .final-band .btn-primary { background: #24251f; color: #fffefa; box-shadow: none; flex-shrink: 0; border-radius: 11px; padding: 19px 24px; }
.final .final-band .btn-primary:hover { background: #3c3e32; }

.contact-card { border: 1px solid #deded4; border-radius: 26px; grid-template-columns: .95fr 1.05fr; }
.contact-intro { background: #efefe6; color: #24251f; padding: 48px; }
.contact-intro h2 { color: #24251f; font-size: 44px; font-weight: 500; line-height: 1.1; letter-spacing: -.045em; }
.contact-intro > p { color: #65685c; line-height: 1.8; margin-top: 20px; }
.contact-points { margin-top: 30px; gap: 16px; }
.contact-points li { color: #555c49; font-size: 13px; line-height: 1.6; align-items: start; }
.contact-points .tick { color: #4b5c36; background: #dce3ca; margin-top: 1px; }
.contact-meta { color: #626956; border-color: #d5d8c9; font-size: 13px; margin-top: 35px; padding-top: 26px; gap: 14px; }
.contact-meta a { color: #24251f; }
.contact-meta svg,.contact-intro .eyebrow { color: #4b5c36 !important; }
.contact-form { background: #fffefa; padding: 46px; gap: 20px; }
.contact-form label { font-size: 12px; color: #4c4e43; }
.contact-form input,.contact-form select,.contact-form textarea { background: #faf9f5; border-color: #d9dccf; border-radius: 9px; padding: 13px 14px; color: #24251f; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color: #a53c12; box-shadow: 0 0 0 3px #ff6b2b1a; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color: #73766a; }
.contact-form .btn { background: #ff6b2b; color: #24251f; border-radius: 10px; }
.contact-form .btn:hover { background: #ff8651; }
.email-help { color: #65685c; line-height: 1.7; }
.prepared-email { color: #a53c12; }

footer { background: #efefe7; padding-top: 70px; border-color: #deded4; }
.foot-grid { gap: 50px; }
.foot-brand p { color: #65685c; line-height: 1.8; font-size: 13px; max-width: 280px; }
.foot-col h5 { color: #24251f; font-size: 13px; font-weight: 600; }
.foot-col a { color: #65685c; font-size: 13px; }
.foot-col a:hover { color: #a53c12; transform: none; }
.foot-bottom { color: #65685c; margin-top: 55px; border-color: #d8dace; font-size: 11px; }

/* The supporting pages use the same lighter, more editorial rhythm. */
.about-hero { padding-top: 168px; padding-bottom: 75px; }
.about-hero-inner { max-width: 950px; }
.about-hero h1 { color: #24251f; font-size: clamp(46px, 6.4vw, 86px); font-weight: 500; line-height: 1.03; letter-spacing: -.055em; }
.about-hero > .about-hero-inner > p { color: #65685c; font-size: 18px; line-height: 1.8; max-width: 670px; }
.about-wide-photo { height: 490px; }
.about-wide-photo img { border-radius: 30px; }
.about-split { gap: 80px; }
.about-card { background: #e5e9d6; color: #24251f; border-radius: 24px; padding: 46px; box-shadow: none; }
.about-card .about-mark { filter: grayscale(1); opacity: .8; }
.about-card .about-quote { color: #24251f; font-size: 35px; font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.about-card > p { color: #626956; font-size: 15px; line-height: 1.8; }
.why-grid { gap: 28px; margin-top: 44px; }
.why-card { background: transparent; border: 0; border-top: 1px solid #d5d9c9; border-radius: 0; padding: 28px 0 0; box-shadow: none; }
.why-card .ic { border-radius: 12px; width: 44px; height: 44px; }
.why-card h3 { color: #24251f; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.03em; }
.why-card p { color: #65685c; font-size: 14px; line-height: 1.8; }
.ic-orange { background: #ffe6d7; color: #a53c12; }
.ic-blue,.ic-green { background: #e5e9d6; color: #4b5c36; }
.prod-hero { padding-top: 164px; padding-bottom: 90px; }
.prod-hero-grid { gap: 66px; }
.prod-back { color: #65685c; font-size: 13px; }
.prod-hero-copy h1 { color: #24251f; font-size: clamp(45px, 5.2vw, 72px); font-weight: 500; letter-spacing: -.055em; line-height: 1.04; }
.prod-hero-copy > p { color: #65685c; font-size: 16px; line-height: 1.85; }
.prod-hero-media { border-radius: 26px 100px 26px 26px; background: #e5e9d6; }
.prod-hero-media .pill { background: #fffefaed; border: 0; color: #24251f; font-size: 11px; }
.prod-hero-media .pill svg { color: #4b5c36; }
.steps3 { gap: 28px; }
.step3 { background: #fffefa; border: 0; border-radius: 20px; padding: 34px; }
.step3 .num { background: #ffe6d7; color: #a53c12; border-radius: 50%; font-weight: 500; }
.step3 h3 { color: #24251f; font-size: 23px; font-weight: 500; line-height: 1.15; letter-spacing: -.03em; }
.step3 p { color: #65685c; font-size: 14px; line-height: 1.8; }
.step3 .connector { display: none; }

@media (max-width: 1150px) {
  .relationship { gap: 55px; }
  .solution { padding: 27px 25px 24px; }
  .solution h3 { font-size: 31px; }
  .trust-grid { gap: 50px; grid-template-columns: 1fr 1.5fr; }
  .trust-items { gap: 30px 20px; }
  .aud-card .content { padding: 29px 24px; }
  .final-band { padding: 48px; }
  .final-inner { flex-wrap: wrap; gap: 28px; }
  .contact-intro,.contact-form { padding: 36px; }
  .contact-intro h2 { font-size: 38px; }
}
@media (max-width: 820px) {
  section.block { padding-block: 76px; }
  .product-heading { align-items: start; }
  .solution { grid-template-columns: 1fr 190px; padding: 32px; }
  .solution h3 { font-size: 36px; }
  .solution p { max-width: 360px; }
  .relationship { grid-template-columns: 1fr; gap: 42px; }
  .relationship-photo { height: 440px; }
  .relationship-copy h2 { max-width: 600px; }
  .est-card { grid-template-columns: 1fr; }
  .est-controls,.est-result { padding: 38px; }
  .est-result .rnum { font-size: 58px; }
  .aud-grid { grid-template-columns: 1fr; }
  .aud-card { grid-template-columns: 1.15fr .85fr; }
  .aud-card .content { padding: 35px; }
  .aud-card .photo { min-height: 360px; order: 0; }
  .trust-grid { grid-template-columns: 1fr; gap: 38px; }
  .trust-intro h2 { max-width: 470px; }
  .trust-intro p { max-width: 540px; }
  .trust-items { gap: 30px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 25px; }
  .faq-wrap .sec-head h2 { max-width: 100%; }
  .final-band { padding: 38px; border-radius: 25px; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-intro,.contact-form { padding: 38px; }
  .contact-intro h2 { max-width: 450px; }
  .foot-grid { gap: 40px; }
  .about-hero,.prod-hero { padding-top: 130px; padding-bottom: 65px; }
  .about-wide-photo { height: 370px; }
  .about-split { gap: 34px; }
  .about-card { padding: 36px; }
  .prod-hero-grid { gap: 40px; }
  .prod-hero-media { max-height: 520px; }
  .steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  section.block { padding-block: 61px; }
  .sec-head h2,.product-heading h2,.relationship-copy h2 { font-size: 37px; }
  .sec-head p { font-size: 14px; }
  .product-heading { margin-bottom: 28px; }
  .solution { display: flex; padding: 28px; border-radius: 22px; }
  .solution h3 { font-size: 36px; }
  .solution-art { height: 126px; }
  .solution > a { padding-top: 18px; }
  .relationship-photo { height: 345px; }
  .relationship-photo > img { border-top-right-radius: 80px; }
  .relationship-stamp { padding: 17px 18px; right: 15px; bottom: 18px; }
  .relationship-copy h2 { margin-block: 16px 20px; }
  .est-card { border-radius: 22px; margin-top: 30px; }
  .est-controls,.est-result { padding: 30px 24px; }
  .est-type { padding: 11px 7px; font-size: 10px; }
  .est-controls .est-inlabel { margin-top: 31px; }
  .est-amount { font-size: 39px; }
  .est-result .rnum { font-size: 48px; }
  .aud-card { grid-template-columns: 1fr; }
  .aud-card .content { padding: 27px; }
  .aud-card .photo { height: 245px; min-height: 0; order: -1; margin: 9px 9px 0; border-radius: 17px; }
  .aud-card h3 { font-size: 30px; }
  .trust-intro h2 { font-size: 38px; }
  .trust-items { grid-template-columns: 1fr; gap: 27px; }
  .titem { grid-template-columns: 38px 1fr; gap: 0 16px; }
  .trust .titem h3 { font-size: 16px; }
  .trust .titem p { font-size: 13px; }
  .faq-item summary { font-size: 15px; padding-block: 22px; }
  .final-band { padding: 32px 27px; border-radius: 22px; }
  .final .final-band h2 { font-size: 39px; }
  .final .final-band p { font-size: 14px; }
  .final .final-band .btn-primary { padding: 18px 21px; font-size: 13px; white-space: normal; }
  .contact-card { border-radius: 22px; }
  .contact-intro,.contact-form { padding: 30px 25px; }
  .contact-intro h2 { font-size: 37px; }
  .contact-meta { font-size: 12px; }
  .contact-form { gap: 18px; }
  .contact-form input,.contact-form select,.contact-form textarea { font-size: 16px; }
  footer { padding-top: 52px; }
  .foot-grid { gap: 32px; }
  .foot-bottom { margin-top: 38px; }
  .about-hero h1 { font-size: 48px; }
  .about-hero > .about-hero-inner > p { font-size: 16px; }
  .about-wide-photo { height: 280px; }
  .about-wide-photo img { border-radius: 21px; }
  .about-card { padding: 29px; }
  .about-card .about-quote { font-size: 32px; }
  .why-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .why-card { padding-top: 24px; }
  .prod-hero-copy h1 { font-size: 47px; }
  .prod-hero-media { border-top-right-radius: 70px; }
  .prod-hero-media .pill { font-size: 10px; }
  .step3 { padding: 29px; }
}