@charset "UTF-8";
@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/league-gothic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/league-gothic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* =====================================================================
   PHASE 3 PAYMENTS — DESIGN SYSTEM
   Brand guidelines are law. Gold #9D853F, Charcoal #3A3A3A, White.
   Headlines League Gothic. Body Helvetica Neue. No second accent.
   Gold is never a page background and never sits behind the logo.
   Charcoal is clean — no grain, no speckle, no noise overlay.
   ===================================================================== */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root {
  /* Brand — exact */
  --gold: #9D853F;
  --charcoal: #3A3A3A;
  --white: #FFFFFF;

  /* Gold, working variants. Used for states and hairlines only. */
  --gold-deep: #7A662E;
  --gold-soft: #C4B07A;
  --gold-tint: #F2EDDF;
  --gold-line: #D9CDA8;
  --gold-btn: #7E6A32;
  --gold-on-dark: #D4C08A;
  --tag-ink: #5A4A22;

  /* Warm neutral surfaces */
  --paper: #FBFAF7;
  --paper-warm: #F5F2EA;
  --mist: #EDE9DF;
  --hairline: #E4DFD2;
  --hairline-soft: #EFEBE1;

  /* Ink */
  --ink: #2E2E2E;
  --ink-body: #4A4744;
  --ink-muted: #736E67;
  --ink-faint: #6F6A62;

  /* On charcoal */
  --on-dark: #F7F5F0;
  --on-dark-muted: #C9C4BB;
  --on-dark-line: rgba(247, 245, 240, .16);

  /* Signal — used ONLY for engine loss/keep semantics, not as brand accent */
  --loss: #A33A2A;
  --loss-tint: #F7ECE9;

  /* Type */
  --display: "League Gothic", "Haettenschweiler", "Arial Narrow", "Oswald", sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Space */
  --wrap: 1160px;
  --wrap-narrow: 780px;
  --gut: 24px;
  --sec: 108px;

  /* Radius — concentric */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow: 0 1px 2px rgba(58,58,58,.04), 0 12px 32px -18px rgba(58,58,58,.22);
  --shadow-lift: 0 2px 4px rgba(58,58,58,.05), 0 24px 56px -24px rgba(58,58,58,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 200ms;
}

@media (max-width: 900px) { :root { --sec: 68px; --gut: 20px; } }

/* ---------- 2. RESET ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-body);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* The hidden attribute must beat any display rule we set on a component.
   Without this, `display:flex` silently defeats [hidden] and panels that
   should be conditional are always on screen. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- 3. TYPE -------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  color: var(--charcoal);
  line-height: .92;
  letter-spacing: .004em;
  text-transform: uppercase;
  margin: 0 0 .4em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(52px, 8.2vw, 104px); letter-spacing: .002em; }
h2, .h2 { font-size: clamp(38px, 5.4vw, 68px); }
h3, .h3 { font-size: clamp(26px, 3vw, 36px); line-height: .96; }

/* Sub-headings inside cards stay in body face — League Gothic all-caps
   does not belong at small sizes in sentence-shaped copy. */
h4, .h4, h3.h4 {
  font-family: var(--body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--charcoal);
  text-transform: none;
  margin: 0 0 .5em;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 62ch;
}

.small { font-size: 14.5px; line-height: 1.55; }
.fine {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 68ch;
}

.eyebrow {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 18px;
  display: block;
}
.eyebrow--dark { color: var(--gold-on-dark); }

/* The one word that turns. Gold underline, never a gold fill. */
.u-gold {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 5px;
  padding-bottom: 2px;
}
h1 .u-gold { background-size: 100% 7px; }

.gold { color: var(--gold-deep); }
.dark .gold, .dark .u-gold + span { color: var(--gold-on-dark); }

/* ---------- 4. LAYOUT ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: var(--wrap-narrow); margin-left: auto; margin-right: auto; }

section { padding: var(--sec) 0; position: relative; }

/* The header is sticky, so anchor jumps must clear it. */
:target, section[id], [id] { scroll-margin-top: 96px; }
section.tight { padding: calc(var(--sec) * .6) 0; }

.paper { background: var(--paper); }
.paper-warm { background: var(--paper-warm); }
.mist { background: var(--mist); }

/* Charcoal. Flat. Clean. No texture. */
.dark { background: var(--charcoal); color: var(--on-dark); --gold: var(--gold-on-dark); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--on-dark); }
.dark p { color: var(--on-dark-muted); }
.dark .lede { color: #DCD8D0; }
.dark .fine { color: #C9C4BB; }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.rule-gold { height: 3px; width: 56px; background: var(--gold); border: 0; margin: 0 0 26px; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-wide { grid-template-columns: 1.05fr .95fr; }

@media (max-width: 940px) {
  .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split-wide { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: 14px; }
.center { text-align: center; }
.center .lede, .center .fine { margin-left: auto; margin-right: auto; }

/* ---------- 5. BUTTONS ----------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-gold { background: var(--gold-btn); color: #fff; }
.btn-gold:hover { background: #645426; }

.btn-dark { background: var(--charcoal); color: var(--on-dark); }
.btn-dark:hover { background: #262626; }

.btn-ghost { background: transparent; color: var(--charcoal); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--charcoal); background: var(--paper-warm); }

.dark .btn-ghost { color: var(--on-dark); border-color: var(--on-dark-line); }
.dark .btn-ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); }

.btn-lg { min-height: 60px; padding: 17px 34px; font-size: 17px; }

.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 16px;
  color: var(--charcoal);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow:hover { gap: 12px; color: var(--gold-deep); }
.dark .link-arrow { color: var(--on-dark); }
.dark .link-arrow:hover { color: var(--gold-on-dark); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- 6. SURFACES ---------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 30px;
}
.card-pad-lg { padding: 38px; }
.card-lift { box-shadow: var(--shadow); border-color: var(--hairline-soft); }
.card-gold { border-color: var(--gold-line); background: #FDFCF8; }
.dark .card {
  background: #444444;
  border-color: var(--on-dark-line);
}

a.card { text-decoration: none; display: block; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.card:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--shadow); }
.dark a.card:hover { border-color: var(--gold); transform: translateY(-2px); }

/* Homepage offers: pin each CTA to the bottom of the equal-height cell. */
#what-we-do a.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#what-we-do a.card .mt-s {
  margin-top: auto;
  padding-top: 14px;
}

/* Homepage "why one team": cards align to the headline; buttons share width. */
#why-one-team .split-wide {
  align-items: start;
}
#why-one-team .btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#why-one-team .btns .btn {
  width: 100%;
}
@media (max-width: 620px) {
  #why-one-team .btns {
    grid-template-columns: 1fr;
  }
}

#point-of-sale .system {
  height: 100%;
}

#annual-cost .split-wide {
  align-items: start;
}
#annual-cost .btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#annual-cost .btns .btn {
  width: 100%;
}
@media (max-width: 620px) {
  #annual-cost .btns {
    grid-template-columns: 1fr;
  }
}

#phase-3-digital .split-wide {
  align-items: start;
}
#phase-3-digital .btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#phase-3-digital .btns .btn {
  width: 100%;
}
@media (max-width: 620px) {
  #phase-3-digital .btns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  #point-of-sale .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  #point-of-sale .btns .btn {
    width: 100%;
  }
}

.tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tag-ink);
  background: var(--gold-tint);
  border-radius: 999px;
  padding: 5px 11px;
}
.dark .tag { color: var(--gold-on-dark); background: #3A3428; }

/* Huge numbers, tiny labels, air. */
.stat .n {
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 62px);
  line-height: .88;
  color: var(--charcoal);
  text-transform: uppercase;
  display: block;
}
.dark .stat .n { color: var(--on-dark); }
.stat .l {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.dark .stat .l { color: var(--on-dark-muted); }

/* ---------- 7. HEADER ------------------------------------------------ */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--charcoal); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.topbar {
  background: var(--charcoal);
  color: var(--on-dark-muted);
  font-size: 13px;
  padding: 8px 0;
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.topbar a { color: var(--on-dark); font-weight: 700; text-decoration: none; }
.topbar a:hover { color: var(--gold-on-dark); }
.topbar .hide-sm { display: inline; }
@media (max-width: 720px) { .topbar .hide-sm { display: none; } .topbar .wrap { justify-content: center; } }

.head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.head .wrap { display: flex; align-items: center; gap: 20px; min-height: 74px; }

.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; padding: 6px 0; }

/* ---------- WORDMARK ------------------------------------------------- *
   PHASE 3 │ PAYMENTS — matching the Phase 3 Benefits lockup.
   Company name in charcoal, gold rule, division in gold.
   Never recoloured, never boxed, never on a gold field.
   Clear space either side is one --mark-size. Minimum size ~16px.        */

.mark {
  --mark-size: 20px;
  display: inline-flex;
  align-items: center;
  font-family: var(--body);
  font-size: var(--mark-size);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.mark-name {
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--charcoal);
}

.mark-rule {
  width: 2px;
  height: .95em;
  margin: 0 .56em;
  background: var(--gold);
  flex: 0 0 auto;
}

.mark-unit {
  font-weight: 700;
  letter-spacing: .145em;
  /* the trailing letter-space would otherwise unbalance the lockup */
  margin-right: -.145em;
  color: var(--gold);
}

/* Reverse: on charcoal the name goes white, the gold holds. */
.dark .mark-name,
.foot .mark-name { color: var(--on-dark); }

.brand { border-radius: var(--r-sm); }
.brand:focus-visible { outline-offset: 6px; }

@media (max-width: 400px) {
  .head .mark { --mark-size: 17px; }
}

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > * { position: relative; }
.nav a, .nav button.navtop {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 11px;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  border-radius: var(--r-sm);
}
/* The wordmark is a wide lockup, so nothing in the bar may wrap. */
.head .btn { white-space: nowrap; }
.head-cta .btn { padding: 12px 18px; font-size: 15px; min-height: 46px; }
.nav a:hover, .nav button.navtop:hover { color: var(--gold-deep); background: var(--paper-warm); }
.nav a[aria-current="page"] { color: var(--gold-deep); }
.nav .caret { width: 9px; height: 9px; opacity: .55; transition: transform var(--dur) var(--ease); }
.nav [aria-expanded="true"] .caret { transform: rotate(180deg); }

.drop {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 10px;
  display: none;
  z-index: 120;
}
.drop[data-open="true"] { display: block; }
.drop a { display: block; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 600; }
.drop a span { display: block; font-weight: 400; font-size: 13px; color: var(--ink-muted); margin-top: 2px; }

/* The hub link for the section. The menu's own top row is a button, so
   without this the section landing page has no route from the header. */
.drop .drop-all {
  color: var(--gold-deep);
  border-bottom: 1px solid var(--hairline);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  margin-bottom: 6px;
}

/* Ten industries stacked is a list nobody scrolls. Two columns of five
   keeps the whole section visible in one glance. */
.drop-wide { min-width: 460px; }
.drop-wide .drop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }

@media (max-width: 1200px) {
  /* The desktop menus are gone below this width; the burger takes over. */
  .drop-wide { min-width: 300px; }
  .drop-wide .drop-list { grid-template-columns: 1fr; }
}

.head-cta { display: flex; align-items: center; gap: 10px; margin-left: 10px; }
.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hairline); border-radius: var(--r-sm); cursor: pointer;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--charcoal); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--charcoal); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* Collapse to the burger before the bar gets tight. The wordmark plus five
   nav items plus two buttons needs about 1200px to sit on one line. */
@media (max-width: 1200px) {
  .nav, .head-cta { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 1320px) and (min-width: 1201px) {
  .head-cta .btn-ghost { display: none; }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--hairline);
  background: #fff;
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  padding: 14px var(--gut) 30px;
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav details { border-bottom: 1px solid var(--hairline-soft); }
.mobile-nav summary {
  list-style: none; cursor: pointer;
  padding: 15px 2px; font-weight: 700; font-size: 17px; color: var(--charcoal);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; font-size: 20px; color: var(--gold-deep); }
.mobile-nav details[open] summary::after { content: "\2212"; }
.mobile-nav .sub a { display: block; padding: 11px 2px 11px 14px; font-size: 15.5px; text-decoration: none; color: var(--ink-body); border-left: 2px solid var(--hairline); }
.mobile-nav > a { display: block; padding: 15px 2px; font-weight: 700; font-size: 17px; color: var(--charcoal); text-decoration: none; border-bottom: 1px solid var(--hairline-soft); }
.mobile-nav .btns { margin-top: 22px; }
.mobile-nav .btn { width: 100%; }

/* ---------- 8. HERO -------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 62%, var(--white) 100%);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px);
}
.hero h1 { margin-bottom: .3em; }

/* Each line of the homepage headline is its own block, matching the
   intended breaks. A long line wraps inside that block rather than
   overlapping the hero card or overflowing the viewport. */
.hero h1 .hl { display: block; }
.hero .lede { font-size: clamp(19px, 2.3vw, 23px); }

/* Evidence, not fine print. These four numbers are the strongest thing on
   the page after the headline, and they were previously set at 13px in
   muted grey where nobody read them. Still secondary to the buttons: no
   bold, no colour, just full-strength ink and a rule to separate it. */
.hero-proof {
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: clamp(15px, 1.5vw, 16.5px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}

/* The price line inside the hero card. Prominent enough to be the reason
   somebody keeps reading, quiet enough that the card is not an advert. */
.card-price {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.hero-inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
@media (max-width: 940px) { .hero-inner { grid-template-columns: 1fr; gap: 36px; } }

.hero-sm { padding: clamp(44px, 6vw, 74px) 0 clamp(38px, 5vw, 62px); }
.hero-sm h1 { font-size: clamp(44px, 6.4vw, 78px); }

/* Hardware hero: the product beside the copy, never behind it. Charcoal
   type on warm paper is the brand rule, and text over a photograph would
   break it and cost legibility at the same time. */
.hero-media-grid {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-media .lede { max-width: 46ch; }

.hero-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.hero-shot img {
  width: 100%;
  max-width: 480px;
  height: auto;
  /* Product shots arrive on a white background. Multiply drops that white
     into the warm paper so the device sits ON the page rather than in a
     floating white box.
     Do NOT add `filter` here — filter creates a stacking context, which
     isolates the element and silently kills the blend. Put any shadow on
     the wrapper instead. */
  mix-blend-mode: multiply;
}

/* An in-situ photograph carries its own background, so multiply would
   just muddy it. Frame that one instead. */
.hero-shot img.hero-shot--framed {
  mix-blend-mode: normal;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.hero-shot .hw {
  width: 100%;
  max-width: 340px;
  height: auto;
}

@media (max-width: 900px) {
  .hero-media-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-shot { order: -1; min-height: 0; }
  .hero-shot img { max-width: 340px; }
  .hero-shot .hw { max-width: 250px; }
}

.crumbs { font-size: 13px; color: var(--ink-muted); margin-bottom: 20px; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); text-decoration: underline; }
.crumbs span { margin: 0 7px; opacity: .5; }

/* ---------- 9. PROOF STRIP ------------------------------------------- */
.proof { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--white); }
.proof .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 44px 0; }
.proof .row > * { text-align: center; border-left: 1px solid var(--hairline); padding: 0 12px; }
.proof .row > *:first-child { border-left: 0; }
@media (max-width: 780px) {
  .proof .row { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
  .proof .row > *:nth-child(odd) { border-left: 0; }
}

/* ---------- 10. LISTS ------------------------------------------------ */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 0 0 0 30px; margin-bottom: 13px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 13px; height: 7px;
  border-left: 2.5px solid var(--gold); border-bottom: 2.5px solid var(--gold);
  transform: rotate(-45deg);
}
.ticks li:last-child { margin-bottom: 0; }

.xs { list-style: none; padding: 0; margin: 0; }
.xs li { position: relative; padding: 0 0 0 30px; margin-bottom: 13px; color: var(--ink-muted); }
.xs li::before {
  content: "\00d7"; position: absolute; left: 3px; top: -2px;
  font-size: 19px; color: var(--ink-faint);
}

.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; }
.steps li { counter-increment: s; position: relative; padding-left: 62px; margin-bottom: 30px; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: -6px;
  font-family: var(--display); font-size: 36px; color: var(--gold-deep); line-height: 1;
}
.steps li:last-child { margin-bottom: 0; }

/* ---------- 11. FAQ / DETAILS ---------------------------------------- */
.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 44px 22px 0; position: relative;
  font-weight: 700; font-size: 17.5px; color: var(--charcoal);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 20px;
  font-size: 24px; font-weight: 400; color: var(--gold-deep); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 44px 24px 0; color: var(--ink-body); }

