/* ==========================================================================
   ChargeGuard styles
   Navy + cyan from the logo, soft rounded cards. Built on Bootstrap 5.3.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  /* surfaces */
  --bg:        #ffffff;
  --bg-soft:   #f5f9fc;
  --bg-tint:   #e8f3fa;
  --card:      #ffffff;
  --line:      #e2eaf1;
  --line-2:    #cad8e4;

  /* type */
  --ink:       #12233b;
  --muted:     #52627a;
  --dim:       #5d6c83;      /* 5.3:1 on white */

  /* brand */
  --blue:      #06294f;
  --blue-2:    #0e4c86;
  --blue-3:    #3a8fd0;
  --blue-soft: #e0eff9;

  /* "gold" tokens now hold the logo cyan; names kept so markup is unchanged.
     cyan is a background colour, never text on white (2.0:1).
     use --gold-ink where a cyan-family colour has to be readable. */
  --gold:      #00c6ff;
  --gold-2:    #5fdcff;
  --gold-ink:  #0072a3;

  --danger:    #dc2626;

  /* shape */
  --r-card:  24px;
  --r-sm:    16px;
  --r-pill:  999px;

  /* shadows, tinted blue rather than grey */
  --sh-sm: 0 2px 10px rgba(6, 41, 79, .06);
  --sh:    0 10px 30px rgba(6, 41, 79, .09);
  --sh-lg: 0 24px 56px rgba(6, 41, 79, .15);

  --nav-h: 78px;
}

/* ---------- 2. pastel accents ----------
   .accent-* on a card or section tints everything inside it. Class names
   kept from the old palette so the markup did not have to change. */
/* Only two hues exist in this brand, navy and cyan, so the tints are
   tones of those plus one slate neutral. The class names are historical;
   what matters is that nothing here fights #06294f and #00c6ff. */
.accent-blue    { --acc: #06294f; --acc-soft: #e4eef7; --acc-line: #c8d9e9; --acc-wash: rgba(6, 41, 79, .12); }
.accent-violet  { --acc: #153f6b; --acc-soft: #e7eef5; --acc-line: #cad7e5; --acc-wash: rgba(21, 63, 107, .12); }
.accent-cyan    { --acc: #1a5a8f; --acc-soft: #e5f0f9; --acc-line: #c6dcee; --acc-wash: rgba(26, 90, 143, .12); }
.accent-amber   { --acc: #0072a3; --acc-soft: #e3f6fd; --acc-line: #b5e6f8; --acc-wash: rgba(0, 198, 255, .14); }
.accent-emerald { --acc: #0a6485; --acc-soft: #e4f4fa; --acc-line: #bfe2f0; --acc-wash: rgba(10, 100, 133, .12); }
.accent-rose    { --acc: #3f4d5e; --acc-soft: #eef2f6; --acc-line: #d6dee7; --acc-wash: rgba(63, 77, 94, .12); }

/* ---------- 3. base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

/* "Get in touch" links land on the whole form card, with air under the navbar */
#heroForm { scroll-margin-top: 24px; }

/* decorative blobs sit outside their boxes, clip them here too */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.2;
  color: var(--ink);
}

p { color: var(--muted); line-height: 1.75; }
a { text-decoration: none; }

::selection { background: var(--gold); color: var(--ink); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .accordion-button:focus-visible {
  outline: 2px solid var(--blue-2);
  outline-offset: 3px;
  box-shadow: none;
}

/* ---------- 4. layout helpers ---------- */
/* clip, not hidden: hidden makes the section a scroll container, which
   stops the sticky columns inside it; hidden stays as the fallback */
.section { padding: 104px 0; position: relative; overflow: hidden; overflow: clip; }
.section-sm { padding: 68px 0; }

.section-alt {
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.section-alt::before,
.section-alt::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
.section-alt::before {
  width: 460px; height: 460px; top: -200px; left: -160px;
  background: radial-gradient(circle, var(--acc-wash, rgba(6, 41, 79, .13)), transparent 70%);
}
.section-alt::after {
  width: 480px; height: 480px; bottom: -220px; right: -180px;
  background: radial-gradient(circle, rgba(0, 198, 255, .16), transparent 70%);
}
.section-alt > .container,
.section-alt > .reveal { position: relative; z-index: 1; }

.section-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 0; text-wrap: balance; }
/* the hand-placed breaks only work in the widest container; narrower, the
   first half wraps as well and leaves one word alone, so balance takes over */
@media (max-width: 1399.98px) {
  .section-title br { display: none; }
}
.section-title + .lead-cg { margin-top: 16px; }

/* Section header: label and heading left, intro right. Reads more like an
   article opener than the usual centred stack. */
.sec-head { margin-bottom: 56px; }
.sec-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--acc, var(--blue-2));
  margin-bottom: 18px;
  padding-top: 16px;
  position: relative;
}
.sec-label::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 4px;
  border-radius: 2px;
  background: var(--gold);
}
.sec-head .section-title { text-wrap: balance; }

.text-grad {
  background: linear-gradient(100deg, var(--blue) 0%, var(--blue-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead-cg {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--muted);
  line-height: 1.8;
}

/* small label above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--acc-soft, var(--blue-soft));
  color: var(--acc, var(--blue-2));
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
/* "Chargeback prevention platform" broke onto two lines at 320px */
@media (max-width: 359.98px) {
  .eyebrow { font-size: 11px; letter-spacing: .5px; padding: 7px 12px; gap: 7px; }
}
.eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acc, var(--blue-2));
  position: relative;
  flex: none;
}
.eyebrow .dot::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(.6); opacity: .45; }
  100% { transform: scale(1.9); opacity: 0; }
}

.glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.glow-teal { background: radial-gradient(circle, rgba(0, 198, 255, .30), transparent 70%); }
.glow-blue { background: radial-gradient(circle, rgba(58, 143, 208, .28), transparent 70%); }

/* ---------- 5. buttons ---------- */
.btn {
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 14px 30px;
  font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* gold with near-black ink: the loudest thing on the page, primary
   action only */
.btn-cg {
  background: var(--gold);
  color: var(--ink);
  border: none;
  box-shadow: 0 6px 20px rgba(0, 198, 255, .40);
}
.btn-cg:hover, .btn-cg:focus {
  background: var(--gold-2);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 198, 255, .5);
}

.btn-cg-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--line-2);
}
.btn-cg-outline:hover, .btn-cg-outline:focus {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
}

.btn-sm-cg { padding: 10px 22px; font-size: 14px; }

/* ---------- 6. navbar ---------- */
.cg-navbar {
  min-height: var(--nav-h);
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .3s ease, box-shadow .3s ease;
}
.cg-navbar.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--sh-sm);
}

.navbar-brand { display: flex; align-items: center; padding: 0; }
/* The logo files carry a transparent margin, so height is set on the
   image and width follows the file's own ratio. */
.brand-logo { display: block; height: 46px; width: auto; }
.cg-footer .brand-logo { height: 52px; }
@media (max-width: 575.98px) {
  .brand-logo { height: 38px; }
}


.cg-navbar .nav-link {
  color: var(--muted);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 14px !important;
  transition: color .2s ease;
}
.cg-navbar .nav-link:hover,
.cg-navbar .nav-link.active { color: var(--blue-2); }
.cg-navbar .navbar-nav .nav-link,
.cg-navbar .navbar-nav .btn { white-space: nowrap; }

/* between lg and xl the full menu plus the button is wider than the
   container, which broke "How It Works" and the button onto two lines */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .brand-logo { height: 40px; }
  .cg-navbar .nav-link { font-size: 14px; padding: 8px 8px !important; }
  .cg-navbar .navbar-nav .ms-lg-3 { margin-left: 8px !important; }
  .cg-navbar .btn-sm-cg { padding: 9px 16px; font-size: 13.5px; }
}

.navbar-toggler { border: 1px solid var(--line-2); padding: 6px 10px; color: var(--ink); }
.navbar-toggler:focus { box-shadow: none; }

/* ---------- 7. hero ----------
   Flat two-panel layout. No gradients: a solid white left half, a solid
   blue block running off the right edge, and hard-edged shapes on top. */
.hero {
  position: relative;
  padding: 150px 0 110px;
  overflow: hidden;
  background: #fff;
}
.hero .container { position: relative; z-index: 3; }

/* The solid block, bleeding off-screen right. It starts below the navbar
   so the nav never sits half on white and half on blue, and at 50% so the
   text column cannot run underneath it. */
.hero-panel {
  position: absolute;
  top: var(--nav-h); bottom: 0;
  left: 50%; right: 0;
  background: var(--blue);
  border-radius: 90px 0 0 90px;
  overflow: hidden;
  z-index: 0;
}
.hero-dots { position: absolute; inset: 0; }

/* Gold ring straddling the panel edge. Sits fully inside the hero: when
   it was clipped by the bottom edge it read as a mistake. */
.hero-ring {
  position: absolute;
  width: 190px; height: 190px;
  left: calc(50% - 95px);
  bottom: 46px;
  border: 11px solid var(--gold);
  border-radius: 50%;
  z-index: 1;
}
/* small solid square, off-grid on purpose */
.hero-square {
  position: absolute;
  width: 74px; height: 74px;
  top: 132px;
  left: calc(50% - 40px);
  background: var(--gold);
  border-radius: 18px;
  transform: rotate(14deg);
  z-index: 1;
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.12;
  margin-bottom: 18px;
  text-wrap: balance;
}
/* flat solid colour, no gradient fill */
.hero h1 .hl {
  color: var(--blue);
  position: relative;
  /* its own line, so the coloured phrase is never split across two lines
     half dark and half coloured */
  display: block;
}

/* proof points sit right under the intro, action comes last */
.hero-points {
  list-style: none;
  padding: 20px 0 0;
  margin: 22px 0 0;
  border-top: 1px solid var(--line);
}
.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 14px;
}
.hero-points li:last-child { margin-bottom: 0; }
.hero-points i {
  color: var(--blue);
  background: var(--blue-soft);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  margin-top: 2px;
  flex: none;
}

/* partner marks close out the left column: the last thing read before
   the eye moves to the form */
.hero-partners {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-partners-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px;
}
/* The four files share one canvas size, so they sit in four equal columns
   that shrink together when the column is narrow, instead of wrapping and
   leaving the last mark alone on a second row. */
.partner-logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 80px));
  align-items: center;
  gap: 16px 30px;
}
.partner-logos img {
  width: 100%;
  height: auto;
  opacity: .75;
  transition: opacity .25s ease;
}
.partner-logos img:hover { opacity: 1; }

/* a text link, so it does not compete with the form's gold button */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 3px;
  transition: gap .2s ease, color .2s ease;
}
.hero-link:hover { color: var(--blue-2); gap: 14px; }

