/* Landing-only brand layer. Dashboard and legal documents retain their own styles. */
body.landing {
  --brand: #1d49ff; --brand-deep: #173dd4; --brand-soft: #eef3ff;
  --text: #17243d; --text-mid: #526079; --text-muted: #66738a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff; color: var(--text);
}
body.landing::before, body.landing::after, body.landing .bg-grid, body.landing .bg-glow { display: none; }
body.landing ::selection { color: #fff; background: #1d49ff; }
body.landing :focus-visible { outline: 2px solid #1d49ff; outline-offset: 4px; }
body.landing section { scroll-margin-top: 80px; }
body.landing .nav { background: #ffffffed; border-color: #e7edfa; backdrop-filter: blur(16px); }
body.landing .nav-links a { position: relative; font-size: 13px; }
body.landing .nav-links a::after { content: ""; position: absolute; height: 2px; bottom: -8px; left: 0; right: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
body.landing .nav-links a:hover::after, body.landing .nav-links a[aria-current="location"]::after { transform: scaleX(1); }
body.landing .brand-name { font-family: inherit; letter-spacing: -.7px; }
body.landing .btn { font-family: inherit; border-radius: 8px; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
body.landing .btn-primary { background: var(--brand); color: #fff; border: 1px solid var(--brand); box-shadow: none; }
body.landing .btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); box-shadow: 0 6px 18px -10px #1d49ff80; }
body.landing .btn .arrow { transition: transform .2s; }
body.landing .btn:hover .arrow { transform: translateX(3px); }
body.landing .btn:active { transform: translateY(1px); }
body.landing .btn-ghost { background: #fff; border-color: #dce5fb; color: #27437a; box-shadow: none; }
body.landing .hero { background: #fff; padding-top: 76px; padding-bottom: 55px; }
body.landing .hero-title { font-family: inherit; font-size: clamp(46px,4.5vw,66px); line-height: 1.07; font-weight: 550; letter-spacing: -2.6px; color: #17243d; }
body.landing .hero-title .hero-accent { color: inherit; }
body.landing .hero-lead { font-size: 16px; line-height: 1.7; color: #5a6780; }
body.landing .badge-live { padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; color: #315bd2; font: 500 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body.landing .badge-live .live-dot { display: none; }
body.landing .hero-visual.payment-preview { background: #f5f6f8; position: relative; border-radius: 12px; }
body.landing .payment-preview-caption { color: #536fa8; }
body.landing .payment-preview-link { color: #1d49ff; }
body.landing .payment-receipt { box-shadow: none; border: 1px solid #e5e7eb; border-radius: 8px; }
/* One compact logo matrix; individual sizes balance the original wordmarks optically. */
body.landing .bank-coverage { padding: 0 0 36px; background: #fff; }
body.landing .bank-coverage-panel { max-width: 1040px; margin: 0 auto; padding: 32px 0 0; border-top: 1px solid #e5e7eb; }
body.landing .bank-coverage-copy { text-align: center; }
body.landing .bank-coverage-eyebrow { display: block; margin-bottom: 12px; color: #315bd2; font-size: 12px; font-weight: 500; }
body.landing .bank-coverage-copy h2 { margin: 0; color: #202631; font-size: clamp(25px,2.5vw,32px); line-height: 1.2; font-weight: 550; letter-spacing: -.9px; text-wrap: balance; }
body.landing .bank-coverage-copy p { margin: 12px 0 0; color: #68707c; font-size: 14px; line-height: 1.6; }
body.landing .bank-coverage-list { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1px; margin: 28px 0 0; padding: 1px; overflow: hidden; border-radius: 10px; background: #e9ecf1; list-style: none; }
body.landing .bank-coverage-name { display: flex; align-items: center; justify-content: center; min-width: 0; height: 84px; padding: 16px 20px; background: #fff; }
body.landing .bank-coverage-name img { display: block; width: var(--logo-width,130px); max-width: 100%; height: var(--logo-height,32px); object-fit: contain; }
body.landing .bank-coverage-name img[src$="kaspi.svg"] { --logo-width: 130px; --logo-height: 32px; }
body.landing .bank-coverage-name img[src$="halyk.svg"] { --logo-width: 112px; }
body.landing .bank-coverage-name img[src$="freedom.svg"] { --logo-width: 130px; --logo-height: 30px; }
body.landing .bank-coverage-name img[src$="bcc.svg"] { --logo-width: 138px; --logo-height: 30px; }
body.landing .bank-coverage-name img[src$="forte.svg"] { --logo-width: 106px; }
body.landing .bank-coverage-name img[src$="rbk.svg"] { --logo-width: 90px; --logo-height: 40px; }
body.landing .bank-coverage-name img[src$="altyn.svg"] { --logo-width: 120px; --logo-height: 34px; }
body.landing .bank-coverage-name img[src$="homecredit.png"] { --logo-width: 128px; --logo-height: 30px; }
body.landing .bank-coverage-name img[src$="nurbank.svg"] { --logo-width: 128px; --logo-height: 28px; }
body.landing .bank-coverage-name img[src$="kmf.svg"] { --logo-width: 110px; --logo-height: 30px; }
body.landing .bank-coverage-name img[src$="alatau.png"] { --logo-width: 118px; --logo-height: 36px; }
body.landing .bank-coverage-name img[src$="eurasian.webp"] { --logo-width: 106px; --logo-height: 36px; }
body.landing .bank-coverage-name img[src$="bereke.svg"] { --logo-height: 28px; }
body.landing .bank-coverage-name img[src$="kzi.png"] { --logo-width: 102px; --logo-height: 30px; }
body.landing .bank-coverage-name img[src$="kazpost.svg"] { --logo-width: 128px; --logo-height: 30px; }
body.landing .bank-coverage-source { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 16px; color: #767d87; font-size: 11px; line-height: 1.6; }
body.landing .bank-coverage-source a { color: #596372; text-decoration: underline; text-decoration-color: #b9bec7; text-underline-offset: 4px; }
body.landing .bank-coverage-source a:hover { color: #1d49ff; }
body.landing #demo .demo-eyebrow, body.landing #features .kicker, body.landing #how .setup-eyebrow { color: #315bd2; font-weight: 500; }
body.landing #demo .demo-preview-panel { background: #f5f6f8; }
body.landing #demo .demo-workspace { border-color: #dfe7f8; }
body.landing #demo .demo-run-button, body.landing #how .setup-start { background: var(--brand); border-color: var(--brand); color: #fff; }
body.landing #demo .demo-run-button:hover:not(:disabled), body.landing #how .setup-start:hover { background: var(--brand-deep); }
body.landing #demo .demo-entry-heading > span { background: #eef3ff; color: #315bd2; }
body.landing #features { background: #fff; }
body.landing #features .card-feature,
body.landing #features .card-feature:nth-child(-n+2) { background: #fff; }
body.landing #features .card-feature:nth-child(2) { background: #fff; }
body.landing #features .card-feature-icon, body.landing #features .card-feature:nth-child(-n+2) .card-feature-icon { color: #315bd2; }
body.landing #how { background: #fff; }
body.landing #how .setup-index { background: transparent; border: 0; border-radius: 0; color: #89909b; font-size: 13px; }
body.landing #how .setup-steps li:not(:last-child)::after { display: none; }
body.landing #how .setup-login a { color: #315bd2; }
body.landing .brand-eyebrow { display: block; margin-bottom: 18px; color: #315bd2; font-size: 12px; font-weight: 500; letter-spacing: 0; }
/* Business metrics form a single band, with secondary resources below. */
body.landing #trust { padding: 48px 0 0; background: #fff; }
#trust .trust-panel { padding: 36px 0 0; border-top: 1px solid #e5e7eb; color: #17243d; }
#trust .trust-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
#trust .trust-heading h2 { margin: 0; font: 550 clamp(30px,3.3vw,44px)/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -1.4px; color: #17243d; }
#trust .trust-contact { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; flex-shrink: 0; font-size: 12px; font-weight: 500; color: #1d49ff; text-decoration: none; }
#trust .trust-contact:hover { text-decoration: underline; text-underline-offset: 5px; }
#trust .trust-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; padding: 38px 0; border: 1px solid #e4eafa; border-radius: 16px; background: #f6f8ff; }
#trust .trust-stats article { display: flex; flex-direction: column; gap: 18px; padding: 0 36px; min-width: 0; }
#trust .trust-stats article + article { border-left: 1px solid #dfe6f7; }
#trust .trust-stats strong { color: #1d49ff; font-size: clamp(48px,5.4vw,76px); font-weight: 500; line-height: 1; letter-spacing: -3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#trust .trust-stats strong small { font-size: 21px; font-weight: 450; letter-spacing: -.5px; }
#trust .trust-stats article > span { color: #526079; font-size: 14px; line-height: 1.5; }
#trust .trust-resources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding-top: 16px; gap: 0; }
#trust .trust-resource { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 10px 36px; color: #526079; text-decoration: none; }
#trust .trust-resource-copy strong { font-size: 12px; font-weight: 450; line-height: 1.5; }
#trust .trust-arrow { color: #8594b0; font-size: 15px; transition: transform .2s, color .2s; }
#trust .trust-resource:hover { color: #1d49ff; }
#trust .trust-resource:hover .trust-arrow { color: #1d49ff; transform: translate(2px,-2px); }
#trust a:focus-visible { outline-color: #1d49ff; }
@media(max-width:1000px) {
  #trust .trust-stats article { padding-inline: 24px; }
  #trust .trust-stats strong { font-size: 54px; }
  #trust .trust-stats strong small { font-size: 17px; }
  #trust .trust-stats article > span { font-size: 12px; }
  #trust .trust-resource { padding-inline: 24px; }
}
@media(max-width:700px) {
  body.landing #trust { padding-top: 32px; }
  #trust .trust-panel { padding-top: 28px; }
  #trust .trust-heading { flex-direction: column; align-items: start; gap: 8px; margin-bottom: 20px; }
  #trust .trust-heading h2 { letter-spacing: -1px; }
  #trust .trust-stats { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 26px 24px; row-gap: 26px; }
  #trust .trust-stats article { padding: 0; gap: 12px; }
  #trust .trust-stats article:nth-child(2) { padding-left: 20px; }
  #trust .trust-stats article:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #dfe6f7; padding-top: 24px; }
  #trust .trust-stats strong { font-size: 56px; letter-spacing: -2.5px; }
  #trust .trust-stats strong small { font-size: 18px; }
  #trust .trust-stats article > span { font-size: 12px; }
  #trust .trust-resources { grid-template-columns: minmax(0,1fr); padding-top: 14px; }
  #trust .trust-resource { padding: 12px 4px; }
  #trust .trust-resource + .trust-resource { border-top: 1px solid #edf0f6; }
}
@media(max-width:360px) {
  #trust .trust-stats { padding: 24px 20px; }
  #trust .trust-stats article:nth-child(2) { padding-left: 14px; }
  #trust .trust-stats strong { font-size: 48px; }
  #trust .trust-stats strong small { font-size: 15px; }
}
/* Four comparable plans, one accent, and a shared capability list. */
body.landing #pricing { padding: 72px 0 48px; background: #fff; }
#pricing .pricing-heading { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 32px; }
#pricing .pricing-eyebrow { display: block; margin-bottom: 16px; color: #315bd2; font-size: 12px; font-weight: 500; }
#pricing .pricing-heading h2, #faq .faq-heading h2 { margin: 0; font: 550 clamp(32px,3.7vw,46px)/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -1.5px; color: #17243d; }
#pricing .pricing-heading p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #66738a; }
#pricing .pricing-trial { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 16px 28px; border-left: 1px solid #dfe6f5; text-decoration: none; flex-shrink: 0; }
#pricing .pricing-trial strong { font-size: 15px; font-weight: 500; color: #17243d; }
#pricing .pricing-trial > span { font-size: 12px; color: #1d49ff; }
#pricing .pricing-trial > span > span { margin-left: 16px; }
#pricing .pricing-trial:hover > span { text-decoration: underline; text-underline-offset: 4px; }
body.landing #pricing .pricing-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-items: stretch; max-width: none; margin: 0; }
#pricing .plan-card { min-width: 0; padding: 22px; border: 1px solid #dfe4ed; border-radius: 14px; background: #fff; display: flex; flex-direction: column; position: relative; }
#pricing .plan-card-featured { border-color: #1d49ff; box-shadow: 0 0 0 1px #1d49ff, 0 10px 26px -18px #1d49ff55; background: #f7f9ff; }
#pricing .plan-position { display: flex; align-items: center; min-height: 28px; margin-bottom: 18px; }
#pricing .plan-audience { color: #7a8495; font-size: 11px; line-height: 1.5; }
#pricing .plan-recommendation { display: inline-block; padding: 5px 9px; border-radius: 5px; background: #e9efff; color: #1d49ff; font-size: 10px; font-weight: 500; line-height: 1.5; }
#pricing .plan-intro h3 { margin: 0 0 10px; font-size: 24px; font-weight: 550; line-height: 1.2; letter-spacing: -.6px; color: #17243d; }
#pricing .plan-intro p { margin: 0; font-size: 13px; line-height: 1.6; color: #5c6980; min-height: 42px; }
#pricing .plan-price { display: flex; align-items: baseline; gap: 7px; margin-top: 18px; color: #17243d; }
#pricing .plan-price strong { font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#pricing .plan-price > span { font-size: 15px; font-weight: 400; }
#pricing .plan-period { margin-top: 5px; color: #7a8495; font-size: 11px; }
#pricing .plan-select { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 13px; min-height: 44px; margin-top: 22px; border: 1px solid #dce3ee; border-radius: 7px; background: #fff; color: #273955; text-decoration: none; font-size: 12px; font-weight: 500; }
#pricing .plan-card-featured .plan-select { background: #1d49ff; border-color: #1d49ff; color: #fff; }
#pricing .plan-select:hover { border-color: #1d49ff; color: #1d49ff; }
#pricing .plan-card-featured .plan-select:hover { background: #173dd4; color: #fff; }
#pricing .plan-select:hover > span { transform: translate(2px,-2px); }
#pricing .plan-select:active { transform: translateY(1px); }
#pricing .plan-limits { display: grid; gap: 10px; margin: 20px 0 0; padding: 18px 0; border-top: 1px solid #e4e9f2; border-bottom: 1px solid #e4e9f2; }
#pricing .plan-limits > div { display: flex; align-items: baseline; gap: 7px; }
#pricing .plan-limits dt { color: #526079; font-size: 12px; line-height: 1.5; }
#pricing .plan-limits dd { order: -1; margin: 0; font-size: 14px; font-weight: 550; color: #273955; white-space: nowrap; font-variant-numeric: tabular-nums; }
#pricing .plan-limits > div:first-child dd { font-size: 19px; letter-spacing: -.4px; }
#pricing .plan-limits > div:first-child { margin-bottom: 2px; }
#pricing .plan-included { margin-top: 20px; font-size: 11px; font-weight: 500; color: #526079; }
#pricing .plan-features { margin: 13px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; font-size: 11px; line-height: 1.5; color: #526079; }
#pricing .plan-features li { display: flex; align-items: baseline; gap: 8px; }
#pricing .plan-check { flex-shrink: 0; color: #1d49ff; }
#pricing .plan-base-note { margin: 12px 0 0; max-width: none; font-size: 12px; line-height: 1.6; color: #5c6980; }
#pricing .pricing-common { display: flex; align-items: center; gap: 32px; margin-top: 24px; padding: 22px 24px; border: 1px solid #e6eaf1; border-radius: 10px; background: #fafbfe; }
#pricing .pricing-common h3 { margin: 0; flex-shrink: 0; font-size: 12px; font-weight: 550; color: #273955; }
#pricing .pricing-common ul { display: flex; flex-wrap: wrap; justify-content: space-between; flex: 1; gap: 12px 24px; padding: 0; margin: 0; list-style: none; }
#pricing .pricing-common li { display: flex; gap: 9px; align-items: baseline; font-size: 11px; color: #66738a; }
#pricing .pricing-common li > span { color: #1d49ff; }
#pricing .pricing-assurance { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
#pricing .pricing-assurance p, #pricing .pricing-footnote { margin: 0; font-size: 11px; line-height: 1.6; color: #7a8495; }
#pricing .pricing-assurance a { flex-shrink: 0; padding: 10px 0; font-size: 11px; color: #1d49ff; text-decoration: none; }
#pricing .pricing-assurance a > span { margin-left: 14px; }
#pricing .pricing-footnote { text-align: center; margin-top: 20px; }
#pricing .pricing-footnote a { color: #1d49ff; }
#pricing .plan-loading, #pricing .pricing-error { grid-column: 1/-1; padding: 32px; border: 1px solid #e3e9f5; border-radius: 14px; background: #f7f9fd; color: #66738a; font-size: 13px; }
#pricing .plan-loading { min-height: 350px; }
#pricing .plan-loading div { height: 180px; margin-top: 25px; border-radius: 8px; background: #edf1f9; }
#pricing .pricing-error p { margin-bottom: 18px; }
@media(min-width:701px) and (max-width:1100px) {
  body.landing #pricing .pricing-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #pricing .plan-intro p { min-height: 39px; }
  #pricing .plan-price strong { font-size: 28px; }
}
@media(max-width:700px) {
  #pricing .pricing-heading { flex-direction: column; align-items: start; gap: 22px; }
  #pricing .pricing-trial { padding: 0; border: 0; }
  body.landing #pricing .pricing-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  #pricing .plan-card { padding: 20px; }
  #pricing .plan-position { min-height: 24px; margin-bottom: 10px; }
  #pricing .plan-audience, #pricing .plan-recommendation { font-size: 12px; }
  #pricing .plan-intro p { min-height: 0; font-size: 14px; line-height: 1.5; }
  #pricing .plan-price { margin-top: 16px; }
  #pricing .plan-price strong { font-size: 24px; letter-spacing: -.5px; }
  #pricing .plan-period { font-size: 12px; margin-top: 3px; }
  #pricing .plan-select { min-height: 48px; margin-top: 16px; font-size: 14px; }
  #pricing .plan-limits { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 16px; padding: 16px 0; gap: 10px 12px; }
  #pricing .plan-limits > div:first-child { grid-column: 1 / -1; }
  #pricing .plan-limits dt, #pricing .plan-features { font-size: 13px; }
  #pricing .plan-included { margin-top: 16px; font-size: 12px; }
  #pricing .plan-base-note { font-size: 13px; }
  #pricing .pricing-common h3, #pricing .pricing-common li { font-size: 13px; }
  #pricing .pricing-assurance p, #pricing .pricing-assurance a { font-size: 12px; }
  #pricing .pricing-assurance a { display: inline-flex; align-items: center; min-height: 44px; }
  #pricing .pricing-common { align-items: start; flex-direction: column; gap: 16px; padding: 22px; }
  #pricing .pricing-common ul { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; }
  #pricing .pricing-assurance { align-items: start; flex-direction: column; gap: 2px; }
}
/* FAQ and the final invitation share a centered reading axis. */
body.landing #faq { background: #fff; padding: 48px 0 44px; border: 0; }
#faq .faq-layout { display: block; max-width: 896px; }
#faq .faq-heading { padding: 0; margin-bottom: 28px; text-align: center; }
#faq .faq-heading h2 { font-size: clamp(30px,3.3vw,40px); line-height: 1.2; letter-spacing: -1.2px; }
body.landing #faq .faq-list { display: block; max-width: none; width: 100%; margin: 0; padding: 0; border: 0; border-top: 1px solid #e5e9f1; border-radius: 0; background: #fff; }
body.landing #faq .faq-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #e5e9f1; border-radius: 0; background: none; box-shadow: none; }
body.landing #faq .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 21px 0; list-style: none; font: 500 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #273955; cursor: pointer; transition: color .2s; }
#faq .faq-item summary::-webkit-details-marker { display: none; }
body.landing #faq .faq-item summary::after { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0; position: static; background: none; box-shadow: none; border: 0; border-radius: 0; font: 400 22px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #7b89a2; transform: none; }
body.landing #faq .faq-item[open] summary::after { content: "−"; color: #1d49ff; transform: none; }
body.landing #faq .faq-item[open] summary, body.landing #faq .faq-item summary:hover { color: #1d49ff; }
body.landing #faq .faq-item p { margin: 0; padding: 0 48px 22px 0; max-width: 740px; font: 400 14px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #66738a; }
#faq .faq-support { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 20px; color: #788398; font-size: 12px; }
#faq .faq-contact { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; font-size: 12px; color: #1d49ff; text-decoration: none; }
#faq .faq-contact:hover { text-decoration: underline; text-underline-offset: 4px; }
body.landing #get-started { padding: 0 0 42px; background: #fff; border: 0; }
#get-started .closing-panel { padding: 40px 28px; border: 1px solid #e3e9fa; border-radius: 16px; background: #f6f8ff; }
#get-started .closing-copy { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
#get-started h2 { margin: 0; max-width: 650px; color: #202631; font: 550 clamp(30px,3.3vw,42px)/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -1.3px; }
#get-started h2 > span { display: block; color: #1d49ff; }
#get-started .closing-actions { display: flex; align-items: center; justify-content: center; gap: 12px; }
#get-started .closing-button, #get-started .closing-demo { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 13px 20px; min-height: 46px; border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none; }
#get-started .closing-button { background: #1d49ff; border: 1px solid #1d49ff; color: #fff; }
#get-started .closing-button:hover { background: #173dd4; }
#get-started .closing-demo { background: #fff; border: 1px solid #dce4f8; color: #526079; }
#get-started .closing-demo:hover { color: #1d49ff; border-color: #b8c9fc; }
body.landing .footer { background: #fff; padding: 20px 0 0; border: 0; }
body.landing .footer-inner { display: flex; justify-content: space-between; gap: 70px; padding-bottom: 42px; }
body.landing .footer-brand { max-width: 290px; }
body.landing .footer-brand p { margin: 17px 0 0; color: #66738a; font-size: 12px; line-height: 1.7; }
body.landing .footer .brand-mark img { display: block; width: 30px; height: 30px; }
body.landing .footer-cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 45px; }
body.landing .footer-cols h4 { margin: 0 0 15px; font: 550 12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-transform: none; letter-spacing: 0; color: #273955; }
body.landing .footer-cols a { display: block; margin: 0 0 11px; color: #66738a; font: 400 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; text-decoration: none; }
body.landing .footer-cols a:hover { color: #1d49ff; }
body.landing .footer-bottom { padding-top: 22px; padding-bottom: 25px; border-top: 1px solid #e7edf7; color: #66738a; }
body.landing .footer-bottom .small { font-family: inherit; font-size: 11px; }
body.landing .footer-top-link { font-size: 12px; color: #1d49ff; }
@media(max-width:1000px) {
  body.landing .footer-inner { gap: 40px; }
  body.landing .footer-cols { gap: 25px; }
}
@media(max-width:760px) {
  body.landing .hero { padding-top: 48px; }
  body.landing .demo-field input { font-size: 16px; }
  body.landing .hero-title { font-size: 48px; letter-spacing: -1.9px; }
  body.landing #pricing { padding: 56px 0; }
  body.landing #faq { padding: 40px 0 32px; }
  body.landing .footer-inner { flex-direction: column; gap: 32px; }
}
@media(max-width:440px) {
  body.landing .nav-inner { gap: 12px; padding: 12px 20px; }
  body.landing .nav-cta .btn { min-height: 44px; padding: 10px 12px; font-size: 12px; }
  body.landing .hero-title { font-size: 42px; letter-spacing: -1.5px; }
  #faq .faq-item summary { font-size: 15px; }
  #get-started .closing-panel { padding: 32px 20px; }
  #get-started .closing-actions { flex-direction: column; width: 100%; gap: 10px; }
  #get-started .closing-actions > a { width: 100%; }
  #get-started h2 { font-size: 30px; letter-spacing: -1px; }
  body.landing .footer-cols { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
}
@media(prefers-reduced-motion:reduce) {
  body.landing *,body.landing *::before,body.landing *::after { scroll-behavior: auto !important; transition: none !important; }
}
/* Fixed demo details and a country code that stays outside editable text. */
body.landing #demo .demo-field input[readonly] { background: #f4f7ff; color: #57627a; cursor: default; }
body.landing #demo .demo-phone-input { display: block; position: relative; }
body.landing #demo #demo-phone-prefix { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #252a34; font-size: 16px; pointer-events: none; }
body.landing #demo #demo-phone { padding-left: 47px; }

@media(max-width:760px) {
  body.landing .bank-coverage-panel { padding-top: 28px; }
  body.landing .bank-coverage-copy h2 { max-width: 440px; margin-inline: auto; }
  body.landing .bank-coverage-copy p { max-width: 360px; margin-inline: auto; font-size: 13px; }
  body.landing .bank-coverage-list { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 24px; }
  body.landing .bank-coverage-name { height: 76px; padding: 14px 16px; }
  body.landing .bank-coverage-name img { height: min(var(--logo-height,32px),30px); }
  body.landing .bank-coverage-source { justify-content: center; text-align: center; gap: 5px 20px; font-size: 10px; }
}
@media(max-width:440px) {
  body.landing .bank-coverage-name { height: 68px; padding: 12px 10px; }
  body.landing .bank-coverage-copy h2 { font-size: 26px; }
}

/* Touch layouts keep secondary links as easy to use as the main actions. */
@media(max-width:1000px) {
  body.landing .nav-cta .btn, body.landing .brand { min-height: 44px; }
}
@media(max-width:760px) {
  body.landing .scene-footer a,
  body.landing .bank-coverage-source a,
  body.landing #how .setup-login a,
  body.landing .footer-top-link { display: inline-flex; align-items: center; min-height: 44px; }
  body.landing .scene-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  body.landing .footer-cols a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; }
}

/* Mobile visitors can reach pricing and support directly from the header. */
@media(max-width:760px) {
  body.landing .nav-inner { flex-wrap: wrap; gap: 4px 12px; padding-top: 10px; padding-bottom: 0; }
  body.landing .nav-links { display: flex; order: 3; width: 100%; justify-content: space-between; gap: 12px; border-top: 1px solid #edf0f6; }
  body.landing .nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; white-space: nowrap; }
  body.landing .nav-links a[href="#features"] { display: none; }
  body.landing .nav-links a::after { bottom: 4px; }
  body.landing section, body.landing #demo, body.landing #how { scroll-margin-top: 24px; }
  body.landing .hero { padding-top: 32px; }
  body.landing #features { padding-block: 48px; }
  body.landing #features .section-head { margin-bottom: 16px; }
  body.landing .flow-scene .scene-space { aspect-ratio: 1.4; }
  body.landing .footer-inner { margin-bottom: 0; padding-bottom: 24px; }
}

@media(max-width:440px) {
  body.landing .footer-cols > div:last-child { grid-column: 1 / -1; }
}

/* Concrete business scenarios, with a compact reading order on phones. */
body.landing #use-cases { padding: 48px 0 56px; background: #fff; }
#use-cases .use-cases-heading { max-width: 650px; margin-bottom: 28px; }
#use-cases .use-cases-eyebrow { display: block; margin-bottom: 14px; color: #315bd2; font-size: 12px; font-weight: 500; }
#use-cases h2 { margin: 0; font-size: clamp(30px,3.3vw,42px); line-height: 1.15; font-weight: 550; letter-spacing: -1.2px; color: #17243d; }
#use-cases .use-cases-heading p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #66738a; }
#use-cases .use-cases-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 32px; }
#use-cases .use-case { min-width: 0; padding: 22px 0 26px; border-top: 1px solid #e2e8f1; }
#use-cases .use-case-channel { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 500; color: #315bd2; }
#use-cases h3 { margin: 0; color: #273955; font-size: 18px; line-height: 1.35; font-weight: 550; letter-spacing: -.3px; }
#use-cases .use-case p, #use-cases .use-cases-integration p { margin: 10px 0 0; color: #5c6980; font-size: 14px; line-height: 1.6; }
#use-cases .use-cases-integration { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px; margin-top: 8px; border-radius: 12px; background: #f6f8ff; border: 1px solid #e4eafa; }
#use-cases .use-cases-integration h3 { font-size: 16px; }
#use-cases .use-cases-integration p { font-size: 13px; }
#use-cases .use-cases-integration a { display: inline-flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 16px; min-height: 44px; color: #1d49ff; font-size: 13px; text-decoration: none; }
#use-cases .use-cases-integration a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:1000px) {
  #use-cases .use-cases-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; }
}
@media(max-width:600px) {
  body.landing #use-cases { padding: 32px 0 40px; }
  #use-cases .use-cases-heading { margin-bottom: 24px; }
  #use-cases .use-cases-heading p { font-size: 14px; }
  #use-cases .use-cases-grid { grid-template-columns: minmax(0,1fr); }
  #use-cases .use-case { padding: 18px 0 20px; }
  #use-cases .use-case-channel { margin-bottom: 6px; }
  #use-cases h3 { font-size: 17px; }
  #use-cases .use-case p { margin-top: 8px; }
  #use-cases .use-cases-integration { flex-direction: column; align-items: stretch; gap: 12px; padding: 20px; }
}
/* Keep the mobile page focused: examples above, then setup and plan choice. */
@media(max-width:760px) {
  body.landing #features .flow-scene,
  body.landing #how .connect-scene,
  body.landing #demo .sandbox-scene { display: none; }
  body.landing #demo > .container { gap: 18px; }
  body.landing #demo .demo-entry { grid-row: 2; }
  body.landing #demo, body.landing #features, body.landing #how { padding-block: 32px; }
  body.landing #how .setup-layout { gap: 18px; }
  body.landing #how .setup-guide { padding-top: 0; }
  body.landing #how .setup-steps li { padding-bottom: 18px; }
  body.landing #how .setup-steps h3 { font-size: 18px; margin-top: 3px; margin-bottom: 6px; }
  body.landing #features .features-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  body.landing #features .card-feature { padding: 16px 0; }
  body.landing #features .card-feature h3 { font-size: 17px; }
  body.landing #features .card-feature p { font-size: 13px; line-height: 1.55; }
  body.landing #pricing { padding-block: 32px; }
  body.landing #pricing .pricing-heading { gap: 16px; margin-bottom: 20px; }
  body.landing #pricing .pricing-trial { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  body.landing .hero { padding-top: 26px; }
  body.landing .hero-title { font-size: 38px; }
  body.landing .hero-lead { margin-top: 20px; }
}
/* A single pricing sheet keeps the mobile choice and its details together. */
body.landing #pricing { background: #edf1ff; border: 0; }
#pricing .pricing-sheet { border: 1px solid #d6dff5; border-radius: 18px; background: #fff; box-shadow: 0 14px 40px -28px #36549655; }
body.landing #pricing .pricing-grid { gap: 0; }
#pricing .plan-card { border: 0; border-right: 1px solid #e1e7f3; border-radius: 0; background: transparent; box-shadow: none; padding: 24px; }
#pricing .plan-card:last-child { border-right: 0; }
#pricing .plan-card-featured { background: #f5f7ff; box-shadow: inset 0 3px #1d49ff; }
#pricing .plan-position { margin-bottom: 14px; min-height: 25px; }
#pricing .plan-audience { color: #64718b; }
#pricing .plan-recommendation { padding: 0; background: transparent; font-size: 11px; }
#pricing .plan-summary { min-width: 0; }
#pricing .plan-price { margin-top: 20px; }
#pricing .plan-limits { border-bottom: 0; margin-top: 20px; padding-bottom: 0; }
#pricing .plan-limits dd { color: #244bd7; }
#pricing .plan-included { margin-top: 18px; }
#pricing .pricing-common { margin: 0; border: 0; border-top: 1px solid #e1e7f3; border-radius: 0 0 18px 18px; background: #f8faff; padding: 22px 24px; }
#pricing .plan-base-note { display: none; }
#pricing .phone-plan-selector { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 0 12px; margin: 0; border-bottom: 1px solid #e1e7f3; }
#pricing .phone-plan-selector button { min-width: 0; min-height: 56px; padding: 12px 3px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: #65718a; font-family: inherit; cursor: pointer; }
#pricing .phone-plan-selector strong { font-size: 13px; font-weight: 500; }
#pricing .phone-plan-selector button[aria-pressed="true"] { color: #1d49ff; border-bottom-color: #1d49ff; }
#pricing .phone-plan-selector button:focus-visible { outline: 2px solid #1d49ff; outline-offset: -5px; border-radius: 7px; }
@media(min-width:701px) and (max-width:1100px) {
  #pricing .plan-card:nth-child(2n) { border-right: 0; }
  #pricing .plan-card:nth-child(n+3) { border-top: 1px solid #e1e7f3; }
}
@media(max-width:700px) {
  #pricing .pricing-sheet { border-radius: 16px; }
  #pricing .plan-card, #pricing .plan-card-featured { padding: 22px 20px; border: 0; background: transparent; box-shadow: none; }
  #pricing .plan-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 14px; }
  #pricing .plan-position { grid-column: 1 / -1; min-height: 18px; margin-bottom: 12px; }
  #pricing .plan-intro { display: contents; }
  #pricing .plan-intro h3 { grid-column: 1; grid-row: 2; margin: 0; align-self: center; font-size: 23px; }
  #pricing .plan-intro p { grid-column: 1 / -1; grid-row: 3; margin-top: 14px; max-width: 34ch; color: #596983; }
  #pricing .plan-rate { grid-column: 2; grid-row: 2; text-align: right; }
  #pricing .plan-price { margin: 0; justify-content: end; }
  #pricing .plan-price strong { font-size: 24px; }
  #pricing .plan-period { font-size: 11px; }
  #pricing .plan-limits { order: 1; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 16px; margin: 20px 0 0; gap: 12px; border: 0; border-radius: 10px; background: #f0f4ff; }
  #pricing .plan-limits > div:first-child { padding-bottom: 12px; margin: 0; border-bottom: 1px solid #dce5fb; }
  #pricing .plan-limits > div:first-child dd { font-size: 21px; }
  #pricing .plan-limits dt { font-size: 12px; }
  #pricing .plan-select { order: 4; margin-top: 20px; background: #1d49ff; border-color: #1d49ff; color: #fff; min-height: 48px; }
  #pricing .plan-select:hover { background: #173dd4; color: #fff; }
  #pricing .plan-included { order: 2; font-size: 12px; }
  #pricing .plan-features { order: 3; }
  #pricing .pricing-common { padding: 20px; gap: 14px; background: #f8faff; }
  #pricing .pricing-trial strong { font-size: 14px; }
}
@media(max-width:360px) {
  body.landing #features .features-grid { grid-template-columns: 1fr; }
  #pricing .phone-plan-selector { padding-inline: 6px; }
  #pricing .phone-plan-selector strong { font-size: 12px; }
  #pricing .plan-card { padding-inline: 16px; }
  #pricing .plan-limits { padding: 12px; gap: 10px; }
}