/* ---------- 12. TABLE ------------------------------------------------ */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
table.tbl th, table.tbl td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.tbl thead th {
  font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom: 2px solid var(--charcoal); font-weight: 700;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl .yes { color: var(--gold-deep); font-weight: 700; }
table.tbl .no { color: var(--ink-faint); }

/* ---------- 13. FORMS ------------------------------------------------ */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--charcoal); margin-bottom: 7px; }
.field .hint { font-size: 13px; color: var(--ink-muted); font-weight: 400; margin-top: 4px; }
.input, select.input, textarea.input {
  width: 100%; min-height: 52px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 16px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(157,133,63,.15); outline: none; }
textarea.input { min-height: 132px; resize: vertical; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%233A3A3A' stroke-width='1.8'/></svg>");
  background-repeat: no-repeat; background-position: right 15px center;
  padding-right: 40px;
}
.err { color: var(--loss); font-size: 13.5px; font-weight: 700; margin-top: 6px; display: none; }
.field[data-invalid="true"] .err { display: block; }
.field[data-invalid="true"] .input { border-color: var(--loss); }

.form-note { font-size: 13px; color: var(--ink-muted); margin-top: 14px; }
.form-ok {
  display: none;
  background: var(--gold-tint); border: 1px solid var(--gold-line);
  border-radius: var(--r-lg); padding: 26px;
}
.form-ok[data-show="true"] { display: block; }

/* ---------- 14. FOOTER -----------------------------------------------
   Canonical HTML: public/assets/global-footer.html
   Sync: node scripts/sync-footer.mjs
   Visual system matches the original Phase 3 footer: identity on the left,
   contact/hours as a right cluster, auto-fitting link columns, muted links. */
#site-close {
  padding: clamp(56px, 6vw, 80px) 0;
  border-bottom: 1px solid var(--on-dark-line);
}
#site-close .site-close-inner {
  text-align: center;
}
#site-close h2 {
  max-width: 18.5em;
  margin-left: auto;
  margin-right: auto;
  text-wrap: wrap;
}
#site-close .lede {
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
  color: #DCD8D0;
}
#site-close .close-aside {
  margin: 12px auto 0;
  max-width: 42em;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--on-dark);
}
#site-close .btns {
  justify-content: center;
  align-items: stretch;
}
#site-close .btns .btn { min-height: 52px; }
@media (max-width: 620px) {
  #site-close .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  #site-close .btns .btn { width: 100%; }
}

.foot {
  background: var(--charcoal);
  color: var(--on-dark-muted);
  padding: 64px 0 0;
  font-size: 15px;
  --gold: var(--gold-on-dark);
}
.foot a { color: var(--on-dark-muted); text-decoration: none; }
.foot a:hover { color: var(--gold-on-dark); }
.foot a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.foot .foot-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.35fr;
  gap: 32px 48px;
  align-items: start;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--on-dark-line);
}
.foot .foot-id { min-width: 0; max-width: none; }
.foot .foot-id .brand { display: inline-block; margin-bottom: 16px; }
.foot .foot-id p {
  margin: 0;
  max-width: none;
  line-height: 1.6;
  color: var(--on-dark-muted);
}
.foot .foot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 36px 56px;
  flex: 0 1 auto;
}
.foot .foot-contact-col,
.foot .foot-hours {
  min-width: 16rem;
}
.foot .foot-contact {
  font-style: normal;
  line-height: 1.75;
  color: var(--on-dark-muted);
}
.foot .foot-reach { display: block; margin-top: .85em; }
.foot .foot-reach a { display: block; }
.foot .foot-hours p {
  margin: 0 0 18px;
  line-height: 1.6;
  max-width: 28ch;
}
.foot .foot-hours h5 + p,
.foot .foot-hours .foot-h + p { margin-top: 0; }

.foot .cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.05fr 0.9fr 1.15fr;
  gap: 28px 24px;
  padding: 28px 0 32px;
}
.foot h5,
.foot .foot-h {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 0 0 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 10px; }
.foot .foot-nav-pos { min-width: 0; }

.foot .disc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 36px;
  border-top: 1px solid var(--on-dark-line);
  padding: 26px 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--on-dark-muted);
}
.foot .disc p { margin: 0; max-width: none; }

.foot .bottom {
  border-top: 1px solid var(--on-dark-line);
  padding: 24px 0 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.foot .legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

@media (max-width: 1100px) {
  .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
  .foot .disc { grid-template-columns: 1fr; }
  .foot .disc p { max-width: 72ch; }
}
@media (max-width: 720px) {
  .foot { padding-top: 48px; }
  .foot .foot-top { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
  .foot .foot-id { max-width: none; }
  .foot .foot-meta { width: 100%; }
  .foot .cols { grid-template-columns: 1fr; gap: 28px; padding: 28px 0 36px; }
  .foot .bottom { flex-direction: column; align-items: flex-start; }
  #site-close > .wrap,
  .foot > .wrap { width: calc(100% - 40px); }
}

/* A secondary heading that opens a sub-section inside a section. Used to
   separate "keep what you run" from "buying new", so the six systems read
   as one path rather than as the whole offer. */
.rule-head {
  border-top: 1px solid var(--hairline);
  padding-top: 26px; margin-bottom: 30px; max-width: 820px;
}
.rule-head h3 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 10px; }
.rule-head p { margin: 0; color: var(--ink-muted); }

/* ---------- 15. UTIL ------------------------------------------------- */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---------- 14b. HARDWARE CATALOGUE ---------------------------------- *
   The parity rule is enforced here, not just in the copy: every system
   card and every device figure uses one size, one frame, one type scale.
   There is deliberately no ".system--featured" class to reach for.        */

.systems { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .systems { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .systems { grid-template-columns: 1fr; } }

.system {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.system:hover { border-color: var(--gold-line); transform: translateY(-2px); box-shadow: var(--shadow); }

/* Every system name is set at exactly this size. No exceptions, ever. */
.system-name {
  font-family: var(--display);
  font-size: 34px;
  line-height: .95;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0 0 10px;
  letter-spacing: .01em;
}
.system-line { font-size: 15.5px; line-height: 1.5; color: var(--ink-body); margin: 0 0 18px; flex: 1; }
.system-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.system-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--paper-warm);
  border-radius: 999px; padding: 5px 10px;
}
.system-more { font-size: 14.5px; font-weight: 700; color: var(--gold-deep); }
.system:hover .system-more { text-decoration: underline; }

/* Terminals: a distinct band, smaller name — subordinate to a full
   system, but on the page, not buried at the bottom of a footer. */
.terminals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 780px) { .terminals { grid-template-columns: 1fr; } }
.terminal .system-name { font-size: 27px; }