/* the hero's right column is the lead form, sitting on the blue panel */
.hero-form {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: var(--r-card);
  padding: 34px 32px 30px;
  box-shadow: 0 30px 64px rgba(3, 18, 36, .34);
}
.hero-form h2 { font-size: 25px; margin-bottom: 8px; }
.hero-form > p { font-size: 14.5px; line-height: 1.65; margin-bottom: 22px; }

.hero-form .form-control,
.hero-form .form-select { padding: 12px 16px; font-size: 14.5px; }
/* on small phones the longest placeholders were cut off and the submit
   label ran to two lines */
@media (max-width: 399.98px) {
  .hero-form { padding-left: 22px; padding-right: 22px; }
  .hero-form .form-control,
  .hero-form .form-select { padding-left: 13px; padding-right: 13px; font-size: 14px; }
  .hero-form .btn { padding-left: 16px; padding-right: 16px; font-size: 14.5px; }
}

.form-check { display: flex; gap: 10px; align-items: flex-start; padding: 0; margin: 4px 0 2px; }
.form-check-input {
  width: 18px; height: 18px;
  margin: 2px 0 0;
  flex: none;
  border: 1.5px solid var(--line-2);
  border-radius: 5px;
}
/* Bootstrap's .form-check .form-check-input floats the box and pulls it
   1.5em left to sit in padding this flex row does not have, which pushed
   the checkbox outside the form's edge */
.form-check .form-check-input { float: none; margin-left: 0; }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(6, 41, 79, .15); border-color: var(--blue-2); }
.form-check-label { font-size: 11.5px; line-height: 1.55; color: var(--dim); }

.form-note { font-size: 12.5px; color: var(--dim); text-align: center; margin: 14px 0 0; }
.form-note.ok  { color: var(--gold-ink); font-weight: 600; }
.form-note.err { color: var(--danger); font-weight: 600; }

/* ---------- 9. cards ----------
   Every card sits on its own pastel tint rather than plain white. */

.cg-card:hover,
.feature-box:hover,
.step:hover {
  transform: translateY(-6px);
  border-color: var(--acc-line, var(--line-2));
  box-shadow: var(--sh);
}

/* Stats sit on one solid blue slab rather than four pastel cards. Four
   different tints read as scattered next to a two-colour brand. */
.stat-band {
  position: relative;
  background: var(--blue);
  border-radius: 32px;
  padding: 46px 20px;
  overflow: hidden;
}
.stat-dots { position: absolute; inset: 0; }
.stat-row { position: relative; z-index: 1; }

.stat-item {
  height: 100%;
  padding: 6px 28px;
  display: flex;
  flex-direction: column;
}
.stat-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 19px;
  margin-bottom: 20px;
}
.stat-value {
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -1.6px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* the dash and slash are structure, not value, so they sit back */
.stat-sep { opacity: .45; margin: 0 1px; font-weight: 600; }
.stat-unit { font-size: .5em; font-weight: 700; letter-spacing: 0; margin-left: 3px; }

.stat-label {
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.55;
  margin: 0;
  text-wrap: balance;
}
.stat-note {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .5);
}

/* hairline rules between the four, only where they sit side by side */
@media (min-width: 992px) {
  .stat-row > [class*="col-"] + [class*="col-"] .stat-item {
    border-left: 1px solid rgba(255, 255, 255, .16);
  }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .stat-row > [class*="col-"]:nth-child(even) .stat-item {
    border-left: 1px solid rgba(255, 255, 255, .16);
  }
  /* the gap above a stacked row goes on the column, not the item: margin on
     a 100%-tall item pushed the last note into the band's bottom padding */
  .stat-row > [class*="col-"]:nth-child(n+3) { margin-top: 30px; }
  .stat-row > [class*="col-"]:nth-child(n+3) .stat-item {
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
}
/* four across on a phone left each mark ~50px wide and the small
   wordmarks unreadable, so they go two by two */
@media (max-width: 399.98px) {
  .partner-logos { grid-template-columns: repeat(2, minmax(0, 104px)); justify-content: space-around; row-gap: 12px; }
}
@media (max-width: 575.98px) {
  .partner-logos { column-gap: 14px; }
  .stat-band { padding: 34px 12px; border-radius: 24px; }
  .stat-item { padding: 0 18px; }
  .stat-row > [class*="col-"] + [class*="col-"] { margin-top: 26px; }
  .stat-row > [class*="col-"] + [class*="col-"] .stat-item {
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
}

/* Service cards stay white so the photos carry the colour. */
.cg-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  height: 100%;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* solid blue tile, white glyph */
.cg-card .icon-tile {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(6, 41, 79, .22);
}

/* The third card runs on gold so the row has a clear anchor. Body text
   drops to near-ink: --muted only clears 3.6:1 on this background. */
.cg-card-gold {
  background: var(--gold);
  border-color: transparent;
}
.cg-card-gold .cg-card-body h3 { color: var(--ink); }
.cg-card-gold .cg-card-body p { color: rgba(18, 35, 59, .78); }
.cg-card-gold .card-link { color: var(--blue); }
.cg-card-gold .icon-tile {
  background: var(--blue);
  color: var(--gold);
  box-shadow: 0 6px 16px rgba(6, 41, 79, .3);
}
.cg-card-gold:hover { border-color: var(--gold-ink); }
.cg-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cg-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}
.cg-card:hover .cg-card-img img { transform: scale(1.06); }
.cg-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--acc-wash, rgba(6, 41, 79, .13)) 0%, transparent 60%);
}
/* big numeral sitting on the photo, ties the three cards into a set */
.card-num {
  position: absolute;
  left: 20px; bottom: 14px;
  z-index: 1;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: #fff;
  opacity: .92;
  text-shadow: 0 2px 14px rgba(3, 18, 36, .45);
}
.cg-card-body { padding: 26px 24px 28px; }
.cg-card-body h3 { font-size: 20px; margin-bottom: 10px; }
.cg-card-body p { font-size: 14.5px; margin-bottom: 16px; }

.card-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--acc, var(--blue-2));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: gap .2s ease;
}
.card-link:hover { color: var(--acc, var(--blue-2)); gap: 12px; }

/* white icon tile reads cleanly on a pastel card */
.icon-tile {
  width: 50px; height: 50px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--acc, var(--blue-2));
  font-size: 22px;
  margin-bottom: 18px;
  flex: none;
  box-shadow: var(--sh-sm);
}
.icon-tile-solid { background: var(--acc, var(--blue)); color: #fff; }

.feature-box {
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  height: 100%;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature-box h3 { font-size: 18px; margin-bottom: 9px; }
.feature-box p { font-size: 14.5px; margin: 0; }
.feature-box h3 .bi { color: var(--blue-2); }
.feature-box .icon-tile {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(6, 41, 79, .22);
}

/* last box in each row runs on gold, same as the services and steps rows */
.feature-box-gold {
  background: var(--gold);
  border-color: transparent;
}
.feature-box-gold h3 { color: var(--ink); }
.feature-box-gold h3 .bi { color: var(--blue); }
.feature-box-gold p { color: rgba(18, 35, 59, .78); }
.feature-box-gold .icon-tile {
  background: var(--blue);
  color: var(--gold);
  box-shadow: 0 6px 16px rgba(6, 41, 79, .3);
}
.feature-box-gold:hover { border-color: var(--gold-ink); }

/* ---------- 10. process steps ---------- */
.step {
  padding: 30px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  height: 100%;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step .icon-tile {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 16px rgba(6, 41, 79, .22);
}

/* last step runs on gold, closing the row the way the services row does */
.step-gold {
  background: var(--gold);
  border-color: transparent;
}
.step-gold .step-num { color: var(--ink); opacity: .32; }
.step-gold h3 { color: var(--ink); }
.step-gold p { color: rgba(18, 35, 59, .78); }
.step-gold .icon-tile {
  background: var(--blue);
  color: var(--gold);
  box-shadow: 0 6px 16px rgba(6, 41, 79, .3);
}
.step-gold:hover { border-color: var(--gold-ink); }
/* numeral and icon share one row: the number carries the sequence, the
   icon carries the meaning */
.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.step-num {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--acc, var(--blue-2));
  opacity: .28;
}
.step .icon-tile { margin-bottom: 0; width: 44px; height: 44px; font-size: 20px; }
.step h3 { font-size: 18px; margin-bottom: 10px; }
.step p { font-size: 14.5px; margin: 0; }

.steps-row { position: relative; }
@media (min-width: 992px) {
  .steps-row::before {
    content: '';
    position: absolute;
    top: 62px; left: 12%; right: 12%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px);
  }
  .steps-row > * { position: relative; z-index: 1; }
}

/* ---------- 11. split image sections ---------- */
.split-img-frame { position: relative; }
/* pastel block offset behind the photo, down and left so it cannot
   push the page wider than the viewport */
.split-img-frame::before {
  content: '';
  position: absolute;
  inset: 20px 20px -20px -20px;
  border-radius: var(--r-card);
  background: var(--acc-soft, var(--blue-soft));
}
.split-img-frame > .split-img { position: relative; z-index: 1; }

/* Where the text column runs much taller than the picture, centring left
   150-330px of blank above and below it. The picture starts level with the
   text and stays in view while the text scrolls past. */
@media (min-width: 992px) {
  .split-follow { align-items: flex-start !important; }
  .split-follow .split-visual { position: sticky; top: calc(var(--nav-h) + 32px); }
}
/* same idea for the ROI inputs, which are half the height of the results
   beside them; only where the card fits on screen under the navbar */
@media (min-width: 992px) and (min-height: 780px) {
  .roi-side { position: sticky; top: calc(var(--nav-h) + 24px); }
}

.split-img {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh);
}
.split-img img {
  width: 100%; height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.split-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--acc-wash, rgba(6, 41, 79, .13)) 0%, transparent 70%);
}

.check-list { list-style: none; padding: 0; margin: 26px 0 0; }
.check-list li { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; }
.check-list i {
  color: var(--ink);
  background: var(--gold);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  margin-top: 2px;
  flex: none;
}
.check-list strong { display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.check-list span { font-size: 14.5px; color: var(--muted); line-height: 1.65; }

/* ---------- 12. testimonials ---------- */
.quote-card {
  position: relative;
  padding: 32px 30px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.quote-card:hover {
  transform: translateY(-4px);
  border-color: var(--acc-line, var(--line-2));
  box-shadow: var(--sh);
}
/* oversized mark sitting behind the text, not competing with it */
.quote-mark {
  position: absolute;
  top: 6px; right: 22px;
  font-size: 96px;
  line-height: 1;
  font-weight: 800;
  color: var(--acc, var(--blue));
  opacity: .10;
  pointer-events: none;
}
.quote-card p {
  position: relative;
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.75;
  flex: 1;
  margin-bottom: 24px;
}
/* keeps the first line clear of the quote mark in the corner */
.quote-card p::before {
  content: '';
  float: right;
  width: 46px;
  height: 1.75em;
}
.quote-author {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.quote-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--acc, var(--blue));
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  flex: none;
}
.qa-name { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.qa-role { font-size: 12.5px; color: var(--muted); }

/* slider: scroll-snap does the sliding, JS drives arrows/dots/autoplay */
.tslider { position: relative; }
.tslider-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* no side padding or the snap points drift off the JS step positions */
  padding: 6px 0 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tslider-track::-webkit-scrollbar { display: none; }
.tslider-track:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 4px; border-radius: var(--r-card); }

.tslider-item { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
.tslider-item > .quote-card { height: 100%; }

.tslider-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 32px; }
.tslider-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: #fff;
  color: var(--blue);
  font-size: 17px;
  display: grid;
  place-items: center;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.tslider-btn:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-2px);
}
.tslider-dots { display: flex; align-items: center; gap: 8px; }
.tslider-dot {
  position: relative;
  width: 9px; height: 9px;
  padding: 0;
  border: none;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transition: width .28s ease, background .28s ease;
}
/* a 9px dot is too small to tap, so the hit area extends past it */
.tslider-dot::after { content: ''; position: absolute; inset: -14px -4px; }
.tslider-dot.active { width: 28px; background: var(--blue); }

