/* ---- Home page: marquee, metrics, module cards, biometric ---- */

/* Client logo band — pure white, generous whitespace, subdued logos */
.client-marquee-section {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: #ffffff;
  border-top: 1px solid var(--in4-border);
  border-bottom: 1px solid var(--in4-border);
}

.client-marquee-section .section-head {
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}

.marquee {
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.82) 40%, transparent 100%);
}

.marquee::after {
  right: 0;
  background: linear-gradient(-90deg, #ffffff 0%, rgba(255, 255, 255, 0.82) 40%, transparent 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: 64px;
  padding-right: 64px;
}

/* Every logo file is normalised onto the same 4:1 transparent canvas, so one
   height renders the whole row at an identical size. Brand colours are kept,
   just slightly softened until a logo is hovered. */
.client-logo {
  height: 40px;
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.8;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), transform 0.35s var(--ease);
}

.client-logo:hover {
  opacity: 1;
  transform: translateY(-3px);
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Metrics — one horizontal stats band, thin separators, no card grid */
.metrics-section {
  padding-block: var(--space-section-sm);
  background: var(--in4-bg-soft);
}

.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--in4-border);
  border-bottom: 1px solid var(--in4-border);
}

.metric {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(0.75rem, 2vw, 1.5rem);
  text-align: center;
}

.metric + .metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--in4-border);
}

.metric-num {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  font-weight: 800;
  background: linear-gradient(135deg, #6C35FF 0%, #4B20C8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.metric:nth-child(even) .metric-num {
  background: linear-gradient(135deg, #6DBE45 0%, #3E8E2D 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.metric-label {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--in4-text-muted);
}

/* Module cards grid */

/* Biometric integrations */

.text-success {
  color: var(--purple-600);
  margin-left: auto;
  flex-shrink: 0;
}

/* Pricing cards */
.pricing-grid {
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg);
  position: relative;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card.popular {
  border: 2px solid var(--purple-500);
  box-shadow: var(--shadow-purple);
}

/* Third tier takes the brand's second colour, so the row reads as three
   distinct steps (neutral -> purple -> green) instead of two identical white
   cards flanking the purple one. Green stays an accent only: the body is still
   light, so the price and feature list remain the loudest elements. */
.pricing-card.premium {
  border-color: color-mix(in srgb, var(--in4-green) 42%, transparent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--in4-green-soft) 90%, #ffffff) 0%, transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #fbfdf9 100%);
  box-shadow: 0 2px 6px rgba(24, 22, 50, 0.04), 0 18px 44px rgba(62, 142, 45, 0.12);
}

/* accent bar across the top edge */
.pricing-card.premium::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, var(--in4-green) 0%, var(--in4-green-dark) 100%);
}

.pricing-card.premium:hover {
  box-shadow: 0 4px 10px rgba(24, 22, 50, 0.05), 0 26px 58px rgba(62, 142, 45, 0.2);
}

.pricing-card.premium .pricing-head h3 { color: var(--in4-green-dark); }

.pricing-card.premium .pricing-amount .currency,
.pricing-card.premium .pricing-amount .price { color: var(--in4-green-dark); }

/* green tick marks so the list carries the new accent */
.pricing-card.premium .pricing-features .ico { color: var(--in4-green-dark); }

.pricing-card.premium .btn-green {
  color: #14300a;
  box-shadow: 0 10px 24px rgba(62, 142, 45, 0.28);
}

.pricing-card.premium .btn-green:hover {
  box-shadow: 0 14px 30px rgba(62, 142, 45, 0.36);
}

.popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--grad-purple);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-head {
  text-align: center;
  margin-bottom: 24px;
}

.pricing-head h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}

.pricing-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.pricing-amount .currency {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-800);
}

.pricing-amount .price {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 42px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1;
}

.pricing-amount .period {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-body);
}

.pricing-features .ico {
  color: var(--purple-600);
  font-size: 14px;
  width: 18px;
  height: 18px;
}

/* Comparison table */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: var(--bg);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}

.compare-table th,
.compare-table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}

.compare-table th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink-900);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}

