/* ============================================================
   iInstaPay - Uber design language
   Monochrome: black #000 / ink #111 / slate #545454 /
               line #E2E2E2 / surface #F6F6F6 / white #FFF
   Colour is reserved for state only (success, error).
   Type: Inter (Uber Move is proprietary; Inter is the stand-in).
   Flat surfaces, hairline borders, 8px radii, no gradients.
   ============================================================ */

:root {
  /* Uber design language: monochrome, flat, high contrast.
     Colour is reserved for state (success / error), never decoration. */
  --black: #000000;
  --ink: #111111;          /* body text */
  --slate: #545454;        /* secondary text */
  --mute: #6E6E6E;
  --line: #E2E2E2;         /* hairline borders */
  --surface: #F6F6F6;      /* raised / alternate surface */
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --green: #06C167;        /* fills only -- fails AA as text on white */
  --green-text: #05733C;   /* accessible success text, 5.96:1 on white */

  /* Single accent. iInstaPay's own violet rather than Uber's green --
     this is Uber's structure carrying iInstaPay's identity, and it ties
     back to the logo mark. Reserved for emphasis: step numbers, ticks,
     active states, illustration highlights. Never for body copy, never
     as a large fill. */
  --accent: #5B2EFF;       /* 6.40:1 on white */
  --accent-on-dark: #8F74FF; /* 6.11:1 on black -- #5B2EFF is only 3.3:1 there */
  --red: #E11900;          /* error only */

  /* Legacy accent names retained so component rules keep resolving.
     They all collapse to the monochrome scale. */
  --mint: #05733C;
  --deep: #000000;

  --grad-brand: #000000;

  --tint-lavender: #F6F6F6;
  --tint-mint: #F6F6F6;
  --tint-peach: #F6F6F6;
  --tint-pink: #F6F6F6;
  --tint-sky: #F6F6F6;

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1120px;
  --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* Collapsing the palette to monochrome left text links the same colour
   as body copy. With no colour difference AND no underline they were
   indistinguishable from plain text, so inline links carry an underline
   (which is also how Uber sets text links). Links that already have
   their own affordance -- nav position, button shape, trailing arrow --
   opt out below. */
a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--black); text-decoration-thickness: 2px; }

.nav-links a, .menu a, .btn, .more, .footer-links a, .tab,
.skip-link, .wordmark, .capstrip a {
  text-decoration: none;
}
.footer-links a:hover, .menu a:hover { text-decoration: underline; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.7rem); letter-spacing: -0.04em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.3rem; }

.grad-text { color: var(--black); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: 18px;
}

.section .eyebrow, .section-alt .eyebrow {
  color: var(--slate);
}

.lede { font-size: 1.16rem; color: var(--slate); max-width: 42em; }

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }

/* The lockup is composed rather than a single flattened image. The mark
   and the wordmark scale independently, which matters because the
   supplied lockup sets its height from the circular mark: at a header
   height of 42px that left the wordmark at ~16px and the tagline at
   ~4px, which is below the size at which type resolves at all. The
   tagline would need the whole lockup to be ~100px tall to be legible,
   so it is dropped from the header and shown only in the footer where
   there is room to render it properly. */
.wordmark { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.wordmark img { display: block; width: auto; }
.wm-mark { height: 40px; width: 40px; flex: none; }
.wm-stack { display: grid; gap: 4px; }

/* Sizes are set per part rather than inherited from the flattened lockup.
   That lockup takes its height from the circular mark, so at a header
   height of 42px the tagline landed at ~4px -- below the size at which
   type resolves. Sized independently it sits at 9px and reads. */
.wm-text { height: 17px; }
.wm-tag  { height: 9px; opacity: 0.9; }

.wordmark-stacked .wm-mark { height: 44px; width: 44px; }
.site-footer .wm-mark { height: 46px; width: 46px; }
.site-footer .wm-text { height: 19px; }
.site-footer .wm-tag  { height: 10px; }

/* The tagline sets the lockup's width, so it shrinks first when the
   header gets tight rather than crowding the navigation. */
@media (max-width: 1300px) {
  .site-header .wm-text { height: 16px; }
  .site-header .wm-tag  { height: 8px; }
  .site-header .wm-mark { height: 36px; width: 36px; }
}
@media (max-width: 420px) {
  .site-header .wm-mark { height: 30px; width: 30px; }
  .site-header .wm-text { height: 13px; }
  /* The tagline is 1019:44, so its height drives the lockup's width.
     6px keeps the whole lockup under 180px, which clears the menu
     button at 320px without the flex row compressing it. */
  .site-header .wm-tag  { height: 6px; }
  .wordmark { gap: 8px; }
}

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a { color: var(--ink); font-size: 0.95rem; font-weight: 600; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); }

.nav-cta {
  background: var(--black);
  color: var(--white) !important;
  padding: 10px 18px;
  border-radius: 8px;
}
.nav-cta:hover { background: #2A2A2A; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink);
}

/* ---------- Hero (home) ---------- */

.hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding: 96px 0 104px;
  overflow: hidden;
  border-radius: 0;
}

.hero::before, .hero::after { content: none; }

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}

.hero p.lede { color: rgba(255,255,255,0.85); margin-top: 20px; }