/* ---------- 13. integrations ----------
   The logo rails and the follow-up question live on one blue slab, so the
   section reads as a single object. It sits inside the container so its
   left edge lines up with the heading above it. */
.int-block {
  position: relative;
  background: var(--blue);
  border-radius: 32px;
  padding: 44px 0 40px;
  overflow: hidden;
}
.int-dots { position: absolute; inset: 0; }
.int-rails { position: relative; z-index: 1; }

.int-foot {
  position: relative;
  z-index: 1;
  margin-top: 36px;
  padding: 30px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
  text-align: center;
}
.int-foot p {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  margin: 0 0 18px;
}

@media (max-width: 767.98px) {
  .int-block { border-radius: 24px; padding: 34px 0 32px; }
  .int-foot { margin-top: 28px; padding-top: 24px; }
}

/* ---------- 13b. marquee ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  /* fade well clear of the slab's rounded corners, otherwise chips look
     chopped rather than faded */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.marquee-track { display: flex; gap: 14px; width: max-content; padding: 5px 0; }
/* the track only animates once main.js has cloned it, otherwise a rail that
   has not been doubled would jump at -50% */
.marquee-track.is-looping { animation: marquee var(--dur, 60s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee + .marquee { margin-top: 14px; }
.marquee-reverse .marquee-track { animation-direction: reverse; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.chip {
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: color .25s ease, transform .25s ease;
}
.chip:hover { color: var(--blue-2); transform: translateY(-2px); }

/* Logo version of the chip. The supplied logos are two different things:
   wide wordmarks that already say the brand name, and near-square marks
   that do not. gen-logos.py measures each file and tags the square ones
   .is-mark, which shows the name in text beside the icon. Everything sits
   on a white pill because most of the files have a white background baked
   in, so the pill and the artwork blend into one shape. */
.chip-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 74px;
  min-width: 148px;
  padding: 0 26px;
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.chip-logo:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh);
}

/* wordmark: the artwork is the whole chip */
.chip-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 148px;
  max-height: 42px;
  object-fit: contain;
  border-radius: 6px;
}
.chip-logo > b { display: none; }

/* square mark: small rounded icon, brand name in type next to it */
.chip-logo.is-mark { padding: 0 24px 0 14px; }
.chip-logo.is-mark img {
  width: 44px;
  height: 44px;
  max-width: none;
  max-height: none;
  flex: 0 0 44px;
  border-radius: 11px;
}
.chip-logo.is-mark > b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -.2px;
}

@media (max-width: 575.98px) {
  .chip-logo { height: 62px; min-width: 122px; padding: 0 18px; gap: 9px; }
  .chip-logo img { max-width: 116px; max-height: 34px; }
  .chip-logo.is-mark { padding: 0 18px 0 10px; }
  .chip-logo.is-mark img { width: 36px; height: 36px; flex-basis: 36px; border-radius: 9px; }
  .chip-logo.is-mark > b { font-size: 12.5px; }
  .marquee-track { gap: 10px; }
  .marquee + .marquee { margin-top: 10px; }
}

/* left column of the FAQ, held in place while the answers scroll */
.faq-aside { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-aside .lead-cg { margin: 16px 0 0; }
.faq-aside .hero-link { margin-top: 22px; }
@media (max-width: 991.98px) {
  .faq-aside { position: static; }
}
/* the aside is only ~280-325px wide below xxl, narrower than
   "Representment," at the fluid heading size */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .faq-aside .section-title { font-size: min(3.4vw, 2.1rem); }
}

/* ---------- 14. accordion ---------- */
.accordion-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm) !important;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .25s ease;
}
.accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--acc-line, var(--line-2)); }
.accordion-button {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 16.5px;
  padding: 22px 24px;
  gap: 14px;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) { background: var(--acc-soft, var(--blue-soft)); color: var(--acc, var(--blue)); }
.accordion-body { color: var(--muted); font-size: 14.5px; line-height: 1.8; padding: 20px 24px 24px; background: #fff; }

/* ---------- 15. CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  padding: 74px 40px;
  text-align: center;
  background: var(--blue);
}
/* same flat vocabulary as the hero: dot field plus two gold shapes */
.cta-dots { position: absolute; inset: 0; }
.cta-ring {
  position: absolute;
  width: 210px; height: 210px;
  top: -70px; left: -60px;
  border: 11px solid var(--gold);
  border-radius: 50%;
  opacity: .85;
}
.cta-square {
  position: absolute;
  width: 92px; height: 92px;
  right: 46px; bottom: -26px;
  background: var(--gold);
  border-radius: 22px;
  transform: rotate(-12deg);
}
.cta-band > .cta-inner { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 16px; color: #fff; text-wrap: balance; }
.cta-band .text-grad { background: none; color: var(--gold); }
.cta-band .lead-cg { color: rgba(255, 255, 255, .85); }
.cta-band .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }
.cta-band .eyebrow .dot { background: var(--gold); }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}
/* outline button for a dark ground: the page-wide one is built for white */
.btn-cta-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.btn-cta-ghost:hover,
.btn-cta-ghost:focus {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
  transform: translateY(-2px);
}
/* both buttons side by side need about 617px, a hair more than the band
   has at 768 and 1024 */
@media (max-width: 1199.98px) {
  .cta-actions .btn { padding-left: 24px; padding-right: 24px; }
}
.cta-note {
  margin: 22px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
  text-wrap: balance;
}
/* a 320px phone: the heading ran to five lines and the email address
   touched the edges of its button */
@media (max-width: 359.98px) {
  .cta-band { padding-left: 16px; padding-right: 16px; }
  .cta-band h2 { font-size: 1.5rem; }
  .cta-actions .btn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
}

/* ---------- 16. forms ---------- */
.form-control, .form-select {
  background: #fff;
  border: 1.5px solid var(--line-2);
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 17px;
  font-size: 15px;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.form-control::placeholder { color: var(--dim); }
.form-control:focus, .form-select:focus {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 4px rgba(6, 41, 79, .12);
  color: var(--ink);
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--danger);
  background-image: none;
  box-shadow: none;
}
.form-label { margin-bottom: 7px; font-weight: 700; }