.compare-table td {
  color: var(--text-body);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table .text-success {
  margin-left: 0;
}

/* FAQ */
.faq-list {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .ico {
  transition: transform 0.3s var(--ease);
  color: var(--purple-500);
}

.faq-item[open] summary .ico {
  transform: rotate(180deg);
}

.faq-item p {
  padding: 0 22px 18px;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.65;
}

/* Resource cards */
.resource-card {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.resource-thumb {
  height: 160px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 40px;
}

.resource-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resource-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple-600);
  margin-bottom: 10px;
}

.resource-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.resource-body p {
  font-size: 14.5px;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 16px;
}

/* ---- Section divider for alternating sections ---- */
.section-white {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

/* ==========================================================================
   Homepage section rhythm (2026 refresh)
   --------------------------------------------------------------------------
   1 Hero            light lavender / white          (css/hero.css)
   2 Stats           soft neutral stats band
   3 Client logos    white
   4 Platform modules  soft purple-neutral showcase
   5 Integrations    white technical grid
   6 Industries      light lavender
   7 Deployment      white
   8 Demo CTA        soft purple gradient
   ========================================================================== */

/* ---- Section backgrounds ---- */
.section-soft {
  background:
    radial-gradient(60% 46% at 88% 6%, rgba(108, 53, 255, 0.07), transparent 70%),
    radial-gradient(46% 40% at 4% 96%, rgba(109, 190, 69, 0.07), transparent 70%),
    var(--in4-purple-soft);
}

.section-lav {
  background: linear-gradient(180deg, #fbf9ff 0%, var(--in4-purple-soft) 100%);
}

/* White with a faint technical grid — the integrations canvas */
.section-tech {
  background-color: #ffffff;
  background-image:
    linear-gradient(rgba(108, 53, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 53, 255, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}

.section-deploy {
  background: #ffffff;
  color: var(--text-body);
}

.section-deploy .section-title { color: var(--in4-navy); }
.section-deploy .section-lead { color: var(--in4-text-muted); }
.section-deploy .eyebrow { color: var(--in4-purple); }
.section-deploy .eyebrow::before { background: linear-gradient(135deg, #6DBE45, #3E8E2D); }

.section-lead-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 12% 8%, rgba(108, 53, 255, 0.16), transparent 68%),
    radial-gradient(56% 52% at 92% 92%, rgba(109, 190, 69, 0.14), transparent 70%),
    linear-gradient(160deg, #f6f2ff 0%, #efe9ff 55%, #f7f4ff 100%);
}

/* ==========================================================================
   Platform modules — vertical selector + large product panel
   ========================================================================== */
.mod-showcase {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

.mod-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--in4-border);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.mod-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  color: var(--in4-navy);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.mod-tab:hover { background: var(--in4-bg-soft); }

.mod-tab.is-active {
  background: var(--acc-soft, var(--in4-purple-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc, #6C35FF) 26%, transparent);
}

.mod-tab-ico {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--acc, #6C35FF) 12%, #ffffff);
  color: var(--acc, #6C35FF);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.mod-tab.is-active .mod-tab-ico {
  background: var(--acc, #6C35FF);
  color: #ffffff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--acc, #6C35FF) 34%, transparent);
}

.mod-tab-ico .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  width: 1em;
  height: 1em;
  line-height: 1;
}

/* Module tabs that follow an inner product page borrow its colour code:
   the icon becomes a solid plate filled with that page's gradient and a white
   glyph (the icon treatment on the HRMS page), instead of a flat tint.
   Pair with --acc/--acc-soft set to the page's primary and soft hue. */
.mod-tab--grad .mod-tab-ico {
  background: linear-gradient(135deg, #6528f7 0%, #7b4bff 55%, #9779ff 100%);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(101, 40, 247, 0.24);
}

.mod-tab--grad.is-active .mod-tab-ico {
  background: linear-gradient(135deg, #6528f7 0%, #7b4bff 55%, #9779ff 100%);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(101, 40, 247, 0.32);
}

.mod-tab-text { display: block; min-width: 0; }

.mod-tab-name {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--in4-navy);
}

.mod-panels {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--in4-border);
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.04), 0 26px 60px rgba(17, 24, 39, 0.07);
  overflow: hidden;
}

.mod-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  animation: modPanelIn 0.4s var(--ease);
}

/* Every module panel is locked to the height of the vertical selector
   (--nav-h, published from script) so the card and the menu beside it are
   always the same height, whichever module is open. Panels that would
   otherwise be taller — Visitor and Geo Fencing, whose row mock is the
   deepest — yield the space instead of stretching the card. */
.mod-showcase .mod-panel {
  height: var(--nav-h, auto);
  min-height: var(--nav-h, auto);
  overflow: hidden;
}

.mod-showcase .mod-panel > .mod-visual {
  min-height: 0;
  display: flex;
}

/* each module carries its own accent strip — one brand rule, many colours */
.mod-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--acc, #6C35FF), color-mix(in srgb, var(--acc, #6C35FF) 30%, #ffffff));
}

.mod-panel[hidden] { display: none; }

@keyframes modPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Dual-colour module title, the same device the inner product pages use for
   their headings: the accent phrase is filled with the module's own gradient
   (#6528f7 -> #7b4bff -> #9779ff here, the attendance page palette) instead
   of flat ink. Add .mod-title-grad to the h3 of the panel. */

/* ---- Product UI mockup (decorative, drawn in CSS) ---- */
.mod-visual { min-width: 0; }

/* Real product screenshot variant (Core HR & HRIS panel). --nav-h (published
   from script) is the module selector's own height, so this card keeps the
   height it has today. Inside it, the screenshot fills the card edge to edge
   — full width and full height, no gutter, no inner frame — and when the tab
   is opened the view travels down the shot so the lower half is readable.
   The card scrolls vertically if the copy row ever needs more room. */
.mod-showcase .mod-panel--shot {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  align-content: stretch;
  height: var(--nav-h, auto);
  min-height: var(--nav-h, auto);
  gap: 0;                           /* the shot runs edge to edge */
  padding: 4px 0 0;                 /* only the accent strip's own height */
  /* The shot row shrinks to fit (minmax(0, 1fr)), so the card never needs
     to scroll. It must not be a scroll box: the mouse wheel over the image
     would be caught by the card instead of scrolling the page. */
  overflow: hidden;
}

/* 70% copy, 30% action — the only padded row, since the shot is full bleed */
.mod-shot-foot {
  display: grid;
  grid-template-columns: 7fr 3fr;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: clamp(0.9rem, 1.6vw, 1.4rem) clamp(1.25rem, 2.6vw, 2.25rem);
  background: #ffffff;
  border-top: 1px solid var(--in4-border);
}

.mod-shot-foot p {
  margin: 0;
}

.mod-shot-foot .btn {
  justify-self: end;
  text-align: center;
}

.mod-visual--shot {
  position: relative;
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

/* full bleed inside the panel card: no inner frame of its own */
.mod-showcase .mod-visual--shot {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mod-visual--shot img {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* fills the card width AND height */
  object-position: 50% 0;           /* starts on the report at the top */
}

/* The frame is shorter than the screenshot, so opening the Core HR tab
   slides the crop window down the shot over ~14s — no zoom, no scaling,
   just the view travelling from the top of the dashboard to the bottom.
   The animation is bound to .is-active, so every click on the module tab
   replays it. */
@keyframes shotReveal {
  from { object-position: 50% 0; }
  to   { object-position: 50% 100%; }
}

.mod-showcase .mod-panel--shot.is-active .mod-visual--shot img {
  animation: shotReveal 9s cubic-bezier(0.45, 0.05, 0.35, 1) forwards;
}

/* shots wider than the card keep their left edge (the app sidebar) and
   trim the right instead */
@keyframes shotRevealLeft {
  from { object-position: 0 0; }
  to   { object-position: 0 100%; }
}

.mod-visual--left img { object-position: 0 0; }
.mod-showcase .mod-panel--shot.is-active .mod-visual--left img { animation-name: shotRevealLeft; }

@media (prefers-reduced-motion: reduce) {
  .mod-showcase .mod-panel--shot.is-active .mod-visual--shot img { animation: none; }
}

/* Narrow screens: the selector is a horizontal scroller, so there is no menu
   height to match — the card grows freely and the copy stacks. */
@media (max-width: 860px) {
  .mod-showcase .mod-panel--shot {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    overflow-y: visible;
  }

  .mod-visual--shot img { height: auto; }

  .mod-shot-foot { grid-template-columns: 1fr; }

  .mod-shot-foot .btn { justify-self: start; }
}

.mod-visual--shot .shot-bar {
  order: -1;                 /* chrome strip sits above the screenshot */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: var(--in4-bg-soft);
  border-bottom: 1px solid var(--in4-border);
}

.mod-visual--shot .shot-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--in4-border);
}

.mod-visual--shot .shot-bar span:first-child { background: color-mix(in srgb, var(--acc, #6C35FF) 55%, #ffffff); }
.mod-visual--shot .shot-bar span:nth-child(2) { background: color-mix(in srgb, var(--acc, #6C35FF) 28%, #ffffff); }

.mod-visual--shot .shot-bar b {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--in4-text-muted);
}

/* ---- Org chart body (Core HR / HRIS) ---- */

/* ---- Hiring pipeline body (Recruitment) ---- */

/* ---- Course body (Training & Learning) ---- */

/* ==========================================================================
   Biometric integrations — device images + floating UI showcase
   ========================================================================== */
.integrations-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.integrations-copy .info-list { margin-bottom: 0; }

.integrations .info-list .icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.integrations .info-list .icon-badge .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 19px;
  line-height: 1;
  color: #fff;
}

/* ---- right column: biometric showcase — face recognition + fingerprint
   scene with four pop-out cards placed in its empty corners ---- */
.bx-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 600px;
  margin-inline: auto;
}

/* the artwork sits on white; multiply lets the section's grid show through */

/* ---- scan indicators over the artwork ---- */
.bx-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bx-face-box {
  fill: none;
  stroke: #7DF9FF;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(34, 199, 214, 0.9));
  animation: bxGlow 2.4s ease-in-out infinite;
}

@keyframes bxGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.bx-face-sweep { animation: bxSweep 2.6s ease-in-out infinite alternate; }

@keyframes bxSweep {
  from { transform: translateY(284px); }
  to   { transform: translateY(496px); }
}

.bx-ripple {
  fill: none;
  stroke: var(--in4-green);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: bxRipple 2.4s ease-out infinite;
}

.bx-ripple:nth-of-type(2) { animation-delay: 0.8s; }
.bx-ripple:nth-of-type(3) { animation-delay: 1.6s; }

@keyframes bxRipple {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

.bx-finger-core {
  fill: #A7F36B;
  filter: drop-shadow(0 0 8px rgba(109, 190, 69, 0.95));
  animation: bxGlow 1.2s ease-in-out infinite;
}

@keyframes bxFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* ---- pop-out cards ---- */
.bx-cards { display: contents; }

.bx-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--in4-border);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.14);
  animation: bxFloat 7s ease-in-out infinite;
}

.bx-card--face   { top: 2%; left: 0; }
.bx-card--finger { bottom: 2%; right: 0; animation-delay: -1.2s; }

.bx-card-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #6C35FF, #8B5CF6);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}

.bx-card-ico.is-green { background: linear-gradient(135deg, #6DBE45, #3E8E2D); }
.bx-card-ico.is-blue  { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.bx-card-ico.is-amber { background: linear-gradient(135deg, #F59E0B, #EA580C); }
.bx-card-ico .ico { width: 1em; height: 1em; }

.bx-mini { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.bx-mini b {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-800);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.bx-mini em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.bx-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(109, 190, 69, 0.14);
  color: var(--in4-green-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.bx-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: bxPulse 1.8s ease-out infinite;
}

@keyframes bxPulse {
  0% { box-shadow: 0 0 0 0 rgba(109, 190, 69, 0.55); }
  100% { box-shadow: 0 0 0 7px rgba(109, 190, 69, 0); }
}

/* ---- left column: copy rhythm ---- */
.bio-note { margin-top: 20px; }

.bio-list { margin: 24px 0 0; }
.bio-list .icon-badge { box-shadow: 0 8px 18px rgba(17, 24, 39, 0.1); }

/* ==========================================================================
   Biometric product range — four box banners linking to in4solution.com
   ========================================================================== */
.pr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.pr-card {
  --acc: var(--in4-purple);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--in4-border);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

/* accent bar along the top edge */
.pr-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 4px;
  background: var(--acc);
}

.pr-card:hover,
.pr-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--acc) 35%, var(--in4-border));
  box-shadow: 0 24px 50px color-mix(in srgb, var(--acc) 18%, rgba(17, 24, 39, 0.08));
}

.pr-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 45%, transparent); outline-offset: 3px; }

.pr-art {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--acc) 6%, #ffffff);
}

/* soft shade behind the hover button so it reads on any photo */
.pr-art::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(15, 14, 32, 0.55));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.pr-card:hover .pr-art::after,
.pr-card:focus-visible .pr-art::after { opacity: 1; }

.pr-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.pr-card:hover .pr-art img { transform: scale(1.05); }

.pr-body {
  position: relative;
  flex: 1;
  padding: 18px 20px 20px;
}

.pr-body h3 {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--ink-800);
}

/* hidden until hover/focus; sits over the bottom of the image */
.pr-btn {
  position: absolute;
  left: 20px;
  bottom: calc(100% + 16px);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--acc);
  box-shadow: 0 10px 24px rgba(15, 14, 32, 0.25);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #ffffff;
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.3s var(--ease), translate 0.3s var(--ease);
}

.pr-btn .ico { width: 1em; height: 1em; font-size: 12px; transition: transform 0.3s var(--ease); }

.pr-card:hover .pr-btn,
.pr-card:focus-visible .pr-btn { opacity: 1; translate: 0 0; }
.pr-card:hover .pr-btn .ico { transform: translateX(3px); }

/* touch screens have no hover, so keep the button showing there */
@media (hover: none) {
  .pr-btn { opacity: 1; translate: 0 0; }
  .pr-art::after { opacity: 1; }
}

.pr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (prefers-reduced-motion: reduce) {
  .pr-card,
  .pr-art img,
  .pr-art::after,
  .pr-btn,
  .pr-btn .ico { transition: none; }
  .pr-card:hover,
  .pr-card:focus-visible,
  .pr-card:hover .pr-art img { transform: none; }
}

/* ==========================================================================
   Industries — pill selector + large content panel
   ========================================================================== */

/* ==========================================================================
   Deployment — dark contrast section
   ========================================================================== */
.deployment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.deployment-points {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.deployment-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-800);
}

.deployment-points .ico {
  color: var(--in4-green);
  font-size: 15px;
  margin-top: 3px;
  flex-shrink: 0;
}

.deployment-diagram {
  position: relative;
  background:
    radial-gradient(90% 70% at 80% 0%, rgba(108, 53, 255, 0.07), transparent 70%),
    #ffffff;
  border: 1px solid var(--in4-border);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid;
  gap: 14px;
}

.deployment-node {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid var(--in4-border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}

.deployment-node:hover {
  transform: translateY(-4px);
  background: var(--in4-bg-soft);
  border-color: color-mix(in srgb, var(--in4-purple) 24%, var(--in4-border));
}

.deployment-node .icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
}

.deployment-node .icon-badge .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 19px;
  line-height: 1;
  color: #fff;
}

.deployment-node strong {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  color: var(--in4-navy);
}

.deployment-node span {
  font-size: 13px;
  color: var(--in4-text-muted);
}

/* availability chip — green is used for status only */
.deployment-node .deployment-state {
  margin-left: auto;
  align-self: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--in4-green-dark);
  background: rgba(109, 190, 69, 0.12);
  border: 1px solid rgba(109, 190, 69, 0.32);
  white-space: nowrap;
}

/* ==========================================================================
   Demo CTA — vertical 3-step timeline beside the form
   ========================================================================== */
#lead .lead-grid {
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

#lead .eyebrow { color: var(--in4-purple-dark); }

.step-flow--timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  /* reserved gutter so the numbered circles hang left of the text, letting
     every step's copy line up with the eyebrow, title and lead above it */
  padding-left: 46px;
}

