/* /assets/style.css */

:root {--bg: #efefef;
  --text: #0e0f12;
  --muted: rgba(14, 15, 18, .72);
  --hairline: rgba(14, 15, 18, .18);

  --brand: #2E6BFF;         /* Cirquit-ish blue accent */
  --brand-soft: rgba(46, 107, 255, .14);
  --cta: #ff7a2f;           /* orange CTA */
  --cta-dark: #e6681f;

  --radius-lg: 22px;
  --radius-md: 16px;

  --shadow: 0 18px 45px rgba(0,0,0,.10);
  --shadow-soft: 0 12px 30px rgba(0,0,0,.08);}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap');


*{ box-sizing: border-box; }

html, body {height: 100%;}

body {padding-top: 76px; /* header height reserve */}

body {margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}

a {color: inherit; text-decoration: none;}

.container {width: min(1120px, calc(100% - 48px));
  margin: 0 auto;}

/* Header */

.site-header {position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;

  background: rgba(239,239,239,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(14, 15, 18, .10);}

.header-inner {display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 18px;}

.brand {display: inline-flex;
  align-items: center;
  gap: 12px;}

.brand-mark {width: 28px;
  height: 28px;
  border-radius: 9px;
  background: radial-gradient(circle at 30% 30%, rgba(46,107,255,.35), transparent 55%),
              linear-gradient(135deg, rgba(46,107,255,.9), rgba(46,107,255,.55));
  box-shadow: 0 10px 20px rgba(46,107,255,.18);}

.brand-text {display: flex;
  flex-direction: column;
  line-height: 1.05;}

.brand-name {font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 18px;}

.brand-sub {font-size: 12px;
  color: rgba(14, 15, 18, .70);
  margin-top: 2px;}

/* Nav */

.nav {display: flex;
  align-items: center;}

.nav-menu {display: flex;
  align-items: center;
  gap: 28px;}

.nav-link {font-size: 14px;
  color: rgba(14, 15, 18, .74);
  position: relative;
  padding: 8px 2px;}

.nav-link:hover {color: rgba(14, 15, 18, .92);}

.nav-link.is-active {color: rgba(14, 15, 18, .92);}

.nav-link.is-active::after {content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;}

/* Buttons */

.btn {display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;}

.btn-primary {background: var(--cta);
  color: #111;
  box-shadow: 0 12px 25px rgba(255,122,47,.22);}

.btn-primary:hover {background: var(--cta-dark);
  transform: translateY(-1px);}

.btn-primary:active {transform: translateY(0);}

/* Hero */

.hero {position: relative;
  background:
    linear-gradient(
      to bottom,
      #efefef 0%,
      #efefef 55%,
      #e9e9e9 100%
    );
  padding: 54px 0 34px;
  overflow: hidden;}

.hero::before {content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 18% 28%,
      rgba(46,107,255,.08),
      transparent 52%
    ),
    radial-gradient(
      circle at 82% 42%,
      rgba(255,122,47,.06),
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;}

.hero > .container {position: relative;
  z-index: 1;}

.hero::after {content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background: linear-gradient(
    to bottom,
    rgba(239,239,239,0),
    rgba(239,239,239,1)
  );
  pointer-events:none;}

.hero-grid {display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: start;}

.hero-copy h1 {margin: 0;
  font-size: clamp(34px, 4.3vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.04em;}

.hero-lede {margin: 16px 0 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 500;}

.hero-points {margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;}

.hero-points li {display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(14, 15, 18, .88);
  font-weight: 600;}

.tick {width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 6px;
  background: rgba(14, 15, 18, .06);
  border: 1px solid rgba(14, 15, 18, .12);
  position: relative;
  flex: 0 0 18px;}

.tick::after {content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 7px;
  height: 4px;
  border-left: 2px solid rgba(14, 15, 18, .80);
  border-bottom: 2px solid rgba(14, 15, 18, .80);
  transform: rotate(-45deg);}

.tick__green::after {border-left: 2px solid rgba(255,255,255);
    border-bottom: 2px solid rgba(255,255,255);}

.tick__green {background:rgba(126, 194, 169,1);
    border: 0;}

/* Hero visual stack */

/* positions to resemble the mock */

/* label inside top card */

/* subtle grid texture */

/* Tiers row */

.tiers {padding: 25px 0 25px;}

.tiers-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:42px;
}

.tier {position: relative;
  padding: 20px 18px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(14, 15, 18, .06);
  transition: transform .15s ease, border-color .15s ease;width:100%;}

.tier-title {display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(14, 15, 18, .80);}

/* Mobile nav */

.nav-toggle {display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(14, 15, 18, .10);
  background: rgba(255,255,255,.18);
  align-items: center;
  justify-content: center;}

.burger {width: 18px;
  height: 2px;
  background: rgba(14, 15, 18, .78);
  position: relative;
  border-radius: 2px;}

.burger::before, .burger::after {content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: rgba(14, 15, 18, .78);
  border-radius: 2px;}

.burger::before {top: -6px;}

.burger::after {top: 6px;}

.sr-only {position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;}

/* Responsive */

@media (max-width: 980px) {
.hero-grid {grid-template-columns: 1fr;}
.tiers-grid {grid-template-columns: 1fr; gap: 18px;}
}

@media (max-width: 860px) {
.nav-toggle {display: inline-flex;}
.nav-menu {position: absolute;
    right: 24px;
    top: 68px;
    width: min(360px, calc(100vw - 48px));
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(14, 15, 18, .12);
    background: rgba(239,239,239,.96);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;}
.nav-menu.is-open {display: flex;}
.nav-link {padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.30);
    border: 1px solid rgba(14, 15, 18, .06);}
.nav-link.is-active::after {display:none;}
.btn {width: 100%;}
}

/* Problem / friction section */

.problem {position: relative;
  padding: 75px 0;
  overflow: hidden;

  /* Soft neutral base (less beige, more calm) */
  background:
    linear-gradient(
      to bottom,
      #F2F1ED 20%,
      #EBE7DF 70%
    );}

/* Gentle atmosphere – “weight” without pattern */

.problem::before {content:"";
  position:absolute;
  inset:-20%;

  background:
    radial-gradient(circle at 18% 22%,
      rgba(42,59,76,0.06),
      transparent 58%),

    radial-gradient(circle at 82% 30%,
      rgba(255,140,80,0.07),
      transparent 54%),

    radial-gradient(circle at 65% 92%,
      rgba(42,59,76,0.05),
      transparent 60%);

  pointer-events:none;}

/* Soft vignette to hold the section */

.problem::after {content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.00),
    rgba(0,0,0,0.03) 70%,
    rgba(0,0,0,0.06)
  );

  pointer-events:none;}

.problem-copy {max-width: 820px;}

.problem .eyebrow {display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(14,15,18,.55);
  margin-bottom: 14px;}

