/* Machines: illustrated card terminals with live screens, the machine
   lineup cards, and the "built for your business" ad panel. */

/* ------------------------------------------------------------ a machine */
.mach { position: relative; flex: none; width: var(--mw, 10rem); font-size: calc(var(--mw, 10rem) / 15); line-height: 1.1; }
.mach svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1.4em 1.6em rgba(12, 15, 21, 0.35)); }
.mach__screen { position: absolute; display: grid; align-content: center; justify-items: center; gap: 0.35em; padding: 0 0.5em; text-align: center; color: #fff; font-family: var(--font); overflow: hidden; }
.mach__screen small { font-size: 0.85em; font-weight: 600; opacity: 0.8; }
.mach__screen b { font-size: 2.3em; font-weight: 750; letter-spacing: -0.035em; line-height: 1; }
.mach__screen span { font-size: 0.85em; font-weight: 600; opacity: 0.9; }
.mach--countertop .mach__screen { left: 11.03%; top: 14%; width: 77.94%; height: 29.5%; font-family: var(--mono); }
.mach--countertop .mach__screen b { font-size: 1.6em; letter-spacing: 0.04em; }
.mach--countertop .mach__screen small, .mach--countertop .mach__screen span { font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; }
.mach--handheld .mach__screen { left: 14.5%; top: 20%; width: 70.9%; height: 59.5%; font-size: 1.15em; }
.mach--smartpos .mach__screen { left: 7.6%; top: 7.9%; width: 84.8%; height: 61.8%; }
.mach--smartpos .mach__screen b { font-size: 1.9em; }
.mach--phone .mach__screen { left: 8%; top: 3%; width: 84%; height: 94%; font-size: 1.2em; }
.mach--phone .mach__screen span::before { content: ""; display: block; width: 2.2em; height: 2.2em; margin: 0.4em auto 0.5em; border-radius: 50%; background: radial-gradient(circle, transparent 38%, rgba(255, 255, 255, 0.9) 40% 46%, transparent 48% 62%, rgba(255, 255, 255, 0.55) 64% 70%, transparent 72%); }
.mach--online .mach__screen { left: 15.65%; top: 6.67%; width: 68.7%; height: 66.7%; color: var(--ink); }
.mach--online .mach__screen b { font-size: 1.7em; }
.mach--online .mach__screen span { padding: 0.35em 1em; border-radius: 999px; background: var(--cobalt); color: #fff; opacity: 1; }

/* ----------------------------------------------- lineup cards (home rail) */
.gear--m { width: 19rem; padding: 0.75rem 0.75rem 1.25rem; border-radius: 22px; }
.gear--m .gear__art { height: 13rem; margin-bottom: 1rem; border-radius: 16px; background: radial-gradient(80% 90% at 50% 100%, rgba(43, 69, 232, 0.35), transparent 70%), var(--ink-3); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.9rem; overflow: hidden; }
.gear--m .gear__art .mach { --mw: 6.8rem; }
.gear--m .gear__art .mach--handheld { --mw: 5.6rem; }
.gear--m .gear__art .mach--smartpos { --mw: 13.5rem; margin-bottom: 0.4rem; }
.gear--m .gear__art .mach--reader { --mw: 8rem; margin-bottom: 1.4rem; }
.gear--m .gear__art .mach--phone { --mw: 5.4rem; }
.gear--m .gear__art .mach--online { --mw: 15rem; margin-bottom: 0.8rem; }
.gear__body { display: grid; gap: 0.45rem; padding: 0 0.45rem; }
.gear__price { justify-self: start; margin: 0; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--on-ink); font-size: 0.82rem; font-weight: 700; }
.gear__price.is-free { background: var(--hi); color: var(--ink); }
.gear--m h3 { margin: 0.2rem 0 0; font-size: 1.25rem; letter-spacing: -0.02em; }
.gear__best { margin: 0; color: var(--on-ink-soft); font-size: 0.95rem; line-height: 1.45; }
.gear__steps { list-style: none; counter-reset: gs; margin: 0.4rem 0 0; padding: 0.7rem 0 0; display: grid; gap: 0.45rem; border-top: 1px solid var(--ink-line); }
.gear__steps li { counter-increment: gs; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.5rem; align-items: start; font-size: 0.93rem; line-height: 1.4; color: var(--on-ink); }
.gear__steps li::before { content: counter(gs); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(141, 155, 255, 0.18); color: var(--cobalt-light); font-weight: 700; font-size: 0.82rem; }
@media (max-width: 860px) { .gear--m { width: 16rem; } .gear--m .gear__art { height: 11rem; } .gear--m .gear__art .mach { --mw: 5.8rem; } .gear--m .gear__art .mach--handheld { --mw: 4.8rem; } .gear--m .gear__art .mach--smartpos { --mw: 11.5rem; } .gear--m .gear__art .mach--online { --mw: 12.5rem; } .gear--m .gear__art .mach--phone { --mw: 4.6rem; } .gear--m .gear__art .mach--reader { --mw: 6.8rem; } }

/* grid version on the machines page */
.lineup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.gear--grid { width: auto; background: var(--ink-2); border: 1px solid var(--ink-line); color: var(--on-ink); }
@media (max-width: 1000px) { .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lineup { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------- built for your business */
.act--fit { background: #fff; }
.fitwrap { padding-block: clamp(5.5rem, 12vh, 8.5rem) clamp(4.5rem, 10vh, 7rem); }
.fit__intro { display: grid; gap: 1rem; max-width: 44rem; margin-bottom: 1.6rem; }
.fit__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.fit__chips button { min-height: 2.75rem; padding: 0.55rem 1.05rem; border-radius: 999px; border: 1.5px solid #D3D7DE; background: #fff; color: var(--text); font: 650 0.95rem/1.2 var(--font); cursor: pointer; transition: border-color 140ms, background-color 140ms, color 140ms; }
.fit__chips button:hover { border-color: var(--cobalt); color: var(--cobalt); }
.fit__chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fit__ad { --bg: var(--ink); --fg: var(--on-ink); --soft: var(--on-ink-soft); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 34rem; border-radius: 32px; overflow: hidden; background: var(--bg); color: var(--fg); box-shadow: 0 40px 80px -40px rgba(12, 15, 21, 0.55); transition: background-color 400ms var(--ease); }
.fit--ink { --bg: radial-gradient(90% 90% at 100% 0%, #2A3140, #0C0F15 65%); }
.fit--cobalt { --bg: radial-gradient(90% 90% at 100% 0%, #5068FF, #2B45E8 45%, #1730C4); --soft: #DCE1FF; }
.fit--hi { --bg: radial-gradient(90% 90% at 100% 0%, #FFF3B0, #FFE14D 45%, #FFD21F); --fg: var(--ink); --soft: #2E3138; }
.fit--paper { --bg: radial-gradient(90% 90% at 100% 0%, #FFFFFF, #EEF0F4 70%); --fg: var(--ink); --soft: #4F5766; }
.fit__ad { background: var(--bg); }
.fit__copy { position: relative; z-index: 2; display: grid; align-content: center; gap: 1rem; padding: clamp(1.75rem, 4vw, 3.5rem); }
.fit__head { margin: 0; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.8rem); font-weight: 750; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
.fit__sub { margin: 0; font-size: var(--t-lg); line-height: 1.45; color: var(--soft); max-width: 34ch; }
.fit__feat { gap: 0.55rem; }
.fit__feat li { color: var(--fg); font-weight: 550; }
.fit--hi .fit__feat svg, .fit--paper .fit__feat svg { color: var(--cobalt); }
.fit--ink .fit__feat svg, .fit--cobalt .fit__feat svg { color: var(--hi); }
.fit__setup, .fit__plan { margin: 0; display: grid; gap: 0.15rem; }
.fit__setup span, .fit__plan span { font-size: 0.86rem; font-weight: 650; color: var(--soft); }
.fit__setup b, .fit__plan b { font-size: 1.05rem; }
.fit__plan:empty { display: none; }
.fit__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 0.4rem; }
.fit__act .link { color: inherit; }
.fit--hi .fit__act .btn--hi { background: var(--ink); color: var(--hi); box-shadow: none; }
.fit__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 4rem 2rem 2.5rem; }
.fit__stage::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2rem; height: 2.4rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), transparent); }
.fit__m1, .fit__m2 { position: relative; display: flex; align-items: flex-end; }
.fit__m1 .mach { --mw: 14rem; }
.fit__m1 .mach--countertop { --mw: 15.5rem; }
.fit__m1 .mach--smartpos { --mw: 25rem; }
.fit__m1 .mach--online { --mw: 27rem; }
.fit__m1 .mach--phone { --mw: 12rem; }
.fit__m1 .mach--reader { --mw: 15rem; }
.fit__m2 { z-index: 1; margin-left: -2.5rem; margin-bottom: -0.6rem; }
.fit__m2 .mach { --mw: 7.5rem; }
.fit__m2 .mach--smartpos { --mw: 13rem; }
.fit__m2 .mach--online { --mw: 15rem; }
.fit__m2 .mach--countertop { --mw: 8.5rem; }
.fit__m1 { z-index: 2; }
.fit__toast { position: absolute; z-index: 3; top: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.7rem 1.05rem 0.7rem 0.75rem; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 0.98rem; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.55); }
.fit__toast::before { content: "\2713"; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #22B573; color: #fff; font-size: 0.9rem; }
.fit__ad.is-swap .fit__m1 { animation: fitin 560ms cubic-bezier(0.25, 1.4, 0.4, 1) both; }
.fit__ad.is-swap .fit__m2 { animation: fitin 560ms 90ms cubic-bezier(0.25, 1.4, 0.4, 1) both; }
.fit__ad.is-swap .fit__toast { animation: toast 520ms 380ms cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.fit__ad.is-swap .fit__copy > * { animation: fade 420ms var(--ease) both; }
@keyframes fitin { from { opacity: 0; transform: translateY(2.5rem) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes toast { from { opacity: 0; transform: translateY(-0.6rem) scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
@media (max-width: 960px) {
  .fit__ad { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 26px; }
  .fit__stage { order: -1; min-height: 20rem; padding: 4.2rem 1rem 1.5rem; }
  .fit__m1 .mach { --mw: 10.5rem; } .fit__m1 .mach--countertop { --mw: 11rem; } .fit__m1 .mach--smartpos { --mw: 17rem; } .fit__m1 .mach--online { --mw: 18rem; } .fit__m1 .mach--phone { --mw: 9rem; } .fit__m1 .mach--reader { --mw: 11rem; }
  .fit__m2 .mach { --mw: 5.6rem; } .fit__m2 .mach--smartpos, .fit__m2 .mach--online { --mw: 9.5rem; } .fit__m2 .mach--countertop { --mw: 6.4rem; }
  .fit__toast { top: 1.1rem; right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.9rem; }
  .fit__ad.is-swap .fit__toast { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .fit__ad.is-swap .fit__m1, .fit__ad.is-swap .fit__m2, .fit__ad.is-swap .fit__toast, .fit__ad.is-swap .fit__copy > * { animation: none; } }
@media (max-width: 760px) {
  .fit__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0.2rem var(--gutter) 0.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fit__chips::-webkit-scrollbar { display: none; }
  .fit__chips button { flex: none; }
}