.step-flow--timeline .step {
  display: block;
  padding: 0 0 26px;
  background: transparent;
  border: 0;
  margin-left: 0;
  box-shadow: none;
  position: relative;
}

/* the vertical rail, drawn inside the reserved gutter through the circles */
.step-flow--timeline .step::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: rgba(108, 53, 255, 0.18);
}

.step-flow--timeline .step:last-child {
  padding-bottom: 0;
}

.step-flow--timeline .step:last-child::before {
  display: none;
}

.step-flow--timeline .step-num {
  position: absolute;
  left: -46px;
  top: 0;
  margin: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--in4-purple);
  color: var(--in4-purple-dark);
  font-size: 13px;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(108, 53, 255, 0.16);
}

.step-flow--timeline .step:last-child .step-num {
  background: linear-gradient(135deg, #6DBE45, #3E8E2D);
  border-color: transparent;
  color: #ffffff;
}

.step-flow--timeline .step h3 {
  margin: 3px 0 5px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--in4-navy);
}

.step-flow--timeline .step p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--in4-text-muted);
  max-width: 40ch;
}

/* Left column of the demo section: align with the card and keep the
   intro copy on a comfortable measure. */
#lead .lead-grid { align-items: center; }

#lead .section-lead { max-width: 46ch; }

#lead .step-flow--timeline { margin-top: 30px; }