.problem h2 {margin: 0;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;}

.problem p {margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(14,15,18,.78);
  max-width: 72ch;}

/* Cards row */

.problem-cards {display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 26px;}

.problem-card {position: relative;
  border-radius: 28px;
  background: rgba(0,0,0,0.04);
  overflow: hidden;
  min-height: 220px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.10);}

/* Image */

.problem-card img {display: block;
  width: 100%;
  height: auto;}

/* Label Container */

.problem-card__label {position: absolute;
  top: 18px;
  width:100%;
  text-align:center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42,59,76,0.75);
  font-weight: 500;}

@media (max-width: 920px) {
.problem-cards {grid-template-columns: 1fr;
    gap: 18px;}

}

.problem-cards {margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;}

.problem-card img {max-width:100%;}

/* Responsive */

@media (max-width: 1020px) {
.problem {padding: 72px 0;}
.problem-cards {grid-template-columns: 1fr;
    gap: 22px;}

}

/* Back-office section */

.backoffice {position: relative;
  background: #151617; /* slightly less flat than #1c1c1c */
  color: #fff;
  padding: 75px 0;
  overflow: hidden;}

/* Atmosphere + readable pocket (no blue) */

.backoffice::before {content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,0.07), transparent 55%),
    radial-gradient(circle at 78% 62%, rgba(126,194,169,0.10), transparent 58%),
    linear-gradient(135deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.00) 38%,
      rgba(0,0,0,0.35) 100%
    );
  pointer-events: none;}

/* Technical grid field — subtler, larger, not wallpaper */

.backoffice::after {content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.06;
  pointer-events: none;

  /* soften edges so grid doesn't frame the section */
  -webkit-mask-image: radial-gradient(circle at 35% 30%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
          mask-image: radial-gradient(circle at 35% 30%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);}

.backoffice-list .label {color: rgba(255,255,255,.78);}

.backoffice-list .desc {color: rgba(255,255,255,.90);}

.backoffice-grid {position: relative;
  z-index: 1;}

.backoffice-copy {max-width: 760px;}

.backoffice h2 {margin: 0;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;}

.backoffice-lede {margin-top: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);}

.backoffice-lede strong {display: block;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);}

/* feature list */

.backoffice-list {list-style: none;
  padding: 0;
  margin: 48px 0 0;
  display: grid;
  gap: 16px;}

.backoffice-list li {display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(126, 194, 169,0.2);}

.backoffice-list .label {font-weight: 700;
  color: rgba(255,255,255,.65);}

.backoffice-list .desc {color: rgba(255,255,255,.9);}

/* Responsive */

@media (max-width: 820px) {
.backoffice {padding: 88px 0;}
.backoffice-list li {grid-template-columns: 1fr;
    gap: 6px;}
}

/* ============ Payment panel ============ */

/* Payment integration section */

.paypanel {position: relative;
  background: #EEF3F3; /* soft teal-grey */
  color: #2A3B4C;
  padding: 75px 0;
  overflow: hidden;}

/* soft field + teal presence */

.paypanel::before {content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(circle at 78% 55%, rgba(126,194,169,0.22), transparent 60%),
    linear-gradient(135deg,
      rgba(42,59,76,0.06) 0%,
      rgba(42,59,76,0.00) 45%,
      rgba(0,0,0,0.06) 100%
    );
  pointer-events:none;}

/* technical grid that fades at edges */

.paypanel::after {content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(42,59,76,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42,59,76,0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.08;
  pointer-events:none;

  -webkit-mask-image: radial-gradient(circle at 70% 45%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);
          mask-image: radial-gradient(circle at 70% 45%, rgba(0,0,0,1), rgba(0,0,0,0) 70%);}

.paypanel-grid {position: relative;
  z-index: 1;}

.paypanel h2 {margin:0 0 14px 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height:1.1;
  letter-spacing: -0.02em;}

.paypanel p {font-size: 16px;
  line-height: 1.6;
  color: rgba(42,59,76,0.82);}

/* ============ Hardware (dark) ============ */

.hardware {background: #171717;
  color: #fff;
  padding: 110px 0;
  overflow: hidden;
  position: relative;}

.hardware::before {content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(circle at 80% 55%, rgba(46,107,255,.10), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(0,0,0,.20));
  pointer-events:none;}

.hardware-grid {position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: start;}

.hardware-copy h2 {margin: 0;
  font-size: clamp(34px, 4.3vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;}

.hardware-lede {margin: 14px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.6;
  max-width: 56ch;}

.hardware-points {list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  gap: 18px;}

.hardware-points li {display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  align-items: start;}

.hardware .dot {width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 4px rgba(255,255,255,.08);}

.hardware .point {color: rgba(255,255,255,.80);
  line-height: 1.6;}

.hardware .point strong {color: rgba(255,255,255,.95);}

/* collage placeholders */

/* positions mimic the PDF layout */

/* ============ Add-ons ============ */

.addons {padding: 75px 0 104px;
background:
    linear-gradient(
      to bottom,
      #efefef 0%,
      #efefef 55%,
      #e9e9e9 100%
    );
  padding: 54px 0 34px;
  overflow: hidden;}

.addons::before {content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 18% 28%,
      rgba(46,107,255,.08),
      transparent 52%
    ),
    radial-gradient(
      circle at 82% 42%,
      rgba(255,122,47,.06),
      transparent 55%
    );
  pointer-events: none;
  z-index: 0;}

.addons-head h2 {margin: 0;
  font-size: clamp(34px, 4.0vw, 54px);
  letter-spacing: -0.04em;
  line-height: 1.05;}

.addons-sub {margin: 10px 0 0;
  color: rgba(14,15,18,.72);
  line-height: 1.55;
  font-weight: 500;}

.addon-lines .muted {color: rgba(255,255,255,.55);
  font-weight: 700;}

/* ============ Footer ============ */

.site-footer {position: relative;
  background:
    linear-gradient(
      to bottom,
      #171718 0%,
      #121214 35%,
      #0f0f10 100%
    );
  color: rgba(255,255,255,.88);
  padding: 100px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  overflow: hidden;}

.site-footer::before {content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(46,107,255,.10),
      transparent 55%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(255,122,47,.08),
      transparent 60%
    );
  pointer-events: none;
  opacity: .9;}

.footer-grid {display: grid;
  grid-template-columns: 1.1fr 1.4fr;
  gap: 32px;
  align-items: start;}

.footer-logo {display: inline-flex;
  align-items: center;
  gap: 12px;}