/* Device figures — one canvas size for every device on the site. */
.devices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .devices { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .devices { grid-template-columns: 1fr; } }

.device {
  margin: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.device-art {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  min-height: 168px;
}
.device-art .hw { width: 100%; max-width: 170px; height: auto; }

/* Photographs come on white. Give them the same frame height as a drawing
   so a photographed page and an illustrated page still line up, and let
   them run wider since a photo carries less ink than a line drawing. */
.device--photo .device-art { background: #fff; }
.device-art .hw-photo {
  width: 100%;
  max-width: 260px;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}
.device figcaption { padding: 20px 22px 24px; }
.device figcaption h4 { margin-bottom: 6px; }
.device figcaption p { margin: 0; color: var(--ink-muted); }

/* ---------- 15a. LONG-FORM PROSE ------------------------------------- */
.article { font-size: 17.5px; }
.article > h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-top: 56px;
  margin-bottom: 20px;
}
.article > h2:first-child { margin-top: 0; }
.article > h3 { margin-top: 40px; }
.article > p, .article > ul, .article > ol { margin-bottom: 1.15em; }
.article ul, .article ol { margin-top: 0; }
.article .card { margin: 26px 0; }
.article .steps { margin: 26px 0; }
.article .tbl-scroll { margin: 26px 0; }
.article em { font-style: italic; }
.article a:not(.btn):not(.link-arrow) { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Legal documents — dense, scannable, numbered. */
.legal { font-size: 16px; }
.legal h2 {
  font-family: var(--body);
  font-size: 21px; font-weight: 700; text-transform: none;
  letter-spacing: -.01em; line-height: 1.3;
  margin-top: 46px; margin-bottom: 14px;
  padding-top: 22px; border-top: 1px solid var(--hairline);
}
.legal h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { font-family: var(--body); font-size: 17px; font-weight: 700; text-transform: none; margin-top: 26px; }
.legal p, .legal li { color: var(--ink-body); }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--gold-deep); text-decoration: underline; }
.legal .updated {
  font-size: 13px; color: var(--ink-muted);
  padding: 14px 18px; background: var(--paper-warm);
  border-radius: var(--r-md); margin-bottom: 34px;
}

/* ---------- 15a2. ASK AN AI ------------------------------------------ *
   A row of links that open a question already typed into an assistant.
   Ships as text pills. Drop an official brand SVG at
   /assets/ai/<slug>.svg and .ask-mark picks it up automatically.        */

.ask-q {
  margin: 30px 0;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
}
.ask-q blockquote {
  margin: 0;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--charcoal);
  font-weight: 700;
}
.ask-q figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-muted);
}

.ask-row { display: flex; flex-wrap: wrap; gap: 10px; }

.ask-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 20px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--charcoal);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.ask-pill:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

/* The logo slot. Commented out until official brand SVGs are added to
   public/assets/ai/. See the notes in src/templates/askai.js.

.ask-mark { width: 20px; height: 20px; flex: 0 0 auto; }
.ask-pill[data-ai="chatgpt"]    .ask-mark { background: url("/assets/ai/chatgpt.svg")    center/contain no-repeat; }
.ask-pill[data-ai="claude"]     .ask-mark { background: url("/assets/ai/claude.svg")     center/contain no-repeat; }
.ask-pill[data-ai="perplexity"] .ask-mark { background: url("/assets/ai/perplexity.svg") center/contain no-repeat; }
.ask-pill[data-ai="gemini"]     .ask-mark { background: url("/assets/ai/gemini.svg")     center/contain no-repeat; }
.ask-pill[data-ai="grok"]       .ask-mark { background: url("/assets/ai/grok.svg")       center/contain no-repeat; }

*/

@media (max-width: 480px) {
  .ask-pill { flex: 1 1 calc(50% - 5px); justify-content: center; padding: 13px 12px; }
}

/* ---------- 15b. PRICING TOGGLE -------------------------------------- */
.toggle-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  justify-content: center; text-align: center;
}
.toggle-q { font-weight: 700; color: var(--charcoal); font-size: 16px; }
.toggle {
  display: inline-flex; padding: 5px;
  background: var(--mist); border-radius: 999px;
}
.toggle .tg {
  min-height: 46px; padding: 11px 22px;
  border: 0; background: none; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: var(--ink-muted); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.toggle .tg[aria-pressed="true"] {
  background: var(--charcoal); color: var(--on-dark);
}

/* ---------- 15c. AUDIT OUTPUT ---------------------------------------- */
.audit-out {
  margin-top: 30px; padding: 30px;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
}

/* ---------- 15d. QUOTE ROUTER ---------------------------------------- */
.router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .router { grid-template-columns: 1fr; } }
.router a {
  display: block; padding: 30px;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.router a:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.router .n {
  font-family: var(--display); font-size: 30px; color: var(--gold-deep); line-height: 1; display: block; margin-bottom: 14px;
}

.mt0 { margin-top: 0 } .mb0 { margin-bottom: 0 }
.mt-s { margin-top: 14px } .mt-m { margin-top: 26px } .mt-l { margin-top: 44px }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Hover bridge so desktop dropdowns do not vanish in the 6px gap. */
.nav > * > .drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

/* ---------- PAYMENTS PAGE ------------------------------------------ */
#payments-hero h1 { max-width: 18em; }
#payments-hero .lede { max-width: 42em; }
#payments-proof { padding-top: 28px; padding-bottom: 36px; }
#payments-proof .proof-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--ink-muted);
  max-width: 72ch;
}
#where-to-start .where-intro .lede,
#payment-options .payopt-intro .lede { max-width: 42em; }
#where-to-start a.card,
#payment-options a.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#where-to-start a.card .mt-s,
#payment-options a.card .mt-s {
  margin-top: auto;
  padding-top: 14px;
}
#payments-switching .switch-intro .lede { max-width: 42em; }
#payments-switching .switch-note {
  margin-top: 28px;
  max-width: 52em;
  color: var(--on-dark);
}
#payments-faq {
  padding-top: clamp(56px, 6vw, 80px);
  padding-bottom: clamp(56px, 6vw, 80px);
}
#payments-faq .lede { max-width: 42ch; margin-bottom: 8px; }
#payments-faq .a { font-size: 17px; line-height: 1.6; }
#payments-faq summary { padding-right: 48px; }
#payments-digital .split-wide { align-items: start; }
#payments-digital .lede { max-width: 42em; }

/* ---------- CARD PROCESSING PAGE ----------------------------------- */
#processing-hero h1 { max-width: 18em; }
#processing-hero .lede { max-width: 42em; }
#processing-hero .wrap > p:not(.lede) { max-width: 42em; }
#processing-faq {
  padding-top: clamp(56px, 6vw, 80px);
  padding-bottom: clamp(56px, 6vw, 80px);
}
#processing-faq .lede { max-width: 42ch; margin-bottom: 8px; }
#processing-faq .a { font-size: 17px; line-height: 1.6; }
#processing-faq summary { padding-right: 48px; }

.cost-table {
  width: 100%;
  overflow: visible;
}
.cost-table table.tbl {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}
.cost-table table.tbl caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 720px) {
  .cost-table table.tbl { table-layout: auto; }
  .cost-table table.tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .cost-table table.tbl,
  .cost-table table.tbl tbody,
  .cost-table table.tbl tr,
  .cost-table table.tbl th,
  .cost-table table.tbl td {
    display: block;
    width: 100%;
  }
  .cost-table table.tbl tr {
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 16px 18px 8px;
    margin-bottom: 12px;
  }
  .cost-table table.tbl tbody tr:last-child { margin-bottom: 0; }
  .cost-table table.tbl th,
  .cost-table table.tbl td {
    border: 0;
    padding: 0 0 12px;
  }
  .cost-table table.tbl th[scope="row"],
  .cost-table table.tbl td { width: 100%; }
  .cost-table table.tbl th[scope="row"]::before,
  .cost-table table.tbl td::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-muted);
    margin-bottom: 4px;
  }
}