#lead .lead-card {
  border-radius: 24px;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.05), 0 30px 70px rgba(75, 32, 200, 0.14);
  border-color: rgba(108, 53, 255, 0.16);
  /* trimmed vertical footprint */
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

/* ---- Demo form: tighten vertical rhythm (homepage only) ---- */
#lead .form-grid { gap: 12px 14px; }

#lead .form-field { gap: 5px; }

#lead .form-input { padding: 10px 14px; }

#lead textarea.form-input { min-height: 76px; }

/* an empty validation slot reserves no space until it has a message */
#lead .form-error { min-height: 0; margin-top: 2px; }
#lead .form-error:empty { display: none; }

#lead .form-note { margin-top: 12px; }

/* ==========================================================================
   Smart Workforce Technology — hub-and-spoke capability showcase
   ========================================================================== */
.tech-hub-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 7vw, 6.25rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.25rem);
  background-color: #F8F7FC;
  background-image:
    linear-gradient(rgba(108, 53, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 53, 255, 0.032) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* soft blurred blobs bleeding in from the edges */
.tech-hub-section::before,
.tech-hub-section::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.tech-hub-section::before {
  top: -170px;
  left: -150px;
  background: radial-gradient(closest-side, rgba(108, 53, 255, 0.16), transparent 72%);
}

.tech-hub-section::after {
  bottom: -200px;
  right: -160px;
  background: radial-gradient(closest-side, rgba(34, 199, 214, 0.14), transparent 72%);
}

.tech-hub-section .container { position: relative; z-index: 1; }

.tech-hub-section .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }


/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .metrics-strip .metric:nth-child(3)::before,
  .metrics-strip .metric:nth-child(3)::after {
    display: none;
  }

  .metrics-strip .metric:nth-child(3),
  .metrics-strip .metric:nth-child(4) {
    border-top: 1px solid var(--in4-border);
  }

  .mod-showcase { grid-template-columns: minmax(190px, 230px) 1fr; }
  .mod-panel { grid-template-columns: 1fr; gap: 1.5rem; }
  
  /* stacked panels need more room than the selector: keep the height match
     but let the card scroll rather than clip its content */
  .mod-showcase .mod-panel { overflow-y: auto; }
  .mod-showcase .mod-panel--shot { overflow: hidden; }
  .integrations-layout { grid-template-columns: 1fr; }
}