.footer-name {font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
  color: #fff;}

.footer-sub {color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-top: 2px;}

.footer-meta {margin-top: 16px;
  display: grid;
  gap: 6px;
  color: rgba(255,255,255,.62);
  font-weight: 600;
  font-size: 13px;}

.footer-links {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;}

.footer-title {font-weight: 900;
  color: rgba(255,255,255,.82);
  margin-bottom: 10px;}

.footer-link {display: block;
  padding: 8px 0;
  color: rgba(255,255,255,.62);
  font-weight: 600;}

.footer-link:hover {color: rgba(255,255,255,.92);}

/* Responsive */

@media (max-width: 980px) {
.hardware-grid {grid-template-columns: 1fr;}
.footer-grid {grid-template-columns: 1fr;}
.footer-links {grid-template-columns: 1fr;}
}

.solutions-hero {position: relative;
  background:
    linear-gradient(
      to bottom,
      #efefef 0%,
      #efefef 60%,
      #e8e8e8 100%
    );
  padding: 88px 0 72px;
  overflow: hidden;}

.solutions-hero::before {content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(46,107,255,.07), transparent 55%),
    radial-gradient(circle at 80% 40%, rgba(255,122,47,.06), transparent 60%);
  pointer-events:none;}

.solutions-hero .container {position: relative;
  z-index: 1;}

.solutions-hero h1 {margin: 0;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.04em;}

.solutions-lede {margin-top: 18px;
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(14,15,18,.75);
  font-weight: 500;}

.solutions-points {list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  gap: 14px;}

.solutions-points li {position: relative;
  padding-left: 28px;
  font-weight: 600;
  color: rgba(14,15,18,.85);}

.solutions-points li::before {content:"";
  position:absolute;
  left:0;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(46,107,255,.95);}

.solutions-summary {margin-top: 26px;
  font-weight: 600;
  color: rgba(14,15,18,.88);}

.solutions-grid {background: #f6f6f6;
  padding: 96px 0 112px;}

.solutions-grid .container {display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;}

.solution-card {pointer:cursor;
    text-decoration: none;
  color: inherit;
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 28px 32px;
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  border: 1px solid rgba(14,15,18,.08);
  display: flex;
  flex-direction: column;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;}

.solution-card:hover {transform: translateY(-2px);
  box-shadow: 0 28px 60px rgba(0,0,0,.12);
  border-color: rgba(14,15,18,.18);}

.solution-card h3 {margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;}

.solution-card p {margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(14,15,18,.75);}

.solution-card ul {list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px;}

.solution-card li {position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: rgba(14,15,18,.82);
  font-weight: 600;}

.solution-card li::before {content:"";
  position:absolute;
  left:0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(14,15,18,.75);}

.solution-card:hover .solution-card-fake-link {text-decoration: underline;}

.solution-card:focus-visible {outline: 3px solid rgba(46,107,255,.35);
  outline-offset: 4px;}

@media (max-width: 1080px) {
.solutions-grid .container {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 720px) {
.solutions-hero {padding: 68px 0 54px;}
.solutions-grid .container {grid-template-columns: 1fr;}
.solution-card {padding: 24px;}
}

/* HYBRID PAGE STYLES (add to end of /assets/style.css) */

/* Shared solution page primitives */

.solution-hero {position: relative;
  background:
    linear-gradient(to bottom, #efefef 0%, #efefef 55%, #e8e8e8 100%);
  padding: 92px 0 72px;
  overflow: hidden;}

.solution-hero::before {content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(46,107,255,.08), transparent 55%),
    radial-gradient(circle at 82% 45%, rgba(255,122,47,.06), transparent 60%);
  pointer-events:none;}

.solution-hero .container {position: relative; z-index: 1;}

.solution-hero-grid {display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 42px;
  align-items: start;}

.solution-eyebrow {display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(14,15,18,.55);
  margin-bottom: 12px;}

.solution-hero h1 {margin: 0;
  font-size: clamp(36px, 4.8vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.04em;}

.solution-lede {margin-top: 16px;
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(14,15,18,.75);
  font-weight: 500;}

/* Hero art */

/* Sections */

.solution-section {background: #ffffff;
  padding: 88px 0;}

.solution-section--tint {background: #f6f6f6;}

.solution-section h2 {margin: 0;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.03em;}

.solution-section p {margin-top: 18px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(14,15,18,.75);}

.solution-two-col {display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: start;}

/* solution side card — calmer, readable, responsive */
.solution-side-card{
  background: linear-gradient(180deg, #0f1112 0%, #0b0b0c 100%);
  color: rgba(255,255,255,.92);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 36px rgba(2,6,10,.14), 0 2px 6px rgba(2,6,10,.06);
  border: 1px solid rgba(255,255,255,.05);
  position: sticky;
  top: 110px;
  width: 100%;
  max-width: 340px;
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}

/* subtle hover lift for desktop readers */
@media (hover:hover) and (min-width:980px){
  .solution-side-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 28px 46px rgba(2,6,10,.16), 0 4px 10px rgba(2,6,10,.06);
  }
}

/* title — confident, not shouty */
.solution-side-title{
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.96);
  margin-bottom: 12px;
}

/* list layout */
.solution-side-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* list items — readable, medium weight */
.solution-side-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.80);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
}

/* soft circular dot using brand-adjacent tint */
.solution-side-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.60));
  box-shadow: 0 1px 0 rgba(0,0,0,.25) inset;
}

/* small-screen behaviour: card becomes static and full-width */
@media (max-width:979px){
  .solution-side-card{
    position: static;
    top: auto;
    margin: 18px 0 0 0;
    max-width: 100%;
    box-shadow: 0 10px 30px rgba(2,6,10,.06);
    padding: 18px;
    border-radius: 12px;
  }
  .solution-side-title{ font-size:14px; }
  .solution-side-list li{ font-size:13px; padding-left:16px; }
  .solution-side-list li::before{ width:7px; height:7px; top: calc(50% - 3.5px); }
}

/* small adjustments to harmonise with page points block */
.solution-two-col .solutions-points li { margin-bottom: 10px; line-height: 1.36; color: #24323a; }


/* Benefits grid */

.center {text-align: center;}

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

.benefit {background: #ffffff;
  border-radius: 22px;
  padding: 22px 22px 24px;
  border: 1px solid rgba(14,15,18,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.07);}

.benefit h3 {margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;}

.benefit p {margin: 10px 0 0;
  color: rgba(14,15,18,.74);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: none;}

.benefit--highlight {background:
    radial-gradient(circle at 18% 25%, rgba(46,107,255,.10), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(255,122,47,.10), transparent 60%),
    #ffffff;
  border-color: rgba(14,15,18,.12);}

/* CTA */

.solution-cta {background: #ffffff;
  padding: 84px 0 110px;}

.cta-card {border-radius: 26px;
  padding: 42px 42px;
  background:
    radial-gradient(circle at 20% 30%, rgba(46,107,255,.08), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255,122,47,.06), transparent 60%),
    #f1f1f1;
  border: 1px solid rgba(14,15,18,.08);
  box-shadow: 0 20px 55px rgba(0,0,0,.08);
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  align-items: center;}