/* ---------- 17. footer ---------- */
.cg-footer {
  position: relative;
  background: #041d38;
  color: #e0eff9;
  padding: 66px 0 0;
}
.cg-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--gold);
}
.cg-footer p { color: #a3b7cc; }
.cg-footer h5 {
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
  font-weight: 700;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 11px; color: #a3b7cc; }
.footer-links a { color: #a3b7cc; font-size: 14.5px; transition: color .2s ease, padding-left .2s ease; }
.footer-links a:hover { color: var(--gold); padding-left: 4px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 48px;
  padding: 24px 0;
  font-size: 13.5px;
  color: #a3b7cc;
}
.footer-bottom a { color: #a3b7cc; }
/* On touch screens standalone text links get a 24px+ hit area without
   moving anything: padding grows the box, the negative margin gives the
   space back. */
@media (pointer: coarse) {
  .footer-bottom a,
  .card-link { padding-block: 6px; margin-block: -6px; }
}
.footer-bottom a:hover { color: var(--gold); }

.social-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #c0d0df;
  font-size: 16px;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.social-btn:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 46px; height: 46px;
  border-radius: 14px;
  border: none;
  background: var(--blue);
  box-shadow: var(--sh);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
  z-index: 1030;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold); color: var(--ink); }

/* ---------- 18. scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- 19. responsive ---------- */
@media (max-width: 991.98px) {
  .section { padding: 76px 0; }
  .hero { padding: 112px 0 72px; }

  /* the panel only works as a side-by-side split, so below lg the whole
     hero becomes the blue block instead */
  .hero { background: var(--blue); }
  .hero-panel { left: 0; border-radius: 0; }
  .hero-ring, .hero-square { display: none; }
  .hero h1 { color: #fff; }
  .hero h1 .hl { color: var(--gold); }
  .hero .lead-cg { color: rgba(255, 255, 255, .82); }
  .hero-points li { color: rgba(255, 255, 255, .82); }
  .hero-points i { color: var(--gold); }
  .hero .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }
  .hero .eyebrow .dot { background: var(--gold); }
  .hero-points { border-top-color: rgba(255, 255, 255, .2); }
  .hero-points i { background: var(--gold); color: var(--blue); }
  /* scoped to the hero: the FAQ asides reuse .hero-link on a white ground */
  .hero .hero-link { color: #fff; }
  .hero .hero-link:hover { color: var(--gold); }
  .hero-partners { border-top-color: rgba(255, 255, 255, .2); }
  .hero-partners-label { color: rgba(255, 255, 255, .6); }
  /* dark marks vanish on the blue mobile hero, so give them a white plate */
  .partner-logos {
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    gap: 14px 26px;
    justify-content: space-between;
  }
  .partner-logos img { opacity: 1; }
  .tslider-item { flex-basis: calc((100% - 24px) / 2); }

  .cg-navbar .navbar-collapse {
    background: #fff;
    border-radius: var(--r-card);
    box-shadow: var(--sh);
    padding: 18px;
    margin-top: 14px;
    /* the navbar is fixed, so on a phone held sideways (390px tall) the
       open menu ran off the screen with no way to reach Contact or the
       button; it scrolls inside itself instead */
    max-height: calc(100vh - var(--nav-h) - 24px);
    max-height: calc(100dvh - var(--nav-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cg-navbar .nav-link { padding: 10px 6px !important; }

  /* stacked, the photo would come before its own heading, so the text
     column leads and the pastel plate stops reaching past the gutter */
  .row.flex-lg-row-reverse { flex-direction: column-reverse; }
  .split-img-frame::before { inset: 18px 14px -18px 14px; }
}

@media (max-width: 767.98px) {
  .tslider-track { gap: 16px; }
  .tslider-item { flex-basis: 100%; }
}

@media (max-width: 575.98px) {
  .section { padding: 62px 0; }
  .hero { padding: 100px 0 60px; }
  .cta-band { padding: 58px 22px 66px; border-radius: 24px; }
  /* at desktop size the ring crossed the eyebrow and the square sat on
     the reply note, so both shrink back into the corners */
  .cta-ring { width: 130px; height: 130px; top: -80px; left: -70px; border-width: 9px; }
  .cta-square { width: 56px; height: 56px; right: 18px; bottom: -24px; border-radius: 14px; }
  .btn { width: 100%; }
  .btn-sm-cg, .navbar .btn { width: auto; }
}

/* ---------- 19b. comparison table ---------- */
.cmp-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.cmp-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; }
.cmp-table th,
.cmp-table td { padding: 16px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th {
  background: var(--bg-tint);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cmp-table thead th:last-child { background: var(--blue); color: #fff; }
.cmp-table tbody th {
  width: 24%;
  min-width: 150px;
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 600;
}
.cmp-table tbody td { color: var(--muted); }
.cmp-table tbody td:last-child {
  background: rgba(0, 198, 255, .12);
  color: var(--ink);
  font-weight: 500;
}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: 0; }
/* hanging indent, so a wrapped line starts under the text, not the tick */
.cmp-table td:has(> .bi) { padding-left: 46px; text-indent: -24px; }
.cmp-table .bi { color: var(--gold-ink); margin-right: 8px; text-indent: 0; }
.cmp-note { font-size: 14px; color: var(--dim); margin: 16px 0 0; }

/* Swiped sideways, the table hid the ChargeGuard column, which is the one
   the section exists for. Below 768px each row becomes a card holding both
   answers, labelled from data-label. */
@media (max-width: 767.98px) {
  .cmp-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .cmp-table, .cmp-table tbody { display: block; }
  .cmp-table thead { display: none; }
  .cmp-table tbody tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    margin-bottom: 14px;
  }
  .cmp-table tbody tr:last-child { margin-bottom: 0; }
  .cmp-table tbody th,
  .cmp-table tbody td {
    display: block;
    width: auto;
    min-width: 0;
    padding: 14px 18px;
    font-size: 14.5px;
    border-bottom: 1px solid var(--line);
  }
  .cmp-table tbody tr:last-child th { border-bottom: 1px solid var(--line); }
  .cmp-table tbody td:last-child { border-bottom: 0; }
  .cmp-table tbody td:has(> .bi) { padding-left: 42px; text-indent: -24px; }
  .cmp-table tbody td:has(> .bi)::before { margin-left: -24px; }
  .cmp-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 5px;
    text-indent: 0;
  }
  .cmp-table tbody td:last-child::before { color: var(--gold-ink); }
}


/* ---------- 19c. ROI calculator ----------
   Same white card + blue header language as the rest of the page. The only
   colours are blue, gold and the existing danger red for the deductions. */
.roi-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.roi-card-head {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -.2px;
  padding: 17px 24px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.roi-head-icon {
  width: 30px; height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .14);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 15px;
}

.roi-card-body { padding: 24px; }

/* sub-header for the two smaller cards, which have no blue bar */
.roi-card-sub { padding: 22px 24px 4px; }
.roi-card-sub h3 { font-size: 17px; margin: 0 0 4px; }
.roi-card-sub p { font-size: 13px; color: var(--dim); margin: 0; line-height: 1.5; }

/* ---- inputs ---- */
.roi-field { margin-bottom: 26px; }

.roi-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 9px;
}
.roi-label i { color: var(--blue-2); margin-right: 5px; }
.roi-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.roi-label-row b {
  font-size: 21px;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.8px;
  font-variant-numeric: tabular-nums;
}

.roi-input {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--line-2);
  border-radius: 14px;
  padding: 0 16px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.roi-input:focus-within {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 4px rgba(14, 76, 134, .12);
}
.roi-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 13px 0;
  font: 700 17px/1.2 inherit;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.roi-input input::-webkit-outer-spin-button,
.roi-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi-input input:focus-visible { outline: none; box-shadow: none; }
.roi-prefix { font-weight: 700; font-size: 17px; color: var(--dim); }
.roi-suffix { font-size: 12.5px; color: var(--dim); white-space: nowrap; }

/* one slider style, filled portion driven by --fill from main.js */
.roi-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  margin: 13px 0 0;
  border-radius: var(--r-pill);
  background: linear-gradient(to right,
              var(--blue) 0 var(--fill, 50%),
              var(--line) var(--fill, 50%) 100%);
  cursor: pointer;
}
.roi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(6, 41, 79, .45);
  cursor: pointer;
}
.roi-range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(6, 41, 79, .45);
  cursor: pointer;
}
.roi-range::-moz-range-track { background: transparent; border: 0; }
.roi-range:focus-visible { outline-offset: 6px; }

.roi-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 7px;
}

/* ---- results tables ---- */
.roi-scroll { overflow-x: auto; }

.roi-table {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.roi-table thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--dim);
  padding: 16px 20px 10px;
  text-align: right;
  white-space: nowrap;
}
.roi-table thead th:first-child { text-align: left; width: 44%; }

.roi-table tbody th {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  padding: 14px 20px;
  line-height: 1.45;
}
.roi-table tbody th span { font-weight: 500; color: var(--dim); white-space: nowrap; }
.roi-table tbody td {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  padding: 14px 20px;
  white-space: nowrap;
}
.roi-table tbody tr + tr th,
.roi-table tbody tr + tr td { border-top: 1px solid var(--line); }

/* row emphasis: today is a gold wash, ours is a blue wash, the gap is
   solid gold because it is the number the whole section exists for */
.roi-table tr.is-current th,
.roi-table tr.is-current td { background: #e6f7fe; color: var(--gold-ink); }
.roi-table tr.is-cg th,
.roi-table tr.is-cg td { background: var(--blue-soft); color: var(--blue); }
.roi-table tr.is-cg th span { color: var(--blue-2); }
.roi-table tr.is-add th,
.roi-table tr.is-add td { background: var(--gold); color: var(--ink); font-weight: 800; }
.roi-table tr.is-add th { font-weight: 800; }
.roi-table tr.is-net th,
.roi-table tr.is-net td { background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.roi-table td.is-cost { color: var(--danger); }

.roi-table-sm { min-width: 380px; }
.roi-table-sm thead th { padding: 14px 20px 8px; }
.roi-table-sm tbody th,
.roi-table-sm tbody td { padding: 11px 20px; font-size: 14px; }
.roi-table-sm tbody th { font-size: 13.5px; }

.roi-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 12.5px;
  color: var(--dim);
}
.roi-roi {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--gold);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.roi-roi b { font-size: 15px; letter-spacing: -.4px; text-transform: none; }

.roi-fine {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--dim);
  margin: 0;
  padding: 14px 24px 20px;
}

/* ---- chart ---- */
/* the chart card is height-matched to the cost table beside it, so the
   plot takes whatever vertical room is left rather than sitting in a band
   at the top with dead space under it */
.roi-card.h-100 { display: flex; flex-direction: column; }
.roi-chart-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 10px 16px 0;
}
.roi-chart { display: block; width: 100%; height: auto; overflow: visible; }

.roi-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  padding: 6px 20px 0;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}
.roi-legend span { display: inline-flex; align-items: center; gap: 7px; }
.roi-key { width: 22px; height: 3px; border-radius: 2px; display: inline-block; }
.roi-key-now { background: #9aa9ba; }
.roi-key-cg { background: var(--blue); }

/* ---- closing bar ---- */
.roi-cta {
  position: relative;
  margin-top: 32px;
  background: var(--blue);
  border-radius: 28px;
  overflow: hidden;
}
.roi-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 36px;
}
.roi-cta-copy h3 { color: #fff; font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0 0 6px; }
.roi-cta-copy h3 span { color: var(--gold); }
.roi-cta-copy p { color: rgba(255, 255, 255, .78); font-size: 13.5px; margin: 0; max-width: 46ch; }
.roi-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.roi-btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: var(--r-pill);
  font-weight: 700;
}
.roi-btn-ghost:hover, .roi-btn-ghost:focus {
  background: #fff;
  border-color: #fff;
  color: var(--blue);
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .roi-card-body { padding: 20px; }
  .roi-card-head { padding: 15px 18px; font-size: 14.5px; }
  .roi-card-sub { padding: 18px 18px 4px; }
  .roi-fine { padding: 12px 18px 18px; }

  /* tighten the tables enough that both fit a 390px phone without the
     horizontal swipe, rather than leaving the annual column half hidden */
  .roi-table { min-width: 340px; }
  .roi-table thead th { padding: 14px 13px 8px; font-size: 10px; letter-spacing: .6px; }
  .roi-table tbody th { padding: 12px 13px; font-size: 12.5px; }
  .roi-table tbody td { padding: 12px 13px; font-size: 13.5px; }
  .roi-table-sm { min-width: 320px; }
  .roi-table-sm tbody th { padding: 10px 13px; font-size: 12px; }
  .roi-table-sm tbody td { padding: 10px 13px; font-size: 12.5px; }

  /* Even tightened, the tables need 340px, and at 360px or below (or with
     nine-figure results) the yearly column was cut off inside a swipe
     nobody could see. Each row becomes the label on top with both values
     side by side under it, labelled from data-label. */
  .roi-scroll { overflow-x: visible; }
  .roi-table, .roi-table-sm { min-width: 0; display: block; }
  .roi-table thead { display: none; }
  .roi-table tbody { display: block; }
  .roi-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .roi-table tbody tr + tr { border-top: 1px solid var(--line); }
  .roi-table tbody tr + tr th,
  .roi-table tbody tr + tr td { border-top: 0; }
  .roi-table tbody th,
  .roi-table-sm tbody th { grid-column: 1 / -1; padding: 12px 18px 2px; }
  .roi-table tbody td,
  .roi-table-sm tbody td { text-align: left; padding: 4px 18px 12px; overflow-wrap: anywhere; }
  .roi-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    opacity: .62;
    margin-bottom: 1px;
  }
  .roi-card-foot { padding: 13px 18px; }
  .roi-cta { border-radius: 22px; }
  .roi-cta-inner { padding: 26px 22px; }
  .roi-cta-actions .btn { flex: 1 1 auto; text-align: center; }
}


/* ---------- 19d. prevention alerts page ----------
   Components used only by prevention-alerts.php. The page shares the
   homepage's tokens and section rhythm but not its card grids, so the two
   pages do not read as the same page with different words in it. */

/* ---- the clock ----
   Four stops on one rail. The third segment is gold because it is the only
   part of the timeline the merchant actually controls. */
.pa-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 22px;
  position: relative;
}

/* 34px to the top of the dot, 52px of dot, then clear air before the
   heading. Anything less and the title runs over the icon. */