.hero-actions { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 30px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary { background: var(--white); color: var(--deep); }
.btn-primary:hover { background: #E8E8E8; color: var(--black); }

.btn-ghost { border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.12); }

.btn-grad {
  background: var(--black);
  color: var(--white);
}
.btn-grad:hover { background: #2A2A2A; color: var(--white); }

.btn { transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }

/* ---------- Sections ---------- */

.section { padding: 92px 0; }
.section-alt { background: var(--surface); }
.section-head { max-width: 46em; margin-bottom: 50px; }
.section-head .lede { margin-top: 14px; }

/* ---------- Cards (tinted) ---------- */

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* .card hover is handled contextually in the motion section */

.card-lavender { background: var(--tint-lavender); }
.card-mint     { background: var(--tint-mint); }
.card-peach    { background: var(--tint-peach); }
.card-pink     { background: var(--tint-pink); }
.card-sky      { background: var(--tint-sky); }

.card .tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-mint .tag  { color: #111111; }
.card-peach .tag { color: #111111; }
.card-pink .tag  { color: #111111; }
.card-sky .tag   { color: #111111; }

.card p { color: var(--slate); font-size: 0.98rem; flex: 1; }
.card .more { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.card .more:hover { color: var(--accent); }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--grad-brand);
  color: var(--white);
  border-radius: 12px;
  padding: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before { content: none; }
.cta-band > * { position: relative; }
.cta-band p { color: rgba(255,255,255,0.85); margin-top: 10px; max-width: 34em; }

/* ---------- Page heroes (interior) ---------- */

.page-hero {
  background: var(--grad-brand);
  color: var(--white);
  padding: 80px 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.page-hero::before { content: none; }
.page-hero .wrap { position: relative; }
.page-hero .lede { color: rgba(255,255,255,0.87); margin-top: 18px; }

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-list { list-style: none; margin-top: 26px; display: grid; gap: 14px; }
.contact-list li {
  padding: 18px 22px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--line);
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.contact-list .k {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
  min-width: 64px;
}

.form-card {
  background: var(--white);
  border-radius: 12px;
  padding: 38px;
  border: 1px solid var(--line);
}

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--white);
}

.form-status { margin-top: 16px; font-family: var(--font-mono); font-size: 0.85rem; }
.form-status.ok { color: var(--mint); }
.form-status.err { color: #E11900; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--deep);
  color: #AFAFAF;
  padding: 60px 0 42px;
  font-size: 0.92rem;
  margin-top: 40px;
  border-radius: 0;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 36px;
  border-bottom: 1px solid #2A2A2A;
}

.footer-links { list-style: none; display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: #AFAFAF; }
.footer-links a:hover { color: var(--white); }

.disclosure { font-size: 0.8rem; line-height: 1.7; margin-top: 28px; color: #8A8A8A; max-width: 62em; }
.copyright { font-family: var(--font-mono); font-size: 0.75rem; margin-top: 14px; color: #8A8A8A; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .card-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 42px 30px; }
}

@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .hero { padding: 68px 0 80px; }
}

/* ============================================================
   Additions for the two-division site structure
   ============================================================ */

/* ---------- Accessibility helpers ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--white);
  color: var(--accent);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Header / dropdown navigation ---------- */

.nav-wrap { display: flex; }

/* The header carries eight top-level items, so it gets a wider container
   than the 1120px body wrap -- otherwise the nav is squeezed into the middle
   of the page with empty space either side and reads as congested. */
.site-header .wrap { max-width: 1320px; }

.nav-links { gap: 22px; }
.nav-links > li { position: relative; }
.nav-links a { display: inline-block; }

.nav-links > li > a, .menu-btn { white-space: nowrap; font-size: 0.92rem; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  line-height: inherit;
}
.menu-btn:hover, .has-menu.is-active > .menu-btn { color: var(--accent); }

.chev {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.menu-btn[aria-expanded="true"] .chev { transform: translateY(1px) rotate(-135deg); }

.menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 264px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
  padding: 10px;
  list-style: none;
  display: none;
  z-index: 60;
}
.menu-btn[aria-expanded="true"] + .menu { display: block; }

.menu::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.menu a:hover { background: var(--surface); color: var(--accent); }

.nav-toggle { align-items: center; gap: 9px; }
.nav-toggle-bar {
  width: 16px; height: 2px;
  background: currentColor;
  position: relative;
  display: inline-block;
}
.nav-toggle-bar::before, .nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 2px;
  background: currentColor;
}
.nav-toggle-bar::before { top: -5px; }
.nav-toggle-bar::after  { top: 5px; }

/* ---------- Hero eyebrow (long capability line) ---------- */

.hero .eyebrow { max-width: 34em; line-height: 1.7; text-align: left; }

.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Capability strip ---------- */

.capstrip-wrap { background: var(--surface); padding: 22px 0; border-bottom: 1px solid var(--line); }

.capstrip {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
}
.capstrip li {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--tint-lavender);
  border-radius: 8px;
  padding: 7px 16px;
  white-space: nowrap;
}

/* ---------- Service divisions ---------- */

.division-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.division {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 5px solid var(--accent);
}
.division-tech { border-top-color: var(--slate); }
.division .tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.division-tech .tag { color: #111111; }
.division h3 { font-size: 1.6rem; }
.division > p { color: var(--slate); }
.division .btn { align-self: flex-start; margin-top: 8px; }

/* ---------- Tick lists ---------- */

.ticks { list-style: none; display: grid; gap: 9px; margin: 4px 0; flex: 1; }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 0.98rem;
  color: var(--ink);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.55em;
  width: 11px; height: 6px;
  border-left: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.division-tech .ticks li::before { border-color: var(--slate); }

.ticks-cols { grid-template-columns: repeat(3, 1fr); gap: 12px 26px; }

/* ---------- Feature grid ---------- */

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover { border-color: var(--black); }
.section-alt .feature { background: var(--canvas); }
.feature h3 { font-size: 1.1rem; margin-bottom: 8px; }
.feature p { color: var(--slate); font-size: 0.95rem; }

.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Exactly three cards: collapse 3 -> 1 so the tablet breakpoint never
   leaves a lone card on the final row. */
.card-grid-trio { grid-template-columns: repeat(3, 1fr); }
.section-foot { margin-top: 32px; }
.section-foot .more { font-weight: 700; color: var(--accent); }

/* ---------- Notice / disclosure block ---------- */

.notice {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  padding: 26px 30px;
  margin-top: 34px;
}
.notice-plain { background: var(--white); border-left-color: var(--slate); }
.notice-h {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.notice p { color: var(--ink); font-size: 0.98rem; }
.notice .ticks { margin-bottom: 14px; }

/* ---------- Split CTA (cross-sell) ---------- */

.split-cta {
  background: var(--surface);
  border-radius: 12px;
  padding: 46px 44px;
}
.split-cta .eyebrow { color: var(--accent); }
.split-cta .lede { margin: 14px 0 26px; color: var(--slate); }

/* ---------- Spec list (used by device cards) ---------- */

.spec { display: grid; grid-template-columns: 220px 1fr; gap: 14px 28px; }
.spec dt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.spec dd { color: var(--slate); font-size: 0.97rem; }

/* ---------- Prose ---------- */

.prose { max-width: 46em; }
.prose p { color: var(--slate); margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }

.prose-legal h2 {
  font-size: 1.4rem;
  margin: 40px 0 14px;
}
.prose-legal h2:first-of-type { margin-top: 24px; }
.prose-legal ul, .prose-legal ol { margin: 0 0 18px 22px; color: var(--slate); }
.prose-legal li { margin-bottom: 7px; }
.updated {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--slate);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* ---------- Contact ---------- */

/* Scoped to desktop deliberately: an unscoped rule here sits AFTER the
   900px block above and would override its single-column collapse at every
   width, leaving the form squeezed into half a phone screen. */
@media (min-width: 901px) {
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }
}
.contact-list .k { color: var(--accent); }
/* Long unbreakable values (the email address) must not push the row wider
   than the viewport on narrow phones. */
.contact-list li > span:last-child { min-width: 0; overflow-wrap: break-word; }
.addr-label { font-weight: 700; color: var(--ink); }
.fineprint { font-size: 0.86rem; color: var(--slate); margin-top: 24px; }
.hint { font-size: 0.84rem; color: var(--slate); margin-top: 6px; }

.form-title { font-size: 1.5rem; margin-bottom: 20px; }

/* ---------- Enquiry tabs ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.tab {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--slate);
  background: var(--canvas);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
}
.tab:hover { color: var(--accent); }
.tab[aria-selected="true"] {
  background: var(--white);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Forms ---------- */

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.field fieldset, fieldset.field { border: 0; }
.field legend { font-weight: 700; font-size: 0.92rem; margin-bottom: 9px; }

.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 13px 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  color: var(--ink);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1.25em), calc(100% - 15px) calc(1.25em);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field select:focus { outline: none; border-color: var(--accent); background-color: var(--white); }

.req { color: #E11900; }
.opt { font-weight: 400; color: var(--slate); font-size: 0.86rem; }

.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.checks label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.94rem;
  font-weight: 400;
  cursor: pointer;
}
.checks input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }

.botcheck { position: absolute; left: -9999px; opacity: 0; }

.field-error {
  font-size: 0.85rem;
  color: #E11900;
  margin-top: 6px;
  font-weight: 600;
  display: none;
}
.field-error.show { display: block; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #E11900; }

.form-status { min-height: 1.4em; }
.form-status.ok { color: var(--green-text); font-weight: 600; }
.form-status.err { color: #E11900; font-weight: 600; }

.lead-form button[type="submit"] { margin-top: 8px; }
.lead-form button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- Footer ---------- */

.footer-grid { align-items: flex-start; }
.footer-brand { max-width: 22em; display: grid; gap: 16px; }
.footer-address { font-style: normal; line-height: 1.8; color: #AFAFAF; font-size: 0.88rem; }
.footer-address a { color: #E2E2E2; }
.footer-address a:hover { color: var(--white); }
.footer-address .addr-label { color: #E2E2E2; font-weight: 600; }

.footer-cols { display: grid; grid-template-columns: repeat(4, auto); gap: 40px; }
.footer-h {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
}
.footer-links { flex-direction: column; gap: 9px; align-items: flex-start; }

.disclosure-inline {
  color: var(--slate);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 26px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {
  .nav-toggle { display: inline-flex; }
  .nav-wrap {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
  }
  .nav-wrap.open { display: block; }
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px 24px 26px;
  }
  .nav-links > li { width: 100%; }
  .nav-links > li > a, .menu-btn { padding: 11px 0; width: 100%; }
  .menu-btn { justify-content: space-between; }
  .menu {
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: var(--canvas);
    border-radius: 12px;
    margin: 2px 0 8px;
    padding: 6px;
  }
  .nav-cta { text-align: center; margin-top: 10px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
}

@media (max-width: 900px) {
  .division-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
  .card-grid-trio { grid-template-columns: 1fr; }
  .ticks-cols { grid-template-columns: 1fr 1fr; }
  .spec { grid-template-columns: 1fr; gap: 4px 0; }
  .spec dd { margin-bottom: 14px; }
  .split-cta { padding: 36px 28px; }
}

@media (max-width: 760px) {
  .capstrip { justify-content: flex-start; }
  .feature-grid { grid-template-columns: 1fr; }
  .card-grid-3, .card-grid-trio { grid-template-columns: 1fr; }
  .ticks-cols { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px; }
  .footer-cols { grid-template-columns: 1fr; }
  .tabs { gap: 6px; }
  .tab { font-size: 0.82rem; padding: 8px 14px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 18px; }
  /* Below this the 64px label column leaves too little room for the value. */
  .contact-list li { flex-direction: column; gap: 4px; }
  .contact-list .k { min-width: 0; }
  .notice { padding: 22px 20px; }
  .gateway { padding: 26px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link, .chev, .feature, .card { transition: none; }
}

/* ============================================================
   Spec revision: process steps, integrated-payments band,
   combined hero showcase, sticky-header anchor offset
   ============================================================ */

/* ---------- Sticky-header anchor offset (spec 15.2) ---------- */
/* The header is 70px and sticky, so an anchored element would land
   underneath it. Every element used as a URL target clears it. */
:target,
section[id],
.feature[id],
.step[id],
[role="tabpanel"][id] {
  scroll-margin-top: 96px;
}

/* ---------- Process steps ---------- */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: step;
}
.steps-5 { grid-template-columns: repeat(5, 1fr); }
.steps-6 { grid-template-columns: repeat(3, 1fr); }

.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 24px;
  position: relative;
}
.section-alt .step { background: var(--canvas); }

.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { color: var(--slate); font-size: 0.95rem; }

/* ---------- Integrated-payments band ---------- */

.band-integrated {
  background: var(--tint-lavender);
}
.band-integrated .eyebrow { color: var(--accent); }
.band-integrated .ticks li::before { border-color: var(--accent); }

.btn-outline {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}
.btn-outline:hover { background: var(--accent); color: var(--white); }

.sub-h {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 18px;
}

.section-tight { padding-top: 0; }

/* ---------- Two-column list split ---------- */

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.split-grid h2 { font-size: 1.6rem; margin-bottom: 18px; }

/* ---------- Optional-detail disclosure on forms ---------- */

.more-fields {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 18px;
  margin-bottom: 22px;
  background: var(--canvas);
}
.more-fields > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.94rem;
  padding: 14px 0;
  list-style-position: inside;
}
.more-fields[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.more-fields .field:last-child { margin-bottom: 18px; }

.hint-conditional {
  background: var(--tint-lavender);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
}

/* ---------- Footer description ---------- */

.footer-about { font-size: 0.88rem; line-height: 1.7; color: #AFAFAF; }

/* ---------- Hero showcase (payments + technology) ---------- */

.showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: center;
  justify-self: end;
  width: 100%;
  max-width: 420px;
}

.sc-card {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(14px);
  border-radius: 10px;
  padding: 16px;
  color: var(--white);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
}

.sc-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

.sc-terminal { grid-row: span 2; display: flex; flex-direction: column; }
.sc-screen {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 14px 12px;
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-bottom: 14px;
}
.sc-amt { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; }
.sc-ok {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #FFFFFF;
  color: var(--green-text);
  border-radius: 6px;
  padding: 3px 9px;
}
.sc-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: auto; }
.sc-keys i { height: 16px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); }

.sc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.sc-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.4); display: block; }
.sc-bar.w70 { width: 70%; }
.sc-bar.w55 { width: 55%; }
.sc-bar.w45 { width: 45%; }
.sc-bar.w40 { width: 40%; }
.sc-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.34); flex: none; }

.sc-field {
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom: 8px;
}
.sc-field.short { width: 60%; }
.sc-btn {
  margin-top: 10px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--white);
  color: var(--deep);
  border-radius: 8px;
  padding: 7px;
}

.sc-chart { display: flex; align-items: flex-end; gap: 6px; height: 62px; }
.sc-chart i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.45); }
.sc-chart i:nth-child(1) { height: 40%; }
.sc-chart i:nth-child(2) { height: 62%; }
.sc-chart i:nth-child(3) { height: 48%; }
.sc-chart i:nth-child(4) { height: 82%; }
.sc-chart i:nth-child(5) { height: 66%; }
.sc-chart i:nth-child(6) { height: 100%; background: var(--white); }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .steps, .steps-6 { grid-template-columns: repeat(2, 1fr); }
  /* 5 steps at 2-up would strand one on its own row; 3-up gives 3 + 2. */
  .steps-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .split-grid { grid-template-columns: 1fr; gap: 36px; }
  .showcase { justify-self: start; max-width: 380px; }
}