#site-close h2 { text-wrap: wrap; }

/* ---------- POS PAGE HERO ------------------------------------------ */
#pos-hero {
  min-height: 0;
}
#pos-hero h1 {
  max-width: 11.2em;
  text-wrap: wrap;
}
#pos-hero .lede,
#pos-hero .wrap > p {
  max-width: 720px;
}
#pos-hero .lede { margin-bottom: 1.1em; }
#pos-hero .btns {
  align-items: stretch;
}
#pos-hero .btns .btn {
  min-height: 52px;
}
@media (max-width: 620px) {
  #pos-hero .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  #pos-hero .btns .btn { width: 100%; }
}

/* ---------- POS PAGE: TWO DECISIONS -------------------------------- */
#pos-decisions .split-wide {
  grid-template-columns: 1.22fr 1fr;
  align-items: start;
  gap: 40px 48px;
}
#pos-decisions h2 {
  text-wrap: wrap;
  max-width: 13.5em;
}
#pos-decisions .lede {
  max-width: none;
}
#pos-decisions .pos-copy > p {
  max-width: none;
}
#pos-decisions .lede { margin-bottom: 1.1em; }
#pos-decisions .btns { align-items: stretch; }
#pos-decisions .btns .btn { min-height: 52px; }
#pos-decisions .card h4 {
  margin-bottom: 6px;
}
#pos-decisions .pos-outcome {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--hairline);
}
#pos-decisions .pos-outcome h5,
#pos-decisions .pos-outcome .pos-outcome-title {
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.3;
  color: var(--charcoal);
  margin: 0 0 6px;
}
#pos-decisions .pos-outcome .small { margin: 0; }
@media (max-width: 940px) {
  #pos-decisions .split-wide {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 620px) {
  #pos-decisions .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  #pos-decisions .btns .btn { width: 100%; }
}

/* ---------- POS PAGE: SIX SYSTEMS ---------------------------------- */
#pos-systems .pos-systems-intro {
  max-width: none;
  margin-bottom: 28px;
}
#pos-systems h2 {
  text-wrap: wrap;
  max-width: 10.5em;
}
#pos-systems .lede {
  max-width: 720px;
  margin-bottom: 0;
}
#pos-systems .system-name {
  margin: 0 0 10px;
}
#pos-systems .system-line {
  margin: 0 0 14px;
  flex: 1;
}
#pos-systems .system-fits {
  margin: 0 0 14px;
}
#pos-systems .system-fits-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
#pos-systems .system-fits-copy {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}
#pos-systems .system-more {
  margin-top: 0;
}
#pos-systems .pos-systems-note {
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gold-line);
  max-width: none;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- POS PAGE: TERMINALS ------------------------------------ */
#pos-terminals .pos-terminals-intro {
  max-width: none;
  margin-bottom: 28px;
}
#pos-terminals h2 {
  text-wrap: wrap;
  max-width: 11.5em;
}
#pos-terminals .lede,
#pos-terminals .pos-terminals-intro > p {
  max-width: 720px;
}
#pos-terminals .lede { margin-bottom: 1.1em; }
#pos-terminals .system-name { margin: 0 0 10px; }
#pos-terminals .system-line {
  margin: 0 0 14px;
  flex: 1;
}
#pos-terminals .system-fits { margin: 0 0 14px; }
#pos-terminals .system-fits-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
#pos-terminals .system-fits-copy {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-muted);
}
#pos-terminals .pos-terminals-cta {
  margin: 22px 0 0;
}
#pos-terminals .terminals {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px) {
  #pos-terminals .terminals { grid-template-columns: 1fr; }
}

/* ---------- POS PAGE: BY INDUSTRY ---------------------------------- */
#pos-industry .pos-industry-intro {
  max-width: none;
  margin-bottom: 28px;
}
#pos-industry h2 {
  text-wrap: wrap;
  max-width: 11em;
}
#pos-industry .lede {
  max-width: 720px;
  margin-bottom: 0;
}
#pos-industry .grid.g3 {
  align-items: stretch;
}
#pos-industry a.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-color: var(--on-dark-line);
}
#pos-industry a.card:hover {
  border-color: var(--gold-line);
}
#pos-industry a.card h4 {
  margin: 0 0 10px;
}
#pos-industry a.card .small {
  flex: 1;
  margin: 0 0 16px;
  color: var(--on-dark-soft);
}
#pos-industry .pos-industry-cta {
  margin: 0;
}
#pos-industry .pos-industry-all {
  margin: 28px 0 0;
}

/* ---------- POS PAGE: SETUP AND LAUNCH ----------------------------- */
#pos-setup .pos-setup-intro {
  max-width: none;
  margin-bottom: 28px;
}
#pos-setup h2 {
  text-wrap: wrap;
  max-width: 12em;
}
#pos-setup .lede {
  max-width: 720px;
  margin-bottom: 0;
}
#pos-setup .grid.g3 {
  align-items: stretch;
}
#pos-setup .card {
  display: flex;
  flex-direction: column;
}
#pos-setup .card h4 {
  margin: 0 0 10px;
}
#pos-setup .card .small {
  margin: 0;
  flex: 1;
}
#pos-setup .pos-setup-note {
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gold-line);
  max-width: none;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
#pos-setup .pos-setup-legal {
  margin-top: 28px;
  max-width: 1000px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}
#pos-setup .pos-setup-legal p {
  margin: 0 0 .7em;
  max-width: none;
}
#pos-setup .pos-setup-legal p:last-child { margin-bottom: 0; }

/* ---------- POS PAGE: CHECK OUR WORK ------------------------------- */
#pos-check .pos-check-intro {
  max-width: none;
  margin-bottom: 8px;
}
#pos-check h2 {
  text-wrap: wrap;
  max-width: 12.5em;
}
#pos-check .lede {
  max-width: 720px;
}
#pos-check .ask-q {
  max-width: none;
  margin: 24px 0 12px;
}
#pos-check .ask-help {
  margin: 0 0 18px;
  max-width: 46em;
}
#pos-check .ask-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#pos-check .ask-disc {
  margin-top: 22px;
  max-width: 52em;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-body);
}
#pos-check #ask-copied {
  margin-top: 12px;
  font-weight: 700;
  color: var(--gold-deep);
}
@media (max-width: 620px) {
  #pos-check .ask-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #pos-check .ask-pill { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  #pos-check .ask-row { grid-template-columns: 1fr; }
}

/* ---------- POS PAGE: FAQ ------------------------------------------ */
#pos-faq {
  padding-top: clamp(56px, 6vw, 80px);
  padding-bottom: clamp(56px, 6vw, 80px);
}
#pos-faq h2 {
  text-wrap: wrap;
  max-width: 12em;
}
#pos-faq .lede {
  max-width: 720px;
  margin-bottom: 8px;
}
#pos-faq .faq {
  max-width: 1000px;
}
#pos-faq .a {
  font-size: 17px;
  line-height: 1.6;
}
#pos-faq summary {
  padding-right: 48px;
}

/* ---------- POS PAGE: DIGITAL CROSS-SELL --------------------------- */
#pos-digital {
  padding-top: clamp(56px, 6vw, 80px);
  padding-bottom: clamp(56px, 6vw, 80px);
}
#pos-digital .split-wide {
  align-items: start;
}
#pos-digital h2 {
  text-wrap: wrap;
  max-width: 11.5em;
}
#pos-digital .lede {
  max-width: 40em;
}
#pos-digital .btns .btn {
  min-height: 52px;
}
#pos-digital .pos-dig-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 18px;
}
#pos-digital .pos-dig-n {
  font-family: var(--display);
  font-size: 76px;
  line-height: .85;
  color: var(--charcoal);
}
#pos-digital .pos-dig-unit {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-muted);
}
#pos-digital .pos-dig-alt {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-body);
}
#pos-digital .ticks li::before {
  content: "";
}