/* With eleven modules the vertical selector outgrows the panel beside it, so
   above the mobile breakpoint it scrolls in place (and keeps the active tab
   in view — see initTabs) instead of stretching the whole section. */
@media (min-width: 861px) {
  .mod-nav {
    max-height: clamp(430px, 68vh, 660px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #ddd3fb transparent;
    padding-right: 8px;
  }

  .mod-nav::-webkit-scrollbar { width: 6px; }
  .mod-nav::-webkit-scrollbar-track { background: transparent; }
  .mod-nav::-webkit-scrollbar-thumb {
    background: #ddd3fb;
    border-radius: 999px;
  }
}

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

  /* The card grows to fit here, so it must not be a scroll box of its own:
     otherwise a swipe that starts on the screenshot is trapped inside it
     (overscroll-behavior: contain) and the page will not scroll. */
  .mod-showcase .mod-panel,
  .mod-showcase .mod-panel--shot {
    overflow: visible;
    overscroll-behavior: auto;
  }

  /* the selector becomes a compact horizontal scroller */
  .mod-nav {
    flex-direction: row;
    /* CRITICAL: .mod-nav is a grid item, and grid items default to
       min-width:auto, which makes the nav grow to the combined width of all
       eight tabs instead of scrolling. Without this, overflow-x never
       engages and the whole page scrolls sideways instead. */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* a thin visible scrollbar so mouse / trackpad users can scroll too */
    scrollbar-width: thin;
    scrollbar-color: #ddd3fb transparent;
    /* room for the right-edge fade so the last tab is not flush */
    padding-right: 20px;
    cursor: grab;
  }

  .mod-nav.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .mod-nav.is-dragging .mod-tab { pointer-events: none; }

  .mod-nav::-webkit-scrollbar { height: 4px; }
  .mod-nav::-webkit-scrollbar-track { background: transparent; }
  .mod-nav::-webkit-scrollbar-thumb { background: #ddd3fb; border-radius: 999px; }

  .mod-tab {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
    padding: 10px 14px;
    /* keep each tab a single compact pill instead of wrapping internally */
    white-space: nowrap;
  }

  .mod-tab-name { white-space: nowrap; }

  /* fade hint on the trailing edge so it reads as scrollable */
  .mod-showcase { position: relative; }

  .mod-showcase::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
    pointer-events: none;
  }

  .deployment-grid { grid-template-columns: 1fr; }
  #lead .lead-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .metrics-strip { grid-template-columns: 1fr; }

  .tech-hub-section::before,
  .tech-hub-section::after { width: 300px; height: 300px; filter: blur(56px); }

  .metrics-strip .metric::before { display: none; }
  .metrics-strip .metric { border-top: 1px solid var(--in4-border); }
  .metrics-strip .metric:first-child { border-top: 0; }

  .metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
    padding: 16px 4px;
    gap: 16px;
  }

  .metric-num { font-size: 2.1rem; }
  .metric-label { margin-top: 0; }

  .marquee-group { gap: 40px; padding-right: 40px; }
  .client-logo { height: 30px; }

  /* the demo form returns to a single column on small screens */
  #lead .lead-grid { grid-template-columns: 1fr; }

        /* biometric showcase: the pop-outs settle into a neat stack under the
     image so nothing covers the face */
  .bx-cards { display: grid; gap: 10px; margin-top: -4%; position: relative; }
  .bx-card { position: relative; inset: auto; width: auto; animation: none; box-shadow: 0 8px 20px rgba(17, 24, 39, 0.07); }
      .bio-list .info-list, .bio-list { gap: 14px; }
  .integrations-copy .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
  .integrations-layout > * { min-width: 0; }

  .deployment-node .deployment-state { display: none; }
}

@media (max-width: 560px) {
  .step-flow--timeline { padding-left: 38px; }
  .step-flow--timeline .step { padding-bottom: 22px; }
  .step-flow--timeline .step-num { left: -38px; width: 28px; height: 28px; font-size: 12px; }
  .step-flow--timeline .step::before { left: -25px; top: 28px; }
}

/* ---- Reduced motion: no auto-advance loops, no floating ---- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .mod-panel { animation: none; }
  .bx-card,
.bx-face-box,
.bx-face-sweep,
.bx-ripple,
.bx-finger-core,
.bx-pulse { animation: none; }
  .ob-rail::after,
  .ob-num,
  .ob-ico { animation: none !important; }
  .ob-rail::after { transform: scaleX(1); }
}

/* ==========================================================================
   Onboarding — "From Setup to Go-Live in 3 Simple Steps"
   --------------------------------------------------------------------------
   Layout: a connected strip of pastel step headers sits in one aligned row
   (chevron tail → next header), and the icon + copy row underneath follows a
   gentle zig — the middle step drops lower than its neighbours, with a longer
   dashed drop-line from its header. Two transform layers on every step would
   be noise, so the header row stays rigid and only the body offsets.

   Colour: one hue per step, drawn from the site's own accent set so the
   section reads as a single system rather than three random cards —
   01 deep green, 02 violet, 03 teal. Step 3 uses teal instead of the IN4
   purple so "Training & Go-Live" reads as its own destination and the row
   ends on a cool, calm note. Surfaces: white section, one lavender card.
   ========================================================================== */
.onboarding {
  --ob-teal: #22c7d6;
  background: #ffffff;
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.onboarding .section-head { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.onboarding .section-lead { max-width: 58ch; margin-inline: auto; }

/* ---- the large soft container ------------------------------------------- */
.ob-card {
  position: relative;
  padding: clamp(1.75rem, 3.2vw, 3rem) clamp(1.25rem, 3vw, 3.25rem)
    clamp(1.75rem, 3vw, 2.75rem);
  background: linear-gradient(158deg, #fbfaff 0%, #f5f2fe 42%, #ffffff 100%);
  border: 1px solid rgba(108, 53, 255, 0.11);
  border-radius: 30px;
  box-shadow:
    0 1px 3px rgba(24, 22, 50, 0.04),
    0 26px 60px rgba(75, 32, 200, 0.13);
  overflow: hidden;
}

/* inner top highlight — sells the gradient surface as glass, not a flat fill */
.ob-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.95) 30%,
    rgba(255, 255, 255, 0.95) 70%,
    transparent 100%
  );
}