@media (max-width: 620px) {
  .steps, .steps-5, .steps-6 { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .showcase { grid-template-columns: 1fr; }
  .sc-terminal { grid-row: auto; }
}

/* ============================================================
   Terminal lineup and comparison table
   ============================================================ */

.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.device {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.device:hover { border-color: var(--black); }
.section-alt .device { background: var(--canvas); }

.device-brand {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.device h3 { font-size: 1.22rem; margin-bottom: 10px; }
.device > p { color: var(--slate); font-size: 0.95rem; flex: 1; margin-bottom: 18px; }

.device-spec {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.device-spec > div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: baseline; }
.device-spec dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}
.device-spec dd { font-size: 0.9rem; color: var(--ink); }

/* ---------- Comparison table ---------- */

/* Wide content scrolls inside its own container so the page body never does. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.cmp { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 0.93rem; }

.cmp th, .cmp td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cmp thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--surface);
  white-space: nowrap;
}
.cmp tbody th {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.cmp td { color: var(--slate); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover th, .cmp tbody tr:hover td { background: var(--canvas); }

@media (max-width: 1080px) {
  .device-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .device-grid { grid-template-columns: 1fr; }
  .device-spec > div { grid-template-columns: 96px 1fr; gap: 10px; }
}



/* ============================================================
   Motion
   Restrained to suit the design language: short distances, no
   bounce, opacity and transform only so nothing reflows (motion
   must never cost layout stability).

   Every rule here is scoped to .js, so with scripting unavailable
   the page renders fully visible and static. The whole block is
   switched off under prefers-reduced-motion at the end.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 0.7, 0.28, 1);
  --dur: 0.5s;
}

/* ---------- Scroll reveal ---------- */

.js :is(.section-head, .card, .feature, .device, .step, .division,
        .cta-band, .table-scroll, .split-cta, .split-grid > div,
        .notice, .contact-list li, .prose, .ticks-cols, .form-card) {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur) ease,
    transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.js :is(.section-head, .card, .feature, .device, .step, .division,
        .cta-band, .table-scroll, .split-cta, .split-grid > div,
        .notice, .contact-list li, .prose, .ticks-cols, .form-card).is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Hero entrance (above the fold, so on load not scroll) ---------- */

.js .hero-grid > div > *,
.js .showcase {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.7s var(--ease-out) forwards;
}
.js .hero-grid > div > *:nth-child(1) { animation-delay: 0.05s; }
.js .hero-grid > div > *:nth-child(2) { animation-delay: 0.13s; }
.js .hero-grid > div > *:nth-child(3) { animation-delay: 0.21s; }
.js .hero-grid > div > *:nth-child(4) { animation-delay: 0.29s; }
.js .showcase { animation-delay: 0.3s; }

.js .page-hero .wrap > * {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.65s var(--ease-out) forwards;
}
.js .page-hero .wrap > *:nth-child(1) { animation-delay: 0.04s; }
.js .page-hero .wrap > *:nth-child(2) { animation-delay: 0.11s; }
.js .page-hero .wrap > *:nth-child(3) { animation-delay: 0.18s; }
.js .page-hero .wrap > *:nth-child(4) { animation-delay: 0.25s; }
.js .page-hero .wrap > *:nth-child(5) { animation-delay: 0.32s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ---------- Capability strip: staggered wave ---------- */

.js .capstrip li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js .capstrip li.is-visible { opacity: 1; transform: none; }

/* ---------- Hero showcase: the payment completing ---------- */

.js .sc-chart i {
  transform-origin: bottom;
  animation: grow 0.7s var(--ease-out) backwards;
}
.js .sc-chart i:nth-child(1) { animation-delay: 0.75s; }
.js .sc-chart i:nth-child(2) { animation-delay: 0.83s; }
.js .sc-chart i:nth-child(3) { animation-delay: 0.91s; }
.js .sc-chart i:nth-child(4) { animation-delay: 0.99s; }
.js .sc-chart i:nth-child(5) { animation-delay: 1.07s; }
.js .sc-chart i:nth-child(6) { animation-delay: 1.15s; }

@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.js .sc-ok {
  opacity: 0;
  animation: stamp 0.45s var(--ease-out) 1.0s forwards;
}
@keyframes stamp {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}

.js .sc-btn {
  animation: sheen 4.5s ease-in-out 1.6s infinite;
}
@keyframes sheen {
  0%, 88%, 100% { transform: none; }
  92%           { transform: translateY(-2px); }
}

/* ---------- Header: lifts off the page once scrolled ---------- */

.site-header {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-stuck {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ---------- Hover: purposeful, not decorative ---------- */

/* Hover is an affordance, not decoration. Movement says "this leads
   somewhere", so only the nine cards that actually contain a link get
   it. The other 100+ are informational and stay put -- lifting them
   would promise a click that isn't there. Each remaining type gets a
   cue drawn from what the card is for. */

.card, .feature, .device, .step, .division {
  transition: border-color 0.2s ease, transform 0.2s var(--ease-out),
              background-color 0.2s ease;
}

/* 1. Cards that lead somewhere: lift and firm up the edge. */
.card:has(a), .division {
  cursor: default;
}
.card:has(a):hover, .division:hover {
  transform: translateY(-4px);
  border-color: var(--black);
}

.more {
  display: inline-block;
  transition: transform 0.2s var(--ease-out), color 0.18s ease;
}
.card:has(a):hover .more, .more:hover { transform: translateX(4px); }

/* 2. Device cards carry no imagery, so the cue is the edge alone.
      No lift -- these are for comparing specs, not clicking. */
.device:hover { border-color: var(--ink); }

/* 3. Steps: mark your place in the sequence rather than move the card. */
.step-n { transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease; }
.step:hover .step-n { transform: scale(1.12); }
.step:hover { border-color: var(--ink); }

/* 4. Feature grids are dense -- a dozen at a time -- so the cue is a rule
      drawn under the heading. Quiet enough to scan past. */
.feature h3 { position: relative; display: inline-block; }
.feature h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.28s var(--ease-out);
}
.feature:hover h3::after { width: 100%; }
.feature:hover { border-color: var(--ink); }

/* 5. Everything else: informational. The edge firms up, nothing moves. */
.card:not(:has(a)):hover { border-color: var(--ink); }

.btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }

.capstrip li { transition: background-color 0.2s ease, color 0.2s ease; }
.capstrip li:hover { background: var(--accent); color: var(--white); }

/* ---------- Dropdown menu: slides rather than snaps ---------- */

/* Desktop only: below the breakpoint the submenu is a block in the
   mobile list, where visibility:hidden would still occupy space. */
@media (min-width: 1301px) {
  .js .menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s var(--ease-out), visibility 0.18s;
  }
  .js .menu-btn[aria-expanded="true"] + .menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* ---------- Tab panels fade in ---------- */

.js .tabpanel:not([hidden]) { animation: fade 0.3s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduced motion: everything above is switched off ---------- */

@media (prefers-reduced-motion: reduce) {
  .js :is(.section-head, .card, .feature, .device, .step, .division,
          .cta-band, .table-scroll, .split-cta, .split-grid > div,
          .notice, .contact-list li, .prose, .ticks-cols, .form-card,
          .capstrip li, .hero-grid > div > *, .showcase,
          .page-hero .wrap > *) {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .js .sc-chart i, .js .sc-ok, .js .sc-btn { animation: none; opacity: 1; }
  .js .menu { transition: none; }
  .card:has(a):hover, .division:hover { transform: none; }
  .step:hover .step-n { transform: none; }
  .card:has(a):hover .more, .more:hover { transform: none; }
  .feature:hover h3::after { transition: none; }
  .js .tabpanel:not([hidden]) { animation: none; }
  .site-header { transition: none; }
}

/* ============================================================
   Split sections

   The service pages were nine consecutive blocks of the same shape --
   eyebrow, heading, paragraph, three-column list -- with the text
   column ending around 45% and the right half of every section empty.
   These alternate the composition and put an illustration in the space
   that was going unused.
   ============================================================ */

.sec-split .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 64px;
  align-items: center;
}

/* The section has several text children plus one figure. Without pinning
   the columns explicitly they flow in source order and the figure drops
   to a second row, which is not the intent. Text stacks in one column,
   the figure spans the rows of the other. */
.sec-split .wrap > *:not(.sec-art) { grid-column: 1; }
.sec-split .sec-art { grid-column: 2; grid-row: 1 / -1; align-self: center; }

/* Every other one flips, so scrolling alternates left and right. */
.sec-split.is-flipped .wrap > *:not(.sec-art) { grid-column: 2; }
.sec-split.is-flipped .sec-art { grid-column: 1; }

.sec-split .section-head { margin-bottom: 26px; }
.sec-split .ticks-cols { grid-template-columns: 1fr 1fr; }

.sec-art {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-alt .sec-art { background: var(--white); }
.sec-art img { width: 100%; height: auto; display: block; }

/* The illustration drifts in from the side it sits on -- but only in the
   two-column layout. Stacked on a phone that sideways offset pushes the
   figure past the viewport while it is still waiting to be revealed,
   which shows up as horizontal scroll, so there it rises instead. */
.js .sec-art {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
}
@media (min-width: 901px) {
  .js .sec-art { transform: translateX(24px); }
  .js .sec-split.is-flipped .sec-art { transform: translateX(-24px); }
}
.js .sec-art.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .sec-split .wrap { grid-template-columns: 1fr; gap: 30px; }
  /* One column: everything returns to source order, illustration last.
     These selectors mirror the desktop ones exactly -- :not(.sec-art)
     counts toward specificity, so a simpler override loses and the
     flipped sections keep a phantom second column. */
  .sec-split .wrap > *:not(.sec-art),
  .sec-split.is-flipped .wrap > *:not(.sec-art),
  .sec-split .sec-art,
  .sec-split.is-flipped .sec-art {
    grid-column: 1;
    grid-row: auto;
  }
  .sec-split .ticks-cols { grid-template-columns: 1fr; }
  .sec-art { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .sec-art { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Hero channel switcher
   Lets a visitor find their own way of taking payments in the
   first screen, instead of reading a paragraph that lists all four.
   ============================================================ */

.channels { justify-self: end; width: 100%; max-width: 420px; }

.channel-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.channel-tab {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  /* Background eases, text colour snaps. If both cross-fade together the
     label passes through a low-contrast midpoint against its own
     background; switching the colour immediately avoids that. */
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.channel-tab:hover { color: var(--white); background: rgba(255, 255, 255, 0.16); }
.channel-tab[aria-selected="true"] {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* WCAG 2.2.2 requires a way to stop content that updates on its own, and
   pausing on hover does not help a keyboard or touch user -- so the
   control has to exist. It does not have to announce itself: no chrome at
   rest, and it resolves on hover or focus. */
.channel-pause {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.18s ease, background-color 0.18s ease;
}
.channel-pause:hover,
.channel-pause:focus-visible,
.channels:hover .channel-pause {
  opacity: 1;
  background: rgba(255, 255, 255, 0.16);
}
/* Two bars = pause; a single triangle once paused. */
.pause-icon {
  width: 8px; height: 10px;
  border-left: 2px solid var(--white);
  border-right: 2px solid var(--white);
}
.channel-pause[aria-pressed="true"] {
  opacity: 0.85;
}
.channel-pause[aria-pressed="true"] .pause-icon {
  width: 0; height: 0;
  border: 5px solid transparent;
  border-left: 9px solid var(--white);
  border-right: 0;
}

/* The stage is taller than any single panel, so switching -- which also
   happens on its own every few seconds -- never shifts the page. Measured
   panel heights are 317-378px; 390 clears the tallest. */
.channel-stage { position: relative; min-height: 390px; }
.channel-panel { animation: fade 0.35s ease; }

.sc-wide { width: 100%; }
.sc-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
}

.sc-dialpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.sc-dialpad i { height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); }

.sc-schedule { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.sc-schedule li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
}
.sc-schedule b { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-schedule .done { color: #9BE8C4; }
.sc-schedule .due { color: var(--accent-on-dark); }

@media (max-width: 900px) {
  .channels { justify-self: start; max-width: 440px; }
  /* Stacked the panels are narrower and so taller; still pinned, since the
     rotation would otherwise push the page around under the reader. */
  .channel-stage { min-height: 430px; }
}

@media (prefers-reduced-motion: reduce) {
  .channel-panel { animation: none; }
}

/* ============================================================
   Terminal filters
   ============================================================ */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  margin-bottom: 22px;
}
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin-right: 4px;
}

.chip {
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.filter-count { font-size: 0.86rem; color: var(--slate); margin-left: auto; }

/* Filtered-out rows collapse rather than vanish abruptly. */
.cmp tbody tr { transition: opacity 0.18s ease; }
.cmp tbody tr[hidden] { display: none; }

.cmp-empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--slate);
}

@media (max-width: 760px) {
  .filters { gap: 10px 16px; }
  .filter-count { margin-left: 0; width: 100%; }
}

/* ============================================================
   "What do you need?" chooser
   ============================================================ */

.chooser {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 34px 32px;
}
.chooser-q {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.chooser-opts { display: flex; flex-wrap: wrap; gap: 10px; }

.chooser-opt {
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 20px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s var(--ease-out);
}
.chooser-opt:hover {
  border-color: var(--accent);
  background: var(--surface);
  transform: translateY(-2px);
}

.chooser-step { animation: fade 0.28s ease; }

.chooser-back {
  margin-top: 22px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slate);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.chooser-back:hover { color: var(--accent); }

@media (max-width: 620px) {
  .chooser { padding: 26px 20px; }
  .chooser-opts { flex-direction: column; }
  .chooser-opt { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .chooser-step { animation: none; }
  .chooser-opt:hover { transform: none; }
}

/* ============================================================
   Payment journey (scroll-driven)

   The steps scroll normally while the diagram stays pinned beside
   them and highlights the stage being read. Sticky positioning does
   the pinning; script only sets which node is active. With no script
   every node simply renders in its resting state, which still reads
   correctly as a diagram.
   ============================================================ */

.journey-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

.journey-steps { display: grid; gap: 64px; padding: 8vh 0; }

.jstep { max-width: 30em; transition: opacity 0.3s ease; }
.jstep-n {
  display: block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 10px;
}
.jstep h3 { font-size: 1.3rem; margin-bottom: 10px; }
.jstep p { color: var(--slate); }

/* Reading position is shown by dimming the others, but only where the
   diagram is actually pinned alongside. */
@media (min-width: 901px) {
  .js .journey-steps .jstep { opacity: 0.4; }
  .js .journey-steps .jstep.is-current { opacity: 1; }
}

.journey-visual { position: sticky; top: 110px; }

.journey-pipe { display: grid; gap: 0; }

.jnode {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s var(--ease-out);
}
.jnode-tag {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 8px;
}
.jnode-body { display: grid; gap: 3px; }
.jnode-amt { font-weight: 700; font-size: 1.02rem; }
.jnode-sub { font-size: 0.84rem; color: var(--slate); }

.jnode.is-active {
  border-color: var(--accent);
  transform: translateX(6px);
  box-shadow: -3px 0 0 0 var(--accent);
}
.jnode.is-active .jnode-tag { color: var(--accent); }

/* Connector between nodes; fills as the payment progresses. */
.jlink { height: 30px; display: flex; justify-content: center; }
.jlink i {
  width: 2px;
  height: 100%;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.jlink i::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background: var(--accent);
  transition: height 0.4s var(--ease-out);
}
.jlink.is-filled i::after { height: 100%; }

.journey-note { margin-top: 16px; font-size: 0.78rem; color: var(--slate); }

@media (max-width: 900px) {
  .journey-grid { grid-template-columns: 1fr; gap: 32px; }
  /* Stacked, the diagram cannot sit beside the text, so it leads instead. */
  .journey-visual { position: static; order: -1; }
  .journey-steps { gap: 34px; padding: 0; }
  .jstep { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jnode, .jstep, .jlink i::after { transition: none; }
  .jnode.is-active { transform: none; }
}

/* ============================================================
   Animated hero field

   Payment objects drifting behind the hero: cards, terminals,
   receipts, a chart, a contactless tap, an approval tick.

   The hard constraint is legibility. Hero text is white on black and
   must stay that way, so every element sits at very low opacity and a
   scrim is laid over the whole field beneath the text. Motion is slow
   and non-repeating enough not to pull the eye off the headline.
   Drawn in CSS -- no extra requests, nothing to license, and it scales
   to any screen without banding the way a video or GIF would.
   ============================================================ */

.hero, .page-hero { position: relative; isolation: isolate; }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 2; }

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hb { position: absolute; inset: 0; }

/* Faint ledger grid, static. */
.hb-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 40%, transparent 100%);
}

/* Slow accent bloom, so the field is not uniformly flat. */
.hb-glow {
  background:
    radial-gradient(42% 52% at 74% 26%, rgba(91, 46, 255, 0.55), transparent 70%),
    radial-gradient(36% 44% at 20% 78%, rgba(91, 46, 255, 0.28), transparent 72%),
    radial-gradient(28% 34% at 46% 58%, rgba(0, 184, 230, 0.14), transparent 70%);
  animation: bloom 22s ease-in-out infinite alternate;
}
@keyframes bloom {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(3%, 2%, 0) scale(1.12); opacity: 1; }
}

/* Guarantees contrast for the copy regardless of what drifts behind it. */
.hb-scrim {
  background:
    linear-gradient(100deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 42%, rgba(0,0,0,0.35) 100%);
}

/* ---------- drifting objects ---------- */

/* Positions live here rather than in style attributes. The site sends a
   strict CSP with no 'unsafe-inline', which blocks style attributes
   outright -- so the inline version of this silently collapsed every
   object into the same corner in production while looking correct
   locally, where the dev server sends no CSP. */
.hb-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: 0.95;
  transform: scale(var(--s, 1));
  animation: drift 26s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  will-change: transform;
}
.hb-item:nth-of-type(1) { --x:  8%; --y: 18%; --d:   0s; --s: 0.90; }
.hb-item:nth-of-type(2) { --x: 74%; --y: 12%; --d:  -6s; --s: 1.00; }
.hb-item:nth-of-type(3) { --x: 88%; --y: 58%; --d: -11s; --s: 0.85; }
.hb-item:nth-of-type(4) { --x: 20%; --y: 72%; --d:  -3s; --s: 0.95; }
.hb-item:nth-of-type(5) { --x: 60%; --y: 78%; --d: -14s; --s: 0.80; }
.hb-item:nth-of-type(6) { --x: 44%; --y: 34%; --d:  -9s; --s: 0.60; }
.hb-item:nth-of-type(7) { --x: 32%; --y:  8%; --d: -17s; --s: 0.75; }
.hb-item:nth-of-type(8) { --x: 94%; --y: 30%; --d: -20s; --s: 0.60; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) rotate(-4deg) scale(var(--s, 1)); }
  to   { transform: translate3d(26px, -34px, 0) rotate(5deg) scale(var(--s, 1)); }
}

/* Card */
.hb-card {
  width: 128px; height: 82px;
  border: 2px solid rgba(255,255,255,0.42);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.hb-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 18px;
  height: 12px;
  background: rgba(255,255,255,0.16);
}
.hb-card::after {
  content: "";
  position: absolute;
  left: 12px; bottom: 12px;
  width: 26px; height: 18px;
  border-radius: 4px;
  background: rgba(143, 116, 255, 0.75);
}

/* Terminal */
.hb-term {
  width: 96px; height: 132px;
  border: 2px solid rgba(255,255,255,0.40);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}
.hb-term::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 16px;
  height: 40px;
  border-radius: 5px;
  background: rgba(255,255,255,0.14);
}
.hb-term::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 16px;
  height: 44px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,0.16) 0 18px, transparent 18px 26px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.16) 0 10px, transparent 10px 18px);
}