.pa-stop {
  position: relative;
  padding-top: 106px;
}
/* The rail segment reaching back to the previous stop. The dot sits at the
   stop's left edge with its centre 26px in, and the columns are one stop
   width plus the 22px grid gap apart, so the segment is anchored to those
   two centres rather than to the column edges. */
.pa-stop::before {
  content: '';
  position: absolute;
  top: 58px;
  left: calc(4px - 100%);
  width: calc(100% + 22px);
  height: 3px;
  background: var(--line-2);
  border-radius: 2px;
}
.pa-stop:first-child::before { display: none; }
.pa-stop.is-window::before {
  height: 7px;
  top: 56px;
  background: var(--gold);
}

.pa-stop-time {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}
.pa-stop.is-window .pa-stop-time { color: var(--gold-ink); }

.pa-stop-dot {
  position: absolute;
  top: 34px;
  left: 0;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: #fff;
  border: 2px solid var(--line-2);
  color: var(--blue);
  z-index: 1;
}
.pa-stop.is-window .pa-stop-dot {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.pa-stop.is-end .pa-stop-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.pa-stop-body h3 { font-size: 18px; margin: 0 0 9px; }
.pa-stop-body p { font-size: 14.5px; margin: 0; }

.pa-track-note {
  margin: 34px 0 0;
  font-size: 13px;
  color: var(--dim);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

@media (max-width: 991.98px) {
  /* Stacked rail, dot on the left. Here the segment runs downward from a
     stop's own dot to the next one, because that length is exactly the
     stop's own height and so does not depend on the neighbour being the
     same height. The gold segment therefore belongs to the stop before
     the window, which is why .is-pre-window exists. */
  .pa-track { grid-template-columns: 1fr; gap: 0; }
  .pa-stop { padding: 0 0 30px 74px; }
  .pa-stop-time { position: static; display: block; margin-bottom: 6px; }
  .pa-stop-dot { top: 22px; left: 0; width: 50px; height: 50px; }

  .pa-stop::before,
  .pa-stop.is-window::before {
    top: 47px;
    left: 23px;
    width: 3px;
    height: 100%;
    background: var(--line-2);
    transform: none;
  }
  .pa-stop:first-child::before { display: block; }
  .pa-stop:last-child::before { display: none; }
  .pa-stop:last-child { padding-bottom: 0; }

  .pa-stop.is-pre-window::before {
    width: 7px;
    left: 21px;
    background: var(--gold);
  }
}

@media (max-width: 575.98px) {
  .pa-stop { padding-left: 64px; }
  .pa-stop-dot { width: 44px; height: 44px; border-radius: 13px; font-size: 18px; }
  .pa-stop::before,
  .pa-stop.is-window::before { top: 44px; left: 20px; }
  .pa-stop.is-pre-window::before { left: 18px; }
}

/* ---- alert types, wide rows ---- */
.pa-types { display: grid; gap: 20px; }

.pa-type {
  display: grid;
  grid-template-columns: 186px 1fr;
  gap: 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px 34px;
  box-shadow: var(--sh-sm);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pa-type:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--sh);
}

.pa-type-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: start;
}
.pa-type-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.pa-type-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.pa-type:hover .pa-type-img img { transform: scale(1.05); }
.pa-type-icon {
  width: 58px; height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: var(--blue-soft);
  color: var(--blue);
}
.pa-type-net {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}

.pa-type-main h3 { font-size: 22px; margin: 0 0 12px; }
.pa-type-main > p { font-size: 15px; margin: 0 0 20px; max-width: 68ch; }

.pa-type-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pa-type-list li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.pa-type-list i {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: var(--blue-soft);
  color: var(--blue);
}

/* last row is the gold one, same rule as the card grids */
.pa-type-gold {
  background: var(--gold);
  border-color: var(--gold);
}
.pa-type-gold:hover { border-color: var(--gold-ink); }
.pa-type-gold .pa-type-icon { background: rgba(18, 35, 59, .12); color: var(--ink); }
.pa-type-gold .pa-type-net { color: rgba(18, 35, 59, .72); border-color: rgba(18, 35, 59, .28); }
.pa-type-gold h3 { color: var(--ink); }
.pa-type-gold .pa-type-main > p { color: rgba(18, 35, 59, .8); }
.pa-type-gold .pa-type-list li { color: rgba(18, 35, 59, .82); }
.pa-type-gold .pa-type-list i { background: rgba(18, 35, 59, .14); color: var(--ink); }

/* the four Visa identifiers, inside the RDR row */
.pa-ids {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(18, 35, 59, .18);
}
.pa-ids-head {
  font-size: 13px;
  font-weight: 700;
  color: rgba(18, 35, 59, .78);
  margin: 0 0 16px;
}
.pa-ids-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* four tiles only have room for their text in the xl container */
@media (max-width: 1199.98px) {
  .pa-ids-grid { grid-template-columns: repeat(2, 1fr); }
}
.pa-id {
  background: rgba(255, 255, 255, .58);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.pa-id b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--ink);
  margin-bottom: 5px;
}
.pa-id span {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(18, 35, 59, .72);
}

@media (max-width: 991.98px) {
  .pa-type { grid-template-columns: 1fr; gap: 22px; padding: 28px 26px; }
  .pa-type-mark { flex-direction: row; align-items: center; }
  .pa-type-img { flex: 0 0 132px; width: 132px; }
  .pa-ids-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .pa-type { padding: 24px 20px; border-radius: var(--r-sm); }
  .pa-type-main h3 { font-size: 19px; }
  .pa-ids-grid { grid-template-columns: 1fr; }
  /* image, icon and network pill in one row needed ~280px, more than the
     card has on a 320px phone, which pushed the whole card off screen */
  .pa-type > * { min-width: 0; }
  .pa-type-mark { flex-wrap: wrap; gap: 12px; }
  .pa-type-img { flex: 0 0 104px; width: 104px; }
  .pa-type-icon { width: 48px; height: 48px; font-size: 20px; border-radius: 15px; }
  .pa-type-net { white-space: nowrap; }
}

/* ---- quotes ---- */
.pa-quote {
  position: relative;
  height: 100%;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 30px 28px 26px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pa-quote:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--sh);
}
.pa-quote-mark {
  font-size: 34px;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 14px;
}
.pa-quote blockquote {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 500;
}
.pa-quote figcaption {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 13px;
}
.pa-quote-avatar {
  width: 42px; height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
}
.pa-quote-who b { display: block; font-size: 14.5px; color: var(--ink); }
.pa-quote-who span { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }

.pa-quote-gold { background: var(--gold); border-color: var(--gold); }
.pa-quote-gold:hover { border-color: var(--gold-ink); }
.pa-quote-gold .pa-quote-mark { color: rgba(18, 35, 59, .42); }
.pa-quote-gold blockquote { color: var(--ink); }
.pa-quote-gold figcaption { border-top-color: rgba(18, 35, 59, .2); }
.pa-quote-gold .pa-quote-who span { color: rgba(18, 35, 59, .7); }


/* ---------- 19e. representment page ----------
   Page-only components. Same tokens and section rhythm as the rest of the
   site, different building blocks, so the three inner pages do not read as
   one template with the nouns swapped. */

/* ---- hero ----
   Panel on the right like the homepage. The ring element is drawn as a gold
   bar instead, which is enough to tell the three heroes apart at a glance. */
/* The ring stays a ring here. A gold bar was tried instead and read as a
   stray shape hanging off the panel, so the difference between the three
   heroes is carried by the square's size and position, not a new shape. */

/* ---- accept or answer ---- */
.rep-face { align-items: stretch; }

.rep-side {
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px 30px;
  box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rep-side:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--sh);
}

.rep-side-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.rep-side-head h3 { font-size: 21px; margin: 0 0 3px; }
.rep-side-head p { font-size: 13.5px; margin: 0; color: var(--dim); }

.rep-side-icon {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--bg-tint);
  color: var(--dim);
}

.rep-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rep-side-list li {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}
.rep-side-list i {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  background: var(--bg-tint);
  color: var(--dim);
}

/* the answer side is the gold one, same rule as every other last card */
.rep-side-gold { background: var(--gold); border-color: var(--gold); }
.rep-side-gold:hover { border-color: var(--gold-ink); }
.rep-side-gold .rep-side-icon { background: rgba(18, 35, 59, .14); color: var(--ink); }
.rep-side-gold .rep-side-head { border-bottom-color: rgba(18, 35, 59, .2); }
.rep-side-gold .rep-side-head h3 { color: var(--ink); }
.rep-side-gold .rep-side-head p { color: rgba(18, 35, 59, .72); }
.rep-side-gold .rep-side-list li { color: rgba(18, 35, 59, .84); }
.rep-side-gold .rep-side-list i { background: rgba(18, 35, 59, .16); color: var(--ink); }

.rep-face-note {
  margin: 26px 0 0;
  font-size: 13px;
  color: var(--dim);
  text-align: center;
}

/* image band at the top of a decision card, same proportions as the
   card images on the homepage */
.rep-side-img {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 24px;
}
.rep-side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.rep-side:hover .rep-side-img img { transform: scale(1.05); }

/* the case panel sits under the evidence checklist, held to a readable
   width rather than running the full container */
.rep-casebox { max-width: 720px; margin: 30px auto 0; }

/* ---- evidence pack ---- */
.rep-ev {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 26px;
}
.rep-ev-item {
  display: flex;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 20px 22px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.rep-ev-item:hover { border-color: var(--line-2); box-shadow: var(--sh-sm); }
.rep-ev-item > i {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--blue-soft);
  color: var(--blue);
}
.rep-ev-item b { display: block; font-size: 15.5px; color: var(--ink); margin-bottom: 5px; }
.rep-ev-item span { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* CE3.0 sits apart from the checklist because it is a different route, not
   another document */
.rep-ce {
  display: flex;
  gap: 24px;
  margin-top: 26px;
  background: var(--gold);
  border-radius: var(--r-card);
  padding: 30px 34px;
}
.rep-ce-mark {
  flex: 0 0 56px;
  width: 56px; height: 56px;
  border-radius: 17px;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: rgba(18, 35, 59, .14);
  color: var(--ink);
}
.rep-ce h3 { font-size: 20px; margin: 0 0 10px; color: var(--ink); }
.rep-ce p { font-size: 14.5px; line-height: 1.7; margin: 0; color: rgba(18, 35, 59, .82); max-width: 92ch; }

@media (max-width: 767.98px) {
  .rep-ev { grid-template-columns: 1fr; gap: 14px; }
  .rep-ce { flex-direction: column; gap: 18px; padding: 26px 22px; }
}

/* ---- reason code table ---- */
.rep-codes-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-sm);
}
.rep-codes {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}
.rep-codes thead th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  padding: 18px 22px 12px;
  white-space: nowrap;
}
.rep-codes thead th:last-child { text-align: right; }
.rep-codes tbody th,
.rep-codes tbody td {
  padding: 16px 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
  font-weight: 400;
}
.rep-codes tbody td:last-child { text-align: right; white-space: nowrap; }
.rep-codes tbody tr:hover td,
.rep-codes tbody tr:hover th { background: var(--bg-soft); }