/* brand hairline sitting just under the top edge */
.ob-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--in4-green) 0%,
    #6c35ff 50%,
    var(--ob-teal) 100%
  );
  opacity: 0.85;
}

/* ---- the connector rail behind the headers (sweeps once) ---------------- */
.ob-rail {
  position: absolute;
  z-index: 0;
  top: calc(clamp(1.75rem, 3.2vw, 3rem) + 27px);
  left: clamp(1.25rem, 3vw, 3.25rem);
  right: clamp(1.25rem, 3vw, 3.25rem);
  height: 2px;
  border-radius: 2px;
  background: rgba(108, 53, 255, 0.07);
  overflow: hidden;
}

.ob-rail::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--in4-green) 0%,
    #6c35ff 50%,
    var(--ob-teal) 100%
  );
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0.5;
}

.ob-card.is-visible .ob-rail::after { animation: obRail 1.5s var(--ease) 0.35s both; }

@keyframes obRail {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- the 3-step flow ---------------------------------------------------- */
.ob-flow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-step { min-width: 0; }

/* pastel header block, chevron-linked to the next step */
.ob-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 15px;
  background: var(--acc-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 16%, transparent);
}

/* the connector tail — a rotated square so it reads as part of the block */
.ob-step:not(:last-child) .ob-head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -11px;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: var(--acc-soft);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 4px;
}

.ob-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--acc);
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--acc) 28%, transparent);
}

/* one short, gentle emphasis — not a loop */
.ob-step.is-visible .ob-num { animation: obPulse 2.6s var(--ease) 0.5s 2 both; }

@keyframes obPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.07); }
}

.ob-title {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(0.98rem, 0.92rem + 0.22vw, 1.125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.28;
  color: var(--in4-navy);
}

/* ---- icon + copy row: the zig ------------------------------------------
   Steps 1 and 3 sit on one baseline, step 2 drops 38px below them. The dashed
   drop-line from each header stretches to match, so the offset reads as part
   of the flow instead of a misalignment. */
.ob-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 30px 8px 0;
  text-align: center;
}

.ob-step:nth-child(2) .ob-body { padding-top: 68px; }

.ob-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    180deg,
    color-mix(in srgb, var(--acc) 42%, transparent) 0 4px,
    transparent 4px 9px
  );
  transform-origin: top center;
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

.ob-step:nth-child(2) .ob-body::before { height: 52px; }

.ob-step.is-visible .ob-body::before {
  animation: obDrop 0.5s var(--ease) 0.28s both;
}

@keyframes obDrop {
  from { opacity: 0; transform: translateX(-50%) scaleY(0); }
  to { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* deliberately no card or border around each item */
.ob-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--acc-soft);
  color: var(--acc);
  font-size: 27px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* inner dashed ring keeps the circle from reading as a flat disc */
.ob-ico::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--acc) 32%, transparent);
}

.ob-ico .ico { position: relative; z-index: 1; }

.ob-step.is-visible .ob-ico { animation: obPop 0.65s var(--ease) 0.15s both; }

@keyframes obPop {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}

.ob-step:hover .ob-ico {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--acc) 20%, transparent);
}

.ob-body p {
  margin: 0;
  max-width: 32ch;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--in4-text-muted);
}

/* ---- single CTA, centred ----------------------------------------------- */
.ob-cta {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 3.5vw, 3rem);
  text-align: center;
}

.ob-cta .btn {
  background: linear-gradient(135deg, #6528f7 0%, #7b4bff 55%, #9779ff 100%);
  box-shadow: 0 14px 30px rgba(101, 40, 247, 0.26);
}

.ob-cta .btn:hover { box-shadow: 0 18px 40px rgba(101, 40, 247, 0.34); }

/* ==========================================================================
   Onboarding — responsive
   --------------------------------------------------------------------------
   <= 1100px the three-card chevron strip no longer fits (each column falls
              under ~260px and the titles start wrapping), so it becomes a
              real vertical timeline: left rail, coloured node per step.
   ========================================================================== */
@media (max-width: 1100px) {
  .ob-card { border-radius: 26px; }

  /* the horizontal rail is meaningless once stacked */
  .ob-rail { display: none; }

  .ob-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
    padding-left: 34px;
  }

  /* left connector line running the full flow */
  .ob-flow::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(
      180deg,
      var(--in4-green) 0%,
      #6c35ff 50%,
      var(--ob-teal) 100%
    );
    opacity: 0.3;
  }

  .ob-step { position: relative; }

  .ob-head { padding: 11px 16px; gap: 11px; }

  /* the node that rides the connector line */
  .ob-head::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -28px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--acc);
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px #ffffff, 0 6px 14px color-mix(in srgb, var(--acc) 32%, transparent);
  }

  /* no chevron tail once stacked */
  .ob-step .ob-head::after { display: none; }

  .ob-num { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }

  /* zig and drop-line both flatten on a vertical timeline */
  .ob-body { padding-top: 16px; }
  .ob-step:nth-child(2) .ob-body { padding-top: 16px; }
  .ob-body::before,
  .ob-step:nth-child(2) .ob-body::before { display: none; }

  .ob-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
  }

  .ob-ico { width: 54px; height: 54px; font-size: 21px; flex: 0 0 auto; }

  .ob-ico::after { inset: 5px; }

  .ob-body p { max-width: 46ch; }
}