/* ---------- DUAL PRICING PAGE HERO --------------------------------- */
#dual-hero {
  min-height: 0;
}
#dual-hero h1 {
  max-width: 12em;
  text-wrap: wrap;
}
#dual-hero .lede,
#dual-hero .wrap > p {
  max-width: 720px;
}
#dual-hero .lede { margin-bottom: 1.1em; }
#dual-hero .btns {
  align-items: stretch;
}
#dual-hero .btns .btn {
  min-height: 52px;
}
@media (max-width: 620px) {
  #dual-hero .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  #dual-hero .btns .btn { width: 100%; }
}

/* ---------- DUAL PRICING: $100 EXAMPLE ----------------------------- */
#dual-example h2 {
  text-wrap: wrap;
  max-width: 13em;
}
#dual-example .lede {
  max-width: 720px;
}
#dual-example .dual-ex-table {
  max-width: 1020px;
  overflow: visible;
}
#dual-example table.tbl {
  min-width: 0;
  width: 100%;
  font-size: 16px;
  table-layout: fixed;
}
#dual-example table.tbl caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#dual-example table.tbl th:nth-child(1),
#dual-example table.tbl td:nth-child(1) { width: 20%; }
#dual-example table.tbl th:nth-child(2),
#dual-example table.tbl td:nth-child(2) { width: 30%; }
#dual-example table.tbl th:nth-child(3),
#dual-example table.tbl td:nth-child(3) { width: 50%; }
#dual-example table.tbl th[scope="row"] {
  font-weight: 700;
  color: var(--charcoal);
  text-transform: none;
  letter-spacing: 0;
  font-size: 16px;
  border-bottom: 1px solid var(--hairline);
}
#dual-example .dual-ex-note {
  max-width: 1020px;
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}
#dual-example .dual-ex-callout {
  max-width: 1020px;
  margin-top: 28px;
}
#dual-example .dual-ex-callout h4 { margin-bottom: 10px; }
#dual-example .dual-ex-callout p { margin: 0; }
#dual-example .dual-ex-cta { margin-top: 16px; }
@media (max-width: 720px) {
  #dual-example table.tbl {
    table-layout: auto;
  }
  #dual-example table.tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  #dual-example table.tbl,
  #dual-example table.tbl tbody,
  #dual-example table.tbl tr,
  #dual-example table.tbl th,
  #dual-example table.tbl td {
    display: block;
    width: 100%;
  }
  #dual-example table.tbl tr {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 16px 18px 8px;
    margin-bottom: 12px;
  }
  #dual-example table.tbl tbody tr:last-child { margin-bottom: 0; }
  #dual-example table.tbl th,
  #dual-example table.tbl td {
    border: 0;
    padding: 0 0 12px;
  }
  #dual-example table.tbl th[scope="row"],
  #dual-example table.tbl td {
    width: 100%;
  }
  #dual-example table.tbl th[scope="row"]::before,
  #dual-example table.tbl td::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-muted);
    margin-bottom: 4px;
  }
}

/* ---------- DUAL PRICING: COMPARE OPTIONS -------------------------- */
#dual-compare h2 {
  text-wrap: wrap;
  max-width: 10em;
}
#dual-compare .lede,
#dual-compare .wrap > p {
  max-width: 720px;
}
#dual-compare .lede { margin-bottom: 1.1em; }
#dual-compare .btns {
  align-items: stretch;
}
#dual-compare .btns .btn {
  min-height: 52px;
}
@media (max-width: 620px) {
  #dual-compare .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  #dual-compare .btns .btn { width: 100%; }
}

/* ---------- DUAL PRICING: IMPLEMENTATION --------------------------- */
#dual-setup .dual-setup-intro {
  margin-bottom: 28px;
}
#dual-setup h2 {
  text-wrap: wrap;
  max-width: 12.5em;
}
#dual-setup .lede {
  max-width: 720px;
  margin-bottom: 0;
}
#dual-setup .grid.g3 {
  align-items: stretch;
}
#dual-setup .card {
  display: flex;
  flex-direction: column;
}
#dual-setup .card h4 {
  margin: 0 0 10px;
}
#dual-setup .card .small {
  margin: 0;
  flex: 1;
}
#dual-setup .dual-setup-note {
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gold-line);
  max-width: none;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- DUAL PRICING: WHEN IT DOESN'T FIT ---------------------- */
#dual-fit .dual-fit-intro {
  margin-bottom: 28px;
}
#dual-fit h2 {
  text-wrap: wrap;
  max-width: 14em;
}
#dual-fit .lede {
  max-width: 720px;
  margin-bottom: 0;
}
#dual-fit .grid.g2 {
  align-items: stretch;
}
#dual-fit .card {
  display: flex;
  flex-direction: column;
}
#dual-fit .card h4 {
  margin: 0 0 10px;
}
#dual-fit .card .small {
  margin: 0;
  flex: 1;
  color: #E6E2DA;
}
#dual-fit .dual-fit-note {
  margin: 28px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--gold);
  max-width: none;
  font-size: 17px;
  line-height: 1.5;
  color: var(--on-dark);
}

/* ---------- DUAL PRICING: CHECK OUR WORK --------------------------- */
#dual-check .dual-check-intro {
  max-width: none;
  margin-bottom: 8px;
}
#dual-check h2 {
  text-wrap: wrap;
  max-width: 13em;
}
#dual-check .lede {
  max-width: 720px;
}
#dual-check .ask-q {
  max-width: none;
  margin: 24px 0 12px;
}
#dual-check .ask-help {
  margin: 0 0 18px;
  max-width: 46em;
}
#dual-check .ask-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#dual-check .ask-disc {
  margin-top: 22px;
  max-width: 52em;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-body);
}
#dual-check #ask-copied {
  margin-top: 12px;
  font-weight: 700;
  color: var(--gold-deep);
}
@media (max-width: 620px) {
  #dual-check .ask-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #dual-check .ask-pill { width: 100%; justify-content: center; }
}
@media (max-width: 420px) {
  #dual-check .ask-row { grid-template-columns: 1fr; }
}

/* ---------- PAGE-SCOPED FOOTER LAYOUT (was extra render-blocking files) ---------- */

/* from home-footer.css */
/* Homepage only.
   Loaded from pages with body.page-home.
   Does not affect Payments, POS product, Digital, Industries, or Company routes. */

.page-home #site-close,
.page-home #site-foot {
  min-height: 0;
  height: auto;
}

.page-home #site-close > .wrap,
.page-home #site-foot > .wrap {
  max-width: 1280px;
  width: calc(100% - 64px);
  margin-inline: auto;
  padding-inline: 0;
}

.page-home #site-close {
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--on-dark-line);
}

.page-home #site-close .site-close-inner {
  text-align: center;
  max-width: none;
  margin-inline: auto;
}

.page-home #site-close h2 {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  text-wrap: wrap;
}

.page-home #site-close .lede {
  max-width: 760px;
  margin: 12px auto 0;
  text-align: center;
  color: #DCD8D0;
}

.page-home #site-close .close-aside {
  margin: 8px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #DCD8D0;
}

.page-home #site-close .btns,
.page-home #site-close .btns.mt-m {
  justify-content: center;
  align-items: stretch;
  margin-top: 18px;
}

.page-home #site-close .btns .btn {
  min-height: 52px;
}

.page-home #site-foot {
  padding: 28px 0 0;
}

.page-home #site-foot .foot-top {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr;
  gap: 24px 40px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--on-dark-line);
}