.cta-card h2 {margin: 0;
  font-size: clamp(26px, 3.0vw, 36px);
  letter-spacing: -0.03em;}

.cta-card p {margin: 12px 0 0;
  color: rgba(14,15,18,.72);
  line-height: 1.6;}

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

/* Ghost button */

.btn-ghost {background: rgba(255,255,255,.30);
  border: 1px solid rgba(14,15,18,.14);
  color: rgba(14,15,18,.85);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);}

.btn-ghost:hover {transform: translateY(-1px);}

@media (max-width: 980px) {
.solution-hero-grid {grid-template-columns: 1fr;}
.solution-two-col {grid-template-columns: 1fr;}
.solution-side-card {position: relative; top: auto;}
.benefits-grid {grid-template-columns: 1fr;}
.cta-card {grid-template-columns: 1fr;}
.cta-actions {justify-content: flex-start;}
}

/* ===== POS Hardware Page Styles (add to end of /assets/style.css) ===== */

/* Source layout/copy follows the hardware PDF. :contentReference[oaicite:1]{index=1} */

/* Reusable sticky subnav (used by Hardware now, Solutions next) */

.section-subnav {background: #efefef;
  border-bottom: 1px solid rgba(14,15,18,.10);
  padding: 14px 0;

  /* Sticky beneath fixed header */
  position: sticky;
  top: 76px;          /* matches body padding-top reserve */
  z-index: 9998;      /* just under .site-header (9999) */}

/* Tabs row */

.section-tabs {display: flex;
  flex-wrap: wrap;
  gap: 12px;}

/* Individual tab */

.section-tab {display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(14,15,18,.16);
  background: rgba(255,255,255,.55);
  color: rgba(14,15,18,.84);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor:pointer;}

.section-tab:hover {border-color: rgba(14,15,18,.28);
  transform: translateY(-1px);}

.hw-tab.is-active, .section-tab.is-active {background: #ffffff;
  border-color: rgba(46,107,255,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);}

/* Hero */

.hw-hero {background: linear-gradient(to bottom, #efefef 0%, #efefef 55%, #e8e8e8 100%);
  padding: 84px 0 56px;
  position: relative;
  overflow: hidden;}

.hw-hero::before {content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 28%, rgba(46,107,255,.08), transparent 55%),
    radial-gradient(circle at 82% 42%, rgba(255,122,47,.06), transparent 60%);
  pointer-events:none;}

.hw-hero-grid {position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 42px;
  align-items: start;}

.hw-eyebrow {display: inline-block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(14,15,18,.55);
  margin-bottom: 12px;}

.hw-hero h1 {margin: 0;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.03;
  letter-spacing: -0.04em;}

.hw-lede {margin-top: 16px;
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(14,15,18,.74);
  font-weight: 600;}

.hw-pills {margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;}

.hw-pill {display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(14,15,18,.10);
  font-weight: 800;
  color: rgba(14,15,18,.72);
  box-shadow: 0 14px 35px rgba(0,0,0,.06);}

/* Hero art placeholders */

.hw-hero-art {position: relative;
  min-height: 300px;}

.hw-art-card {position: absolute;
  border-radius: 22px;
  border: 1px solid rgba(14,15,18,.14);
  background: rgba(255,255,255,.20);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
  overflow: hidden;}

.hw-art-card::before {content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right, rgba(14,15,18,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,15,18,.03) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .75;}

.hw-art-card.x {width: 78%; height: 110px; left: 4%; top: 18px; transform: rotate(-6deg);}

.hw-art-card.y {width: 92%; height: 160px; left: 14%; top: 96px; transform: rotate(6deg);}

.hw-art-card.z {width: 86%; height: 190px; left: 8%; top: 172px; transform: rotate(-2deg);}

/* Device cards */

.hw-section {scroll-margin-top: 140px;
  background: #ffffff;
  padding: 62px 0 88px;}

.hw-cards {margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: start;}

.hw-card {border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(14,15,18,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.08);
  padding: 22px 22px 24px;}

.hw-card-top h2 {margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;}

.hw-card-sub {margin: 10px 0 0;
  color: rgba(14,15,18,.64);
  font-weight: 700;}

.hw-media {margin-top: 18px;
  border-radius: 18px;
  background: #0f0f10;
  border: 1px solid rgba(255,255,255,.10);
  height: 260px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);}

.hw-media-inner {position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(46,107,255,.18), transparent 55%),
    radial-gradient(circle at 78% 75%, rgba(255,122,47,.14), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.25));
  opacity: .95;}

.hw-media-inner img {width:100%;}

.hw-spec {margin-top: 18px;
  display: grid;
  gap: 12px;}

.hw-spec-row {display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: start;}

.hw-spec-label {font-weight: 900;
  color: rgba(14,15,18,.70);}

.hw-spec-value {color: rgba(14,15,18,.80);
  font-weight: 700;
  line-height: 1.5;}

/* Dark sections (texture + “nice blacks”) */

/* ---------- Hardware stage system: paste into styles.css ---------- */

/* Grid */

.hw-duo {margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: start;}

/* Card baseline */

.hw-dark-card {border-radius: 22px;
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 55px rgba(0,0,0,.35);
  padding: 22px;
  color: #d9d9d9;
  overflow: visible;}

/* Frame / stage for product renders */

.hw-dark-media {border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.24));
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;                 /* internal breathing room */
  box-sizing: border-box;
  aspect-ratio: 16/10;           /* desktop frame; changes on mobile below */}

/* inner wrapper kept for compatibility */

.hw-dark-media-inner {width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;}

/* Product images: never cropped, always contained */

.hw-dark-media-inner img, .hw-dark-media img {width: 100%;
  height: 100%;
  object-fit: contain;     /* critical: keep whole render visible */
  object-position: center;
  display:block;
  backface-visibility:hidden;
  will-change: transform;
  transition: transform .18s ease;
  transform-origin: center center;
  max-width:100%;
  max-height:100%;}

/* --- visual-weight presets (add classes to the .hw-dark-card) --- */

/* Handheld: smaller presence */

.hw-handheld .hw-dark-media-inner img, .hw-handheld .hw-dark-media img {transform: scale(.72);}

/* Tablet: medium presence (F2 Max / Falcon) */

.hw-tablet .hw-dark-media-inner img, .hw-tablet .hw-dark-media img {transform: scale(.90);}

/* Countertop: heaviest presence (Swan / desktop) */

.hw-counter .hw-dark-media-inner img, .hw-counter .hw-dark-media img {transform: translate(2%,4%) scale(.90);}

/* micro-lift on hover for desktop pointer devices */

@media (hover: hover) {
.hw-dark-card:hover .hw-dark-media-inner img {transform: translateY(2%,2%) scale(.90);}
}