@media (max-width: 560px) {
  .ob-card { padding: 1.5rem 1.15rem 1.85rem; border-radius: 22px; }
  .ob-flow { padding-left: 28px; gap: 22px; }
  .ob-flow::before { left: 13px; }
  .ob-head::before { left: -24px; width: 12px; height: 12px; }
  .ob-title { font-size: 1rem; }
  .ob-body p { font-size: 0.9rem; }
  .ob-cta .btn { width: 100%; justify-content: center; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ob-rail::after,
  .ob-num,
  .ob-ico,
  .ob-body::before { animation: none !important; }
  .ob-rail::after { transform: scaleX(1); }
  .ob-body::before { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* ==========================================================================
   Industries — "Built for Diverse Operating Environments"
   Dual-colour accent phrase + the tapered accent rule used by the product
   pages, and a spacing pass so the pill rail and the panel below it breathe
   at every width. Scoped to .industries.
   ========================================================================== */

.industries .section-title::after {
  content: "";
  display: block;
  width: 148px;
  max-width: 42%;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: #6C35FF;
}

/* the pill rail and the panel it drives get real separation */

/* ==========================================================================
   Tech hub — "Everything Connected. Everything Intelligent."
   The accent phrase carries the section's own cyan-blue ramp (#0891B2, the
   old flat a8) instead of one solid colour, plus the tapered accent rule
   used across the page's other section heads.
   ========================================================================== */
.tech-hub-section .section-title em.tech-dual {
  background: none;
  color: #F97316;
  font-style: normal;
}

.tech-hub-section .section-title { position: relative; }

.tech-hub-section .section-title::after {
  content: "";
  display: block;
  width: 148px;
  max-width: 42%;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: #6C35FF;
}

/* ==========================================================================
   Biometric integrations — "Biometric Mastery"
   Solid brand green accent phrase plus the tapered accent rule used by the
   page's other section heads. Scoped to the integrations section.
   ========================================================================== */
.integrations .section-title em.bio-dual {
  background: none;
  color: var(--in4-green, #6DBE45);
  font-style: normal;
}

.integrations .section-title { position: relative; }

.integrations .section-title::after {
  content: "";
  display: block;
  width: 148px;
  max-width: 42%;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: #6C35FF;
}

/* ==========================================================================
   Platform modules — "One Platform."
   Solid pink accent phrase plus the tapered accent rule used across the
   page's other section heads. Scoped to the products section.
   ========================================================================== */
#products .section-title em.plat-dual {
  background: none;
  color: #EC4899;
  font-style: normal;
}

#products .section-title { position: relative; }

#products .section-title::after {
  content: "";
  display: block;
  width: 148px;
  max-width: 42%;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: #6C35FF;
}

/* ==========================================================================
   Metrics strip ("By the numbers") — mobile
   On phones the four counters sit in a 2x2 block. The desktop type scale is
   far too large there (a 2.3rem minimum made "1000+" and "4-hour" crowd or
   overflow their cell), the row/column rules needed to be redrawn for two
   columns, and the labels were left tight under the number. This resets the
   scale, tidies the dividers and gives the cells real breathing room.
   ========================================================================== */
@media (max-width: 860px) {
  .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .metric {
    padding: clamp(1.35rem, 4.5vw, 1.75rem) clamp(0.5rem, 2.5vw, 1rem);
    min-width: 0;
  }

  /* number: smaller, and allowed to shrink rather than push the cell wide */
  .metric-num {
    font-size: clamp(1.85rem, 8.2vw, 2.35rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    white-space: nowrap;
  }

  .metric-label {
    margin-top: 6px;
    font-size: clamp(11.5px, 3.2vw, 12.5px);
    line-height: 1.35;
    letter-spacing: 0.01em;
  }
}

/* Vertical rules only between the two columns; the horizontal rule between
   the rows is drawn by the cell's own top border. */
@media (max-width: 860px) {
  .metric::before { display: none; }

  .metric:nth-child(even)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--in4-border);
  }

  .metric:nth-child(3),
  .metric:nth-child(4) { border-top: 1px solid var(--in4-border); }
}

/* Very small phones: the 2x2 block is kept, only tightened a little further
   so the numbers still sit comfortably in each cell. */
@media (max-width: 400px) {
  .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .metric { padding: 1.1rem 0.4rem; }

  .metric-num { font-size: clamp(1.6rem, 9vw, 1.95rem); }

  .metric-label { font-size: 11px; margin-top: 4px; }
}

/* ---- Metrics: supporting line under each counter label ------------------
   Each number now carries a short sentence, so it needs a smaller type size
   than the label and a slightly wider measure to stay on one or two lines. */
.metric-note {
  display: block;
  max-width: 24ch;
  margin: 8px auto 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--in4-text-muted);
}

@media (max-width: 860px) {
  .metric-note {
    max-width: 22ch;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.45;
  }
}

@media (max-width: 400px) {
  .metric-note { font-size: 10.5px; margin-top: 4px; }
}

/* ---- Metrics: alignment pass (all widths, strongest effect on mobile) ----
   Each counter is a centred flex column, so the number, label and note share
   one middle axis and sit on the same baseline whether the note wraps to one
   line or two. Cells get a shared minimum height so the two columns of the
   2x2 mobile block line up instead of the shorter one riding high. */
.metrics-strip { align-items: stretch; }

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.metric-num,
.metric-label,
.metric-note {
  align-self: center;
  max-width: 100%;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .metric { min-height: 132px; }
  .metric-num { margin-bottom: 0; }
  .metric-label { margin-top: 6px; }
}

@media (max-width: 400px) {
  .metric { min-height: 118px; }
}

/* ---- Metrics: hard centre on every mobile width -------------------------
   Belt-and-braces for the 2x2 block: every text line is explicitly centred
   and allowed to use the full cell width, so nothing drifts left when a
   label or note wraps. */
@media (max-width: 860px) {
  .metrics-strip {
    align-items: stretch;
    justify-items: stretch;
  }

  .metric {
    text-align: center;
    align-items: center;
  }

  .metric-num,
  .metric-label,
  .metric-note {
    display: block;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-indent: 0;
  }

  .metric-note { padding: 0 6px; }
}

/* ---- biometric showcase, dual concept: a face scan panel and a
   fingerprint panel side by side (staggered) on white, an icon bar under
   them and two pop-outs. Every offset is a % of the stage so it scales. ---- */
.bx-dual { position: relative; aspect-ratio: 1 / 0.76; }