.page-home #site-foot .foot-id,
.page-home #site-foot .foot-contact-col,
.page-home #site-foot .foot-hours {
  min-width: 0;
  max-width: none;
  grid-column: auto;
}

.page-home #site-foot .foot-id p {
  max-width: none;
  line-height: 1.55;
}

.page-home #site-foot .foot-hours p {
  max-width: none;
  margin: 0 0 14px;
}

.page-home #site-foot .cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  gap: 18px 22px;
  padding: 16px 0 18px;
}

.page-home #site-foot h5 {
  margin: 0 0 10px;
}

.page-home #site-foot li {
  margin-bottom: 6px;
}

.page-home #site-foot .disc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  border-top: 1px solid var(--on-dark-line);
  padding: 14px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #C4BEB5;
}

.page-home #site-foot .disc p {
  margin: 0;
  max-width: none;
}

.page-home #site-foot .bottom {
  border-top: 1px solid var(--on-dark-line);
  padding: 12px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}

/* Hold desktop architecture through the global 1100px footer collapse. */
@media (min-width: 961px) {
  .page-home #site-foot .foot-top {
    grid-template-columns: 1.2fr 0.9fr 1.2fr;
  }
  .page-home #site-foot .foot-id,
  .page-home #site-foot .foot-contact-col,
  .page-home #site-foot .foot-hours {
    grid-column: auto;
  }
  .page-home #site-foot .cols {
    grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  }
  .page-home #site-foot .disc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .page-home #site-foot .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
  }
  .page-home #site-foot .foot-id {
    grid-column: 1 / -1;
  }
  .page-home #site-foot .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home #site-foot .disc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .page-home #site-foot .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page-home #site-close > .wrap,
  .page-home #site-foot > .wrap {
    width: calc(100% - 40px);
  }
}

@media (max-width: 620px) {
  .page-home #site-close {
    padding: 32px 0 28px;
  }
  .page-home #site-close .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  .page-home #site-close .btns .btn {
    width: 100%;
  }
  .page-home #site-foot {
    padding-top: 24px;
  }
  .page-home #site-foot .foot-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
  }
  .page-home #site-foot .foot-id,
  .page-home #site-foot .foot-contact-col,
  .page-home #site-foot .foot-hours {
    grid-column: auto;
  }
  .page-home #site-foot .cols {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 0;
  }
  .page-home #site-foot .disc {
    grid-template-columns: 1fr;
    padding: 16px 0;
  }
  .page-home #site-foot .bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* from pos-product-footer.css */
/* POS product detail pages only.
   Loaded from pages with body.pos-product-page.
   Does not affect /payments/pos/index.html, first-level Payments,
   Digital, Industries, or Company routes. */

.pos-product-page #site-close,
.pos-product-page #site-foot {
  min-height: 0;
  height: auto;
}

.pos-product-page #site-close > .wrap,
.pos-product-page #site-foot > .wrap {
  max-width: 1280px;
  width: calc(100% - 64px);
  margin-inline: auto;
  padding-inline: 0;
}

.pos-product-page #site-close {
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--on-dark-line);
}

.pos-product-page #site-close .site-close-inner {
  text-align: center;
  max-width: none;
  margin-inline: auto;
}

.pos-product-page #site-close h2 {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  text-wrap: wrap;
}

.pos-product-page #site-close .lede {
  max-width: 760px;
  margin: 12px auto 0;
  text-align: center;
  color: #DCD8D0;
}

.pos-product-page #site-close .close-aside {
  margin: 8px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #DCD8D0;
}

.pos-product-page #site-close .btns,
.pos-product-page #site-close .btns.mt-m {
  justify-content: center;
  align-items: stretch;
  margin-top: 18px;
}

.pos-product-page #site-close .btns .btn {
  min-height: 52px;
}

.pos-product-page #site-foot {
  padding: 28px 0 0;
}

.pos-product-page #site-foot .foot-top {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr;
  gap: 24px 40px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--on-dark-line);
}

.pos-product-page #site-foot .foot-id,
.pos-product-page #site-foot .foot-contact-col,
.pos-product-page #site-foot .foot-hours {
  min-width: 0;
  max-width: none;
  grid-column: auto;
}

.pos-product-page #site-foot .foot-id p {
  max-width: none;
  line-height: 1.55;
}

.pos-product-page #site-foot .foot-hours p {
  max-width: none;
  margin: 0 0 14px;
}

.pos-product-page #site-foot .cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  gap: 18px 22px;
  padding: 16px 0 18px;
}

.pos-product-page #site-foot h5 {
  margin: 0 0 10px;
}

.pos-product-page #site-foot li {
  margin-bottom: 6px;
}

.pos-product-page #site-foot .disc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  border-top: 1px solid var(--on-dark-line);
  padding: 14px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #C4BEB5;
}

.pos-product-page #site-foot .disc p {
  margin: 0;
  max-width: none;
}

.pos-product-page #site-foot .bottom {
  border-top: 1px solid var(--on-dark-line);
  padding: 12px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}

.pos-product-page #site-foot .cols a[aria-current="page"] {
  color: var(--gold);
}

/* Hold desktop architecture through the global 1100px footer collapse. */
@media (min-width: 961px) {
  .pos-product-page #site-foot .foot-top {
    grid-template-columns: 1.2fr 0.9fr 1.2fr;
  }
  .pos-product-page #site-foot .foot-id,
  .pos-product-page #site-foot .foot-contact-col,
  .pos-product-page #site-foot .foot-hours {
    grid-column: auto;
  }
  .pos-product-page #site-foot .cols {
    grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  }
  .pos-product-page #site-foot .disc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .pos-product-page #site-foot .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
  }
  .pos-product-page #site-foot .foot-id {
    grid-column: 1 / -1;
  }
  .pos-product-page #site-foot .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pos-product-page #site-foot .disc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .pos-product-page #site-foot .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pos-product-page #site-close > .wrap,
  .pos-product-page #site-foot > .wrap {
    width: calc(100% - 40px);
  }
}

@media (max-width: 620px) {
  .pos-product-page #site-close {
    padding: 32px 0 28px;
  }
  .pos-product-page #site-close .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  .pos-product-page #site-close .btns .btn {
    width: 100%;
  }
  .pos-product-page #site-foot {
    padding-top: 24px;
  }
  .pos-product-page #site-foot .foot-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
  }
  .pos-product-page #site-foot .foot-id,
  .pos-product-page #site-foot .foot-contact-col,
  .pos-product-page #site-foot .foot-hours {
    grid-column: auto;
  }
  .pos-product-page #site-foot .cols {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 0;
  }
  .pos-product-page #site-foot .disc {
    grid-template-columns: 1fr;
    padding: 16px 0;
  }
  .pos-product-page #site-foot .bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* from payments-section-footer.css */
/* First-level Payments & POS routes only.
   Loaded from pages with body.payments-section-page.
   Does not affect POS product detail pages, Digital, Industries, or Company. */

.payments-section-page #site-close,
.payments-section-page #site-foot {
  min-height: 0;
  height: auto;
}

.payments-section-page #site-close > .wrap,
.payments-section-page #site-foot > .wrap {
  max-width: 1280px;
  width: calc(100% - 64px);
  margin-inline: auto;
  padding-inline: 0;
}

.payments-section-page #site-close {
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--on-dark-line);
}

.payments-section-page #site-close .site-close-inner {
  text-align: center;
  max-width: none;
  margin-inline: auto;
}

.payments-section-page #site-close h2 {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  text-wrap: wrap;
}

.payments-section-page #site-close .lede {
  max-width: 760px;
  margin: 12px auto 0;
  text-align: center;
  color: #DCD8D0;
}

.payments-section-page #site-close .close-aside {
  margin: 8px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #DCD8D0;
}