.rep-code {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: var(--r-pill);
  padding: 5px 13px;
  white-space: nowrap;
}

.rep-odds {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  border-radius: var(--r-pill);
  padding: 5px 14px;
}
.rep-odds.is-high { background: var(--gold); color: var(--ink); }
.rep-odds.is-mid  { background: var(--blue-soft); color: var(--blue); }
.rep-odds.is-low  { background: var(--bg-tint); color: var(--dim); }

.rep-codes-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.65;
}

/* Below lg a four column table can only be swiped, and the verdict column
   was cut off at 768. Each row becomes its own card instead, with the column
   headers repeated from data-label. */
@media (max-width: 991.98px) {
  .rep-codes-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .rep-codes { display: block; min-width: 0; }
  .rep-codes thead { display: none; }
  .rep-codes tbody { display: block; }

  .rep-codes tbody tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: var(--sh-sm);
  }
  .rep-codes tbody tr:last-child { margin-bottom: 0; }
  .rep-codes tbody tr:hover th,
  .rep-codes tbody tr:hover td { background: transparent; }

  .rep-codes tbody th,
  .rep-codes tbody td {
    display: block;
    padding: 0;
    border-top: 0;
    text-align: left;
    white-space: normal;
  }
  .rep-codes tbody th { margin-bottom: 14px; }
  .rep-codes tbody td { margin-top: 14px; }
  .rep-codes tbody td:last-child { white-space: normal; text-align: left; }

  .rep-codes tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 5px;
  }
}

/* ---- stages ---- */
.rep-stages { list-style: none; margin: 0; padding: 0; }

.rep-stage {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 30px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.rep-stage:first-child { border-top: 0; }

.rep-stage-day {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 4px;
  white-space: nowrap;
}
.rep-stage-body h3 { font-size: 19px; margin: 0 0 8px; }
.rep-stage-body p { font-size: 14.5px; margin: 0; max-width: 82ch; }

/* the filing step is the one the whole page is about */
.rep-stage-gold {
  background: var(--gold);
  border-top-color: var(--gold);
  border-radius: var(--r-sm);
  padding: 26px 26px;
  margin: 0 -26px;
}
.rep-stage-gold + .rep-stage { border-top-color: var(--line); }
.rep-stage-gold .rep-stage-day { color: rgba(18, 35, 59, .72); }
.rep-stage-gold .rep-stage-body h3 { color: var(--ink); }
.rep-stage-gold .rep-stage-body p { color: rgba(18, 35, 59, .82); }
/* stacked on a phone the card has no bleed, so the next row's rule sat
   flush against its bottom edge */
@media (max-width: 767.98px) {
  .rep-stage-gold + .rep-stage { border-top-color: transparent; }
}
/* the full 26px bleed only has room in the xl container; below it the row
   ran into the page gutter, so it bleeds less and its text stays aligned */
@media (max-width: 1199.98px) {
  .rep-stage-gold { margin: 0 -16px; padding: 24px 16px; }
}

@media (max-width: 767.98px) {
  .rep-stage { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .rep-stage-day { padding-top: 0; }
  .rep-stage-gold { margin: 0; padding: 22px 20px; }
}

/* ---- the maths ---- */
.rep-maths {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

/* no bottom padding, so the total row runs flush to the panel edge rather
   than leaving a white strip under it */
.rep-maths-rows { padding: 12px 0 0; display: flex; flex-direction: column; }
.rep-maths-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 30px;
}
.rep-maths-row + .rep-maths-row { border-top: 1px solid var(--line); }
.rep-maths-label { font-size: 14.5px; color: var(--muted); }
.rep-maths-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rep-maths-value em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  letter-spacing: 0;
  margin-left: 4px;
}
.rep-maths-row.is-total { background: var(--blue-soft); margin-top: auto; }
.rep-maths-row.is-total .rep-maths-label { color: var(--blue); font-weight: 700; }
.rep-maths-row.is-total .rep-maths-value { color: var(--blue); font-size: 24px; }

.rep-maths-side {
  background: var(--blue);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
}
.rep-maths-side h3 { color: #fff; font-size: 19px; margin: 0 0 12px; }
.rep-maths-side p { color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.7; margin: 0 0 14px; }
.rep-maths-fine { font-size: 12px !important; color: rgba(255, 255, 255, .55) !important; margin-top: auto !important; }
.rep-maths-side .btn { align-self: flex-start; margin-top: 14px; }

@media (max-width: 991.98px) {
  .rep-maths { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .rep-maths-row { padding: 14px 20px; }
  .rep-maths-value { font-size: 18px; }
  .rep-maths-row.is-total .rep-maths-value { font-size: 21px; }
  .rep-maths-side { padding: 28px 22px; }
  .rep-side { padding: 26px 22px; }
}


/* ---------- 19f. product UI panels ----------
   Illustrations of the product drawn in markup rather than dropped in as
   screenshots. They stay sharp at any size, sit in the brand palette by
   construction, and carry no real merchant data. Each panel is a figure
   with an aria-label; everything inside is decorative. */
.ui-win {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
  position: relative;
  max-width: 100%;
}
/* flex and grid children default to min-width:auto, which lets a long
   descriptor or a wide stat push the whole panel past the viewport on a
   phone. Nothing in here needs an intrinsic minimum. */
.ui-win * { min-width: 0; }

.ui-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.ui-dots { display: inline-flex; gap: 6px; }
.ui-dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-2);
}
.ui-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.ui-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue);
}
.ui-badge.is-gold { background: var(--gold); color: var(--ink); }

/* ---- the deadline strip on an alert ---- */
.ui-clock {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 22px;
  background: var(--gold);
}
.ui-clock b {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ui-clock span { font-size: 13px; font-weight: 600; color: rgba(18, 35, 59, .74); }
.ui-clock .ui-clock-of { margin-left: auto; font-size: 12px; }

/* ---- label / value rows ---- */
.ui-rows { padding: 6px 0; }
.ui-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 22px;
  font-size: 13.5px;
}
.ui-row + .ui-row { border-top: 1px solid var(--line); }
.ui-row span { color: var(--dim); white-space: nowrap; }
.ui-row b {
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ui-row b.is-code { color: var(--blue); }

/* ---- the two decorative actions at the foot of the alert ---- */
.ui-actions {
  display: flex;
  gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.ui-act {
  flex: 1;
  text-align: center;
  padding: 11px 10px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
}
.ui-act.is-primary { background: var(--gold); color: var(--ink); }
.ui-act.is-ghost { border: 1.5px solid var(--line-2); color: var(--muted); }

/* ---- evidence checklist inside a case panel ---- */
.ui-ev { padding: 8px 0; }
.ui-ev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  font-size: 13.5px;
  color: var(--ink);
}
.ui-ev-row i {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: var(--blue-soft);
  color: var(--blue);
}
.ui-ev-row.is-missing { color: var(--dim); }
.ui-ev-row.is-missing i { background: var(--bg-tint); color: var(--dim); }
.ui-ev-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  color: var(--dim);
  white-space: nowrap;
}

/* ---- strength meter ---- */
.ui-meter { padding: 16px 22px; border-top: 1px solid var(--line); }
.ui-meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}
.ui-meter-top span { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.ui-meter-top b { font-size: 17px; font-weight: 800; color: var(--blue); }
.ui-meter-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.ui-meter-fill { height: 100%; border-radius: var(--r-pill); background: var(--blue); }

.ui-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  background: var(--gold);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.ui-verdict i { font-size: 17px; }

/* ---- stat tiles + bar chart, for the reporting panel ---- */
.ui-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
}
.ui-tile { padding: 18px 20px; }
.ui-tile + .ui-tile { border-left: 1px solid var(--line); }
.ui-tile span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 7px;
}
.ui-tile b {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.8px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ui-tile em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold-ink);
  margin-left: 6px;
}

.ui-chart { padding: 22px 22px 16px; }
.ui-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
}
.ui-chart-head span { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.ui-chart-head em { font-style: normal; font-size: 11.5px; color: var(--dim); }

.ui-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 132px;
}
.ui-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.ui-bar-stack { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 3px; }
.ui-bar-won { background: var(--blue); border-radius: 5px; }
.ui-bar-lost { background: var(--line-2); border-radius: 5px; }
.ui-bar-col small { font-size: 10.5px; color: var(--dim); }

.ui-legend {
  display: flex;
  gap: 18px;
  padding: 0 22px 20px;
  font-size: 11.5px;
  color: var(--dim);
  font-weight: 600;
}
.ui-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ui-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.ui-legend i.is-won { background: var(--blue); }
.ui-legend i.is-lost { background: var(--line-2); }

/* ---- alert feed rows ---- */
.ui-feed-row {
  display: grid;
  grid-template-columns: 92px 1fr 110px 118px;
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  font-size: 13.5px;
}
.ui-feed-row + .ui-feed-row { border-top: 1px solid var(--line); }
.ui-feed-row.is-head {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--dim);
  padding-top: 11px;
  padding-bottom: 11px;
}
.ui-net {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 8px;
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  color: var(--blue);
}
.ui-net.is-rdr { background: var(--gold); color: var(--ink); }
.ui-feed-desc b { display: block; font-weight: 700; color: var(--ink); }
.ui-feed-desc span { display: block; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.ui-feed-amt { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ui-state {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.ui-state.is-done { color: var(--blue); }
.ui-state.is-urgent { color: var(--danger); }

@media (max-width: 767.98px) {
  .ui-feed-row { grid-template-columns: 76px 1fr auto; gap: 12px; padding: 12px 16px; }
  .ui-feed-row.is-head { display: none; }
  .ui-feed-amt { text-align: right; }
  .ui-state { grid-column: 2 / -1; text-align: left; margin-top: 2px; }
}

/* a caption under every panel, so nobody reads the numbers as a claim */
.ui-note {
  margin: 14px 2px 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--dim);
}

@media (max-width: 575.98px) {
  .ui-win { border-radius: 18px; }
  .ui-bar { padding: 12px 14px; gap: 8px; }
  .ui-bar .ui-dots { display: none; }
  .ui-badge { font-size: 9.5px; padding: 4px 9px; letter-spacing: .5px; }
  .ui-clock { flex-wrap: wrap; row-gap: 2px; }
  .ui-clock b { font-size: 23px; }
  .ui-clock .ui-clock-of { margin-left: auto; }
  .ui-row { font-size: 12.5px; gap: 12px; }
  .ui-actions { flex-direction: column; }
  .ui-ev-row { font-size: 12.5px; gap: 10px; }
  .ui-verdict { font-size: 13px; }
  .ui-row, .ui-ev-row, .ui-meter, .ui-verdict, .ui-clock { padding-left: 16px; padding-right: 16px; }
  .ui-actions { padding: 14px 16px; }
  .ui-tile { padding: 14px 14px; }
  .ui-tile b { font-size: 19px; }
  .ui-tile span { letter-spacing: .3px; }
  .ui-chart { padding: 18px 16px 12px; }
  .ui-legend { padding: 0 16px 16px; }
  .ui-bars { gap: 6px; height: 110px; }
}


/* ---------- 19g. visa rdr page ---------- */

/* ---- the branch ----
   RDR is a rules engine with one yes/no gate, so the diagram is that gate
   rather than another row of numbered cards. */
.rdr-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rdr-node {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 26px 26px 28px;
  box-shadow: var(--sh-sm);
}
/* the arrow into the next node */
.rdr-node::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 4px);
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-top: 2.5px solid var(--line-2);
  border-right: 2.5px solid var(--line-2);
  transform: rotate(45deg);
}
.rdr-node:last-child::after { display: none; }