.bx-pane {
  position: absolute;
  width: 48.5%;
  margin: 0;
  overflow: hidden;
  border: 5px solid #ffffff;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 26px 56px rgba(75, 32, 200, 0.14), 0 8px 20px rgba(17, 24, 39, 0.08);
}
.bx-pane img { display: block; width: 100%; height: auto; border-radius: 19px; }
.bx-pane--face   { top: 0; left: 0; }
.bx-pane--face img { aspect-ratio: 670 / 830; }
.bx-pane--finger { top: 15.8%; right: 0; }
.bx-pane--finger img { aspect-ratio: 680 / 710; }

.bx-pane-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: rgba(15, 14, 32, 0.72);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
}
.bx-pane-tag .ico { width: 1em; height: 1em; color: #7DF9FF; }
.bx-pane-tag.is-green .ico { color: #A7F36B; }
.bx-pane--finger .bx-pane-tag { left: auto; right: 12px; }

.bx-pane .bx-face-sweep { animation-name: bxSweepFace; }
@keyframes bxSweepFace {
  from { transform: translateY(175px); }
  to   { transform: translateY(445px); }
}

.bx-iconbar {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 10px 8px;
  list-style: none;
  border: 1px solid var(--in4-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.12);
}
.bx-iconbar li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-800);
  text-align: center;
  line-height: 1.2;
}
.bx-iconbar .bx-card-ico { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }

/* pop-outs sit in the two empty corners */
.bx-stage .bx-card--face   { top: 63%; left: 0; right: auto; bottom: auto; z-index: 3; }
.bx-stage .bx-card--finger { top: 0; right: 0; left: auto; bottom: auto; padding: 6px 14px 6px 6px; animation-delay: -3.2s; }
.bx-device { width: 50px; height: 50px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(17, 24, 39, 0.18)); }

@media (max-width: 640px) {
  .bx-stage .bx-cards { margin-top: 14px; }
  .bx-stage .bx-card--face, .bx-stage .bx-card--finger { inset: auto; }
  .bx-card--finger .bx-pill { margin-left: auto; }
  .bx-pane { border-width: 3px; border-radius: 16px; }
  .bx-pane img { border-radius: 13px; }
  .bx-pane-tag { top: 7px; left: 7px; padding: 3px 8px 3px 7px; font-size: 9.5px; }
  .bx-pane--finger .bx-pane-tag { right: 7px; }
  .bx-iconbar { left: 3%; right: 3%; padding: 8px 4px; }
  .bx-iconbar li { font-size: 9.5px; gap: 4px; }
  .bx-iconbar .bx-card-ico { width: 26px; height: 26px; font-size: 11px; }
}

/* Entrance Control and Flap Barrier cards: two product shots cross-fading in turn */
.pr-art--slides img + img {
  position: absolute;
  inset: 0;
  animation: prSlide 8s ease-in-out infinite;
}
@keyframes prSlide {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-art--slides img + img { animation: none; opacity: 0; }
}

/* Speed Face card: three product shots in turn (s1 -> s2 -> s3), ~4s each */
.pr-art--slides3 img + img { position: absolute; inset: 0; opacity: 0; }
.pr-art--slides3 img:nth-child(2) { animation: prSlide3a 12s ease-in-out infinite; }
.pr-art--slides3 img:nth-child(3) { animation: prSlide3b 12s ease-in-out infinite; }
@keyframes prSlide3a {
  0%, 28% { opacity: 0; }
  33%, 61% { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes prSlide3b {
  0%, 61% { opacity: 0; }
  66%, 95% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-art--slides3 img + img { animation: none; }
}

/* ==========================================================================
   Smart Workforce Technology — bento grid: a tall platform tile with the
   photo on the left, six compact capability tiles (2 x 3) on the right.
   ========================================================================== */
.tb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tb-hero {
  position: relative;
  grid-row: 1 / -1;
  min-height: 380px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(75, 32, 200, 0.16);
}
.tb-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.tb-hero:hover img { transform: scale(1.05); }
.tb-hero::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(24, 12, 72, 0.78));
}
.tb-hero-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
}
.tb-hero-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #6C35FF;
  box-shadow: 0 8px 20px rgba(108, 53, 255, 0.45);
  font-size: 18px;
}
.tb-hero-mark .ico { width: 1em; height: 1em; }
.tb-hero-copy strong { display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 19px; line-height: 1.25; }
.tb-hero-copy span:not(.tb-hero-mark) { display: block; font-size: 13.5px; opacity: 0.85; }

.tb-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--in4-border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.05);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tb-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--acc) 18%, transparent);
}
.tb-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  background: color-mix(in srgb, var(--acc) 12%, #ffffff);
  color: var(--acc);
  font-size: 19px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.tb-ico .ico { width: 1em; height: 1em; }
.tb-tile:hover .tb-ico { background: var(--acc); color: #ffffff; }
.tb-tile h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.3; }
.tb-tile p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }

@media (max-width: 1023px) {
  .tb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .tb-hero { grid-row: auto; grid-column: 1 / -1; min-height: 300px; }
}
@media (max-width: 560px) {
  .tb-grid { grid-template-columns: 1fr; gap: 12px; }
  .tb-hero { min-height: 240px; }
  .tb-tile { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-hero img, .tb-tile { transition: none; }
}

/* Pricing: add-on modules strip and the module-choice note under the plans */
.pricing-addon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: 16px 22px;
  border: 1px solid rgba(108, 53, 255, 0.22);
  border-radius: 16px;
  background: #f4f0ff;
  text-align: center;
}
.pricing-addon-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: #6C35FF;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pricing-addon p { margin: 0; font-weight: 600; color: #4b20c8; }
.pricing-note {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 14.5px;
  color: var(--text-muted);
  text-align: center;
}
.pricing-note strong { color: var(--ink-800); }

/* Mobile App section (shared with the HRMS layout in hrms.css): purple accent
   phrase and the page's solid title rule */
#mobile-app .section-title em.app-dual { font-style: normal; color: #6C35FF; }
#mobile-app .section-title::after {
  content: "";
  display: block;
  width: 148px;
  max-width: 42%;
  height: 3px;
  margin: 16px 0 0;
  border-radius: 999px;
  background: #6C35FF;
}