.payments-section-page #site-close .btns,
.payments-section-page #site-close .btns.mt-m {
  justify-content: center;
  align-items: stretch;
  margin-top: 18px;
}

.payments-section-page #site-close .btns .btn {
  min-height: 52px;
}

.payments-section-page #site-foot {
  padding: 28px 0 0;
}

.payments-section-page #site-foot .foot-top {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr;
  gap: 24px 40px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--on-dark-line);
}

.payments-section-page #site-foot .foot-id,
.payments-section-page #site-foot .foot-contact-col,
.payments-section-page #site-foot .foot-hours {
  min-width: 0;
  max-width: none;
  grid-column: auto;
}

.payments-section-page #site-foot .foot-id p {
  max-width: none;
  line-height: 1.55;
}

.payments-section-page #site-foot .foot-hours p {
  max-width: none;
  margin: 0 0 14px;
}

.payments-section-page #site-foot .cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  gap: 18px 22px;
  padding: 16px 0 18px;
}

.payments-section-page #site-foot h5 {
  margin: 0 0 10px;
}

.payments-section-page #site-foot li {
  margin-bottom: 6px;
}

.payments-section-page #site-foot .disc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  border-top: 1px solid var(--on-dark-line);
  padding: 14px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #C4BEB5;
}

.payments-section-page #site-foot .disc p {
  margin: 0;
  max-width: none;
}

.payments-section-page #site-foot .bottom {
  border-top: 1px solid var(--on-dark-line);
  padding: 12px 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}

.payments-section-page #site-foot .cols a[aria-current="page"] {
  color: var(--gold);
}

/* Hold desktop architecture through the global 1100px footer collapse. */
@media (min-width: 961px) {
  .payments-section-page #site-foot .foot-top {
    grid-template-columns: 1.2fr 0.9fr 1.2fr;
  }
  .payments-section-page #site-foot .foot-id,
  .payments-section-page #site-foot .foot-contact-col,
  .payments-section-page #site-foot .foot-hours {
    grid-column: auto;
  }
  .payments-section-page #site-foot .cols {
    grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  }
  .payments-section-page #site-foot .disc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .payments-section-page #site-foot .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
  }
  .payments-section-page #site-foot .foot-id {
    grid-column: 1 / -1;
  }
  .payments-section-page #site-foot .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .payments-section-page #site-foot .disc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .payments-section-page #site-foot .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .payments-section-page #site-close > .wrap,
  .payments-section-page #site-foot > .wrap {
    width: calc(100% - 40px);
  }
}

@media (max-width: 620px) {
  .payments-section-page #site-close {
    padding: 32px 0 28px;
  }
  .payments-section-page #site-close .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  .payments-section-page #site-close .btns .btn {
    width: 100%;
  }
  .payments-section-page #site-foot {
    padding-top: 24px;
  }
  .payments-section-page #site-foot .foot-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
  }
  .payments-section-page #site-foot .foot-id,
  .payments-section-page #site-foot .foot-contact-col,
  .payments-section-page #site-foot .foot-hours {
    grid-column: auto;
  }
  .payments-section-page #site-foot .cols {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 0;
  }
  .payments-section-page #site-foot .disc {
    grid-template-columns: 1fr;
    padding: 16px 0;
  }
  .payments-section-page #site-foot .bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* from resources-footer.css */
/* Resources family only.
   Loaded from pages with body.resources-page.
   Does not affect Homepage, Payments, POS, Digital, Industries, or Company. */

.resources-page #site-close,
.resources-page #site-foot {
  min-height: 0;
  height: auto;
}

.resources-page #site-close > .wrap,
.resources-page #site-foot > .wrap {
  max-width: 1280px;
  width: calc(100% - 64px);
  margin-inline: auto;
  padding-inline: 0;
}

.resources-page #site-close {
  padding: 48px 0 64px;
  border-bottom: 1px solid var(--on-dark-line);
}

.resources-page #site-close .site-close-inner {
  text-align: center;
  margin-inline: auto;
}

.resources-page #site-close h2 {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  text-wrap: wrap;
}

.resources-page #site-close .lede {
  max-width: 740px;
  margin: 12px auto 0;
  text-align: center;
  color: #DCD8D0;
}

.resources-page #site-close .close-aside {
  margin: 8px auto 0;
  max-width: 740px;
  text-align: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #DCD8D0;
}

.resources-page #site-close .btns,
.resources-page #site-close .btns.mt-m {
  justify-content: center;
  align-items: stretch;
  margin-top: 18px;
}

.resources-page #site-close .btns .btn {
  min-height: 52px;
}

.resources-page #site-foot {
  padding: 36px 0 0;
}

.resources-page #site-foot .foot-top {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr 1.2fr;
  gap: 24px 40px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--on-dark-line);
}

.resources-page #site-foot .foot-id,
.resources-page #site-foot .foot-contact-col,
.resources-page #site-foot .foot-hours {
  min-width: 0;
  max-width: none;
  grid-column: auto;
}

.resources-page #site-foot .foot-id p {
  max-width: none;
  line-height: 1.55;
}

.resources-page #site-foot .foot-hours p {
  max-width: none;
  margin: 0 0 14px;
}

.resources-page #site-foot .foot-hours p:last-child {
  margin-bottom: 0;
}

.resources-page #site-foot .cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  gap: 18px 22px;
  padding: 56px 0 18px;
}

.resources-page #site-foot h5 {
  margin: 0 0 10px;
}

.resources-page #site-foot li {
  margin-bottom: 6px;
}

.resources-page #site-foot .disc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 28px;
  border-top: 1px solid var(--on-dark-line);
  padding: 16px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #C4BEB5;
}

.resources-page #site-foot .disc p {
  margin: 0;
  max-width: none;
}

.resources-page #site-foot .bottom {
  border-top: 1px solid var(--on-dark-line);
  padding: 12px 0 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
}

.resources-page #site-foot .cols a[aria-current="page"] {
  color: var(--gold);
}

.resources-page #site-close .btns a:focus-visible,
.resources-page #site-foot a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Hold desktop architecture through the global 1100px footer collapse. */
@media (min-width: 961px) {
  .resources-page #site-foot .foot-top {
    grid-template-columns: 1.2fr 0.9fr 1.2fr;
  }
  .resources-page #site-foot .foot-id,
  .resources-page #site-foot .foot-contact-col,
  .resources-page #site-foot .foot-hours {
    grid-column: auto;
  }
  .resources-page #site-foot .cols {
    grid-template-columns: 1fr 1.2fr 1.1fr 0.9fr 1.2fr;
  }
  .resources-page #site-foot .disc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .resources-page #site-close {
    padding: 40px 0 48px;
  }
  .resources-page #site-foot .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
  }
  .resources-page #site-foot .foot-id {
    grid-column: 1 / -1;
  }
  .resources-page #site-foot .cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 40px;
  }
  .resources-page #site-foot .disc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .resources-page #site-foot .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .resources-page #site-close > .wrap,
  .resources-page #site-foot > .wrap {
    width: calc(100% - 40px);
  }
}

@media (max-width: 620px) {
  .resources-page #site-close {
    padding: 32px 0 28px;
  }
  .resources-page #site-close .btns {
    display: grid;
    grid-template-columns: 1fr;
  }
  .resources-page #site-close .btns .btn {
    width: 100%;
  }
  .resources-page #site-foot {
    padding-top: 24px;
  }
  .resources-page #site-foot .foot-top {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 20px;
  }
  .resources-page #site-foot .foot-id,
  .resources-page #site-foot .foot-contact-col,
  .resources-page #site-foot .foot-hours {
    grid-column: auto;
  }
  .resources-page #site-foot .cols {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 0 20px;
  }
  .resources-page #site-foot .disc {
    grid-template-columns: 1fr;
    padding: 16px 0;
  }
  .resources-page #site-foot .bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 28px;
  }
}