/* Receipt */
.hb-receipt {
  width: 84px; height: 116px;
  border: 2px solid rgba(255,255,255,0.38);
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(to bottom, transparent 16px, rgba(255,255,255,0.14) 16px 18px, transparent 18px) ,
    linear-gradient(to bottom, transparent 34px, rgba(255,255,255,0.14) 34px 36px, transparent 36px),
    linear-gradient(to bottom, transparent 52px, rgba(255,255,255,0.14) 52px 54px, transparent 54px),
    linear-gradient(to bottom, transparent 76px, rgba(143,116,255,0.7) 76px 80px, transparent 80px);
}

/* Reporting bars */
.hb-chart {
  width: 112px; height: 74px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.hb-chart::before, .hb-chart::after {
  content: "";
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgba(255,255,255,0.32);
}
.hb-chart::before { height: 52%; }
.hb-chart::after  { height: 88%; background: rgba(143,116,255,0.7); }

/* Approval tick */
.hb-check {
  width: 58px; height: 58px;
  border: 2px solid rgba(143,116,255,0.75);
  border-radius: 50%;
}
.hb-check::after {
  content: "";
  position: absolute;
  left: 15px; top: 20px;
  width: 22px; height: 11px;
  border-left: 3px solid rgba(255,255,255,0.5);
  border-bottom: 3px solid rgba(255,255,255,0.5);
  transform: rotate(-45deg);
}

/* Contactless waves */
.hb-tap { width: 60px; height: 60px; }
.hb-tap::before, .hb-tap::after {
  content: "";
  position: absolute;
  left: 6px; top: 6px;
  border: 2px solid rgba(255,255,255,0.38);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}
.hb-tap::before { width: 24px; height: 24px; }
.hb-tap::after  { width: 44px; height: 44px; border-color: rgba(143,116,255,0.6) transparent transparent rgba(143,116,255,0.6); }

@media (max-width: 760px) {
  /* Fewer objects on a phone: less paint, and the copy takes the width. */
  .hb-item:nth-of-type(n + 5) { display: none; }
  .hb-scrim { background: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.72)); }
}