/* Metadata / caption */

.hw-dark-meta {margin-top: 12px; font-size: 15px; color:#e6e6e6; line-height:1.45;}


/* Responsive: stack on narrow screens and adjust ratios */

@media (max-width: 980px) {
.hw-duo {grid-template-columns: 1fr; gap: 20px;}
.hw-dark-media {aspect-ratio: 4/3; padding: 14px;}
/* nudge scales for mobile readability */
.hw-handheld .hw-dark-media-inner img {transform: scale(.78);}
.hw-tablet .hw-dark-media-inner img {transform: scale(.90);}
.hw-counter .hw-dark-media-inner img {transform: scale(.98);}
/* disable hover micro-boost on touch */
.hw-dark-card:hover .hw-dark-media-inner img {transform: none;}
}

/* subtle halo to help silhouette on dark background */

.hw-dark-media::before {content: "";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(1200px 600px at 30% 30%, rgba(46,107,255,.06), transparent 18%),
              radial-gradient(900px 420px at 78% 70%, rgba(255,122,47,.03), transparent 16%);
  mix-blend-mode: screen;
  opacity: .9;}

/* Accessibility: ensure images never overflow */

.hw-dark-media img {max-width:100%; max-height:100%;}

.hw-dark {background: #171717;
  color: rgba(255,255,255,.90);
  padding: 92px 0 96px;
  position: relative;
  overflow: hidden;}

.hw-dark::before {content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(circle at 82% 55%, rgba(46,107,255,.10), transparent 60%),
    radial-gradient(circle at 70% 90%, rgba(255,122,47,.08), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(0,0,0,.28));
  pointer-events:none;}

.hw-dark::after {/* subtle grain */
  content:"";
  position:absolute;
  inset:-40px;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.02),
    rgba(255,255,255,.02) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: .22;
  pointer-events:none;
  transform: rotate(2deg);}

.hw-dark .container {position: relative;
  z-index: 1;}

.hw-dark-head h2 {margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: aliceblue;}

.hw-light-head h2 {margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: chocolate;}

.hw-dark-head p {margin: 12px 0 0;
  color: rgba(255,255,255,.70);
  font-weight: 700;}

.hw-dark-title {font-weight: 900;
  color: rgba(255,255,255,.70);
  letter-spacing: -0.02em;
  margin-bottom: 14px;}
  
.hw-light-title {font-weight: 900;
  color: chocolate;
  letter-spacing: -0.02em;
  margin-bottom: 14px;}

.hw-dark-meta {margin-top: 14px;
  color: rgba(255,255,255,.74);
  font-weight: 800;
  line-height: 1.55;}

.hw-dark-meta .muted {color: rgba(255,255,255,.52);
  font-weight: 800;}

.hw-dark--alt {background: #151515;}

.hw-dark-card--single .hw-dark-media {height: 360px;
  padding: 14px;}

/* Responsive */

@media (max-width: 980px) {
.hw-hero-grid {grid-template-columns: 1fr;}
.hw-hero-art {min-height: 260px;}
.hw-cards {grid-template-columns: 1fr; gap: 20px;}
.hw-duo {grid-template-columns: 1fr;}
}

.hw-hero-follow {max-width: 680px;
  margin-top: 18px;}

.hw-hero-follow p {font-size: 15px;
  line-height: 1.6;
  color: rgba(14,15,18,.78);
  margin: 0 0 10px 0;}

.hw-hero-follow p:last-child {margin-bottom: 0;}

/* Light section headers for Solutions (and any non-dark sections) */

.hw-light-head h2 {margin: 0;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;}

.hw-light-head p {margin: 14px 0 0;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(14,15,18,.75);
  font-weight: 600;}

/* Solutions: two-column layout (copy + visual) */

.sol-copy .solutions-points {margin-top: 0;}

/* Dark sections: soften borders so it feels native */

.hw-dark .sol-visual {border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 55px rgba(0,0,0,.35);}

/* Responsive */

/* Ensure the plane wrapper cannot render as a black slab */

.tiers-plane {position: relative;
  background: transparent !important;}

/* Size and position the SVG plane exactly behind the pills */

.tiers {position: relative;}

.tiers-plane {position: absolute;
  left: 0;
  right: 0;
  /* place it behind the tier row */
  top: -55px;            /* adjust to taste */
  height: 140px;          /* adjust to taste */
  pointer-events: none;
  z-index: 0;}

.tiers-grid {position: relative;
  z-index: 1;             /* pills above plane */}

/* Make SVG transparent by default */

.tiers-svg {width: 100%;
  height: 100%;
  display: block;}

/* Hard force explicit fills so nothing inherits "black" */

.tiers-plane-bg {fill: rgba(255,255,255,0.00);}

.tiers-grid-line {stroke: rgba(0,0,0,0.08); stroke-width: 1;}

.tiers-grid {opacity: 0.55;}

/* geometry only for now */

.tiers-grid-line {stroke: rgba(0,0,0,0.06);
  stroke-width: 1;}

.tiers-grid {opacity: 0.55;}

/* Activation envelopes — geometry-only (no colour accents yet) */

.tiers-env-core {fill: rgba(0,0,0,0.06);   /* this is the “density” in the field */
  opacity: 0.18;           /* keep calm; increase if you want stronger */}

.tiers-env-trace {fill: rgba(0,0,0,0.10);   /* thin structural traces */
  opacity: 0.22;}

/* Optional: if you want them even quieter by default */

@media (prefers-reduced-motion: reduce) {
.tiers-env-core {opacity: 0.14;}
.tiers-env-trace {opacity: 0.18;}
}

/* ================================
   MOTIF BASE (Reusable System)
================================ */

.container.hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 420px); /* copy | motif */
  gap: 32px;
  align-items: center;
  align-content: center;
}

@media (max-width: 1024px) {
  /* slightly reduce gap on narrower tablets */
  .container.hero-grid {
    gap: 24px;
    grid-template-columns: 1fr minmax(300px, 40%); /* keep motif visible */
  }
}