.rdr-node-num {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--dim);
  margin-bottom: 16px;
}
.rdr-node-icon {
  width: 48px; height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: var(--blue-soft);
  color: var(--blue);
  margin-bottom: 16px;
}
.rdr-node h3 { font-size: 18px; margin: 0 0 8px; }
.rdr-node p { font-size: 14px; margin: 0; }

/* the gate is the only node that decides anything */
.rdr-node.is-gate { border-color: var(--gold); border-width: 2px; }
.rdr-node.is-gate .rdr-node-icon { background: var(--gold); color: var(--ink); }
.rdr-node.is-gate::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 3px;
  height: 34px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold);
}

/* ---- the two endings ---- */
.rdr-outs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 52px;
  position: relative;
}
/* the stem belongs to the gate, not to this row, otherwise it drops from
   the middle of the three nodes instead of from the one that decides */

.rdr-out {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 28px 28px 30px;
  box-shadow: var(--sh-sm);
}
.rdr-out h3 { font-size: 20px; margin: 0 0 10px; }
.rdr-out p { font-size: 14.5px; margin: 0; }
.rdr-out .card-link { margin-top: 16px; }

.rdr-out-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .9px;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 6px 14px;
  margin-bottom: 16px;
  background: var(--bg-tint);
  color: var(--dim);
}

.rdr-out.is-yes { background: var(--gold); border-color: var(--gold); }
.rdr-out.is-yes .rdr-out-tag { background: rgba(18, 35, 59, .16); color: var(--ink); }
.rdr-out.is-yes h3 { color: var(--ink); }
.rdr-out.is-yes p { color: rgba(18, 35, 59, .82); }

@media (max-width: 991.98px) {
  .rdr-line { grid-template-columns: 1fr; gap: 16px; }
  .rdr-node::after {
    top: auto; left: 50%;
    bottom: -14px;
    margin: 0 0 0 -6px;
    transform: rotate(135deg);
  }
  .rdr-outs { grid-template-columns: 1fr; margin-top: 44px; }
  .rdr-node.is-gate::before { height: 28px; }
}
@media (max-width: 575.98px) {
  .rdr-node { padding: 22px 20px 24px; }
  .rdr-out { padding: 24px 20px 26px; }
}

/* ---- three endings, three costs ---- */
.rdr-costs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.rdr-cost {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rdr-cost:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--sh);
}

.rdr-cost-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.rdr-cost-head h3 { font-size: 18px; margin: 0; }
.rdr-cost-icon {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--bg-tint);
  color: var(--dim);
}

.rdr-cost-rows { padding: 6px 0; }
.rdr-cost-row { padding: 13px 24px; font-size: 14px; }
.rdr-cost-row + .rdr-cost-row { border-top: 1px solid var(--line); }
.rdr-cost-row span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.rdr-cost-row b { font-weight: 700; color: var(--ink); line-height: 1.5; }

.rdr-cost-gold { background: var(--gold); border-color: var(--gold); }
.rdr-cost-gold:hover { border-color: var(--gold-ink); }
.rdr-cost-gold .rdr-cost-head { border-bottom-color: rgba(18, 35, 59, .2); }
.rdr-cost-gold .rdr-cost-head h3 { color: var(--ink); }
.rdr-cost-gold .rdr-cost-icon { background: rgba(18, 35, 59, .14); color: var(--ink); }
.rdr-cost-gold .rdr-cost-row + .rdr-cost-row { border-top-color: rgba(18, 35, 59, .18); }
.rdr-cost-gold .rdr-cost-row span { color: rgba(18, 35, 59, .68); }
.rdr-cost-gold .rdr-cost-row b { color: var(--ink); }

.rdr-costs-note {
  margin: 26px auto 0;
  max-width: 78ch;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.7;
}

@media (max-width: 991.98px) {
  .rdr-costs { grid-template-columns: 1fr; }
}

/* the coverage panel sits under the three stack cards, held to a readable
   width rather than running the full container */
.rdr-coverage {
  max-width: 760px;
  margin: 44px auto 0;
}

/* ---- rule rows, used inside the .ui-win panels on this page ---- */
.ui-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 22px;
}
.ui-rule + .ui-rule { border-top: 1px solid var(--line); }
.ui-rule-when b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ui-rule-when span { display: block; font-size: 12px; color: var(--dim); margin-top: 3px; }
.ui-rule-then {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--bg-tint);
  color: var(--dim);
  white-space: nowrap;
}
.ui-rule-then.is-auto { background: var(--gold); color: var(--ink); }
.ui-rule-then.is-fight { background: var(--blue-soft); color: var(--blue); }

.ui-rule-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 22px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.ui-rule-foot span { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.ui-rule-foot b { font-size: 14.5px; font-weight: 800; color: var(--blue); }

@media (max-width: 575.98px) {
  .ui-rule { padding: 13px 16px; gap: 10px; }
  .ui-rule-when b { font-size: 13.5px; }
  .ui-rule-then { font-size: 10px; padding: 6px 10px; }
  .ui-rule-foot { padding: 13px 16px; flex-wrap: wrap; row-gap: 4px; }
}
/* on a 320px phone the pill squeezed each rule into four short lines, so
   it drops under the rule text instead */
@media (max-width: 359.98px) {
  .ui-rule { flex-wrap: wrap; row-gap: 8px; }
}

/* ---------- 19h. services dropdown ----------
   Three product pages under one nav item, because eight top level links
   wrapped the navbar onto two lines at 1440px. */
.cg-navbar .dropdown-toggle::after {
  margin-left: 7px;
  border-top-width: .35em;
  vertical-align: .12em;
  opacity: .6;
}

.cg-dropdown {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  padding: 10px;
  min-width: 330px;
  margin-top: 10px;
}
.cg-dropdown .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border-radius: 12px;
  padding: 12px 13px;
  white-space: normal;
  transition: background .18s ease;
}
.cg-dropdown .dropdown-item:hover,
.cg-dropdown .dropdown-item:focus { background: var(--bg-soft); }
.cg-dropdown .dropdown-item > i {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--blue-soft);
  color: var(--blue);
}
.cg-dropdown .dropdown-item b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.cg-dropdown .dropdown-item span > b { margin-bottom: 2px; }
.cg-dropdown .dropdown-item span {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}
.cg-dropdown .dropdown-item.is-plain {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  padding: 10px 13px;
}
.cg-dropdown .dropdown-item.active,
.cg-dropdown .dropdown-item:active { background: var(--blue-soft); }
.cg-dropdown .dropdown-item.active b { color: var(--blue); }
.cg-dropdown .dropdown-divider { margin: 8px 4px; border-color: var(--line); }

/* on the collapsed navbar the menu is already inside a panel, so it drops
   the card treatment and just indents */
@media (max-width: 991.98px) {
  .cg-dropdown {
    border: 0;
    box-shadow: none;
    padding: 4px 0 4px 8px;
    min-width: 0;
    margin-top: 0;
  }
  .cg-dropdown .dropdown-item { padding: 10px 6px; }
}


/* ---------- 19i. integrations page ---------- */

/* hero: panel right like the homepage, with the ring moved up the edge and
   the square dropped, so the five heroes are a set rather than a repeat */

/* ---- search and filters ---- */
.int-tools { margin-bottom: 26px; }

.int-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 0 20px;
  max-width: 560px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.int-search:focus-within {
  border-color: var(--blue-2);
  box-shadow: 0 0 0 4px rgba(14, 76, 134, .12);
}
.int-search > i { font-size: 17px; color: var(--dim); }
.int-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 15px 0;
  font: 600 15.5px/1.2 inherit;
  color: var(--ink);
}
.int-search input::placeholder { color: var(--dim); font-weight: 500; }
.int-search input:focus-visible { outline: none; box-shadow: none; }
.int-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.int-search-clear {
  border: 0;
  background: var(--bg-tint);
  color: var(--dim);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  cursor: pointer;
  flex: 0 0 28px;
}
.int-search-clear:hover { background: var(--line-2); color: var(--ink); }

.int-count {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--dim);
  font-weight: 600;
}

.int-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.int-chip {
  border: 1.5px solid var(--line-2);
  background: var(--card);
  color: var(--muted);
  border-radius: var(--r-pill);
  padding: 9px 17px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.int-chip span {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--dim);
  margin-left: 6px;
}
.int-chip:hover { border-color: var(--blue-2); color: var(--blue); }
.int-chip.is-on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.int-chip.is-on span { color: rgba(255, 255, 255, .7); }

/* Nine chips never share a row evenly: at natural size the last one sat
   alone. In the xxl container they tighten onto one line. */
@media (min-width: 1400px) {
  .int-chips { gap: 8px; flex-wrap: nowrap; }
  .int-chip { padding: 9px 11px; font-size: 13px; white-space: nowrap; }
}
/* On touch widths they become one swipeable line that runs to the screen
   edge, so the cut-off chip shows there is more, instead of five rows. */
@media (max-width: 991.98px) {
  .int-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding: 3px calc(var(--bs-gutter-x, 1.5rem) * .5);
  }
  .int-chips::-webkit-scrollbar { display: none; }
  .int-chip { flex: none; white-space: nowrap; }
}

/* ---- the grid ---- */
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
}

.int-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 20px 18px 18px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.int-item:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--sh);
}
.int-item[hidden] { display: none; }

.int-item-logo {
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.int-item-logo img {
  max-width: 130px;
  max-height: 46px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}
/* square marks are logo tiles, so they get a fixed rounded box */
.int-item.is-mark .int-item-logo img {
  width: 46px;
  height: 46px;
  max-width: none;
  max-height: none;
  border-radius: 12px;
}

.int-item h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.35;
  text-wrap: balance;
}
.int-item-cat {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--dim);
}

/* ---- empty state ---- */
.int-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--card);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
}
.int-empty > i {
  font-size: 30px;
  color: var(--dim);
  display: block;
  margin-bottom: 16px;
}
.int-empty h3 { font-size: 20px; margin: 0 0 10px; }
.int-empty p {
  font-size: 14.5px;
  max-width: 52ch;
  margin: 0 auto 22px;
}