@media (prefers-reduced-motion: reduce) {
  .hb-glow, .hb-item { animation: none; }
}

/* Photographs sit in the same frame as the illustrations so the two do
   not read as different systems: identical box, cropped to the same
   ratio rather than letterboxed inside the padding. */
.sec-art-photo { padding: 0; overflow: hidden; }
.sec-art-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 420 / 300;
  object-fit: cover;
  display: block;
}


/* ---------- Hero photography ---------- */
/* The photograph sits at the very back, desaturated and dimmed, with the
   drawn field over it and the scrim over both. Selected by class because
   the CSP forbids style attributes. */

.hb-photo { background-size: cover; background-position: center; }
.hb-has-photo .hb-photo { filter: grayscale(0.25) brightness(0.86); }
.hb-has-photo .hb-grid { opacity: 0.5; }
.hb-has-photo .hb-scrim {
  background: linear-gradient(100deg,
    rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.74) 46%, rgba(0,0,0,0.36) 100%);
}

.hb-home       .hb-photo { background-image: url("/assets/photos/hero-home.jpg"); }
.hb-payments   .hb-photo { background-image: url("/assets/photos/hero-payments.jpg"); }
.hb-pos        .hb-photo { background-image: url("/assets/photos/hero-pos.jpg"); }
.hb-online     .hb-photo { background-image: url("/assets/photos/hero-online.jpg"); }
.hb-tech       .hb-photo { background-image: url("/assets/photos/hero-tech.jpg"); }
.hb-integrated .hb-photo { background-image: url("/assets/photos/hero-integrated.jpg"); }
.hb-industries .hb-photo { background-image: url("/assets/photos/hero-industries.jpg"); }
.hb-about      .hb-photo { background-image: url("/assets/photos/hero-about.jpg"); }
.hb-support    .hb-photo { background-image: url("/assets/photos/hero-support.jpg"); }