/* Mobile: force-centre motif and neutralise inner positioning */
@media (max-width: 860px) {
  .container.hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;    /* centre children horizontally */
    gap: 20px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-copy {
    order: 1;
    z-index: 2;
    position: relative;
    width: 100%;
    max-width: 720px;
    text-align: left;
  }

  .motif {
    order: 2;
    z-index: 1;
    position: relative;     /* ensure not absolute */
    width: min(420px, 96vw);
    max-width: 420px;       /* hard constraint so centring is reliable */
    margin-left: 0;
    margin-right: 0;           /* centre as fallback */
    align-self: center;     /* explicit flex centring */
    transform: none !important;
    right: auto !important;
  }

  /* If the motif contains absolutely positioned children (SVG groups, masks, layers),
     neutralise them so they can't pull the whole motif left. Use only for debugging
     or until you remove those absolute rules in the motif internals. */
  .motif > * {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .motif svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}


@media (max-width: 520px) {
  .hero-points { gap: 8px; }
  .hero-points li { font-size: 15px; line-height: 1.4; }
}

.motif {position: relative;
  position: relative;
  width: min(350px, 96vw);
  aspect-ratio: 720 / 520;
  margin-left: 0;       /* let grid place it, remove auto push */
  margin-right: 0;
  justify-self: end;    /* align motif to the right column */
  overflow: visible;
  display: block;
}

@media (max-width: 860px) {
.motif {
    left:-10px;
    width: min(420px, 96vw);
    aspect-ratio: 360 / 400;/* your idea, slightly larger */}
}

/* ----------------
   Background Grid
-----------------*/

.motif__bg {position: absolute;
  inset: -40px -60px -60px -40px;
  border-radius: 28px;

  background-image:
    linear-gradient(rgba(0,0,0,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.10) 1px, transparent 1px);
  background-size: 40px 40px;

  /* gradient bleed */
  mask-image: radial-gradient(circle at center,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,0.6) 70%,
      rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle at center,
      rgba(0,0,0,1) 45%,
      rgba(0,0,0,0.6) 70%,
      rgba(0,0,0,0) 100%);

  opacity: 0.45;
  pointer-events: none;}

/* ----------------
   Stack container
-----------------*/

.motif__stack {inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;   /* <— add */
  z-index: 1;}

/* ----------------
   Tag
-----------------*/

.motif__tag {position: static;
    transform: none;
    padding: 6px 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #2A3B4C;
    opacity: 0.75;
    margin-bottom: 16px;
    box-shadow: none;
    z-index: auto;
    text-transform: uppercase;}

/* ----------------
   Cards (Planes)
-----------------*/

.motif__card {width: 340px;
  padding: 35px 35px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  border: 1px dotted rgba(0,128,128,0.35);
  box-shadow: 0 22px 60px rgba(0,0,0,0.14);
  text-align: left;
  position: relative;
  z-index: 2;
  margin-top: -16px;
  transition: transform 0.2s ease;
  backdrop-filter: blur(2px);}

/* Depth via offset only */

.motif__card--a {margin-top: 0;
  z-index: 3;
  box-shadow: 0 26px 70px rgba(0,0,0,0.16);}

.motif__card--b {margin-left: 48px;
  z-index: 2;
  box-shadow: 0 18px 48px rgba(0,0,0,0.12);}

.motif__card--c {margin-left: 0;
  z-index: 1;
  box-shadow: 0 14px 36px rgba(0,0,0,0.08);}

/* ----------------
   Typography
-----------------*/

.motif__title {font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.85);
  margin-bottom: 4px;}

.motif__meta {font-size: 13px;
  color: rgba(0,0,0,0.55);}

/* ================================
   PAYMENTS.FLOW — horizontal motif
   ================================ */

.motif--payments {height:300px;
  position: relative;
  width: 100%;                 /* full width under text */
  margin-top: 26px;            /* spacing from paragraph */
  border-radius: 28px;
  overflow: hidden;
  padding: 20px 44px 10px 44px;     /* top room for tag + breathing space */
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.86), transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(126,194,169,0.18), transparent 60%),
    rgba(255,255,255,0.34);
  border: 1px solid rgba(42,59,76,0.08);
  box-shadow: 0 22px 60px rgba(0,0,0,0.10);
  margin-left: 0;
  aspect-ratio: 720 / 250;}

/* The stack is the “rail” the cards sit on */

.motif--payments .motif__stack {position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start; /* start from left edge */
  gap: 0;
  padding-left: 10px;          /* gives card A a clean start */}

/* PAYMENTS.FLOW tag */

.motif--payments .motif__tag {position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);

  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42,59,76,0.75);
  opacity: 0.9;
  margin: 0;
  z-index: 5;
  pointer-events: none;}

/* Horizontal spine behind cards 
.motif--payments .motif__stack::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  height: 2px;
  top: 15%;
  transform: translateY(-50%);
  background: rgba(126,194,169,0.38);
  z-index: 0;
  pointer-events:none;
}
*/

/* Cards — same width, middle taller */

.motif--payments .motif__card {/* width: clamp(210px, 22vw, 260px);  equal width for A/B/C */
  width: 80%;
  padding: 16px 18px;
  border-radius: 18px;

  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);

  text-align: center;
  position: relative;
  z-index: 2;}

/* Left */

.motif--payments .motif__card--a {height: 80px;
  z-index: 2;
  transform: translateX(0);}

/* Middle (dominant) */

.motif--payments .motif__card--b {height: 125px;
  z-index: 4;
  border-color: rgba(42,59,76,0.12);

  /* overlap both sides */
  margin-left: -34px;
  margin-right: -34px;}

/* Right */

.motif--payments .motif__card--c {height: 80px;
  z-index: 2;
  transform: translateX(0);}

/* Optional: tighten typography inside cards (if needed) */

.motif--payments .motif__title {font-weight: 700;
  color: rgba(0,0,0,0.82);}

.motif--payments .motif__meta {margin-top: 4px;
  color: rgba(0,0,0,0.55);
  line-height: 1.35;}

/* Responsive: stack vertically on small screens */

@media (max-width: 720px) {

  .motif--payments {
    padding: 96px 22px 32px;
    min-height: 500px;
    aspect-ratio: 720 / 500;
  }

  .motif--payments .motif__stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-left: 0;
    gap: 22px;
  }

  .motif--payments .motif__stack::before {
    display: none;
  }

  .motif--payments .motif__card {
    width: 100%;
    margin-bottom: 6px;
  }

  .motif--payments .motif__card--b {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0px;
  }
  
  .motif--payments .motif__card--c {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0px;
  }

}


/* Solutions hero uses main hero background but tighter scale */

.hero-solutions .hero-copy {max-width: 720px;}

/* =========================================================
   SOLUTIONS MAIN PAGE — ONLY SELECTORS USED IN solutions.php
   ========================================================= */

/* ---------- Hero blocks ---------- */

.page-solutions .solutions-hero {padding: 92px 0 96px;
  position: relative;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-height, 72px) + 12px);}

/* Light variant */

.page-solutions .solutions-hero:not(.hw-dark) {background:#ffffff;
  color:#0e0f12;}

/* Dark variant */

.page-solutions .solutions-hero.hw-dark {background:#171717;
  color:rgba(255,255,255,.90);}

.page-solutions .solutions-hero.hw-dark::before {content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(circle at 82% 55%, rgba(46,107,255,.10), transparent 60%),
    radial-gradient(circle at 70% 90%, rgba(255,122,47,.08), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(0,0,0,.28));
  pointer-events:none;}

.page-solutions .solutions-hero.hw-dark::after {content:"";
  position:absolute;
  inset:-40px;
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.02),
    rgba(255,255,255,.02) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:.22;
  pointer-events:none;
  transform:rotate(2deg);}