@media (max-width: 575.98px) {
  .int-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  /* two 150px columns need 312px; a 320px phone has 296, which dropped the
     121 cards to one column and a 16,000px scroll */
  @media (max-width: 359.98px) {
    .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  }
  .int-item { padding: 16px 12px 14px; }
  .int-item-logo { height: 44px; margin-bottom: 11px; }
  .int-item-logo img { max-width: 104px; max-height: 38px; }
  .int-item.is-mark .int-item-logo img { width: 38px; height: 38px; }
  .int-item h3 { font-size: 12.5px; }
  .int-item-cat { font-size: 10px; }
  .int-chip { padding: 8px 13px; font-size: 12.5px; }
  .int-search { padding: 0 16px; }
  .int-search input { font-size: 15px; padding: 13px 0; }
}


/* ---------- 19j. per-page hero layouts ----------
   The homepage hero is the reference: blue panel bleeding off the right,
   form on the blue, copy on the white. Each inner page changes the
   structure rather than just mirroring it, so no two pages open the same
   way. All four keep the lead form.

   Below 992px every hero already collapses to one solid blue block with
   white type, so all of this is desktop only and mobile is untouched. */
@media (min-width: 992px) {

  /* ---- 1. prevention alerts: the homepage inverted ----
     Panel still on the right, but the copy sits on the blue and the form
     sits on the white. Reversing which element is on colour changes the
     page far more than moving the panel would. */
  .hero-rev .hero-panel {
    left: 50%;
    right: 0;
    border-radius: 90px 0 0 90px;
  }
  .hero-rev .hero-ring {
    left: calc(50% - 95px);
    bottom: 40px;
  }
  .hero-rev .hero-square {
    top: 118px;
    left: calc(50% - 44px);
    transform: rotate(-12deg);
  }

  /* the copy column is reversed out of the blue */
  .hero-rev .hero-copy h1 { color: #fff; }
  .hero-rev .hero-copy h1 .hl { color: var(--gold); }
  .hero-rev .hero-copy .lead-cg { color: rgba(255, 255, 255, .82); }
  .hero-rev .hero-copy .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }
  .hero-rev .hero-copy .eyebrow .dot { background: var(--gold); }
  .hero-rev .hero-copy .hero-points { border-top-color: rgba(255, 255, 255, .2); }
  .hero-rev .hero-copy .hero-points li { color: rgba(255, 255, 255, .82); }
  .hero-rev .hero-copy .hero-points i { background: var(--gold); color: var(--blue); }
  .hero-rev .hero-copy .hero-link { color: #fff; }
  .hero-rev .hero-copy .hero-link:hover { color: var(--gold); }
  .hero-rev .hero-copy .hero-partners { border-top-color: rgba(255, 255, 255, .2); }
  .hero-rev .hero-copy .hero-partners-label { color: rgba(255, 255, 255, .6); }
  /* dark logo marks disappear on blue, so they get a white plate here too */
  .hero-rev .hero-copy .partner-logos {
    background: #fff;
    border-radius: 14px;
    padding: 15px 18px;
    gap: 14px 24px;
    /* the columns stop at 80px, so on a wide screen they bunched left */
    justify-content: space-between;
  }
  .hero-rev .hero-copy .partner-logos img { opacity: 1; }

  /* the form is now on white, so it needs an edge of its own */
  .hero-rev .hero-form {
    border: 1px solid var(--line);
    box-shadow: var(--sh-lg);
  }

  /* ---- 2. representment: a band, not a column ----
     The split runs across the hero instead of down it. The copy sits on
     white above; the form is tall enough to cross into the blue. */
  /* The band is exactly the last 150px of the hero, and the rail is exactly
     the last 150px of the content, so the two line up without either one
     having to know the other's height. */
  .hero-band { padding-bottom: 0; }
  .hero-band .hero-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    border-radius: 80px 80px 0 0;
  }
  .hero-band .hero-ring {
    width: 118px; height: 118px;
    border-width: 8px;
    left: auto;
    right: 7%;
    bottom: 96px;
  }
  .hero-band .hero-square {
    width: 62px; height: 62px;
    top: auto;
    bottom: 44px;
    left: 6%;
    border-radius: 16px;
    transform: rotate(-14deg);
  }

  /* the trust rail sits on the band rather than above it */
  .hero-band .hero-rail {
    position: relative;
    z-index: 3;
    height: 150px;
    margin-top: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-band .hero-rail .hero-partners {
    margin: 0;
    padding: 0;
    border-top: 0;
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .hero-band .hero-rail .hero-partners-label {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    white-space: nowrap;
  }
  .hero-band .hero-rail .partner-logos {
    background: #fff;
    border-radius: 16px;
    padding: 14px 24px;
    gap: 12px 26px;
  }
  .hero-band .hero-rail .partner-logos img { opacity: 1; }

  /* ---- 3. visa rdr: a contained slab ----
     Nothing bleeds off the page. The blue is a rounded card sitting behind
     the form, and the hero itself takes the soft tint so the white form
     still separates from its surroundings. */
  .hero-slab { background: var(--bg-soft); }
  .hero-slab .hero-panel {
    top: 108px;
    bottom: 40px;
    left: 2%;
    right: 47%;
    border-radius: 44px;
  }
  .hero-slab .hero-ring {
    width: 128px; height: 128px;
    border-width: 9px;
    left: auto;
    right: 44%;
    bottom: 66px;
  }
  .hero-slab .hero-square {
    width: 72px; height: 72px;
    top: 88px;
    left: auto;
    right: 46%;
    border-radius: 20px;
    transform: rotate(14deg);
  }

  /* ---- 4. integrations: a squared edge the form straddles ----
     No rounded corner and no gap: the form card sits half on the blue and
     half on the white, which is a different silhouette again. */
  .hero-edge .hero-panel {
    left: 58%;
    right: 0;
    border-radius: 0;
  }
  .hero-edge .hero-ring {
    width: 150px; height: 150px;
    border-width: 10px;
    left: calc(58% - 75px);
    bottom: 52px;
  }
  .hero-edge .hero-square {
    width: 78px; height: 78px;
    top: 104px;
    left: calc(58% - 39px);
    border-radius: 20px;
    transform: rotate(-16deg);
  }
}



/* ---------- 19k. contact page ----------
   The fifth hero structure: a blue band under the navbar carrying the
   heading, and one white card straddling its lower edge that holds the
   contact routes and the form side by side. */
.hero-card {
  padding-bottom: 96px;
  background: var(--bg-soft);
}
.hero-card .hero-panel {
  top: var(--nav-h);
  bottom: auto;
  left: 0;
  right: 0;
  height: 340px;
  border-radius: 0 0 80px 80px;
}
.hero-card .hero-ring {
  width: 128px; height: 128px;
  border-width: 9px;
  left: auto;
  right: 5%;
  top: 128px;
  bottom: auto;
}
/* kept on the right, clear of the headline: at 5% on the left it sat
   straight over the second line of the h1 */
.hero-card .hero-square {
  width: 66px; height: 66px;
  top: 272px;
  left: auto;
  right: 13%;
  border-radius: 17px;
  transform: rotate(-14deg);
}

/* the heading sits on the band */
.hero-card .hero-head {
  position: relative;
  z-index: 3;
  max-width: 720px;
  margin-bottom: 44px;
}
.hero-card .hero-head h1 { color: #fff; margin-bottom: 14px; }
.hero-card .hero-head h1 .hl { color: var(--gold); }
.hero-card .hero-head .lead-cg { color: rgba(255, 255, 255, .82); margin: 0; max-width: 62ch; }
.hero-card .hero-head .eyebrow { background: rgba(255, 255, 255, .14); color: #fff; }
.hero-card .hero-head .eyebrow .dot { background: var(--gold); }

/* ---- the card ---- */
.contact-card {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: 0 30px 64px rgba(3, 18, 36, .22);
  overflow: hidden;
}

.contact-routes {
  padding: 38px 36px;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
}
.contact-routes h2 { font-size: 21px; margin: 0 0 22px; }

.contact-route {
  display: flex;
  gap: 15px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: inherit;
  transition: opacity .2s ease;
}
.contact-route:first-of-type { border-top: 0; padding-top: 0; }
a.contact-route:hover { opacity: .78; }
.contact-route-icon {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: var(--blue-soft);
  color: var(--blue);
}
.contact-route-body b {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  word-break: break-word;
}
/* the email address broke as "support@chargeguard.c / om" at 320px */
@media (max-width: 359.98px) {
  .contact-route { gap: 12px; }
  .contact-route-icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 16px; }
  .contact-route-body b { font-size: 14px; }
}
.contact-route-body span {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
}

.contact-promise {
  list-style: none;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 11px;
}
.contact-promise li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13.5px;
  color: var(--muted);
}
.contact-promise i {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  background: var(--gold);
  color: var(--ink);
}

.contact-form { padding: 38px 36px; }
.contact-form h2 { font-size: 21px; margin: 0 0 6px; }
.contact-form > p { font-size: 14px; color: var(--dim); margin: 0 0 22px; }
.contact-form .form-control,
.contact-form .form-select { padding: 12px 16px; font-size: 14.5px; }
.contact-form textarea.form-control { min-height: 108px; resize: vertical; }

/* response time under each routing card */
/* table, not inline-block: a short link like "Report it here" left room for
   the badge on the same line, so one card of four looked different */
.contact-sla {
  display: table;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: #e6f7fe;
  border-radius: var(--r-pill);
  padding: 5px 12px;
}
.feature-box-gold .contact-sla { background: rgba(18, 35, 59, .14); color: var(--ink); }
/* when one card's text runs a line shorter, its link and badge sat higher
   than the others in the row; pinning them to the bottom lines them up */
.feature-box:has(.contact-sla) { display: flex; flex-direction: column; align-items: flex-start; }
.feature-box:has(.contact-sla) .card-link { margin-top: auto; }
/* the amber accent link is unreadable on the gold card */
.feature-box-gold .card-link,
.feature-box-gold .card-link:hover { color: var(--blue); }

@media (max-width: 991.98px) {
  /* the shared mobile rule turns the whole hero blue, so the band is not
     needed and the card goes back to one column */
  /* the blue stops partway down the card, so its rounded bottom corners sit
     on the page colour instead of a hard blue edge */
  .hero-card {
    padding-bottom: 0;
    background: linear-gradient(to bottom, var(--blue) calc(100% - 180px), var(--bg) calc(100% - 180px));
  }
  .hero-card .hero-panel { display: none; }
  .hero-card .hero-head { margin-bottom: 30px; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-routes { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 575.98px) {
  .contact-routes,
  .contact-form { padding: 28px 22px; }
  .contact-routes h2,
  .contact-form h2 { font-size: 19px; }
}

/* ---------- 20. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}