@media (max-width: 760px) {
  .hb-has-photo .hb-scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.86), rgba(0,0,0,0.74));
  }
}

/* ---------- Drawn objects over a photograph ---------- */
/* Behind the scrim they were invisible; above it they read, but they can
   also lift the luminance behind the headline. So on photo heroes they
   are kept to the right of the text column and given a dark rim so they
   separate from a busy photograph without needing more brightness. */

.hb-has-photo .hb-item {
  opacity: 0.9;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
}
/* All beyond 64%: the copy occupies roughly the left half, and measuring
   showed objects at 52-58% dragged worst-case contrast behind the
   headline from 8-12:1 down to 3.8:1, below even AA. */
.hb-has-photo .hb-item:nth-of-type(1) { --x: 66%; --y: 14%; --s: 0.85; }
.hb-has-photo .hb-item:nth-of-type(2) { --x: 84%; --y: 46%; --s: 0.95; }
.hb-has-photo .hb-item:nth-of-type(3) { --x: 93%; --y: 12%; --s: 0.8; }
.hb-has-photo .hb-item:nth-of-type(4) { --x: 70%; --y: 74%; --s: 0.9; }
.hb-has-photo .hb-item:nth-of-type(5) { --x: 90%; --y: 78%; --s: 0.8; }
.hb-has-photo .hb-item:nth-of-type(6) { --x: 78%; --y: 30%; --s: 0.55; }
.hb-has-photo .hb-item:nth-of-type(7) { --x: 64%; --y: 54%; --s: 0.7; }
.hb-has-photo .hb-item:nth-of-type(8) { --x: 97%; --y: 62%; --s: 0.5; }