.page-solutions .solutions-hero.hw-dark .container {position:relative;
  z-index:1;}

/* ---------- Headings ---------- */

.page-solutions .solutions-hero h1 {margin:0 0 10px 0;
  letter-spacing:-0.03em;
  position:relative;
  display:inline-block;
  padding-bottom:8px;}

.page-solutions .solutions-hero h1::after {content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:48px;
  height:3px;
  background:var(--accent-color, #2F6BFF);
  border-radius:2px;}

.page-solutions .solutions-hero h3 {margin:0 0 18px 0;
  font-weight:600;}

/* Light text */

.page-solutions .solutions-hero:not(.hw-dark) h3 {color:rgba(14,15,18,.78);}

/* Dark text */

.page-solutions .solutions-hero.hw-dark h1, .page-solutions .solutions-hero.hw-dark h3 {color:rgba(255,255,255,.96);}

/* ---------- Lede ---------- */

.page-solutions .solutions-lede {max-width:72ch;
  line-height:1.6;}

.page-solutions .solutions-hero:not(.hw-dark) .solutions-lede {color:rgba(14,15,18,.72);}

.page-solutions .solutions-hero.hw-dark .solutions-lede {color:rgba(255,255,255,.78);}

/* spacing rhythm */

.page-solutions .solutions-lede + .hero-points {margin-top:18px;}

.page-solutions .hero-points + .solutions-lede {margin-top:28px;}

/* ---------- Bullet list ---------- */

.page-solutions .hero-points {margin:22px 0;
  padding:0;
  list-style:none;
  max-width:72ch;}

.page-solutions .hero-points li {display:flex;
  align-items:flex-start;
  gap:12px;
  margin:12px 0;
  line-height:1.35;}

.page-solutions .solutions-hero:not(.hw-dark) .hero-points li {color:rgba(14,15,18,.88);}

.page-solutions .solutions-hero.hw-dark .hero-points li {color:rgba(255,255,255,.88);}

/* ---------- Tick icons ---------- */

.page-solutions .tick {width:18px;
  height:18px;
  margin-top:4px;
  border-radius:6px;
  background: rgba(14,15,18,.06);
  border:1px solid rgba(14,15,18,.12);
  position:relative;
  flex:0 0 18px;}

.page-solutions .tick::after {content:"";
  position:absolute;
  left:5px;
  top:4px;
  width:7px;
  height:4px;
  border-left:2px solid rgba(14,15,18,.80);
  border-bottom:2px solid rgba(14,15,18,.80);
  transform:rotate(-45deg);}

/* green variant */

.page-solutions .tick__green {background:rgba(126,194,169,1);
  border:0;
  box-shadow:0 0 0 1px rgba(0,0,0,.04) inset,0 1px 2px rgba(0,0,0,.06);}

.page-solutions .tick__green::after {border-left:2px solid rgba(255,255,255,.95);
  border-bottom:2px solid rgba(255,255,255,.95);
  left:4px;
  top:3px;
  width:8px;
  height:5px;}

/* ---------- View solution link ---------- */

.page-solutions .solution-link {display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
  font-weight:600;
  color:var(--accent-color, #2F6BFF);
  text-decoration:none;
  letter-spacing:0.01em;}

.page-solutions .solutions-hero.hw-dark .solution-link {color:#9db7ff;}

.page-solutions .solution-link .arrow {width:18px;
  height:18px;
  position:relative;
  display:inline-block;}

.page-solutions .solution-link .arrow::after {content:"";
  position:absolute;
  left:2px;
  top:6px;
  width:10px;
  height:10px;
  border-right:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;}

.page-solutions .solution-link:hover .arrow::after {transform:translateX(4px) rotate(45deg);}

/* ---------- Section tabs ---------- */

.page-solutions .section-tab {border-radius:10px;
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  padding:8px 14px;}

.page-solutions .section-tab.is-active, .page-solutions .section-tab:focus {background:#fff;
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 1px 2px rgba(0,0,0,.04);}

/* ==========================================
   SOLUTION DETAIL PAGES
   ========================================== */

.solution-detail {background:#fff;}

/* HERO */

.solution-hero {padding:100px 0 60px;}

.solution-eyebrow {font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(14,15,18,.55);
  margin-bottom:14px;}

.solution-intro {font-size:18px;
  line-height:1.6;
  margin-top:14px;
  max-width:720px;
  color:rgba(14,15,18,.80);}

.solution-bullets {margin:26px 0;
  padding-left:18px;
  max-width:720px;
  line-height:1.7;}

.solution-bullets li {margin:12px 0;}

.solution-emphasis {font-weight:600;
  margin-top:24px;}

.solution-outro {margin-top:8px;
  font-style:italic;
  max-width:720px;}

/* BLOCKS */

.solution-block {padding:80px 0;}

/* TITLES */

.section-title {text-align:center;
  margin-bottom:36px;}

.section-intro {text-align:center;
  margin:-20px auto 40px;
  max-width:620px;
  color:rgba(14,15,18,.70);}

/* GRID */

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

.solution-card {border:1px solid rgba(14,15,18,.12);
  border-radius:18px;
  padding:26px;
  background:#f8f8f8;
  min-height:160px;}

.solution-card h3 {margin-bottom:12px;}

.solution-card p {line-height:1.6;
  margin:6px 0;}

/* RESPONSIVE */

@media (max-width:900px) {
.solution-grid {grid-template-columns:1fr;}
.solution-hero {padding:80px 0 40px;}
}

/* small tweak: ensure multi-line card copy stays visually balanced */

.solution-card p {margin: 8px 0 0;
  color: rgba(14,15,18,.78);}

/* Make sure nested fit block respects hero padding + keeps grid aligned */

.page-solutions .solutions-hero {position: relative;
  padding-bottom: 56px; /* extra breathing room for nested tiers */}

/* When solution-fit is inside hero, remove its top padding so it visually sits within the band */

.page-solutions .solutions-hero .solution-fit {padding-top: 28px;
  padding-bottom: 40px;}

/* Keep tiers grid aligned with container gutters and avoid visual overflow */



/* Ensure each tier keeps the familiar chip look and consistent min-height */

.tier {display:inline-flex;
  align-items:center;
  padding:22px 28px;
  border-radius:12px;
  background: rgba(255,255,255,0.04); /* subtle surface that reads on hero */
  border:1px solid rgba(14,15,18,0.04);
  min-width:220px;
  flex: 1 1 28%;
  box-sizing:border-box;
  cursor: default;
    pointer-events: none;}

/* Mobile fallback */

@media (max-width:900px) {
.page-solutions .solutions-hero {padding-bottom: 32px;}
.page-solutions .solutions-hero .solution-fit {padding-top: 18px; padding-bottom: 24px;}
.tier {flex: 1 1 100%; min-width: auto;}
}

/* single-grid, auto-fit responsive grid — prevents orphan items */

.tiers-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:42px;
}

/* pill styling */

.tier {display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 18px 26px;
  border-radius: 12px;
  background: rgba(14,15,18,0.03);
  border:1px solid rgba(14,15,18,0.06);
  color: rgba(14,15,18,0.85);
  font-weight:700;
  text-decoration:none;
  width:100%;
  box-sizing: border-box;
  min-width: 0; /* prevents overflow */
  max-width: 420px; /* keeps very wide pills constrained */}

/* small screen: single column full-width */

@media (max-width: 760px) {
.tiers-grid {grid-template-columns: 1fr; max-width: 100%; padding: 0 18px;}
.tier {justify-content:flex-start; padding-left:18px;}
}

.section-subnav .section-tab.is-active {background: linear-gradient(180deg, #ffffff 0%, #f4f7ff 100%);
  border-color: #dbe3ff;
  color: #E9A86A;

  /* gives the “selected chip” feel instead of pressed button */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 0 0 1px rgba(80,110,255,0.06),
    0 2px 6px rgba(30,60,255,0.08);}

/* ABOUT page additions (safe drop-in) */

.motif--about .motif__tag {letter-spacing: 0.14em;}

.about-journey {padding: 84px 0;}

.about-journey-grid .container {display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;}

.about-journey-grid .solution-card {grid-column: span 6;}

@media (max-width: 920px) {
.about-journey-grid .solution-card {grid-column: span 12;}
}

.about-signoff {margin-top: 26px;
  opacity: 0.78;}

/* --- optional: payments page small UI polish --- */

.solution-two-col .solutions-points li {margin-bottom: 10px;
  line-height: 1.36;
  color: #24323a; /* slightly darker for clarity */}

.solution-side-card .solution-side-title {font-weight:600;
  letter-spacing:0.02em;}

.solution-cta .cta-card {display:flex; align-items:center; justify-content:space-between; gap:20px;}

@media (max-width:800px) {
.solution-cta .cta-card {flex-direction:column; text-align:center;}
}
/* =========================
   POS.WORK CONTACT MODAL
   ========================= */

/* base hidden */
#contact-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

/* visible */
#contact-modal.is-open {
  display: block;
}

/* backdrop */
#contact-modal .cq-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,22,26,0.60);
  backdrop-filter: blur(6px);
}

/* modal panel */
#contact-modal .cq-modal__panel {
  position: relative;
  width: min(520px, 92%);
  margin: 10vh auto;
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 28px 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.35);
  font-family: inherit;
}

/* close button */
#contact-modal .cq-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: #445;
}

