/* =====================================================
   TEAMWORK COMMERCE, REAL BRAND COLORS FROM GUIDELINES
   Primary:    #247DFF  (Electric Blue)
   Secondary:  #003DFF  (Royal Blue)
   Accent:     #5078F5  (Purple)
   Accent 2:   #2F58D6  (Deep violet)
   ===================================================== */
:root {
  --bg: #f7f9fc;
  --bg-rgb: 247, 249, 252;   /* for gradients that must fade to --bg cleanly */
  /* Measured, and identical at every breakpoint. The homepage hero is sized
     from these so the logo rail's bottom edge lands on the bottom of the
     viewport whatever the screen. Keep them in step with .nav and .logos. */
  --nav-h: 84px;
  --logos-h: 100px;
  /* The accent purple, kept out of the blue rotation. The ramp is blue now,
     so this is for the few places that want a deliberate purple. */
  --brand-violet: #7C50F5;
  --bg-deep: #eef2f8;
  --bg-elevated: #ffffff;
  --bg-inverse: #07091a;
  --panel: #ffffff;
  --text: #07091a;
  --text-muted: #5a6478;
  --text-faint: #5d6678;
  --text-inverse: #ffffff;
  --border: rgba(7, 9, 26, 0.12);
  --border-strong: rgba(7, 9, 26, 0.16);

  --brand-blue: #247DFF;
  --brand-royal: #003DFF;
  --brand-purple: #5078F5;
  --brand-magenta: #2F58D6;   /* was magenta; cooled to deep violet */

  --gradient: linear-gradient(135deg, #247DFF 0%, #5078F5 60%, #2F58D6 100%);
  --gradient-soft: linear-gradient(135deg, rgba(36, 125, 255, 0.10) 0%, rgba(80, 120, 245, 0.10) 60%, rgba(47, 88, 214, 0.08) 100%);
  --gradient-radial: radial-gradient(ellipse at center, rgba(36, 125, 255, 0.18), rgba(80, 120, 245, 0.10) 40%, transparent 70%);
  --gradient-alt: linear-gradient(135deg, #003DFF 0%, #5078F5 55%, #2F58D6 100%);
  --gradient-alt-radial: radial-gradient(ellipse at center, rgba(80, 120, 245, 0.20), rgba(47, 88, 214, 0.12) 40%, transparent 70%);
  --gradient-alt-soft: linear-gradient(135deg, rgba(0, 61, 255, 0.08) 0%, rgba(80, 120, 245, 0.10) 100%);

  --brand-soft: rgba(36, 125, 255, 0.08);
  --brand-text: #0050d4;
  --grid-line: rgba(7, 9, 26, 0.05);

  --shadow: 0 1px 2px rgba(7, 9, 26, 0.04), 0 8px 24px rgba(7, 9, 26, 0.06);
  --shadow-lg: 0 24px 60px rgba(7, 9, 26, 0.10);
  --shadow-glow: 0 20px 60px rgba(36, 125, 255, 0.25);

  --radius: 10px;
  --radius-lg: 14px;
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'IBM Plex Sans', 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  /* One editorial note against the sans, used a word at a time. */
  /* System serif, off the audit's own editorial list. The named foundry faces
     (Tiempos, Sohne, Migra) each need a purchased licence; ui-serif resolves
     to New York on Apple and Georgia elsewhere, both real text serifs with a
     true italic, and it costs no webfont request. */
  --font-serif: ui-serif, 'New York', Georgia, 'Times New Roman', serif;
  --max-w: 1280px;
}
[data-theme="dark"] {
  --bg: #07091a;
  --bg-rgb: 7, 9, 26;
  --bg-deep: #050717;
  --bg-elevated: #0f1228;
  --bg-inverse: #ffffff;
  --panel: #0f1228;
  --text: #ffffff;
  --text-muted: #9ba8c0;
  --text-faint: #7b8599;
  --text-inverse: #07091a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --brand-blue: #4D94FF;
  --brand-text: #80B0FF;
  --brand-soft: rgba(77, 148, 255, 0.12);
  --grid-line: rgba(255, 255, 255, 0.04);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 20px 60px rgba(36, 125, 255, 0.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}
h1, h2, h3, .display, .pillar-title, .section-title, .eyebrow {
  font-family: var(--font-display);
}
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* Brand display font weights (SF Compact Display style) */
.display { font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block;
}

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; max-width: var(--max-w); margin: 0 auto; padding: 0 32px;
}
.nav-logo { height: 46px; display: flex; align-items: center; }
.nav-logo img { height: 100%; width: auto; display: block; }
.nav-logo .logo-light { display: block; }
.nav-logo .logo-dark { display: none; }
[data-theme="dark"] .nav-logo .logo-light { display: none; }
[data-theme="dark"] .nav-logo .logo-dark { display: block; }

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-link {
  font-size: 14px; padding: 8px 14px; border-radius: 8px;
  color: var(--text-muted); transition: all 0.15s ease;
  display: flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 400;
}
.nav-link:hover { color: var(--text); background: var(--bg-deep); }
/* Active section + current page indicators */
.nav-link-active { color: var(--text); font-weight: 600; position: relative; }
.nav-link-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--gradient);
}
.nav-dropdown a.is-current {
  color: var(--brand-text); font-weight: 600; background: var(--brand-soft);
}
.nav-mobile-menu a.is-current { color: var(--brand-text); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.btn-icon {
  width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease; font-size: 16px;
}
.btn-icon:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-deep); }

/* Buttons keep the site's own fill, weight and hover. The only thing borrowed from
   Apple is the shape: a full pill instead of an 8px corner. */
/* Button text presence, raised sitewide after "text on buttons is not visible":
   one size up, a weight up, no tracking squeeze. Every variant inherits. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: 980px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent;
  font-family: var(--font-body); white-space: nowrap; letter-spacing: 0;
}
.btn-primary {
  background: var(--gradient); border-color: rgba(255, 255, 255, 0.15);
  box-shadow:0 6px 20px -2px rgba(7, 9, 26, 0.3), 0 2px 6px rgba(7, 9, 26, 0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow:0 10px 26px -2px rgba(7, 9, 26, 0.3), 0 4px 10px rgba(7, 9, 26, 0.28); }
.btn-ghost {
  background: var(--bg-elevated); color: var(--text); border: 1.5px solid var(--border-strong);
  box-shadow:0 2px 8px rgba(7, 9, 26, 0.06);
}
.btn-ghost:hover { background: var(--bg-deep); border-color: var(--brand-blue); color: var(--brand-text); transform: translateY(-1px); }
.btn-lg { padding: 16px 30px; font-size: 15px; }

/* ============ HERO ============ */
.hero { position: relative; padding: 60px 0 0; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}
.hero-glow {
  position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px; pointer-events: none; z-index: 0;
}
/* padding-block, never the padding shorthand: these elements also carry .container, and
   a shorthand with a 0 horizontal value wipes the container's own side padding. That ran
   the hero copy edge to edge on every phone. */
.hero-inner { position: relative; z-index: 1; padding-block: 28px 56px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.01em;

  margin-bottom: 32px;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-blue);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-blue) 25%, transparent);
}

.hero h1 {
  font-weight: 600;
  font-size: clamp(46px, 7vw, 96px);
  letter-spacing: -0.045em; line-height: 0.94;
  margin-bottom: 28px;
  text-transform: none;
}
.hero-sub {
  font-size: 19px; color: var(--text-muted); line-height: 1.55;
  max-width: 660px; margin: 0 auto 40px; font-weight: 400;
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }
/* left-aligned heroes: buttons start at the text edge */
.hero-cta-left { justify-content: flex-start; margin-bottom: 0; }

/* ============ HERO PRODUCT MOCKUP ============ */
/* Centered single-device hero (platform pages using .hero-product) */
.product-frame {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow:var(--shadow-lg);
}
.product-frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-deep);
}
.frame-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.frame-label {
  margin-left: 14px; font-size: 11px; color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ============ STAT TICKER ============ */
.ticker { padding: 64px 0 72px; position: relative; }
.ticker-inner {
  /* Scoped so the figures can grow without moving every stat on the site. The
     ceiling is set by the longest figures we actually run, "30,000+" on About and
     "$300K" on RFID, which overflowed their columns even at the old 68px. */
  --stat-size: clamp(48px, 5.4vw, 70px);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  position: relative; overflow: hidden;
  padding: 58px 44px; border-radius: 26px;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(36,125,255,0.14), transparent 55%),
    radial-gradient(120% 160% at 88% 100%, rgba(47, 88, 214,0.12), transparent 55%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow:0 26px 26px -26px rgba(0,0,0,0.3);
}
.ticker-item {
  padding: 8px 20px; text-align: left;
  border-right: 1px solid var(--border); position: relative;
}
.ticker-item:last-child { border-right: none; }
.ticker-value {
  font-size: 46px; font-weight: 600;
  letter-spacing: -0.035em; line-height: 1; color: var(--text);
  margin-bottom: 10px;
}
.ticker-value .gradient-text { font-weight: 600; }
.ticker-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.005em; line-height: 1.35;
}
@media (max-width: 900px) {
  .ticker-inner { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); padding: 36px 24px; gap: 20px 0; }
  .ticker-item { border-right: none; padding: 8px 16px; }
  .ticker-item:nth-child(2n) { border-right: none; }
}

/* ============ LOGOS ============ */
/* The rail is a band in its own right, not a strip of leftover page: a
   recessed surface between two hairlines, with a rule between each logo so the
   row reads as a deliberate index rather than marks floating on the ground. */
.logos {
  padding: 21px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* The shared rail carries no label, but the solutions pages each write their
   own vertical-specific one. */
.logos-label {
  font-size: 11px; color: var(--text-faint); font-weight: 600;
 letter-spacing: 0.01em; text-align: center;
  margin-bottom: 18px;
}
.logos-marquee {
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.logos-track {
  display: flex; align-items: center; gap: 64px;
  animation: marquee 68s linear infinite;
  width: max-content;
}
.logos-track:hover { animation-play-state: paused; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-slot {
  position: relative;
  height: 40px; display: flex; align-items: center; justify-content: center;
  opacity: 0.62; transition: opacity 0.3s ease;
  filter: grayscale(100%); flex-shrink: 0;
}
/* Centred in the 64px track gap, so the rule sits midway between two marks. */
.logo-slot::after {
  content: ""; position: absolute; right: -32px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 24px; background: var(--border);
}
.logos-track .logo-slot:last-child::after { display: none; }
[data-theme="dark"] .logo-slot { filter: grayscale(100%) brightness(2); }
.logo-slot:hover { opacity: 0.9; filter: grayscale(0%); }
[data-theme="dark"] .logo-slot:hover { filter: grayscale(0%) brightness(1.2); }
.logo-slot img { height: 100%; width: auto; max-width: 220px; object-fit: contain; display: block; }
/* One-line logo band. Six marks at their natural widths plus 56px gaps came to
   1290px against a 1200px container, so the last one wrapped on its own. The row
   no longer wraps and the slots may shrink, which keeps it to a single line at
   any desktop width; below 820px it wraps again rather than shrinking six logos
   into illegibility. */
.logos-oneline { display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: nowrap; }
.logos-oneline .logo-slot { flex: 0 1 auto; min-width: 0; }
.logos-oneline .logo-slot img { max-width: 100%; }
/* the divider hangs 32px off each slot, so the last one drew a rule into empty space */
.logos-oneline .logo-slot:last-child::after { display: none; }
@media (max-width: 820px) {
  .logos-oneline { flex-wrap: wrap; gap: 32px 40px; }
  .logos-oneline .logo-slot { flex: 0 0 auto; }
}
/* A mark that is nearly square renders tiny beside the wide wordmarks, since
   every logo is sized to the same slot height. Give it a taller slot rather
   than overflowing the image: .logos-marquee is a scroll container for the
   drag behaviour, so overflow-y is hidden and anything taller than the track
   gets clipped top and bottom. */
.logo-slot.logo-tall { height: 56px; }
[data-theme="dark"] .logo-slot.logo-mono { filter: invert(1) grayscale(100%); }
[data-theme="dark"] .logo-slot.logo-mono:hover { filter: invert(1) grayscale(0%); }

/* ============ SECTIONS ============ */
.section { padding: 88px 0; position: relative; }
.section-tight { padding: 62px 0; }
.section-header { max-width: 800px; margin: 0 auto 44px; text-align: center; }
.section-eyebrow { font-family: var(--font-body);
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
 margin-bottom: 18px;
}
.section-title {
  font-weight: 600;
  font-size: clamp(28px, 3.3vw, 42px); letter-spacing: -0.028em;
  line-height: 1.12; margin-bottom: 16px; color: var(--text);
}
.section-title .gradient-text { font-weight: 600; }
.section-sub { font-size: 18px; color: var(--text-muted); line-height: 1.55; }

/* ============ QUOTES ============ */
.quote-card {
  padding: 0; background: var(--bg-elevated);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  box-shadow:0 1px 2px rgba(7,9,26,0.04), 0 12px 26px rgba(7,9,26,0.06);
  transition: all 0.35s ease; position: relative;
  display: flex; flex-direction: column; overflow: hidden;
}
.quote-card:hover {
  border-color: var(--brand-blue);
  transform: translateY(-4px); box-shadow:var(--shadow-glow);
}
.quote-card::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--gradient); opacity: 0; transition: opacity 0.3s ease;
}
.quote-card:hover::after { opacity: 1; }

/* ============ PILLAR CARDS ============ */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pillar-card {
  padding: 36px; background: var(--bg-elevated);
  border: 1px solid transparent; border-radius: var(--radius-lg);
  box-shadow:0 1px 2px rgba(7,9,26,0.04), 0 12px 26px rgba(7,9,26,0.06);
  transition: all 0.25s ease; cursor: pointer; position: relative;
  display: flex; flex-direction: column; overflow: hidden;
}
.pillar-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-soft);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.pillar-card:hover { border-color: var(--brand-blue); transform: translateY(-3px); box-shadow:var(--shadow-lg); }
.pillar-card:hover::before { opacity: 1; }
.pillar-icon {
  width: 56px; height: 56px; border-radius: 10px;
  background: var(--brand-blue); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 28px; position: relative; z-index: 1;
  box-shadow:0 8px 24px rgba(7, 9, 26, 0.3);
}
.pillar-title {
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.025em; margin-bottom: 12px; color: var(--text);
  position: relative; z-index: 1;
}
.pillar-desc {
  font-size: 15px; color: var(--text-muted); line-height: 1.6;
  flex-grow: 1; margin-bottom: 28px; position: relative; z-index: 1;
}
.pillar-link {
  font-size: 13px; font-weight: 600; color: var(--brand-text);
  display: inline-flex; align-items: center; gap: 6px;
  position: relative; z-index: 1; letter-spacing: 0.02em;
}
@media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }

.pillar-card-compact { padding: 22px 18px; }
.pillar-card-compact .pillar-icon {
  width: 40px; height: 40px; border-radius: 10px; font-size: 18px; margin-bottom: 16px;
}
.pillar-card-compact .pillar-title { font-size: 15.5px; margin-bottom: 8px; }
.pillar-card-compact .pillar-desc { font-size: 12.5px; line-height: 1.5; margin-bottom: 0; }

/* ============ FEATURE WITH IMAGE ============ */
.feature-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 88px; align-items: center;
}
.feature-row.feature-solo { grid-template-columns: 1fr; max-width: 780px; }
.feature-row.reverse { grid-template-columns: 1.2fr 1fr; }
.feature-row.reverse .feature-text { order: 2; }
.feature-row.reverse .feature-visual { order: 1; }
.feature-photo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow:0 26px 26px -25px rgba(7, 9, 26, 0.3);
}
.feature-photo img { width: 100%; display: block; }
/* square variant, for photographs cropped to 1:1 rather than the source ratio */
.feature-photo.is-square img { aspect-ratio: 1 / 1; object-fit: cover; height: auto; }
/* Styled screenshot, floating panel on a gradient-lit pad */
.shot { position: relative; padding: 30px; }
.shot-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: 24px; overflow: hidden;
  background:
    radial-gradient(90% 90% at 22% 12%, rgba(36,125,255,0.28), transparent 60%),
    radial-gradient(90% 90% at 82% 92%, rgba(47, 88, 214,0.24), transparent 60%),
    var(--bg-elevated);
  border: 1px solid var(--border);
}
.shot-glow::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 72%);
}
.shot-img {
  position: relative; z-index: 1; display: block; width: 100%;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
  box-shadow:0 26px 26px -22px rgba(0,0,0,0.3);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.shot:hover .shot-img { transform: translateY(-6px) scale(1.01); box-shadow:0 26px 26px -26px rgba(7, 9, 26, 0.3); }

/* Tier banners. Sell Standard, call out Plus */
.tier-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  padding: 9px 20px; border-radius: 100px; margin-bottom: 18px;
}
.tier-badge i { font-size: 16px; }
.tier-badge-plus {
  background: var(--brand-blue); color: #fff;
  box-shadow:0 12px 26px -10px rgba(7, 9, 26, 0.3);
}
/* TCS ecosystem strip (tcs-family include) */

/* AI video grid inside the callout */

/* Standard vs Plus split callout, prominent glance band */

/* ============ POS SPOTLIGHT (FLAGSHIP) ============ */

.feature-text { max-width: 500px; }
.feature-text h2 {
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.03em;
  line-height: 1.0; margin-bottom: 22px; color: var(--text);
}
.feature-text h2 .gradient-text { font-weight: 600; }
.feature-text p {
  font-size: 17px; color: var(--text-muted); line-height: 1.6; margin-bottom: 28px;
}
.feature-bullets { list-style: none; margin-bottom: 32px; }
.feature-bullets li { position: relative; display: block; padding: 12px 0 12px 36px; font-size: 14px; color: var(--text); line-height: 1.5; font-weight: 400; border-bottom: 1px solid var(--border); }
.feature-bullets li:last-child { border-bottom: none; }
.feature-bullets li::before {
  content: ''; position: absolute; left: 0; top: 12px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--brand-blue); 
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"), var(--gradient);
  background-repeat: no-repeat; background-position: center;
}
@media (max-width: 900px) {
  .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 48px; }
  .feature-row.reverse .feature-text { order: 1; }
  .feature-row.reverse .feature-visual { order: 2; }
}

/* ============ MID-PAGE CTA ============ */
.midcta {
  position: relative; overflow: hidden;
  background: var(--gradient);
  padding: 52px 0;
}
.midcta-glow {
  position: absolute; top: -60%; right: -10%; width: 600px; height: 600px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 65%);
}
.midcta-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.midcta-title {
  font-size: clamp(30px, 4vw, 48px); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.05; margin-bottom: 10px; color: #ffffff;
}
.midcta-sub { font-size: 17px; color: rgba(255, 255, 255, 0.85); max-width: 480px; }
.midcta-btn {
  background: #ffffff; color: var(--brand-text); border: none;
  box-shadow:0 12px 26px -8px rgba(8, 8, 30, 0.3); flex-shrink: 0;
}
.midcta-btn:hover { transform: translateY(-2px); box-shadow:0 18px 26px -10px rgba(8, 8, 30, 0.3); background: #ffffff; }
.midcta-btn i { color: var(--brand-text); }

/* ============ METRICS BANNER ============ */
.metrics-text h2 {
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em;
  line-height: 0.98; margin-bottom: 22px;
}
.metrics-text p { color: var(--text-muted); font-size: 17px; line-height: 1.55; }
.metric-card {
  padding: 28px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: all 0.2s ease; position: relative; overflow: hidden;
}
.metric-card:hover { border-color: var(--brand-blue); transform: translateY(-2px); box-shadow:0 14px 26px -18px rgba(7, 9, 26, 0.3); }

/* ============ ROLLOUT TIMELINE ============ */
.rollout-steps {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
}
.rollout-steps::before {
  content: ''; position: absolute; top: 24px; left: 10%; right: 10%; height: 2px;
  z-index: 0;
}
.rollout-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
.rollout-num {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--brand-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  box-shadow:0 8px 20px -6px rgba(7, 9, 26, 0.3), 0 0 0 6px var(--bg);
}
.rollout-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-bottom: 8px; }
.rollout-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; }
/* Not flex: as a flex row the icon parked at the left edge of the 760px box while the
   wrapped text centred inside its own item, so the check read as detached furniture.
   Inline, it sits with the first word where it belongs. */
.rollout-foot {
  max-width: 760px; margin: 44px auto 0; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--text-muted); line-height: 1.5;
}
.rollout-foot i {
  color: var(--brand-blue); font-size: 18px;
  display: inline-block; vertical-align: -3px; margin-right: 5px;
}
@media (max-width: 780px) {
  .rollout-steps { grid-template-columns: 1fr; gap: 12px; text-align: left; }
  .rollout-steps::before { display: none; }
  .rollout-step {
    text-align: left; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 2px;
    padding: 12px 0;
  }
  .rollout-num { margin: 0; grid-row: span 2; }
  .rollout-title { align-self: center; margin-bottom: 0; }
}

/* ============ STANDARD VS PLUS TABLE ============ */

/* Responsive: competitive edge grid */
@media (max-width: 900px) {
  .container > div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .container > div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}
/* Responsive: blog grid */
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr !important; }
}
.blog-grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 20px;
}
.blog-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column;
}
.blog-card:hover {
  border-color: var(--brand-blue); transform: translateY(-3px);
  box-shadow:var(--shadow-lg);
}
.blog-card-img {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.blog-card-img::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient); opacity: 0.07;
  transition: opacity 0.3s ease; z-index: 1; pointer-events: none;
}
.blog-card:hover .blog-card-img::before { opacity: 0.12; }
.blog-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-img i {
  font-size: 48px; position: relative; z-index: 1;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blog-card.featured .blog-card-img { height: 300px; }
.blog-card.featured .blog-card-img i { font-size: 64px; }
.blog-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card.featured .blog-card-body { padding: 28px 32px 32px; }
.blog-card-meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.blog-tag {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.01em; padding: 4px 10px; border-radius: 100px;
}
.blog-tag.featured { color: #fff; background: var(--gradient); }
.blog-tag:not(.featured) { color: var(--brand-text); background: var(--brand-soft); }
.blog-card-date {
  font-size: 11px; color: var(--text-faint);
}
.blog-card-title {
  font-size: 18px; font-weight: 600; letter-spacing: -0.025em;
  margin-bottom: 10px; color: var(--text); line-height: 1.25;
}
.blog-card.featured .blog-card-title { font-size: 22px; }
.blog-card-excerpt {
  font-size: 13px; color: var(--text-muted); line-height: 1.55;
  margin-bottom: 20px; flex: 1;
}
.blog-card.featured .blog-card-excerpt { font-size: 14px; }

/* ============ SECURITY ============ */
.security { padding: 72px 0; }
/* Continuous-innovation commitment cards */
.security-tinted-split { background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 72px 0; }
.security-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
/* eight badges on two rows of four */
.security-badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.security-badges-grid .security-badge { width: 100%; }
@media (max-width: 900px) {
  .security-split { grid-template-columns: 1fr; gap: 32px; }
  .security-split-text { text-align: center; }
  .security-badges-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ============ PROBLEM SPLIT (fragmented systems) ============ */

/* ============ OMNI OPERATIONS (condensed split) ============ */
.omni-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.omni-photo .feature-photo { height: 100%; display: flex; align-items: center; }
.omni-photo .feature-photo img { width: 100%; aspect-ratio: 1 / 1.02; height: auto; object-fit: cover; }
.omni-chip-group { margin-bottom: 16px; }
.omni-chip-group:last-child { margin-bottom: 0; }
.omni-chip-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--brand-text); margin-bottom: 8px;
}
.omni-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.omni-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 100px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.omni-chip i { font-size: 15px; color: var(--brand-blue); }
.omni-chip:hover {
  border-color: var(--brand-blue); transform: translateY(-1px);
  box-shadow:0 6px 16px -8px rgba(7, 9, 26, 0.3);
}
@media (max-width: 860px) {
  .omni-split { grid-template-columns: 1fr; gap: 32px; }
  .omni-photo { order: 2; }
}
/* ============ HOW THE PLATFORM FITS TOGETHER (layered explainer) ============ */
.flow {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px;
  margin-bottom: 56px;
}

/* Two-block relationship strip */

/* ===== Continuous Innovation: light, but energetic ===== */
.innov-section { position: relative; overflow: hidden; background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.innov-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, black 15%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, black 15%, transparent 80%);
}
.innov-glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(90px); }
.innov-glow-1 { top: -140px; left: -60px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(36,125,255,0.20), transparent 68%); animation: innov-drift 11s ease-in-out infinite; }
.innov-glow-2 { bottom: -160px; right: -60px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(47, 88, 214,0.18), transparent 68%); animation: innov-drift 13s ease-in-out infinite reverse; }
@keyframes innov-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, 28px) scale(1.12); }
}

.innov-card {
  position: relative; overflow: hidden; padding: 28px 20px 26px; border-radius: 11px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(150deg, rgba(36,125,255,0.35), rgba(80, 120, 245,0.28) 55%, rgba(255,255,255,0) 100%) border-box;
  box-shadow:0 10px 26px -20px rgba(7, 9, 26, 0.3);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease;
}
.innov-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.innov-card:hover { transform: translateY(-6px); box-shadow:0 26px 26px -24px rgba(7, 9, 26, 0.28); }
.innov-card:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .innov-glow { animation: none; }
}

/* Continuous Innovation. Animated flow track */
.innov-track { position: relative; margin-top: 60px; }
.innov-nodes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.innov-nodes-4 { grid-template-columns: repeat(4, 1fr); }
.innov-node { text-align: center; display: flex; flex-direction: column; align-items: center; }
.innov-node-dot {
  width: 68px; height: 68px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff;
  background: linear-gradient(150deg, #0e1330, #070912) padding-box,
              linear-gradient(150deg, rgba(36,125,255,0.9), rgba(47, 88, 214,0.9)) border-box;
  border: 1.5px solid transparent;
  box-shadow:0 18px 26px -18px rgba(7, 9, 26, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .25s cubic-bezier(0.2,0.7,0.3,1), box-shadow .25s ease;
}
.innov-node:hover .innov-node-dot { transform: translateY(-6px) scale(1.04); box-shadow:0 26px 26px -16px rgba(7, 9, 26, 0.28); }
.innov-node-title { margin-top: 18px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.innov-node-sub { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); max-width: 180px; }
@media (max-width: 820px) {
  .innov-nodes { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}
@media (max-width: 460px) { .innov-nodes { grid-template-columns: 1fr; } }

/* ===== RFID emitter, one reader broadcasting to every stage ===== */
.rfx-track { margin-top: 48px; }
.rfx-emitter { display: flex; flex-direction: column; align-items: center; }
.rfx-halo { position: relative; width: 78px; height: 78px; display: grid; place-items: center; }
.rfx-wave {
  position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%; border: 1.5px solid rgba(36,125,255,0.5);
  opacity: 0; animation: rfx-ring 3.6s cubic-bezier(0.2,0.6,0.4,1) infinite;
}
.rfx-wave:nth-child(2) { animation-delay: 1.2s; border-color: rgba(92, 136, 255,0.45); }
.rfx-wave:nth-child(3) { animation-delay: 2.4s; border-color: rgba(140, 165, 255,0.4); }
@keyframes rfx-ring {
  0%   { transform: scale(0.7); opacity: 0.75; }
  70%  { opacity: 0.10; }
  100% { transform: scale(2.9); opacity: 0; }
}
.rfx-reader {
  position: relative; z-index: 2; width: 78px; height: 78px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(150deg, #101740, #070912) padding-box,
              linear-gradient(150deg, rgba(36,125,255,1), rgba(47, 88, 214,1)) border-box;
  border: 1.5px solid transparent;
  box-shadow:0 18px 26px -16px rgba(7, 9, 26, 0.30), 0 0 26px -6px rgba(7, 9, 26, 0.3), inset 0 1px 0 rgba(255,255,255,0.10);
}
.rfx-reader-ico { width: 38px; height: 38px; display: block; }
.rfx-beams { display: block; width: 100%; height: 116px; margin: 26px 0 -2px; overflow: visible; }
.rfx-beam-track path { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.rfx-beam-live path {
  fill: none; stroke: url(#rfxBeam); stroke-width: 2.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 22 100;
  animation: rfx-shoot 2.8s cubic-bezier(0.45,0,0.55,1) infinite;
}
/* dash is a % of each path, so short beams get a longer share to read evenly */
.rfx-beam-live path:nth-child(1) { animation-delay: 0s;    stroke-dasharray: 22 100; }
.rfx-beam-live path:nth-child(2) { animation-delay: 0.16s; stroke-dasharray: 34 100; }
.rfx-beam-live path:nth-child(3) { animation-delay: 0.32s; stroke-dasharray: 56 100; }
.rfx-beam-live path:nth-child(4) { animation-delay: 0.48s; stroke-dasharray: 34 100; }
.rfx-beam-live path:nth-child(5) { animation-delay: 0.64s; stroke-dasharray: 22 100; }
@keyframes rfx-shoot {
  0%   { stroke-dashoffset: 156; opacity: 0; }
  8%   { opacity: 1; }
  66%  { opacity: 1; }
  74%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.rfx-track .innov-node-dot { animation: rfx-hit 2.8s ease-out infinite; }
.rfx-track .innov-node:nth-child(1) .innov-node-dot { animation-delay: 0s; }
.rfx-track .innov-node:nth-child(2) .innov-node-dot { animation-delay: 0.16s; }
.rfx-track .innov-node:nth-child(3) .innov-node-dot { animation-delay: 0.32s; }
.rfx-track .innov-node:nth-child(4) .innov-node-dot { animation-delay: 0.48s; }
.rfx-track .innov-node:nth-child(5) .innov-node-dot { animation-delay: 0.64s; }
@keyframes rfx-hit {
  0%, 62% { box-shadow:0 18px 26px -18px rgba(7, 9, 26, 0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
  72%     { box-shadow:0 0 0 6px rgba(7, 9, 26, 0.08), 0 18px 26px -18px rgba(7, 9, 26, 0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
  90%, 100% { box-shadow:0 18px 26px -18px rgba(7, 9, 26, 0.3), inset 0 1px 0 rgba(255,255,255,0.08); }
}
@media (max-width: 820px) {
  .rfx-beams { display: none; }
  .rfx-emitter { margin-bottom: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .rfx-wave { animation: none; opacity: 0; }
  .rfx-beam-live path { animation: none; stroke-dasharray: none; opacity: 0.5; }
  .rfx-track .innov-node-dot { animation: none; }
}

/* ===== Platform service cards (rich, with visual + bold Plus) ===== */
.svc-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: 11px; background: var(--bg-elevated);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.svc-card:hover { transform: translateY(-4px); border-color: var(--brand-blue); box-shadow:0 24px 26px -24px rgba(7, 9, 26, 0.3); }

/* Segmented-control tab switcher */

/* Alternating feature rows: big, legible screenshots */

/* ===== Standard & Plus, prominent comparison table ===== */
.sp-wrap {
  max-width: 720px; margin: 0 auto; border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-elevated); box-shadow:0 26px 26px -26px rgba(7, 9, 26, 0.3); overflow: hidden;
}

@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
}

/* ============ AI ACROSS PLATFORM (condensed split) ============ */

.vs-panel {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 24px; padding: 0 36px 24px; overflow: hidden; margin-bottom: 48px;
  box-shadow:0 26px 26px -26px rgba(7, 9, 26, 0.28);
}
.vs-panel::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: var(--border); transform: translateX(-0.5px); z-index: 0;
}
@media (max-width: 720px) {
  .vs-panel { padding: 0 20px; }
  .vs-panel::before { display: none; }
}
.security-badge {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 150px; padding: 28px 16px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: all 0.3s ease;
}
.security-badge:hover {
  border-color: var(--brand-blue); transform: translateY(-4px);
  box-shadow:var(--shadow-glow);
}
.security-badge-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 10px;
}
.security-badge-icon i {
  background: var(--brand-blue);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
}
.security-badge-name {
  font-size: 14px; color: var(--text); font-weight: 600; text-align: center;
}
.security-badge-logo { max-width: 100%; height: 40px; width: auto; object-fit: contain; }

/* ============ FAQ ============ */
.faq-grid { max-width: 800px; margin: 0 auto; }
.faq-question {

  font-size: 17px; font-weight: 600; color: var(--text);
  line-height: 1.4; 
}
.faq-question:hover { color: var(--brand-blue); }
.faq-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; transition: transform 0.3s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {

  padding: 0 0 0 0;
}
.faq-item.open .faq-answer {
  padding: 0 0 24px 0;
}

/* ============ FINAL CTA ============ */
.final-cta {
  padding: 80px 0; text-align: center;
  position: relative; overflow: hidden;
  background: var(--gradient);
}
.final-cta::before {
  content: ''; position: absolute; top: -50%; right: -8%;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%);
  pointer-events: none;
}
.final-cta-inner { position: relative; z-index: 1; }
.final-cta h2 {
  font-weight: 600; color: #ffffff;
  font-size: clamp(36px, 5.5vw, 64px); letter-spacing: -0.035em;
  line-height: 0.95; margin-bottom: 28px;
}
.final-cta h2 .gradient-text {
  font-weight: 600; font-style: italic;
  background: none; -webkit-text-fill-color: #ffffff; color: #ffffff;
}
.final-cta p {
  font-size: 19px; color: rgba(255, 255, 255, 0.85);
  max-width: 1160px; margin: 0 auto 40px; line-height: 1.5;
}
/* Invert buttons so they read on the gradient, overrides inline ghost styles across all pages */
.final-cta .btn-primary {
  background: #ffffff; color: var(--brand-text); box-shadow:0 12px 26px -8px rgba(8, 8, 30, 0.3);
}
.final-cta .btn-primary:hover { background: #ffffff; transform: translateY(-2px); box-shadow:0 18px 26px -10px rgba(8, 8, 30, 0.3); }
.final-cta .btn-primary i { color: var(--brand-text); }
.final-cta .btn-ghost {
  background: transparent !important; color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
}
.final-cta .btn-ghost:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: #ffffff !important; }
.final-cta .btn-ghost i { color: #ffffff !important; }

/* ============ FOOTER ============ */
.footer {
  padding: 60px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-grid {
  /* Brand column plus five equal link columns, one topic each. */
  display: grid; grid-template-columns: 1.45fr repeat(5, minmax(0, 1fr)); gap: 30px;
  padding-bottom: 56px; align-items: start;
}
.footer-brand .nav-logo { height: 32px; margin-bottom: 20px; }
.footer-brand p {
  font-size: 14px; color: var(--text-muted); max-width: 320px;
  line-height: 1.6;
}
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 16px; transition: all 0.2s ease;
}
.footer-social a:hover { color: #fff; background: var(--gradient); border-color: transparent; }
.footer-col h4 {
  font-size: 12px; font-weight: 600; margin-bottom: 18px;
  color: var(--text); text-transform: none; letter-spacing: 0.005em;
}
.footer-col a {
  display: block; font-size: 14px; color: var(--text-muted);
  padding: 5px 0; transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--brand-blue); }
.footer-bottom {
  padding-top: 32px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--text-muted); flex-wrap: wrap; gap: 16px;
}
.footer-locale {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 13px;
}
.footer-locale:hover { border-color: var(--border-strong); }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
/* Kept with the rest of the nav breakpoint above, not the footer's. */
@media (max-width: 1049px) { .nav-links { display: none; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0; cursor: pointer; gap: 20px;
  background: none; border: none; width: 100%; text-align: left;
  font-family: var(--font-body);
}
.faq-question h3 {
  font-size: 18px; font-weight: 600; color: var(--text);
  letter-spacing: -0.01em; line-height: 1.3;
}
.faq-question i {
  font-size: 20px; color: var(--text-muted); flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item.open .faq-question i { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer { max-height: 300px; }
.faq-answer p {
  padding: 0 0 28px; font-size: 15px; color: var(--text-muted);
  line-height: 1.65; max-width: 720px;
}

/* ============ ANIMATIONS ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.8s ease forwards; }
.counter { display: inline-block; }

/* Blog bento responsive */

/* FAQ accordion */
details summary { cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary i { transform: rotate(180deg); }
details[open] summary { color: var(--brand-text); }

/* ---- PHONE (max 600px) ---- */
@media (max-width: 600px) {
  /* Container tighter */
  .container { padding: 0 16px; }

  /* Sections: much less padding */
  .section { padding: 64px 0; }
  .section-tight { padding: 40px 0; }
  .section-header { margin-bottom: 40px; }
  .section-title { font-size: clamp(28px, 7vw, 40px); }
  .section-sub { font-size: 16px; }

  /* Hero */
  .hero h1 { font-size: clamp(32px, 9vw, 44px); margin-bottom: 20px; }
  .hero-sub { font-size: 16px; margin-bottom: 28px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-inner { padding-block: 24px 48px; }
  .eyebrow { font-size: 11px; margin-bottom: 24px; }

  /* Product mockup: stack and simplify */
  .product-frame { border-radius: 10px; }
  .product-frame-bar { padding: 10px 14px; }
  .frame-label { display: none; }

  /* Ticker: 1-col */
  .ticker { padding: 48px 0 56px; }
  .ticker-inner {
    grid-template-columns: 1fr !important;
  }
  .ticker-item { border-right: none !important; border-bottom: 1px solid var(--border); padding: 20px 16px; }
  .ticker-item:last-child { border-bottom: none; }

  /* Feature rows */
  .feature-row, .feature-row.reverse { gap: 32px !important; }
  .feature-text h2 { font-size: clamp(26px, 7vw, 36px); }
  .feature-text p { font-size: 15px; }
  /* The padding shorthand here used to be "10px 0", which wiped the 36px of left
     padding that keeps the text clear of the absolutely positioned check icon. Every
     product page's bullets were rendering with the first few characters underneath it. */
  .feature-bullets li { font-size: 13px; padding: 10px 0 10px 34px; }

  /* Mockup panels */
  .mockup-panel { padding: 16px !important; }

  /* Pillar cards */
  .pillar-card { padding: 24px; }
  .pillar-icon { width: 44px; height: 44px; font-size: 22px; margin-bottom: 20px; }
  .pillar-title { font-size: 18px; }
  .pillar-desc { font-size: 14px; }

  /* Inline 4-col grids: go full 1-col */
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }

  /* Metric cards */
  .metric-card { padding: 20px; }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr !important; }

  /* FAQ */
  .faq-question { font-size: 15px; padding: 20px 0; }
  .faq-answer p { font-size: 14px; }

  /* Final CTA */
  .final-cta { padding: 88px 0; }
  .final-cta h2 { font-size: clamp(32px, 8vw, 52px); }
  .final-cta p { font-size: 16px; }

  /* Footer */
  .footer { padding: 56px 0 24px; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 12px; }

  /* Buttons */
  .btn-lg { padding: 13px 22px; font-size: 14px; }

  /* Breadcrumb */
  .breadcrumb, [class*="breadcrumb"] { font-size: 11px !important; }
}

/* ---- Small phone (max 380px) ---- */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .section-title { font-size: 26px; }
  .feature-text h2 { font-size: 24px; }
  .final-cta h2 { font-size: 28px; }
  .pillar-card { padding: 20px; }
  .btn { padding: 10px 16px; font-size: 13px; }
}

/* ============ NAV DROPDOWNS ============ */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 0; margin-top: 8px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px; min-width: 220px; box-shadow:0 24px 26px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all 0.15s ease; z-index: 200;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  display: block; padding: 8px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 400; color: var(--text-muted);
  white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--bg-deep); color: var(--text); }

/* ---- Platform mega menu (TCS overview + grouped categories) ---- */
.nav-mega { min-width: 940px; padding: 14px; left: 50%; transform: translate(-50%, -4px); }
.nav-item:hover .nav-mega, .nav-item:focus-within .nav-mega { transform: translate(-50%, 0); }
/* First nav item: anchor the mega menu to its left edge so it can't overflow */
.nav-links .nav-item:first-child .nav-mega { left: 0; transform: translate(0, -4px); }
.nav-links .nav-item:first-child:hover .nav-mega, .nav-links .nav-item:first-child:focus-within .nav-mega { transform: translate(0, 0); }
@media (max-width: 1240px) { .nav-mega { min-width: 760px; } }

.mega-overview {
  display: flex !important; align-items: center; gap: 13px;
  padding: 14px 16px !important; margin-bottom: 12px;
  border-radius: 10px; background: var(--bg-deep); border: 1px solid var(--border);
}
.mega-overview:hover { border-color: rgba(36,125,255,0.45); }
.mega-ov-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; background: var(--brand-blue);
}
.mega-ov-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mega-ov-text strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.mega-ov-text em { font-size: 12px; font-style: normal; color: var(--text-muted); }
.mega-ov-arrow { font-size: 15px; color: var(--text-faint); transition: transform .2s ease; }
.mega-overview:hover .mega-ov-arrow { transform: translateX(3px); color: var(--brand-text); }
/* The first group has the longest name; the last holds one link, so it gives up width. */
.mega-cols { display: grid; grid-template-columns: 1.3fr 1.1fr 1.1fr 0.8fr; gap: 10px; }
/* Solutions by industry: each one distinct, with its own mark and focus */
/* Five industries on one line, each tile as wide as its name, with even gaps between them. */
.mega-ind { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
/* Five industries on one line: names only, the blurbs would truncate at this width. */
.mega-ind .mega-ind-item { align-items: center; padding: 8px 10px; flex: 0 1 auto; }
.mega-ind .mega-ind-text em { display: none; }
.mega-ind .mega-ind-text strong { white-space: nowrap; }
@media (max-width: 1240px) {
  .mega-ind { flex-wrap: nowrap; }
  .mega-ind .mega-ind-item { flex: 1 1 0; min-width: 0; }
  .mega-ind .mega-ind-text strong { white-space: normal; }
}
.mega-ind-item {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 0; padding: 9px 10px; border-radius: 8px;
  border: 1px solid transparent; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.mega-ind-item:hover { background: var(--bg-deep); border-color: var(--border); }
.mega-ind-item.is-current { background: var(--brand-soft); border-color: rgba(36,125,255,0.28); }
.mega-ind-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--brand-blue); background: var(--brand-soft);
}
.mega-ind-item:nth-child(2n) .mega-ind-ico { color: var(--brand-purple); background: rgba(80, 120, 245,0.10); }
.mega-ind-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-ind-text strong { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.mega-ind-text em { font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.nav-mob-ind { display: flex; align-items: center; gap: 9px; }
.nav-mob-ind i { font-size: 16px; color: var(--brand-blue); }
.nav-mob-ind:nth-of-type(2n) i { color: var(--brand-purple); }
.mega-col { display: flex; flex-direction: column; }
.mega-col + .mega-col { border-left: 1px solid var(--border); padding-left: 10px; }
.mega-head {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: var(--brand-text);
}
.mega-head i { font-size: 14px; }
.mega-col:nth-child(2) .mega-head { color: var(--brand-purple); }
.mega-col:nth-child(3) .mega-head { color: var(--text-faint); }
.mega-col:nth-child(4) .mega-head { color: var(--brand-magenta); }
.nav-mob-head {
  padding: 14px 10px 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: var(--brand-text);
}

/* ============ MOBILE NAV ============ */
.nav-hamburger {
  display: none; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 20px;
  align-items: center; justify-content: center;
}
.nav-mobile-menu { display: none; }
/* 1049px, not 900px. The desktop bar needs 1047px for the logo, six nav items, the two
   icon buttons and the CTA, so every width from 901 up to 1046 was pushing the CTA past
   the viewport edge. Tablets get the mobile menu, which is the better trade: it already
   carries all 29 links, grouped. */
@media (max-width: 1049px) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex; }
  .nav-mobile-menu {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: 16px 32px 24px; z-index: 99;
    box-shadow:0 24px 26px rgba(0,0,0,0.1);
  }
  /* The full menu is ~1740px tall, well past any phone screen. It scrolls inside itself
     rather than running off the end of the page. dvh so a browser's collapsing toolbar
     does not leave the last item unreachable. */
  .nav-mobile-menu.open {
    display: block;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-mobile-menu a, .nav-mobile-menu span {
    display: block; padding: 12px 0; font-size: 15px; font-weight: 600;
    color: var(--text-muted); border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .nav-mobile-menu a:last-child, .nav-mobile-menu span:last-child { border-bottom: none; }
  .nav-mobile-menu .btn { margin-top: 16px; width: 100%; justify-content: center; }

  /* The top bar was trying to hold the logo, a hamburger, a theme toggle, a
     language button and a 115px pill inside 375px less 64px of padding. That is
     what pushed every page on the site to 410px wide. Tighter padding, no icon
     buttons in the bar, and a compact CTA. The theme and language controls move
     into the menu so nothing is lost. */
  .nav-inner { padding: 0 18px; gap: 10px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-icon { display: none; }
  .nav-cta .btn { padding: 9px 15px; font-size: 13px; }
  .nav-logo { height: 38px; }
  .nav-logo img, .nav-logo svg { max-height: 38px; width: auto; }
  .nav-hamburger { flex: 0 0 auto; }
  .nav-mob-tools { display: flex; gap: 10px; margin-top: 18px; }
  .nav-mob-tools button {
    flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; border-radius: 10px; border: 1px solid var(--border);
    background: var(--bg-elevated); color: var(--text-muted);
    font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .nav-mob-tools button i { font-size: 17px; }
}
.nav-mob-tools { display: none; }
@media (max-width: 420px) {
  .nav-inner { padding: 0 14px; }
  .nav-cta .btn { padding: 9px 13px; font-size: 12.5px; }
}

/* ---- Additional responsive fixes ---- */
@media (max-width: 600px) {
  /* Form layouts */
  [style*="grid-template-columns: 1.3fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Trust brand strips */
  [style*="gap: 48px"][style*="flex-wrap"] { gap: 20px !important; }
  [style*="gap: 40px"][style*="flex-wrap"] { gap: 16px !important; }
  [style*="gap: 36px"][style*="flex-wrap"] { gap: 14px !important; }

  /* Sticky sidebar - unstick on mobile */
  [style*="position: sticky"] { position: static !important; }

  /* Contact form 2-col fields */
  .container [style*="grid-template-columns: 1fr 1fr"][style*="gap: 16px"] { grid-template-columns: 1fr !important; }

  /* Hero CTA buttons full width */
  .hero-cta .btn { width: 100%; text-align: center; justify-content: center; }

  /* Timeline on mobile */
  [style*="position: absolute"][style*="left: 24px"][style*="width: 2px"] { display: none; }

  /* Ticker values smaller on mobile */

  /* Section padding consistency */
  [style*="padding: 96px 0"] { padding: 56px 0 !important; }
  [style*="padding: 112px 0"] { padding: 56px 0 !important; }
  [style*="padding: 80px 0"] { padding: 48px 0 !important; }
  [style*="padding: 72px 0"] { padding: 48px 0 !important; }
  [style*="padding: 64px 0"] { padding: 40px 0 !important; }

  /* Font clamp overrides for very small screens */
  [style*="clamp(24px"] { font-size: 22px !important; }
}

@media (max-width: 380px) {
  .hero-sub { font-size: 14px !important; }
  .pillar-desc { font-size: 13px !important; }
  .ticker-label { font-size: 11px !important; }
}

/* ============ BLOG POST TEMPLATE ============ */
.blog-post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.blog-post-main { min-width: 0; }
.blog-meta-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint); margin-top: 16px;
}
.blog-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.blog-article-body h2 { font-size: clamp(22px, 3vw, 28px); margin-top: 40px; margin-bottom: 14px; }
/* Body copy carried its spacing in an inline style on every paragraph, so a
   post written with plain <p> ran together with no gaps. Set here instead.
   Posts that still carry the inline style are unaffected: inline wins. */
.blog-article-body p {
  font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0 0 18px;
}
.blog-article-body h3 {
  font-size: clamp(17px, 2vw, 20px); font-weight: 600; letter-spacing: -0.015em;
  margin: 30px 0 10px; color: var(--text);
}
.blog-article-body p strong { color: var(--text); font-weight: 700; }
.blog-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 96px; }
.blog-sidebar-card {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px;
}
.blog-sidebar-card h4 {
  font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0.005em;
  color: var(--brand-text); margin-bottom: 14px;
}
.toc-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.toc-list a {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.4; display: block;
  border-left: 2px solid var(--border); padding-left: 12px; transition: all 0.15s ease;
}
.toc-list a:hover { color: var(--brand-text); border-left-color: var(--brand-blue); }
.related-post-link {
  display: block; padding: 12px 0; border-bottom: 1px solid var(--border); text-decoration: none;
}
.related-post-link:last-child { border-bottom: none; padding-bottom: 0; }
.related-post-link .rp-cat { font-size: 11px; font-weight: 600; color: var(--brand-text); letter-spacing: 0.01em; }
.related-post-link .rp-title { font-size: 14px; font-weight: 600; color: var(--text); margin-top: 4px; line-height: 1.35; }
.blog-product-card {
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand-blue) 20%, transparent);
  border-radius: var(--radius); padding: 20px;
}
.blog-product-card .bp-label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--brand-text); margin-bottom: 8px; }
.blog-product-card .bp-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.blog-prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border);
}
.blog-prevnext a {
  display: block; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius);
  transition: all 0.2s ease;
}
.blog-prevnext a:hover { border-color: var(--brand-blue); }
.blog-prevnext .pn-label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-faint); margin-bottom: 6px; }
.blog-prevnext .pn-title { font-size: 14px; font-weight: 600; color: var(--text); }
.blog-prevnext .next { text-align: right; }

@media (max-width: 900px) {
  .blog-post-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-prevnext { grid-template-columns: 1fr; }
  .blog-prevnext .next { text-align: left; }
}

/* ============ BLOG FILTER BAR ============ */
.blog-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }
/* Blog index: no hero, a compact title row sits directly above the grid */
.blog-head {
  padding: 20px 0 26px; border-bottom: 1px solid var(--border);
}
.blog-head-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
 color: var(--brand-text); margin-bottom: 12px;
}
.blog-h1 {
  margin: 0; font-size: clamp(30px, 3.4vw, 40px); font-weight: 600;
  letter-spacing: -0.034em; line-height: 1.12; color: var(--text);
}
.blog-head-sub { margin: 12px 0 0; max-width: 780px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }
.blog-head-sub a { color: var(--brand-text); font-weight: 600; }
.blog-head .blog-filter-bar { justify-content: flex-start; margin: 22px 0 0; }
.filter-pill {
  padding: 8px 16px; border-radius: 100px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease; font-family: var(--font-body);
}
.filter-pill:hover { border-color: var(--brand-blue); color: var(--text); }
.filter-pill.active { background: var(--gradient); color: #fff; border-color: transparent; }

/* ============ BLOG VIDEO EMBED ============ */
.blog-video-wrap {
  position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
  border-radius: var(--radius); overflow: hidden; background: var(--bg-deep);
  border: 1px solid var(--border);
}
.blog-video-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* ============ WORLD MAP, Global Operations (Mobile POS) ============ */
#global-operations .feature-visual { align-self: stretch; display: flex; }
.worldmap-wrap {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  padding: 24px 0;
  border-radius: var(--radius);
  background: radial-gradient(120% 130% at 50% 0%, var(--brand-soft), transparent 62%), var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow:0 20px 26px rgba(7,9,26,0.08);
  overflow: hidden;
}
.wm-svg { width: 108%; max-width: none; margin-left: -4%; height: auto; display: block; }
.wm-c { fill: #dde3ee; stroke: var(--bg-elevated); stroke-width: 0.6; transition: fill .25s ease; }
.wm-live {
  fill: url(#wmGrad);
  stroke: rgba(255,255,255,0.6); stroke-width: 0.6;
  filter: drop-shadow(0 1px 2px rgba(7, 9, 26, 0.3));
}
.wm-dot { stroke: #fff; stroke-width: 1.2; filter: drop-shadow(0 1px 3px rgba(7, 9, 26, 0.3)); }
[data-theme="dark"] .wm-c { fill: #232a44; stroke: #0d1226; }
[data-theme="dark"] .wm-live { stroke: rgba(255,255,255,0.25); }
[data-theme="dark"] .wm-dot { stroke: #0d1226; }

/* ============ CAPABILITY TABS, Complete POS Capabilities ============ */
.captabs-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.captab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.captab i { font-size: 15px; }
.captab:hover { color: var(--text); border-color: var(--brand-blue); }
.captab.active {
  color: #fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  box-shadow:0 6px 18px rgba(7, 9, 26, 0.3);
}
.captab-panel { display: none; }
.captab-panel.active { display: block; animation: capFade .25s ease; }
@keyframes capFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .captab-panel.active { animation: none; } }
@media (max-width: 700px) {
  .captabs-nav { gap: 6px; }
  .captab { padding: 8px 13px; font-size: 12.5px; }
}

/* ============ PARTNER ADVANTAGE (editorial numbered panel) ============ */
/* Complete POS Capabilities, pulled-out highlight block */
.caps-highlight {
  position: relative; overflow: hidden;
  padding: 56px; border-radius: 28px;
  background:
    radial-gradient(90% 130% at 8% 0%, rgba(36,125,255,0.12), transparent 55%),
    radial-gradient(90% 130% at 100% 100%, rgba(47, 88, 214,0.10), transparent 55%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow:0 26px 26px -26px rgba(0,0,0,0.3);
}
.caps-top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 40px; }
.caps-header { text-align: left; margin-bottom: 0; }
.caps-header .section-sub { margin-left: 0; max-width: none; }
.caps-media { position: relative; display: flex; align-items: center; justify-content: center; }
.caps-media-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 88%; height: 72%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(36,125,255,0.5), rgba(47, 88, 214,0.35) 55%, transparent 75%);
  filter: blur(60px); border-radius: 50%;
}
.caps-media img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 900px) {
  .caps-highlight { padding: 28px 20px; border-radius: 12px; }
  .caps-top { grid-template-columns: 1fr; gap: 28px; }
  .caps-media { order: -1; max-width: 560px; margin: 0 auto; }
}

/* Platform Highlights, flashy horizontal band */
.pfh-band {
  position: relative; overflow: hidden;
  padding: 60px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pfh-band-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 900px; height: 320px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 50%, rgba(36,125,255,0.18), rgba(47, 88, 214,0.10) 45%, transparent 72%);
  filter: blur(30px);
}
.pfh-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.pfh-col { position: relative; text-align: center; padding: 6px 30px; }
.pfh-col::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(80, 120, 245,0.5), transparent);
}
.pfh-col:first-child::before { display: none; }
.pfh-big {
  font-size: clamp(38px, 4.6vw, 60px); font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 14px;
  background: linear-gradient(180deg, #ffffff 30%, #b9c4e8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(36,125,255,0.25);
}
[data-theme="light"] .pfh-big {
  background: linear-gradient(180deg, #14224a 25%, #4a63a3);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: none;
}
.pfh-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 260px; margin: 0 auto; }
.pfh-desc a { color: var(--brand-text); font-weight: 600; }
@media (max-width: 900px) {
  .pfh-row { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .pfh-col:nth-child(-n+2)::before { display: var(--_x, block); }
  .pfh-col:nth-child(odd)::before { display: none; }
}
@media (max-width: 520px) {
  .pfh-row { grid-template-columns: 1fr; gap: 32px; }
  .pfh-col::before { display: none; }
}

/* Partner Advantage, bold dark showcase moment */
.padv-showcase {
  position: relative; overflow: hidden;
  padding: 80px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.padv-glow { position: absolute; z-index: 0; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.padv-glow-1 { top: -140px; left: -90px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(36,125,255,0.22), transparent 68%); }
.padv-glow-2 { bottom: -160px; right: -90px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(47, 88, 214,0.20), transparent 68%); }
.padv-showcase .container { position: relative; z-index: 1; }
.padv-header { max-width: 800px; margin: 0 auto 56px; text-align: center; }
.padv-h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 12px 0 18px; color: var(--text); }
.padv-accent { color: var(--brand-text); }
.padv-sub { font-size: 16px; color: var(--text-muted); line-height: 1.6; max-width: 640px; margin: 0 auto; }
.padv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.padv-card {
  position: relative; padding: 38px 32px; border-radius: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.padv-card:hover { transform: translateY(-6px); border-color: var(--brand-blue); box-shadow:0 26px 26px -26px rgba(7, 9, 26, 0.3); }
.padv-badge {
  width: 62px; height: 62px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 27px; color: #fff; margin-bottom: 24px;
  background: linear-gradient(150deg, #0e1330, #070912) padding-box,
              linear-gradient(150deg, rgba(36,125,255,0.9), rgba(47, 88, 214,0.9)) border-box;
  border: 1.5px solid transparent;
  box-shadow:0 16px 26px -14px rgba(7, 9, 26, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.padv-kicker { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-faint); margin-bottom: 10px; }
.padv-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--text); }
.padv-card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.padv-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.padv-proof span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 10px 18px; border-radius: 100px;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.padv-proof i { color: var(--brand-text); font-size: 14px; }
@media (max-width: 860px) {
  .padv-showcase { padding: 52px 0; }
  .padv-cards { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== TEAMMATE sell page ===== */

/* ===== Lead form band + sticky CTA ===== */
.lead-band { position: relative; overflow: hidden; padding: 72px 0; background: var(--bg-deep); border-top: 1px solid var(--border); }
.lead-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 88% 0%, color-mix(in srgb, var(--v-accent, var(--brand-blue)) 18%, transparent), transparent 62%),
              radial-gradient(45% 65% at 5% 100%, color-mix(in srgb, var(--v-accent-2, var(--brand-purple)) 16%, transparent), transparent 60%); }
.lead-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.lead-h2 { font-size: clamp(30px, 3.8vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.06; margin: 12px 0 16px; color: var(--text); }
.lead-sub { font-size: 16.5px; line-height: 1.65; color: var(--text-muted); margin: 0 0 26px; max-width: 460px; }
.lead-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.lead-points li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; font-weight: 600; color: var(--text); }
.lead-points i { color: var(--v-accent, var(--brand-blue)); font-size: 18px; flex: none; }
.lead-formwrap { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px; box-shadow:var(--shadow-lg); }
.hs-form-frame { min-height: 300px; }
.hs-form-frame input[type="text"], .hs-form-frame input[type="email"], .hs-form-frame input[type="tel"], .hs-form-frame select, .hs-form-frame textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--bg-deep);
  border: 1px solid var(--border-strong); color: var(--text); font-family: var(--font-body); font-size: 14px;
}
.hs-form-frame label { font-size: 12px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: block; }
.hs-form-frame input[type="submit"] {
  width: 100%; padding: 15px 24px; border: none; border-radius: 100px; cursor: pointer;
  background: var(--gradient); color: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 600;
}
@media (max-width: 900px) { .lead-inner { grid-template-columns: 1fr; gap: 34px; } }

.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  background: color-mix(in srgb, var(--bg) 92%, transparent);

  border-top: 1px solid var(--border-strong);
}
.stickycta.show { transform: translateY(0); }
.stickycta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 32px; }
.stickycta-copy { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.stickycta-actions { display: flex; align-items: center; gap: 10px; }
.stickycta-close { background: none; border: none; color: var(--text-faint); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.stickycta-close:hover { color: var(--text); }
@media (max-width: 700px) { .stickycta-copy { display: none; } .stickycta-inner { justify-content: center; padding: 12px 16px; } }

/* ===== Per-vertical visual character (brand palette only) ===== */
main[data-vertical] { --v-accent: var(--brand-blue); --v-accent-2: var(--brand-purple); }

/* Fashion: fast, high-energy, tight rhythm, bold display */
main.v-fashion { --v-accent: #247DFF; --v-accent-2: #5078F5; }
main.v-fashion .section-title, main.v-fashion .hero-photo-title { letter-spacing: -0.045em; }
main.v-fashion .tm-day-card, main.v-fashion .proof-card { border-radius: 10px; }

/* Footwear: technical, utilitarian: mono eyebrows, squarer cards */
main.v-footwear { --v-accent: #003DFF; --v-accent-2: #247DFF; }
main.v-footwear .section-eyebrow, main.v-footwear .logos-label {
  font-family: var(--font-mono); letter-spacing: 0.01em;
  -webkit-text-fill-color: currentColor; background: none; color: var(--brand-text);
  font-size: 12px; font-weight: 600;
}
main.v-footwear .tm-day-card, main.v-footwear .proof-card, main.v-footwear .padv-card { border-radius: 10px; }

/* Jewelry: refined: airy spacing, lighter headings, hairline rules */
main.v-jewelry { --v-accent: #2F58D6; --v-accent-2: #5078F5; }
main.v-jewelry .section { padding: 96px 0; }
main.v-jewelry .section-title { font-weight: 600; letter-spacing: -0.025em; }
main.v-jewelry .proof-card, main.v-jewelry .tm-day-card {
  border-radius: 4px; background: transparent; border-color: var(--border-strong);
}
main.v-jewelry .section-sub { max-width: 800px; }

/* Luxury: restrained and editorial: wide tracking, quiet cards */
main.v-luxury .section-eyebrow, main.v-luxury .logos-label {
  letter-spacing: 0.01em; font-size: 11px; font-weight: 600;
  -webkit-text-fill-color: currentColor; background: none; color: var(--text-faint);
}
main.v-luxury .proof-card, main.v-luxury .tm-day-card { border-radius: 2px; }

/* Museum: calm, editorial, generous whitespace */
main.v-museum { --v-accent: #4D94FF; --v-accent-2: #247DFF; }
main.v-museum .section { padding: 96px 0; }
main.v-museum .section-sub { max-width: 800px; font-size: 17px; line-height: 1.75; }
main.v-museum .tm-day-card, main.v-museum .proof-card { border-radius: 8px; }

/* Pet: friendly and approachable: rounder, warmer rhythm */
main.v-pet { --v-accent: #247DFF; --v-accent-2: #4D94FF; }
main.v-pet .tm-day-card, main.v-pet .proof-card, main.v-pet .padv-card, main.v-pet .pillar-card { border-radius: 26px; }
main.v-pet .tm-day-ico, main.v-pet .padv-badge { border-radius: 11px; }

/* Stadium: maximum energy: heavy display, high contrast */
main.v-stadium { --v-accent: #247DFF; --v-accent-2: #2F58D6; }
main.v-stadium .section-title, main.v-stadium .hero-photo-title, main.v-stadium .padv-h2 {
  letter-spacing: -0.05em; text-transform: none;
}
main.v-stadium .tm-day-time { font-size: 17px; font-weight: 600; }
main.v-stadium .tm-day-card, main.v-stadium .proof-card { border-radius: 12px; }
main.v-stadium .ticker-value { letter-spacing: -0.05em; }

/* Accent wiring: components follow the vertical accent */
main[data-vertical] .tm-day-step::before { background: var(--v-accent); box-shadow:0 0 0 5px var(--bg), 0 0 18px color-mix(in srgb, var(--v-accent) 70%, transparent); }
main[data-vertical] .tm-day-ico { color: var(--v-accent); background: color-mix(in srgb, var(--v-accent) 12%, transparent); }
main[data-vertical] .tm-day-time { color: var(--v-accent); }
main[data-vertical] a.tm-day-win { color: color-mix(in srgb, var(--v-accent) 75%, #fff); background: color-mix(in srgb, var(--v-accent) 12%, transparent); border-color: color-mix(in srgb, var(--v-accent) 32%, transparent); }
main[data-vertical] .tm-day::before { background: transparent; }
main[data-vertical] .proof-tag { color: color-mix(in srgb, var(--v-accent) 78%, #fff); background: color-mix(in srgb, var(--v-accent) 14%, transparent); }
main[data-vertical] .proof-card:hover { border-color: color-mix(in srgb, var(--v-accent) 50%, transparent); }
main[data-vertical] .proof-icp i { color: var(--v-accent); }
main[data-vertical] .pillar-icon { color: var(--v-accent); }
main[data-vertical] .padv-glow-1 { background: radial-gradient(circle, color-mix(in srgb, var(--v-accent) 24%, transparent), transparent 68%); }
main[data-vertical] .padv-glow-2 { background: radial-gradient(circle, color-mix(in srgb, var(--v-accent-2) 22%, transparent), transparent 68%); }
main[data-vertical] .tm-band-glow {
  background: radial-gradient(55% 80% at 82% 8%, color-mix(in srgb, var(--v-accent-2) 18%, transparent), transparent 62%),
              radial-gradient(50% 70% at 8% 100%, color-mix(in srgb, var(--v-accent) 16%, transparent), transparent 60%);
}

/* Fashion vertical: editorial spread grid (magazine vibe, minimal copy) */
.fx-spread {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: var(--radius-lg); overflow: hidden;
}
.fx-cell {
  position: relative; padding: 38px 34px 40px;
  border-bottom: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong);
  transition: background .3s ease;
}
.fx-cell:nth-child(3n) { border-right: none; }
.fx-cell:hover { background: var(--bg-deep); }
.fx-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--text-faint); display: block; margin-bottom: 22px;
}
.fx-cell h3 {
  font-size: clamp(21px, 2.1vw, 27px); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 0 12px; color: var(--text);
}
.fx-cell p { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.fx-cell p a { color: var(--brand-text); font-weight: 600; }
.fx-stat {
  display: block; font-size: clamp(40px, 4.6vw, 62px); font-weight: 600;
  letter-spacing: -0.045em; line-height: 1; margin: 0 0 10px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fx-span2 { grid-column: span 2; }

/* Bold cells: deep ink panels with brand accent */
.fx-c-blue { background: #0a1230; box-shadow:inset 0 3px 0 0 var(--brand-blue); }
.fx-c-purple { background: #0C1630; box-shadow:inset 0 3px 0 0 var(--brand-purple); }
.fx-c-magenta { background: #081030; box-shadow:inset 0 3px 0 0 var(--brand-magenta); }
.fx-c-blue, .fx-c-purple, .fx-c-magenta {
  border-color: transparent; display: flex; flex-direction: column;
}
.fx-c-blue h3, .fx-c-purple h3, .fx-c-magenta h3 { color: #fff; }
.fx-c-blue p, .fx-c-purple p, .fx-c-magenta p { color: rgba(238,241,251,0.72); }
.fx-c-blue .fx-num, .fx-c-purple .fx-num, .fx-c-magenta .fx-num {
  margin-bottom: auto; padding-bottom: 26px;
}
.fx-c-blue .fx-num { color: #6eb0ff; }
.fx-c-purple .fx-num { color: #9CB5FF; }
.fx-c-magenta .fx-num { color: #9CB9FF; }
.fx-c-blue p a, .fx-c-purple p a, .fx-c-magenta p a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}
.fx-cell.fx-c-blue:hover { background: #0d1740; filter: none; }
.fx-cell.fx-c-purple:hover { background: #101E40; filter: none; }
.fx-cell.fx-c-magenta:hover { background: #0B1640; filter: none; }

/* Bold cells: full-bleed photography with scrim overlay */
.fx-photo { padding: 0; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; border-color: transparent; }
.fx-photo > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s ease;
}
.fx-cell.fx-photo:hover { background: none; filter: none; }
.fx-cell.fx-photo:hover > img { transform: scale(1.045); }
.fx-overlay {
  position: relative; z-index: 1; width: 100%; padding: 120px 34px 36px;
  background: linear-gradient(180deg, rgba(4,6,20,0) 0%, rgba(4,6,20,0.55) 42%, rgba(4,6,20,0.92) 100%);
}
.fx-overlay h3 { color: #fff; }
.fx-overlay p { color: rgba(238,241,251,0.85); }
.fx-overlay .fx-num { color: rgba(238,241,251,0.68); margin-bottom: 14px; }
.fx-overlay p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.fx-photo .fx-stat { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #fff; color: #fff; }

/* Bold cells: gradient CTA tile */
.fx-cta {
  background: var(--gradient); border-color: transparent;
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.fx-cta h3 { color: #fff; }
.fx-cta p { color: rgba(255,255,255,0.88); max-width: 600px; }
.fx-cell.fx-cta:hover { background: var(--gradient); filter: brightness(1.07); }
.fx-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 20px; padding: 12px 24px; border-radius: 999px;
  background: #fff; color: #07091a; font-weight: 600; font-size: 15px;
  transition: transform .25s ease;
}
.fx-cta:hover .fx-cta-btn { transform: translateX(4px); }
@media (max-width: 900px) {
  .fx-spread { grid-template-columns: repeat(2, 1fr); }
  .fx-cell:nth-child(3n) { border-right: 1px solid var(--border-strong); }
  .fx-cell:nth-child(2n) { border-right: none; }
  .fx-span2 { grid-column: span 2; }
  .fx-photo { min-height: 320px; }
}
@media (max-width: 600px) {
  .fx-spread { grid-template-columns: 1fr; }
  .fx-cell, .fx-cell:nth-child(3n) { border-right: none; }
  .fx-span2 { grid-column: span 1; }
  .fx-photo { min-height: 280px; }
  .fx-overlay { padding: 90px 26px 30px; }
}

/* Jewelry: serialized capability ledger */
.jw-spread { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 28px; align-items: start; }
.jw-mono {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-text);
}
.jw-dim { color: var(--text-faint); }
.jw-plate {
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-elevated);
}
.jw-plate img { width: 100%; height: 340px; object-fit: cover; display: block; }
.jw-plate-cap { padding: 22px 24px 26px; border-top: 1px solid var(--border); }
.jw-plate-cap p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 10px 0 0; }
.jw-ledger { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated); }
.jw-ledger-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid var(--border-strong); background: var(--bg-deep);
}
.jw-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: start;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: background .25s ease, padding-left .25s ease;
}
.jw-row:last-child { border-bottom: none; }
.jw-row:hover { background: var(--bg-deep); padding-left: 30px; }
.jw-idx {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em; color: var(--text-faint); padding-top: 4px;
}
.jw-row:nth-child(odd) .jw-idx { color: var(--brand-blue); }
.jw-row:nth-child(even) .jw-idx { color: var(--brand-purple); }
.jw-row-body h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text); }
.jw-row-body p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.jw-arrow { font-size: 17px; color: var(--text-faint); transition: transform .25s ease, color .25s ease; }
.jw-row:hover .jw-arrow { color: var(--brand-text); transform: translate(2px, -2px); }
@media (max-width: 900px) {
  .jw-spread { grid-template-columns: 1fr; }
  .jw-plate img { height: 260px; }
}

/* Museums: gallery placards (matted double frame + exhibit tag) */
.mu-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mu-placard {
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  outline: 1px solid var(--border); outline-offset: 5px;
  border-radius: 3px; padding: 28px 26px 30px; margin: 6px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.mu-placard:hover { transform: translateY(-3px); box-shadow:var(--shadow-lg); }
.mu-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--brand-text);
  border-bottom: 1px solid var(--border-strong); padding-bottom: 8px; margin-bottom: 16px;
}
.mu-placard h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.mu-placard p { font-size: 13.5px; line-height: 1.65; color: var(--text-muted); margin: 0; }
.mu-placard p a { color: var(--brand-text); font-weight: 600; }
@media (max-width: 1000px) { .mu-wall { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .mu-wall { grid-template-columns: 1fr; } }

/* Luxury: typographic vitrine (no cards, hairlines + roman numerals) */
.lx-vitrine {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
}
.lx-cell {
  padding: 40px 34px 46px; border-left: 1px solid var(--border);
  transition: background .35s ease;
}
.lx-cell:first-child, .lx-cell:nth-child(3n+1) { border-left: none; }
.lx-cell:nth-child(n+4) { border-top: 1px solid var(--border); }
.lx-cell:hover { background: var(--bg-deep); }
.lx-num {
  display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--brand-purple); margin-bottom: 26px;
}
.lx-cell h3 {
  font-size: 21px; font-weight: 600; letter-spacing: -0.015em;
  margin: 0 0 10px; color: var(--text);
}
.lx-cell p { font-size: 13.5px; line-height: 1.7; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) {
  .lx-vitrine { grid-template-columns: 1fr 1fr; }
  .lx-cell:nth-child(3n+1) { border-left: 1px solid var(--border); }
  .lx-cell:nth-child(2n+1) { border-left: none; }
  .lx-cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .lx-vitrine { grid-template-columns: 1fr; }
  .lx-cell { border-left: none !important; padding: 30px 22px 34px; }
  .lx-cell:nth-child(n+2) { border-top: 1px solid var(--border); }
}

/* Stadiums: game-day board (angular chips, sharp cards) */

/* Pet: ID-tag capability cards */
.pt-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pt-tag {
  position: relative; padding: 54px 26px 30px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 28px 28px 22px 22px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pt-tag:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow:var(--shadow-lg); border-color: var(--border-strong); }
.pt-hole {
  position: absolute; top: 18px; left: 26px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); box-shadow:inset 0 1px 3px rgba(7,9,26,0.25);
}
.pt-blue .pt-hole { border: 3px solid var(--brand-blue); }
.pt-purple .pt-hole { border: 3px solid var(--brand-purple); }
.pt-label {
  position: absolute; top: 17px; left: 52px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 20px;
}
.pt-blue .pt-label { color: var(--brand-blue); }
.pt-purple .pt-label { color: var(--brand-purple); }
.pt-tag h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.pt-tag p { font-size: 13.5px; line-height: 1.62; color: var(--text-muted); margin: 0; }
.pt-tag p a { color: var(--brand-text); font-weight: 600; }
@media (max-width: 1000px) { .pt-tags { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pt-tags { grid-template-columns: 1fr; } }

/* Footwear: shoebox container (lid + body with tissue paper) */
.shoebox { max-width: 1080px; margin: 0 auto; perspective: 1400px; }
/* Four figures share the box, so they run a size down from the sitewide stat size and never wrap. */
.shoebox .statcard-value { font-size: clamp(38px, 3.6vw, 50px); white-space: nowrap; }
.shoebox-lid {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 26px 34px;
  background: linear-gradient(180deg, #1b2450 0%, #121838 62%, #0d1230 100%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px 16px 5px 5px;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,0.16),
    inset 0 -3px 0 0 var(--brand-blue),
    0 22px 26px -20px rgba(0,0,0,0.3);
  z-index: 2;
}
.shoebox-brandmark img { height: 30px; width: auto; opacity: 1; filter: brightness(1.6); }
.shoebox-lid-meta {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(238,241,251,0.6);
}
.shoebox-sticker {
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1;
  padding: 6px 12px; border-radius: 6px; color: #fff;
  background: var(--brand-blue); font-size: 8.5px; letter-spacing: 0.06em;
}
.shoebox-sticker strong { font-size: 14px; letter-spacing: 0.04em; }
.shoebox-body {
  position: relative; margin-top: -4px; padding: 40px 34px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong); border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow:var(--shadow-lg);
}
.shoebox-tissue {
  position: absolute; top: 0; left: 0; right: 0; height: 18px;
  background: linear-gradient(180deg, rgba(80, 120, 245,0.22), transparent);
  -webkit-mask-image: conic-gradient(from -45deg at 50% 0, #000 0 90deg, transparent 90deg);
  mask-image: conic-gradient(from -45deg at 50% 0, #000 0 90deg, transparent 90deg);
  -webkit-mask-size: 30px 18px; mask-size: 30px 18px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  pointer-events: none;
}
.shoebox-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--border-strong);
}
.shoebox-barcode {
  flex: 0 0 130px; height: 26px;
  background: repeating-linear-gradient(90deg,
    var(--text) 0 2px, transparent 2px 4px,
    var(--text) 4px 5px, transparent 5px 9px,
    var(--text) 9px 12px, transparent 12px 14px);
  opacity: 0.6;
}
.shoebox-sku {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
@media (max-width: 700px) {
  .shoebox-lid { padding: 16px 20px; }
  .shoebox-body { padding: 32px 20px 22px; }
  .shoebox-lid-meta > span:first-child { display: none; }
}

/* Four-up statcard row */
.stat-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .stat-row-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-row-4 { grid-template-columns: 1fr; } }

/* Footwear: size-run rack (shoebox label cards) */
.fw-rack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fw-box {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fw-box:hover { transform: translateY(-3px); box-shadow:var(--shadow-lg); border-color: var(--border-strong); }
.fw-label {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px dashed var(--border-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.fw-blue .fw-label { color: var(--brand-blue); }
.fw-purple .fw-label { color: var(--brand-purple); }
.fw-size { padding: 3px 9px; border: 1.5px solid currentColor; border-radius: 6px; white-space: nowrap; }
.fw-bars { flex: 1; height: 14px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px); opacity: 0.22; }
.fw-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.fw-body h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.fw-body p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 16px; flex: 1; }
.fw-go {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 12.5px; font-weight: 600; color: var(--brand-text);
}
.fw-go i { transition: transform .25s ease; }
.fw-box:hover .fw-go i { transform: translateX(3px); }
@media (max-width: 1000px) { .fw-rack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fw-rack { grid-template-columns: 1fr; } }

/* Solutions: proof band (real clients, ICP-facing) */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; }
.proof-card {
  padding: 30px 28px; border-radius: 11px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease;
}
.proof-card:hover { transform: translateY(-4px); border-color: rgba(36,125,255,0.45); }
.proof-client {
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin: 0 0 4px;
}
.proof-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--brand-text);
  padding: 4px 10px; border-radius: 100px; background: var(--brand-soft); margin-bottom: 14px;
}
.proof-card p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.proof-icp {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px;
}
.proof-icp span {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 10px 18px; border-radius: 100px;
  background: var(--panel); border: 1px solid var(--border);
}
.proof-icp i { color: var(--brand-blue); font-size: 15px; }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }
/* A client card that names several institutions takes two columns. */
.proof-card-wide { grid-column: span 2; }
@media (max-width: 900px) { .proof-card-wide { grid-column: auto; } }

/* journey step tag becomes a link on solutions pages */
a.tm-day-win { text-decoration: none; }
a.tm-day-win:hover { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); }
a.tm-day-win i { transition: transform .25s ease; }
a.tm-day-win:hover i { transform: translateX(2px); }

/* day-on-the-floor timeline */
.tm-day { position: relative; margin-top: 40px; padding-left: 96px; }
.tm-day::before { content: ''; position: absolute; left: 116px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, transparent, var(--border-strong) 6%, var(--border-strong) 94%, transparent); }
.tm-day-step { position: relative; display: flex; align-items: flex-start; gap: 30px; padding: 12px 0; }
.tm-day-step + .tm-day-step { margin-top: 10px; }
.tm-day-time {
  position: absolute; left: -96px; top: 26px; width: 92px; text-align: right;
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--brand-text);
}
.tm-day-step::before {
  content: ''; position: absolute; left: 14px; top: 32px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-blue); box-shadow:0 0 0 5px var(--bg), 0 0 18px rgba(7, 9, 26, 0.3); z-index: 1;
}
.tm-day-card {
  position: relative; margin-left: 62px; flex: 1;
  padding: 24px 26px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--border);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.tm-day-card:hover { transform: translateX(6px); border-color: rgba(36,125,255,0.5); box-shadow:0 24px 26px -26px rgba(7, 9, 26, 0.3); }
.tm-day-ico {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: var(--brand-blue); background: var(--brand-soft); margin-bottom: 14px;
}
.tm-day-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.tm-day-card p { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.tm-day-win {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--brand-text);
  padding: 7px 14px; border-radius: 100px;
  background: var(--brand-soft); border: 1px solid rgba(36,125,255,0.3);
}
@media (max-width: 760px) {
  .tm-day { padding-left: 0; }
  .tm-day::before { left: 5px; }
  .tm-day-step::before { left: 0; top: 8px; }
  .tm-day-time { position: static; width: auto; text-align: left; margin: 0 0 6px 26px; }
  .tm-day-step { flex-direction: column; gap: 0; }
  .tm-day-card { margin-left: 26px; }
}

/* Reusable mini feature cards (platform pages) */
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.mini-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mini-card {
  padding: 26px 26px 28px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mini-card:hover { transform: translateY(-3px); box-shadow:var(--shadow-lg); }
.mini-ico {
  width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 14px;
}
.mini-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.mini-card p { font-size: 13.5px; line-height: 1.62; color: var(--text-muted); margin: 0; }
.mini-card p a { color: var(--brand-text); font-weight: 600; }
@media (max-width: 900px) { .mini-grid, .mini-grid-2 { grid-template-columns: 1fr; } }

/* ---- Capability strip ---------------------------------------------------------
   The icon cards that round out a section. Two things made them read as stray
   blocks. In the plain 3-up grid, a count of four or five orphaned one or two
   cards under an empty gap. And where they shared a <section> with the feature
   rows above them, only a 40px margin marked the change of subject, so they
   blended into the block before them. .mini-strip gives them a recessed band and
   a rule of their own; .mini-row puts them on one line. */
.mini-strip {
  border-top: 1px solid var(--border);
  background: var(--bg-deep);
  /* padding-block, never the shorthand: a 0 horizontal value here would be fine,
     but the container inside is what carries the side padding and this keeps the
     two concerns from ever getting crossed. */
  padding-block: 56px 60px;
}
.mini-strip .section-eyebrow { display: block; margin-bottom: 20px; }
.mini-strip .mini-row { margin-top: 0; }

.mini-row { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 12px; }
.mini-row .mini-card { padding: 20px 20px 22px; }
.mini-row .mini-ico {
  width: 36px; height: 36px; border-radius: 9px; font-size: 17px; margin-bottom: 12px;
}
.mini-row .mini-card h3 { font-size: 15.5px; margin: 0 0 6px; }
.mini-row .mini-card p { font-size: 13px; line-height: 1.58; }

/* One line is the whole point, so the fallbacks are chosen never to leave a gap
   beside a short last row: at two columns an odd final card spans the full width
   instead of sitting alone next to empty space, which is the exact raggedness the
   one-line treatment was fixing. */
@media (max-width: 1080px) {
  .mini-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-row .mini-card { padding: 22px 22px 24px; }
  .mini-row .mini-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .mini-row { grid-template-columns: 1fr; }
}

/* Shared feature rail */
/* One Platform, grouped the same way the header groups the product */

/* Product benefits grid */
.ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.ben-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 20px 20px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: border-color .25s ease, transform .25s ease;
}
.ben-item:hover { border-color: rgba(36,125,255,0.4); transform: translateY(-2px); }
.ben-ico {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--brand-blue); background: var(--brand-soft);
}
.ben-item:nth-child(even) .ben-ico { color: var(--brand-purple); background: rgba(80, 120, 245,0.10); }
.ben-item h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px; color: var(--text); }
.ben-item p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }
@media (max-width: 1000px) { .ben-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ben-grid { grid-template-columns: 1fr; } }

/* LMS: three working surfaces */
.lms-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.lms-col {
  padding: 24px 22px 22px; border-radius: 11px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lms-col:hover { transform: translateY(-3px); border-color: rgba(36,125,255,0.4); box-shadow:var(--shadow-lg); }
.lms-col-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lms-ico {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; background: var(--brand-blue);
}
/* The card-text rule further down the sheet is `.lms-col span`, one class plus an
   element, which outranks the single class above and painted the glyph in body
   ink on its own blue chip. Two classes to win it back. */
.lms-col .lms-ico { color: #fff; }
.lms-col:nth-child(2) .lms-ico { background: linear-gradient(140deg, var(--brand-purple), var(--brand-magenta)); }
.lms-col:nth-child(3) .lms-ico { background: linear-gradient(140deg, var(--brand-blue), var(--brand-purple)); }
.lms-col-head h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.lms-col > p { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin: 0 0 16px; }
.lms-col .feature-bullets { margin: 0; }
.lms-col .feature-bullets li { font-size: 13.5px; }
@media (max-width: 1000px) { .lms-cols { grid-template-columns: 1fr; } }

/* Press room: release list */
.prl-list { border-top: 1px solid var(--border-strong); margin-top: 34px; }
.prl-item {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 22px; align-items: start;
  padding: 22px 8px; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: background .22s ease, padding-left .22s ease;
}
.prl-item:hover { background: var(--bg-deep); padding-left: 16px; }
.prl-date {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: var(--brand-text); padding-top: 3px;
}
.prl-text { display: block; }
.prl-title { display: block; font-size: 17.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--text); }
.prl-dek { display: block; margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.prl-arrow { font-size: 17px; color: var(--text-faint); padding-top: 4px; transition: transform .22s ease, color .22s ease; }
.prl-item:hover .prl-arrow { color: var(--brand-text); transform: translateX(4px); }
@media (max-width: 700px) {
  .prl-item { grid-template-columns: 1fr auto; gap: 12px; }
  .prl-date { grid-column: 1 / -1; padding-top: 0; }
}

/* Case Studies nav dropdown: homepage card language, no hover video */
.nav-cs { min-width: 720px; padding: 14px; left: 50%; transform: translate(-50%, -4px); }
.nav-cs-solo { min-width: 360px; }   /* rows-only dropdown, no feature card */
.nav-item:hover .nav-cs, .nav-item:focus-within .nav-cs { transform: translate(-50%, 0); }
.nav-cs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 6px 12px;
}
.nav-cs-head > span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: var(--text-faint);
}
.nav-cs-head > a {
  display: inline-flex !important; align-items: center; gap: 6px;
  padding: 0 !important; font-size: 12.5px; font-weight: 600; color: var(--brand-text);
  background: none !important; white-space: nowrap;
}
.nav-cs-head > a i { font-size: 14px; transition: transform .2s ease; }
.nav-cs-head > a:hover i { transform: translateX(3px); }
.nav-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nav-cs a { white-space: normal; }
.ncs-card {
  position: relative; display: block !important; padding: 0 !important; white-space: normal;
  aspect-ratio: 3 / 3.4; border-radius: 10px; overflow: hidden;
  background: #0a0d22; text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.ncs-card:hover { transform: translateY(-4px); box-shadow:0 18px 26px -20px rgba(0,0,0,0.3); background: #0a0d22 !important; }
.ncs-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ncs-card:hover .ncs-photo { transform: scale(1.06); }
.ncs-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,14,0.96) 0%, rgba(5,6,14,0.86) 38%, rgba(5,6,14,0.40) 68%, rgba(5,6,14,0.10) 90%);
}
.ncs-sector {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 8px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: #fff;
  padding: 4px 8px; border-radius: 100px;
  background: rgba(5,6,14,0.62); border: 1px solid rgba(255,255,255,0.28);

}
.ncs-body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 12px 13px 13px; display: block; }
.ncs-logo {
  display: block; max-width: 62%; max-height: 22px; width: auto; height: auto; margin-bottom: 7px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.ncs-name {
  display: block; margin-bottom: 5px;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: rgba(255,255,255,0.72);
}
.ncs-title {
  display: block; white-space: normal; font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
  line-height: 1.3; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.ncs-result {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; white-space: normal; text-align: left;
  padding: 4px 9px; border-radius: 100px;
  font-size: 9.5px; font-weight: 600; line-height: 1.3; color: #fff;
  background: rgba(36,125,255,0.26); border: 1px solid rgba(120,175,255,0.45);
}
.ncs-result i { font-size: 11px; color: #8fc0ff; flex-shrink: 0; }
/* One featured card beside prominent, self-explaining link rows */
.nav-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 16px; align-items: stretch; }
.ncs-card-wide { aspect-ratio: auto; min-height: 240px; }
.nav-rows { display: grid; gap: 7px; align-content: start; }
.nav-row {
  display: flex !important; align-items: center; gap: 12px;
  padding: 11px 13px !important; border-radius: 12px;
  background: var(--bg-deep); border: 1px solid var(--border);
  white-space: normal; text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav-row:hover {
  transform: translateX(3px); border-color: rgba(36,125,255,0.5);
  background: var(--bg-elevated); box-shadow:0 12px 26px -18px rgba(7, 9, 26, 0.3);
}
.nav-row[aria-current="page"] { background: var(--brand-soft); border-color: rgba(36,125,255,0.5); }
.nav-row-ico {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: #fff; background: var(--brand-blue);
}
.nav-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-row-text strong { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.nav-row-text em {
  font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-row-arrow {
  margin-left: auto; font-size: 15px; color: var(--text-faint); flex-shrink: 0;
  transition: transform .2s ease, color .2s ease;
}
.nav-row:hover .nav-row-arrow { color: var(--brand-text); transform: translateX(3px); }
@media (max-width: 1100px) {
  .nav-cs { min-width: 560px; }
  .nav-split { grid-template-columns: 1fr; }
}

/* Cards, same language as the homepage rail */
.csx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.csx-card {
  position: relative; aspect-ratio: 3 / 3.5;
  border-radius: 12px; overflow: hidden; display: block;
  background: var(--bg-elevated); text-decoration: none;
  box-shadow:0 24px 26px -24px rgba(0,0,0,0.3);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.csx-card:hover { transform: translateY(-8px); box-shadow:0 26px 26px -26px rgba(0,0,0,0.3); }
.csx-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.csx-card:hover .csx-photo { transform: scale(1.05); }
.csx-card .cs-video { z-index: 1; }
.csx-card .cs-video-on ~ .csx-photo, .csx-card:has(.cs-video-on) .csx-photo { opacity: 0; }
.csx-photo { transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .5s ease; }
.csx-card.is-ink { background: #0a0d22; }
.csx-card.is-ink::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(90% 70% at 18% 8%, rgba(36,125,255,0.30), transparent 62%),
    radial-gradient(80% 60% at 92% 100%, rgba(80, 120, 245,0.26), transparent 60%);
}
.csx-card.is-ink.tone-1::before {
  background:
    radial-gradient(90% 70% at 18% 8%, rgba(80, 120, 245,0.32), transparent 62%),
    radial-gradient(80% 60% at 92% 100%, rgba(47, 88, 214,0.24), transparent 60%);
}
.csx-card.is-ink.tone-2::before {
  background:
    radial-gradient(90% 70% at 18% 8%, rgba(47, 88, 214,0.28), transparent 62%),
    radial-gradient(80% 60% at 92% 100%, rgba(36,125,255,0.26), transparent 60%);
}
.csx-card.is-ink::after {
  content: ''; position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 34px 34px;
}
.csx-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,14,0.95) 0%, rgba(5,6,14,0.80) 30%, rgba(5,6,14,0.34) 58%, rgba(5,6,14,0.06) 80%);
  transition: background .35s ease;
}
.csx-card:hover .csx-scrim {
  background: linear-gradient(to top, rgba(5,6,14,0.97) 0%, rgba(5,6,14,0.90) 44%, rgba(5,6,14,0.60) 74%, rgba(5,6,14,0.30) 100%);
}
.csx-sector {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: #fff;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22);

}
.csx-ext { position: absolute; top: 20px; right: 20px; z-index: 3; font-size: 15px; color: rgba(255,255,255,0.7); }

/* Title + callout always visible; blurb and link reveal on hover */
.csx-body { position: absolute; inset: auto 0 0 0; z-index: 3; padding: 22px 20px 22px; color: #fff; }
.csx-logo {
  display: block; max-width: 58%; max-height: 34px; width: auto; height: auto; margin-bottom: 12px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
.csx-name {
  display: block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: rgba(255,255,255,0.72);
}
.csx-body h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.28;
  margin: 0; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
/* Benchmarks: two or three sourced figures per story, led by the customer. */
.csx-name.is-lead {
  font-family: var(--font-display); font-size: 17px; letter-spacing: -0.02em; line-height: 1.28;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.5); margin-bottom: 4px;
}
.csx-metrics { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.csx-metrics li {
  position: relative; padding-left: 16px;
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.csx-metrics li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 7px; height: 7px; border-radius: 50%; background: #8fc0ff;
}
.csx-more p.csx-story { font-weight: 600; color: #fff; margin-bottom: 6px; }
.csx-more {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(.2,.7,.3,1), opacity .3s ease, margin-top .4s ease;
}
.csx-card:hover .csx-more { max-height: 240px; opacity: 1; margin-top: 14px; }
.csx-more p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.86); margin: 0 0 12px; }
.csx-read { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #fff; }
.csx-read i { transition: transform .25s ease; }
.csx-card:hover .csx-read i { transform: translateX(4px); }
.csx-card[hidden] { display: none; }
.csx-empty { text-align: center; color: var(--text-faint); font-size: 14px; margin-top: 28px; }
@media (hover: none) {
  .csx-more { max-height: 240px; opacity: 1; margin-top: 14px; }
}
@media (max-width: 1000px) { .csx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .csx-grid { grid-template-columns: 1fr; }
}

/* Solutions: platform cross-link rail */
/* Journey: scroll-following product token + active-step highlight */
.tm-journey { --rail-x: 117px; }
.tm-rail-fill {
  position: absolute; left: 114px; top: 10px; width: 6px; height: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #2b8bff 0%, #5078F5 55%, #263FFF 100%);
  box-shadow:0 0 18px rgba(7, 9, 26, 0.3), 0 0 26px rgba(7, 9, 26, 0.28);
  transition: height .45s cubic-bezier(.2,.7,.3,1); z-index: 1;
}
.tm-traveler {
  position: absolute; left: calc(var(--rail-x) - 34px); top: 0;
  width: 68px; height: 68px; margin-top: -34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 31px; color: #fff;
  background: linear-gradient(140deg, #2b8bff 0%, #5078F5 52%, #263FFF 100%);
  box-shadow:0 0 0 7px var(--bg),
    0 0 0 9px rgba(7, 9, 26, 0.28),
    0 16px 26px -8px rgba(7, 9, 26, 0.3),
    0 0 26px -4px rgba(7, 9, 26, 0.3);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  z-index: 4; pointer-events: none;
}
.tm-traveler > i { position: relative; z-index: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.tm-traveler::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(38, 63, 255,0.7);
  animation: travPulse 2.4s ease-in-out infinite;
}
@keyframes travPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.32); opacity: 0.08; }
}
/* Step number moves clear of the larger token */
.tm-journey .tm-day-time { left: -112px; width: 84px; }
/* Steps dim until they are the one in view */
.tm-journey .tm-day-step { transition: opacity .4s ease; }
.tm-journey .tm-day-step:not(.is-active) { opacity: 0.62; }
.tm-journey .tm-day-step.is-active .tm-day-card {
  border-color: rgba(36,125,255,0.55);
  box-shadow:0 26px 26px -26px rgba(7, 9, 26, 0.3);
  transform: translateX(6px);
}
.tm-journey .tm-day-step.is-active .tm-day-time { color: var(--brand-purple); }
.tm-journey .tm-day-step.is-active::before {
  background: var(--brand-purple);
  box-shadow:0 0 0 5px var(--bg), 0 0 22px rgba(7, 9, 26, 0.28);
}
@media (prefers-reduced-motion: reduce) {
  .tm-traveler, .tm-rail-fill { transition: none; }
  .tm-traveler::after { animation: none; }
  .tm-journey .tm-day-step:not(.is-active) { opacity: 1; }
}
@media (max-width: 760px) {
  .tm-journey { --rail-x: 6px; }
  .tm-rail-fill { left: 3px; width: 5px; }
  .tm-traveler { width: 44px; height: 44px; margin-top: -22px; font-size: 21px; left: calc(var(--rail-x) - 22px); }
  .tm-journey .tm-day-time { position: static; left: auto; width: auto; }
  .tm-journey .tm-day-step:not(.is-active) { opacity: 1; }
}

/* problem / impact stat band */
.tm-band { position: relative; overflow: hidden; padding: 64px 0; background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tm-band-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 80% at 82% 8%, rgba(47, 88, 214,0.16), transparent 62%), radial-gradient(50% 70% at 8% 100%, rgba(36,125,255,0.14), transparent 60%); }
.tm-band .container { position: relative; z-index: 1; }
.tm-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Upgrade-case stats carry the gradient (Plus/AI treatment) */
@media (max-width: 900px) { .tm-stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tm-stat-grid { grid-template-columns: 1fr; } }

/* bottom-line recap */

/* Certified hardware, device cutout cards */

/* Cloud HQ dashboard-widget report grid */
.dashw-rt { --_c: var(--brand-blue); }
.dashw-in { --_c: var(--brand-magenta); }
.dash-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-blue);
}
.dash-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-blue); box-shadow:0 0 0 0 rgba(7, 9, 26, 0.3); animation: wmPulse 2.2s infinite; }
.dash-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.dash-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.dash-tab {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 6px 13px; border-radius: 8px;
}
.dash-tab.active { color: var(--brand-blue); background: var(--brand-soft); }
.dash-tools { display: flex; align-items: center; gap: 8px; }
.dash-source {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--brand-text);
  padding: 6px 12px; border-radius: 100px;
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand-blue) 30%, transparent);
}
.dash-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
}
@media (max-width: 720px) { .dash-tools { display: none; } }
.dashw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px;
  background: radial-gradient(circle at 1px 1px, var(--grid-line) 1px, transparent 1.5px);
  background-size: 22px 22px;
}

/* Ambient "live" motion on the report visuals. Runs only while in view, motion-safe */
.dashw-spark-base { opacity: 0.4; }
.dashw-spark-run { stroke-dasharray: 16 150; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .dash-run .dashw-bars i { animation: dashEq 2.6s ease-in-out infinite; transform-origin: bottom; }
  .dash-run .dashw-bars i:nth-child(2) { animation-duration: 3.1s; animation-delay: -.4s; }
  .dash-run .dashw-bars i:nth-child(3) { animation-duration: 2.2s; animation-delay: -.9s; }
  .dash-run .dashw-bars i:nth-child(4) { animation-duration: 3.4s; animation-delay: -.2s; }
  .dash-run .dashw-bars i:nth-child(5) { animation-duration: 2.5s; animation-delay: -1.2s; }
  .dash-run .dashw-bars i:nth-child(6) { animation-duration: 2.9s; animation-delay: -.6s; }
  .dash-run .dashw-bars i:nth-child(7) { animation-duration: 3.3s; animation-delay: -1s; }
  .dash-run .dashw-donut-bars i { animation: dashEq 2.8s ease-in-out infinite; transform-origin: bottom; }
  .dash-run .dashw-donut-bars i:nth-child(2) { animation-duration: 2.3s; animation-delay: -.7s; }
  .dash-run .dashw-donut-bars i:nth-child(3) { animation-duration: 3.1s; animation-delay: -1.3s; }
  .dash-run .dashw-donut { animation: dashSpin 18s linear infinite; }
  .dash-run .dashw-hbars i { animation: dashBreathe 3s ease-in-out infinite; transform-origin: left; }
  .dash-run .dashw-hbars i:nth-child(2) { animation-delay: -1s; }
  .dash-run .dashw-hbars i:nth-child(3) { animation-delay: -2s; }
  .dash-run .dashw-spark-run { animation: dashFlow 2.6s linear infinite; }
}
@keyframes dashEq { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }
@keyframes dashSpin { to { transform: rotate(360deg); } }
@keyframes dashBreathe { 0%, 100% { transform: scaleX(0.9); opacity: .78; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes dashFlow { to { stroke-dashoffset: -166; } }
.dashw-ghead {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--_c); margin-top: 8px;
}
.dashw-ghead:first-child { margin-top: 0; }
.dashw-ghead i { font-size: 15px; }
.dashw-ghead::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--_c) 28%, transparent); }
.dashw-livechip {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  background: color-mix(in srgb, var(--_c) 12%, transparent);
}
.dashw-livechip i { width: 6px; height: 6px; border-radius: 50%; box-shadow:0 0 0 0 rgba(7, 9, 26, 0.3); animation: wmPulse 2.2s infinite; }
.dashw-hbars { flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; }
.dashw-hbars i { height: 8px; border-radius: 4px; }
.dashw {
  padding: 18px 18px 16px; border-radius: 12px;
  background: var(--bg-deep); border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease;
}
.dashw:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--_c) 55%, transparent); }
.dashw-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.dashw-head > i { font-size: 16px; flex: none; }
.dashw-head > span:first-of-type { flex: 1; letter-spacing: -0.01em; }
.dashw-viz { height: 40px; margin-bottom: 12px; display: flex; align-items: flex-end; gap: 10px; }
.dashw-viz svg { width: 100%; height: 100%; opacity: 0.85; }
.dashw-bars { align-items: flex-end; gap: 6px; }
.dashw-bars i { flex: 1; border-radius: 3px 3px 0 0; }
.dashw-bars i:nth-child(1) { height: 40%; opacity: .55; }
.dashw-bars i:nth-child(2) { height: 65%; opacity: .7; }
.dashw-bars i:nth-child(3) { height: 45%; opacity: .6; }
.dashw-bars i:nth-child(4) { height: 85%; opacity: .9; }
.dashw-bars i:nth-child(5) { height: 60%; opacity: .7; }
.dashw-bars i:nth-child(6) { height: 100%; }
.dashw-bars i:nth-child(7) { height: 74%; opacity: .8; }
.dashw-donut {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px);
  mask: radial-gradient(circle, transparent 11px, #000 12px);
}
.dashw-donut-bars { flex: 1; display: flex; align-items: flex-end; gap: 5px; height: 100%; }
.dashw-donut-bars i { flex: 1; border-radius: 3px 3px 0 0; }
.dashw-donut-bars i:nth-child(1) { height: 55%; }
.dashw-donut-bars i:nth-child(2) { height: 90%; }
.dashw-donut-bars i:nth-child(3) { height: 35%; }
.dashw p { font-size: 12.5px; line-height: 1.55; margin: 0; }
@media (max-width: 960px) { .dashw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .dashw-grid { grid-template-columns: 1fr; } }

/* Stat callout cards: colored accents (blue/purple, no gradient) */
.statcard {
  position: relative; overflow: hidden;
  padding: 28px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform .25s ease, box-shadow .25s ease;
}
.statcard-blue { box-shadow:inset 0 26px 26px -26px rgba(7, 9, 26, 0.3); }
.statcard-purple { box-shadow:inset 0 26px 26px -26px rgba(7, 9, 26, 0.28); }
.statcard:hover { transform: translateY(-4px); }
.statcard-blue:hover { box-shadow:inset 0 26px 26px -26px rgba(7, 9, 26, 0.3), 0 22px 26px -24px rgba(7, 9, 26, 0.3); }
.statcard-purple:hover { box-shadow:inset 0 26px 26px -26px rgba(7, 9, 26, 0.28), 0 22px 26px -24px rgba(7, 9, 26, 0.3); }
.statcard-value { font-size: 46px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin-bottom: 10px; color: var(--text); }
.statcard-value span { font-size: 22px; }
.statcard-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }

/* ATS stats, hero stat + supporting cards */

/* Ticker stat accents (sitewide) */

.security-tech-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  font-size: 13.5px; font-weight: 600; color: var(--brand-text); text-decoration: none;
  transition: gap .2s ease;
}
.security-tech-link:hover { gap: 11px; }
/* ===== Global deployment globe ===== */
.globe-section { position: relative; overflow: hidden; }
.globe-stage {
  display: grid; grid-template-columns: 440px 1fr; gap: 64px;
  align-items: center; margin-top: 8px;
}
.globe-wrap { position: relative; width: 440px; height: 440px; }
.globe-halo {
  position: absolute; left: 50%; top: 50%; width: 420px; height: 420px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(36,125,255,0.20), rgba(80, 120, 245,0.10) 52%, transparent 72%);
  filter: blur(30px);
}
.globe { position: relative; display: block; width: 100%; height: auto; }
.globe-canvas { position: relative; display: none; width: 100%; height: auto; aspect-ratio: 1; }
.gl-rim { stroke-width: 1.6; opacity: 0.85; }
.gl-lat, .gl-mer {
  fill: none; stroke: var(--border-strong); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.gl-mer { stroke: rgba(109,155,255,0.30); }
/* the dark radial fill reads as a solid blob on white, tint it instead */
[data-theme="light"] .gl-sphere { fill: rgba(36,125,255,0.05); }
[data-theme="light"] .gl-lat { stroke: rgba(7,9,26,0.13); }
[data-theme="light"] .gl-mer { stroke: rgba(36,125,255,0.26); }
[data-theme="light"] .globe-halo { opacity: 0.55; }

.globe-lede {
  margin: 0 0 30px; max-width: 520px;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.5;
  font-weight: 600; letter-spacing: -0.02em; color: var(--text);
}
.globe-figures {
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 40px;
  justify-content: start; padding: 26px 0; margin-bottom: 24px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.globe-fig { display: flex; flex-direction: column; gap: 6px; }
.globe-fig-num {
  font-size: clamp(38px, 4.4vw, 56px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1; color: var(--text);
}
.globe-fig-num span { font-size: 0.48em; }
.globe-fig-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.005em;
  text-transform: none; color: var(--text-muted);
}
.globe-foot { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }

@media (max-width: 1080px) {
  .globe-stage { grid-template-columns: 360px 1fr; gap: 44px; }
  .globe-wrap { width: 360px; height: 360px; }
  .globe-halo { width: 340px; height: 340px; }
}
@media (max-width: 860px) {
  .globe-stage { grid-template-columns: 1fr; gap: 32px; justify-items: center; text-align: center; }
  .globe-wrap { width: min(340px, 82vw); height: auto; aspect-ratio: 1; }
  .globe-halo { width: 88%; height: 88%; }
  .globe-lede, .globe-foot { margin-left: auto; margin-right: auto; }
  .globe-figures { justify-content: center; gap: 0 30px; }
}
@media (max-width: 460px) {
  .globe-figures { grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-canvas { opacity: 1; }
}

/* ===== Certified hardware ===== */
.chw-status {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.chw-certified  { background: rgba(52,201,138,0.12); }
.chw-progress   { color: var(--brand-blue); background: var(--brand-soft); }
.chw-pending    { background: rgba(217,164,65,0.13); }
.chw-deprecated { color: var(--text-faint); background: var(--bg-deep); }
.chw-notes { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; align-items: start; }
.chw-note {
  padding: 26px 28px; border-radius: 12px;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.chw-note-flag { border-color: rgba(217,164,65,0.32); background: linear-gradient(180deg, rgba(217,164,65,0.05), transparent 60%), var(--bg-elevated); }
.chw-note h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.chw-note p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.chw-note p:last-child { margin-bottom: 0; }
.chw-note strong { color: var(--text); font-weight: 600; }
.chw-note a { color: var(--brand-text); font-weight: 600; }
.chw-embed {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--bg-elevated);
}
.chw-airtable { display: block; width: 100%; height: 820px; border: 0; background: transparent; }
@media (max-width: 900px) { .chw-notes { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .chw-airtable { height: 640px; } }

/* ===== Reference architecture diagram + capability index ===== */
.arch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.arch-svg { display: block; width: 100%; min-width: 860px; height: auto; }
.arch-band-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.07em; fill: var(--brand-text);
}
.arch-item { fill: var(--bg-elevated); stroke: var(--border-strong); stroke-width: 1; }
.arch-item-t { font-size: 13.5px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.arch-item-s { font-size: 10.5px; fill: var(--text-muted); text-anchor: middle; }
.arch-note { font-size: 11.5px; text-anchor: middle; }
.arch-int { font-size: 11.5px; text-anchor: middle; }
.arch-conn-t { font-size: 10.5px; }
.arch-caption { margin: 18px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); max-width: 880px; }

.capx-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 12px; }
.capx { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13.5px; }
.capx thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-deep); text-align: left; padding: 13px 18px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.005em; text-transform: none;
  color: var(--text-muted); border-bottom: 1px solid var(--border-strong);
}
.capx tbody th, .capx tbody td { padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.capx tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.capx tbody td { color: var(--text-muted); line-height: 1.55; }
.capx tbody tr:last-child th, .capx tbody tr:last-child td { border-bottom: none; }
.capx-group th {
  background: var(--bg-deep); color: var(--brand-text) !important;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; white-space: normal !important;
}
.capx tbody tr:not(.capx-group):hover { background: var(--bg-elevated); }
.capx-n, .capx-c {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.capx-n { background: var(--brand-soft); }
.capx-c { background: rgba(80, 120, 245,0.10); }
@media (max-width: 700px) { .capx { font-size: 13px; } .capx tbody th, .capx tbody td { padding: 11px 14px; } }

/* ===== Technical evaluation track ===== */
.tev-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.tev-formwrap {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; box-shadow:var(--shadow-lg);
}
@media (max-width: 900px) {
  .tev-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 520px) {
  .tev-formwrap { padding: 24px; }
}

/* ===== RFID in Practice, handheld broadcasting to two columns of topics ===== */
.rfp-stage {
  position: relative; margin-top: 40px;
  display: grid; grid-template-columns: 1fr 280px 1fr; gap: 0 64px; align-items: stretch;
}
.rfp-beam-layer { position: absolute; top: 0; bottom: 0; left: -64px; right: -64px; z-index: 0; pointer-events: none; }
.rfp-beams { display: block; width: 100%; height: 100%; }
.rfp-beam-track path { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.rfp-beam-live path {
  fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 30 100; animation: rfp-shoot 3.2s cubic-bezier(0.45,0,0.55,1) infinite;
}
/* Four beams now, two a side. These selectors and the delay order below are tied
   to the path count in the markup: change one and change both. */
.rfp-beam-live path:nth-child(-n+2) { stroke: url(#rfpL); }
.rfp-beam-live path:nth-child(n+3)  { stroke: url(#rfpR); }
.rfp-beam-live path:nth-child(1) { animation-delay: 0s; }
.rfp-beam-live path:nth-child(3) { animation-delay: 0.18s; }
.rfp-beam-live path:nth-child(2) { animation-delay: 0.36s; }
.rfp-beam-live path:nth-child(4) { animation-delay: 0.54s; }
@keyframes rfp-shoot {
  0%   { stroke-dashoffset: 130; opacity: 0; }
  10%  { opacity: 1; }
  68%  { opacity: 1; }
  78%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.rfp-col { position: relative; z-index: 1; display: grid; grid-template-rows: repeat(2, 1fr); gap: 0; }
.rfp-card {
  position: relative; margin: 9px 0;
  padding: 24px 26px 26px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.rfp-card:hover { transform: translateY(-3px); border-color: rgba(36,125,255,0.4); box-shadow:var(--shadow-lg); }
.rfp-card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--text); }
.rfp-card p { font-size: 13.5px; line-height: 1.62; color: var(--text-muted); margin: 0; }
.rfp-col-right .rfp-card .mini-ico { color: var(--brand-purple); background: rgba(80, 120, 245,0.10); }
/* the point where each beam lands on its card */
.rfp-card::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  transform: translateY(-50%); background: var(--brand-blue);
  box-shadow:0 0 0 4px rgba(7, 9, 26, 0.08);
}
.rfp-col-left .rfp-card::after  { right: -4.5px; }
.rfp-col-right .rfp-card::after { left: -4.5px; background: #8BA6FA; box-shadow:0 0 0 4px rgba(7, 9, 26, 0.08); }

.rfp-hub { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.rfp-hub::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(36,125,255,0.18), rgba(80, 120, 245,0.10) 45%, transparent 70%);
  filter: blur(26px);
}
.rfp-shot {
  position: relative; z-index: 2; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 26px 26px rgba(7, 9, 26, 0.30));
}
.rfp-ring {
  position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px;
  border-radius: 50%; border: 1.5px solid rgba(36,125,255,0.45); z-index: 1;
  opacity: 0; animation: rfp-ring 4.2s cubic-bezier(0.2,0.6,0.4,1) infinite;
}
.rfp-ring:nth-child(2) { animation-delay: 1.4s; border-color: rgba(92, 136, 255,0.4); }
.rfp-ring:nth-child(3) { animation-delay: 2.8s; border-color: rgba(140, 165, 255,0.35); }
@keyframes rfp-ring {
  0%   { transform: scale(0.5); opacity: 0.7; }
  70%  { opacity: 0.08; }
  100% { transform: scale(2.2); opacity: 0; }
}
@media (max-width: 1000px) {
  .rfp-stage { grid-template-columns: 1fr 210px 1fr; gap: 0 40px; }
  .rfp-beam-layer { left: -40px; right: -40px; }
  .rfp-ring { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
}
@media (max-width: 820px) {
  .rfp-stage { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .rfp-beam-layer { display: none; }
  .rfp-col { display: contents; }
  .rfp-card { margin: 0; }
  .rfp-card::after { display: none; }
  .rfp-hub { grid-column: 1 / -1; order: -1; margin-bottom: 22px; }
  .rfp-shot { width: 168px; margin: 0 auto; }
  .rfp-ring { width: 140px; height: 140px; margin: -70px 0 0 -70px; }
}
@media (max-width: 560px) { .rfp-stage { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .rfp-ring { animation: none; opacity: 0; }
  .rfp-beam-live path { animation: none; stroke-dasharray: none; opacity: 0.45; }
}

/* RFID journey connectors between chapters */
.journey-link {
  position: relative; width: 2px; height: 108px; margin: -96px auto -12px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
  overflow: hidden; z-index: 1;
}
.journey-pulse {
  position: absolute; left: -2px; top: -14px; width: 6px; height: 14px; border-radius: 3px;
  background: var(--brand-blue);
  animation: journeyPulse 2.4s ease-in-out infinite;
}
@keyframes journeyPulse { 0% { top: -14px; opacity: 0; } 25% { opacity: 1; } 100% { top: 108px; opacity: 0; } }

/* RFID story chapter chips */
.story-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-muted); margin-bottom: 16px;
  padding: 8px 16px 8px 8px; border-radius: 100px;
  background: var(--bg-deep); border: 1px solid var(--border-strong);
}
.story-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: #fff; background: var(--brand-blue);
}

/* RFID capabilities, photo bento */

/* ============ RFID DEVICE SHOT (Mobile POS) ============ */
.rfid-shot {
  position: relative;
  padding: 36px 28px 20px;
  border-radius: var(--radius);
  background:
    radial-gradient(110% 130% at 50% 0%, var(--brand-soft), transparent 60%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow:0 20px 26px rgba(7,9,26,0.08);
}
.rfid-shot img { width: 100%; height: auto; display: block; }
.rfid-shot-caption {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-faint); text-align: center; font-weight: 600;
}

/* ============ CAPABILITY COLUMNS (grouped, all visible) ============ */
.capcol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.capcol {
  background:
    radial-gradient(120% 90% at 0% 0%, var(--brand-soft), transparent 55%),
    var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 8px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.capcol:hover { transform: translateY(-5px); border-color: var(--brand-blue); box-shadow:0 26px 26px -26px rgba(7, 9, 26, 0.3); }
.capcol-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: #fff;
  background: var(--brand-blue);
  padding: 8px 14px; border-radius: 100px;
  width: fit-content;
  margin-bottom: 8px;
}
.capcol-head i { font-size: 15px; }
.capcol-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.capcol-item:last-child { border-bottom: none; }
.capcol-item h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 6px;
}
.capcol-item h3 i {
  font-size: 15px; color: #fff; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-blue);
  box-shadow:0 8px 18px -8px rgba(7, 9, 26, 0.3);
}
.capcol-item p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .capcol-grid { grid-template-columns: 1fr; } }

/* ============ INTEGRATION PIPELINE (OMS) ============ */
.intg {
  padding: 60px 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.intg::before {
  content: ''; position: absolute; top: -180px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, var(--brand-soft), transparent);
}
.intg-head { text-align: center; margin-bottom: 56px; position: relative; z-index: 1; }
.intg-title {
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.03em;
  line-height: 1.1; margin: 10px 0 0;
}
.intg-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
/* connector line running through the dots */
.intg-grid::before {
  content: ''; position: absolute; top: 0; left: 6%; right: 6%; height: 3px;
  background: var(--gradient); border-radius: 3px;
  background-size: 200% 100%;
  animation: intgFlow 4s linear infinite;
}
@keyframes intgFlow { from { background-position: 0% 0; } to { background-position: -200% 0; } }
.intg-card {
  position: relative;
  margin-top: 26px;
  padding: 30px 24px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  box-shadow:0 10px 26px rgba(7,9,26,0.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.intg-card:hover { transform: translateY(-4px); box-shadow:0 18px 26px rgba(7,9,26,0.1); }
.intg-dot {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand-blue);
  border: 3px solid var(--bg-deep);
  box-shadow:0 0 0 3px rgba(7, 9, 26, 0.28);
}
.intg-photo {
  height: 130px; margin: -6px -6px 16px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);
}
.intg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.intg-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.intg-card p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .intg-grid { grid-template-columns: repeat(2, 1fr); }
  .intg-grid::before { display: none; }
  .intg-dot { display: none; }
  .intg-card { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .intg-grid::before { animation: none; } }

/* ============ COMPETITIVE EDGE (Inventory Control) ============ */
.edge-card {
  display: flex; flex-direction: column;
  padding: 24px 20px 20px;
  border-radius: 11px;
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(135deg, rgba(36,125,255,0.5), rgba(80, 120, 245,0.35), rgba(47, 88, 214,0.5)) border-box;
  border: 1.5px solid transparent;
  box-shadow:0 14px 26px rgba(7,9,26,0.07);
  transition: transform .22s ease, box-shadow .22s ease;
}
.edge-card:hover { transform: translateY(-5px); box-shadow:0 24px 26px rgba(7,9,26,0.13); }
.edge-card h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.edge-card p { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; margin: 0 0 16px; }

/* ============ SCROLL REVEAL (sitewide) ============ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.6, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================
   DESIGN ELEVATION 2, signature atmosphere & editorial details
   ===================================================== */

/* --- Aurora field behind heroes (replaces flat radial) --- */
.hero-glow {
  background: none;
}
.hero-glow::before, .hero-glow::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55;
}
.hero-glow::before {
  width: 780px; height: 520px; top: 40px; left: -140px;
  background: radial-gradient(closest-side, rgba(36,125,255,0.55), transparent 70%);
  animation: aurora1 16s ease-in-out infinite alternate;
}
.hero-glow::after {
  width: 720px; height: 560px; top: -80px; right: -180px;
  background: radial-gradient(closest-side, rgba(47, 88, 214,0.38), transparent 70%);
  animation: aurora2 19s ease-in-out infinite alternate;
}
@keyframes aurora1 { from { transform: translate(0,0) scale(1); } to { transform: translate(90px,40px) scale(1.12); } }
@keyframes aurora2 { from { transform: translate(0,0) scale(1.08); } to { transform: translate(-70px,50px) scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .hero-glow::before, .hero-glow::after { animation: none; } }

/* --- Film grain over heroes: kills the "flat vector" feel --- */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.55 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .hero::after { opacity: 0.35; }

/* --- Kinetic marquee divider --- */

/* =====================================================
   RETAIL DNA, printed-by-our-own-POS design language
   ===================================================== */

/* --- POS receipt (metrics) --- */
.rcpt-wrap { display: flex; justify-content: center; position: relative; }

/* Payments: terminal + tender list */
.pay-stage { display: grid; grid-template-columns: 272px 1fr; gap: 40px; align-items: start; margin-top: 30px; }
.pay-term { position: sticky; top: 100px; }
.pay-term-body {
  background: linear-gradient(180deg, #23273a 0%, #14172a 100%);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 18px 18px 10px 10px;
  padding: 14px 14px 16px; box-shadow:0 26px 26px -22px rgba(7,9,26,0.30);
}
.pay-term-screen {
  background: #0b0e1e; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
  padding: 14px 14px 16px; color: #fff;
}
.pay-term-top { display: flex; align-items: center; justify-content: space-between; }
.pay-term-brand { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); }
.pay-term-sig { display: flex; gap: 5px; font-size: 11px; color: rgba(255,255,255,0.45); }
.pay-term-amount { margin-top: 14px; }
.pay-term-lbl { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.pay-term-val { display: block; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; margin-top: 3px; }
.pay-term-nfc { position: relative; height: 74px; display: flex; align-items: center; justify-content: center; margin: 12px 0 6px; }
.pay-term-nfc i { font-size: 30px; color: var(--brand-blue); position: relative; z-index: 1; }
.pay-nfc-ring {
  position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(36,125,255,0.55); animation: payPulse 2.4s ease-out infinite;
}
.pay-nfc-ring-2 { animation-delay: 1.2s; }
@keyframes payPulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
.pay-term-prompt { text-align: center; font-size: 11.5px; color: rgba(255,255,255,0.72); }
.pay-term-methods { display: flex; justify-content: center; gap: 5px; margin-top: 11px; }
.pay-term-methods span {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em;
  padding: 3px 7px; border-radius: 4px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.62);
}
.pay-term-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 13px; }
.pay-term-keys span { height: 17px; border-radius: 4px; background: rgba(255,255,255,0.07); }
.pay-term-keys .k-red { background: rgba(239,68,68,0.30); }
.pay-term-keys .k-green { background: rgba(34,197,94,0.32); }
.pay-term-base {
  height: 9px; margin: 0 16px; border-radius: 0 0 10px 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-top: none;
}
.pay-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px;
}
.pay-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--border); position: relative;
}
.pay-row:nth-child(1), .pay-row:nth-child(2) { padding-top: 0; }
.pay-row:nth-child(5), .pay-row:nth-child(6) { border-bottom: none; }
.pay-row-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--brand-blue); background: var(--brand-soft);
  border: 1px solid rgba(36,125,255,0.22);
}
.pay-row:nth-child(even) .pay-row-ico { color: var(--brand-purple); background: rgba(80, 120, 245,0.10); border-color: rgba(80, 120, 245,0.22); }
.pay-row-text h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; margin: 2px 0 5px; color: var(--text); }
.pay-row-text p { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }
@media (prefers-reduced-motion: reduce) { .pay-nfc-ring { animation: none; } }
@media (max-width: 1100px) { .pay-list { grid-template-columns: 1fr; gap: 0; } .pay-row:nth-child(2) { padding-top: 16px; } .pay-row:nth-child(5) { border-bottom: 1px solid var(--border); } }
@media (max-width: 900px) {
  .pay-stage { grid-template-columns: 1fr; gap: 32px; }
  .pay-term { position: static; max-width: 272px; margin: 0 auto; }
}

/* API console illustration */

/* --- Register annotations on hero devices --- */

/* =====================================================
   EDITORIAL LAYOUT SYSTEM, structural redesign
   ===================================================== */

/* --- Editorial hero: full-width display type, devices overlap --- */

/* =====================================================
   CINEMA GRAMMAR, iPad-Pro-style chapters & ink scenes
   ===================================================== */

/* --- Ink scene: branded dark canvas --- */
.scene-ink {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(36,125,255,0.20), transparent 60%),
    radial-gradient(80% 60% at 88% 12%, rgba(47, 88, 214,0.16), transparent 60%),
    #06070f;
  color: #eef1fb;
}
.scene-ink .hero-bg { opacity: 0.35; }

/* --- Chapter headers (Apple statement style) --- */
.ch-eyebrow {
  display: block; text-align: center;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: -0.01em;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 14px;
}
.scene-ink .ch-eyebrow {
  background: linear-gradient(90deg, #6aa8ff, #8CA5FF, #8CADFF);
  -webkit-background-clip: text; background-clip: text;
}
.ch-title {
  text-align: center;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600; letter-spacing: -0.03em; line-height: 0.96;
  margin: 0 auto 26px; max-width: 1120px;
  color: var(--text);
}
.scene-ink .ch-title { color: #ffffff; }
.ch-para {
  text-align: center; max-width: 1140px; margin: 0 auto;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--text-muted);
}
.scene-ink .ch-para { color: rgba(238,241,251,0.72); }

/* --- Apple-style spec numerals row --- */

/* --- Ink chapter highlights (2-col, replaces bullets on ink) --- */

/* =====================================================
   SITEWIDE CINEMA, every hero becomes an ink scene
   ===================================================== */
.hero {
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(36,125,255,0.20), transparent 60%),
    radial-gradient(80% 60% at 88% 12%, rgba(47, 88, 214,0.16), transparent 60%),
    #06070f;
  color: #eef1fb;
}
main > .hero:first-child { margin-top: -85px; padding-top: 230px; }
.hero .hero-bg { opacity: 0.35; }
.hero h1 { color: #ffffff; }
.hero h1 .accent, .hero h1 .friction { color: #6aa8ff; }
.callout { color: #6aa8ff; }
[data-theme="light"] .callout { color: var(--brand-text); }
.hero .hero-sub { color: rgba(238,241,251,0.75); }
.hero .btn-ghost {
  background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.25);
  box-shadow:none;
}
.hero .btn-ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Stat ticker fuses with the ink hero above it */
.ticker {
  background: #06070f; color: #eef1fb;
  margin-top: 0;
}
.ticker-inner {
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: none;
}
.ticker .gradient-text, .scene-ink .gradient-text {
  background: linear-gradient(90deg, #6aa8ff 0%, #8CA5FF 55%, #9BB4FF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ticker-label { color: rgba(238,241,251,0.6); }
/* The ticker used to be ink-dark in both themes, which put a black slab across the
   top of every light page. In light mode the band now carries the page ground with
   a wash behind it and the figures sit on a raised white plate, so the numbers read
   as the loudest thing on the screen rather than the darkest. */
[data-theme="light"] .ticker {
  background:
    radial-gradient(85% 150% at 50% 0%, rgba(36,125,255,0.10), transparent 64%),
    var(--bg);
  color: var(--text);
}
[data-theme="light"] .ticker-inner {
  background:
    radial-gradient(120% 170% at 10% 0%, rgba(36,125,255,0.10), transparent 60%),
    radial-gradient(120% 170% at 90% 100%, rgba(47, 88, 214,0.08), transparent 60%),
    #ffffff;
  border-color: rgba(36,125,255,0.20);
  box-shadow: 0 34px 64px -40px rgba(9, 22, 58, 0.32);
}
[data-theme="light"] .ticker-item { border-right-color: rgba(9, 22, 58, 0.10); }
[data-theme="light"] .ticker-label { color: rgba(9, 22, 58, 0.62); }

/* Clean gradient eyebrows for all remaining section headers */
.section-header .section-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.5vw, 20px); font-weight: 600;
  letter-spacing: -0.01em; text-transform: none; 
  margin-bottom: 12px;
}

/* Smaller chapter title variant */
.ch-title-sm { font-size: clamp(34px, 4.6vw, 60px); }

/* =====================================================
   THE LIVE STORE: live ops feed, command deck, live map
   ===================================================== */

.lf-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 2px; font-size: 11.5px; line-height: 1.45;
  border-bottom: 1px dashed rgba(255,255,255,0.07);
  animation: lfIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.lf-row:last-child { border-bottom: none; }
@keyframes lfIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lf-time { color: rgba(223,230,255,0.45); font-size: 10px; letter-spacing: 0.04em; flex: none; }
.lf-text { color: rgba(238,241,251,0.88); }
.lf-text strong { color: #ffffff; font-weight: 600; }
.lf-tag {
  flex: none; margin-left: auto; font-size: 9px; font-weight: 600; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 100px;
}

/* --- Live world map --- */
.livemap-wrap { max-width: 980px; margin: 56px auto 0; }
.scene-ink .wm-c { fill: #1b2140; stroke: #0a0e20; }
.scene-ink .wm-live { stroke: rgba(255,255,255,0.18); }
.wm-city { fill: #ffffff; }
.wm-ping {
  fill: none; stroke: #8ab8ff; stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: wmPing 2.6s ease-out infinite;
}
.wm-city-g:nth-child(3n) .wm-ping { animation-delay: 0.9s; stroke: #A6A0FF; }
.wm-city-g:nth-child(3n+1) .wm-ping { animation-delay: 1.7s; }
@keyframes wmPing {
  0% { transform: scale(0.5); opacity: 0.9; }
  80% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wm-ping { animation: none; opacity: 0; } }

/* =====================================================
   LIVE STORE PHASE 2: ops strip, live scan, day timeline
   ===================================================== */

/* --- Live ops strip (page heroes) --- */
.live-strip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 34px; padding: 12px 20px;
  border-radius: 100px;
  background: rgba(13, 16, 32, 0.6);
  border: 1px solid rgba(255,255,255,0.13);

  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: rgba(238,241,251,0.6);
}
.ls-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; letter-spacing: 0.05em; color: #dfe6ff; font-size: 10.5px;
}
.ls-live .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ffffff;
  box-shadow:0 0 0 0 rgba(255,255,255,0.3); animation: wmPulse 2.2s infinite;
}
.live-strip strong { color: #ffffff; font-weight: 600; font-variant-numeric: tabular-nums; }
.ls-clock { color: rgba(238,241,251,0.4); }
@media (max-width: 700px) { .live-strip { border-radius: 10px; } .ls-clock { display: none; } }

/* --- A day in your store --- */
.day-now::after {
  background: var(--gradient); border-color: color-mix(in srgb, var(--brand-purple) 40%, var(--bg));
  box-shadow:0 0 0 5px rgba(7, 9, 26, 0.28);
}

/* --- Stat band (replaces boxed ticker) --- */
.statband { padding: 0; }

/* =====================================================
   PHOTO HERO, full-bleed photography with glass overlay
   ===================================================== */
.hero-photo {
  min-height: max(620px, 82vh);
  display: flex; align-items: stretch;
}
.hero-photo-compact { min-height: max(560px, 66vh); }
.hero-photo-compact .hero-photo-inner { justify-content: flex-start; }
.hero-photo-compact .hero-photo-title { font-size: clamp(42px, 5.4vw, 76px); }

/* Homepage OS headline: uniform title-case lockup with gradient callout */
.os-grad {
  background: var(--gradient);
  text-shadow: none;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* A light pass crosses the gradient words every few seconds. The highlight layer is
   stacked into the same clipped background, so nothing changes for browsers that
   ignore it. */
.hpos-hero .os-grad {
  background: linear-gradient(100deg, #4a90ff, #6B8CFF 30%, #6fa5ff 55%, #2F58D6 80%, #4a90ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: os-breathe 11s ease-in-out infinite;
}
@keyframes os-breathe {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}
/* Left-anchored contrast wedge so the headline reads over any photo */
.hero-photo .hero-photo-scrim::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(4,6,20,0.62) 0%, rgba(4,6,20,0.34) 38%, rgba(4,6,20,0.04) 60%, transparent 82%);
  pointer-events: none;
}
.hero-photo-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 38%;
  z-index: 0;
}
.hero-photo-scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(92deg, rgba(6,7,15,0.72) 0%, rgba(6,7,15,0.32) 46%, rgba(6,7,15,0.06) 68%),
    linear-gradient(to top, rgba(6,7,15,0.92) 0%, rgba(6,7,15,0.25) 34%, transparent 55%),
    linear-gradient(to bottom, rgba(6,7,15,0.85) 0px, rgba(6,7,15,0.55) 110px, rgba(6,7,15,0.28) 210px, rgba(6,7,15,0.1) 300px, transparent 400px);
}
/* Light mode: ease the scrim. Keep the left/bottom text zones readable, drop the heavy top band */
[data-theme="light"] .hero-photo-scrim {
  background:
    linear-gradient(92deg, rgba(6,7,15,0.72) 0%, rgba(6,7,15,0.34) 46%, rgba(6,7,15,0.06) 72%),
    linear-gradient(to top, rgba(6,7,15,0.78) 0%, rgba(6,7,15,0.18) 34%, transparent 55%),
    linear-gradient(to bottom, rgba(6,7,15,0.30) 0px, rgba(6,7,15,0.12) 140px, transparent 280px);
}
.hero-photo-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; padding-bottom: 56px;
}
.hero-photo-head { max-width: 720px; }
.hero-photo-title {
  font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 600; letter-spacing: -0.045em; line-height: 0.94;
  color: #ffffff; margin: 30px 0 0;
  text-shadow: 0 4px 40px rgba(0,0,0,0.35);
}
.hero-photo-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap; 
}
.hero-photo-foot .live-strip { margin-top: 0; }
.hero-photo-note .hero-cta { justify-content: flex-start; margin-bottom: 0; flex-wrap: nowrap; }
@media (max-width: 560px) { .hero-photo-note .hero-cta { flex-wrap: wrap; } }

/* Frosted glass transaction card */
@media (max-width: 1020px) {
  .hero-photo { min-height: 0; }
}

/* =====================================================
   REFERENCE HERO LAYOUT: left-aligned, sitewide
   ===================================================== */
.hero-inner { text-align: left; }
.hero-inner h1 { font-size: clamp(46px, 6.5vw, 92px); max-width: 1050px; }
.hero-inner .hero-sub { margin: 0 0 40px; max-width: 640px; }
.hero-inner .hero-cta { justify-content: flex-start; }

/* --- Nav blends into hero, solidifies on scroll --- */
.nav {
  background: transparent;
  border-bottom: 1px solid transparent;

  transition: background 0.35s ease, border-color 0.35s ease;
}
.nav .nav-inner { height: 84px; }
.nav .nav-links { gap: 8px; }
.nav.nav-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}
/* Light mode: never run the nav transparent over the dark hero photos. Keep the light bar */
[data-theme="light"] .nav {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom: 1px solid var(--border);
}

/* =====================================================
   CASE STUDY RAIL: photo cards with logos, hover reveal
   ===================================================== */
.cs-section { padding-bottom: 128px; }
.cs-rail-wrap { position: relative; margin-top: 64px; }
.cs-rail {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px max(32px, calc((100vw - var(--max-w)) / 2 + 32px)) 28px;
  scrollbar-width: none;
}
.cs-rail::-webkit-scrollbar { display: none; }
.cs-card {
  position: relative; flex: 0 0 auto;
  width: min(404px, 82vw); aspect-ratio: 3 / 4.1;
  border-radius: 12px; overflow: hidden;
  scroll-snap-align: start;
  background: var(--bg-elevated);
  box-shadow:0 24px 26px -18px rgba(0,0,0,0.3);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cs-card:hover { transform: translateY(-8px); }
.cs-card > img:first-child {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.cs-card:hover > img:first-child { transform: scale(1.05); }
.cs-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,14,0.92) 0%, rgba(5,6,14,0.45) 40%, rgba(5,6,14,0.08) 68%);
  transition: background 0.35s ease;
}
.cs-card:hover .cs-scrim {
  background: linear-gradient(to top, rgba(5,6,14,0.94) 0%, rgba(5,6,14,0.72) 55%, rgba(5,6,14,0.3) 100%);
}
/* The proof point is what makes someone open the card, so it sits on the
   photograph at rest rather than waiting for a hover, at a size that carries
   across the rail. The quote, attribution and link stay on hover, expanding
   above it from a collapsed grid row. */
.cs-body {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: 22px; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start;
}
/* A mark with internal detail cannot survive brightness(0) invert(1): the
   Hurricanes swirl flattened to a solid white oval, and left in its own colours
   the black wordmark disappeared into the photograph. It ships as a reversed
   asset instead, neutral darks turned white with the brand red kept, so this
   rule only has to skip the silhouette filter and seat it with a shadow. */
.cs-logo.cs-logo-color {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.65));
}
.cs-logo {
  max-width: 60%; max-height: 56px; width: auto; height: auto;
  margin-bottom: 14px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.cs-hover {
  display: grid; grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s ease;
}
.cs-card:hover .cs-hover,
.cs-card:focus-visible .cs-hover { grid-template-rows: 1fr; opacity: 1; }
.cs-hover-in { overflow: hidden; min-height: 0; }
.cs-hover p { font-size: 14.5px; line-height: 1.5; font-weight: 400; color: rgba(255,255,255,0.95); margin: 0 0 12px; }
.cs-result {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: -0.01em; text-align: left;
  padding: 7px 12px; border-radius: 100px;
  /* white on #0b57d0 is 6.4:1, so it holds at this size over any photograph */
  background: #0b57d0; color: #ffffff;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.5);
}
.cs-result i { font-size: 15px; color: #ffffff; flex: 0 0 auto; }
.cs-results { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cs-person { font-size: 11.5px; display: block; color: rgba(255,255,255,0.65); margin-bottom: 4px; }
.cs-read {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #8ab8ff; margin-top: 8px;
}
.cs-card-more {
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(36,125,255,0.35), transparent 60%),
    linear-gradient(150deg, #101430, #06070f);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: flex-end;
}
.cs-more-count {
  font-family: var(--font-display); font-size: 64px; font-weight: 600; letter-spacing: -0.04em;
  background: linear-gradient(90deg, #6aa8ff, #8CA5FF);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cs-more-label { font-size: 15px; color: rgba(238,241,251,0.8); font-weight: 600; margin: 6px 0 10px; max-width: 200px; }
.cs-more-count.cs-more-phrase { font-size: 32px; line-height: 1.15; max-width: 240px; }
.cs-video, .csx-card .cs-video {
  position: absolute; top: 50%; left: 50%;
  height: 128%; aspect-ratio: 16 / 9; width: auto; min-width: 104%;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
}
.cs-video-on { opacity: 1; }
.cs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  border: 1px solid var(--border-strong);
  color: var(--text); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow:0 14px 26px -8px rgba(0,0,0,0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}
.cs-arrow:hover { transform: translateY(-50%) scale(1.08); }
.cs-arrow-prev { left: 18px; }
.cs-arrow-next { right: 18px; }
@media (max-width: 700px) { .cs-arrow { display: none; } }

/* =====================================================
   INCLUDED TILES: visual tile + pill label, one row
   ===================================================== */

/* =====================================================
   DUO CARDS, editorial two-up (121 + RFID)
   ===================================================== */
.duo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: 64px auto 0;
}
.duo-card {
  display: flex; flex-direction: column;
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(135deg, rgba(36,125,255,0.55), rgba(80, 120, 245,0.35), rgba(47, 88, 214,0.55)) border-box;
  border: 1.5px solid transparent;
  border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}
.duo-card:hover { transform: translateY(-6px); box-shadow:0 26px 26px -20px rgba(7, 9, 26, 0.3); }
.duo-img {
  aspect-ratio: 16 / 10.5; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.duo-img-tile {
  background:
    radial-gradient(120% 110% at 50% 0%, var(--brand-soft), transparent 65%),
    var(--bg-deep);
  padding: 26px 30px 0;
}
.duo-img img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.duo-body { padding: 26px 28px 28px; }
.duo-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
}
.duo-body h3 {
  font-size: clamp(20px, 2vw, 25px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
  margin: 0 0 10px; color: var(--text);
}
.duo-body p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; }
.duo-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.duo-tags span {
  font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 100px;
}
.duo-tags .t-ai { background: rgba(36,125,255,0.16); color: #8ab8ff; border: 1px solid rgba(36,125,255,0.3); }
.duo-tags .t-plus { background: rgba(47, 88, 214,0.16); color: #A6A0FF; border: 1px solid rgba(47, 88, 214,0.3); }
.duo-tags .t-core { background: rgba(255,255,255,0.08); color: #e6ebfa; border: 1px solid rgba(255,255,255,0.22); }
@media (max-width: 1020px) {
  .duo-grid { grid-template-columns: 1fr; max-width: 560px; }
  .duo-card-flip { flex-direction: column-reverse; }
}

/* =====================================================
   POS FAN, screens fanned like a hand of cards
   ===================================================== */

/* --- Wide centered fan (reference layout, iPads kept) --- */
.fanw-stage { position: relative; margin-top: 48px; }
.fanw { position: relative; height: clamp(230px, 30vw, 430px); }
.fanw-card {
  position: absolute; left: 50%; top: 0;
  width: clamp(240px, 33vw, 470px);
  filter: drop-shadow(0 26px 50px rgba(0,0,0,0.45));
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fanw-card:nth-child(1), .fanw-card:nth-child(7) { transition-delay: 0.10s; }
.fanw-card:nth-child(2), .fanw-card:nth-child(6) { transition-delay: 0.06s; }
.fanw-card:nth-child(3), .fanw-card:nth-child(5) { transition-delay: 0.03s; }
.fanw-card:nth-child(1) { transform: translateX(-50%) translateX(-118%) translateY(13%) rotate(-14deg); z-index: 1; }
.fanw-card:nth-child(2) { transform: translateX(-50%) translateX(-79%)  translateY(6%)  rotate(-9deg);  z-index: 2; }
.fanw-card:nth-child(3) { transform: translateX(-50%) translateX(-40%)  translateY(1.5%) rotate(-4deg); z-index: 3; }
.fanw-card:nth-child(4) { transform: translateX(-50%) rotate(0deg); z-index: 4; }
.fanw-card:nth-child(5) { transform: translateX(-50%) translateX(40%)   translateY(1.5%) rotate(4deg);  z-index: 3; }
.fanw-card:nth-child(6) { transform: translateX(-50%) translateX(79%)   translateY(6%)  rotate(9deg);  z-index: 2; }
.fanw-card:nth-child(7) { transform: translateX(-50%) translateX(118%)  translateY(13%) rotate(14deg); z-index: 1; }
.fanw-stage:hover .fanw-card:nth-child(1) { transform: translateX(-50%) translateX(-127%) translateY(15%) rotate(-16deg); }
.fanw-stage:hover .fanw-card:nth-child(2) { transform: translateX(-50%) translateX(-85%)  translateY(7%)  rotate(-10deg); }
.fanw-stage:hover .fanw-card:nth-child(3) { transform: translateX(-50%) translateX(-43%)  translateY(2%)  rotate(-4.5deg); }
.fanw-stage:hover .fanw-card:nth-child(5) { transform: translateX(-50%) translateX(43%)   translateY(2%)  rotate(4.5deg); }
.fanw-stage:hover .fanw-card:nth-child(6) { transform: translateX(-50%) translateX(85%)   translateY(7%)  rotate(10deg); }
.fanw-stage:hover .fanw-card:nth-child(7) { transform: translateX(-50%) translateX(127%)  translateY(15%) rotate(16deg); }

.fan-bubble {
  position: absolute; z-index: 8;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
  padding: 9px 16px; border-radius: 100px;
  color: #ffffff;
  box-shadow:0 14px 26px -10px rgba(0,0,0,0.3);
}
.fan-bubble::after {
  content: ''; position: absolute; bottom: -5px; left: 22px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: inherit; border-radius: 2px;
}
.fan-bubble-left { top: -20px; left: 16%; background: var(--brand-blue); transform: rotate(-4deg); }
.fan-bubble-right { top: -26px; right: 15%; background: var(--brand-purple); transform: rotate(4deg); }
.fan-bubble-right::after { left: auto; right: 22px; }
.fan-bubble .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #e6ebfa;
  box-shadow:0 0 0 0 rgba(111,240,192,0.3); animation: wmPulse 2.2s infinite;
}
@media (max-width: 760px) {
  .fanw-card:nth-child(1), .fanw-card:nth-child(7) { display: none; }
  .fanw { height: 44vw; }
  .fanw-card { width: 38vw; }
}
@media (prefers-reduced-motion: reduce) {
  .fanw-card { transition: none; }
  .fan-bubble .pulse-dot { animation: none; }
}

/* Fan opens from a stacked deck when scrolled into view (video reference).
   Keyed to the reveal system: no-JS / reduced-motion users see the open fan. */
.fanw.reveal .fanw-card { opacity: 1; }
.fanw.reveal:not(.in-view) .fanw-card {
  transform: translateX(-50%) translateY(4%) rotate(0deg);
}
.fanw.reveal { opacity: 1; transform: none; }

/* =====================================================
   OUTCOMES BENTO, quiet metric cards + tall accent card
   ===================================================== */
.bento-head { max-width: 880px; margin-bottom: 48px; }
.fine-note {
  margin: 18px 0 0; max-width: 620px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-faint);
  padding-left: 14px; border-left: 2px solid var(--border-strong);
}
.bento-note {
  margin: 22px 0 0; max-width: 1200px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-faint);
  font-style: italic;
}
.bento-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid transparent;
  border: 1.5px solid transparent;
  margin-bottom: 22px;
}
.bento-badge i { font-size: 15px; }
.bento-title {
  font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08;
  margin: 0 0 26px; color: var(--text);
}
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  grid-template-rows: repeat(2, minmax(230px, auto));
  gap: 18px;
}
.bento-card {
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: inherit;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}
.bento-card:hover { transform: translateY(-5px); }
.bento-tint {
  background:
    radial-gradient(130% 120% at 20% 0%, var(--brand-soft), transparent 65%),
    var(--bg-elevated);
}
.bento-num {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 60px); font-weight: 600; letter-spacing: -0.04em; line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: auto; padding-bottom: 32px;
}
.bento-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.bento-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin: 0; }
.bento-accent {
  grid-column: 3; grid-row: 1 / span 2;
  justify-content: flex-start;
  background: linear-gradient(150deg, #1a56f0 0%, #247DFF 35%, #5078F5 100%);
  border: none;
  box-shadow:0 26px 26px -22px rgba(7, 9, 26, 0.3);
}
.bento-accent h3 {
  font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12;
  color: #ffffff; margin: 6px 0 16px;
}
.bento-accent p { color: rgba(255,255,255,0.82); font-size: 15px; line-height: 1.6; }
.bento-accent:hover { transform: translateY(-5px); box-shadow:0 26px 26px -24px rgba(7, 9, 26, 0.3); }
.bento-more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: #ffffff; color: #1a56f0;
  font-size: 13.5px; font-weight: 600;
  padding: 11px 20px; border-radius: 100px;
}
@media (max-width: 960px) {
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .bento-accent { grid-column: 1 / -1; grid-row: auto; min-height: 300px; }
}
@media (max-width: 560px) { .bento-grid { grid-template-columns: 1fr; } }

/* --- 3-card fan variant --- */
.fanw-3 .fanw-card { width: clamp(280px, 38vw, 540px); }
.fanw-3 .fanw-card:nth-child(1) { transform: translateX(-50%) translateX(-62%) translateY(7%) rotate(-9deg); z-index: 1; }
.fanw-3 .fanw-card:nth-child(2) { transform: translateX(-50%) rotate(0deg); z-index: 3; }
.fanw-3 .fanw-card:nth-child(3) { transform: translateX(-50%) translateX(62%) translateY(7%) rotate(9deg); z-index: 2; }
.fanw-stage:hover .fanw-3 .fanw-card:nth-child(1) { transform: translateX(-50%) translateX(-68%) translateY(8%) rotate(-11deg); }
.fanw-stage:hover .fanw-3 .fanw-card:nth-child(2) { transform: translateX(-50%) rotate(0deg); }
.fanw-stage:hover .fanw-3 .fanw-card:nth-child(3) { transform: translateX(-50%) translateX(68%) translateY(8%) rotate(11deg); }
.fanw-3.reveal:not(.in-view) .fanw-card { transform: translateX(-50%) translateY(4%) rotate(0deg); }
.fanw-3 { height: clamp(240px, 32vw, 460px); }
@media (max-width: 760px) {
  .fanw-3 .fanw-card:nth-child(1), .fanw-3 .fanw-card:nth-child(3) { display: block; }
  .fanw-3 .fanw-card { width: 52vw; }
  .fanw-3 { height: 48vw; }
}

/* --- Blog: real featured images --- */
.blog-idx-card { padding: 0 !important; overflow: hidden; }
.blog-idx-img { aspect-ratio: 16 / 9; overflow: hidden; }
.blog-idx-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.2,0.7,0.3,1); }
.blog-idx-card:hover .blog-idx-img img { transform: scale(1.04); }
.blog-idx-body { padding: 24px 26px 26px; }
.blog-post-hero {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* --- Also Included: text left, tile grid right --- */

/* =====================================================
   THE PROBLEM: shattered interface (text left, art right)
   ===================================================== */

/* --- The Problem: minimal broken-sync diagram --- */

/* Hero foot: CTA bottom-left when no live strip */
.hero-foot-left { justify-content: flex-start; }

/* ===== Stat figures: one size, one gradient, everywhere ===== */
:root { --stat-size: clamp(46px, 5.2vw, 68px); }
.ticker-value,
.statcard-value,
.globe-fig-num,
.bento-num {
  font-size: var(--stat-size);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* suffix units scale with the figure instead of a fixed px size */
.ticker-value span:not(.counter),
.statcard-value span:not(.counter),
.globe-fig-num span:not(.counter) { font-size: 0.42em !important; color: inherit; -webkit-text-fill-color: transparent; }
.ticker-value .counter, .statcard-value .counter, .globe-fig-num .counter { font-size: inherit; }
@media (max-width: 700px) { :root { --stat-size: clamp(36px, 9vw, 48px); } }

/* Direction indicator on a stat figure, replaces a minus sign */
/* stays inline so the parent's background-clip:text gradient paints the glyph */
.stat-dir { font-size: 0.74em; letter-spacing: -0.01em; margin-left: 0.06em; }
.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;
}

/* ===== Homepage hero: POS completing a sale ===== */
.hpos-hero { position: relative; overflow: hidden; padding: 0; }

/* device */
.hpos-stage { position: relative; justify-self: center; width: 100%; max-width: min(660px, 100%); }
/* The stage carves its own light: a dark pocket that separates the device from the
   photo behind it, and a blue key inside that pocket. */
.hpos-stage::before {
  content: ''; position: absolute; inset: -14% -18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 54% at 50% 48%, rgba(36, 125, 255, 0.17), transparent 72%),
    radial-gradient(72% 66% at 50% 50%, rgba(4, 6, 20, 0.55), transparent 78%);
}
.hpos-device {
  /* iPad Pro: flat aluminium band around a uniform black bezel, no home button */
  position: relative; z-index: 2; border-radius: 30px; padding: 13px;
  aspect-ratio: 4 / 3;   /* a real iPad, landscape */
  background: linear-gradient(#0a0a0d, #0a0a0d) padding-box, linear-gradient(160deg, #a3a7ae 0%, #7c8088 18%, #9ea1a8 40%, #6b6f77 62%, #a0a3aa 84%, #80848c 100%) border-box;
  border: 2px solid transparent;
  box-shadow:0 26px 26px -18px rgba(7, 9, 26, 0.30), 0 0 0 1px rgba(30,33,40,0.55), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.hpos-screen {
  border-radius: 15px; padding: 15px 16px 16px; background: var(--bg-elevated);
  border: 0;
}
[data-theme="light"] .hpos-screen { background: #fff; }
.hpos-shadow {
  position: absolute; left: 4%; right: 4%; bottom: -32px; height: 76px; z-index: 1;
  background: radial-gradient(ellipse at center, rgba(36,125,255,0.36), transparent 70%);
  filter: blur(30px);
}

/* The Sales Receipt screen, rebuilt to match the iPad product UI.
   Deliberately iOS-light inside the device, regardless of site theme. */
.hpos-screen.srx, [data-theme="light"] .hpos-screen.srx { background: #F2F2F7; color: #000; padding: 0; overflow: hidden; }

.srx-head {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; background: #F2F2F7; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.srx-close {
  width: 26px; height: 26px; border-radius: 50%; background: #E3E3E8;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #6c6c70; line-height: 1;
}
.srx-title { font-size: 16px; font-weight: 700; color: #000; letter-spacing: -0.01em; }
.srx-tab {
  margin-left: auto; padding: 5px 14px; border-radius: 8px;
  background: #fff; font-size: 12.5px; font-weight: 600; color: #000;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}

.srx-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; padding: 10px; }

/* cart column */
.srx-cart { background: #fff; border-radius: 12px; padding: 10px 12px 12px; min-width: 0; overflow: hidden; }
.srx-cols {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px;
  padding: 4px 4px 8px; border-bottom: 1px solid rgba(0,0,0,0.07);
  font-size: 10.5px; font-weight: 600; color: #6c6c70;
}
.srx-cols span:last-child { text-align: right; min-width: 74px; }
.srx-items { list-style: none; margin: 0; padding: 0; }
.srx-item {
  position: relative; display: grid; overflow: hidden;
  grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid rgba(0,0,0,0.05);
  background: #fff;
}
.srx-swatch { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(0,0,0,0.07); }
.srx-inm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.srx-inm strong { font-size: 12.5px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srx-inm em { font-style: normal; font-size: 10.5px; color: #8A8A8E; }
.srx-qty { font-size: 12.5px; color: #000; }
.srx-price { font-size: 12.5px; font-weight: 600; color: #000; text-align: right; min-width: 74px; font-variant-numeric: tabular-nums; }
.srx-price .srx-now { display: block; color: #34A853; font-weight: 600; }
.srx-price .srx-was { display: block; font-size: 10.5px; color: #8A8A8E; font-weight: 400; }

/* swipe actions revealed behind a row */
/* iOS-style reveal: the row holds still, its content slides off the left edge,
   and the actions come in from the right by exactly their own width. */
.srx-actions {
  position: absolute; right: 0; top: 4px; bottom: 4px; z-index: 0;
  display: flex; align-items: stretch; gap: 1px; border-radius: 8px; overflow: hidden;
  opacity: 0; transform: translateX(100%);
  transition: opacity .2s ease, transform .38s cubic-bezier(0.2,0.7,0.3,1);
}
.srx-item.is-swiped .srx-actions { opacity: 1; transform: none; }
.srx-act {
  display: flex; align-items: center; justify-content: center; width: 44px;
  font-style: normal; font-size: 9.5px; font-weight: 600; color: #fff; letter-spacing: -0.01em;
}
.srx-act-d { background: #0A84FF; }
.srx-act-x { background: #FF3B30; }
.srx-item .srx-swatch, .srx-item .srx-inm,
.srx-item .srx-qty, .srx-item .srx-price {
  position: relative; z-index: 1;
  transition: transform .38s cubic-bezier(0.2,0.7,0.3,1);
}
.srx-item.is-swiped .srx-swatch, .srx-item.is-swiped .srx-inm,
.srx-item.is-swiped .srx-qty, .srx-item.is-swiped .srx-price { transform: translateX(-89px); }

.srx-note {
  margin-top: 8px; padding: 8px 12px; border-radius: 9px;
  background: #DFF5E4; font-size: 11.5px; color: #1E7B37;
}
.srx-note span { font-weight: 700; }
.srx-note b { float: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* totals column, matching the right rail */
.srx-side { display: flex; flex-direction: column; gap: 7px; background: #fff; border-radius: 12px; padding: 10px; }
.srx-users { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 2px; }
.srx-user {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 4px; border-radius: 100px; background: #E9F1FE; min-width: 0;
}
.srx-av {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0A84FF; color: #fff; font-style: normal; font-size: 10px; font-weight: 600;
}
.srx-user span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.srx-user em { font-style: normal; font-size: 8.5px; color: #8A8A8E; }
.srx-user strong { font-size: 10.5px; font-weight: 600; color: #0A84FF; white-space: nowrap; }

.srx-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 10px; font-size: 12px; color: #000; min-height: 34px;
}
.srx-fill { background: #F2F2F7; }
.srx-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.srx-neg { color: #E5484D; }
.srx-blue { color: #0A84FF; }
.srx-plus {
  width: 18px; height: 18px; border-radius: 50%; border: 1.3px solid #0A84FF;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #0A84FF;
}
.srx-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.srx-pills span {
  padding: 8px 0; border-radius: 100px; background: #EEF5FE;
  text-align: center; font-size: 11.5px; color: #0A84FF;
}
.srx-step { display: inline-flex; border-radius: 100px; background: #C7C7CC; overflow: hidden; }
.srx-step i { font-style: normal; padding: 1px 10px; font-size: 12px; color: #1c1c1e; }
.srx-step i:first-child { border-right: 1px solid rgba(0,0,0,0.22); }
.srx-bagsx { margin-left: auto; font-size: 11px; }
.srx-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 10px 2px; font-size: 14px; font-weight: 700; color: #000;
}
.srx-total b { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.srx-pay {
  display: block; width: 100%; margin-top: 4px; padding: 12px 0;
  border: 0; border-radius: 100px; background: #34C759;
  color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.01em;
  cursor: default; transition: transform .18s ease, background .3s ease, opacity .3s ease, box-shadow .3s ease;
}
/* Deep squash on press, then the paid state lands with a spring and a green shockwave.
   Exaggerated on purpose: this is the payoff of the whole sequence. */
.srx-pay.is-pressed { transform: scale(0.90); background: #27A34A; }
.srx-pay.is-paid { background: #1F9E45; animation: srx-paid-pop .7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes srx-paid-pop {
  0%   { transform: scale(0.90); box-shadow:0 0 0 0 rgba(52, 199, 89, 0.55); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); box-shadow:0 0 0 26px rgba(52, 199, 89, 0); }
}

/* sequence states: armed rewinds, steps arrive */
.hpos-armed [data-srx-item] { opacity: 0; transform: translateY(14px) scale(0.985); }
.hpos-armed [data-srx-item].is-on {
  opacity: 1; transform: none;
  /* back-out ease: the row overshoots a touch and settles, so each landing reads as a
     real gesture rather than a fade */
  transition: opacity .38s ease, transform .55s cubic-bezier(0.34, 1.45, 0.5, 1);
}
.hpos-armed [data-srx-note] { opacity: 0; transform: translateY(6px) scale(0.97); }
.hpos-armed [data-srx-note].is-on {
  opacity: 1; transform: none;
  transition: opacity .3s ease, transform .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* one green pulse on the scarf row the moment its discount lands */
.hpos-armed [data-srx-scarf].is-disc { animation: srx-disc-pulse .65s ease; }
@keyframes srx-disc-pulse {
  0% { background: rgba(52, 199, 89, 0); }
  30% { background: rgba(52, 199, 89, 0.16); }
  100% { background: rgba(52, 199, 89, 0); }
}
.hpos-armed .srx-pay { opacity: 0.4; }
.hpos-armed.hpos-ready .srx-pay { opacity: 1; }
.srx-price .srx-plain { display: none; }
.hpos-armed [data-srx-scarf]:not(.is-disc) .srx-plain { display: block; }
.hpos-armed [data-srx-scarf]:not(.is-disc) .srx-now,
.hpos-armed [data-srx-scarf]:not(.is-disc) .srx-was { display: none; }

/* our annotation, outside the product screen */
.hpos-annot {
  position: absolute; right: 14px; top: -15px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  font-size: 12px; font-weight: 500; letter-spacing: -0.005em;
  color: rgba(255,255,255,0.9); background: rgba(18, 20, 34, 0.72);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:0 18px 26px -20px rgba(7,9,26,0.5);
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.hpos-annot.is-on { opacity: 1; transform: none; }
@media (max-width: 520px) { .hpos-annot { right: 8px; font-size: 9.5px; padding: 6px 10px; } }

@media (max-width: 1040px) {
  .hpos-stage { max-width: min(620px, 100%); margin: 0 auto; }
}
@media (max-width: 520px) {
  .hpos-screen { padding: 15px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hpos-armed [data-at] { opacity: 1; transform: none; }
}

/* ===== Homepage hero: overrides that must beat .hero h1 and the global first-hero padding ===== */
main > .hero.hpos-hero:first-child { margin-top: -85px; padding-top: 112px; }

/* the store behind the copy, fading out toward the device */
.hpos-hero .hero-bg { opacity: 0.18; }
.hpos-hero .hero-glow { display: none; }

@media (max-width: 1040px) {
  main > .hero.hpos-hero:first-child { padding-top: 104px; }
}

/* product thumbnails on the cart lines */
.srx-swatch {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; 
}
.srx-swatch svg { width: 88%; height: 88%; display: block; }
.srx-swatch { background: #EFEFF2; }

/* narrow screens: stack the cart above the totals so product names stay whole */
@media (max-width: 620px) {
  .srx-body { grid-template-columns: 1fr; gap: 8px; }
  .srx-inm strong { white-space: normal; }
}

/* ===== Logo carousels: grab and slide ===== */
.logos-marquee.is-draggable {
  overflow-x: auto; overflow-y: hidden;
  cursor: grab; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.logos-marquee.is-draggable::-webkit-scrollbar { display: none; }
.logos-marquee.is-dragging { cursor: grabbing; }
/* the keyframe drift is replaced by scrollLeft, so switch it off */
.logos-marquee.is-draggable .logos-track,
.logos-marquee.is-draggable .logos-track:hover { animation: none; }
.logos-marquee.is-draggable .logo-slot,
.logos-marquee.is-draggable .logo-slot img {
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}

/* Leadership. Headshots are supplied as light circular cut-outs, so the disc is part of the art. */
.ldr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ldr-card {
  display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: start;
  padding: 26px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ldr-card:hover { border-color: rgba(36,125,255,0.4); transform: translateY(-2px); }
.ldr-shot {
  width: 112px; height: 112px; border-radius: 50%; object-fit: cover; display: block;
  background: #eef1f6;
}
.ldr-name { margin: 4px 0 2px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.ldr-role {
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0.005em;
  color: var(--brand-text); margin-bottom: 12px;
}
.ldr-quote { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); font-style: italic; }
.ldr-card.is-lead { grid-column: 1 / -1; }
.ldr-card.is-lead .ldr-shot { width: 148px; height: 148px; }
.ldr-card.is-lead { grid-template-columns: 148px 1fr; }
.ldr-card.is-lead .ldr-quote { font-size: 16px; }
@media (max-width: 900px) { .ldr-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ldr-card, .ldr-card.is-lead { grid-template-columns: 1fr; gap: 16px; }
  .ldr-shot, .ldr-card.is-lead .ldr-shot { width: 96px; height: 96px; }
}

/* Team mosaic. A dense wall of faces, the point being how many there are. */
/* Team mosaic. Flex with a centred last row rather than fixed columns: the face
   count changes whenever someone joins or leaves, and a centred remainder reads as
   deliberate at any count. Fixed columns only look right when the count happens to
   divide by them, which it did at 24 and does not at 25.

   Faces are full colour at rest. They were desaturated until hover, which made a
   wall of people look muted and greyed-out. */
.tmos { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tmos img {
  /* Nine across so the current face count lands in three lines, which is the
     shape asked for. If the count changes, this divisor is what to revisit:
     ceil(count / 3). */
  flex: 0 0 calc((100% - 9 * 10px) / 10);
  /* Flex items default to min-width:auto, which for a replaced element is its
     intrinsic width. Without this the 420px source wins and the basis is ignored. */
  min-width: 0;
  aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block;
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tmos img:hover { transform: translateY(-3px) scale(1.03); box-shadow:0 18px 34px -20px rgba(0,0,0,0.8); }
@media (max-width: 1100px) { .tmos img { flex-basis: calc((100% - 6 * 10px) / 7); } }
@media (max-width: 860px)  { .tmos img { flex-basis: calc((100% - 4 * 10px) / 5); } }
@media (max-width: 660px)  { .tmos img { flex-basis: calc((100% - 3 * 10px) / 4); } }
@media (max-width: 460px)  { .tmos img { flex-basis: calc((100% - 2 * 10px) / 3); } }

/* Cares events. Photo left, copy right, alternating. */
.evt-list { display: flex; flex-direction: column; gap: 18px; }
.evt {
  display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: center;
  padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated);
  transition: border-color 0.2s ease;
}
.evt:hover { border-color: rgba(36,125,255,0.4); }
.evt-shot { width: 100%; border-radius: 14px; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.evt-date {
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0.005em;
  color: var(--brand-text); margin-bottom: 10px;
}
.evt h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.022em; color: var(--text); line-height: 1.3; }
.evt p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 820px) { .evt { grid-template-columns: 1fr; gap: 18px; } }

/* Cares initiatives: image on top, copy under. */
.init-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.init-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg-elevated); }
.init-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.init-body { padding: 22px 24px 26px; }
.init-body h3 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.init-body p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 900px) { .init-grid { grid-template-columns: 1fr; } }

/* Past initiatives, a lighter treatment than the dated events. */
.past-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.past-card { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); overflow: hidden; }
.past-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.past-body { padding: 22px 24px 26px; }
.past-body h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.past-body p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 820px) { .past-grid { grid-template-columns: 1fr; } }

/* Careers hero collage */
/* One photo, cropped to a steady 5:4 so it sits level with the copy beside it. */
.chero-art { display: block; }
.chero-art img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 35%; border-radius: 18px; display: block; border: 1px solid var(--border); }
@media (max-width: 900px) { .chero-art { display: none; } }

/* Office list: a plain roll-call, the point is the count and the spread. */
.off-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.off-item {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated);
  transition: border-color 0.2s ease;
}
.off-item:hover { border-color: rgba(36,125,255,0.4); }
.off-item i { font-size: 20px; color: var(--brand-text); flex-shrink: 0; }
.off-item strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.015em; }
.off-item span { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 1000px) { .off-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .off-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .off-grid { grid-template-columns: 1fr; } }

/* TikTok embeds. The widget injects a fixed-width iframe, so cap and centre each cell. */
.tik-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.tik-grid .tiktok-embed { margin: 0 auto !important; max-width: 100% !important; min-width: 0 !important; width: 100%; }
.tik-grid > * { min-width: 0; display: flex; justify-content: center; }
/* The widget resizes each iframe over postMessage once metadata loads. Give it a
   floor so a slow or blocked message can never leave a 150px sliver on the page. */
.tik-grid iframe { min-height: 560px; width: 100% !important; max-width: 340px; border-radius: 14px; }
.tik-grid .tiktok-embed section { margin: 0; }
@media (max-width: 1000px) { .tik-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .tik-grid { grid-template-columns: 1fr; } }

/* ============ CONTACT PAGE ============ */
.route-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.route-card {
  display: grid; grid-template-columns: 132px 1fr; gap: 22px; align-items: center;
  padding: 26px 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated);
}
.route-card img { width: 132px; height: auto; display: block; }
.route-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.022em; color: var(--text); line-height: 1.3; }
.route-card p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 900px) { .route-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .route-card { grid-template-columns: 1fr; text-align: center; } .route-card img { margin: 0 auto; } }

.contact-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; }
@media (max-width: 980px) { .contact-split { grid-template-columns: 1fr; } }

.contact-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; }
@media (max-width: 980px) { .contact-aside { position: static; } }
.cside-card { padding: 24px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elevated); }
.cside-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.cside-card p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.cside-card address { font-style: normal; margin-bottom: 14px; }
.cside-card address span { display: block; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.cside-rows { display: flex; flex-direction: column; gap: 8px; }
.cside-rows a, .cside-link {
  display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--brand-text);
  font-weight: 600; text-decoration: none;
}
.cside-rows a:hover, .cside-link:hover { text-decoration: underline; }
.cside-link { margin-top: 14px; }

.off-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.off-card { padding: 24px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elevated); }
.off-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.off-country {
  font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0.005em;
  color: var(--brand-text); margin-bottom: 14px;
}
.off-card address { font-style: normal; }
.off-card address span { display: block; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
.off-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }
@media (max-width: 900px) { .off-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .off-cards { grid-template-columns: 1fr; } }

/* ============ AROUND THE WORLD: photo mosaic ============
   A uniform grid, not masonry. Masonry balanced these particular photos badly:
   the one portrait shot ran its column 472px longer than the shortest, leaving a
   dead void. Fixed rows at three columns give each tile ~395x300, which is where
   faces in the group shots actually become legible, and the cell count (9 over
   three columns) divides exactly so there is never a hole. Most of these photos
   are natively 4:3 so the box crops nothing; the portrait one spans two rows to
   keep its shape. */
.gal {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px; gap: 16px; grid-auto-flow: dense;
}
.gal-cell {
  margin: 0; position: relative; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.gal-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.gal-cell::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(5,7,13,0.3));
  opacity: 0; transition: opacity 0.35s ease;
}
.gal-cell:hover img { transform: scale(1.04); }
.gal-cell:hover::after { opacity: 1; }
.gal-tall { grid-row: span 2; }
/* Two columns: the tall tile drops to 1x1 so the count is 8, four exact rows.
   Left spanning two it totals 9 and strands a hole. */
@media (max-width: 1000px) {
  .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
  .gal-tall { grid-row: span 1; }
}
@media (max-width: 620px) {
  .gal { grid-template-columns: 1fr; grid-auto-rows: 260px; }
}

/* ============ ROTATING WORD (careers h1) ============
   'Be a team player / mate / worker', the way the old site cycled it. The track
   slides up one word at a time inside a one-word window.

   The window has to be tall enough to contain the glyphs, not just the line box.
   At line-height 1.05 the descender on 'player' paints outside its own box and
   peeks over the top of the next word, so the box is 1.3em and the whole thing
   is nudged back up to sit on the surrounding baseline. Step, word height and
   window height are all the same value, which is what guarantees exactly one
   word is ever in frame. The fourth item repeats the first so the loop restart
   is invisible rather than a snap back. */
.wordrot {
  display: inline-flex; overflow: hidden; vertical-align: baseline;
  height: 1.3em; margin-bottom: -0.25em;
}
.wordrot-track {
  display: flex; flex-direction: column;
  animation: wordrot 7.5s cubic-bezier(.76,0,.24,1) infinite;
}
/* Keyed to .wordrot-w alone. It used to require .gradient-text as well, so
   swapping the accent to the serif dropped the fixed height and the words no
   longer matched the 1.3em the keyframes step by. */
.wordrot-w {
  display: block; height: 1.3em; line-height: 1.3; white-space: nowrap;
}
/* and the serif's 0.96em would resolve those ems against a smaller font than
   the track translates by, so it keeps the family and loses the size change */
.wordrot-w.t-serif { font-size: 1em; }
@keyframes wordrot {
  0%,   28%  { transform: translateY(0); }
  33.3%, 61% { transform: translateY(-1.3em); }
  66.6%, 94% { transform: translateY(-2.6em); }
  100%       { transform: translateY(-3.9em); }
}
/* Someone who has asked for less motion gets the first word, held still. */
@media (prefers-reduced-motion: reduce) {
  .wordrot-track { animation: none; }
}

/* Gallery caption. Sits over a gradient at the foot of the tile, always visible
   rather than hover-only, since it carries which initiative the photo is from. */
.gal-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 26px 16px 12px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.005em; text-transform: none; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(5,7,13,0.82));
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ============ TECHNICAL EVALUATION ============ */
/* Compact two-column hero. No full-bleed photo: the visual carries the idea, so
   it does not need half the viewport to land. */
.tev-hero { padding-bottom: 30px; }
.tev-hero-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 54px; align-items: center; }
.tev-h1 {
  margin: 18px 0 0; font-size: clamp(34px, 4.2vw, 54px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.05; color: var(--text);
}
.tev-hero-sub { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: var(--text-muted); max-width: 46ch; }
/* .hero-cta is built for the centred hero: it centres its buttons and carries a
   64px bottom margin. In this left-aligned column that pushed the buttons out of
   line with the headline above them and left dead space underneath. */
.tev-hero-copy .hero-cta { justify-content: flex-start; margin: 28px 0 0; }
@media (max-width: 980px) {
  .tev-hero-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ---- The x-ray: looking through the store at the technology in it ----
   Two copies of the same photo, perfectly aligned because both are inset:0 and
   object-fit:cover on the same box. The base is dimmed; the top copy is clipped
   to the lens rectangle and tinted, so the lens reads as a layer being examined
   rather than a crop. The lens geometry lives in variables so the clip-path and
   the visible outline can never drift apart. */
.xray {
  --lt: 14%; --lr: 3%; --lb: 12%; --ll: 52%;
  position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-deep);
}
.xray-base, .xray-scan {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.xray-base { filter: saturate(0.42) brightness(0.4); }
.xray-lens { position: absolute; inset: 0; clip-path: inset(var(--lt) var(--lr) var(--lb) var(--ll) round 14px); }
.xray-scan { filter: grayscale(0.72) brightness(0.78) contrast(1.12); }
/* Brand duotone over the copy. Kept light on purpose: the point is looking
   through the store at the technology in it, so the store has to stay visible
   inside the lens. Heavier tint reads as a coloured crop instead. */
.xray-tint {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(150deg, rgba(36,125,255,0.34), rgba(47, 88, 214,0.26));
}
.xray-grid {
  position: absolute; inset: 0; opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(150,200,255,0.16) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(150,200,255,0.16) 0 1px, transparent 1px 26px);
}
.xray-sweep {
  position: absolute; left: 0; right: 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(160,210,255,0.22), transparent);
  animation: xraysweep 4.6s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes xraysweep { 0% { top: -22%; } 100% { top: 100%; } }
.xray-line {
  position: absolute; top: var(--lt); right: var(--lr); bottom: var(--lb); left: var(--ll);
  border: 1px solid rgba(120,180,255,0.75); border-radius: 14px; pointer-events: none;
  box-shadow:0 0 0 1px rgba(5,7,13,0.5), 0 18px 50px -24px rgba(7, 9, 26, 0.3);
}
/* Annotation pins. Positioned in the photo's own coordinate space, and clipped by
   the lens, so a pin can never float over the dimmed part of the shot. */
/* The dot marks the thing, so the dot is what gets anchored to --x/--y and the
   label runs off it. Centring the whole pin (dot + label) instead drags the dot
   sideways by half the label width, which is a lot at these label lengths, and
   the dot stops pointing at what it names. */
.xray-pin {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-4.5px, -50%);
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
/* A pin near the lens right edge puts its label on the other side of the dot.
   Reversing the row is not enough on its own: the pin is still centred on its
   point, so the label keeps overhanging. Anchor the box's right edge to the point
   instead, offset by half the dot so the dot itself still lands on the target. */
.xray-pin-flip {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 4.5px), -50%);
}
.xray-pin i {
  width: 9px; height: 9px; border-radius: 50%; background: #cfe4ff;
  box-shadow:0 0 0 4px rgba(7, 9, 26, 0.08), 0 0 14px rgba(255, 255, 255, 0.9); flex: 0 0 auto;
}
.xray-pin em {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.005em;
  text-transform: none; color: #eaf3ff; padding: 4px 9px; border-radius: 6px;
  background: rgba(6,12,28,0.7); border: 1px solid rgba(120,180,255,0.4);

}
.xray-tick {
  position: absolute; width: 16px; height: 16px; pointer-events: none;
  border-color: rgba(120,180,255,0.55); border-style: solid; border-width: 0;
}
.xray-tick.tl { top: 14px; left: 14px; border-top-width: 2px; border-left-width: 2px; }
.xray-tick.tr { top: 14px; right: 14px; border-top-width: 2px; border-right-width: 2px; }
.xray-tick.bl { bottom: 14px; left: 14px; border-bottom-width: 2px; border-left-width: 2px; }
.xray-tick.br { bottom: 14px; right: 14px; border-bottom-width: 2px; border-right-width: 2px; }
.xray-tag {
  position: absolute; left: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #dbe9ff; padding: 7px 12px; border-radius: 100px;
  background: rgba(6,12,28,0.72); border: 1px solid rgba(120,180,255,0.35);
}
@media (prefers-reduced-motion: reduce) { .xray-sweep { animation: none; opacity: 0; } }
@media (max-width: 760px) {
  /* Narrow: widen the lens and drop the labels, which cannot fit legibly. */
  .xray { --ll: 34%; --lt: 12%; --lb: 10%; aspect-ratio: 4 / 3; }
  .xray-pin em { display: none; }
}

/* Three callouts. Big gradient key, icon, elevated card. */
.rev-fact {
  padding: 26px 26px 28px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg-elevated); transition: border-color 0.2s ease, transform 0.2s ease;
}
.rev-fact:hover { border-color: rgba(36,125,255,0.42); transform: translateY(-2px); }
.rev-fact-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: 16px;
  background: rgba(36,125,255,0.12); border: 1px solid rgba(36,125,255,0.28);
}
.rev-fact-ico i { font-size: 19px; color: var(--brand-text); }
.rev-fact-k {
  line-height: 1;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Agenda tracks: six equal columns so they always sit on one line. */
.captabs-nav.tev-nav {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; flex-wrap: nowrap;
}
.captabs-nav.tev-nav .captab {
  width: 100%; justify-content: center; text-align: center; padding: 11px 8px;
  font-size: 12.5px; line-height: 1.25; white-space: normal;
}
@media (max-width: 1000px) { .captabs-nav.tev-nav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .captabs-nav.tev-nav { grid-template-columns: repeat(2, 1fr); } }

/* What the session is: three plain facts, no card chrome, sitting on a rule. */
.rev-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding: 30px 0 0; border-top: 1px solid var(--border);
}
.rev-fact-k {
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text);
  margin-bottom: 8px;
}
.rev-fact-v { font-size: 14px; line-height: 1.65; color: var(--text-muted); }
@media (max-width: 820px) { .rev-facts { grid-template-columns: 1fr; gap: 22px; } }

/* The question list inside each track. Numbered, because an evaluator is working
   through them, and each row says whether the answer is already published. */
.qwrap { border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); padding: 10px 26px; }
.qlist { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.qlist li {
  display: flex; align-items: baseline; gap: 20px; padding: 18px 0;
  border-bottom: 1px solid var(--border); counter-increment: q;
}
.qlist li:last-child { border-bottom: none; }
.qlist li::before {
  content: counter(q, decimal-leading-zero);
  flex: 0 0 auto; font-family: var(--font-mono, monospace); font-size: 12px;
  font-weight: 700; color: var(--brand-text); letter-spacing: 0.06em;
}
.qlist li > span { flex: 1 1 auto; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.qlist li > a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0.005em;
  color: var(--brand-text); text-decoration: none; white-space: nowrap;
}
.qlist li > a:hover { text-decoration: underline; }
.qlist li > em {
  flex: 0 0 auto; font-size: 12px; font-style: normal; font-weight: 700;
  text-transform: none; letter-spacing: 0.005em; color: var(--text-faint); white-space: nowrap;
}
@media (max-width: 700px) {
  .qwrap { padding: 6px 18px; }
  .qlist li { flex-wrap: wrap; gap: 8px 14px; }
  .qlist li > span { flex: 1 1 100%; order: 2; }
  .qlist li::before { order: 1; }
  .qlist li > a, .qlist li > em { order: 3; }
}

/* How it runs: three numbered steps. */
.rev-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rev-step {
  padding: 28px 28px 30px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg-elevated); position: relative;
}
.rev-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--gradient);
  color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px;
}
.rev-step h3 { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.rev-step p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 900px) { .rev-steps { grid-template-columns: 1fr; } }

/* ============ POS RFP TEMPLATE ============ */
.rfpq-hero { max-width: 860px; }
.rfpq-h1 {
  margin: 18px 0 0; font-size: clamp(34px, 4.6vw, 58px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.06; color: var(--text);
}
.rfpq-hero-sub { margin: 20px 0 0; font-size: 17px; line-height: 1.7; color: var(--text-muted); max-width: 64ch; }
.rfpq-cta { justify-content: flex-start; margin: 28px 0 0; }
/* Owning the vendor authorship rather than burying it. */
.rfpq-disclosure {
  display: flex; gap: 11px; margin: 30px 0 0; padding: 16px 20px; max-width: 74ch;
  border: 1px solid var(--border); border-left: 3px solid var(--brand-blue);
  border-radius: 10px; background: var(--bg-elevated);
  font-size: 13.5px; line-height: 1.65; color: var(--text-muted);
}
.rfpq-disclosure i { color: var(--brand-text); font-size: 17px; flex: 0 0 auto; margin-top: 1px; }

.rfpq-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-elevated);
}
.rfpq-stat { padding: 24px 26px; border-right: 1px solid var(--border); }
.rfpq-stat:last-child { border-right: none; }
.rfpq-stat strong {
  display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: -0.035em; line-height: 1;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.rfpq-stat span { display: block; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 820px) {
  .rfpq-stats { grid-template-columns: repeat(2, 1fr); }
  .rfpq-stat:nth-child(2) { border-right: none; }
  .rfpq-stat:nth-child(1), .rfpq-stat:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* Section jump list. Chips rather than a plain list, so the count is scannable. */
.rfpq-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.rfpq-jump a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  border: 1px solid var(--border); border-radius: 100px; background: var(--bg-elevated);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rfpq-jump a:hover { border-color: var(--brand-blue); color: var(--text); }
.rfpq-jump a i { font-size: 14px; color: var(--brand-text); }
.rfpq-jump a b {
  font-size: 11px; font-weight: 700; color: var(--text-faint);
  padding-left: 6px; border-left: 1px solid var(--border);
}

.rfpq-sec {
  border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated);
  padding: 28px 30px 10px; margin-bottom: 18px; scroll-margin-top: 90px;
}
.rfpq-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.rfpq-sec-head h3 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 20px; font-weight: 600; letter-spacing: -0.022em; color: var(--text);
}
.rfpq-sec-head h3 i { color: var(--brand-text); font-size: 21px; }
.rfpq-sec-head p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-muted); max-width: 72ch; }
.rfpq-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 100px; background: var(--bg-deep);
  color: var(--text-muted); font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
}
.rfpq-copy:hover { border-color: var(--brand-blue); color: var(--text); }
.rfpq-copy.is-done { border-color: transparent; background: var(--gradient); color: #fff; }
.rfpq-qs { margin: 0; padding: 0 0 0 0; list-style: none; counter-reset: rq; }
.rfpq-qs li {
  counter-increment: rq; position: relative; padding: 15px 0 15px 44px;
  border-top: 1px solid var(--border); font-size: 15.5px; line-height: 1.6; color: var(--text);
}
.rfpq-qs li::before {
  content: counter(rq, decimal-leading-zero); position: absolute; left: 0; top: 16px;
  font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
  color: var(--brand-text); letter-spacing: 0.06em;
}
@media (max-width: 700px) {
  .rfpq-sec { padding: 24px 20px 6px; }
  .rfpq-sec-head { flex-direction: column; gap: 16px; }
  .rfpq-qs li { padding-left: 38px; font-size: 15px; }
}

/* ============ RFID: THE E-COMMERCE MISSION ============
   Two opposed failure modes facing each other, converging on one figure. */
.emx {
  position: relative; overflow: hidden; padding: 96px 0;
  background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.emx-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 60% at 12% 12%, rgba(36,125,255,0.16), transparent 62%),
    radial-gradient(46% 60% at 88% 14%, rgba(47, 88, 214,0.16), transparent 62%);
}
.emx-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: stretch; }
.emx-mission {
  padding: 30px 32px 32px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-elevated);
}
.emx-num {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand-text); margin-bottom: 14px;
}
.emx-mission h3 {
  margin: 0 0 10px; font-size: clamp(19px, 2.1vw, 23px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.25; color: var(--text);
}
.emx-lead { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--text-muted); font-style: italic; }
.emx-cost { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.emx-cost li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.6; color: var(--text-muted);
}
.emx-cost i {
  flex: 0 0 auto; margin-top: 2px; font-size: 13px; color: var(--brand-purple);
  width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(80, 120, 245,0.14);
}
/* The word between the two panels, on a vertical rule. */
.emx-vs { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; }
.emx-vs::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}
.emx-vs span {
  position: relative; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: none;
  color: var(--text-faint); background: var(--bg-deep); padding: 8px 0;
}
/* Two short verticals dropping from the panels into the fix. */
.emx-converge { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 40px; margin: 0 auto; max-width: 60%; }
.emx-converge span { position: relative; }
.emx-converge span::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, var(--border-strong), rgba(36,125,255,0.65));
}
.emx-fix {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
  padding: 34px 38px; border: 1px solid rgba(36,125,255,0.34); border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(36,125,255,0.09), rgba(47, 88, 214,0.06)),
    var(--bg-elevated);
}
.emx-fix-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em; color: var(--brand-text);
}
.emx-fix-eyebrow i {
  width: 17px; height: 17px; border-radius: 50%; background: var(--gradient); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.emx-fix h3 {
  margin: 0 0 12px; font-size: clamp(21px, 2.5vw, 28px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.2; color: var(--text);
}
.emx-fix p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 900px) {
  .emx { padding: 72px 0; }
  .emx-pair { grid-template-columns: 1fr; gap: 16px; }
  .emx-vs { width: auto; height: 34px; }
  .emx-vs::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent); }
  .emx-vs span { padding: 0 12px; }
  .emx-converge { max-width: 100%; grid-template-columns: 1fr; height: 30px; }
  .emx-converge span:last-child { display: none; }
  .emx-fix { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
}

/* ============ INTEGRATIONS: HUB AND SPOKE ============ */
.intg-hero-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 54px; align-items: center; }
/* The buttons sat flush on the hero's bottom edge, zero gap, because this
   hero has no bottom padding of its own and the CTA row clears its margin. */
/* Same shorthand trap as .slotx-cta: "margin: 28px 0 0" zeroes the 64px bottom
   margin .hero-cta carries, so the buttons sat on the edge of the dark band. */
.intg-hero-cta { justify-content: flex-start; margin: 28px 0 0; }
.intg-hero-grid { padding-bottom: 64px; }
@media (max-width: 1000px) { .intg-hero-grid { padding-bottom: 48px; } }
.hero .intg-hero-grid { padding-bottom: 72px; }
@media (max-width: 1000px) { .hero .intg-hero-grid { padding-bottom: 52px; } }
/* The hero h1 is sized for a full-width centred hero. In this narrower column it
   broke onto six lines, so it gets its own scale here. */
.intg-hero-copy h1 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.08; letter-spacing: -0.038em; }
.intg-hero-copy .hero-sub { margin-left: 0; margin-right: 0; max-width: 52ch; }
@media (max-width: 1000px) { .intg-hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hubx { position: relative; aspect-ratio: 900 / 560; }
.hubx-wires { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hubx-track line { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.hubx-live line {
  stroke: url(#hubxG); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke;
  stroke-dasharray: 26 100; stroke-dashoffset: 126;
  animation: hubxflow 3.4s linear infinite;
}
@keyframes hubxflow { to { stroke-dashoffset: 0; } }
.hubx-live line:nth-child(2) { animation-delay: 0.3s; }
.hubx-live line:nth-child(3) { animation-delay: 0.6s; }
.hubx-live line:nth-child(4) { animation-delay: 0.9s; }
.hubx-live line:nth-child(5) { animation-delay: 1.2s; }
.hubx-live line:nth-child(6) { animation-delay: 1.5s; }
.hubx-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 124px; height: 124px; border-radius: 50%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 40% 32%, rgba(36,125,255,0.28), rgba(10,14,30,0.94));
  border: 1px solid rgba(120,180,255,0.5);
  box-shadow:0 0 0 1px rgba(5,7,13,0.6), 0 24px 60px -26px rgba(7, 9, 26, 0.3);
}
.hubx-core strong {
  font-size: 22px; font-weight: 700; letter-spacing: -0.03em;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hubx-core em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.005em; text-transform: none; color: var(--text-faint); }
.hubx-core-ring {
  position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(120,180,255,0.35);
  animation: hubxring 3.6s ease-out infinite;
}
.hubx-core-ring:nth-child(2) { animation-delay: 1.8s; }
@keyframes hubxring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}
/* Chips sit on the ellipse. Edge chips anchor inward so a long label cannot run
   off the panel, the same fix the x-ray pins needed. */
/* The pill background is hardcoded dark because the hero band is always dark, so
   the text and icon colours have to be fixed too. They were themed tokens, which
   made every label invisible in light mode: dark ink on a near-black pill. */
.hubx-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 13px; border-radius: 100px;
  background: rgba(8,13,28,0.86); border: 1px solid rgba(146, 176, 255, 0.28);
  font-size: 12px; font-weight: 600; color: #e9effd;
}
.hubx-node i { font-size: 14px; color: #7fb0ff; }
@media (prefers-reduced-motion: reduce) {
  .hubx-live line, .hubx-core-ring { animation: none; }
  .hubx-live line { stroke-dasharray: none; stroke-dashoffset: 0; }
}
@media (max-width: 620px) { .hubx-node { font-size: 10.5px; padding: 6px 9px; } .hubx-core { width: 92px; height: 92px; } }

/* ============ SHARED: from -> to shift rail ============
   Used by the four 'What It Changes' sections. The content there was already
   shaped as a before and an after, so this states both instead of only the after.
   No invented numbers: the pairs are the words already on the page. */
.shiftx { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.shiftx-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  padding: 18px 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated);
}
.shiftx-from, .shiftx-to { font-size: 13.5px; line-height: 1.5; }
.shiftx-from { color: var(--text-faint); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.22); }
.shiftx-to { color: var(--text); font-weight: 600; }
.shiftx-arrow {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--gradient); color: #fff; font-size: 13px;
}
@media (max-width: 980px) { .shiftx { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .shiftx-row { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .shiftx-arrow { transform: rotate(90deg); }
}

/* ============ INTEGRATIONS: cloud stack + hot swap ============ */
.cloudx { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.cloudx-layer {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated);
}
.cloudx-layer i { font-size: 18px; color: var(--brand-text); flex: 0 0 auto; }
.cloudx-layer strong { font-size: 14px; font-weight: 600; color: var(--text); }
.cloudx-layer span { font-size: 13px; color: var(--text-muted); }
.cloudx-layer.is-core {
  border-color: rgba(36,125,255,0.4);
  background: linear-gradient(180deg, rgba(36,125,255,0.1), rgba(47, 88, 214,0.06)), var(--bg-elevated);
}

/* Hot swap: one spoke detaches, another connects, the core never stops. */
.swapx { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; padding: 8px 0; }
.swapx-side { display: flex; flex-direction: column; gap: 12px; }
.swapx-chip {
  display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.swapx-chip i { font-size: 15px; color: var(--brand-text); }
.swapx-chip.is-out { animation: swapout 6s ease-in-out infinite; }
.swapx-chip.is-in  { animation: swapin  6s ease-in-out infinite; }
@keyframes swapout {
  0%, 32% { opacity: 1; transform: none; border-color: var(--border); }
  46%, 74% { opacity: 0.28; transform: translateX(-10px); border-color: var(--border); }
  88%, 100% { opacity: 1; transform: none; }
}
@keyframes swapin {
  0%, 40% { opacity: 0.28; transform: translateX(10px); }
  56%, 100% { opacity: 1; transform: none; border-color: rgba(36,125,255,0.45); }
}
.swapx-core {
  width: 96px; height: 96px; margin: 0 22px; border-radius: 50%; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 32%, rgba(36,125,255,0.26), rgba(10,14,30,0.94));
  border: 1px solid rgba(120,180,255,0.45);
}
.swapx-core strong { font-size: 15px; font-weight: 700;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.swapx-core::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(120,180,255,0.3); animation: hubxring 3s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .swapx-chip.is-out, .swapx-chip.is-in { animation: none; opacity: 1; transform: none; }
  .swapx-core::after { animation: none; }
}
@media (max-width: 700px) {
  .swapx { grid-template-columns: 1fr; gap: 16px; justify-items: center; }
  .swapx-core { margin: 0; }
}

/* The gate: two pillars with a read field between them. */

/* ============ OMS: ORDER ROUTING TREE ============ */
.routex { display: grid; grid-template-columns: auto 1fr auto; gap: 0; align-items: center; margin-bottom: 44px; }
.routex-cap { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: none; color: var(--brand-text); margin-bottom: 10px; }
.routex-order {
  padding: 18px 22px; border: 1px solid rgba(36,125,255,0.4); border-radius: 14px;
  background: linear-gradient(180deg, rgba(36,125,255,0.1), transparent), var(--bg-elevated);
}
.routex-order strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.03em;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.routex-order span { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.routex-wires { width: 100%; height: 320px; display: block; }
.routex-wires path { fill: none; vector-effect: non-scaling-stroke; }
.routex-dim { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 7; opacity: 0.85; }
.routex-pick { stroke: url(#routexG); stroke-width: 2.5; stroke-dasharray: 30 120; stroke-dashoffset: 150; animation: routexflow 2.8s linear infinite; }
@keyframes routexflow { to { stroke-dashoffset: 0; } }
.routex-out { display: flex; flex-direction: column; gap: 10px; min-width: 300px; }
.routex-opt {
  display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center;
  padding: 13px 17px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elevated);
}
.routex-opt > i { font-size: 17px; color: var(--text-faint); }
.routex-opt strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.routex-opt span { display: block; font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.routex-opt em {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.005em; text-transform: none;
  color: var(--text-faint); white-space: nowrap;
}
.routex-opt.is-pick { border-color: rgba(80, 120, 245,0.5); background: linear-gradient(180deg, rgba(47, 88, 214,0.1), transparent), var(--bg-elevated); }
.routex-opt.is-pick > i { color: var(--brand-purple); }
.routex-opt.is-pick strong { color: var(--text); }
.routex-opt.is-pick em { color: #A6B8FF; }
@media (prefers-reduced-motion: reduce) { .routex-pick { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }
@media (max-width: 900px) {
  .routex { grid-template-columns: 1fr; gap: 18px; }
  .routex-wires { display: none; }
  .routex-out { min-width: 0; }
}

/* ============ SHARED: PRODUCT UI SURFACE ============
   The real software is a light iOS interface: white panels, grey chrome, blue
   controls, a green primary action. Any mock of a product screen uses these
   tokens so it reads as the product rather than as this website. */
.uix {
  --uix-bg: #f2f4f7; --uix-panel: #ffffff; --uix-line: #dfe3ea;
  --uix-ink: #16191f; --uix-dim: #6b7280; --uix-blue: #2f7ff6; --uix-green: #2fb457;
  background: var(--uix-bg); color: var(--uix-ink);
  border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 9px;
  border: 1px solid rgba(0,0,0,0.16); box-shadow:0 20px 46px -26px rgba(0,0,0,0.75);
}
.uix-phone { min-height: 236px; }
.uix-nav {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding-bottom: 8px; border-bottom: 1px solid var(--uix-line);
}
.uix-back { color: var(--uix-blue); font-size: 17px; line-height: 1; }
.uix-title { text-align: center; font-size: 12px; font-weight: 700; color: var(--uix-ink); }
.uix-dots { font-size: 10px; color: var(--uix-dim); }
.uix-card {
  background: var(--uix-panel); border: 1px solid var(--uix-line); border-radius: 10px;
  padding: 10px 11px; display: flex; flex-direction: column; gap: 3px;
}
.uix-card.is-new { border-left: 3px solid var(--uix-blue); }
.uix-row1 { font-size: 12px; font-weight: 700; }
.uix-row2 { font-size: 11px; color: var(--uix-ink); }
.uix-row3 { font-size: 10px; color: var(--uix-dim); }
.uix-btn {
  margin-top: auto; text-align: center; padding: 9px 0; border-radius: 8px;
  background: var(--uix-blue); color: #fff; font-size: 11.5px; font-weight: 700;
}
.uix-btn.is-go { background: var(--uix-green); }
.uix-line {
  display: flex; gap: 9px; align-items: flex-start; background: var(--uix-panel);
  border: 1px solid var(--uix-line); border-radius: 10px; padding: 9px 10px;
}
.uix-check {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px; margin-top: 1px;
  border: 1px solid #b9c0cc; background: #fff; color: #fff;
  font-size: 11px; line-height: 14px; text-align: center;
}
.uix-check.on { background: var(--uix-blue); border-color: var(--uix-blue); }
.uix-l { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--uix-dim); }
.uix-l b { font-size: 11.5px; font-weight: 600; color: var(--uix-ink); }
.uix-tag { font-size: 10px; font-weight: 600; color: var(--uix-dim); }
.uix-label { background: var(--uix-panel); border: 1px solid var(--uix-line); border-radius: 8px; padding: 9px 10px; }
.uix-label-top { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 7px; }
.uix-label-code {
  display: block; height: 32px; margin-bottom: 7px;
  background-image: repeating-linear-gradient(90deg, #16191f 0 2px, transparent 2px 4px, #16191f 4px 5px, transparent 5px 9px);
}
.uix-label-addr { display: block; font-size: 9px; line-height: 1.45; font-weight: 600; }

/* ============ OMS: THE ASSOCIATE'S THREE TAPS ============ */
.stepx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stepx-phone { position: relative; padding: 26px 26px 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); }
.stepx-n {
  position: absolute; top: 20px; right: 22px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gradient); color: #fff; font-size: 12px; font-weight: 700; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.stepx-phone .uix { margin-bottom: 20px; }
.stepx-phone strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-bottom: 8px; }
.stepx-phone p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-muted); }
/* Says plainly that these are illustrations, not captures. */
.stepx-note { text-align: center; font-size: 12.5px; color: var(--text-faint); margin: 26px 0 0; }
.stepx-note a { color: var(--brand-text); font-weight: 600; }
@media (max-width: 900px) { .stepx { grid-template-columns: 1fr; } }

/* ============ STACK VS NATIVE ============
   No competitor named. The argument is the shape of the stack, not who sells it. */
.vsx { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vsx-side { padding: 26px 28px 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); }
.vsx-cap { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.005em; text-transform: none; color: var(--text-faint); margin-bottom: 18px; }
.vsx-cap-on { color: var(--brand-text); }
.vsx-stack { position: relative; display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.vsx-box {
  padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--border-strong);
  background: rgba(255,255,255,0.02); font-size: 13px; color: var(--text-muted); text-align: center;
}
.vsx-joins { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vsx-joins path { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 2 4; fill: none; vector-effect: non-scaling-stroke; }
.vsx-one {
  border: 1px solid rgba(36,125,255,0.42); border-radius: 12px; overflow: hidden; margin-bottom: 22px;
  background: linear-gradient(180deg, rgba(36,125,255,0.09), rgba(47, 88, 214,0.05));
}
.vsx-one-t {
  display: block; padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.005em;
  text-transform: none; color: var(--brand-text); border-bottom: 1px solid rgba(36,125,255,0.28);
}
.vsx-slab {
  display: block; padding: 12px 16px; font-size: 13px; color: var(--text); text-align: center;
  border-bottom: 1px solid rgba(36,125,255,0.16);
}
.vsx-slab:last-child { border-bottom: none; }
.vsx-cost { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.vsx-cost li { font-size: 13px; line-height: 1.55; color: var(--text-faint); padding-left: 16px; position: relative; }
.vsx-cost li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--border-strong); }
.vsx-cost-on li { color: var(--text-muted); }
.vsx-cost-on li::before { background: var(--brand-blue); }
@media (max-width: 820px) { .vsx { grid-template-columns: 1fr; } }

/* ============ PRODUCT RECORD DIFF ============ */
.diffx { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; }
.diffx-pane { padding: 22px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elevated); }
.diffx-pane.is-after { border-color: rgba(36,125,255,0.4); background: linear-gradient(180deg, rgba(36,125,255,0.07), transparent), var(--bg-elevated); }
.diffx-cap { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: none; color: var(--text-faint); margin-bottom: 16px; }
.diffx-pane.is-after .diffx-cap { color: var(--brand-text); }
.diffx-row {
  display: flex; gap: 10px; align-items: baseline; padding: 9px 0;
  border-top: 1px solid var(--border); font-size: 13px; color: var(--text);
  font-family: var(--font-mono, monospace);
}
.diffx-row:first-of-type { border-top: none; }
.diffx-row b { flex: 0 0 96px; font-weight: 600; color: var(--text-faint); }
.diffx-row.is-empty { color: var(--text-faint); }
.diffx-row.is-add {
  color: var(--text); position: relative; padding-left: 12px; margin-left: -12px;
  border-left: 2px solid var(--brand-blue); background: rgba(36,125,255,0.07);
}
.diffx-arrow {
  width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient); color: #fff; font-size: 19px;
}
@media (max-width: 860px) {
  .diffx { grid-template-columns: 1fr; }
  .diffx-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* The enrichment performs itself: the sparkle works, then each generated field lands in
   turn, so AI is shown doing the catalog work rather than described as having done it.
   The rows ship visible and the driver adds is-armed, so no-JS and reduced-motion
   readers get the finished record. */
.diffx-row.is-add {
  transition: opacity .4s ease, transform .55s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.diffx.is-armed .diffx-row.is-add { opacity: 0; transform: translateX(-10px); }
.diffx.is-armed .diffx-row.is-add.is-on { opacity: 1; transform: none; }
.diffx-arrow { transition: transform .4s cubic-bezier(0.34, 1.5, 0.55, 1); }
.diffx.is-working .diffx-arrow { animation: diffx-work 1.05s ease-in-out infinite; }
@keyframes diffx-work {
  0%, 100% { transform: scale(1); box-shadow:0 0 0 0 rgba(7, 9, 26, 0.08); }
  50% { transform: scale(1.09); box-shadow:0 0 0 12px rgba(7, 9, 26, 0); }
}
@media (max-width: 860px) {
  /* the arrow is rotated at this width, so the pulse has to keep the rotation */
  .diffx.is-working .diffx-arrow { animation: diffx-work-rot 1.05s ease-in-out infinite; }
  @keyframes diffx-work-rot {
    0%, 100% { transform: rotate(90deg) scale(1); box-shadow:0 0 0 0 rgba(7, 9, 26, 0.08); }
    50% { transform: rotate(90deg) scale(1.09); box-shadow:0 0 0 12px rgba(7, 9, 26, 0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .diffx.is-armed .diffx-row.is-add { opacity: 1; transform: none; }
  .diffx.is-working .diffx-arrow { animation: none; }
}

/* ============ ROTATING QR SIGN-IN ============ */

/* ============ DIVERGE WITHOUT FORKING ============ */
.forkx { max-width: 880px; margin: 0 auto; }
.forkx-spine { display: flex; justify-content: center; margin-bottom: 0; }
.forkx-core {
  padding: 13px 26px; border-radius: 100px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.005em; text-transform: none; color: #fff; background: var(--gradient);
  box-shadow:0 18px 44px -20px rgba(7, 9, 26, 0.3);
}
.forkx-branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.forkx-branch { display: flex; flex-direction: column; align-items: center; }
.forkx-line { width: 1px; height: 46px; background: linear-gradient(180deg, rgba(120,180,255,0.85), var(--border-strong)); }
.forkx-node {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 18px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated);
  font-size: 13px; line-height: 1.45; color: var(--text); width: 100%;
}
.forkx-node i { font-size: 19px; color: var(--brand-text); }
.forkx-note { text-align: center; font-size: 13px; color: var(--text-faint); margin: 26px 0 0; }
@media (max-width: 820px) { .forkx-branches { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .forkx-branches { grid-template-columns: 1fr; } }

/* ============ CERTIFIED HARDWARE DOSSIER ============
   The credible part of a certification programme is the format of the record, so
   the section shows a record. Every field here is one the published list carries. */
.dossx { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.dossx-shot { display: flex; justify-content: center; }
.dossx-shot img { width: 100%; height: auto; display: block; border-radius: 16px; border: 1px solid var(--border); aspect-ratio: 4 / 5; object-fit: cover; }
.dossx-rec { padding: 30px 34px 32px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-elevated); }
.dossx-cap { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: none; color: var(--brand-text); margin-bottom: 10px; }
.dossx-rec h3 { margin: 0 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); }
.dossx-desc { margin: 0 0 22px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.dossx-fields { margin: 0 0 22px; padding: 0; }
.dossx-fields > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--border); }
.dossx-fields dt { font-size: 12.5px; font-weight: 600; color: var(--text-faint); }
.dossx-fields dd { margin: 0; font-size: 13.5px; color: var(--text); }
.dossx-pill {
  display: inline-block; padding: 3px 11px; border-radius: 100px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--gradient);
}
.dossx-foot { margin: 0 0 20px; font-size: 12.5px; line-height: 1.6; color: var(--text-faint); }
@media (max-width: 860px) {
  .dossx { grid-template-columns: 1fr; gap: 28px; }
  .dossx-fields > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ============ CERTIFICATION PATH ============ */

/* ============ ARCHITECTURE: THE SLOT ============
   The page answers "where does this sit", so the visual is the bay it sits in. */
/* The hero band ends at this grid, and .slotx-cta zeroes the 64px bottom margin
   .hero-cta carries by default, so the buttons sat on the band edge. The space
   belongs on the container: the left column is the taller one here, and when the
   grid stacks it is the diagram that needs the clearance instead. */
.slotx-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 54px; align-items: center; padding-bottom: 64px; }
.slotx-cta { justify-content: flex-start; margin: 28px 0 0; }
.slotx-copy h1 { font-size: clamp(32px, 3.5vw, 46px); line-height: 1.08; letter-spacing: -0.038em; }
.slotx-copy .hero-sub { margin-left: 0; margin-right: 0; max-width: 52ch; }
.slotx { display: flex; flex-direction: column; gap: 16px; }
.slotx-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.slotx-box {
  padding: 15px 12px; border-radius: 12px; text-align: center; font-size: 13px;
  border: 1px dashed var(--border-strong); background: rgba(255,255,255,0.02); color: var(--text-faint);
}
.slotx-bay { position: relative; padding: 6px; border-radius: 18px; border: 1px dashed rgba(120,180,255,0.55); }
.slotx-bay-cap {
  position: absolute; top: -9px; left: 18px; padding: 0 8px; background: var(--bg);
  font-size: 10px; font-weight: 700; letter-spacing: 0.005em; text-transform: none; color: var(--brand-text);
}
.slotx-fill {
  padding: 24px 22px; border-radius: 13px; text-align: center;
  border: 1px solid rgba(36,125,255,0.45);
  background: linear-gradient(180deg, rgba(36,125,255,0.16), rgba(47, 88, 214,0.09)), var(--bg-elevated);
  box-shadow:0 24px 60px -30px rgba(7, 9, 26, 0.3);
}
.slotx-fill strong {
  display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 6px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.slotx-fill span { display: block; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 1000px) { .slotx-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; } }

/* ============ CUSTOMER CAPTURE ROUTES (.cvx) ============
   Four sign-up routes as cards, each opening on a small drawn scene of the route,
   then all four drop into one customer record below. */
.cvx-routes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cvx-route {
  display: flex; flex-direction: column; padding: 12px 12px 20px; border-radius: 18px;
  border: 1px solid var(--border); background: var(--bg-elevated);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.cvx-route:hover { border-color: rgba(36,125,255,0.42); transform: translateY(-3px); }
.cvx-route h3 { margin: 4px 8px 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.cvx-route p { margin: 0 8px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.cvx-n { margin: 16px 8px 0; font-family: var(--font-mono, monospace); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--brand-text); }

/* the scene panel */
.cvx-vis {
  position: relative; height: 172px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 40%, rgba(47,123,255,0.18), transparent 70%), var(--brand-soft);
  font-family: var(--font-body); color: #10142a;
}
.cvx-scr {
  width: 150px; padding: 12px 12px 10px; border-radius: 14px; background: #fff;
  border: 5px solid #10142a; box-shadow: 0 24px 40px -20px rgba(7,9,26,0.55);
  display: grid; gap: 6px; transform: rotate(-3deg) scale(0.86);
}
[data-theme="dark"] .cvx-scr { border-color: #2a3150; }
.cvx-scr b { font-size: 12px; font-weight: 700; }
.cvx-f { display: grid; gap: 1px; padding: 4px 7px; border: 1px solid #e3e7ee; border-radius: 6px; font-size: 9.5px; font-weight: 500; min-height: 26px; }
.cvx-f small { font-size: 7.5px; color: #8a93a6; font-weight: 600; }
.cvx-btn { margin-top: 2px; padding: 5px 0; border-radius: 6px; background: #2f7bff; color: #fff; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cvx-cust { transform: rotate(3deg) scale(0.86); }
.cvx-cust .cvx-btn { background: #10142a; }
.cvx-lock { justify-self: start; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 100px; background: #eef4ff; color: #2f6fe0; font-size: 7.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cvx-lock i { font-size: 9px; }
.cvx-caret { display: inline-block; width: 1px; height: 10px; background: #3b86f7; animation: scoBlink 1.1s ease-in-out infinite; }

/* QR + phone */
.cvx-vis-qr { grid-template-columns: auto auto; justify-content: center; gap: 16px; }
.cvx-qr { padding: 9px; border-radius: 10px; background: #fff; box-shadow: 0 18px 30px -18px rgba(7,9,26,0.5); transform: rotate(-5deg); }
.cvx-vis svg { display: block; fill: #10142a; }
.cvx-qr svg { width: 64px; height: 64px; }
.cvx-phone {
  position: relative;
  display: grid; align-content: start; gap: 6px; width: 72px; height: 132px; padding: 18px 8px 8px; border-radius: 17px;
  background: #fff; border: 0; box-shadow: 0 0 0 3px #0a0a0d, 0 0 0 4.5px #8f939b, 0 24px 40px -20px rgba(7,9,26,0.55); transform: rotate(4deg);
}
.cvx-phone::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 22px; height: 6px; border-radius: 100px; background: #0a0a0d; }
.cvx-phone b { font-size: 9px; font-weight: 700; }
.cvx-phone i { height: 12px; border: 1px solid #e3e7ee; border-radius: 4px; }
.cvx-phone em { margin-top: 2px; height: 13px; border-radius: 4px; background: #2f7bff; }

/* wallet pass in the camera finder */
.cvx-pass {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 4px 10px;
  width: 170px; padding: 12px 12px 12px 14px; border-radius: 14px; color: #fff;
  background: linear-gradient(140deg, #1d2547, #10142a); box-shadow: 0 24px 40px -18px rgba(7,9,26,0.6);
  transform: rotate(-3deg);
}
.cvx-pass-top { display: grid; }
.cvx-pass-top b { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.cvx-pass-top small { font-size: 8.5px; color: #e8c46a; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cvx-pass-name { grid-row: 2; align-self: end; font-size: 10px; color: rgba(255,255,255,0.7); }
.cvx-pass-code { grid-row: 1 / span 2; grid-column: 2; padding: 5px; border-radius: 6px; background: #fff; }
.cvx-pass-code svg { width: 52px; height: 52px; }
.cvx-finder { position: absolute; inset: 0; margin: auto; width: 214px; height: 132px; pointer-events: none;
  background:
    linear-gradient(#2f7bff, #2f7bff) left top / 18px 2px no-repeat, linear-gradient(#2f7bff, #2f7bff) left top / 2px 18px no-repeat,
    linear-gradient(#2f7bff, #2f7bff) right top / 18px 2px no-repeat, linear-gradient(#2f7bff, #2f7bff) right top / 2px 18px no-repeat,
    linear-gradient(#2f7bff, #2f7bff) left bottom / 18px 2px no-repeat, linear-gradient(#2f7bff, #2f7bff) left bottom / 2px 18px no-repeat,
    linear-gradient(#2f7bff, #2f7bff) right bottom / 18px 2px no-repeat, linear-gradient(#2f7bff, #2f7bff) right bottom / 2px 18px no-repeat;
}
.cvx-finder i { position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: rgba(47,123,255,0.85); box-shadow: 0 0 10px 2px rgba(47,123,255,0.5); animation: cvxScan 2.4s ease-in-out infinite; }
@keyframes cvxScan { 0%, 100% { top: 14%; } 50% { top: 86%; } }

/* all four drop into one record */
.cvx-merge { position: relative; height: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cvx-merge::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 2px; background: linear-gradient(90deg, rgba(47,123,255,0.25), rgba(47,123,255,0.6), rgba(47,123,255,0.25)); }
.cvx-merge::before { content: ""; position: absolute; left: 50%; top: 28px; bottom: 0; width: 2px; margin-left: -1px; background: rgba(47,123,255,0.6); }
.cvx-merge i { justify-self: center; width: 2px; height: 28px; background: rgba(47,123,255,0.4); }
.cvx-target {
  display: flex; align-items: center; gap: 14px; width: max-content; max-width: 100%; margin: 0 auto;
  padding: 12px 22px 12px 12px; border-radius: 100px;
  border: 1px solid rgba(36,125,255,0.45); background: linear-gradient(180deg, rgba(36,125,255,0.14), rgba(47,88,214,0.07)), var(--bg-elevated);
  box-shadow: 0 20px 40px -24px rgba(36,125,255,0.6);
}
.cvx-target > span:last-child { display: grid; gap: 2px; }
.cvx-target strong { font-size: 15px; font-weight: 600; color: var(--text); }
.cvx-target small { font-size: 12.5px; color: var(--text-muted); }
.cvx-photo { flex: none; width: 48px; height: 48px; padding: 2px; border-radius: 50%; background: #2f7bff; }
.cvx-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }

@media (max-width: 1100px) {
  .cvx-routes { grid-template-columns: repeat(2, 1fr); }
  .cvx-merge { display: none; }
  .cvx-target { margin-top: 24px; }
}
@media (max-width: 600px) {
  .cvx-routes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .cvx-finder i, .cvx-caret { animation: none; } }

/* The real catalog screens are light tables, so the diff matches them. */
.diffx-light .diffx-pane {
  background: #f7f8fa; border-color: rgba(0,0,0,0.16); color: #16191f;
  box-shadow:0 20px 46px -28px rgba(0,0,0,0.7);
}
.diffx-light .diffx-pane.is-after { background: #f7f8fa; border-color: #2f7ff6; }
.diffx-light .diffx-cap { color: #6b7280; }
.diffx-light .diffx-pane.is-after .diffx-cap { color: #2f7ff6; }
.diffx-light .diffx-row { border-top-color: #e3e6ec; color: #16191f; }
.diffx-light .diffx-row b { color: #6b7280; }
.diffx-light .diffx-row.is-empty { color: #9aa1ad; }
.diffx-light .diffx-row.is-add { background: rgba(47,127,246,0.09); border-left-color: #2f7ff6; color: #16191f; }

/* App home on the product's own light UI. */
.dossx-shot img { max-width: 100%; }

/* ============ DEMO PAGE ============
   Form first and beside the proof, rather than below it. */
.demox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.demox-h1 {
  margin: 18px 0 0; font-size: clamp(32px, 3.6vw, 48px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.07; color: var(--text);
}
.demox-sub { margin: 18px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--text-muted); max-width: 48ch; }
.demox-points { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.demox-points li { display: flex; gap: 15px; align-items: flex-start; }
.demox-points > li > i {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 17px; color: var(--brand-text);
  background: rgba(36,125,255,0.12); border: 1px solid rgba(36,125,255,0.26);
}
.demox-points strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.demox-points span { display: block; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }
.demox-promise {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; padding: 16px 18px;
  border: 1px solid rgba(36,125,255,0.3); border-radius: 12px;
  background: linear-gradient(180deg, rgba(36,125,255,0.08), transparent);
  font-size: 13.5px; line-height: 1.65; color: var(--text-muted);
}
.demox-promise i { color: var(--brand-text); font-size: 18px; flex: 0 0 auto; margin-top: 1px; }
.demox-promise strong { color: var(--text); }

.demox-formwrap {
  padding: 30px 32px 32px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-elevated); box-shadow:var(--shadow-lg); position: sticky; top: 96px;
}

/* Optional detail collapsed by default: four required fields on show, the rest on ask. */

.demox-alt { text-decoration: none; display: block; }
.demox-alt-go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 12.5px; font-weight: 700; color: var(--brand-text);
}
@media (max-width: 1000px) {
  .demox-grid { grid-template-columns: 1fr; gap: 40px; }
  .demox-formwrap { position: static; }
}
@media (max-width: 560px) {
  .demox-formwrap { padding: 24px 20px 26px; }
}

/* ============ MOBILE: CONTAIN DECORATIVE OVERFLOW ============
   The radial glows and rings are deliberately wider than their section. On a phone
   there is no slack for that, so the sections that host them clip on the x axis.
   overflow-x: clip rather than hidden, so nothing becomes a scroll container and
   position: sticky keeps working. */
@media (max-width: 900px) {
  .hero, .section, .innov-section, .midcta, .tm-band, .emx, .final-cta,
  .bento-section, .ticker, .security-tinted-split, .lead-band { overflow-x: clip; }
}
@media (max-width: 360px) {
  .cside-card { padding: 20px 18px; }
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ============ MOBILE: TAP TARGETS ============
   Anything a thumb has to hit gets at least ~44px of height. Inline links inside
   running text become inline-flex so they gain the height without breaking the line
   box, and the icon-only controls become square. */
@media (max-width: 1049px) {
  .nav-hamburger { width: 44px; height: 44px; }
  .nav-logo { padding: 3px 0; min-height: 44px; }
}
@media (max-width: 900px) {

  .btn { min-height: 44px; }
  .filter-pill { min-height: 42px; }
  .captab { min-height: 46px; }

  .stickycta-close { width: 40px; height: 40px; }
  .footer-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Inline links: breadcrumbs, the security note, the mailto fallbacks, contact details. */
  .breadcrumb a,
  .security-tech-link,
  .cside-card a,
  .off-item a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* Footer links are their own case: they must stay block level so each column reads
     as a list. flex, not inline-flex, keeps the tap height without the run-on. */
  .footer-col a { display: flex; align-items: center; }
  /* The footer link columns would otherwise gain 44px per row and double in height. */
  .footer-col a { min-height: 40px; }
  /* The legal row's links carry no class of their own. */
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Checkbox and radio inputs ship at 13px. The box itself grows, and the label
     around it becomes the hit area so the text counts too. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; }
  .rfpq-jump a, a.tm-day-win { min-height: 44px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
  }
}

/* A table too wide for a phone scrolls inside its own box rather than widening the page. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }

/* ============ MOBILE: LET TEXT AND TRACKS SHRINK ============ */
@media (max-width: 900px) {
  /* A long URL or identifier has no break opportunity, so it widened the page instead
     of wrapping. "anywhere" rather than "break-word" because it also lowers the
     min-content width, which is what a grid track measures itself against. */
  p, li, td, th, dd, dt, figcaption { overflow-wrap: break-word; }
  a, code { overflow-wrap: anywhere; }

  /* Grid and flex children default to min-width: auto, so one wide descendant forces a
     track wider than the viewport and the rest of the column is clipped with it. */
  .feature-text, .feature-visual, .feature-row > *,
  .lead-inner > * { min-width: 0; }
}

/* iOS Safari zooms the whole page when a focused field's text is under 16px, and it does
   not zoom back out. The demo form is the main conversion path, so every field goes to
   16px on phones. The label and helper text keep their smaller sizes. */
@media (max-width: 900px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="search"], input[type="password"],
  select, textarea,
  /* The three form scopes each set 14px with a class, which outranks a bare element
     selector, so they are named here rather than relying on source order. */
  /* input[type] rather than a bare input: these scopes declare the 14px against
     input[type="text"], so the attribute selector is needed to match their specificity
     and win on source order. */
  .dfx-field input[type], .dfx-field select, .dfx-field textarea,
  .tev-field input[type], .tev-field select, .tev-field textarea,
  .hs-form-frame input[type], .hs-form-frame select, .hs-form-frame textarea { font-size: 16px; }
}

/* ============ COME FIND US (.cfu) ============
   Event cards for /events/. The reader's two questions on a show floor are "when"
   and "which booth", so both get their own block in a left rail rather than being buried
   in a line of prose. Solid blue and grey throughout: the gradient is reserved for CTAs
   and the AI/Plus surfaces. */

.cfu-next { display: flex; flex-direction: column; gap: 22px; }

.cfu-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 30px;
  padding: 28px 30px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-elevated);
  transition: border-color 0.2s ease;
}
.cfu-card:hover { border-color: rgba(36,125,255,0.4); }
.cfu-card::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: var(--brand-blue);
}

.cfu-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* When: a torn-off calendar block. */
.cfu-cal {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 14px 10px 16px; border-radius: 14px;
  border: 1px solid var(--border-strong); background: var(--bg-deep);
}
.cfu-cal-mon {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-text);
}
.cfu-cal-day { font-size: 27px; font-weight: 600; letter-spacing: -0.032em; line-height: 1.12; color: var(--text); }
.cfu-cal-yr { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* Which booth: the number a visitor actually walks the floor looking for. */
.cfu-stand {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 10px; border-radius: 14px; text-align: center;
  background: rgba(36,125,255,0.10); border: 1px solid rgba(36,125,255,0.28);
}
.cfu-stand-lab {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
}
.cfu-stand-no {
  font-family: var(--font-mono); font-size: 16px; font-weight: 700;
  line-height: 1.25; color: var(--brand-text); overflow-wrap: anywhere;
}

.cfu-main { min-width: 0; }
.cfu-name { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.024em; line-height: 1.25; color: var(--text); }
.cfu-facts { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-bottom: 14px; }
.cfu-fact { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.cfu-fact i { font-size: 15px; color: var(--brand-text); flex: 0 0 auto; }

/* Filled in by script from the start date, so it cannot go stale between deploys. */
.cfu-away {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
  padding: 5px 11px 5px 9px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-text);
  background: rgba(36,125,255,0.12); border: 1px solid rgba(36,125,255,0.3);
}
.cfu-away::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-blue); flex: 0 0 auto;
  animation: cfu-blip 2.4s ease-in-out infinite;
}
@keyframes cfu-blip { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.cfu-headline { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.cfu-body { margin: 0 0 22px; font-size: 14.5px; line-height: 1.7; color: var(--text-muted); }

/* ---- Can't make it ---- */
.cfu-remote {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 44px; align-items: center;
  padding: 42px 46px; border: 1px solid var(--border); border-radius: 22px;
  background: var(--bg-elevated);
}
.cfu-remote-copy h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -0.03em; color: var(--text); }
.cfu-remote-copy p { margin: 0 0 24px; max-width: 620px; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.cfu-remote-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.cfu-globe { position: relative; display: grid; place-items: center; width: 172px; height: 172px; }
.cfu-globe-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(36,125,255,0.26); animation: cfu-pulse 4s ease-in-out infinite; }
.cfu-globe-ring:nth-child(1) { inset: 0; }
.cfu-globe-ring:nth-child(2) { inset: 27px; border-color: rgba(36,125,255,0.4); animation-delay: 0.5s; }
.cfu-globe-ring:nth-child(3) { inset: 54px; border-color: rgba(36,125,255,0.56); animation-delay: 1s; }
.cfu-globe i { position: relative; font-size: 34px; color: var(--brand-text); }
@keyframes cfu-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

@media (max-width: 760px) {
  /* The rail turns into a two-up row so "when" and "which booth" stay side by side
     instead of eating two full-width blocks above the copy. */
  .cfu-card { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
  .cfu-rail { flex-direction: row; align-items: stretch; }
  .cfu-cal, .cfu-stand { flex: 1 1 0; min-width: 0; }
  .cfu-name { font-size: 19px; }
  .cfu-remote { grid-template-columns: 1fr; gap: 30px; padding: 30px 22px; }
  .cfu-remote-side { display: flex; justify-content: center; }
  .cfu-globe { width: 148px; height: 148px; }
  .cfu-globe-ring:nth-child(2) { inset: 23px; }
  .cfu-globe-ring:nth-child(3) { inset: 46px; }
}
@media (max-width: 420px) {
  .cfu-remote-cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cfu-away::before, .cfu-globe-ring { animation: none; }
}

/* ============ OMS CUSTOMER RESULTS (.omsr) ============
   Real reported figures from a customer's Ship from Store rollout. The headline number
   carries the section, with the two monthly uplifts drawn to scale beside it so the
   trend is visible rather than just asserted. Solid blue, no gradient. */

.omsr { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 20px; margin-bottom: 20px; }

.omsr-lead {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 34px 36px; border-radius: 20px;
  border: 1px solid rgba(36,125,255,0.28); background: rgba(36,125,255,0.07);
}
.omsr-big { display: flex; flex-direction: column; gap: 8px; }
.omsr-big-val { font-size: clamp(46px, 6.4vw, 74px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.omsr-big-lab { font-size: 14px; font-weight: 600; }
.omsr-note { margin: 0; font-size: 14px; line-height: 1.7; }

.omsr-uplift {
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px 30px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.omsr-uplift-head {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; 
}
.omsr-bars { display: flex; align-items: flex-end; gap: 26px; flex: 1 1 auto; min-height: 168px; }
.omsr-bar { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; height: 100%; justify-content: flex-end; }
.omsr-bar-val { font-size: 21px; font-weight: 600; letter-spacing: -0.028em; }
.omsr-bar-col { display: flex; align-items: flex-end; width: 100%; max-width: 74px; flex: 1 1 auto; }
.omsr-bar-fill { display: block; width: 100%; border-radius: 8px 8px 3px 3px; min-height: 8px; }
.omsr-bar-lab { font-size: 11.5px; text-align: center; line-height: 1.35; }
.omsr-avg {
  display: flex; align-items: center; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 600; 
}
.omsr-avg i { font-size: 17px; flex: 0 0 auto; }

.omsr-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.omsr-stat {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 24px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.omsr-stat strong { font-size: 27px; font-weight: 600; letter-spacing: -0.032em; }
.omsr-stat span { font-size: 13px; line-height: 1.55; }

.omsr-src { margin: 20px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-faint); }

@media (max-width: 900px) {
  .omsr { grid-template-columns: 1fr; }
  .omsr-lead { padding: 28px 24px; }
  .omsr-uplift { padding: 24px 22px; }
  .omsr-row { grid-template-columns: 1fr; }
  .omsr-stat { flex-direction: row; align-items: baseline; gap: 14px; }
  .omsr-stat strong { flex: 0 0 auto; }
}

/* The percent sign rides smaller than the number, matching the stat ticker. */
.omsr-big-pct { font-size: 0.52em; font-weight: 600; letter-spacing: -0.02em; }

/* ============ EVENT ARCHIVE (.evy / .evc) ============
   Twenty-odd past shows, grouped by year so the list stays scannable. Cards are the
   photo first: the point of this section is that the team is physically present, and a
   picture of the stand says that faster than a paragraph. Every card is the same 4:3
   crop, so the grid holds its rhythm regardless of how the source photo was shot. */

.evy { margin-bottom: 120px; }
.evy:last-child { margin-bottom: 0; }
/* Each year pins under the nav (85px) and rides along while its own shows scroll
   past, then the next year pushes it out: the archive reads as moving through
   chapters rather than as one continuous grid. */
.evy-head {
  position: sticky; top: 96px; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 30px; padding: 13px 24px 14px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent, #4D94FF) 17%, var(--bg-deep));
}
.evy-year {
  margin: 0; font-size: 54px; font-weight: 700; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text);
  display: flex; align-items: center; gap: 14px;
}
/* a lit marker opens each year, so scrolling the archive reads as passing milestones */
.evy-year::before {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent, var(--brand-blue));
  box-shadow:0 0 0 4px var(--bg-deep), 0 0 14px 3px var(--accent-line, rgba(7, 9, 26, 0.08));
}
.evy-count {
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: none; color: var(--text-muted);
  padding: 5px 11px; border-radius: 100px;
  background: var(--accent-soft, rgba(77, 148, 255, 0.12));
  border: 1px solid var(--accent-line, var(--border));
}
.evy-rule { display: none; }

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

.evc {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.evc:hover { border-color: rgba(36,125,255,0.45); transform: translateY(-3px); }

.evc-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-deep); }
.evc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
a.evc:hover .evc-media img { transform: scale(1.045); }
.evc-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,7,15,0.55) 0%, rgba(6,7,15,0.08) 38%, transparent 62%);
}

/* Booth number, or the label for an off-floor dinner or lunch. */
.evc-kind {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: #fff;
  padding: 5px 9px; border-radius: 100px;
  background: rgba(5,6,14,0.62); border: 1px solid rgba(255,255,255,0.26);

}
.evc-go {
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: #fff; background: rgba(5,6,14,0.55); border: 1px solid rgba(255,255,255,0.24);
  font-size: 14px; opacity: 0; transition: opacity 0.2s ease;

}
a.evc:hover .evc-go { opacity: 1; }

/* No photo yet: a solid typographic panel rather than a hole in the grid. Solid tones,
   since the gradient is reserved for CTAs and the AI surfaces. */
.evc.is-ink .evc-media { display: grid; place-items: center; padding: 22px; }
.evc.is-ink.tone-0 .evc-media { background: #0e1a38; }
.evc.is-ink.tone-1 .evc-media { background: #101A38; }
.evc.is-ink.tone-2 .evc-media { background: #16181f; }
.evc-fallback {
  font-size: 21px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.2;
  text-align: center; color: rgba(255,255,255,0.5);
}

.evc-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.evc-name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--text); }
.evc-meta { display: flex; flex-direction: column; gap: 4px; }
/* Direct children only. A descendant selector also caught the inner label wrapper and
   made it a second flex container, which put a 6px gap in front of the country. */
.evc-meta > span { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-faint); }
.evc-meta i { font-size: 14px; flex: 0 0 auto; margin-top: 1px; }
/* Clamped so a long recap cannot make one card taller than its row. */
.evc-blurb {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--text-muted);
}

@media (max-width: 1000px) { .evy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .evy-grid { grid-template-columns: 1fr; gap: 20px; }
  .evy-year { font-size: 38px; gap: 11px; }
  .evy-year::before { width: 9px; height: 9px; }
  .evy-head { gap: 12px; margin-bottom: 22px; padding: 11px 18px 12px; top: 92px; }
  .evy { margin-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .evc, .evc-media img, .evc-go { transition: none; }
  a.evc:hover { transform: none; }
  a.evc:hover .evc-media img { transform: none; }
}

/* Region and country. The archive spans three continents, and "Barcelona" or "ExCeL"
   only tells you that if you already know the venue. The chip gives the region at a
   glance and the country is spelled out in the location line underneath. */
.evc-region {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.005em; text-transform: none; color: #fff;
  padding: 5px 9px; border-radius: 100px;
  background: rgba(36,125,255,0.42); border: 1px solid rgba(255,255,255,0.3);

}
.evc-country, .cfu-country { font-weight: 600; color: var(--text-muted); }
.cfu-country { color: var(--text); }

/* ============ TEAMWORKCARES PROGRAM PILLARS (.cpil) ============
   Eight compact cards guiding volunteering and giving. Four across so all eight sit in
   two rows on desktop; the lists are short examples, not exhaustive programs. Solid
   accents only, per the gradient rule. */
.cpil-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cpil {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 20px 22px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-elevated); transition: border-color 0.2s ease;
}
.cpil:hover { border-color: rgba(36,125,255,0.4); }
.cpil-head { display: flex; align-items: center; gap: 10px; }
.cpil-ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(36,125,255,0.12); border: 1px solid rgba(36,125,255,0.28);
}
.cpil-ico i { font-size: 18px; color: var(--brand-text); }
.cpil-name { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--text); }
.cpil-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.cpil-list li {
  position: relative; padding-left: 14px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.cpil-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-blue); opacity: 0.65;
}
@media (max-width: 1100px) { .cpil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cpil-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cpil { transition: none; } }

/* ============ HERO POS: GRAND PASS ============
   The receipt now performs the sale on a loop with a visible touch point driving it,
   the device answers the pointer with a shallow 3D tilt, a keylight sweeps the frame
   once per cycle, and the under-glow pulses green when the sale lands. All of it sits
   behind prefers-reduced-motion; without JS the markup still ships the finished sale. */

/* Pointer tilt. The stage provides perspective; JS feeds the two custom properties. */
.hpos-stage { perspective: 1300px; }
.hpos-device {
  /* The pose is the composition: at rest the device stands turned toward the copy like
     a product shot, and the pointer tilt plays on top of it. Flat below 1041px where
     the layout is a single centered column. */
  transform: rotateX(calc(var(--posex, 0deg) + var(--tiltx, 0deg)))
             rotateY(calc(var(--posey, 0deg) + var(--tilty, 0deg)));
  transform-style: preserve-3d;
  transition: box-shadow 0.4s ease;
}
@media (min-width: 1041px) {
  /* Face-on and flat at rest. The dimensionality lives in the pointer response: the
     tilt and the screen's 16px lift only reveal themselves when the visitor moves,
     which is the difference between a posed render and hardware that answers you. */
  .hpos-device { --posex: 0deg; --posey: 0deg; }
  /* the turned face catches a fixed sheen so the pose reads as lit, not skewed */
  .hpos-screen.srx { position: relative; }
  .hpos-screen.srx::before {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(105deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.035) 30%, transparent 55%);
  }
  .hpos-stage { max-width: min(700px, 100%); }
}
/* On wide screens the device breaks the container's right edge, which is what makes it
   read as an object in the scene rather than content in a column. The hero clips it. */
@media (min-width: 1240px) {
  .hpos-stage { max-width: 800px; margin-right: -72px; }
}
.hpos-device.is-tilting { will-change: transform; }

/* Keylight: a specular band that sweeps the frame once per cycle. On the frame's own
   padding ring, clipped so it never washes over the screen content. */
.hpos-device::after {
  content: ''; position: absolute; inset: 0; border-radius: 26px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.20) 46%, rgba(255,255,255,0.44) 50%, rgba(255,255,255,0.20) 54%, transparent 70%);
  background-size: 260% 100%; background-position: 130% 0;
  opacity: 0;
}
.hpos-device.is-sweep::after {
  opacity: 1;
  animation: hpos-sweep 1.6s cubic-bezier(0.3, 0.1, 0.3, 1) forwards;
}
@keyframes hpos-sweep {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* The touch point that walks through the sale: slide, tap Disc, tap PAY. JS moves it;
   the press is a ring that collapses onto the dot. */
.hpos-touch {
  position: absolute; z-index: 6; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 38% 34%, rgba(255,255,255,0.8), rgba(255,255,255,0.4) 58%, rgba(255,255,255,0.16));
  box-shadow:0 3px 10px rgba(7, 9, 26, 0.35), inset 0 0 0 1px rgba(255,255,255,0.35);
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.28s ease, transform 0.28s ease,
              left 0.55s cubic-bezier(0.3, 0.1, 0.25, 1), top 0.55s cubic-bezier(0.3, 0.1, 0.25, 1);
}
.hpos-touch.is-on { opacity: 0.7; transform: scale(1); }
.hpos-touch.is-press { animation: hpos-press 0.42s ease; }
@keyframes hpos-press {
  0% { box-shadow:0 4px 14px rgba(7,9,26,0.45), 0 0 0 0 rgba(255,255,255,0.55); transform: scale(1); }
  35% { transform: scale(0.82); }
  100% { box-shadow:0 4px 14px rgba(7,9,26,0.45), 0 0 0 22px rgba(255,255,255,0); transform: scale(1); }
}

/* At the paid beat a green wash sweeps up the whole screen, then drains. */
.hpos-screen.srx::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(to top, rgba(52, 199, 89, 0.30), rgba(52, 199, 89, 0.05) 55%, transparent 80%);
  opacity: 0; transition: opacity 0.5s ease;
}
.hpos-device.is-paidwash .hpos-screen.srx::after { opacity: 1; }
.hpos-screen.srx { position: relative; }

/* The under-glow celebrates the paid state, then settles. */
.hpos-shadow { transition: background 0.6s ease, opacity 0.6s ease; }
.hpos-stage.is-celebrate .hpos-shadow {
  background: radial-gradient(ellipse at center, rgba(52, 168, 83, 0.44), transparent 70%);
  opacity: 1.0;
}

/* Between cycles the screen wipes to a fresh sale instead of snapping. */
.hpos-armed .srx-body, .hpos-armed .srx-head { transition: opacity 0.32s ease; }
.hpos-device.is-wiping .srx-body, .hpos-device.is-wiping .srx-head { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  /* the pose is a static composition, so it stays; everything that moves goes */
  .hpos-device { transform: rotateX(var(--posex, 0deg)) rotateY(var(--posey, 0deg)); }
  .hpos-device::after { display: none; }
  .hpos-touch { display: none; }
  .hpos-screen.srx::after { display: none; }
}

/* ============ HERO POS: DEPTH + NARRATION ============ */

/* Real depth under the tilt: the screen floats above the frame, so the two planes
   separate as the device turns. Fine pointers only; flat everywhere else. */
@media (pointer: fine) {
  .hpos-device .hpos-screen { transform: translateZ(16px); }
}

/* Narration chips: glass pills that name what the demo just did, in the voice of the
   fan bubbles further down the page. Created by JS, so no-JS pages never see them. */
.hpos-chip {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 100px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  color: rgba(255,255,255,0.92); background: rgba(18, 20, 34, 0.72);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow:0 18px 26px -18px rgba(7, 9, 26, 0.6);

  opacity: 0; transform: translateY(8px) scale(0.94);
  transition: opacity .32s ease, transform .55s cubic-bezier(0.34, 1.5, 0.55, 1);
  pointer-events: none;
}
.hpos-chip.is-on { opacity: 1; transform: none; }
.hpos-chip .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: #34C759; box-shadow:0 0 0 0 rgba(52, 199, 89, 0.5);
  animation: hpos-chip-pulse 1.8s ease-out infinite;
}
@keyframes hpos-chip-pulse {
  0% { box-shadow:0 0 0 0 rgba(52, 199, 89, 0.5); }
  70% { box-shadow:0 0 0 8px rgba(52, 199, 89, 0); }
  100% { box-shadow:0 0 0 0 rgba(52, 199, 89, 0); }
}
.hpos-chip-rfid { top: -16px; left: -12px; }
/* Off the device's bottom corner: the 3D pose recedes the right edge, so anything
   anchored beside it would sit over the totals column instead of hanging off it. */
/* left, not right: the phone now occupies the iPad's bottom-right corner */
  .hpos-chip-pay { bottom: -16px; left: 24px; right: auto; }
/* The chips hang off the device edges, which there is no room for on small screens. */
@media (max-width: 700px) { .hpos-chip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hpos-chip { display: none; }
  .hpos-device .hpos-screen { transform: none; }
  .hpos-chip .pulse-dot { animation: none; }
}

/* ============ HERO POS: THE COOL KIT ============
   Visual treatment only; the layout does not move. */

/* The beam: a point of light orbiting the device frame. Runs on a registered custom
   property; browsers without @property keep the static gradient border they had. */
@property --beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hpos-device::before {
  content: ''; position: absolute; inset: -2px; border-radius: 30px; z-index: 1;
  pointer-events: none; padding: 1.5px;
  background: conic-gradient(from var(--beam),
    transparent 0 74%,
    rgba(120, 180, 255, 0.75) 84%,
    rgba(255, 255, 255, 0.95) 88%,
    rgba(120, 148, 255, 0.75) 92%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
}
@keyframes hpos-beam { to { --beam: 360deg; } }
/* At rest the frame is quiet titanium. The light exists only when the story calls it:
   two fast blue orbits while the basket is read, one slow green pass at the paid beat. */
.hpos-device.is-scan::before { opacity: 1; animation: hpos-beam 0.9s linear infinite; }
.hpos-device.is-payflash::before { opacity: 1; animation: hpos-beam 2.2s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .hpos-device::before, .hpos-hero .os-grad { animation: none; }
}

/* ============ HERO POS: SHOWPIECE CUT ============ */

/* Power-on. A dark glass veil sits over the screen until the first cycle blooms it
   away. JS creates the veil and drives the classes, so no-JS never sees it. */
.hpos-bootveil {
  position: absolute; inset: 12px; z-index: 7; border-radius: 17px; pointer-events: none;
  background: linear-gradient(155deg, #0d101c 0%, #070910 55%, #0b0e18 100%);
  opacity: 0;
}
.hpos-device.is-boot .hpos-bootveil { opacity: 1; }
.hpos-device.is-booton .hpos-bootveil { animation: hpos-bloom 0.75s ease forwards; }
@keyframes hpos-bloom {
  0%   { opacity: 1; box-shadow:inset 0 0 0 0 rgba(255,255,255,0); }
  40%  { opacity: 1; box-shadow:inset 0 0 140px 40px rgba(255, 255, 255, 0.4); }
  100% { opacity: 0; box-shadow:inset 0 0 200px 80px rgba(255, 255, 255, 0); }
}

/* The products fly into their rows. Each swatch starts scattered off its position,
   oversized and airborne, and drops in as the row lands: the basket being read. */
.hpos-armed [data-srx-item].is-on .srx-swatch {
  animation: srx-fly 0.62s cubic-bezier(0.22, 0.9, 0.3, 1.12) backwards;
}
.srx-items li:nth-child(1) { --fx: -74px; --fy: -58px; --fr: -16deg; }
.srx-items li:nth-child(2) { --fx: 96px;  --fy: -44px; --fr: 11deg; }
.srx-items li:nth-child(3) { --fx: -56px; --fy: -96px; --fr: -9deg; }
.srx-items li:nth-child(4) { --fx: 84px;  --fy: -78px; --fr: 15deg; }
@keyframes srx-fly {
  0% {
    opacity: 0;
    transform: translate(var(--fx, 60px), var(--fy, -80px)) scale(1.8) rotate(var(--fr, 12deg));
    filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.35));
  }
  30% { opacity: 1; }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* Green ring for the paid pass. */
.hpos-device.is-payflash::before {
  background: conic-gradient(from var(--beam),
    transparent 0 62%,
    rgba(52, 199, 89, 0.85) 78%,
    rgba(214, 255, 227, 1) 84%,
    rgba(52, 199, 89, 0.85) 90%,
    transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hpos-bootveil { display: none; }
  .hpos-armed [data-srx-item].is-on .srx-swatch { animation: none; }
}

/* ============ HERO POS: CAMERA ============
   A camera layer inside the screen. JS wraps the receipt's content in .srx-cam and
   drives three moves per cycle: push in on the scarf row while the discount happens,
   pull wide for the payment, and a small punch when PAID lands. The screen's own
   overflow clips the zoomed content at the bezel, so the frame never moves. */
.srx-cam {
  height: 100%; display: flex; flex-direction: column;
  transform: scale(var(--cam, 1)) translate(var(--camdx, 0px), var(--camdy, 0px));
  transform-origin: 50% 45%;
  transition: transform 1.05s cubic-bezier(0.3, 0.75, 0.2, 1);
}
.srx-cam.cam-punch { animation: hpos-punch 0.55s cubic-bezier(0.34, 1.3, 0.5, 1); }
@keyframes hpos-punch {
  0% { transform: scale(1); }
  35% { transform: scale(1.028); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .srx-cam { transition: none; animation: none; }
}

/* ============ EVENTS HERO (.evhero) ============
   Split hero: copy left, the team photo whole on the right. The picture is the point,
   so it renders at its natural aspect with no cover-crop and no scrim. */
.evhero { position: relative; overflow: hidden; padding: 40px 0 64px; }
.evhero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  gap: 56px; align-items: center;
}
/* .hero .evhero-title outranks the generic .hero h1 rule, which was winning and rendering
   this at 96px / 0.94 line-height. Sized to match the careers split hero. */
.hero .evhero-title {
  margin: 18px 0 16px;
  font-size: clamp(38px, 5.4vw, 62px); font-weight: 600;
  letter-spacing: -0.04em; line-height: 1.04; color: #ffffff;
}
.evhero-sub { margin: 0 0 26px; max-width: 520px; font-size: 16px; line-height: 1.7; color: var(--text-muted); }
.evhero .hero-cta { justify-content: flex-start; margin: 0; }

.evhero-media { position: relative; }
.evhero-media img {
  display: block; width: 100%; height: auto;
  border-radius: 20px; border: 1px solid var(--border-strong);
  box-shadow:0 30px 26px -24px rgba(7, 9, 26, 0.45);
}
.evhero-tag {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(5, 6, 14, 0.62); border: 1px solid rgba(255,255,255,0.24);

}
.evhero-tag i { font-size: 14px; }

@media (max-width: 980px) {
  .evhero { padding: 24px 0 48px; }
  .evhero-grid { grid-template-columns: 1fr; gap: 30px; }
  .evhero-sub { max-width: none; }
}

/* ============ FOOTER LAYOUT ============
   The legal row's flex used to live in an inline style attribute; it is a class now.
   The external-link glyph rides small and dimmed so Partner Portal and Support Portal
   still scan as single lines rather than as decorated buttons. */
.footer-legal { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer-ext { font-size: 11.5px; opacity: 0.6; margin-left: 3px; }

/* Between six columns and the existing 900px two-column tier, three columns with the
   brand on its own row. The 900px and 600px tiers give the brand a full row too. */
@media (max-width: 1180px) and (min-width: 901px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .footer-brand { grid-column: 1 / -1; } }

/* ============ AI SHOWCASE (.aix) ============
   Shared treatment for the sections about AI. AI is the differentiator, so
   these sections get a lit stage instead of a plain two-column row: an aurora behind
   the section, a gradient-edged frame around the screenshot, an aura that sweeps the
   device, and chips that arrive in sequence to suggest the model working. Everything
   animated is class driven and stops under prefers-reduced-motion. */

.aix { position: relative; overflow: hidden; }
.aix::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 52% at 78% 34%, rgba(47, 88, 214, 0.20), transparent 70%),
    radial-gradient(40% 46% at 20% 66%, rgba(36, 125, 255, 0.16), transparent 72%);
}
.aix > .container { position: relative; z-index: 1; }

/* the eyebrow becomes a lit pill so the section announces itself */
.aix-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px; border-radius: 100px; margin-bottom: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: -0.005em; color: #fff;
  background: var(--gradient);
  box-shadow:0 14px 30px -14px rgba(7, 9, 26, 0.3);
}
.aix-badge i { font-size: 15px; }

/* the stage: gradient-edged frame, aura sweep, floating screenshot */
.aix-stage { display: flex; justify-content: center; }

/* the device breathes */
@keyframes aix-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* chips that arrive in sequence, suggesting the model answering */
.aix-chip {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 100px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: rgba(14, 16, 32, 0.82); border: 1px solid rgba(255,255,255,0.2);
  box-shadow:0 18px 30px -18px rgba(7, 9, 26, 0.7);

  opacity: 0; transform: translateY(10px) scale(0.94);
  transition: opacity .38s ease, transform .6s cubic-bezier(0.34, 1.5, 0.55, 1);
}
.aix-chip.is-on { opacity: 1; transform: none; }
.aix-chip i { font-size: 14px; color: #A7B9FF; }
/* no room to hang chips off the edges on a phone */
@media (max-width: 760px) { .aix-chip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .aix-chip { display: none; }
}

/* The homepage's AI duo card gets a gradient edge and a lit kicker, so the one card
   about AI is visibly the different one in that row of three. */
.duo-card-ai {
  background: linear-gradient(160deg, rgba(47, 88, 214,0.07), rgba(36,125,255,0.05)) padding-box,
              linear-gradient(160deg, rgba(47, 88, 214,0.55), rgba(36,125,255,0.35)) border-box;
  border: 1px solid transparent;
}
.duo-kicker-ai { display: inline-flex; align-items: center; gap: 6px; }
.duo-kicker-ai i { font-size: 14px; }

/* ============ AI SHOWCASE: CALLED-OUT BAND (.aix-band / .aix-split) ============
   The AI sections are the differentiator, so they get a gradient band of their own
   rather than sitting on the page background. The device sits between two bullet
   columns: the capabilities read as things happening on the screen in the middle.
   Gradient is allowed here by the site's own rule, which reserves it for AI, Plus
   and CTAs. */

.aix-band {
  border-top: 1px solid rgba(47, 88, 214, 0.28);
  border-bottom: 1px solid rgba(36, 125, 255, 0.24);
  background:
    radial-gradient(58% 60% at 50% 0%, rgba(47, 88, 214, 0.30), transparent 72%),
    radial-gradient(52% 55% at 12% 88%, rgba(36, 125, 255, 0.22), transparent 74%),
    radial-gradient(48% 50% at 92% 76%, rgba(47, 88, 214, 0.16), transparent 74%),
    linear-gradient(180deg, #0a0a1e 0%, #091020 52%, #080a18 100%);
}
/* the base .aix radials would double up on the band */
.aix-band::before { display: none; }
[data-theme="light"] .aix-band {
  background:
    radial-gradient(58% 60% at 50% 0%, rgba(47, 88, 214, 0.13), transparent 72%),
    radial-gradient(52% 55% at 12% 88%, rgba(36, 125, 255, 0.10), transparent 74%),
    linear-gradient(180deg, #F6F9FF 0%, #f3f2fd 52%, #f8f9ff 100%);
}

.aix-head { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.aix-head h2 { margin: 0 0 16px; }
/* Matches .section-sub, so the AI band's lede sits on the same scale as every other
   section lede on the page. */
.aix-head p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--text-muted); }
.aix-head .section-title { margin: 0 0 16px; }
.aix-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 46px; }

/* three tracks: bullets, device, bullets */
.aix-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 34px; align-items: center;
}
.aix-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.aix-points li { display: flex; flex-direction: column; gap: 5px; position: relative; }
.aix-points b { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.aix-points span { font-size: 14px; line-height: 1.7; color: var(--text-muted); }
/* hairline on the inner edge, pointing at the device */
.aix-points-l li { text-align: right; padding-right: 16px; border-right: 2px solid rgba(47, 88, 214, 0.38); }
.aix-points-r li { padding-left: 16px; border-left: 2px solid rgba(36, 125, 255, 0.38); }

/* a thinking indicator on the glass while the chips arrive */

@media (max-width: 1080px) {
  /* device first, then the bullets as one column beneath it */
  .aix-split { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
  .aix-stage { order: -1; }
  .aix-points { width: 100%; max-width: 560px; gap: 20px; }
  .aix-points-l li { text-align: left; padding-right: 0; padding-left: 16px; border-right: 0; border-left: 2px solid rgba(47, 88, 214, 0.38); }
  .aix-head { margin-bottom: 32px; }
}

/* In the split layout the device is centred, so the original chip offsets pushed the
   answers onto the middle of the glass and covered the product imagery. Here they
   straddle the frame edges instead: half on the device, half in the gutter, which
   reads as annotation without hiding the screen. Only inside .aix-split, so the
   older single-column AI sections keep their own placement. */
.aix-split .aix-chip { font-size: 12px; padding: 7px 12px; }

/* A section may carry two points per side rather than three; space them out so the
   columns still read as flanking the device instead of clustering at its middle. */
.aix-points:has(li:nth-child(2):last-child) { gap: 40px; }


/* ============ 121 COMMERCE CONVERSATION PANEL (.aiq) ============
   The AI Agent screen rebuilt in the page rather than shown as a screenshot, so the
   answer and the results arrive on the glass. Deliberately light inside the device
   whatever the site theme is, because that is what the product looks like. */

.aiq { position: relative; width: 100%; margin: 0 auto; }
.aiq-phone {
  /* Pro Max form factor: flat polished-metal band around a near-black bezel, thin
     uniform bezels, large corner radii, Action and volume buttons left, side button
     and Camera Control right (drawn by the ::before below). */
  position: relative; border-radius: 56px; padding: 8px;
  border: 4px solid transparent;
  background:
    linear-gradient(#0a0a0d, #0a0a0d) padding-box,
    linear-gradient(160deg, #a3a7ae 0%, #7c8088 18%, #9ea1a8 40%, #6b6f77 62%, #a0a3aa 84%, #80848c 100%) border-box;
  box-shadow:0 46px 70px -34px rgba(7, 9, 26, 0.3), 0 0 0 1px rgba(30,33,40,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.aiq-phone::before {
  /* side buttons, painted as bars just outside the band: left = Action, volume up, volume down;
     right = side button, Camera Control */
  content: ''; position: absolute; inset: -4px -8px; pointer-events: none;
  background:
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 122px / 4px 26px no-repeat,
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 174px / 4px 54px no-repeat,
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 240px / 4px 54px no-repeat,
    linear-gradient(270deg, #9a9ea6, #4e525a) 100% 200px / 4px 92px no-repeat,
    linear-gradient(270deg, #9a9ea6, #4e525a) 100% 470px / 4px 46px no-repeat;
}
.aiq-screen {
  position: relative; border-radius: 44px; overflow: hidden;
  background: #fff; color: #111; 
  display: flex; flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--font-body), sans-serif;
}
.aiq-notch {
  position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 100px; background: #0b0c11; z-index: 6;
}

/* status bar */
.aiq-status {
  display: flex; align-items: center; justify-content: space-between;
  color: #111;
}
.aiq-status-r { display: flex; align-items: center; }
.aiq-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.aiq-bars i { width: 2.5px; background: #111; border-radius: 1px; display: block; }
.aiq-bars i:nth-child(1) { height: 3px; } .aiq-bars i:nth-child(2) { height: 5px; }
.aiq-bars i:nth-child(3) { height: 7px; } .aiq-bars i:nth-child(4) { height: 9px; }

/* the conversation */
/* Bottom-anchored, the way a real conversation is: the thread sits on the input bar and
   growing content pushes the oldest text off the top rather than overflowing the bottom.
   That keeps whatever just arrived (the answer, then the product results) in view at
   any text wrapping or screen width, with no scroll transform to tune. */

@keyframes aiq-dot { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.aiq-line {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: #1c1c22;
  opacity: 0; transform: translateY(6px);
  transition: opacity .34s ease, transform .5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.aiq-line.is-on { opacity: 1; transform: none; }
.aiq-line b { font-weight: 700; }

/* the results that pop onto the glass */
.aiq-tile {
  opacity: 0; transform: translateY(10px) scale(0.94);
  transition: opacity .3s ease, transform .55s cubic-bezier(0.34, 1.5, 0.55, 1);
}
.aiq-tile.is-on { opacity: 1; transform: none; }
.aiq-tile img { width: 100%; height: 100px; object-fit: cover; object-position: 50% 22%; display: block; border-radius: 9px; background: #f4f4f7; }
.aiq-tile b { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 600; color: #111; letter-spacing: -0.01em; }

/* input bar */

@media (max-width: 1080px) { .aiq { max-width: 330px; } }
@media (prefers-reduced-motion: reduce) {
  .aiq-line, .aiq-tile { opacity: 1; transform: none; }
}

/* the conversation */

.aixb-line {
  margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.88);
  opacity: 0; transform: translateY(6px);
  transition: opacity .34s ease, transform .5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.aixb-line.is-on { opacity: 1; transform: none; }
.aixb-line b { font-weight: 700; color: #fff; }

/* the results, as media tiles */
.aixb-tile {
  display: block; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:0 26px 48px -30px rgba(2, 7, 20, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  opacity: 0; transform: translateY(12px) scale(0.94);
  transition: opacity .42s ease, transform .6s cubic-bezier(0.34, 1.4, 0.55, 1);
}
.aixb-tile.is-on { opacity: 1; transform: none; }
.aixb-tile img { width: 100%; height: 132px; object-fit: cover; object-position: 50% 20%; display: block; }
.aixb-tile b {
  display: block; padding: 9px 11px 11px; font-size: 12.5px; font-weight: 600; color: #fff;
}

/* the capability copy, as list panels */

@media (prefers-reduced-motion: reduce) {
  .aixb-line, .aixb-tile { opacity: 1; transform: none; }
}

/* Below three comfortable columns the collage becomes one column, with the
   conversation first because it is the thing the section is about. */
@media (max-width: 1040px) {
  .aixb-tile img { height: 168px; }
}
@media (max-width: 520px) {
  .aixb-tile img { height: 128px; }
}

/* ---- Customer record rows (.crec-*) -------------------------------------------
   The five customer-data capabilities as numbered fields separated by hairlines,
   the way a record's fields read. Sits beside the drawn profile card (.crx). */
/* the fields */
.crec-fields { display: flex; flex-direction: column; }
.crec-row {
  display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: 14px;
  padding: 19px 26px; border-top: 1px solid var(--border);
}
.crec-row:first-child { border-top: none; }
.crec-no {
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600;
  color: var(--text-faint); padding-top: 5px; letter-spacing: 0.04em;
}
.crec-ico {
  width: 34px; height: 34px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; font-size: 17px;
  color: var(--brand-blue); background: var(--brand-soft);
}
.crec-row:nth-child(even) .crec-ico { color: var(--brand-purple); background: rgba(80, 120, 245, 0.10); }
.crec-text { min-width: 0; }
.crec-text b { display: block; font-size: 15.5px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.crec-text p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

@media (max-width: 900px) {
  .crec-row { padding: 17px 22px; gap: 12px; }
}
@media (max-width: 560px) {
  /* the field number goes: at this width the icon and the name carry the row */
  .crec-row { grid-template-columns: auto 1fr; }
  .crec-no { display: none; }
}

/* ---- Depth rig for the AI split ----------------------------------------------
   The section read flat because everything sat on one plane: no light source, no
   layering, nothing moving. This adds the depth cues instead of a tilt, which
   skews the screen content and was already rejected on the homepage hero.
     - an ambient light behind the device, so it is lit rather than pasted on
     - a deep cast shadow plus a contact shadow beneath it, so it has somewhere to sit
     - a slow idle float, so it reads as suspended
     - scroll parallax, on .aix-stage, at a different rate from the copy columns
   Float lives on .aiq and parallax on .aix-stage so the two transforms never
   fight over the same element. */
.aix-split { position: relative; }
.aix-stage { position: relative; }

/* ambient light */
.aix-stage::before {
  content: ''; position: absolute; left: 50%; top: 42%;
  width: 178%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle,
    rgba(105, 140, 255, 0.5), rgba(36, 125, 255, 0.2) 38%, transparent 64%);
  filter: blur(34px);
}

/* A vignette was tried here and removed: placed inside .aix-split it painted over the
   lede and the CTA buttons and dimmed them, and pulled down the contrast of the copy
   columns. Depth comes from the scale hierarchy below instead. */

/* Rim light along the top of the device, so the light above it is believable. */
.aix-split .aiq-phone::after {
  content: ''; position: absolute; inset: -3px; border-radius: 56px;
  pointer-events: none;
  background: linear-gradient(174deg, rgba(255, 255, 255, 0.3), transparent 16%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px;
}
/* contact shadow, so the device sits on something */
.aix-stage::after {
  content: ''; position: absolute; left: 50%; bottom: -14px;
  width: 62%; height: 26px; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse, rgba(1, 5, 16, 0.75), transparent 70%);
  filter: blur(11px);
}
.aix-stage .aiq { position: relative; z-index: 1; }

.aix-split .aiq-phone {
  box-shadow:0 82px 110px -46px rgba(2, 9, 26, 0.9),
    0 34px 56px -30px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

@media (prefers-reduced-motion: no-preference) {
  .aix-stage .aiq { animation: aix-float 7.5s ease-in-out infinite; }
}
@keyframes aix-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Parallax: the driver writes --aixp, the copy columns take a fraction of it in
   the opposite direction, which is what separates the planes as the page moves. */
.aix-stage { transform: translateY(calc(var(--aixp, 0) * 1px)); will-change: transform; }
.aix-points { transform: translateY(calc(var(--aixp, 0) * -0.42px)); will-change: transform; }

/* Connectors reaching from each point toward the device, in the same brand colour as
   that side's rail. An earlier pass here also restyled the rails themselves to flat
   grey, which lost the purple/blue coding and read duller, not deeper; the rails are
   left alone now and only the connector is added. */
.aix-points li::after {
  content: ''; position: absolute; top: 12px; width: 24px; height: 1px;
  pointer-events: none;
}
.aix-points-l li::after { right: -24px; background: linear-gradient(270deg, rgba(47, 88, 214, 0.55), transparent); }
.aix-points-r li::after { left: -24px;  background: linear-gradient(90deg,  rgba(36, 125, 255, 0.55), transparent); }

@media (max-width: 1040px) {
  /* stacked, so there are no planes to separate and no connectors to draw */
  .aix-stage, .aix-points { transform: none; }
  .aix-points li::after { display: none; }
}

/* ---- Scale hierarchy for the AI split ----------------------------------------
   The section read flat because it was three even columns at one scale, all
   centred: no foreground, so nothing to read first. The device now takes a wider
   track and more size, so it leads and the copy reads as support around it. */
.aix-band .aix-split {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.5fr) minmax(0, 0.92fr);
  gap: 26px;
}
.aix-band .aix-stage .aiq { max-width: 392px; }
.aix-band .aix-points b { font-size: 16.5px; }

@media (max-width: 1180px) {
  .aix-band .aix-split { gap: 20px; }
  .aix-band .aix-stage .aiq { max-width: 344px; }
}
@media (max-width: 1040px) {
  /* stacked: the device is the only thing in its row, so it can take real width */
  .aix-band .aix-split { grid-template-columns: 1fr; }
  .aix-band .aix-stage .aiq { max-width: 372px; }
}

/* ============================================================================
   AI app screen (.apx)
   A faithful rebuild of the AI Agent screen from the reference capture: the
   five-icon toolbar with chat active, the question, the sparkle answer, the
   full-bleed two-column result grid with truncated titles and descriptions, the
   floating voice bar, and the bottom tab bar. Reuses the .aiq phone shell.
   The TestFlight back-link in the capture is deliberately not reproduced: it is
   a beta-distribution artifact, not part of the product.
   Product titles and descriptions are written in full and truncated by CSS, so
   the ellipsis is real at any width rather than baked into the string.
   ========================================================================== */
.aiq { max-width: 380px; }
.aiq-screen { height: 780px; }   /* 358px screen width at the capture's 2.17 ratio */

/* toolbar */
.apx-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  margin: 6px 12px 8px; padding: 5px; border-radius: 100px; background: #efeff3;
}
.apx-bar span {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 100px; font-size: 18px; color: #3c3c43;
}
.apx-bar span.is-on { background: #fff; box-shadow:0 1px 3px rgba(0,0,0,0.14); }

/* the conversation area; the grid runs under the floating bars */
.apx-body { flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; }

.apx-ask {
  align-self: flex-end; max-width: 76%; margin: 6px 14px 0;
  background: #d3d5de; color: #111; border-radius: 20px; padding: 11px 16px;
  font-size: 15px; line-height: 1.35;
  opacity: 0; transform: translateY(9px) scale(0.97);
  transition: opacity .3s ease, transform .5s cubic-bezier(0.34, 1.5, 0.55, 1);
}
.aiq.is-asked .apx-ask { opacity: 1; transform: none; }

.apx-answer { display: flex; gap: 6px; padding: 14px 14px 12px; }
.apx-spark { flex: 0 0 auto; font-size: 15px; line-height: 1.42; color: #111;
  opacity: 0; transition: opacity .3s ease; }
.aiq.is-answered .apx-spark { opacity: 1; }
.apx-line {
  margin: 0; font-size: 15px; line-height: 1.42; color: #111; letter-spacing: -0.01em;
  opacity: 0; transform: translateY(6px);
  transition: opacity .36s ease, transform .5s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.apx-line.is-on { opacity: 1; transform: none; }

/* results: full bleed, two columns, no gaps, exactly as the capture */
/* align-items: start is load-bearing: without it the grid rows stretch to the flex
   container and the images ignore aspect-ratio, rendering at their intrinsic 440px. */
.apx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; align-content: start; }
.apx-tile {
  display: block; min-width: 0;
  opacity: 0; transform: translateY(12px) scale(0.96);
  transition: opacity .4s ease, transform .55s cubic-bezier(0.34, 1.4, 0.55, 1);
}
.apx-tile.is-on { opacity: 1; transform: none; }
.apx-tile img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: #e7e7e9; }
.apx-tile b, .apx-tile i {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 8px;
}
.apx-tile b { margin-top: 9px; font-size: 14.5px; font-weight: 700; color: #111; letter-spacing: -0.015em; }
.apx-tile i { margin: 2px 0 12px; font-size: 13.5px; font-style: normal; color: #8a8a90; }

/* voice input, floating over the results */
.apx-voice {
  position: absolute; left: 10px; right: 10px; bottom: 74px; z-index: 3;
  display: flex; align-items: center; gap: 9px;
}
.apx-close {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f0f0f4; color: #55555e; font-size: 17px;
}
.apx-pill {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 5px 0 14px; border-radius: 100px; background: #0a0a0d;
}
.apx-wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1px; height: 22px; }
.apx-wave i {
  flex: 1; min-width: 0; border-radius: 1px; background: #2f6fe0; display: block;
  height: 30%; transform-origin: center;
}
/* a fixed profile, so it looks like a captured waveform rather than a flat line before
   the animation starts, then each bar breathes on its own offset */
.apx-wave i:nth-child(3n)   { height: 62%; }
.apx-wave i:nth-child(4n)   { height: 22%; }
.apx-wave i:nth-child(5n)   { height: 84%; }
.apx-wave i:nth-child(7n)   { height: 45%; }
.apx-wave i:nth-child(11n)  { height: 96%; }
.aiq.is-answered .apx-wave i { animation: apx-wave 1.1s ease-in-out infinite; }
.apx-wave i:nth-child(2n)  { animation-delay: .12s; }
.apx-wave i:nth-child(3n)  { animation-delay: .26s; }
.apx-wave i:nth-child(5n)  { animation-delay: .38s; }
@keyframes apx-wave {
  0%, 100% { transform: scaleY(0.42); opacity: .7; }
  50% { transform: scaleY(1.5); opacity: 1; }
}
.apx-mic, .apx-send {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.apx-mic { background: #fff; color: #111; }
.apx-send { background: #1f78ff; color: #fff; font-size: 16px; }

/* bottom tab bar, also floating */
.apx-tabs {
  position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.apx-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0 6px; border-radius: 100px;
  font-size: 11px; font-weight: 600; color: #4a4a52;
}
.apx-tab i { font-size: 20px; font-style: normal; }
.apx-tab.is-on { background: #ededf2; color: #1f78ff; }
.apx-shelf {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px; z-index: 2;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 42%);
}

@media (prefers-reduced-motion: reduce) {
  .apx-ask, .apx-spark, .apx-line, .apx-tile { opacity: 1; transform: none; }
  .aiq.is-answered .apx-wave i { animation: none; height: 45%; }
}

/* status bar, matched to the capture: time with a person glyph, an orange recording dot
   on the dynamic island, then signal, wifi and a battery reading its level. */
.aiq-status { padding: 14px 20px 4px; font-size: 15px; font-weight: 600; }
.apx-time { display: inline-flex; align-items: center; gap: 5px; }
.apx-time i { font-size: 13px; }
.aiq-notch { width: 104px; height: 30px; top: 16px; }
.aiq-notch::after {
  content: ''; position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #ff7a1a;
}
.aiq-status-r { gap: 5px; font-size: 12px; }
.apx-wifi { font-size: 14px; line-height: 1; color: #111; }
.apx-batt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 14px; padding: 0 3px; border-radius: 4px;
  background: #111; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0;
}
.apx-batt::after {
  content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 5px; border-radius: 0 1px 1px 0; background: rgba(17,17,17,0.4);
}

/* ---- AI points as wired nodes ------------------------------------------------
   Each point sits as a lit node on its rail with a connector running toward the
   device, so the copy reads as feeding into the screen rather than as a plain
   list beside it. The rails keep their purple-left / blue-right coding. */
.aix-band .aix-points li { transition: transform .3s cubic-bezier(0.3, 0.9, 0.3, 1); }
.aix-band .aix-points li::before {
  content: ''; position: absolute; top: 10px; z-index: 2;
  width: 9px; height: 9px; border-radius: 50%;
  transition: box-shadow .3s ease, transform .3s ease;
}
.aix-band .aix-points-l li::before {
  right: -5.5px; background: #7C96FF;
  box-shadow:0 0 0 3px rgba(7, 9, 26, 0.08), 0 0 12px 2px rgba(7, 9, 26, 0.08);
}
.aix-band .aix-points-r li::before {
  left: -5.5px; background: #6aa6ff;
  box-shadow:0 0 0 3px rgba(7, 9, 26, 0.08), 0 0 12px 2px rgba(7, 9, 26, 0.08);
}
/* brighter rails, so the node reads as sitting on a lit line */
.aix-band .aix-points-l li { border-right-color: rgba(47, 88, 214, 0.5); }
.aix-band .aix-points-r li { border-left-color: rgba(36, 125, 255, 0.5); }

/* hover: the point leans toward the device and its node flares */
.aix-band .aix-points-l li:hover { transform: translateX(4px); }
.aix-band .aix-points-r li:hover { transform: translateX(-4px); }
.aix-band .aix-points-l li:hover::before {
  transform: scale(1.25);
  box-shadow:0 0 0 4px rgba(7, 9, 26, 0.08), 0 0 18px 4px rgba(7, 9, 26, 0.08);
}
.aix-band .aix-points-r li:hover::before {
  transform: scale(1.25);
  box-shadow:0 0 0 4px rgba(7, 9, 26, 0.08), 0 0 18px 4px rgba(7, 9, 26, 0.08);
}
.aix-band .aix-points li:hover b { color: #fff; }
.aix-band .aix-points b { transition: color .25s ease; }

@media (max-width: 1040px) {
  /* stacked: rails are all on the left, so the nodes go there too and nothing leans */
  .aix-band .aix-points-l li::before { right: auto; left: -5.5px; }
  .aix-band .aix-points-l li:hover, .aix-band .aix-points-r li:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aix-band .aix-points li, .aix-band .aix-points li::before { transition: none; }
  .aix-band .aix-points-l li:hover, .aix-band .aix-points-r li:hover { transform: none; }
}

/* Thinking beat. The capture is of a finished answer so it cannot show this state, but
   without it there is a dead second between the question and the reply. */
.apx-dots {
  align-self: flex-start; display: none; gap: 4px; margin: 12px 0 0 14px;
  padding: 10px 13px; border-radius: 100px; background: #eeeef2;
}
.apx-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9a9aa2; display: block; }
.aiq.is-thinking .apx-dots { display: flex; }
.aiq.is-thinking .apx-dots i { animation: aiq-dot 1.1s ease-in-out infinite; }
.apx-dots i:nth-child(2) { animation-delay: .16s; }
.apx-dots i:nth-child(3) { animation-delay: .32s; }

/* ---- Device scale ------------------------------------------------------------
   At 380x802 the device was taller than a laptop viewport, so it could never be
   seen whole. Scaling the phone rather than re-picking every dimension keeps the
   capture's proportions exactly: one factor, and the toolbar, grid, voice bar and
   tab bar all stay in the same relationship to each other.
   The transform goes on .aiq-phone because .aiq carries the idle float and
   .aix-stage carries the parallax; three transforms on one element would fight.
   .aiq gets the scaled height so the layout box matches what is drawn, otherwise
   a transform leaves its original space behind. */
.aix-band .aiq { height: 642px; }              /* 802 * 0.8 */
.aix-band .aiq-phone { transform: scale(0.8); transform-origin: top center; }

/* the ambient light is sized off the stage, so it comes in with the device */
.aix-band .aix-stage::before { width: 150%; }
.aix-band .aix-stage::after { width: 50%; bottom: -10px; }

@media (max-width: 1040px) {
  /* stacked, so there is room: a touch larger, still inside a phone viewport */
  .aix-band .aiq { height: 682px; }
  .aix-band .aiq-phone { transform: scale(0.85); }
}
@media (max-width: 430px) {
  .aix-band .aiq { height: 618px; }
  .aix-band .aiq-phone { transform: scale(0.77); }
}

/* ---- Section accents ---------------------------------------------------------
   The palette holds four brand hues but a long platform page used one: every
   section eyebrow, every bullet check and every icon chip was the same blue, so
   the page read as one note repeated for 13,000px. A section can now opt into an
   accent and its eyebrow, bullet checks and icon chips follow it, which walks the
   page through the palette without touching the brand gradient, still reserved
   for AI, Plus and CTAs.
   Every hook reads var(--accent, <its old value>), so sections that do not opt in
   are byte-for-byte unchanged, here and on every other page. */
.ac-blue    { --accent: #4D94FF; --accent-soft: rgba(77, 148, 255, 0.13); --accent-line: rgba(77, 148, 255, 0.42); }
.ac-royal   { --accent: #6E90FF; --accent-soft: rgba(110, 144, 255, 0.13); --accent-line: rgba(110, 144, 255, 0.42); }
.ac-purple  { --accent: #7B9CFF; --accent-soft: rgba(123, 156, 255, 0.13); --accent-line: rgba(123, 156, 255, 0.42); }
.ac-magenta { --accent: #8CADFF; --accent-soft: rgba(140, 173, 255, 0.14); --accent-line: rgba(140, 173, 255, 0.42); }
[data-theme="light"] .ac-blue    { --accent: #247DFF; --accent-soft: rgba(36, 125, 255, 0.09);  --accent-line: rgba(36, 125, 255, 0.4); }
[data-theme="light"] .ac-royal   { --accent: #003DFF; --accent-soft: rgba(0, 61, 255, 0.08);    --accent-line: rgba(0, 61, 255, 0.36); }
[data-theme="light"] .ac-purple  { --accent: #5078F5; --accent-soft: rgba(80, 120, 245, 0.09);  --accent-line: rgba(80, 120, 245, 0.4); }
[data-theme="light"] .ac-magenta { --accent: #2F58D6; --accent-soft: rgba(47, 88, 214, 0.08);  --accent-line: rgba(47, 88, 214, 0.36); }

.section-eyebrow { color: var(--accent, var(--brand-text)); }
/* .section-header .section-eyebrow is two classes, so it outranked the rule above and
   left those sections blue while their accent said otherwise. */
.section-header .section-eyebrow { color: var(--accent, var(--brand-text)); }
.feature-bullets li::before { background-color: var(--accent, var(--brand-blue)); }
.mini-ico { color: var(--accent, var(--brand-blue)); background: var(--accent-soft, var(--brand-soft)); }

/* ---- Alternating surface -----------------------------------------------------
   82% of the page sat on one flat background, including an unbroken 4,100px run.
   Sinking every other section onto the recessed surface, with a hairline in that
   section's accent, gives the page rhythm without inventing new colour. */
.sunk {
  /* Bold, not a tint: a 13% accent mix, a single-hue glow from the top, and a 2px
     rule in the accent. Single-hue radial washes are already the site's idiom for
     non-AI sections, so this stays inside the rule that reserves the brand gradient
     for AI, Plus and CTAs. Plain declaration first as the color-mix fallback. */
  position: relative;
  background: var(--bg-deep);
  background: color-mix(in srgb, var(--accent, #4D94FF) 13%, var(--bg-deep));
  border-top: 2px solid var(--accent-strong, var(--accent, var(--border)));
  border-bottom: 1px solid var(--accent-line, var(--border));
}
[data-theme="light"] .sunk {
  background: var(--bg-deep);
  background: color-mix(in srgb, var(--accent, #247DFF) 7%, var(--bg-deep));
}
.ac-blue    { --accent-glow: rgba(77, 148, 255, 0.22);  --accent-glow-l: rgba(36, 125, 255, 0.11);  --accent-strong: rgba(77, 148, 255, 0.75); }
.ac-royal   { --accent-glow: rgba(110, 144, 255, 0.22); --accent-glow-l: rgba(0, 61, 255, 0.09);    --accent-strong: rgba(110, 144, 255, 0.75); }
.ac-purple  { --accent-glow: rgba(123, 156, 255, 0.22); --accent-glow-l: rgba(80, 120, 245, 0.10);  --accent-strong: rgba(123, 156, 255, 0.75); }
.ac-magenta { --accent-glow: rgba(140, 173, 255, 0.24); --accent-glow-l: rgba(47, 88, 214, 0.09);  --accent-strong: rgba(140, 173, 255, 0.75); }

/* The eyebrow becomes a pill in the section's accent, which is the single loudest
   colour move available on every section without touching the gradient. Scoped to
   accented sections, so pages outside the system keep the quiet text eyebrow. */
[class*="ac-"] .section-eyebrow,
[class*="ac-"] .section-header .section-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 100px;
  font-size: 12px; letter-spacing: 0.01em; font-weight: 700;
  color: var(--accent, var(--brand-text));
  background: var(--accent-soft, var(--brand-soft));
  border: 1px solid var(--accent-line, var(--border));
}
[class*="ac-"] .section-eyebrow::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, var(--brand-blue));
  box-shadow:0 0 10px 1px var(--accent, var(--brand-blue));
}

/* Card hover borders follow the section accent too, so a section is one colour idea
   rather than blue creeping back in on interaction. Falls back to the original blue. */
.mini-card:hover { border-color: var(--accent-line, rgba(36, 125, 255, 0.4)); }
.bento-card:hover { border-color: var(--accent-line, var(--border-strong)); }

/* ---- Ticker with word values -------------------------------------------------
   .ticker-value is sized for short figures ("150+", "40+"), which is what twelve
   of the thirteen tickers on the site use. The analytics page uses words, and at
   the figure size they did not fit the column: "Included" was sliced by the
   column divider and "Real-time" wrapped onto two lines, which pushed its label
   down and made that item twice as tall as its neighbours.
   Opt-in, so the figure tickers everywhere else keep the size they were tuned for.
   The value now scales with the viewport, because a single fixed size cannot fit a
   nine-character word in a column that is 227px wide at 1440 and 164px at 1024. */
.ticker-words .ticker-value {
  font-size: clamp(34px, 4.1vw, 60px);
  line-height: 1.1;          /* gradient text is clipped to the text box, so give it room */
  white-space: nowrap;       /* fail loudly in testing rather than silently wrapping */
}
@media (max-width: 900px) {
  /* two columns here, so the items are wider and the value can grow again */
  .ticker-words .ticker-value { font-size: clamp(34px, 6.4vw, 50px); }
}
@media (max-width: 600px) {
  .ticker-words .ticker-value { font-size: 40px; }
}

/* ---- Customer Results, coloured ----------------------------------------------
   The section was blue and grey throughout: a blue-tinted lead card, two blue
   bars, and three stat cards with no colour at all. The three stats measure three
   different things, so they carry three accents rather than one blue repeated.
   The bars keep a single hue at two intensities, because they are the same metric
   in two months and two hues there would imply two different measures. */
.omsr-stat {
  position: relative; overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.omsr-stat::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 2px;
}
.omsr-stat:hover { transform: translateY(-3px); }
.omsr-stat:nth-child(1) { --omsr-ac: #4D94FF; --omsr-soft: rgba(77, 148, 255, 0.13); }
.omsr-stat:nth-child(2) { --omsr-ac: #7B9CFF; --omsr-soft: rgba(123, 156, 255, 0.14); }
.omsr-stat:nth-child(3) { --omsr-ac: #8CADFF; --omsr-soft: rgba(140, 173, 255, 0.14); }
[data-theme="light"] .omsr-stat:nth-child(1) { --omsr-ac: #247DFF; --omsr-soft: rgba(36, 125, 255, 0.09); }
[data-theme="light"] .omsr-stat:nth-child(2) { --omsr-ac: #5078F5; --omsr-soft: rgba(80, 120, 245, 0.09); }
[data-theme="light"] .omsr-stat:nth-child(3) { --omsr-ac: #2F58D6; --omsr-soft: rgba(47, 88, 214, 0.08); }
/* .omsr-stat .omsr-ico, not .omsr-ico: the card already styles its spans
   (.omsr-stat span), which at 0,1,1 outranks a lone class and was painting the icon
   muted grey at 13px while its background tinted correctly. */
.omsr-stat .omsr-ico {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;

}

/* the uplift panel picks up the purple side of the palette, so the two cards at the
   top of the block read as a blue and purple pair instead of blue and grey */
.omsr-uplift {
  background:
    linear-gradient(180deg, rgba(123, 156, 255, 0.07), rgba(123, 156, 255, 0) 62%),
    var(--bg-elevated);
}

/* the growth ramp: same hue, more intensity in the stronger month */

@media (max-width: 720px) {
  /* the stat card goes horizontal at this width, so the icon sits inline with the figure */
  .omsr-stat .omsr-ico { margin-bottom: 0; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .omsr-stat { transition: none; }
  .omsr-stat:hover { transform: none; }
}

/* ---- Capability index filter -------------------------------------------------
   34 rows across 8 groups, with no way to narrow them, is a wall to read rather
   than a list to consult. The chips filter by delivery and carry the counts, so
   the native-versus-connected split is legible before reading a single row. */
.capx-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}
.capx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.capx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 100px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--text-muted); background: var(--bg-elevated);
  border: 1px solid var(--border);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.capx-chip span {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 5px;
  color: var(--text-faint); background: var(--bg-deep);
}
.capx-chip:hover { color: var(--text); border-color: var(--border-strong); }
.capx-chip.is-on {
  color: #fff; background: var(--brand-blue); border-color: var(--brand-blue);
}
.capx-chip.is-on span { color: #fff; }
.capx-chip[data-capx="native"].is-on { background: #4D94FF; border-color: #4D94FF; }
.capx-live { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* the driver toggles this class rather than the hidden attribute, which a
   display: table-row rule elsewhere could otherwise override */
.capx tr.capx-off { display: none; }

@media (max-width: 560px) {
  .capx-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .capx-chip { padding: 7px 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .capx-chip { transition: none; } }

/* ---- Architecture: the short answer ------------------------------------------
   Four facts stated before any of the detail, so a reader who only wants the shape
   of the thing gets it without decoding a diagram first. */
.arxq {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--bg-elevated);
}
.arxq-item {
  padding: 22px 24px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
}
.arxq-item:first-child { border-left: none; }
.arxq-k {
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text);
}
.arxq-k::before {
  content: ''; display: block; width: 22px; height: 2px; margin-bottom: 12px;
  border-radius: 2px; background: var(--accent, var(--brand-blue));
}
.arxq-v { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

/* four across leaves only ~180px of text per item below this, so it pairs up earlier */
@media (max-width: 1040px) { .arxq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arxq-item:nth-child(3) { border-left: none; }
  .arxq-item:nth-child(n+3) { border-top: 1px solid var(--border); } }
@media (max-width: 560px) { .arxq { grid-template-columns: 1fr; }
  .arxq-item { border-left: none; }
  .arxq-item + .arxq-item { border-top: 1px solid var(--border); } }

/* ---- Architecture: three-way position ----------------------------------------
   The argument is a comparison, so it is laid out as one. The two failure modes sit
   as plain columns; the position between them is the raised one. */
.arx3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.arx3-col {
  padding: 24px 26px 26px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--bg-elevated);
}
.arx3-col-ours {
  border-color: rgba(123, 156, 255, 0.4);
  background:
    linear-gradient(180deg, rgba(123, 156, 255, 0.09), rgba(123, 156, 255, 0) 58%),
    var(--bg-elevated);
  box-shadow:0 26px 54px -34px rgba(7, 9, 26, 0.3);
}
.arx3-cap {
  display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: none; color: var(--text-faint); margin-bottom: 10px;
}
.arx3-col-ours .arx3-cap { color: #9BB4FF; }
.arx3-sum {
  margin: 0 0 16px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.3; color: var(--text);
}
.arx3-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.arx3-list li {
  position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
}
.arx3-list li::before {
  position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.arx3-bad li::before { content: '\00d7'; color: #ff9d9d; background: rgba(255, 90, 90, 0.14); }
.arx3-good li::before { content: '\2713'; color: #fff; background: var(--brand-purple); }
.arx3-good li { color: var(--text); }

.arx3-why {
  margin: 22px 0 0; padding: 18px 22px; border-radius: 14px;
  border-left: 3px solid var(--brand-purple); background: var(--bg-deep);
  font-size: 14px; line-height: 1.7; color: var(--text-muted);
}
.arx3-why strong { color: var(--text); }

@media (max-width: 980px) {
  .arx3 { grid-template-columns: 1fr; }
  /* the position we argue for leads once the comparison stacks */
  .arx3-col-ours { order: -1; }
}

/* Featured blog card, colour treatment. The structural redesign was rejected, so the
   card keeps its shape and carries the brand colour instead: tinted border, a wash from
   the top, and a lifted shadow. */
.blog-card.featured {
  border-color: rgba(36, 125, 255, 0.45);
  background:
    linear-gradient(180deg, rgba(36, 125, 255, 0.10), rgba(80, 120, 245, 0.04) 55%, rgba(36, 125, 255, 0) 80%),
    var(--bg-elevated);
  box-shadow:0 24px 52px -30px rgba(7, 9, 26, 0.3);
}
.blog-card.featured:hover {
  border-color: var(--brand-blue);
  box-shadow:0 30px 60px -28px rgba(7, 9, 26, 0.3);
}

/* At 200px the taller crop can slice through text baked into a post's artwork (the
   press-release graphics carry their own title strip). Cropping from the top keeps the
   photographic part and drops the baked text below the fold of the crop. */
.blog-card:not(.featured) .blog-card-img img { object-position: 50% 0; }

/* ---- Bolder still -------------------------------------------------------------
   Second loudness pass, requested after the first. Three moves, all system-level:
   an accent kicker bar under every accented section's title, doubled band glows,
   and the accent bleeding into the components inside a band instead of stopping at
   its shell. The brand gradient remains AI, Plus and CTAs only. */

/* the band glow doubles: top wash plus a low corner answer, both single-hue */
.sunk {
  background: color-mix(in srgb, var(--accent, #4D94FF) 13%, var(--bg-deep));
}
[data-theme="light"] .sunk {
  background: color-mix(in srgb, var(--accent, #247DFF) 7%, var(--bg-deep));
}

/* inside a band, the components carry the colour too: cards take the accent edge,
   and their icon chips saturate */
.sunk .mini-card, .sunk .statcard, .sunk .bento-card,
.sunk .faq-item, .sunk .capx-wrap, .sunk .crec {
  border-color: var(--accent-line, var(--border));
}
.sunk .mini-card:hover, .sunk .bento-card:hover {
  border-color: var(--accent, var(--brand-blue));
  box-shadow:0 18px 44px -22px var(--accent-glow, rgba(7, 9, 26, 0.08));
}

/* screenshots and photos inside accented sections sit in a lit accent frame */
[class*="ac-"] .shot-img { border-color: var(--accent-line, rgba(255,255,255,0.14)); }
[class*="ac-"] .shot:hover .shot-img { box-shadow:0 26px 40px -24px var(--accent-glow, rgba(7, 9, 26, 0.08)); }
[class*="ac-"] .feature-photo img { border: 1px solid var(--accent-line, var(--border)); }

/* ---- Coloured cards ------------------------------------------------------------
   Requested on the Partner Advantage trio and "sections like this": the cards stop
   being grey boxes and carry the palette themselves, cycling blue, purple, magenta,
   royal by position. One rule set covers the card families sitewide. Fills are
   single-hue washes; the brand gradient stays AI, Plus and CTAs. */
.padv-card:nth-child(4n+1), .mini-card:nth-child(4n+1), .bento-card:nth-child(4n+1),
.statcard:nth-child(4n+1) {
  --cac: #4D94FF; --cac-soft: rgba(77, 148, 255, 0.16); --cac-line: rgba(77, 148, 255, 0.5); }
.padv-card:nth-child(4n+2), .mini-card:nth-child(4n+2), .bento-card:nth-child(4n+2),
.statcard:nth-child(4n+2) {
  --cac: #7B9CFF; --cac-soft: rgba(123, 156, 255, 0.16); --cac-line: rgba(123, 156, 255, 0.5); }
.padv-card:nth-child(4n+3), .mini-card:nth-child(4n+3), .bento-card:nth-child(4n+3),
.statcard:nth-child(4n+3) {
  --cac: #8CADFF; --cac-soft: rgba(140, 173, 255, 0.17); --cac-line: rgba(140, 173, 255, 0.5); }
.padv-card:nth-child(4n), .mini-card:nth-child(4n), .bento-card:nth-child(4n),
.statcard:nth-child(4n) {
  --cac: #6E90FF; --cac-soft: rgba(110, 144, 255, 0.16); --cac-line: rgba(110, 144, 255, 0.5); }
[data-theme="light"] .padv-card, [data-theme="light"] .mini-card, [data-theme="light"] .bento-card,
[data-theme="light"] .statcard {
  --cac-soft: color-mix(in srgb, var(--cac, #247DFF) 8%, transparent);
  --cac-line: color-mix(in srgb, var(--cac, #247DFF) 38%, transparent);
}

.padv-card, .mini-card, .bento-card, .statcard {
  border-color: var(--cac-line, var(--border));
  background:
    linear-gradient(180deg, var(--cac-soft, transparent), transparent 62%),
    var(--bg-elevated);
}
.padv-card:hover, .mini-card:hover, .bento-card:hover {
  border-color: var(--cac, var(--brand-blue));
  box-shadow:0 20px 48px -24px var(--cac-soft, rgba(7, 9, 26, 0.08));
}
/* the icon chip goes solid in the card's hue, white glyph */
.padv-card .padv-badge, .mini-card .mini-ico {
  color: #fff; background: var(--cac, var(--brand-blue));
  box-shadow:0 10px 22px -10px var(--cac, var(--brand-blue));
}
/* the kicker line picks the hue up too */
.padv-card .padv-kicker { color: var(--cac, var(--brand-text)); }
/* per-position icon rules from earlier passes would fight the cycle; the card wins */
.mini-card:nth-child(even) .mini-ico { color: #fff; background: var(--cac, var(--brand-purple)); }
.ac-purple .mini-card:nth-child(even) .mini-ico,
.ac-magenta .mini-card:nth-child(even) .mini-ico { color: #fff; background: var(--cac, var(--brand-blue)); }
.sunk .mini-ico { background: var(--cac, var(--brand-blue)); }

/* ---- Coloured cards, extended families ----------------------------------------
   Same cycle as the first pass, applied to the remaining peer-card grids. Chips,
   tabs, gallery cells and semantic comparisons are deliberately excluded so colour
   keeps meaning position, not kind. */

.proof-card:nth-child(4n+1), .evc:nth-child(4n+1), .past-card:nth-child(4n+1), .off-card:nth-child(4n+1), .ben-item:nth-child(4n+1), .lms-col:nth-child(4n+1), .init-card:nth-child(4n+1), .cpil:nth-child(4n+1), .intg-card:nth-child(4n+1), .rfp-card:nth-child(4n+1), .rev-fact:nth-child(4n+1) {
  --cac: #4D94FF; --cac-soft: rgba(77, 148, 255, 0.16); --cac-line: rgba(77, 148, 255, 0.5); }

.proof-card:nth-child(4n+2), .evc:nth-child(4n+2), .past-card:nth-child(4n+2), .off-card:nth-child(4n+2), .ben-item:nth-child(4n+2), .lms-col:nth-child(4n+2), .init-card:nth-child(4n+2), .cpil:nth-child(4n+2), .intg-card:nth-child(4n+2), .rfp-card:nth-child(4n+2), .rev-fact:nth-child(4n+2) {
  --cac: #7B9CFF; --cac-soft: rgba(123, 156, 255, 0.16); --cac-line: rgba(123, 156, 255, 0.5); }

.proof-card:nth-child(4n+3), .evc:nth-child(4n+3), .past-card:nth-child(4n+3), .off-card:nth-child(4n+3), .ben-item:nth-child(4n+3), .lms-col:nth-child(4n+3), .init-card:nth-child(4n+3), .cpil:nth-child(4n+3), .intg-card:nth-child(4n+3), .rfp-card:nth-child(4n+3), .rev-fact:nth-child(4n+3) {
  --cac: #8CADFF; --cac-soft: rgba(140, 173, 255, 0.17); --cac-line: rgba(140, 173, 255, 0.5); }

.proof-card:nth-child(4n), .evc:nth-child(4n), .past-card:nth-child(4n), .off-card:nth-child(4n), .ben-item:nth-child(4n), .lms-col:nth-child(4n), .init-card:nth-child(4n), .cpil:nth-child(4n), .intg-card:nth-child(4n), .rfp-card:nth-child(4n), .rev-fact:nth-child(4n) {
  --cac: #6E90FF; --cac-soft: rgba(110, 144, 255, 0.16); --cac-line: rgba(110, 144, 255, 0.5); }

.proof-card, .evc, .past-card, .off-card, .ben-item, .lms-col, .init-card, .cpil, .intg-card, .rfp-card, .rev-fact {
  border-color: var(--cac-line, var(--border));
  background:
    linear-gradient(180deg, var(--cac-soft, transparent), transparent 62%),
    var(--bg-elevated);
}

[data-theme="light"] .proof-card, [data-theme="light"] .evc, [data-theme="light"] .past-card, [data-theme="light"] .off-card, [data-theme="light"] .ben-item, [data-theme="light"] .lms-col, [data-theme="light"] .init-card, [data-theme="light"] .cpil, [data-theme="light"] .intg-card, [data-theme="light"] .rfp-card, [data-theme="light"] .rev-fact {
  --cac-soft: color-mix(in srgb, var(--cac, #247DFF) 8%, transparent);
  --cac-line: color-mix(in srgb, var(--cac, #247DFF) 38%, transparent);
}

/* ---- Coloured cards, full colour -----------------------------------------------
   "Where is the color": the washes give way to real fills. Dark mode cards are deep
   jewel tones of their hue, a 30 percent mix into the elevated surface under a hue
   glow from the top, with the border a full-strength accent. Light mode carries a
   solid 14 percent tint. Text stays the theme's own, which reads on both. */
.padv-card, .mini-card, .bento-card, .statcard, .proof-card, .evc, .past-card, .off-card, .ben-item, .lms-col, .init-card, .cpil, .intg-card, .rfp-card, .rev-fact {
  background: color-mix(in srgb, var(--cac, #4D94FF) 30%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--cac, #4D94FF) 62%, transparent);
}
[data-theme="light"] .padv-card, [data-theme="light"] .mini-card, [data-theme="light"] .bento-card, [data-theme="light"] .statcard, [data-theme="light"] .proof-card, [data-theme="light"] .evc, [data-theme="light"] .past-card, [data-theme="light"] .off-card, [data-theme="light"] .ben-item, [data-theme="light"] .lms-col, [data-theme="light"] .init-card, [data-theme="light"] .cpil, [data-theme="light"] .intg-card, [data-theme="light"] .rfp-card, [data-theme="light"] .rev-fact {
  background: color-mix(in srgb, var(--cac, #247DFF) 14%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--cac, #247DFF) 45%, transparent);
}
/* muted copy brightens a step so it holds on the richer ground */
.padv-card p, .mini-card p, .bento-card p, .statcard p, .proof-card p, .evc p, .past-card p, .off-card p, .ben-item p, .lms-col p, .init-card p, .cpil p, .intg-card p, .rfp-card p, .rev-fact p,
.padv-card span, .mini-card span, .bento-card span, .statcard span, .proof-card span, .evc span, .past-card span, .off-card span, .ben-item span, .lms-col span, .init-card span, .cpil span, .intg-card span, .rfp-card span, .rev-fact span {
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
[data-theme="light"] .padv-card p, [data-theme="light"] .mini-card p { color: var(--text-muted); }

/* ---- Full-colour cards, final sweep ---------------------------------------------
   The remaining peer-card families: event rows, day cards, compliance badges,
   capability columns, review steps, contact-side cards, and the standard blog cards.
   Skipped on purpose: fw-box (already carries its own colours), routex-opt (colour
   is semantic there, picked versus skipped), quotes (editorial), and the featured
   blog card, which has its own treatment. */
.evt:nth-child(4n+1), .tm-day-card:nth-child(4n+1), .security-badge:nth-child(4n+1), .capcol:nth-child(4n+1), .rev-step:nth-child(4n+1), .cside-card:nth-child(4n+1), .blog-card:nth-child(4n+1):not(.featured) {
  --cac: #4D94FF; --cac-soft: rgba(77, 148, 255, 0.2); }
.evt:nth-child(4n+2), .tm-day-card:nth-child(4n+2), .security-badge:nth-child(4n+2), .capcol:nth-child(4n+2), .rev-step:nth-child(4n+2), .cside-card:nth-child(4n+2), .blog-card:nth-child(4n+2):not(.featured) {
  --cac: #7B9CFF; --cac-soft: rgba(123, 156, 255, 0.2); }
.evt:nth-child(4n+3), .tm-day-card:nth-child(4n+3), .security-badge:nth-child(4n+3), .capcol:nth-child(4n+3), .rev-step:nth-child(4n+3), .cside-card:nth-child(4n+3), .blog-card:nth-child(4n+3):not(.featured) {
  --cac: #8CADFF; --cac-soft: rgba(140, 173, 255, 0.2); }
.evt:nth-child(4n), .tm-day-card:nth-child(4n), .security-badge:nth-child(4n), .capcol:nth-child(4n), .rev-step:nth-child(4n), .cside-card:nth-child(4n), .blog-card:nth-child(4n):not(.featured) {
  --cac: #6E90FF; --cac-soft: rgba(110, 144, 255, 0.2); }
.evt, .tm-day-card, .security-badge, .capcol, .rev-step, .cside-card, .blog-card:not(.featured) {
  background: color-mix(in srgb, var(--cac, #4D94FF) 30%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--cac, #4D94FF) 62%, transparent);
}
[data-theme="light"] .evt, [data-theme="light"] .tm-day-card, [data-theme="light"] .security-badge, [data-theme="light"] .capcol, [data-theme="light"] .rev-step, [data-theme="light"] .cside-card, [data-theme="light"] .blog-card:not(.featured) {
  background: color-mix(in srgb, var(--cac, #247DFF) 14%, var(--bg-elevated));
  border-color: color-mix(in srgb, var(--cac, #247DFF) 45%, transparent);
}

/* fill lives here, not as an SVG attribute: the base .arch-band rule sets fill, and CSS
   beats presentation attributes, which silently flattened the gradients on first try */
.arch-lab-store { fill: #6aa6ff; font-size: 11.5px; }
.arch-lab-core  { fill: #9BB4FF; font-size: 11.5px; }
.arch-lab-int   { fill: #9CB9FF; font-size: 11.5px; }
.arch-lab-ext   { fill: #8fa8ff; font-size: 11.5px; }

.arch-item { filter: drop-shadow(0 3px 6px rgba(3, 2, 16, 0.5)); }
.arch-item-core  { stroke: rgba(123, 156, 255, 0.6); fill: rgba(123, 156, 255, 0.15); }
.arch-item-ext   { stroke: rgba(110, 144, 255, 0.45); fill: rgba(110, 144, 255, 0.10); }

.arch-conn-t { fill: var(--text-muted); }
.arch-int { fill: var(--text); }
.arch-note { fill: #9BB4FF; font-style: normal; font-weight: 600; }

[data-theme="light"] .arch-item { filter: drop-shadow(0 2px 4px rgba(7, 9, 26, 0.12)); }
[data-theme="light"] .arch-lab-store { fill: #0050d4; }
[data-theme="light"] .arch-lab-core  { fill: #3F66E0; }
[data-theme="light"] .arch-lab-int   { fill: #2F58D6; }
[data-theme="light"] .arch-lab-ext   { fill: #2d51d8; }

/* iPhones in the POS fan: the shared card width is sized for iPad aspect, and a
   1470x3000 phone at that width would render three times the height of its
   neighbours. Width chosen so the phone's height matches the iPad cards. */
/* ---- Button text legibility ------------------------------------------------------
   White CTA buttons (final-cta, midcta) coloured their text with var(--brand-text),
   which in dark mode is the pale #80B0FF meant for dark grounds: 2.19:1 on the white
   button. The saturated blue is correct on white in both themes. */
.final-cta .btn-primary, .final-cta .btn-primary i,
.midcta-btn, .midcta-btn i { color: #0050d4; }

/* .btn-primary carries a text-shadow for white type on the gradient. These
   buttons are inverted (dark type on white), where it just smudges the label. */
.final-cta .btn-primary, .midcta-btn { text-shadow: none; }

/* ---- Button text, loud and unmistakable -------------------------------------------
   All three families were reported hard to read, so each gets a decisive move:
   gradient buttons render pure white with a settling shadow; outline buttons keep
   full-strength text on a solid pill; buttons over photos carry their own dark
   backdrop; anything clickable inside the jewel cards reads white with weight. */
.btn-primary { color: #ffffff; text-shadow: 0 1px 2px rgba(7, 9, 26, 0.35); }
.btn-ghost { border-width: 1.5px; }
.hero .btn-ghost, .hero-photo .btn-ghost {
  color: #ffffff; border-color: rgba(255, 255, 255, 0.6);
  background: rgba(10, 12, 26, 0.55);
}
.padv-card a, .mini-card a, .bento-card a, .statcard a,
.evc a, .past-card a, .off-card a, .init-card a, .cpil a, .rfp-card a {
  color: #fff; font-weight: 700; text-decoration-color: rgba(255,255,255,0.5);
}
[data-theme="light"] .padv-card a, [data-theme="light"] .mini-card a,
[data-theme="light"] .bento-card a, [data-theme="light"] .evc a, [data-theme="light"] .statcard a {
  color: var(--brand-text);
}

/* ---- Repairs to the accent bento card ---------------------------------------------
   Two casualties of the jewel-card passes, found via the invisible "See the case
   studies" pill. The generic .bento-card fill overrode this card's brand gradient,
   and the .bento-card span text rule outranked .bento-more's own blue, leaving
   near-white text on the white pill. Both re-asserted with higher specificity. */
.bento-card.bento-accent {
  border: none;
}
.bento-card .bento-more, .bento-card.bento-accent .bento-more {
  color: #1a56f0; background: #ffffff; font-weight: 700;
}
.bento-card .bento-more i { color: #1a56f0; }
/* the accent card is an <a>; the card-link whitening must not dim its pill */
.bento-card.bento-accent { color: #ffffff; }

/* ---- Report widgets, inverted -----------------------------------------------------
   Requested on the Complete Reporting dashboard: the box carries the colour and the
   colourful things inside go light. Each card fills with its group's hue and every
   inner element that used the hue, sparklines, bars, donuts, chips, tags, icons,
   renders in white instead. Group headings on the frame keep the hue, since they are
   the row's label rather than a box. */
.dashw {
  background: color-mix(in srgb, var(--_c) 34%, var(--bg-deep));
  border-color: color-mix(in srgb, var(--_c) 62%, transparent);
}
.dashw:hover { border-color: color-mix(in srgb, var(--_c) 85%, transparent); }
.dashw-head { color: #ffffff; }
.dashw-head > i { color: rgba(255, 255, 255, 0.95); }
.dashw-viz { color: rgba(255, 255, 255, 0.95); }
.dashw p { color: rgba(255, 255, 255, 0.78); }
.dashw-bars i { background: rgba(255, 255, 255, 0.85); }
.dashw-donut-bars i { background: rgba(255, 255, 255, 0.55); }
.dashw-hbars i { background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4)); }
.dashw-donut {
  background: conic-gradient(#ffffff 0 62%, rgba(255,255,255,0.35) 62% 87%, rgba(255,255,255,0.14) 87% 100%);
}
.dashw-livechip { color: #fff; }
.dashw-livechip i { background: #fff; }
/* light theme: same vivid boxes; the innards are already white */
[data-theme="light"] .dashw {
  background: color-mix(in srgb, var(--_c) 78%, #ffffff);
}

/* ---- Customer Results, inverted ---------------------------------------------------
   Same treatment as the report widgets, requested for this section: the boxes carry
   the colour and the coloured things inside go light. The lead card fills blue, the
   uplift panel purple, and the three stat cards their existing per-card hues; the
   figures, bars, chips and icons inside all render in white. */
.omsr-lead {
  border-color: rgba(77, 148, 255, 0.62);
  background: color-mix(in srgb, #4D94FF 34%, var(--bg-deep));
}
.omsr-big-val { color: #ffffff; }
.omsr-big-lab { color: #ffffff; }
.omsr-note { color: rgba(255, 255, 255, 0.8); }

.omsr-uplift {
  border-color: rgba(123, 156, 255, 0.62);
  background: color-mix(in srgb, #7B9CFF 34%, var(--bg-deep));
}
.omsr-uplift-head { color: rgba(255, 255, 255, 0.85); }
.omsr-bar-val { color: #ffffff; }
.omsr-bar-lab { color: rgba(255, 255, 255, 0.72); }
.omsr-bar-fill { background: #ffffff; box-shadow:none; }
.omsr-bar:first-child .omsr-bar-fill { background: rgba(255, 255, 255, 0.45); }
.omsr-bar:last-child .omsr-bar-val { color: #ffffff; }
.omsr-avg { color: #ffffff; border-top-color: rgba(255, 255, 255, 0.25); }
.omsr-avg i { color: #ffffff; }

.omsr-stat {
  border-color: color-mix(in srgb, var(--omsr-ac, #4D94FF) 62%, transparent);
  background: color-mix(in srgb, var(--omsr-ac, #4D94FF) 34%, var(--bg-deep));
}
.omsr-stat::before { background: rgba(255, 255, 255, 0.55); }
.omsr-stat strong { color: #ffffff; }
.omsr-stat span { color: rgba(255, 255, 255, 0.78); }
.omsr-stat .omsr-ico { color: #ffffff; background: rgba(255, 255, 255, 0.18); }
.omsr-stat:hover { border-color: var(--omsr-ac, var(--brand-blue)); }

/* light theme: same vivid boxes; the white innards already read */
[data-theme="light"] .omsr-lead {
  background: color-mix(in srgb, #247DFF 78%, #ffffff);
}
[data-theme="light"] .omsr-uplift {
  background: color-mix(in srgb, #5078F5 78%, #ffffff);
}
[data-theme="light"] .omsr-stat {
  background: color-mix(in srgb, var(--omsr-ac, #247DFF) 78%, #ffffff);
}
[data-theme="light"] .omsr-uplift-head,
[data-theme="light"] .omsr-avg i { color: rgba(255, 255, 255, 0.9); }

/* The generic dropdown link rule sets white-space: nowrap, which is right for the
   simple text menus but wrong for the industry tiles: their blurbs rendered on one
   unwrapped line, running under the neighbouring boxes. The tiles wrap again, and
   blurbs clamp to two lines so no tile outgrows its row. */
.nav-dropdown a.mega-ind-item { white-space: normal; display: flex; }
.mega-ind-text em {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Architecture circuit layout ---------------------------------------------------
   The diagram redrawn as a board: devices feed a central processor plate through
   traced lines with flowing data, an integration bus rail below, then the systems
   chips. Traces carry a slow dash flow; nodes mark the junctions. */
.arch-plate { stroke: rgba(123, 156, 255, 0.55); stroke-width: 1.5; }
.arch-bus { stroke: rgba(140, 173, 255, 0.55); stroke-width: 1.5; }
.arch-pin { fill: rgba(123, 156, 255, 0.6); }
.arch-trace { fill: none; stroke-width: 1.75; }
.arch-trace-b { stroke: rgba(77, 148, 255, 0.5); }
.arch-trace-p { stroke: rgba(123, 156, 255, 0.3); }
.arch-trace-m { stroke: rgba(140, 173, 255, 0.6); }
.arch-trace-r { stroke: rgba(110, 144, 255, 0.55); }
.arch-node { fill: #6aa6ff; }
.arch-node-r { fill: #8fa8ff; }
.arch-flow { stroke-dasharray: 5 9; animation: archFlow 1.6s linear infinite; }
@keyframes archFlow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .arch-flow { animation: none; stroke-dasharray: none; } }
.arch-plate-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  fill: var(--text-faint);
}
[data-theme="light"] .arch-node { fill: #247DFF; }
[data-theme="light"] .arch-pin { fill: rgba(80, 120, 245, 0.5); }

/* retail event pills on the sales-floor scenes, and the tokens that travel the traces */

/* the storefront: awning scallops, the room, and line-art fixtures */
.arch-awn { fill: rgba(77, 148, 255, 0.55); }
.arch-awn-alt { fill: rgba(77, 148, 255, 0.18); }
.arch-room { stroke: rgba(77, 148, 255, 0.5); stroke-width: 1.5; }
.arch-glyph { fill: none; stroke: #7fb0ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arch-glyph-fill { fill: rgba(77, 148, 255, 0.25); }
@media (prefers-reduced-motion: no-preference) {
  .arch-gate-pulse { animation: archGate 2.2s ease-in-out infinite; }
}
@keyframes archGate { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
[data-theme="light"] .arch-glyph { stroke: #1a56f0; }
[data-theme="light"] .arch-awn { fill: rgba(36, 125, 255, 0.6); }
[data-theme="light"] .arch-awn-alt { fill: rgba(36, 125, 255, 0.2); }

/* true side-by-side: the device cedes a full phone column, no overlap at all */
.hpos-stage .hpos-device { margin-right: calc(22.5% - 26px); }
/* the caption that states the point of the pairing */
.hpos-duo {
  position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%);
  z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 100px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; color: #cdd9ff;
  background: rgba(10, 12, 26, 0.72); border: 1px solid rgba(77, 148, 255, 0.4);
}
.hpos-duo i { font-size: 14px; color: #6aa6ff; }
/* The phone cannot fit beside the iPad on a narrow screen, but the caption still
   tells the iPhone and iPad story, so it stays and simply sits under the device. */
@media (max-width: 1240px) {
  /* transform must be reset too, or the base translateX(-50%) shifts it off centre */
  .hpos-duo { position: static; transform: none; display: flex; width: max-content; margin: 16px auto 0; }
}
/* between 1240 and 1440 the stage sits nearer the edge, so the phone tucks in */
@media (max-width: 1439px) {
  .hpos-stage .hpos-device { margin-right: calc(22.5% - 26px); }
}

/* at the narrower side-by-side width, money never wraps mid-amount */
.srx-row b, .srx-total b { white-space: nowrap; }

/* ---- iPad screen: receipt scaled to fit -------------------------------------------
   4:3 is shorter than the card the receipt was drawn for, so the receipt keeps its
   own layout box (no reflow, no truncation) and renders smaller. It is absolute so
   it cannot drive the device's height, and it renders at ~91% of the screen, which
   leaves the right strip clear for the phone that overlaps there. */
.hpos-screen { position: relative; height: 100%; overflow: hidden; }
.hpos-screen .srx-fit {
  position: absolute; top: 0; left: 0;
  width: 122%; height: 122%;
  transform: scale(0.75); transform-origin: top left;
  display: flex; flex-direction: column; min-height: 0;
}
.hpos-screen .srx-fit .srx-body { flex: 1 1 auto; min-height: 0; }

/* ---- Hero iPhone, over the iPad ---------------------------------------------------
   A real device rather than a screenshot, so its screen animates like the iPad's. It
   sits over the iPad's right edge and never crosses into the headline column. */
.hph {
  position: absolute; right: 0; bottom: -34px; z-index: 4;
  /* Proportionate to the iPad at any width. An iPhone is 72mm wide against the
     iPad's 248mm, so the phone should be 29% of the iPad's width. Both are derived
     from the stage, which makes the ratio self-correcting: with phone = 22.5%S + 8
     and the device ceding 22.5%S - 26, the ratio stays 0.29 and the overlap stays a
     constant 34px, instead of needing a hand-tuned pair per breakpoint. */
  width: calc(22.5% + 8px); aspect-ratio: 9 / 19.5;
  border-radius: 34px; padding: 5px;
  /* Pro Max: polished band around a black bezel; buttons drawn by ::before */
  border: 2.5px solid transparent;
  background: linear-gradient(#0a0a0d, #0a0a0d) padding-box, linear-gradient(160deg, #a3a7ae 0%, #7c8088 18%, #9ea1a8 40%, #6b6f77 62%, #a0a3aa 84%, #80848c 100%) border-box;
  box-shadow:0 40px 60px -26px rgba(2, 2, 14, 0.9), 0 0 0 1px rgba(30,33,40,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.hph::before {
  content: ''; position: absolute; inset: -2.5px -5px; pointer-events: none;
  background:
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 58px / 2.5px 13px no-repeat,
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 84px / 2.5px 26px no-repeat,
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 116px / 2.5px 26px no-repeat,
    linear-gradient(270deg, #9a9ea6, #4e525a) 100% 96px / 2.5px 44px no-repeat,
    linear-gradient(270deg, #9a9ea6, #4e525a) 100% 226px / 2.5px 22px no-repeat;
}
.hph-screen {
  position: relative; height: 100%; border-radius: 26px; overflow: hidden;
  background: #eef0f5; color: #0b0c12;
  font-family: -apple-system, BlinkMacSystemFont, var(--font-body), sans-serif;
  display: flex; flex-direction: column;
}
.hph-notch { position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 100px; background: #0b0c11; z-index: 5; }
.hph-status { display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; }
.hph-status-r { display: inline-flex; align-items: center; gap: 3px; }
/* real status glyphs, scaled from the AI phone's: four signal bars, the wifi icon, a battery with its level */
.hph-bars { display: inline-flex; align-items: flex-end; gap: 1px; height: 6px; }
.hph-bars i { width: 1.5px; background: #0b0c12; border-radius: 0.5px; display: block; }
.hph-bars i:nth-child(1) { height: 2px; } .hph-bars i:nth-child(2) { height: 3.5px; }
.hph-bars i:nth-child(3) { height: 4.5px; } .hph-bars i:nth-child(4) { height: 6px; }
.hph-wifi { font-size: 8px; line-height: 1; color: #0b0c12; margin: 0 1px; }
.hph-batt {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 8px; padding: 0 2px; border-radius: 2.5px;
  background: #0b0c12; color: #fff; font-size: 5.5px; font-weight: 700; letter-spacing: 0; line-height: 1;
}
.hph-batt::after {
  content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 1.2px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(11,12,18,0.4);
}
.hph-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hph-chip { align-self: flex-start; font-weight: 600; 
  border-radius: 100px; background: #fff; color: #3c3c43; }
.hph-brand { margin: 6px auto 0; font-weight: 800; letter-spacing: -0.02em; color: #0a72e8; }
/* the app's greeting glyph, drawn with the site's icon set rather than CSS shapes:
   the hand-built rays rendered as a dot in the middle of a ring */
.hph-sun { display: flex; justify-content: center; margin: 5px 0 3px; }
.hph-sun i { line-height: 1; color: #3b3f4a; font-style: normal; }
.hph-sun::before {
  background:
    linear-gradient(#3b3f4a, #3b3f4a) center/1.6px 5px no-repeat,
    linear-gradient(#3b3f4a, #3b3f4a) center/5px 1.6px no-repeat;
}
.hph-sun::after { transform: rotate(45deg);
  background:
    linear-gradient(#3b3f4a, #3b3f4a) center/1.6px 5px no-repeat,
    linear-gradient(#3b3f4a, #3b3f4a) center/5px 1.6px no-repeat;
}
.hph-greet { text-align: center; font-weight: 700; line-height: 1.25; }
.hph-card { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px;
  background: #fff;
  box-shadow:0 1px 2px rgba(10,12,26,0.06); opacity: 0; transform: translateY(5px); }
.hph-k { font-size: 7.5px; font-weight: 700; }
.hph-a { font-size: 7.5px; font-weight: 700; color: #0a72e8; }
.hph-v { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; color: #16a34a; }
.hph-tick { border-radius: 50%; background: #16a34a; flex: none; }
.hph-sect { font-weight: 800; }
.hph-msg { line-height: 1.35; color: #3c3c43; margin-top: 2px; }
.hph-cta { margin: auto 0 8px; border: 0; width: 100%; border-radius: 100px;
  color: #fff; font-weight: 800; letter-spacing: 0.04em;
  font-family: inherit; }
.hph-tabs { flex: none; display: flex; justify-content: space-between; gap: 2px;
  background: rgba(255,255,255,0.9); }
.hph-tabs span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-weight: 600; color: #6b6b76; }
.hph-tabs span i { font-style: normal; }
.hph-tabs span.is-on { color: #0a84ff; }

@media (prefers-reduced-motion: no-preference) {
  .hph-c1 { animation: hph-land 7s ease-in-out infinite; }
  .hph-c2 { animation: hph-land 7s ease-in-out .5s infinite; }
}
@keyframes hph-land {
  0%, 6% { opacity: 0; transform: translateY(5px); }
  14%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(5px); }
}
@keyframes hph-pulse {
  0%, 30% { background: #0a84ff; }
  42% { background: #2b95ff; }
  50%, 100% { background: #0a84ff; }
}
@media (prefers-reduced-motion: reduce) { .hph-card { opacity: 1; transform: none; } }

@media (max-width: 1439px) { .hph { right: 8px; } }
/* Below this the hero stacks to one centred column, so the side-by-side geometry no
   longer holds: the phone drops and the iPad takes the full stage. */
@media (max-width: 1240px) {
  .hph { display: none; }
  .hpos-stage .hpos-device { margin-right: 0; }
}

/* the phone is at true relative scale now, so the screen's type and rhythm tighten to
   match: at 158px wide the earlier sizes overflowed the tab bar */
.hph-body { padding: 3px 8px 0; }
.hph-brand { font-size: 10.5px; }
.hph-sun i { font-size: 18px; }
.hph-greet { font-size: 9.5px; margin-bottom: 5px; }
.hph-card { padding: 5px 7px; margin-bottom: 4px; border-radius: 6px; }
.hph-k, .hph-a { font-size: 6.5px; }
.hph-v { font-size: 7.5px; }
.hph-tick { width: 6px; height: 6px; }
.hph-sect { font-size: 7.5px; margin-top: 5px; }
.hph-msg { font-size: 6.5px; }
.hph-cta { height: 20px; font-size: 8px; margin-bottom: 6px; }
.hph-tabs { padding: 3px 5px 5px; }
.hph-tabs span { font-size: 5px; }
.hph-tabs span i { font-size: 9.5px; }
.hph-chip { font-size: 6.5px; padding: 2px 6px; }
.hph-status { font-size: 7px; padding: 6px 10px 1px; }
.hph-notch { width: 46px; height: 13px; top: 6px; }

/* ---- NEW SALE, emphasised -----------------------------------------------------------
   The primary action on the phone. It carries a brand gradient, a lifted shadow, a
   halo that breathes outward, and a light sweep across the face on each cycle, so the
   eye lands on it the way it lands on the iPad's PAY. */
.hph-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0a84ff, #2f6bff 55%, #4D7EFF);
  box-shadow:0 4px 12px -2px rgba(7, 9, 26, 0.3);
}
.hph-cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.55) 50%, transparent 66%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .hph-cta { animation: hph-cta-halo 7s ease-in-out infinite; }
  .hph-cta::after { animation: hph-cta-sheen 7s ease-in-out infinite; }
}
@keyframes hph-cta-halo {
  0%, 24% { box-shadow:0 4px 12px -2px rgba(7, 9, 26, 0.3), 0 0 0 0 rgba(7, 9, 26, 0.08); }
  38% { box-shadow:0 6px 16px -2px rgba(7, 9, 26, 0.3), 0 0 0 8px rgba(7, 9, 26, 0); }
  52%, 100% { box-shadow:0 4px 12px -2px rgba(7, 9, 26, 0.3), 0 0 0 0 rgba(7, 9, 26, 0); }
}
@keyframes hph-cta-sheen {
  0%, 26% { transform: translateX(-120%); }
  44% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* the phone's masthead uses the real logo, not a text wordmark. The screen is light,
   so the colour lockup applies in both themes. */
.hph-brand { display: flex; justify-content: center; margin-top: 5px; }
.hph-brand img { width: 74px; height: auto; display: block; }

/* ---- Contact hero: copy left, form right --------------------------------------------
   The page opened with a headline and then sent everyone off to other pages. The form
   now sits in the hero, so the primary action is above the fold. Fields reuse the
   demo page's dfx-* components rather than a second form system. */
.chero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: 48px; align-items: start; }
.chero-title { font-size: clamp(36px, 5vw, 58px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.06; margin: 18px 0 0; }
.chero-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.chero-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.chero-points i { flex: none; font-size: 18px; color: var(--accent, var(--brand-blue)); margin-top: 1px; }
.chero-points strong { color: var(--text); }
.chero-points a { color: var(--brand-text); font-weight: 600; }

.chero-form {
  padding: 30px 32px 26px; border-radius: 18px;
  background: var(--bg-elevated); border: 1px solid var(--accent-line, var(--border));
  box-shadow:0 30px 60px -34px rgba(6, 8, 30, 0.6);
}
.chero-form textarea {
  width: 100%; font-family: inherit; font-size: 14px; padding: 11px 13px;
  border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg-deep); color: var(--text); resize: vertical;
}

@media (max-width: 980px) {
  .chero { grid-template-columns: 1fr; gap: 30px; }
  /* the form leads on narrow screens, where the copy would otherwise push it under the fold */
  .chero-form { order: -1; }
}

/* Our Story. The year pins to the left and ticks over as entries scroll past it,
   so the reader feels the clock moving rather than reading a column of dates.
   Fails open: with no JS the first year shows and the spine sits full. */
.hist { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 46px; }
.hist-rail { position: relative; }
.hist-stage { position: sticky; top: 38vh; text-align: right; }
/* The gradient is clipped to the text, so the box MUST cover every glyph: a full-width
   block let the last digit fall outside the background and render transparent. Sizing to
   max-content fixes that, and the padding covers ink the negative tracking pulls past
   the final advance. */
.hist-now {
  font-family: var(--font-body); font-size: clamp(54px, 6.6vw, 84px); font-weight: 700;
  line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  width: max-content; max-width: 100%; margin-left: auto; padding-right: 0.07em;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hist-now.is-turning { animation: hist-turn 0.52s cubic-bezier(0.2, 0.6, 0.2, 1); }
@keyframes hist-turn {
  0% { opacity: 0; transform: translateY(20px) scale(0.96); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* the entries, threaded on a spine that fills as the reader descends */
/* --hist-lp is the one source of truth for the gutter: the spine is positioned
   against the list padding box, the dots against each item, so they must be
   derived from the same number or they drift apart. */
.hist-list { --hist-lp: 42px; list-style: none; margin: 0; padding: 0 0 0 var(--hist-lp); position: relative; }
.hist-list::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--border) 6%, var(--border) 94%, transparent);
}
.hist-list::after {
  content: ""; position: absolute; left: 0; top: 10px; width: 2px;
  height: calc(var(--hist-p, 1) * (100% - 20px));
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-purple));
  box-shadow:0 0 10px 1px rgba(7, 9, 26, 0.08);
  transition: height 0.18s linear;
}
/* one spacing value for every entry: the rhythm should be steady, and the extra
   room gives each year time to sit while it is the current one */
.hist-item { position: relative; padding: 0 0 68px; }
.hist-item:last-child { padding-bottom: 0; }
/* pull the dot back out of the gutter so its centre lands on the spine at x=1 */
.hist-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--hist-lp) - 5px); top: 9px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--border-strong); box-shadow:0 0 0 4px var(--bg-deep);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.hist-item.is-here::before {
  background: var(--brand-blue); transform: scale(1.25);
  box-shadow:0 0 0 4px var(--bg-deep), 0 0 14px 3px rgba(7, 9, 26, 0.08);
}
.hist-item h3 {
  margin: 0; font-size: 18px; font-weight: 600; line-height: 1.55; letter-spacing: -0.02em;
  color: var(--text-muted); transition: color 0.35s ease;
}
.hist-item.is-here h3 { color: var(--text); }
/* The pinned column is decorative (aria-hidden), so each entry keeps its own year
   for screen readers: hidden visually on desktop, shown inline once the column goes. */
.hist-mini {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.hist-item.reveal { transform: translateY(18px) translateX(12px); }
.hist-item.reveal.in-view { transform: none; }

@media (max-width: 860px) {
  .hist { grid-template-columns: 1fr; gap: 0; }
  .hist-rail { display: none; }
  .hist-list { --hist-lp: 30px; }
  .hist-mini {
    position: static; width: auto; height: auto; overflow: visible; clip-path: none;
    display: block; font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums; margin-bottom: 7px;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hist-item { padding-bottom: 46px; }
  .hist-item::before { top: 5px; }
  .hist-item.reveal { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) {
  .hist-now.is-turning { animation: none; }
  .hist-item.reveal { transform: none; }
  .hist-list::after { transition: none; }
}

/* The HubSpot form carries its own card, heading and footnote, so the wrapper
   drops its own chrome: otherwise the contact hero shows a card inside a card
   and the heading twice. */
.chero-form.is-embed {
  padding: 0; background: none; border: 0; box-shadow:none; border-radius: 0;
}

/* Same as the contact hero: the HubSpot form brings its own card, heading and
   footnote, so the wrapper drops its chrome rather than framing it twice. */
.lead-formwrap.is-embed,
.tev-formwrap.is-embed,
.demox-formwrap.is-embed {
  padding: 0; background: none; border: 0; box-shadow:none; border-radius: 0;
}

/* Nav CTA in the main brand blue rather than the gradient. */
.nav-cta .btn-primary {
  background: var(--brand-blue);
  border-color: transparent;
  text-shadow: none;
}
.nav-cta .btn-primary:hover { background: var(--brand-royal); }

/* Gradient reduced to the places it earns: gradient text, AI and Plus
   surfaces, and the primary CTA. The decorative glow layer is off. */
.shot-glow,
.shot-glow::after,
.midcta-glow,
.innov-glow-1,
.innov-glow-2,
.caps-media-glow,
.pfh-band-glow,
.padv-glow-1,
.padv-glow-2,
.lead-glow,
main[data-vertical] .padv-glow-1,
main[data-vertical] .padv-glow-2,
main[data-vertical] .tm-band-glow,
.tm-band-glow,
.globe-halo,
.hero-glow::before,
.hero-glow::after,
.emx-glow,
.hpos-bootveil { background: none; }

/* Card and tile fills flattened to solid surfaces: the colour stays, the
   gradient goes. Gradient text is deliberately excluded here, since a solid
   background behind background-clip:text would hide the words. */
.bento-card, .cs-card, .blog-card, .duo-card { background: var(--bg-elevated); }
.duo-img { background: var(--bg-deep); }
.bento-badge { background: var(--brand-blue); }
.rollout-steps::before { background: var(--border); }

/* Light mode contrast. #247DFF is a fine brand colour but fails WCAG AA both
   ways at body size: white on it is 3.85:1 and it is 3.85:1 on white. In light
   mode, solid blue fills go darker and blue text uses --brand-text, which is
   already accessible. Dark mode is unaffected. */
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-cta .btn-primary,
[data-theme="light"] .rollout-num,
[data-theme="light"] .bento-badge { background: #0b57d0; }
[data-theme="light"] .counter { color: var(--brand-text); }
[data-theme="light"] .padv-kicker { color: #3041D0; }

/* The duo tag pills were built for a dark card. In light mode the card is
   white, so the pill text has to darken with it. */
[data-theme="light"] .duo-tags .t-core {
  background: rgba(7, 9, 26, 0.06); color: #3f4759; border-color: rgba(7, 9, 26, 0.16);
}
[data-theme="light"] .duo-tags .t-ai {
  background: rgba(36, 125, 255, 0.12); color: #0b57d0; border-color: rgba(36, 125, 255, 0.35);
}

/* Hero and section eyebrows as plain type rather than a pill badge with a dot.
   A badge sitting directly above the H1 is one of the more recognisable
   template signatures; the label still does its job at the same size, in blue
   and bolder. */
.eyebrow {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  color: var(--brand-text);
}
.eyebrow-dot { display: none; }

/* On the dark photo heroes the label needs to stay light to read. */
.hero .eyebrow { color: #9dc0ff; background: none; border-color: transparent; }

/* Section eyebrows lose the pill and the dot for the same reason. Each band's
   accent colour stays, so the section colour system still reads, just as type
   rather than as a badge. */
[class*="ac-"] .section-header .section-eyebrow,
[class*="ac-"] .section-eyebrow {
  display: inline-block;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-weight: 700;
  color: var(--accent, var(--brand-text));
  -webkit-text-fill-color: currentColor;
}
[class*="ac-"] .section-eyebrow::before { display: none; }

/* "In numbers": light card, a soft visual per column, then a hairline, the
   figure and a two-line caption. Static by design, the calm is the point. */
.innum { padding: 0; }
.innum-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 44px 48px 46px;
  box-shadow:0 24px 60px -40px rgba(7, 9, 26, 0.28);
}
.innum-head { margin-bottom: 34px; }
.innum-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; color: var(--brand-text);
  margin-bottom: 14px;
}
.innum-eyebrow i { font-size: 13px; }
.innum-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; line-height: 1.14;
  letter-spacing: -0.035em; margin: 0; color: var(--text);
}
.innum-h2 span { color: var(--text-faint); }

.innum-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.innum-col { position: relative; padding: 0 34px; }
.innum-col:first-child { padding-left: 0; }
.innum-col:last-child { padding-right: 0; }
.innum-col + .innum-col::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 6px; width: 1px;
  background: var(--border);
}

/* the visual sits above a hairline, as in the reference */
.innum-vis {
  height: 132px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: center;
  position: relative; overflow: hidden;
}
.innum-vis svg { width: 100%; height: 108px; display: block; }

.innum-vis-dots {
  align-items: center; justify-content: center; gap: 9px;
  display: grid; grid-template-columns: repeat(6, 10px); padding-bottom: 18px;
}
.innum-vis-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(7, 9, 26, 0.10); }
[data-theme="dark"] .innum-vis-dots span { background: rgba(255, 255, 255, 0.12); }
.innum-vis-dots span:nth-child(3),
.innum-vis-dots span:nth-child(7),
.innum-vis-dots span:nth-child(10),
.innum-vis-dots span:nth-child(14),
.innum-vis-dots span:nth-child(16),
.innum-vis-dots span:nth-child(21) { background: #247DFF; }

.innum-fig {
  font-family: var(--font-display); font-size: clamp(26px, 2.9vw, 36px);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; color: var(--text);
  margin-bottom: 10px;
}
.innum-cap { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-faint); }

@media (max-width: 860px) {
  .innum-card { padding: 32px 26px 34px; }
  .innum-row { grid-template-columns: 1fr; gap: 30px; }
  .innum-col { padding: 0; }
  .innum-col + .innum-col::before { display: none; }
  .innum-vis { height: 110px; }
}

/* The middle card was letterboxed: contain plus side padding left the sled
   shot floating in its tile. It fills the space now. */
.duo-card-flip .duo-img-tile { padding: 0; }

/* Kickers in solid brand colour rather than the washed-out tints. */
.duo-kicker { color: var(--brand-text); }

/* Uptime read as a run of trading days rather than a number repeated twice. */
.innum-vis-bars {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 5px; padding-bottom: 16px;
}
.innum-vis-bars span {
  width: 7px; border-radius: 3px; background: #247DFF; opacity: 0.85;
  height: 62px;
}
.innum-vis-bars span:nth-child(3n)   { height: 74px; }
.innum-vis-bars span:nth-child(4n+1) { height: 52px; }
.innum-vis-bars span:nth-child(7)    { height: 40px; opacity: 0.35; }
.innum-vis-bars span:nth-child(13)   { height: 46px; opacity: 0.35; }

/* Cooler, more restrained tiles: the lavender read as pastel. Blues and a
   steel grey instead, still saturated enough to carry the section. */
.duo-card-ai .duo-img-tile      { background: #dbe7fb; }
.duo-card-flip .duo-img-tile    { background: #c8dcf4; }
.duo-grid .duo-card:last-child .duo-img-tile { background: #e0e5ed; }
.duo-kicker-ai { color: #3730a3; }

/* The Proof: fourth card in brand blue rather than navy. #1A6FF0 is the
   closest step down from #247DFF that carries white body text at 4.59:1;
   the brand blue itself only reaches 3.85 and would fail on the label. */
.cs-card-more .cs-more-count {
  background: none; -webkit-text-fill-color: #ffffff; color: #ffffff;
}
.cs-card-more .cs-more-label { color: rgba(255, 255, 255, 0.92); }

/* Cool the remaining magenta pill, which was the last pink in the section. */
[data-theme="light"] .duo-tags .t-plus {
  background: rgba(55, 48, 163, 0.09); color: #3730a3; border-color: rgba(55, 48, 163, 0.30);
}

/* The flip card puts the tile last, and a fixed aspect ratio left it short of
   the card's full height once the grid stretched all three to match, which is
   the white strip under the blue. Let the tile take the remaining space and
   centre the sleds inside it. */
.duo-card-flip .duo-img {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-height: 230px;
  align-items: center;
}
.duo-card-flip .duo-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 18px 24px;
}

/* And let the standard duo cards absorb their leftover height, which was
   showing as a strip under the third card. */
.duo-card .duo-body { flex: 1 1 auto; }

/* Liquid glass on the nav. What makes Apple's version read as glass is not
   the blur, which everyone copies, but the edge: a specular highlight where
   light catches the top, the surface seating into the page beneath it, and
   enough transparency for content to refract through rather than sit behind
   frosted plastic.
   Written at the same specificity as the theme rules above, and respecting
   the existing scroll state: dark keeps its transparent bar over the hero
   photos and turns to glass once scrolled. */
[data-theme="light"] .nav,
[data-theme="dark"] .nav.nav-scrolled {
  border-bottom: 0;
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(7, 9, 26, 0.07),
    0 8px 26px -16px rgba(7, 9, 26, 0.20);
}
[data-theme="dark"] .nav.nav-scrolled {
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 8px 26px -16px rgba(0, 0, 0, 0.6);
}

/* the light falling across the surface */
[data-theme="light"] .nav::after,
[data-theme="dark"] .nav.nav-scrolled::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 62%);
}
[data-theme="dark"] .nav.nav-scrolled::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 62%);
}
.nav-inner { position: relative; z-index: 1; }

/* An opaque bar, so the text over it stays readable. */
[data-theme="light"] .nav, [data-theme="dark"] .nav.nav-scrolled { background: var(--bg); }

/* Same glass on the elements that float above content: the chips over the
   hero device, and the year bar that rides the events archive. Each gets the
   specular top edge and a seated bottom, so they read as a layer of glass
   rather than a flat pill dropped on top. Content cards stay solid. */
.fan-bubble,
.hpos-annot,
.hpos-chip-pay {
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(7, 9, 26, 0.10),
    0 10px 24px -14px rgba(7, 9, 26, 0.45);
}

.evy-head {
  background: color-mix(in srgb, var(--accent, #4D94FF) 14%, var(--bg-elevated));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(7, 9, 26, 0.12),
    0 14px 30px -20px rgba(7, 9, 26, 0.5);
}
[data-theme="light"] .fan-bubble,
[data-theme="light"] .hpos-annot,
[data-theme="light"] .hpos-chip-pay,
[data-theme="light"] .evy-head {
  border-color: rgba(7, 9, 26, 0.10);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(7, 9, 26, 0.06),
    0 10px 26px -16px rgba(7, 9, 26, 0.22);
}

/* The glass above swapped these three from a solid dark ground to a translucent
   one, but their text colour was still the white that ground needed. In light
   mode that is white on near-white, which is how the callouts over the iPad
   went invisible. Give them the page's ink instead, and recolour the pulse dots
   that were also picked for a dark ground. */
[data-theme="light"] .fan-bubble,
[data-theme="light"] .hpos-annot,
[data-theme="light"] .hpos-chip-pay {
  color: var(--text);
}
[data-theme="light"] .fan-bubble .pulse-dot,
[data-theme="light"] .hpos-chip-pay .pulse-dot {
  background: var(--brand-blue);
  box-shadow:0 0 0 0 rgba(7, 9, 26, 0.08);
}

.fan-bubble, .hpos-annot, .hpos-chip-pay { background: var(--bg-elevated); }
.evy-head { background: color-mix(in srgb, var(--accent, #4D94FF) 17%, var(--bg-deep)); }

/* The accent card's paragraph was losing to a later .bento-card p rule at the
   same specificity, so dark body text was sitting on the blue gradient.
   Raised above it and pinned to white. */
.bento-card.bento-accent p { color: rgba(255, 255, 255, 0.88); }
.bento-card.bento-accent h3 { color: #ffffff; }

/* Retail, not abstract: a real store sits behind the gradient so the numbers
   are grounded in a shop floor rather than floating on brand colour. */
.bento-card.bento-accent {
  background:
    linear-gradient(150deg, rgba(18, 63, 176, 0.95) 0%, rgba(31, 106, 224, 0.92) 35%, rgba(63, 102, 224, 0.94) 100%),
    url("/assets/images/homepage/hero-store.webp") center / cover no-repeat;
}

/* The badge went solid blue in the gradient pass but kept dark text, which
   left it barely readable. White on it, and the icon with it. */
.bento-badge { color: #ffffff; }
.bento-badge i { color: #ffffff; }

/* Gradient stops deepened: white body text on the old blue end was 3.85:1.
   Every stop now clears 4.5 against white (5.00 at the lightest). */

/* Back to a solid tile: no glass panel, just a very slight gradient over the
   store photograph so the copy has something to sit on. */
.cs-card-more .cs-more-inner {
  margin: auto 0 0;
  padding: 26px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow:none;
}

/* Let the rail bleed to the viewport edge so the following card is visibly
   cut by the page, which is what tells you it scrolls. */
.cs-rail { padding-right: 0; scroll-padding-right: 0; }
.cs-rail > :last-child { margin-right: max(32px, calc((100vw - var(--max-w)) / 2)); }

/* The "next" tile as a half-width end-cap, so it reads as the tail of the
   rail rather than a fifth story competing with the four real ones. */

/* Story cards narrowed so all four fit with the tail card peeking at the
   page edge, which is what signals the rail scrolls. */

/* Tail card back to brand blue rather than the store photograph. */
.cs-card.cs-card-more {
  background: linear-gradient(165deg, #2b7cf5 0%, #1A6FF0 55%, #1257cc 100%);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Homepage hero built around real store footage. Light, asymmetric, and the
   film bleeds off the right edge rather than sitting in a centred box, so the
   page opens on a shop floor instead of a gradient. */

/* the film, cropped by the page edge */

/* Motion is content here, not decoration, but honour the preference. */

/* The animated device pair, rehoused from the homepage hero. It was built
   inside a dark hero grid, so it needs its own stage on a light section. */
.devshow-stage { position: relative; max-width: 980px; margin: 12px auto 0; }
.devshow-stage .hpos-stage { position: relative; }
.devshow-stage .hpos-device { margin-right: calc(22.5% - 26px); }

/* Homepage hero: the store footage fills the frame and the copy sits over it,
   left-aligned, with a veil across the left so the type stays readable
   whatever the footage is doing behind it. */
.vhero {
  position: relative;
  /* Sized so the customer logo rail clears the fold rather than sitting just
     under it: 240px is the nav plus the whole logos block (padding, label,
     marquee), so the strip is on screen the moment the page opens. */
  min-height: max(380px, calc(100vh - var(--nav-h) - var(--logos-h)));
  min-height: max(380px, calc(100dvh - var(--nav-h) - var(--logos-h)));
  display: flex; 
  overflow: hidden;
  background: #0b1020;
}
.vhero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.vhero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 10, 26, 0.88) 0%, rgba(6, 10, 26, 0.72) 34%, rgba(6, 10, 26, 0.18) 62%, rgba(6, 10, 26, 0.05) 100%),
    linear-gradient(0deg, rgba(6, 10, 26, 0.40) 0%, rgba(6, 10, 26, 0) 45%);
}
.vhero-inner { position: relative; z-index: 2; width: 100%; }
.vhero-copy { max-width: 640px; }
.vhero-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 56px); font-weight: 600; line-height: 1.07;
  letter-spacing: -0.04em; margin: 0 0 20px; color: #ffffff;
}
.vhero-sub {
  font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.82); margin: 0 0 32px; max-width: 34em;
}
.vhero-cta { justify-content: flex-start; margin-bottom: 0; }

/* buttons that hold up on footage: solid white, and an outlined companion */
.vhero-btn {
  /* #0b57d0 rather than --brand-blue: white on #247DFF is 3.85:1, and a 15px
     bold label is not large text, so it would miss AA. This is 6.4:1 and is
     already the solid blue the nav CTA uses. */
  background: #0b57d0; color: #ffffff; border: 1px solid #0b57d0;
  font-weight: 700; text-shadow: none;
}
.vhero-btn:hover {
  background: #0a4cb8; border-color: #0a4cb8; transform: translateY(-2px);
}
.vhero-btn i { color: #ffffff; }
.vhero-btn-out {
  background: transparent; color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.62); font-weight: 600;
}
.vhero-btn-out:hover {
  background: rgba(255, 255, 255, 0.12); border-color: #ffffff;
}

@media (max-width: 900px) {
  .vhero-veil {
    background:
      linear-gradient(0deg, rgba(6, 10, 26, 0.92) 0%, rgba(6, 10, 26, 0.55) 52%, rgba(6, 10, 26, 0.28) 100%);
  }
  .vhero-copy { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vhero-bg { display: none; }
  .vhero { background: url("/assets/video/store-checkout-poster.jpg") center / cover no-repeat #0b1020; }
}

/* Hero copy sits bottom-left over the footage, and the whole headline is
   white rather than picking out a phrase in blue. */
.vhero { align-items: flex-end; }
.vhero-inner { padding-bottom: 80px; }
.vhero-title .os-grad {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background: none;
}
@media (max-width: 900px) {
  .vhero-inner { padding-bottom: 52px; }
}

/* Global Operations reads as a dark slab dropped into a light page. In light
   mode it becomes a light band, which means flipping the type and the map with
   it, not just the background. Everything here is pitched for contrast: the
   first pass inherited the dark scene's pale type and left a white-on-white
   map, so the whole section read as a ghost. */
[data-theme="light"] .scene-ink {
  background:
    radial-gradient(80% 60% at 12% -10%, rgba(36, 125, 255, 0.07), transparent 62%),
    var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .scene-ink .ch-title { color: var(--text); }
[data-theme="light"] .scene-ink .ch-para { color: var(--text); opacity: 0.78; }

/* The dark scene's title gradient is tuned for a near-black ground; on white it
   washes out. Use the real brand ramp, which is built for light. */
[data-theme="light"] .scene-ink .ch-eyebrow {
  /* background-image, not the shorthand: the shorthand resets background-clip
     and the gradient paints as a bar instead of filling the glyphs. */
  background-image: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Map: landmass in a definite slate-blue with white coastlines, so the
   continents actually have shape at a glance. */
[data-theme="light"] .scene-ink .wm-c { fill: #ccd8e9; stroke: #ffffff; stroke-width: 0.7; }
[data-theme="light"] .scene-ink .wm-live { stroke: rgba(11, 87, 208, 0.28); }
[data-theme="light"] .scene-ink .wm-city { fill: #0b57d0; }
[data-theme="light"] .scene-ink .wm-dot {
  stroke: #ffffff; filter: drop-shadow(0 1px 3px rgba(7, 9, 26, 0.3));
}
[data-theme="light"] .scene-ink .wm-ping { stroke: #2c6fe0; stroke-width: 1.8; }
[data-theme="light"] .scene-ink .wm-city-g:nth-child(3n) .wm-ping { stroke: #5C83E0; }
[data-theme="light"] .scene-ink .hero-bg { opacity: 0.06; }

/* The final CTA sits on a gradient, so its button is white with blue type.
   The light-mode fill rule was overriding that and leaving blue on blue at
   1.06:1, which is invisible. */
[data-theme="light"] .final-cta .btn-primary {
  background: #ffffff;
  color: var(--brand-text);
}
[data-theme="light"] .final-cta .btn-primary i { color: var(--brand-text); }

/* Blog: the two secondary cards show more of their image. */
.blog-card:not(.featured) .blog-card-img { height: 268px; }
@media (max-width: 900px) {
  .blog-card:not(.featured) .blog-card-img { height: 220px; }
}

/* Selected capability tabs carry white text on brand blue, which is 3.85:1.
   Same treatment as the buttons: the deeper blue in light mode. */
[data-theme="light"] .captab[aria-selected="true"],
[data-theme="light"] .captab.is-active,
[data-theme="light"] .captabs-nav .captab[aria-selected="true"] {
  background: #0b57d0;
  border-color: #0b57d0;
}

/* =====================================================
   PLATFORM MODULES, editorial layout
   A tall photographic plate on the left carries the POS; the right column runs
   the argument, then splits into a pale panel holding the module list and a
   second photographic plate carrying the reach figure.
   ===================================================== */
.pmod-section { padding-top: 8px; }

.pmod-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
 color: var(--brand-text);
  background: var(--brand-soft); border: 1px solid rgba(36, 125, 255, 0.26);
  padding: 7px 15px; border-radius: 980px; margin-bottom: 22px;
}
.pmod-h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 62px); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.035em; margin: 0 0 40px; color: var(--text); max-width: 15em;
}
.pmod-h2 span { color: var(--brand-blue); }

.pmod-ed { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 20px; }

/* --- the tall plate --- */
.pmod-figure {
  position: relative; display: block; overflow: hidden;
  /* Shorter since the copy beside it was cut: the plate sets the row height,
     so an over-tall one strands the panel CTA below a gap. */
  border-radius: 24px; min-height: 470px;
  color: #ffffff; text-decoration: none; background: #0b1020;
}
.pmod-figure img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.6s ease;
}
.pmod-figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6, 10, 26, 0.90) 0%, rgba(6, 10, 26, 0.34) 44%, rgba(6, 10, 26, 0) 70%);
}
.pmod-figure:hover img { transform: scale(1.04); }
.pmod-figure-cap { position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 2; display: block; }
.pmod-figure-cap strong {
  display: block; font-family: var(--font-display); font-size: 27px;
  font-weight: 600; letter-spacing: -0.022em; margin: 12px 0 8px;
}
.pmod-figure-cap em {
  display: block; font-style: normal; font-size: 15px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.80); max-width: 26em;
}
.pmod-tag {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffffff; background: var(--brand-blue);
  padding: 5px 11px; border-radius: 980px;
}

/* --- the right column --- */
.pmod-col { display: flex; flex-direction: column; gap: 16px; }
.pmod-lead {
  margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5;
  font-weight: 500; color: var(--text);
}
.pmod-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1 1 auto; }

/* --- pale panel: the module list --- */
.pmod-panel {
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 24px; padding: 26px 26px 24px;
}
.pmod-fig {
  font-family: var(--font-display); font-size: 40px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; color: var(--text);
}
.pmod-figcap { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 9px; }
.pmod-modgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 22px; }
.pmod-modgrid a {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.25;
  color: var(--text-muted); text-decoration: none;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 11px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.pmod-modgrid a i { flex: 0 0 auto; font-size: 15px; color: var(--brand-text); }
.pmod-modgrid a:hover { color: var(--text); border-color: var(--brand-blue); background: var(--bg-elevated); }
.pmod-cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  background: #0b57d0; color: #ffffff; font-weight: 700; font-size: 14.5px;
  padding: 9px 9px 9px 20px; border-radius: 980px; text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pmod-cta i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); font-size: 15px;
}
.pmod-cta:hover { background: #0a4cb8; transform: translateY(-2px); }

/* --- second plate: the reach figure --- */
.pmod-shotcard {
  position: relative; display: block; overflow: hidden;
  border-radius: 24px; min-height: 250px;
  color: #ffffff; text-decoration: none; background: #0b1020;
}
.pmod-shotcard img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.6s ease;
}
.pmod-shotcard::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(6, 10, 26, 0.92) 0%, rgba(6, 10, 26, 0.38) 48%, rgba(6, 10, 26, 0.04) 78%);
}
.pmod-shotcard:hover img { transform: scale(1.04); }
.pmod-shotcap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; display: block; }
.pmod-shotcap .pmod-fig { display: block; color: #ffffff; font-size: 36px; }
.pmod-shotcap .pmod-figcap { color: #ffffff; }
.pmod-shotcap em {
  display: block; font-style: normal; font-size: 13.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.78); margin-top: 9px;
}

@media (max-width: 1080px) {
  .pmod-ed { grid-template-columns: 1fr; }
  .pmod-figure { min-height: 420px; }
}
@media (max-width: 700px) {
  .pmod-duo { grid-template-columns: 1fr; }
  .pmod-modgrid { grid-template-columns: 1fr; }
  .pmod-figure { min-height: 340px; }
  .pmod-figure-cap, .pmod-shotcap { left: 18px; right: 18px; bottom: 18px; }
  .pmod-panel { padding: 22px; }
}

/* A single word set in the contrasting serif italic. Sized up a touch because
   a serif italic reads smaller than the sans beside it at the same font-size,
   and the descender needs a little room in a 1.07 line-height headline. */
.t-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  /* a text serif carries a larger x-height than the display face it replaced,
     so it sits down against the sans rather than up */
  font-size: 0.96em;
  letter-spacing: -0.015em;
}

/* The device stage was lit for the dark homepage hero it used to live in: its
   pocket laid rgba(4,6,20,0.55) behind the devices, which on the light POS page
   reads as a grey smudge on clean ground. Light mode gets a blue halo instead,
   with the separation coming from a real drop shadow, and the iPad takes the
   same graphite bezel the iPhone beside it already had rather than a
   translucent white frame that went ghostly on a pale background. */
[data-theme="light"] .hpos-stage::before {
  background:
    radial-gradient(54% 50% at 50% 46%, rgba(36, 125, 255, 0.15), transparent 70%),
    radial-gradient(76% 70% at 50% 54%, rgba(36, 125, 255, 0.055), transparent 78%);
}
[data-theme="light"] .hpos-device {
  background: linear-gradient(160deg, #2d313d 0%, #171a24 100%) padding-box,
              linear-gradient(160deg, rgba(255,255,255,0.30), rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.14)) border-box;
  box-shadow:0 44px 64px -36px rgba(7, 9, 26, 0.42),
    0 10px 22px -14px rgba(7, 9, 26, 0.16);
}

/* =====================================================
   PHOTO HEROES MATCH THE HOMEPAGE
   The eighteen full-width photo heroes used to throw the headline to the top
   of the frame and the supporting copy to the bottom, at a much larger type
   scale, over a heavier scrim, with gradient buttons. The homepage hero settles
   everything into one block at the bottom left. This brings them into line
   without touching a single page's markup.
   ===================================================== */
/* Two classes, because .hero-photo-compact .hero-photo-inner sets flex-start
   further up and would otherwise outrank a single-class rule however late it
   sits in the file. */
.hero-photo .hero-photo-inner,
.hero-photo-compact .hero-photo-inner {
  justify-content: flex-end;
  padding-bottom: 80px;
  padding-top: 40px;
}
/* Tall enough that the copy floats in the frame rather than filling it. The
   homepage carries 272px of photograph above its copy block; at 520px these
   carried 60px, which reads as vertically centred however the copy is aligned.
   155px is the nav plus the breadcrumb bar these pages have and the homepage
   does not. */
.hero-photo,
.hero-photo-compact { min-height: max(600px, calc(100vh - 155px)); }

/* one block, not two thrown apart */
.hero-photo-foot { margin-top: 0; }
.hero-photo-compact .hero-photo-foot { margin-top: 0; }
.hero-photo-head { margin-bottom: 20px; }

.hero-photo-title,
.hero-photo-compact .hero-photo-title {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.07;
  letter-spacing: -0.04em;
  margin: 0;
  text-shadow: none;
}
.hero-photo-note { max-width: 640px; }
.hero-photo-note p {
  font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.82); margin: 0 0 32px;
}

/* the homepage veil: left-weighted, with a lift off the bottom edge */
.hero-photo-scrim,
[data-theme="light"] .hero-photo-scrim {
  background:
    linear-gradient(90deg, rgba(6, 10, 26, 0.88) 0%, rgba(6, 10, 26, 0.72) 34%, rgba(6, 10, 26, 0.18) 62%, rgba(6, 10, 26, 0.05) 100%),
    linear-gradient(0deg, rgba(6, 10, 26, 0.40) 0%, rgba(6, 10, 26, 0) 45%);
}
.hero-photo .hero-photo-scrim::after { display: none; }

/* the homepage pair: solid blue, and an outlined companion */
.hero-photo .hero-cta .btn-primary {
  background: #0b57d0; color: #ffffff; border: 1px solid #0b57d0;
  font-weight: 700; text-shadow: none;
}
.hero-photo .hero-cta .btn-primary:hover { background: #0a4cb8; border-color: #0a4cb8; }
.hero-photo .hero-cta .btn-primary i { color: #ffffff; }
.hero-photo .hero-cta .btn-ghost,
.hero .hero-photo .btn-ghost {
  background: transparent; color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.62); font-weight: 600;
}
.hero-photo .hero-cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12); border-color: #ffffff;
}

@media (max-width: 900px) {
  .hero-photo, .hero-photo-compact { min-height: max(480px, calc(100vh - 145px)); }
  .hero-photo-inner { padding-bottom: 52px; }
  .hero-photo-note { max-width: none; }
}

/* =====================================================
   PROBLEM AND SOLUTION, stated as such
   Spacing alone did not read as a contrast, so each half is labelled and set
   on its own ground: the problem outlined and muted, the answer solid and in
   full text colour.
   ===================================================== */
.pvs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  max-width: 940px; margin: 30px auto 0; text-align: left;
}
.pvs-col { padding: 22px 24px; border-radius: 16px; }
.pvs-problem {
  background: transparent;
  border: 1px dashed var(--border-strong, var(--border));
}
.pvs-solution {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.pvs-lab {
  display: block; margin-bottom: 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.005em;
}
.pvs-problem .pvs-lab { color: var(--text-faint); }
.pvs-solution .pvs-lab { color: var(--brand-text); }
.pvs-col p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.pvs-problem p { color: var(--text-muted); }
.pvs-solution p { color: var(--text); }
@media (max-width: 760px) {
  .pvs { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
}

/* =====================================================
   HELLO IN EVERY SHIPPED LANGUAGE
   A single window one line tall, with the greetings stacked behind it and the
   track stepping up one line at a time. The last item repeats the first so the
   loop closes without a rewind. No JS: with reduced motion it holds on English.
   ===================================================== */
.hellorot { margin: 26px 0 4px; text-align: center; }
.hellorot-win {
  display: inline-flex; overflow: hidden; height: 1.3em; vertical-align: baseline;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.03em;
  color: var(--brand-text);
}
.hellorot-track {
  display: flex; flex-direction: column;
  animation: hellorot 26s cubic-bezier(.76, 0, .24, 1) infinite;
}
.hellorot-track > span {
  /* the window is as wide as the longest greeting, so each word centres in it */
  display: block; height: 1.3em; line-height: 1.3; white-space: nowrap;
  text-align: center;
}
@keyframes hellorot {
  0.000%, 5.692% { transform: translateY(-0.00em); }
  7.692%, 13.385% { transform: translateY(-1.30em); }
  15.385%, 21.077% { transform: translateY(-2.60em); }
  23.077%, 28.769% { transform: translateY(-3.90em); }
  30.769%, 36.462% { transform: translateY(-5.20em); }
  38.462%, 44.154% { transform: translateY(-6.50em); }
  46.154%, 51.846% { transform: translateY(-7.80em); }
  53.846%, 59.538% { transform: translateY(-9.10em); }
  61.538%, 67.231% { transform: translateY(-10.40em); }
  69.231%, 74.923% { transform: translateY(-11.70em); }
  76.923%, 82.615% { transform: translateY(-13.00em); }
  84.615%, 90.308% { transform: translateY(-14.30em); }
  92.308%, 98.000% { transform: translateY(-15.60em); }
  100% { transform: translateY(-16.90em); }
}
@media (prefers-reduced-motion: reduce) {
  .hellorot-track { animation: none; }
}

/* =====================================================
   CASE STUDY "AT A GLANCE"
   The numbers first, at a size that reads before the prose does, then the
   detail rows beneath. One level of elevation only: the figures are divided by
   hairlines rather than made into cards inside the panel.
   ===================================================== */
.cs-glance {
  margin: 0 0 44px; padding: 26px 30px 22px;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 18px;
}
.cs-glance-h {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.005em;
  margin: 0 0 20px; color: var(--brand-text);
}
.cs-glance-figs {
  /* one to three figures share the width evenly */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-bottom: 22px;
}
.cs-glance-fig { padding: 0 22px; }
.cs-glance-fig:first-child { padding-left: 0; }
.cs-glance-fig + .cs-glance-fig { border-left: 1px solid var(--border); }
.cs-glance-fig strong {
  display: block; font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 40px); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1; color: var(--text);
  margin-bottom: 8px;
}
.cs-glance-fig span {
  display: block; font-size: 13px; line-height: 1.45; color: var(--text-faint);
}
.cs-glance-list {
  /* no column gap: the row rules are drawn per cell, and a gap would break each
     one into two segments with a notch between the term and its value */
  display: grid; grid-template-columns: 124px 1fr; gap: 0;
  margin: 0; border-top: 1px solid var(--border);
}
.cs-glance-list dt {
  font-size: 13px; font-weight: 700; color: var(--text-faint);
  margin: 0; padding: 13px 20px 0 0;
}
.cs-glance-list dd {
  font-size: 14.5px; line-height: 1.55; color: var(--text-muted);
  margin: 0; padding: 13px 0 13px;
}
.cs-glance-list dt ~ dt { border-top: 1px solid var(--border); }
.cs-glance-list dd ~ dd { border-top: 1px solid var(--border); }

@media (max-width: 720px) {
  .cs-glance { padding: 22px 20px 16px; }
  .cs-glance-figs { grid-auto-flow: row; grid-template-columns: 1fr; margin-bottom: 4px; }
  .cs-glance-fig { padding: 14px 0; }
  .cs-glance-fig:first-child { padding-top: 0; }
  .cs-glance-fig + .cs-glance-fig { border-left: 0; border-top: 1px solid var(--border); }
  .cs-glance-fig strong { font-size: 30px; margin-bottom: 4px; }
  .cs-glance-list { grid-template-columns: 1fr; }
  .cs-glance-list dt { padding: 14px 0 2px; }
  .cs-glance-list dd { padding: 0 0 4px; }
  .cs-glance-list dd ~ dd { border-top: 0; }
}

/* A logo that ships already reversed must skip the silhouette filter wherever
   it appears, or brightness(0) invert(1) flattens its detail to a white shape.
   Same reasoning as .cs-logo-color on the homepage rail. */
.ncs-logo.is-color { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.csx-logo.is-color { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); }

/* A square-ish lockup is capped by height while a wide wordmark is capped by
   width, so at the same max-height the square one carries far less presence.
   These lift the one mark that needs it, to sit closer to Lammle's weight. */
.cs-logo.cs-logo-big { max-height: 76px; }
.csx-logo.is-big { max-height: 46px; }
.ncs-logo.is-big { max-height: 30px; }

/* =====================================================
   LUXURY VERTICAL, editorial rather than product-marketing
   Scoped to main.v-luxury so nothing else on the site moves. The levers are
   the ones the category actually uses: a text serif for headings, ink instead
   of brand blue, square corners, hairlines, and more air.
   ===================================================== */
main.v-luxury { --v-accent: #14141a; --v-accent-2: #3a3a42; }
main.v-luxury .section { padding: 124px 0; }
main.v-luxury .section-header { margin-bottom: 56px; }

/* Headings set in the text serif. The hero already italicises one word, so it
   reads as roman with an italic accent rather than as a different typeface. */
main.v-luxury .section-title,
main.v-luxury .hero-photo-title {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.14;
}
main.v-luxury .hero-photo-title { font-size: clamp(36px, 4.4vw, 60px); }
main.v-luxury .section-sub { max-width: 64ch; }

/* An eyebrow reads refined with air between the letters, not with capitals. */
main.v-luxury .section-eyebrow { letter-spacing: 0.06em; }

/* Ink, not brand blue, and square. A pill in saturated blue is the single most
   mass-market thing on the page. */
main.v-luxury .btn { border-radius: 2px; }
main.v-luxury .btn-primary,
main.v-luxury .hero-photo .hero-cta .btn-primary {
  background: #14141a; border-color: #14141a; color: #ffffff;
  box-shadow: none; font-weight: 600;
}
main.v-luxury .btn-primary:hover,
main.v-luxury .hero-photo .hero-cta .btn-primary:hover {
  background: #000000; border-color: #000000;
}
main.v-luxury .btn-primary i { color: #ffffff; }
main.v-luxury .hero-photo .hero-cta .btn-ghost { border-radius: 2px; }

/* Square corners and hairlines throughout. */
main.v-luxury .mini-card, main.v-luxury .pillar-card, main.v-luxury .faq-item,
main.v-luxury .lx-cell, main.v-luxury .tm-day-card, main.v-luxury .proof-card,
main.v-luxury .blog-card, main.v-luxury .statcard {
  border-radius: 2px;
}

/* The numerals in the vitrine carry the accent, so they follow the ink too. */
main.v-luxury .lx-num { color: var(--text-faint); letter-spacing: 0.14em; }
[data-theme="dark"] main.v-luxury .lx-num { color: var(--text-muted); }

/* The hero eyebrow is a blue pill on brand-soft, the last saturated thing on
   the page once the buttons go to ink. Ivory type on a hairline, no fill. */
main.v-luxury .hero-photo .eyebrow {
  background: transparent; border-color: rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.92); border-radius: 2px;
  letter-spacing: 0.06em; padding: 6px 12px;
}
main.v-luxury .hero-photo .eyebrow-dot { background: rgba(255, 255, 255, 0.72); }

/* The stat band is a navy gradient with blue numerals, which is the most
   product-marketing thing left on the page. Ink ground, ivory figures, square,
   with the numerals in the serif so they match the headings. */
main.v-luxury .ticker-inner {
  background: #14141a;
  border-radius: 2px; padding: 62px 44px;
}
main.v-luxury .ticker-item { border-right-color: rgba(255, 255, 255, 0.16); }
main.v-luxury .ticker-value {
  font-family: var(--font-serif); font-weight: 400;
  letter-spacing: -0.015em;
  /* the base rule clips a gradient through the text, so colour alone loses to
     its -webkit-text-fill-color: transparent */
  background: none;
  -webkit-text-fill-color: #f6f4f1; color: #f6f4f1;
}
main.v-luxury .ticker-value .gradient-text,
main.v-luxury .ticker-value span {
  background: none; -webkit-text-fill-color: #f6f4f1; color: #f6f4f1; font-weight: 400;
}
main.v-luxury .ticker-label {
  color: rgba(246, 244, 241, 0.62); letter-spacing: 0.06em; font-weight: 500;
}

/* =====================================================
   INTEGRATIONS INDEX
   The page carried ten boxed cards across two grids, which read as filler and
   made the categories feel interchangeable. No boxes: a rule above each item,
   a numeral, and copy trimmed to a line or two so the grid can breathe.
   ===================================================== */
.intx-grid { display: grid; column-gap: 46px; row-gap: 46px; }
.intx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.intx-grid-2 { grid-template-columns: repeat(2, 1fr); column-gap: 64px; }
.intx-item { padding-top: 20px; border-top: 1px solid var(--border-strong, var(--border)); }
.intx-n {
  display: block; font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--brand-text); margin-bottom: 14px;
}
.intx-item h3 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--text);
}
.intx-item p {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted);
}
.intx-item p a { color: var(--brand-text); font-weight: 600; }

/* The page was cramped between header and content, and between sections. */
.intx-grid { margin-top: 12px; }
#finance-erp .section-header { margin-bottom: 48px; }

@media (max-width: 1000px) { .intx-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .intx-grid-3, .intx-grid-2 { grid-template-columns: 1fr; row-gap: 34px; }
}

/* Blog card titles ran 26px over 41.6px, a 1.6 ratio that is body-copy spacing
   on a heading. Tightened to 1.22 so the lines hold together as one title. */
.blog-idx-card .pillar-title { line-height: 1.22; }

/* Stadium photography in the feature rows. Squared off and full-bleed within
   its column rather than the floating drop-shadowed product shot, since these
   are photographs of a venue rather than a device. */
.sv-shot {
  width: 100%; height: 100%; max-height: 460px;
  object-fit: cover; display: block;
  border-radius: 14px;
}

/* =====================================================
   STADIUM PROOF CARDS
   The section claimed teams by name in plain text boxes. These are the actual
   published case studies instead: the photograph, the club's mark, the result,
   and a link through.
   ===================================================== */
.svproof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svproof {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3.4; border-radius: 14px;
  color: #fff; text-decoration: none; background: #0b1020;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.svproof:hover { transform: translateY(-4px); }
.svproof > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.svproof:hover > img { transform: scale(1.04); }
.svproof-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,14,0.94) 0%, rgba(5,6,14,0.5) 44%, rgba(5,6,14,0.08) 74%);
}
.svproof-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 20px;
}
.svproof-logo {
  max-width: 58%; max-height: 40px; width: auto; height: auto; margin-bottom: 12px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
.svproof-logo.is-color { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.svproof-logo.is-big { max-height: 54px; }
.svproof-name {
  display: block; font-family: var(--font-display);
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25;
  margin-bottom: 12px; max-width: 15em;
}
.svproof-result {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  padding: 7px 12px; border-radius: 100px; margin-bottom: 12px;
  background: #0b57d0; color: #fff;
}
.svproof-result i { font-size: 15px; }
.svproof-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: #8ab8ff;
  transition: gap .2s ease;
}
.svproof:hover .svproof-go { gap: 11px; }
@media (max-width: 900px) { .svproof-grid { grid-template-columns: 1fr; } }

/* =====================================================
   GAME DAY UNDER LIGHTS
   No unused stadium photograph was left on the page, so the atmosphere is
   built: a night ground, two floodlight pools raking in from the top corners,
   the faint banding of a seating tier, and a match clock over the heading,
   which is what "ninety minutes" is actually about.
   ===================================================== */
.svnight { position: relative; overflow: hidden; background: #070b18; }
.svnight .section-title, .svnight .mini-card h3 { color: #f3f6fc; }
.svnight .section-eyebrow { color: #7fb0ff; }
.svnight .mini-card p { color: rgba(238, 241, 251, 0.72); }
.svnight-lights {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 14% -6%, rgba(150, 190, 255, 0.20), transparent 62%),
    radial-gradient(52% 44% at 86% -6%, rgba(150, 190, 255, 0.17), transparent 62%);
}
/* the banding of a seating tier, far enough back to read as texture */
.svnight-tiers {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.30;
  background: repeating-linear-gradient(
    177deg,
    rgba(255, 255, 255, 0.045) 0 2px,
    transparent 2px 13px
  );
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 46%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 46%);
}
.svnight-clock {
  /* flex with a fitted width, not inline-flex: the eyebrow is inline-block and
     was sitting on the same line as the clock */
  display: flex; width: fit-content; align-items: baseline; gap: 10px;
  padding: 7px 14px; margin: 0 auto 18px;
  border: 1px solid rgba(150, 190, 255, 0.28); border-radius: 4px;
  background: rgba(6, 10, 26, 0.6);
  font-family: var(--font-mono); letter-spacing: 0.08em;
}
.svnight-clock span { font-size: 11px; color: rgba(238, 241, 251, 0.55); }
.svnight-clock strong {
  font-size: 19px; font-weight: 600; letter-spacing: 0.04em;
  color: #ffd27a;                         /* the amber of a stadium clock */
}
.svnight .mini-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.svnight .mini-ico { background: rgba(127, 176, 255, 0.16); color: #9dc4ff; }

/* =====================================================
   THE MATCH CLOCK
   The section is about ninety minutes, so the layout is the ninety minutes:
   five operations pegged to the moment they happen, on one running line.
   Reads as a timeline on desktop, as a stacked sequence on a phone.
   ===================================================== */
.svclock { margin-top: 8px; }
.svclock-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.svclock-step { position: relative; padding: 0 18px; }
.svclock-step:first-child { padding-left: 0; }
.svclock-step:last-child { padding-right: 0; }

.svclock-time {
  display: block; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; color: #ffd27a;
}
/* the running line, drawn once per step so it breaks at the grid edges */
.svclock-node {
  /* pulled out past the cell padding on both sides so adjacent segments meet
     and the clock reads as one continuous line rather than five dashes */
  display: block; position: relative; height: 1px;
  background: rgba(150, 190, 255, 0.28);
  margin: 0 -18px 22px;
}
.svclock-step:first-child .svclock-node { margin-left: 0; }
.svclock-step:last-child .svclock-node { margin-right: 0; }
.svclock-node::after {
  content: ""; position: absolute; left: 18px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: #ffd27a;
  box-shadow: 0 0 0 4px rgba(255, 210, 122, 0.16);
}
/* the clock runs out on the last step */
.svclock-step:last-child .svclock-node { background: linear-gradient(90deg, rgba(150,190,255,0.28) 55%, transparent); }
.svclock-step:first-child .svclock-node::after { left: 0; }

.svclock-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 12px;
  background: rgba(127, 176, 255, 0.15); color: #9dc4ff; font-size: 17px;
}
.svclock-body strong {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  color: #f3f6fc; margin-bottom: 7px;
}
.svclock-body em {
  display: block; font-style: normal;
  font-size: 13.5px; line-height: 1.55; color: rgba(238, 241, 251, 0.66);
}

@media (max-width: 960px) {
  .svclock-track { grid-template-columns: 1fr; }
  /* :first-child and :last-child zero the padding for the horizontal line, and
     those still win once the track stacks, so they are restored here */
  .svclock-step,
  .svclock-step:first-child,
  .svclock-step:last-child { padding: 0 0 0 30px; }
  .svclock-step:not(:last-child) { padding-bottom: 30px; }
  /* the line turns vertical and runs down the left */
  .svclock-node {
    position: absolute; left: 4px; top: 6px; bottom: -6px;
    width: 1px; height: auto; margin: 0 !important;
    background: rgba(150, 190, 255, 0.28);
  }
  .svclock-step:last-child .svclock-node { bottom: auto; height: 10px; background: rgba(150,190,255,0.28); }
  .svclock-node::after { left: 50%; top: 4px; margin-left: -4.5px; margin-top: 0; }
  .svclock-time { margin-bottom: 8px; }
}

/* =====================================================
   CAPABILITY TICKETS
   Each capability is an event ticket: a stub carrying its number and a
   barcode, a perforated edge with the notches punched through it, and the
   detail on the counterfoil.
   ===================================================== */
.svticket-board {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  /* the row gap has to clear two half-notches, or the punch from one ticket
     collides with the punch from the one above it */
  column-gap: 18px; row-gap: 30px;
}
.svticket {
  position: relative;
  display: grid; grid-template-columns: 78px 1fr;
  background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 10px;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.svticket:hover {
  transform: translateY(-3px); border-color: var(--border-strong);
  box-shadow: 0 18px 34px -24px rgba(7, 9, 26, 0.34);
}
/* the notches sit on the perforation, half outside the card, in the page
   ground so they read as punched rather than drawn */
.svticket::before, .svticket::after {
  content: ""; position: absolute; left: 78px; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
}
.svticket::before { top: -8px; }
.svticket::after  { bottom: -8px; }

.svticket-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 22px 0;
  border-right: 1px dashed var(--border-strong, var(--border));
}
.svticket-no {
  font-family: var(--font-mono); font-size: 20px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--brand-text);
}
/* a barcode, drawn rather than pictured */
.svticket-code {
  width: 34px; height: 40px;
  background: repeating-linear-gradient(90deg,
    var(--text-faint) 0 2px, transparent 2px 4px,
    var(--text-faint) 4px 5px, transparent 5px 8px,
    var(--text-faint) 8px 10px, transparent 10px 12px);
  opacity: 0.5;
}
.svticket-body { padding: 22px 24px 24px; }
.svticket-body strong {
  display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--text); margin-bottom: 8px;
}
.svticket-body > span {
  display: block; font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
}
.svticket-body a { color: var(--brand-text); font-weight: 600; }

@media (max-width: 900px) { .svticket-board { grid-template-columns: 1fr; } }

/* ============ REPORT DOCUMENT (analytics) ============
   The dashboards get a browser frame; the report library gets a sheet of
   paper, stacked so one report reads as one of a hundred and fifty. Rows are
   skeletons on purpose: the shape of a report, no invented numbers in it. */
/* The notes sit beside the report and annotate it, rather than under it as a
   second, unrelated list. Left column is the artifact, right column reads it. */
.rptsplit {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 52px; align-items: center; margin-top: 8px;
}
.rptsplit .rptdoc { max-width: none; margin: 0; }
.rptsplit .intx-grid { row-gap: 38px; margin-top: 0; }
@media (max-width: 1000px) {
  .rptsplit { grid-template-columns: 1fr; gap: 44px; }
  .rptsplit .rptdoc { max-width: 880px; margin: 0 auto; }
}
.rptdoc { position: relative; max-width: 880px; margin: 0 auto 54px; }
.rptdoc-stack { position: absolute; inset: 0; }
.rptdoc-stack i {
  position: absolute; left: 50%; transform: translateX(-50%);
  height: 100%; border: 1px solid var(--border); background: var(--panel);
  border-radius: 12px;
}
.rptdoc-stack i:nth-child(1) { top: 13px; width: 97%; opacity: 0.6; }
.rptdoc-stack i:nth-child(2) { top: 25px; width: 94%; opacity: 0.32; }
.rptdoc-sheet {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
}
.rptdoc-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  padding: 22px 26px 18px; border-bottom: 1px solid var(--border);
}
.rptdoc-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-bottom: 7px; }
.rptdoc-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.rptdoc-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.rptdoc-meta span {
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; white-space: nowrap;
}
.rptdoc-tabs {
  display: flex; gap: 22px; padding: 0 26px; overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.rptdoc-tabs span {
  font-size: 12px; font-weight: 600; color: var(--text-faint);
  padding: 11px 0; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rptdoc-tabs span.on { color: var(--text); border-bottom-color: var(--brand-blue); }
.rptdoc-table { padding: 6px 26px 10px; }
.rptdoc-row {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 20px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border);
}
.rptdoc-row > :not(:first-child) { justify-self: end; }
.rptdoc-cols { padding-top: 6px; }
.rptdoc-cols span { font-size: 11px; font-weight: 700; color: var(--text-faint); }
.rptdoc-row i { display: block; height: 9px; border-radius: 4px; background: var(--border-strong); opacity: 0.55; }
.rptdoc-row > i:not(:first-child) { opacity: 0.36; }
.rptdoc-total {
  border-bottom: 0; border-top: 2px solid var(--border-strong);
  margin-top: 4px; padding-top: 15px;
}

/* The report generates when it comes into view: label bars grow from the left,
   figures from the right the way a right-aligned column fills, then the total
   lands last. Motion-safe, and the resting state is the finished report, so a
   reader who has reduced motion on simply sees it already run. */
.rptdoc-row i { transform-origin: left; }
.rptdoc-row > i:not(:first-child) { transform-origin: right; }
@media (prefers-reduced-motion: no-preference) {
  .rptdoc:not(.rpt-run) .rptdoc-row i { transform: scaleX(0); opacity: 0; }
  .rpt-run .rptdoc-row i { animation: rptFill 0.52s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s); }
  .rpt-run .rptdoc-row > i:nth-child(2) { animation-delay: calc(var(--d, 0s) + 0.05s); }
  .rpt-run .rptdoc-row > i:nth-child(3) { animation-delay: calc(var(--d, 0s) + 0.1s); }
  .rpt-run .rptdoc-row > i:nth-child(4) { animation-delay: calc(var(--d, 0s) + 0.15s); }
  .rpt-run .rptdoc-total i {
    animation: rptFill 0.52s cubic-bezier(0.22, 1, 0.36, 1) both,
               rptGlow 3.4s ease-in-out 1.4s infinite;
  }
  .rptdoc:not(.rpt-run) .rptdoc-title::after { transform: scaleX(1); }
  .rpt-run .rptdoc-title::after { animation: rptScan 1.5s ease-in-out 0.1s 1 both; }
}
@keyframes rptFill { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes rptGlow { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.5; } }
@keyframes rptScan { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* the hairline that sweeps under the report title as it runs */
.rptdoc-title { position: relative; }
.rptdoc-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  border-radius: 2px; background: var(--brand-blue); transform: scaleX(0);
  transform-origin: left; opacity: 0;
}

.rptdoc-total span { font-size: 12.5px; font-weight: 800; color: var(--text); }
.rptdoc-total i { height: 10px; background: var(--brand-blue); opacity: 0.8; }
.rptdoc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 26px; border-top: 1px solid var(--border); background: var(--bg-deep);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
}
@media (max-width: 720px) {
  .rptdoc { margin-bottom: 40px; }
  .rptdoc-head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 18px 16px; }
  .rptdoc-tabs { padding-left: 18px; padding-right: 18px; gap: 16px; }
  .rptdoc-table { padding-left: 18px; padding-right: 18px; }
  .rptdoc-foot { padding-left: 18px; padding-right: 18px; }
  .rptdoc-row { grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; }
  .rptdoc-row > *:nth-child(4) { display: none; }
}

/* ============ WHO IT IS FOR (analytics) ============
   Four role cards, each split into the thing that gets in the way and the
   thing that replaces it. The numbered hairline index was already doing
   duty twice on this page, so this needed its own shape. */
.whox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 8px; }
.whox {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 24px 26px 26px;
}
.whox-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.whox-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 18px;
  color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 11%, transparent);
}
.whox-role { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.whox-pain {
  margin: 0 0 16px; padding-left: 15px; border-left: 2px solid var(--border-strong);
  font-size: 14px; line-height: 1.6; color: var(--text-faint);
}
.whox-gain { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--text-muted); }
@media (max-width: 860px) {
  .whox-grid { grid-template-columns: 1fr; gap: 14px; }
  .whox { padding: 22px 20px 24px; }
}

/* ============ LINKEDIN FOLLOW STRIP ============
   One quiet row above the final CTA on the blog and press pages. Not a feed:
   see the note in _includes/linkedin-follow.njk. */
.lifol {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 24px 28px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border);
}
.lifol-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.lifol-ico {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 25px;
  color: var(--brand-blue); background: color-mix(in srgb, var(--brand-blue) 11%, transparent);
}
.lifol-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.lifol-sub { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 720px) {
  .lifol { padding: 22px 20px; gap: 18px; }
  .lifol-left { gap: 14px; align-items: flex-start; }
  .lifol .btn { width: 100%; justify-content: center; }
}

/* ============ EVALUATION TESTS (/pos-evaluation/) ============
   Each test is three moves, not a paragraph: what the demo usually does, what
   to do instead, and the thing you are actually watching. The middle line is
   the one that matters, so it carries the weight. */
.evx { display: grid; gap: 18px; margin-top: 10px; }
.evx-item {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 4px 22px;
  padding: 28px 30px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--border);
}
.evx-n {
  grid-row: 1 / span 4; font-family: var(--font-mono); font-size: 13px;
  font-weight: 700; color: var(--brand-text); padding-top: 4px;
}
.evx-item h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; color: var(--text); margin: 0 0 14px; }
.evx-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 9px 0; font-size: 14.5px; line-height: 1.6; }
.evx-line + .evx-line { border-top: 1px solid var(--border); }
.evx-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-faint); padding-top: 3px; }
.evx-line p { margin: 0; color: var(--text-muted); }
.evx-line.is-do p { color: var(--text); font-weight: 600; }
@media (max-width: 760px) {
  .evx-item { grid-template-columns: 1fr; padding: 24px 20px; gap: 0; }
  .evx-n { grid-row: auto; margin-bottom: 8px; }
  .evx-line { grid-template-columns: 1fr; gap: 3px; }
}
/* the honest column: what we would fail */
.evx-no { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
.evx-no div { padding: 18px 0; border-top: 1px solid var(--border); }
.evx-no strong { display: block; font-size: 15px; color: var(--text); margin-bottom: 5px; }
.evx-no span { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 760px) { .evx-no { grid-template-columns: 1fr; } }

/* ===== Locale suggestion banner =====
   Sits above the nav and pushes the page down rather than overlaying it, so it
   never covers the first headline. Hidden until the script decides it applies,
   so it costs nothing to a visitor already on the right language. */
.locale-banner {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.locale-banner[hidden] { display: none; }
.locale-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
}
.locale-banner-inner > .ti-language {
  font-size: 18px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.locale-banner-text { flex: 1 1 auto; }
.locale-banner-go {
  color: var(--brand-blue);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.locale-banner-go:hover { text-decoration: underline; }
.locale-banner-x {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--text-faint);
  line-height: 1;
  flex-shrink: 0;
}
.locale-banner-x:hover { color: var(--text); }
@media (max-width: 640px) {
  .locale-banner-inner { padding: 10px 16px; gap: 10px; font-size: 13px; }
  .locale-banner-inner > .ti-language { display: none; }
}

/* ===== Line-break orphans =====
   Lines run their full width. pretty only steps in when the last line would be
   left with one or two words, and pulls a word down to keep company with them.
   balance was used here before; it evened out every line of a block, which is
   what made headings and paragraphs wrap short all over the site.

   Falls back to normal wrapping where unsupported, so nothing breaks. */
h1, h2, h3, h4,
.section-title, .section-sub, .blog-head-sub,
.pillar-title, .blog-card-title, .hero-photo-title,
.statcard-label, .mini-card h3, .faq-question,
p, li, figcaption, blockquote,
.pillar-desc, .blog-card-excerpt, .faq-answer p {
  text-wrap: pretty;
}
/* Set by /assets/js/wrap.js on a block whose last line would hold one or two
   words: that block alone is evened out. */
.wrap-even { text-wrap: balance; }

/* ===== FAQ question headings =====
   The 174 FAQ questions were <button> only, so they carried no heading rank
   and answer engines could not see them as questions. The heading wraps the
   button rather than sitting inside it: <button> takes phrasing content, so an
   <h3> within one is invalid.

   The h3 is purely structural here. It must add no box and no type of its own,
   or every FAQ on the site resizes and gains spacing. */
.faq-q {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* ===== Anonymous rollout quote =====
   Sits between the rollout steps and the footnote. No brand logo and no name,
   so it uses the quiet panel treatment rather than .quote-card, which is built
   around an attributed logo. Solid border, no gradient: the gradient is
   reserved for AI, Plus and CTAs. */
.rollout-quote {
  max-width: 760px;
  margin: 44px auto 0;
  padding: 26px 30px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue);
  border-radius: 14px;
  background: var(--panel);
  text-align: left;
}
.rollout-quote blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
}
.rollout-quote figcaption {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-faint);
  font-style: normal;
}
@media (max-width: 640px) {
  .rollout-quote { padding: 20px 22px; margin-top: 32px; }
  .rollout-quote blockquote { font-size: 15.5px; }
}

/* ===== Site search overlay =====
   Opened from the nav or with Cmd/Ctrl+K. The index is fetched on first open,
   so page load carries only this markup and a few KB of inline script. */
.sx-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(7, 9, 26, 0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 20px 20px;
}
.sx-overlay[hidden] { display: none; }
.sx-panel {
  width: 100%; max-width: 640px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(7, 9, 26, 0.45);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 72vh;
}
.sx-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sx-head-icon { font-size: 18px; color: var(--text-faint); flex-shrink: 0; }
.sx-input {
  flex: 1 1 auto; border: 0; background: none; outline: none;
  font-family: var(--font-body); font-size: 16px; color: var(--text);
  padding: 4px 0;
}
.sx-input::placeholder { color: var(--text-faint); }
.sx-input::-webkit-search-cancel-button { display: none; }
.sx-close {
  border: 1px solid var(--border); background: none; cursor: pointer;
  border-radius: 6px; padding: 4px 8px; flex-shrink: 0;
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--text-faint);
}
.sx-close:hover { color: var(--text); border-color: var(--border-strong); }
.sx-results { overflow-y: auto; padding: 8px; flex: 1 1 auto; }
.sx-hit {
  display: block; padding: 11px 13px; border-radius: 10px;
  text-decoration: none; color: inherit;
}
.sx-hit:hover, .sx-hit.is-active { background: var(--bg-deep); }
.sx-hit-kind {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--brand-blue); margin-bottom: 3px;
}
.sx-hit-title {
  display: block; font-size: 15px; font-weight: 600;
  color: var(--text); line-height: 1.35;
}
.sx-hit-snip {
  display: block; font-size: 13px; color: var(--text-muted);
  line-height: 1.5; margin-top: 3px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sx-hit mark { background: var(--brand-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.sx-empty { padding: 26px 14px; text-align: center; color: var(--text-muted); font-size: 14px; }
.sx-foot {
  display: flex; gap: 18px; flex-shrink: 0;
  padding: 10px 18px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-faint);
}
.sx-foot kbd {
  font-family: var(--font-body); font-size: 10.5px;
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; margin-right: 3px; color: var(--text-muted);
}
@media (max-width: 640px) {
  .sx-overlay { padding: 0; }
  .sx-panel { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .sx-foot { display: none; }
}

/* ===== Small labels on phones =====
   A mobile audit found real reading labels set at 9.5-10.5px: event chips,
   case-study sector tags, proof tags, blog tags. Readable on a desktop, but
   below a comfortable minimum on a phone. Raised to 11px on small screens only.
   Device mockups (.uix-*, .dashw-*, .diffx-*) and diagram nodes keep their
   size on purpose: they imitate a screen or fit a fixed drawing. */
@media (max-width: 640px) {
  .blog-tag, .cfu-away, .cfu-stand-lab, .csx-name, .csx-sector, .dossx-cap,
  .evc-kind, .evc-region, .evy-count, .hpos-annot, .innum-eyebrow, .jw-mono,
  .mu-tag, .proof-tag, .pt-label {
    font-size: 11px;
  }
}

/* ===== Centered mid-page CTA (opt-in) ===== */
.midcta-center .midcta-inner { flex-direction: column; justify-content: center; text-align: center; gap: 22px; }

/* ===== Story links on the industry pages =====
   A plain arrow chip under each step read as "next step". They now name their
   destination and sit bottom-right of the card, so they read as a link out. */
a.tm-day-win { display: flex; width: fit-content; margin-left: auto; margin-top: 16px; }

/* ===== Contrast pass =====
   A sitewide audit (every page, both themes) measured text against what sits behind
   it. These were the ones under a readable ratio. Light is the base; dark overrides. */

/* Industry pages: story links, proof tags and step numbers were mixed toward white,
   which suited dark but washed out on light. Light now mixes toward ink. */
main[data-vertical] a.tm-day-win { color: color-mix(in srgb, var(--v-accent) 62%, #07091a); }
main[data-vertical] .proof-tag   { color: color-mix(in srgb, var(--v-accent) 62%, #07091a); }
main[data-vertical] .tm-day-time { color: color-mix(in srgb, var(--v-accent) 80%, #07091a); }
[data-theme="dark"] main[data-vertical] a.tm-day-win,
[data-theme="dark"] main[data-vertical] .proof-tag { color: color-mix(in srgb, var(--v-accent) 40%, #fff); }
[data-theme="dark"] main[data-vertical] .tm-day-time { color: color-mix(in srgb, var(--v-accent) 60%, #fff); }

/* Events: the generic ".evc span" text rule outranked the chip colour, so booth and
   region chips rendered ink on a dark chip in light mode. */
.evc .evc-kind, .evc .evc-region { color: #fff; }
.evc .evc-region { background: rgba(11, 60, 160, 0.78); }

/* Certified hardware: the status pills were tuned for dark. */
.chw-certified { color: #13764b; }
.chw-pending   { color: #8a5a00; }
[data-theme="dark"] .chw-certified { color: #34c98a; }
[data-theme="dark"] .chw-pending   { color: #d9a441; }

/* Architecture: Native / Connected labels and the selected filter chip. */
.capx-n { color: var(--brand-text); }
.capx-c { color: #3a55c9; }
[data-theme="dark"] .capx-c { color: #8BA6FA; }
.capx-chip.is-on,
.capx-chip[data-capx="native"].is-on { background: #0B5FE0; border-color: #0B5FE0; }
.capx-chip[data-capx="connected"].is-on { background: #4A63D8; border-color: #4A63D8; }
.capx-chip.is-on span { background: rgba(255, 255, 255, 0.16); }

/* Analytics widgets and OMS results in light mode: white text sat on a mid blue
   mixed 78% toward white. Mixed toward ink instead, the same hues read deeper. */
[data-theme="light"] .dashw { background: color-mix(in srgb, var(--_c) 76%, #07091a); }
[data-theme="light"] .omsr-lead { background: color-mix(in srgb, #247DFF 76%, #07091a); }
[data-theme="light"] .omsr-uplift { background: color-mix(in srgb, #5078F5 76%, #07091a); }
[data-theme="light"] .omsr-stat { background: color-mix(in srgb, var(--omsr-ac, #247DFF) 76%, #07091a); }
[data-theme="light"] .dashw p,
[data-theme="light"] .omsr-note,
[data-theme="light"] .omsr-stat span,
[data-theme="light"] .omsr-bar-lab { color: rgba(255, 255, 255, 0.92); }

/* Homepage, dark: the AI kicker and blog dates. */
[data-theme="dark"] .duo-kicker-ai { color: #A7B9FF; }
[data-theme="dark"] .blog-card-date { color: var(--text-muted); }

/* Demo page: one attributed customer quote beside the form. */
.demox-quote { margin: 26px 0 0; padding: 20px 22px; border-left: 3px solid var(--brand-blue); background: var(--brand-soft); border-radius: 0 12px 12px 0; }
.demox-quote blockquote { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.demox-quote figcaption { font-size: 12.5px; color: var(--text-muted); }
.demox-quote figcaption strong { display: block; color: var(--text); font-weight: 600; }
.demox-quote figcaption a { color: var(--brand-text); font-weight: 600; }

/* ===== Global operations (Mobile POS) =====
   A dark operations panel in both themes: the live markets lit in brand blue,
   store cities pulsing, light arcs between the main hubs, and the fiscal
   regimes pinned where they apply. Solid blue throughout; no gradient fill. */
.gops-stage {
  position: relative; margin-top: 44px; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(36,125,255,0.22), transparent 65%),
    radial-gradient(60% 70% at 85% 100%, rgba(80,120,245,0.14), transparent 70%),
    #060a1c;
  border: 1px solid rgba(120,160,255,0.22);
  box-shadow: 0 40px 80px -40px rgba(7,9,26,0.55);
}
.gops-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 80% at 50% 45%, #000 40%, transparent 100%);
}
.gops-map { position: relative; padding: 40px 36px 8px; }
.gops-map .wm-svg { display: block; width: 100%; height: auto; position: relative; }
.gops-map .wm-c { fill: #172042; stroke: #070b1f; stroke-width: 0.6; }
.gops-map .wm-live { fill: #2f7bff; stroke: rgba(170,200,255,0.55); stroke-width: 0.5; filter: drop-shadow(0 0 5px rgba(47,123,255,0.55)); }
.gops-map .wm-dot { fill: #2f7bff; }
.gops-map .wm-city { fill: #ffffff; }
.gops-map .wm-ping { stroke: #9cc3ff; }
.gops-arcs { position: absolute; left: 36px; right: 36px; top: 40px; width: calc(100% - 72px); height: auto; pointer-events: none; overflow: visible; }
.gops-arcs path { fill: none; stroke: rgba(140,185,255,0.55); stroke-width: 1.1; stroke-dasharray: 3 7; animation: gopsFlow 3.2s linear infinite; }
.gops-arcs path.gops-lead { stroke: rgba(255,255,255,0.55); stroke-width: 0.9; stroke-dasharray: none; animation: none; }
@keyframes gopsFlow { to { stroke-dashoffset: -40; } }

.gops-tag {
  position: absolute; display: grid; gap: 3px; padding: 10px 13px; min-width: 132px;
  border-radius: 12px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,0.78);
  background: rgba(10,16,40,0.82); border: 1px solid rgba(140,185,255,0.35);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.6); backdrop-filter: blur(6px);
}
.gops-tag b { color: #ffffff; font-weight: 600; }
.gops-tag-h {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  color: #9cc3ff; text-transform: uppercase; margin-bottom: 2px;
}

.gops-stats {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(140,185,255,0.18);
}
.gops-stats > div { padding: 22px 26px 24px; }
.gops-stats > div + div { border-left: 1px solid rgba(140,185,255,0.18); }
.gops-stats strong {
  display: block; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: #ffffff;
}
.gops-stats span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255,255,255,0.62); }

.gops-points { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gops-points li {
  display: flex; gap: 14px; align-items: flex-start; padding: 24px 26px; border-radius: 16px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  font-size: 15px; line-height: 1.6; color: var(--text-muted);
}
.gops-points i { font-size: 20px; color: var(--brand-text); flex: none; margin-top: 1px; }

@media (max-width: 900px) {
  .gops-stats { grid-template-columns: repeat(2, 1fr); }
  .gops-stats > div:nth-child(3) { border-left: 0; }
  .gops-stats > div:nth-child(n+3) { border-top: 1px solid rgba(140,185,255,0.18); }
  .gops-points { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
}
/* On a phone the pinned tags would cover the map: they line up beneath it. */
@media (max-width: 760px) {
  .gops-map { padding: 22px 14px 0; }
  .gops-arcs { left: 14px; right: 14px; top: 22px; width: calc(100% - 28px); }
  .gops-arcs path.gops-lead { display: none; }
  .gops-map { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; }
  .gops-map .wm-svg { flex: 0 0 100%; }
  .gops-tag { position: static; min-width: 0; flex: 1 1 140px; }
}
.gops-nowrap { white-space: nowrap; }
@media (max-width: 420px) { .gops-stats > div { padding: 18px 16px 20px; } .gops-stats strong { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .gops-arcs path { animation: none; } }

/* A word in a stat bar (Open APIs) sits smaller than the figures beside it, so it
   holds one line and its baseline matches theirs. */
.ticker-value-word + .ticker-label { text-wrap: balance; }
.ticker-value.ticker-value-word { font-size: calc(var(--stat-size) * 0.64); line-height: 1.1; white-space: nowrap; padding-top: calc(var(--stat-size) * 0.28); }

/* ===== RFID self-checkout mockup (Mobile POS) =====
   The real station photo, read rings pulsing over the bin, and the basket card
   building itself beside it. */
.sco-mock { position: relative; padding: 0 0 46px 34px; }
.sco-photo { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(7,9,26,0.45); }
.sco-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1747 / 1404; object-fit: cover; }
.sco-waves { position: absolute; left: 68%; top: 72%; width: 0; height: 0; }
.sco-waves i {
  position: absolute; left: 50%; top: 50%; width: 120px; height: 60px; margin: -30px 0 0 -60px;
  border: 2px solid rgba(47,123,255,0.85); border-radius: 50%;
  transform: scale(0.3); opacity: 0; animation: scoWave 2.4s ease-out infinite;
}
.sco-waves i:nth-child(2) { animation-delay: 0.8s; }
.sco-waves i:nth-child(3) { animation-delay: 1.6s; }
@keyframes scoWave { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(2.4); opacity: 0; } }

.sco-chip {
  position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 100px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: #0b57d0; box-shadow: 0 10px 24px -10px rgba(11,87,208,0.7);
}
.sco-chip i { font-size: 15px; }

.sco-card {
  position: absolute; left: -64px; bottom: 0; width: min(318px, 70%);
  padding: 16px 16px 14px; border-radius: 16px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  box-shadow: 0 28px 50px -24px rgba(7,9,26,0.55);
  font-size: 12.5px; color: var(--text-muted);
}
.sco-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; color: var(--text); font-size: 13px; }
.sco-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--brand-text); }
.sco-live i { width: 7px; height: 7px; border-radius: 50%; background: #2f7bff; animation: scoBlink 1.2s ease-in-out infinite; }
@keyframes scoBlink { 50% { opacity: 0.25; } }
.sco-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sco-lines li { display: flex; align-items: center; gap: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(4px); animation: scoIn .5s ease forwards; }
.sco-lines li:nth-child(1) { animation-delay: .3s; }
.sco-lines li:nth-child(2) { animation-delay: .7s; }
.sco-lines li:nth-child(3) { animation-delay: 1.1s; }
@keyframes scoIn { to { opacity: 1; transform: none; } }
.sco-lines img {
  flex: none; width: 46px; height: 46px; border-radius: 9px; object-fit: cover;
  background: #eef0f4; border: 1px solid var(--border);
}
.sco-item { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sco-item b { font-weight: 600; color: var(--text); font-size: 12.5px; line-height: 1.3; }
.sco-item em { font-style: normal; font-size: 11.5px; color: var(--text-faint); }
.sco-price { flex: none; font-weight: 600; color: var(--text); font-size: 12.5px; }
.sco-total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 12px; }
.sco-total strong { font-size: 18px; letter-spacing: -0.02em; color: var(--text); }
.sco-pay { display: block; text-align: center; padding: 9px 0; border-radius: 10px; background: #0b57d0; color: #fff; font-weight: 600; font-size: 13px; }

@media (max-width: 760px) {
  .sco-mock { padding: 0 0 0 0; }
  .sco-card { position: relative; left: auto; width: auto; margin: -36px 14px 0; }
  .sco-chip { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sco-waves i, .sco-live i { animation: none; }
  .sco-lines li { animation: none; opacity: 1; transform: none; }
}

/* A word in the stat band (Open APIs) holds one line beside the figures. */
.pfh-big.pfh-word { white-space: nowrap; font-size: clamp(30px, 3.4vw, 46px); padding-top: clamp(4px, 0.6vw, 9px); }

/* ===== RFID story mockups: Transfers and Unit Control Ledger =====
   App-style cards beside the copy, in the same frame as the photo shots.
   Store names, tag codes and times are illustrative. */
.rfx-card {
  position: relative; max-width: 460px; margin: 0 auto; padding: 20px 20px 18px;
  border-radius: 20px; background: var(--bg-elevated); border: 1px solid var(--border);
  box-shadow: 0 30px 60px -32px rgba(7,9,26,0.45), 0 0 0 8px var(--brand-soft);
  font-size: 13px; color: var(--text-muted);
}
.rfx-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-weight: 600; font-size: 14px; color: var(--text); }
.rfx-pill { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; padding: 4px 10px; border-radius: 100px; color: var(--brand-text); background: var(--brand-soft); }
.rfx-pill-ok { color: #13764b; background: rgba(19,118,75,0.1); }
[data-theme="dark"] .rfx-pill-ok { color: #34c98a; background: rgba(52,201,138,0.12); }

.rfx-route { display: grid; grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: 8px; padding: 14px; margin-bottom: 14px; border-radius: 14px; background: var(--bg-deep); }
.rfx-node { display: grid; justify-items: center; text-align: center; gap: 2px; }
.rfx-node i { font-size: 22px; color: var(--brand-text); }
.rfx-node b { font-size: 12px; color: var(--text); font-weight: 600; line-height: 1.25; }
.rfx-node em { font-style: normal; font-size: 11px; color: var(--text-faint); }
.rfx-line { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--brand-blue) 0 6px, transparent 6px 11px); }
.rfx-dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #2f7bff; box-shadow: 0 0 0 4px rgba(47,123,255,0.22); animation: rfxMove 3s ease-in-out infinite; }
@keyframes rfxMove { 0% { left: 0; } 60%, 100% { left: calc(100% - 10px); } }

.rfx-units { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rfx-units li, .rfx-unit { display: flex; align-items: center; gap: 12px; }
.rfx-units li { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.rfx-units img, .rfx-unit img { flex: none; width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: #eef0f4; border: 1px solid var(--border); }
.rfx-units li > span:nth-child(2), .rfx-unit > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rfx-card b { color: var(--text); font-weight: 600; }
.rfx-card em { font-style: normal; font-size: 12px; color: var(--text-faint); }
.rfx-card code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.02em; }
.rfx-checks { display: flex; gap: 6px; font-size: 18px; color: #1aa36b; }
.rfx-checks .rfx-wait { color: var(--text-faint); }
.rfx-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--text-faint); }
.rfx-foot i { color: #1aa36b; }
.rfx-foot strong { margin-left: auto; font-size: 12.5px; color: var(--text); }

.rfx-unit { padding: 12px; border-radius: 14px; background: var(--bg-deep); margin-bottom: 16px; }
.rfx-timeline { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 4px; position: relative; }
.rfx-timeline::before { content: ""; position: absolute; left: 19px; top: 16px; bottom: 16px; width: 2px; background: var(--border-strong); }
.rfx-timeline li { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rfx-timeline i {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: 16px; color: var(--brand-text); background: var(--bg-elevated); border: 1.5px solid var(--border-strong);
}
.rfx-timeline li.is-now i { color: #fff; background: #0b57d0; border-color: #0b57d0; box-shadow: 0 0 0 5px var(--brand-soft); }
.rfx-timeline li > span { flex: 1; display: grid; gap: 1px; }
.rfx-timeline time { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) { .rfx-dot { animation: none; left: 50%; } }

/* Mockups built for the site are labelled as such, so nobody takes them for
   product screenshots. */
.mock-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 14px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--text-faint);
}
.mock-note i { font-size: 14px; }
.mock-note-right { position: absolute; right: 0; bottom: 12px; margin: 0; }
@media (max-width: 760px) { .mock-note-right { position: static; margin-top: 12px; } }

/* ===== RFID transfer screen, drawn (RFID page) =====
   The real Transfer Order layout, redrawn flat and set at a slight angle on a
   tinted panel so it reads as an illustration rather than a screenshot. */
.tfx {
  position: relative; padding: 34px 0 30px; border-radius: 26px;
  background: radial-gradient(70% 70% at 50% 40%, rgba(47,123,255,0.18), transparent 70%), var(--brand-soft);
  perspective: 1400px; display: grid; place-items: center;
}
.tfx-phone {
  /* Pro Max: screen, then a black bezel ring and a polished band drawn as shadows so the
     radius follows; Dynamic Island by ::after, side buttons by ::before */
  position: relative;
  width: 268px; padding: 40px 14px 14px; border-radius: 42px;
  background: #e9edf4; border: 0;
  box-shadow: 0 0 0 7px #0a0a0d, 0 0 0 10px #8f939b, 0 40px 70px -30px rgba(7,9,26,0.55);
  transform: rotateY(-10deg) rotateX(4deg) rotateZ(1deg);
  font-family: var(--font-body); color: #10142a;
}
.tfx-phone::after {
  content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 24px; border-radius: 100px; background: #0a0a0d; z-index: 6;
}
.tfx-phone::before {
  content: ''; position: absolute; inset: -7px -13px; pointer-events: none; z-index: 6;
  background:
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 86px / 3px 20px no-repeat,
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 124px / 3px 40px no-repeat,
    linear-gradient(90deg, #9a9ea6, #4e525a) 0 172px / 3px 40px no-repeat,
    linear-gradient(270deg, #9a9ea6, #4e525a) 100% 140px / 3px 68px no-repeat,
    linear-gradient(270deg, #9a9ea6, #4e525a) 100% 330px / 3px 34px no-repeat;
}
.tfx-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tfx-top b { flex: 1; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.tfx-round { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; font-size: 15px; }
.tfx svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tfx-tabs { display: flex; justify-content: space-between; padding: 4px; border-radius: 12px; background: #d9dfe9; margin-bottom: 12px; }
.tfx-tabs span { display: grid; place-items: center; width: 40px; height: 26px; border-radius: 9px; color: #8a93a6; font-size: 15px; }
.tfx-tabs span.is-on { background: #fff; color: #10142a; }
.tfx-label { font-size: 11.5px; font-weight: 700; margin: 0 2px 6px; }
.tfx-box { background: #fff; border-radius: 13px; padding: 4px 10px; margin-bottom: 10px; }
.tfx-power { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 10px 8px; }
.tfx-slider { position: relative; height: 3px; border-radius: 2px; background: #dfe3ea; margin-top: 6px; }
.tfx-slider::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 46%; border-radius: 2px; background: #3b86f7; }
.tfx-slider i { position: absolute; left: 46%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.tfx-range { display: flex; justify-content: space-between; margin-top: 7px; }
.tfx-range em { font-style: normal; font-size: 9.5px; color: #8a93a6; }
.tfx-power strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding-left: 10px; border-left: 1px solid #e3e7ee; font-size: 17px; }
.tfx-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.tfx-row + .tfx-row { border-top: 1px solid #edf0f4; }
.tfx-ico { display: grid; place-items: center; width: 22px; color: #9aa3b5; font-size: 16px; }
.tfx-row > span:nth-last-child(2) { flex: 1; display: grid; }
.tfx-row b { font-size: 11.5px; font-weight: 500; }
.tfx-row em { font-style: normal; font-size: 9.5px; color: #8a93a6; }
.tfx-row strong { font-size: 13px; font-weight: 600; }
.tfx-row strong.tfx-up { color: #2f7bff; }
.tfx-solo { padding: 9px 10px; }
.tfx-cta {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 12px;
  padding: 10px 0; border-radius: 100px; background: #3b86f7; color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.tfx-pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: scoBlink 1.1s ease-in-out infinite; }
.tfx-foot { display: flex; align-items: center; justify-content: space-between; padding: 5px 5px 5px 14px; border-radius: 100px; background: #fff; }
.tfx-count { font-size: 15px; font-weight: 700; color: #2f7bff; }
.tfx-final { padding: 6px 14px; border-radius: 100px; background: #c9ced8; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

.tfx-float {
  position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 100px;
  font-size: 12px; font-weight: 600; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border);
  box-shadow: 0 14px 30px -16px rgba(7,9,26,0.45);
}
.tfx-float i, .tfx-float svg { color: var(--brand-text); font-size: 15px; }
.tfx-float-a { top: 20%; left: -9%; }
.tfx-float-b { bottom: 20%; left: -9%; }
@media (max-width: 1200px) {
  .tfx { gap: 10px; }
  .tfx-float { position: static; }
}
@media (max-width: 760px) {
  .tfx-phone { transform: none; }
  .tfx-float { position: static; margin-top: 10px; }
  .tfx { padding: 24px 12px 18px; }
}
@media (prefers-reduced-motion: reduce) { .tfx-pulse { animation: none; } }

/* The ledger card gets the same drawn treatment: tinted panel, slight angle. */
.tfx .rfx-card { transform: rotateY(10deg) rotateX(4deg) rotateZ(-1deg); box-shadow: 0 40px 70px -30px rgba(7,9,26,0.5); }
/* Self-checkout card on Mobile POS: tilted a touch, so it reads as a drawn overlay. */
.sco-card { transform: rotate(-2deg); }
@media (max-width: 760px) { .tfx .rfx-card, .sco-card { transform: none; } }

/* ===== Product record pieces, drawn (Product Data page) =====
   Just the relevant piece of each screen, redrawn flat on the same tinted panel
   as the transfer screen. The catalog and variants fade out at the bottom, so
   they read as a crop of a longer list. */
.pdx { padding: 40px 28px; }
.pdx-card {
  width: 100%; max-width: 540px; padding: 18px 18px 14px; border-radius: 18px;
  background: #fff; border: 1px solid #e3e7ee; color: #10142a; font-family: var(--font-body);
  box-shadow: 0 40px 70px -30px rgba(7,9,26,0.5);
  transform: rotateY(-10deg) rotateX(4deg) rotateZ(1deg);
}
.pdx-flip .pdx-card { transform: rotateY(10deg) rotateX(4deg) rotateZ(-1deg); }
.pdx-narrow { max-width: 400px; }
.pdx-fade { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); padding-bottom: 0; }
.pdx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pdx-head b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.pdx-search { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #e3e7ee; border-radius: 9px; font-size: 11px; color: #8a93a6; }
.pdx-search i { color: #3b86f7; font-size: 13px; }
.pdx-table { display: grid; font-size: 11.5px; }
.pdx-th, .pdx-tr { display: grid; align-items: center; column-gap: 12px; padding: 9px 6px; }
.pdx-th { font-weight: 700; font-size: 11px; color: #10142a; padding-top: 4px; }
.pdx-tr { border-top: 1px solid #edf0f4; color: #3a4154; }
.pdx-tr.is-on { background: #eef4ff; border-radius: 8px; border-top-color: transparent; }
.pdx-tr.is-on + .pdx-tr { border-top-color: transparent; }
.pdx-tr > span, .pdx-th > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdx-cat .pdx-th, .pdx-cat .pdx-tr { grid-template-columns: 2.3fr 1fr 0.95fr 0.7fr 0.55fr; }
.pdx-cat .pdx-tr > span:first-child { font-weight: 600; color: #10142a; }
.pdx-cat em { font-style: normal; display: inline-block; margin-right: 8px; padding: 2px 6px; border-radius: 6px; background: #e8f0ff; color: #2f6fe0; font-size: 9.5px; font-weight: 600; vertical-align: 1px; }
.pdx-var .pdx-th, .pdx-var .pdx-tr { grid-template-columns: 1.3fr 1.2fr 0.4fr; }
.pdx-var .pdx-tr > span:first-child { font-variant-numeric: tabular-nums; }
.pdx-var .pdx-tr i { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; background: var(--sw); vertical-align: -1px; }
.pdx-label { margin: 4px 2px 8px; font-size: 11.5px; font-weight: 700; color: #4b5266; }
.pdx-ver { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid #e3e7ee; border-radius: 13px; }
.pdx-ver.is-live { background: #eef4ff; border-color: #dbe6fb; }
.pdx-ver > span:first-child { display: grid; gap: 5px; min-width: 76px; }
.pdx-ver > span:first-child b { font-size: 14px; font-weight: 500; }
.pdx-ver em { font-style: normal; justify-self: start; padding: 2px 8px; border-radius: 100px; background: #e3e7ee; color: #8a93a6; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pdx-ver em.is-sched { background: #fff1db; color: #b26a00; }
.pdx-ver strong { font-size: 14px; font-weight: 700; color: #2f7bff; }
.pdx-when { flex: 1; display: grid; gap: 4px; min-width: 0; }
.pdx-when small { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #4b5266; }
.pdx-open { padding: 6px 12px; border: 1px solid #e3e7ee; border-radius: 9px; color: #2f7bff; font-size: 11px; font-weight: 600; }
@media (max-width: 760px) {
  .pdx { padding: 24px 12px; }
  .pdx-card, .pdx-flip .pdx-card { transform: none; }
  .pdx-cat .pdx-th > span:nth-child(2), .pdx-cat .pdx-tr > span:nth-child(2) { display: none; }
  .pdx-cat .pdx-th, .pdx-cat .pdx-tr { grid-template-columns: 1.8fr 1fr 0.8fr 0.55fr; column-gap: 10px; }
  .pdx-cat em { display: none; }
  .pdx-cat { font-size: 10.5px; }
  .pdx-cat .pdx-th > span, .pdx-cat .pdx-tr > span:first-child { white-space: normal; overflow: visible; }
  .pdx-ver { gap: 12px; padding: 12px; }
  .pdx-ver > span:first-child { min-width: 0; }
}

/* ===== Customer registration, drawn (Customer Data page) =====
   The shopper's sign-up form on the drawn phone, and the settings piece on the
   same card as the product record pieces. */
.rgx-phone { width: 262px; padding: 0; overflow: visible; background: #fff; }
.rgx-phone > :first-child { border-radius: 42px 42px 0 0; }
.rgx-phone > :last-child { border-radius: 0 0 42px 42px; overflow: hidden; }
.rgx-hero {
  display: flex; align-items: flex-end; height: 92px; padding: 0 16px 12px;
  background: linear-gradient(160deg, #c9d6ea 0%, #8fa3c4 55%, #5b6f93 100%);
}
.rgx-hero b { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.rgx-form { display: grid; padding: 12px 16px 16px; }
.rgx-l { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; }
.rgx-in {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 9px;
  padding: 7px 10px; border: 1px solid #e3e7ee; border-radius: 8px; font-size: 11px; color: #9aa3b5;
}
.rgx-in.is-filled { color: #10142a; }
.rgx-in.is-focus { justify-content: flex-start; gap: 0; color: #10142a; border-color: #3b86f7; box-shadow: 0 0 0 3px rgba(59,134,247,0.15); }
.rgx-caret { display: inline-block; width: 1px; height: 13px; margin-left: 1px; background: #3b86f7; animation: scoBlink 1.1s ease-in-out infinite; }
.rgx-in i { font-size: 12px; color: #8a93a6; font-style: normal; }
.rgx-phone-in { justify-content: flex-start; padding-left: 0; }
.rgx-cc { display: inline-flex; align-items: center; gap: 3px; padding: 0 9px 0 10px; margin-right: 4px; border-right: 1px solid #e3e7ee; color: #10142a; }
.rgx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rgx-opt { display: flex; align-items: center; gap: 8px; margin: 2px 0 7px; font-size: 10.5px; color: #3a4154; }
.rgx-box { display: grid; place-items: center; flex: none; width: 14px; height: 14px; border: 1px solid #c9ced8; border-radius: 4px; background: #fff; }
.rgx-box.is-on { background: #3b86f7; border-color: #3b86f7; }
.rgx-box i { color: #fff; font-size: 10px; }
.rgx-btn { margin-top: 6px; padding: 9px 0; border-radius: 8px; background: #10142a; color: #fff; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Settings piece: just the required-fields block, drawn a size up. */
.rgx-req { max-width: 440px; padding: 24px 26px 20px; display: grid; }
.rgx-req-h { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.rgx-req-sub { margin: 4px 0 16px; font-size: 12px; color: #8a93a6; }
.rgx-req .rgx-opt { gap: 10px; margin: 0 0 12px; font-size: 14px; color: #10142a; }
.rgx-req .rgx-box { width: 18px; height: 18px; border-radius: 5px; }
.rgx-req .rgx-box i { font-size: 13px; }
.rgx-req .rgx-qr { margin-top: 6px; padding-top: 14px; font-size: 12.5px; gap: 8px; }
.rgx-req .rgx-qr i { font-size: 18px; }
.rgx-main { min-width: 0; }
.rgx-main .pdx-head b { font-size: 15px; }
.rgx-main .pdx-label { margin-left: 0; }
.rgx-btns { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.rgx-btns span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 1px solid #e3e7ee; border-radius: 8px; color: #2f7bff; font-size: 11px; font-weight: 600; }
.rgx-btns i { font-size: 13px; }
.rgx-btns svg { width: 13px; height: 13px; }
.rgx-qr { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #edf0f4; font-size: 10.5px; color: #4b5266; }
.rgx-qr i { font-size: 15px; color: #10142a; }
.rgx-qr b { color: #2f7bff; font-weight: 600; }
/* The store's QR code sits beside the phone, the way it stands on the counter. */
.rgx-stage { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 34px; }
.rgx-qrcard {
  display: grid; justify-items: center; gap: 2px; padding: 14px 14px 12px; border-radius: 16px;
  background: #fff; border: 1px solid #e3e7ee; color: #10142a; font-family: var(--font-body); text-align: center;
  box-shadow: 0 30px 50px -26px rgba(7,9,26,0.5); transform: rotate(-4deg) translateY(36px);
}
.tfx .rgx-qrcode { width: 116px; height: 116px; margin-bottom: 8px; fill: #10142a; stroke: none; }
.rgx-qrcard b { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.rgx-qrcard span { font-size: 10px; color: #8a93a6; }
@media (max-width: 760px) {
  .rgx-stage { gap: 14px; }
  .rgx-qrcard { transform: none; padding: 10px 10px 9px; }
  .tfx .rgx-qrcode { width: 72px; height: 72px; margin-bottom: 4px; }
  .rgx-hero b { font-size: 14px; }
  .rgx-qrcard b { font-size: 11px; }
  .rgx-qrcard span { display: none; }
  .rgx-phone { width: 220px; }
}
@media (prefers-reduced-motion: reduce) { .rgx-caret { animation: none; } }

/* ===== Customer record, drawn (Customer Data page) =====
   A deep band in both themes, so the record reads as the centrepiece after the
   stats. The theme tokens are re-pointed inside it, which lets the header and the
   capability rows (.crec-*) restyle themselves for the dark ground. */
.crx {
  position: relative; overflow: hidden;
  --text: #ffffff; --text-muted: rgba(226, 232, 255, 0.74); --text-faint: rgba(226, 232, 255, 0.5);
  --border: rgba(255, 255, 255, 0.1); --brand-text: #80B0FF; --brand-blue: #80B0FF; --brand-soft: rgba(80, 140, 255, 0.16);
  color: var(--text);
  background:
    radial-gradient(46% 60% at 24% 62%, rgba(36, 125, 255, 0.34), transparent 70%),
    radial-gradient(40% 50% at 86% 10%, rgba(80, 120, 245, 0.22), transparent 72%),
    linear-gradient(180deg, #080b1f 0%, #0b1130 55%, #080a1c 100%);
}
.crx::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 55%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 30% 55%, #000, transparent 75%);
}
.crx .container { position: relative; }
.crx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 8px; }

/* the profile card */
.crx-stage { position: relative; padding: 48px 40px; }
.crx-card {
  position: relative; max-width: 440px; margin: 0 auto; padding: 22px; border-radius: 22px;
  background: #fff; color: #10142a; font-family: var(--font-body);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: rotate(-1.5deg);
}
.crx-who { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid #edf0f4; }
.crx-photo {
  position: relative; flex: none; width: 68px; height: 68px; border-radius: 50%; padding: 3px;
  background: #2f7bff; box-shadow: 0 10px 24px -10px rgba(47, 123, 255, 0.8);
}
.crx-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; }
.crx-photo::after { content: ""; position: absolute; right: 2px; bottom: 3px; width: 13px; height: 13px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.crx-name { flex: 1; display: grid; gap: 3px; min-width: 0; }
.crx-name b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.crx-name em { font-style: normal; font-size: 11.5px; color: #8a93a6; }
.crx-scan { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #f1f4f9; font-size: 20px; color: #10142a; }
.crx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.crx-tile { display: grid; align-content: start; gap: 7px; padding: 12px 13px; border-radius: 13px; background: #f5f7fb; }
.crx-wide { grid-column: 1 / -1; }
.crx-cap { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8a93a6; }
.crx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.crx-chips em { font-style: normal; padding: 3px 8px; border-radius: 100px; background: #fff; border: 1px solid #e3e7ee; font-size: 10.5px; font-weight: 600; }
.crx-tog { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; font-weight: 500; }
.crx-tog i { position: relative; width: 26px; height: 15px; border-radius: 100px; background: #c9ced8; }
.crx-tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.crx-tog i.is-on { background: #2f7bff; }
.crx-tog i.is-on::after { left: 13px; }
.crx-buy { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; }
.crx-buy + .crx-buy { padding-top: 7px; border-top: 1px solid #e8ebf1; }
.crx-buy i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #e8f0ff; color: #2f6fe0; font-size: 13px; }
.crx-buy small { margin-left: auto; font-size: 10px; color: #8a93a6; }
.crx-bars { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.crx-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: #cfe0ff; }
.crx-bars i:last-child { background: #2f7bff; }

/* the capabilities beside it */
.crx-fields .crec-row { padding: 18px 4px; }
.crx-fields .crec-ico { border: 1px solid rgba(128, 176, 255, 0.22); }
.crx-fields .crec-row:nth-child(even) .crec-ico { color: #a9b8ff; background: rgba(80, 120, 245, 0.18); }

@media (max-width: 1000px) {
  .crx-grid { grid-template-columns: 1fr; gap: 24px; }
  .crx-stage { width: 100%; max-width: 560px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .crx-stage { padding: 0; }
  .crx-card { transform: none; padding: 16px; }
}

/* ===== A moment from the floor (feature pages) =====
   One scene, straight after the hero, so the page opens on something that happens
   in a store before it starts listing capabilities. */
.moment { padding: 64px 0; border-bottom: 1px solid var(--border); background: var(--bg); }
.moment-inner { max-width: 860px; margin: 0 auto; }
.moment-eyebrow {
  display: inline-block; margin-bottom: 14px; font-family: var(--font-mono, monospace);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-text);
}
.moment-text { margin: 0; font-size: clamp(22px, 2.6vw, 31px); line-height: 1.38; font-weight: 500; letter-spacing: -0.018em; color: var(--text); }
@media (max-width: 760px) { .moment { padding: 44px 0; } }

/* ===== Customer quote (verbatim, linked to its case study) ===== */
.cq-band { padding: 56px 0; }
.cq { max-width: 860px; margin: 0 auto; }
.cq blockquote {
  margin: 0; padding-left: 26px; border-left: 3px solid var(--brand-blue);
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; color: var(--text);
}
.cq blockquote::before { content: "\201C"; }
.cq blockquote::after { content: "\201D"; }
.cq figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 16px; padding-left: 29px; font-size: 14px; color: var(--text-muted); }
.cq figcaption b { color: var(--text); font-weight: 600; }
.cq figcaption a { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--brand-text); }
.cq figcaption a i { font-size: 14px; }
@media (max-width: 760px) { .cq-band { padding: 40px 0; } .cq blockquote { padding-left: 18px; } .cq figcaption { padding-left: 21px; } }

/* ===== Inventory pieces, drawn (Inventory Control page) =====
   The ship-to block of a purchase order and the outgoing shipments list, on the
   same card as the product and customer pieces. */
.ivx-pill { padding: 3px 10px; border-radius: 100px; background: #eef1f6; color: #4b5266; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ivx-po { max-width: 420px; display: grid; }
.ivx-field { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 12px; margin-bottom: 9px; }
.ivx-field small { font-size: 11px; color: #8a93a6; text-align: right; }
.ivx-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid #e3e7ee; border-radius: 8px; font-size: 11.5px; color: #10142a; }
.ivx-in i { font-size: 12px; color: #8a93a6; }
.ivx-in.is-set { border-color: #3b86f7; box-shadow: 0 0 0 3px rgba(59,134,247,0.14); font-weight: 600; }
.ivx-in.ivx-dim { background: #f5f7fb; color: #6b7386; }
.ivx-in b { color: #2f7bff; font-weight: 600; }
.ivx-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid #edf0f4; }
.ivx-btns span { padding: 6px 16px; border-radius: 8px; border: 1px solid #e3e7ee; font-size: 11px; font-weight: 600; color: #2f7bff; }
.ivx-btns span.is-main { background: #2f7bff; border-color: #2f7bff; color: #fff; }
.ivx-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 10px; background: #eef1f6; }
.ivx-tabs span { flex: 1; text-align: center; padding: 6px 0; border-radius: 7px; font-size: 11px; font-weight: 500; color: #4b5266; }
.ivx-tabs span.is-on { background: #fff; color: #10142a; font-weight: 600; box-shadow: 0 1px 2px rgba(7,9,26,0.08); }
.ivx-tabs em { font-style: normal; color: #8a93a6; }
.ivx-ship .pdx-th, .ivx-ship .pdx-tr { grid-template-columns: 0.75fr 0.5fr 1.35fr 1.35fr 0.4fr; }
.ivx-ship .pdx-tr > span:last-child, .ivx-ship .pdx-th > span:last-child { text-align: right; }
.ivx-st { font-style: normal; display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 9.5px; font-weight: 600; }
.ivx-st.is-prep { background: #fdeee3; color: #a2501a; }
.ivx-st.is-ship { background: #fff4d6; color: #8a6400; }
.ivx-st.is-ready { background: #e2f3fb; color: #0f6a8f; }
.ivx-st.is-sent { background: #e6f6ec; color: #1f7a45; }
@media (max-width: 760px) {
  .ivx-field { grid-template-columns: 1fr; gap: 4px; }
  .ivx-field small { text-align: left; }
  .ivx-ship .pdx-th > span:nth-child(2), .ivx-ship .pdx-tr > span:nth-child(2) { display: none; }
  .ivx-ship .pdx-th, .ivx-ship .pdx-tr { grid-template-columns: 0.8fr 1.3fr 1.4fr 0.35fr; column-gap: 8px; }
}

/* ===== Order fill logic, drawn (OMS page) =====
   The top of the ranked rule stack: active rules first, the rest fading out below. */
.ofx { max-width: 480px; }
.ofx-move { display: inline-flex; gap: 6px; }
.ofx-move > span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; border: 1px solid #e3e7ee; font-size: 10.5px; font-weight: 600; color: #b3bac8; }
.ofx-move > span.is-on { color: #2f7bff; border-color: #cfe0ff; }
.ofx-move svg { width: 12px; height: 12px; }
.ofx-th { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px 8px 0 0; background: #eef1f6; font-size: 10.5px; font-weight: 600; color: #4b5266; }
.ofx-list { display: grid; }
.ofx-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid #edf0f4; font-size: 11.5px; color: #10142a; }
.ofx-row > span { flex: 1; min-width: 0; }
.ofx-row em { font-style: normal; font-family: var(--font-mono, monospace); font-size: 10px; color: #8a93a6; }
.ofx-row.is-sel { background: #e8f0ff; border-radius: 6px; border-bottom-color: transparent; font-weight: 600; }
.ofx-row.is-off { color: #9aa3b5; }
.ofx-grip { width: 14px; height: 14px; flex: none; color: #b3bac8; stroke-width: 3 !important; }
.ofx-box { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid #c9ced8; background: #fff; }
.ofx-box.is-on { background: #2f7bff; border-color: #2f7bff; }
.ofx-box i { font-size: 11px; color: #fff; font-style: normal; }
.ofx-move > span, .ofx .pdx-head b { white-space: nowrap; }
@media (max-width: 760px) {
  .ofx .pdx-head { flex-wrap: wrap; row-gap: 10px; }
  .ofx-row { font-size: 10.5px; gap: 6px; }
  .ofx-th span:first-child { max-width: 75%; }
}

/* ===== Cloud back office dashboards, drawn (Analytics page) =====
   Mirrors the real Looker dashboards: colored KPI tiles with period deltas, white
   chart cards with titles, axis labels and the two-period legend, and the segment
   page's purple / green / blue series. Values are illustrative. */
.ahq { max-width: 560px; padding: 14px; background: #f3f4f8; display: grid; gap: 10px; }
.ahq-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ahq-kpi { display: grid; gap: 4px; padding: 10px 6px 8px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(7,9,26,0.08); text-align: center; }
.ahq-kpi b { font-size: 14px; font-weight: 500; color: var(--c); letter-spacing: -0.01em; white-space: nowrap; }
.ahq-kpi small { font-size: 7.5px; color: var(--c); font-weight: 600; white-space: nowrap; }
.ahq-kpi em { font-style: normal; font-weight: 600; }
.ahq-kpi em.is-up { color: #2e9e4f; }
.ahq-kpi em.is-down { color: #d23b3b; }
.ahq-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ahq-charts-2 { grid-template-columns: 1fr 1fr; }
.ahq-chart { position: relative; display: grid; align-content: start; gap: 5px; padding: 10px 10px 8px 18px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(7,9,26,0.08); min-width: 0; }
.ahq-chart > b { font-size: 9.5px; font-weight: 600; text-align: center; color: #10142a; line-height: 1.25; }
.ahq-y { position: absolute; left: 3px; top: 50%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; font-size: 5.5px; color: #6b7386; white-space: nowrap; }
.ahq-x { font-size: 6px; color: #6b7386; text-align: center; }
.ahq-key { display: flex; justify-content: center; align-items: center; gap: 3px; font-size: 5.5px; color: #4b5266; white-space: nowrap; }
.ahq-key i { width: 5px; height: 5px; border-radius: 50%; background: #4b3ab5; margin-left: 3px; }
.ahq-key i.is-blue { background: #5aa9e6; }
.ahq-key i.is-prev { background: #c9ced8; }
.ahq-key-seg i { background: var(--c); }
.ahq-bars { display: flex; align-items: flex-end; gap: 2px; height: 56px; border-bottom: 1px solid #e3e7ee; border-left: 1px solid #e3e7ee; padding-left: 2px; }
.ahq-bars > span { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.ahq-bars i { flex: 1; height: var(--h); background: #5aa9e6; }
.ahq-bars i.is-prev { background: #dde1e8; }
.tfx .ahq-line { width: 100%; height: 56px; }
.tfx .ahq-line-tall { height: 72px; }
.ahq-locs { display: grid; gap: 4px; margin-top: 4px; }
.ahq-loc { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 4px; }
.ahq-loc b { font-size: 5.5px; font-weight: 400; color: #4b5266; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahq-loc > span { display: grid; gap: 1px; }
.ahq-loc i { display: block; height: 5px; width: var(--w); background: #5aa9e6; }
.ahq-loc i.is-prev { background: #dde1e8; height: 3px; }
.ahq-pie { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; }
.tfx .ahq-pie svg { width: 64px; height: 64px; justify-self: center; }
.ahq-legend { display: grid; gap: 3px; }
.ahq-legend span { display: flex; align-items: center; gap: 3px; font-size: 5.5px; color: #4b5266; white-space: nowrap; }
.ahq-legend i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.ahq-legend b { font-weight: 400; }
.ahq-dist { display: flex; align-items: flex-end; justify-content: space-around; height: 64px; padding: 0 6px; border-bottom: 1px solid #e3e7ee; border-left: 1px solid #e3e7ee; }
.ahq-dist > span { position: relative; width: 22%; height: 100%; display: flex; align-items: flex-end; }
.ahq-dist i { display: block; width: 100%; height: var(--h); background: var(--c); }
.ahq-dist small { position: absolute; left: 0; right: 0; bottom: calc(var(--h) + 2px); text-align: center; font-size: 5.5px; font-weight: 600; color: #10142a; }
.ahq-boxes { display: flex; justify-content: space-around; align-items: flex-end; height: 64px; padding: 0 4px; border-bottom: 1px solid #e3e7ee; border-left: 1px solid #e3e7ee; }
.ahq-box { position: relative; width: 24%; height: 100%; }
.ahq-box i { position: absolute; left: 50%; display: block; }
.ahq-box .w { width: 1px; margin-left: -0.5px; bottom: var(--lo); top: calc(100% - var(--hi)); background: #5aa9e6; }
.ahq-box .b { width: 70%; margin-left: -35%; bottom: var(--q1); top: calc(100% - var(--q3)); border: 1px solid #5aa9e6; background: #fff; }
.ahq-box .m { width: 70%; margin-left: -35%; bottom: var(--md); height: 1px; background: #5aa9e6; }
.ahq-box small { position: absolute; left: 0; right: 0; bottom: -9px; text-align: center; font-size: 5.5px; color: #6b7386; }
.ahq-seg .ahq-charts-3 .ahq-chart:last-child { padding-bottom: 14px; }
@media (max-width: 760px) {
  .ahq { padding: 10px; }
  .ahq-kpis { grid-template-columns: repeat(3, 1fr); }
  .ahq-kpi:nth-child(n+4) { display: none; }
  .ahq-charts { grid-template-columns: 1fr 1fr; }
  .ahq-charts .ahq-chart:nth-child(3) { grid-column: 1 / -1; }
  .ahq-charts-2 .ahq-chart:nth-child(3) { grid-column: auto; }
}

/* ===== Device record, drawn (Access & Identity page) =====
   The record panel of the back office device screen: details, device info, status. */
.dvx { max-width: 440px; display: grid; }
.dvx .pdx-head b { display: inline-flex; align-items: center; gap: 8px; }
.dvx .pdx-head i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid #e3e7ee; font-size: 12px; color: #4b5266; }
.dvx .pdx-label { margin-top: 2px; }
.dvx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.dvx-wide { grid-column: 1 / -1; }
.dvx-f { display: grid; gap: 4px; }
.dvx-f small, .dvx-info small { font-size: 9.5px; color: #6b7386; }
.dvx-in { padding: 7px 10px; border: 1px solid #e3e7ee; border-radius: 7px; font-size: 11.5px; color: #10142a; }
.dvx-in.is-ph { color: #9aa3b5; }
.dvx-info > span { display: grid; gap: 3px; font-size: 11.5px; color: #4b5266; }
.dvx-status { font-size: 11.5px; font-weight: 600; color: #10142a; }
@media (max-width: 760px) { .dvx-grid { gap: 8px 10px; } }

/* ===== Store login screen, drawn (Access & Identity, homepage tile) =====
   Face frame with an outline instead of a person, rotating QR as the second
   route, password as the third. */
.lgx { max-width: 420px; padding: 12px 14px 14px; display: grid; gap: 12px; background: #f2f3f7; }
.lgx-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 10px; color: #4b5266; }
.lgx-top b { font-size: 12px; font-weight: 600; color: #10142a; }
.lgx-batt { justify-self: end; width: 18px; height: 9px; border: 1px solid #8a93a6; border-radius: 3px; padding: 1px; }
.lgx-batt i { display: block; width: 40%; height: 100%; border-radius: 1px; background: #e8a600; }
.lgx-cam { position: relative; height: 150px; border-radius: 10px; background: linear-gradient(180deg, #1c2430, #0f141c); overflow: hidden; display: grid; place-items: center; }
.lgx-banner { position: absolute; left: 8px; right: 8px; top: 8px; padding: 6px 10px; border-radius: 100px; background: #2f7bff; color: #fff; font-size: 9.5px; font-weight: 600; text-align: center; }
.lgx-oval { display: block; margin-top: 18px; }
.tfx .lgx-oval svg, .duo-img .lgx-oval svg { width: 84px; height: 108px; fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 1.6; stroke-dasharray: 4 3; }
.lgx-alt { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #fff; }
.lgx-qr { display: block; padding: 4px; border-radius: 6px; border: 1px solid #e3e7ee; }
.tfx .lgx-qr svg, .duo-img .lgx-qr svg { display: block; width: 46px; height: 46px; fill: #10142a; stroke: none; }
.lgx-alt-text { display: grid; gap: 2px; min-width: 0; }
.lgx-alt-text b { font-size: 11.5px; font-weight: 600; color: #10142a; }
.lgx-alt-text em { font-style: normal; font-size: 9.5px; color: #6b7386; }
.lgx-pw { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid #e3e7ee; font-size: 10px; font-weight: 600; color: #2f7bff; white-space: nowrap; }
.lgx-pw i { font-size: 11px; }
.lgx-cancel { display: block; padding: 10px 0; border-radius: 100px; background: #e5443a; color: #fff; text-align: center; font-size: 12px; font-weight: 700; }
/* homepage tile: the screen rises from the tile's bottom edge, top first */
.duo-img-login { align-items: flex-start; }
.duo-img-login .lgx { width: 100%; max-width: 380px; transform: none; border-radius: 14px 14px 0 0; box-shadow: 0 -20px 40px -30px rgba(7,9,26,0.4); }
@media (max-width: 760px) {
  .lgx-alt { grid-template-columns: auto 1fr; }
  .lgx-pw { grid-column: 1 / -1; justify-self: start; }
}

/* ===== The largest deployment, on a deep band (Scalability page) =====
   Same ground as the customer record band, so the globe and the figures carry
   the section in both themes. */
.globe-deep {
  --text: #ffffff; --text-muted: rgba(226, 232, 255, 0.74); --text-faint: rgba(226, 232, 255, 0.5);
  --border: rgba(255, 255, 255, 0.12); --brand-text: #80B0FF; --border-strong: rgba(255,255,255,0.14);
  color: var(--text);
  background:
    radial-gradient(42% 60% at 22% 60%, rgba(36, 125, 255, 0.30), transparent 70%),
    radial-gradient(40% 50% at 86% 12%, rgba(80, 120, 245, 0.22), transparent 72%),
    linear-gradient(180deg, #080b1f 0%, #0b1130 55%, #080a1c 100%);
}
.globe-deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 55%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 30% 55%, #000, transparent 75%);
}
.globe-deep .container { position: relative; }
.globe-deep .globe-stage { grid-template-columns: 480px 1fr; gap: 72px; }
.globe-deep .globe-wrap { width: 480px; height: 480px; }
.globe-deep .globe-halo { width: 460px; height: 460px; opacity: 1; background: radial-gradient(circle, rgba(36,125,255,0.38), rgba(80,120,245,0.16) 52%, transparent 72%); }
.globe-deep .gl-sphere { fill: url(#glFill); }
.globe-deep .gl-lat { stroke: rgba(255,255,255,0.08); }
.globe-deep .gl-mer { stroke: rgba(109,155,255,0.18); }
.globe-deep .globe-figures { border-color: var(--border); }
.globe-deep .globe-fig-label { color: var(--text-muted); }
@media (max-width: 1080px) {
  .globe-deep .globe-stage { grid-template-columns: 380px 1fr; gap: 44px; }
  .globe-deep .globe-wrap { width: 380px; height: 380px; }
  .globe-deep .globe-halo { width: 360px; height: 360px; }
}
@media (max-width: 860px) {
  .globe-deep .globe-stage { grid-template-columns: 1fr; }
  .globe-deep .globe-wrap { width: min(340px, 82vw); height: auto; aspect-ratio: 1; }
}

/* Careers: apply link on each open role */
.role-apply { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--brand-text); }
.role-apply i { font-size: 14px; transition: transform .18s ease; }
.role-apply:hover i { transform: translateX(3px); }

/* Careers: the application form, embedded */
.apply-formwrap { max-width: 760px; margin: 8px auto 0; padding: 28px; border-radius: 18px; background: var(--bg-elevated); border: 1px solid var(--border); }
@media (max-width: 600px) { .apply-formwrap { padding: 18px 14px; } }

/* ===== Drawn pieces for the text-only rows on luxury, museums and pet =====
   Client profile and limited-release stock (luxury), one-transaction sale and
   member profile (museums). Illustrative. */
.lcx, .mdx { max-width: 460px; }
.lcx-tier { padding: 4px 10px; border-radius: 100px; background: #f1f4f9; color: #4b5266; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.scx { max-width: 420px; display: grid; }
.scx-big { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.scx-big b { font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: #10142a; }
.scx-big span { display: grid; gap: 3px; font-size: 14px; font-weight: 600; color: #10142a; }
.scx-big em { font-style: normal; font-size: 10.5px; font-weight: 500; color: #1f8a4c; }
.scx-loc { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #edf0f4; font-size: 12px; color: #10142a; }
.scx-loc i { color: #8a93a6; font-size: 14px; }
.scx-loc b { margin-left: auto; font-weight: 700; }
.scx-chan { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; padding: 8px 10px; border-radius: 9px; background: #f5f7fb; font-size: 10.5px; color: #4b5266; }
.scx-chan span { padding: 2px 8px; border-radius: 100px; background: #fff; border: 1px solid #e3e7ee; font-weight: 600; }
.scx-chan em { margin-left: auto; font-style: normal; font-weight: 600; color: #2f7bff; }
.scx .ivx-btns span { display: inline-flex; align-items: center; gap: 5px; }
.mux { width: 272px; }
.mux-member { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 9px 10px; border-radius: 12px; background: #e8f0ff; }
.mux-member i { font-size: 18px; color: #2f6fe0; }
.mux-member span { display: grid; gap: 1px; }
.mux-member b { font-size: 11.5px; }
.mux-member em { font-style: normal; font-size: 9.5px; color: #4b5266; }
.mux-line { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.mux-line + .mux-line { border-top: 1px solid #edf0f4; }
.mux-line > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #f1f4f9; color: #4b5266; font-size: 13px; flex: none; }
.mux-line > span { flex: 1; display: grid; gap: 1px; min-width: 0; }
.mux-line b { font-size: 11.5px; font-weight: 600; }
.mux-line em { font-style: normal; font-size: 9.5px; color: #8a93a6; }
.mux-line strong { font-size: 12px; font-weight: 600; white-space: nowrap; }
.mux .tfx-foot { margin-top: 10px; }
.mux .tfx-final.is-live { background: #3b86f7; }
.mdx-avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: #e8f0ff; color: #2f6fe0; font-size: 24px; }
.mdx-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.mdx-totals > span { display: grid; gap: 3px; padding: 10px 8px; border-radius: 10px; background: #f5f7fb; }
.mdx-totals small { font-size: 9.5px; color: #6b7386; }
.mdx-totals b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #10142a; }
.mdx-totals .is-sum { background: #e8f0ff; }
.mdx-totals .is-sum b { color: #2f6fe0; }
@media (max-width: 760px) {
  .mdx-totals { grid-template-columns: repeat(2, 1fr); }
}

/* Inline figures in migrated blog posts */
.blog-figure { margin: 8px 0 24px; }
.blog-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.blog-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--text-faint); }

/* ============ NRF 2027 LAUNCH PAGE (.lx) ============
   One-off landing page styled as a product reveal: warm sand, blush, aqua and peach,
   editorial serif, a countdown. Page-scoped; nothing here leaks to the rest of the site.
   Colors are fixed so the page reads the same in both themes. */
/* palette supplied by the client: cream, dark green, coral, sky blue */
.lx { --lx-sand: #FDEEDB; --lx-sand-2: #F8E3CA; --lx-blush: #95DAF7; --lx-aqua: #2E5340; --lx-aqua-2: #1C3626; --lx-peach: #DF9A87; --lx-peach-2: #D47C78; --lx-ink: #1C3626; --lx-ink-soft: rgba(28,54,38,0.7); --lx-line: rgba(28,54,38,0.16); color: var(--lx-ink); }
.lx .container { position: relative; z-index: 1; }
.lx-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; }
.lx-mono { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

/* hero */
.lx-hero { position: relative; overflow: hidden; background: var(--lx-sand); padding: 88px 0 170px; min-height: 86vh; display: flex; align-items: center; }
.lx-sun { position: absolute; right: -8vw; top: -14vw; width: 44vw; height: 44vw; min-width: 420px; min-height: 420px; border-radius: 50%; background: var(--lx-peach); }
.lx-sun::after { content: ''; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid var(--lx-peach-2); }
/* warm halo around the sun, and a shoreline along the bottom of the hero */
.lx-sun::before { content: ''; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(223,154,135,0.42) 0%, rgba(223,154,135,0.18) 42%, rgba(223,154,135,0) 68%); }
.lx-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; }
.lx-sea svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.lx-sea .sea-back { fill: var(--lx-blush); opacity: 0.45; }
.lx-sea .sea-front { fill: var(--lx-blush); }
.lx-bands { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; }
.lx-bands span { position: absolute; left: 0; right: 0; height: 1px; background: var(--lx-ink); opacity: 0.12; }
.lx-bands span:nth-child(1){ bottom: 76%; } .lx-bands span:nth-child(2){ bottom: 62%; } .lx-bands span:nth-child(3){ bottom: 50%; } .lx-bands span:nth-child(4){ bottom: 40%; } .lx-bands span:nth-child(5){ bottom: 32%; } .lx-bands span:nth-child(6){ bottom: 26%; }
/* the client's palm-and-mark wallpaper: faded in the hero with a clean centre for the copy,
   full strength behind the facts card */
.lx-pattern { position: absolute; inset: 0; background: url(/assets/images/company/events/nrf-2027-pattern.webp) top left / 784px auto repeat; opacity: 0.6; pointer-events: none; }
.lx-pattern::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 70% at 50% 46%, var(--lx-sand) 0%, rgba(253,238,219,0.94) 40%, rgba(253,238,219,0.55) 72%, rgba(253,238,219,0.1) 100%); }
.lx-hero-inner { max-width: 960px; margin: 0 auto; text-align: center; }
.lx-eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--lx-ink-soft); margin-bottom: 30px; }
.lx-eyebrow::before, .lx-eyebrow::after { content: ''; width: 34px; height: 1px; background: var(--lx-ink); opacity: 0.4; }
.lx-h1 { font-size: clamp(46px, 8vw, 112px); line-height: 0.98; margin: 0 0 24px; text-wrap: balance; }
.lx-h1 em { font-style: italic; }
.lx-sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--lx-ink-soft); max-width: 600px; margin: 0 auto 44px; }

/* countdown */
.lx-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 680px; margin: 0 auto 40px; border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); }
.lx-count div { padding: 22px 8px 18px; border-left: 1px solid var(--lx-line); }
.lx-count div:first-child { border-left: 0; }
.lx-count b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lx-count span { display: block; margin-top: 10px; color: var(--lx-ink-soft); }
.lx-count-note { color: var(--lx-ink-soft); margin: -22px 0 40px; }
.lx-hero .hero-cta { justify-content: center; margin: 0; gap: 12px; }
.lx-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 100px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.lx-btn-ink { background: var(--lx-ink); color: #fff; }
.lx-btn-ink:hover { transform: translateY(-2px); background: #142A1D; }
.lx-btn-line { border: 1px solid var(--lx-ink); color: var(--lx-ink); }
.lx-btn-line:hover { background: rgba(28,54,38,0.07); }
.lx-btn-cream { background: var(--lx-sand); color: var(--lx-ink); }
.lx-btn-cream:hover { transform: translateY(-2px); background: #fff; }

/* marquee */
.lx-marquee { background: var(--lx-ink); color: var(--lx-sand); overflow: hidden; padding: 14px 0; white-space: nowrap; }
.lx-marquee-track { display: inline-flex; gap: 48px; animation: lx-scroll 38s linear infinite; will-change: transform; }
.lx-marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
.lx-marquee-track i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--lx-blush); }
@keyframes lx-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lx-marquee-track { animation: none; } }

/* editorial tease */
.lx-drop { background: var(--lx-blush); padding: 110px 0; }
.lx-drop-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 72px; align-items: center; }
.lx-drop h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; margin: 18px 0 22px; }
.lx-drop p { font-size: 17px; line-height: 1.7; color: var(--lx-ink-soft); max-width: 520px; }
.lx-drop figure { margin: 0; position: relative; }
.lx-drop figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
.lx-drop figcaption { margin-top: 12px; color: var(--lx-ink-soft); display: flex; justify-content: space-between; }
.lx-drop figure::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid rgba(28,54,38,0.35); border-radius: 4px; pointer-events: none; }

/* the collection */
.lx-coll { background: var(--lx-sand); padding: 110px 0; }
.lx-coll-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 44px; }
.lx-coll-head h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.05; margin: 14px 0 0; max-width: 620px; }
.lx-coll-head p { color: var(--lx-ink-soft); max-width: 300px; line-height: 1.6; margin: 0; }
.lx-item { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 30px; align-items: start; padding: 34px 0; border-top: 1px solid var(--lx-line); text-decoration: none; color: inherit; transition: background .2s ease; }
.lx-item:last-child { border-bottom: 1px solid var(--lx-line); }
.lx-item:hover { background: var(--lx-sand-2); }
.lx-item .lx-no { font-family: var(--font-serif); font-size: 30px; color: var(--lx-ink-soft); padding-top: 4px; }
.lx-item h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; margin: 0 0 10px; }
.lx-item p { color: var(--lx-ink-soft); line-height: 1.65; max-width: 640px; margin: 0; }
.lx-item .lx-go { align-self: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--lx-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; transition: background .2s ease, color .2s ease; }
.lx-item:hover .lx-go { background: var(--lx-ink); color: #fff; }

/* the list */
.lx-list { background: var(--lx-aqua); color: var(--lx-sand); padding: 110px 0; }
.lx-list-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.lx-list h2 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1; margin: 14px 0 20px; }
.lx-list p { font-size: 17px; line-height: 1.65; color: rgba(253,238,219,0.78); margin: 0 auto 36px; max-width: 560px; }
.lx-list .apply-formwrap { background: var(--lx-sand); border-color: rgba(253,238,219,0.25); text-align: left; color: var(--lx-ink); }
.lx-list .hero-cta { justify-content: center; margin: 0; }
.lx-list-perks { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; color: rgba(253,238,219,0.78); }
.lx-list-perks span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.lx-list-perks i { font-size: 16px; }

/* facts */
.lx-facts { background: var(--lx-sand) url(/assets/images/company/events/nrf-2027-pattern.webp) top left / 784px auto repeat; padding: 70px 0; }
.lx-facts-card { background: var(--lx-sand); padding: 44px 40px; border-radius: 4px; box-shadow: 0 20px 40px -30px rgba(28,54,38,0.35); }
.lx-facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.lx-fact { border-left: 1px solid var(--lx-line); padding-left: 22px; }
.lx-fact b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; margin-top: 10px; }
.lx-fact small { display: block; color: var(--lx-ink-soft); margin-top: 8px; font-size: 14px; }

@media (max-width: 900px) {
  .lx-hero { padding: 64px 0 120px; min-height: 0; }
  .lx-sea { height: 72px; }
  .lx-eyebrow { gap: 0; }
  .lx-eyebrow::before, .lx-eyebrow::after { display: none; }
  .lx-sun { width: 70vw; height: 70vw; right: -24vw; top: -20vw; min-width: 0; min-height: 0; }
  .lx-count { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lx-count div { padding: 16px 4px 14px; }
  .lx-count span { font-size: 9.5px; letter-spacing: 0.1em; }
  .lx-drop, .lx-coll, .lx-list { padding: 72px 0; }
  .lx-drop-grid { grid-template-columns: 1fr; gap: 40px; }
  .lx-coll-head { flex-direction: column; align-items: flex-start; }
  .lx-item { grid-template-columns: 48px minmax(0, 1fr); }
  .lx-item .lx-no { font-size: 22px; }
  .lx-item .lx-go { display: none; }
  .lx-facts-grid { grid-template-columns: 1fr; }
  .lx-facts-card { padding: 28px 22px; }
}

/* ============ CAREERS SPLITS ============
   Two-column rows that were inline styles, which no media query could override: they
   stayed two columns on phones. */
.split2 { display: grid; align-items: center; }
.split2-hero { grid-template-columns: 1.15fr 1fr; gap: 56px; }
.split2-words { grid-template-columns: 1fr 1.15fr; gap: 48px; }
@media (max-width: 900px) {
  .split2-hero, .split2-words { grid-template-columns: 1fr; gap: 32px; }
  .split2-words > div:first-child { order: 2; }
}
/* a logo wider than the phone screen was overflowing its slot in the one-line strip */
.logos-oneline .logo-slot { max-width: 100%; }

/* the two floating labels over the fanned POS screens overlap each other on phones */
@media (max-width: 640px) { .fan-bubble { display: none; } }

/* ============ PHONE FIXES ============ */
/* mobile POS hero stats: the nth-child divider rule outranked the one-column reset, so a
   stray vertical line showed left of the second stat */
@media (max-width: 520px) { .pfh-col:nth-child(n)::before { display: none; } }
/* home: the fanned POS screens were spilling past the phone edges; pull them in and shrink */
@media (max-width: 640px) {
  .pos-fan-section { overflow: hidden; }
  .fanw-3 .fanw-card { width: 72vw; }
  .fanw-3 .fanw-card:nth-child(1), .fanw-stage:hover .fanw-3 .fanw-card:nth-child(1) { transform: translateX(-50%) translateX(-34%) translateY(9%) rotate(-8deg) scale(0.86); }
  .fanw-3 .fanw-card:nth-child(3), .fanw-stage:hover .fanw-3 .fanw-card:nth-child(3) { transform: translateX(-50%) translateX(34%) translateY(9%) rotate(8deg) scale(0.86); }
  .fanw { height: 52vw; }
}
/* mobile POS "the app itself": a landscape iPad at phone width leaves a 198px-tall screen and
   the receipt clips. Turn the iPad portrait on phones and scale the receipt to fit. */
@media (max-width: 640px) {
  .hpos-device { aspect-ratio: 3 / 4; }
  .hpos-screen .srx-fit { width: 154%; height: 154%; transform: scale(0.65); }
  .hpos-screen .srx-body { grid-template-columns: 1.5fr 1fr; }
}

/* ============ LEGAL PAGES ============ */
.legal-body h2 { font-size: 19px; font-weight: 700; color: var(--text); margin: 34px 0 12px; letter-spacing: -0.015em; }
.legal-body ol { margin: 0 0 16px; padding-left: 26px; }
.legal-body ol li { margin-bottom: 8px; }
.legal-body a { color: var(--brand-text); }

/* ============ ONE UNIFIED TECH STACK (.stk) ============
   Rebuild of the old WordPress landing page. Hero tiles drift like the original; the
   comparison puts the stitched stack beside the one-platform cluster. */
.stk-hero { padding: 56px 0 72px; overflow: hidden; }
.stk-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
/* .hero .stk-h1 so the generic .hero h1 rule (96px) does not win */
.hero .stk-h1 { margin: 18px 0 18px; font-size: clamp(38px, 5.2vw, 64px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: #ffffff; }
.hero .stk-h1 .callout { color: #6aa8ff; }
.stk-sub { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 520px; margin: 0 0 28px; }
.stk-cta { justify-content: flex-start; margin: 0; }

.stk-tiles { position: relative; height: 420px; }
.stk-tile {
  position: absolute; width: 150px; height: 150px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  font-size: 15px; font-weight: 600; color: var(--text); animation: stk-drift 7s ease-in-out infinite;
}
.stk-tile i { font-size: 34px; }
.stk-tile-1 { left: 10%; top: 6%; transform: rotate(-7deg); }
.stk-tile-2 { right: 8%; top: 12%; transform: rotate(6deg); animation-delay: -2s; }
.stk-tile-3 { left: 6%; bottom: 10%; transform: rotate(4deg); animation-delay: -4s; }
.stk-tile-4 { right: 12%; bottom: 4%; transform: rotate(-5deg); animation-delay: -1s; }
@keyframes stk-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .stk-tile { animation: none; } }

.stk-flag {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.stk-flag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stk-flag-amber { background: #f5b63a; color: #3a2600; }
.stk-flag-red { background: #e5473c; color: #fff; }
.stk-flag-grey { background: var(--bg-deep); color: var(--text-muted); border: 1px solid var(--border); }
.stk-flag-redline { background: transparent; color: #d9432f; border: 1px solid rgba(217,67,47,0.45); }
.stk-tiles .stk-flag { position: absolute; z-index: 2; box-shadow: var(--shadow-md); }
.stk-flag-a { left: 2%; top: 0; transform: rotate(-6deg); }
.stk-flag-b { right: 0; top: 4%; transform: rotate(5deg); }
.stk-flag-c { left: 0; bottom: 6%; transform: rotate(-4deg); }
.stk-flag-d { right: 2%; bottom: 0; transform: rotate(6deg); }

.stk-compare { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 24px; align-items: stretch; }
.stk-panel { position: relative; padding: 32px; border-radius: 22px; background: var(--bg-elevated); border: 1px solid var(--border); }
.stk-panel-new { border: 1px solid var(--border); border-top: 3px solid var(--brand-blue); }
.stk-panel-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.stk-panel-eyebrow.is-brand { color: var(--brand-text); }
.stk-panel h3 { margin: 0 0 22px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.stk-panel > p { margin: 22px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.stk-vendors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.stk-vendors li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--border-strong); }
.stk-vendors b { display: block; font-size: 15px; color: var(--text); }
.stk-vendors em { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.stk-cluster { position: relative; height: 430px; }
.stk-phone { position: absolute; left: 50%; top: 10px; width: 230px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 28px 44px rgba(11,14,20,0.22)); }
.stk-chip {
  position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-radius: 14px;
  background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 2;
}
.stk-chip small { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.stk-chip b { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.stk-chip em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.stk-dot { width: 8px; height: 8px; border-radius: 50%; background: #2fb457; }
.stk-chip-inv { left: 0; top: 100px; transform: rotate(-4deg); }
.stk-chip-ord { right: 0; top: 60px; background: var(--brand-blue); border-color: transparent; color: #fff; transform: rotate(3deg); }
.stk-chip-ord small, .stk-chip-ord b { color: #fff; }
.stk-chip-pay { right: 4%; top: 170px; flex-direction: row; align-items: center; gap: 14px; transform: rotate(-3deg); }
.stk-amount { font-family: var(--font-mono); font-size: 15px; color: var(--brand-text); }
.stk-pay { padding: 8px 16px; border-radius: 100px; background: #2fb457; color: #fff !important; font-size: 12px; letter-spacing: 0.04em; }
.stk-chip-an { left: 2%; bottom: 40px; transform: rotate(3deg); }
.stk-chip-an b { font-size: 20px; }
.stk-chip-an em { color: #2fb457; font-weight: 600; }
.stk-chip-gift { right: 2%; bottom: 20px; transform: rotate(-5deg); }

.stk-band .tm-stat-grid { margin-bottom: 40px; }
.stk-quote { max-width: 820px; margin: 0 auto; padding-left: 22px; border-left: 3px solid var(--brand-blue); }
.stk-quote blockquote { margin: 0 0 12px; font-size: clamp(19px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; color: var(--text); }
.stk-quote figcaption { font-size: 14px; color: var(--text-muted); }
.stk-quote figcaption strong { color: var(--text); margin-right: 6px; }
.stk-quote a { color: var(--brand-text); font-weight: 600; }

.stk-demo .demox-sub { margin-top: 24px; }
.stk-ipad { display: block; width: 100%; max-width: 520px; height: auto; margin: 26px 0 0; }
.stk-demo .demox-points { margin-top: 22px; gap: 12px; }
.stk-demo .demox-points > li > i { color: var(--brand-blue); }

@media (max-width: 980px) {
  .stk-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .stk-tiles { height: 340px; max-width: 420px; margin: 0 auto; width: 100%; }
  .stk-tile { width: 120px; height: 120px; font-size: 13.5px; }
  .stk-tile i { font-size: 28px; }
  .stk-compare { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stk-cluster { height: 400px; }
  .stk-phone { width: 190px; }
  .stk-chip { padding: 10px 12px; }
  .stk-chip-an b { font-size: 17px; }
  .stk-tiles .stk-flag { font-size: 9.5px; padding: 5px 10px; }
}

/* ============ ENTERPRISE POS GUIDE ============ */
.eps-table { min-width: 860px; }
.eps-table thead th.eps-us-h, .eps-table td.eps-us { background: color-mix(in srgb, var(--brand-blue) 8%, var(--bg-elevated)); }
.eps-table td.eps-us { color: var(--text); font-weight: 500; }