/* The home hero has copy on the left and the channel switcher on the
   right, so there is no empty space for drifting objects -- thinning them
   was not enough, they still crossed the mock screens and read as
   clutter. The switcher is the visual interest here; the photograph and
   bloom carry the rest. */
.hb-home .hb-item { display: none; }

@media (max-width: 900px) {
  /* Stacked, the copy uses the full width, so the objects retreat to the
     edges and thin out. */
  .hb-has-photo .hb-item:nth-of-type(n + 4) { display: none; }
  .hb-has-photo .hb-item { opacity: 0.55; }
}

/* ---------- Seeded content inside the hero channel panels ---------- */
/* Grey placeholder bars read as an unfinished page. These are mock screens
   with plausible values, labelled as illustrative. The card number is the
   well-known 4242 test value rather than anything resembling a real one. */

.sc-lines { display: grid; gap: 7px; margin: 12px 0; }
.sc-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sc-lines dt {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.sc-lines dd { margin: 0; font-size: 0.84rem; font-weight: 600; }

.sc-total {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 9px;
  margin-top: 3px;
}
.sc-total dt { color: rgba(255, 255, 255, 0.85); }
.sc-total dd { font-size: 1rem; }

.sc-input {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  display: grid;
  gap: 2px;
}
.sc-input span {
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.sc-input b { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; }
.sc-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-input-row .sc-input { margin-bottom: 8px; }

/* A cursor mid-entry, so the phone panel reads as being keyed in. */
.sc-caret {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  background: var(--white);
  margin-left: 2px;
  vertical-align: -0.12em;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.sc-dialpad i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 600;
  font-style: normal;
  color: rgba(255, 255, 255, 0.8);
}

.channel-disclaimer {
  margin-top: 10px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .sc-caret { animation: none; }
}