/* title */
#contact-modal h3 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
}

/* fields */
#contact-modal .cq-field {
  margin-bottom: 14px;
}

#contact-modal label {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
  color: #556575;
  letter-spacing: .02em;
}

#contact-modal input,
#contact-modal textarea {
  width: 100%;
  border: 1px solid #d7dde3;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  transition: border .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

#contact-modal input:focus,
#contact-modal textarea:focus {
  outline: none;
  border-color: #5c8df6;
  box-shadow: 0 0 0 3px rgba(92,141,246,0.15);
}

/* actions row */
#contact-modal .cq-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* prevent background scroll */
body.no-scroll {
  overflow: hidden;
}

/* mobile */
@media (max-width: 480px) {
  #contact-modal .cq-modal__panel {
    margin: 6vh auto;
    padding: 22px 20px 20px;
    border-radius: 14px;
  }
}

#contact-title{color:var(--cta-dark);font-family: "Bruno Ace"}
/* Hero: subtle platform credit — link opens in a new tab */
.hero-platform-note {
  margin-top: 0.5rem;               /* small gap from preceding paragraph */
  color: var(--muted-text, #6b767d);/* muted body text */
  font-size: 0.98rem;
  line-height: 1.45;
  font-weight: 400;
  margin-bottom: 0;                 /* keeps flow tight in hero */
}

/* Link styling: subtle, discoverable, not a CTA */
.hero-platform-note a {
  color: var(--muted-text, #6b767d);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;                 /* slight emphasis to be discoverable */
  transition: color .12s ease, text-decoration-color .12s ease;
}

/* hover / focus: small lift in contrast (still not CTA) */
.hero-platform-note a:hover,
.hero-platform-note a:focus {
  color: var(--cta-dark, #2b6ef6);  /* subtle emphasis on hover/focus */
  outline: none;
  text-decoration-color: rgba(0,0,0,0.12);
}

/* keyboard focus visible */
.hero-platform-note a:focus-visible {
  box-shadow: 0 0 0 3px rgba(43,110,246,0.12);
  border-radius: 4px;
}
/* --------- Pricing block (reusable) --------- */
.pricing-block { background: #f6f6f6; padding: 64px 0; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 28px;
  align-items: start;
}

/* card */
.pricing-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 16px 36px rgba(2,6,10,0.06);
  border: 1px solid rgba(15,20,25,0.03);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing-card h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.18;
  color: #24323a;
  font-weight: 700;
}

.pricing-card p {
  margin: 0;
  color: #475a61;
  line-height: 1.5;
  font-size: 14.5px;
  flex: 1 0 auto;
}

/* subtle contextual tint for the hardware card (example) */
.pricing-card--hardware {
  border-left: 4px solid rgba(43,110,246,0.10);
}

/* software card accent */
.pricing-card--software {
  border-left: 4px solid rgba(42,163,132,0.08);
}

/* services card accent */
.pricing-card--services {
  border-left: 4px solid rgba(232,111,45,0.08);
}

/* CTA row */
.pricing-cta .btn {
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--cta-dark, #2b6ef6);
  color: #fff;
  border: 0;
  cursor: pointer;
}

/* Hover */
.pricing-cta .btn:hover { filter: brightness(.96); transform: translateY(-1px); }

/* Responsive: tablet */
@media (max-width: 1024px) {
  .pricing-grid { gap: 20px; }
  .pricing-card { padding: 18px; min-height: 150px; }
}

/* Responsive: stack at <=860px */
@media (max-width: 860px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pricing-block { padding: 44px 0; }
  .pricing-card { border-radius: 12px; padding: 16px; }
  .center { text-align: center; }
}

/* small phones */
@media (max-width: 420px) {
  .pricing-block { padding: 36px 0; }
  .pricing-card h3 { font-size: 16px; }
  .pricing-card p { font-size: 14px; }
  .pricing-cta .btn { width: 100%; padding: 12px; border-radius: 8px; }
}

.contact-button{cursor:pointer;}