/* ─────────────────────────────────────────────────────────
   Subpage system — features, industries, compare, integrations,
   docs, API, changelog, status
   ───────────────────────────────────────────────────────── */

:root {
  --sp-coral: var(--he-coral, #FF5A36);
  --sp-ink: var(--he-ink, #0E1018);
  --sp-soft: var(--he-ink-soft, #6B6E78);
  --sp-rule: var(--he-rule, rgba(14,16,24,0.08));
  --sp-rule-2: rgba(14,16,24,0.14);
  --sp-bg: #FAFAF7;
  --sp-bg2: #F2F1EC;
  --sp-shadow: 0 18px 50px -18px rgba(14,16,24,0.18);
}

/* ─── Hero ─────────────────────────────────────────────── */
.sp-hero {
  position: relative; background: var(--sp-bg);
  padding: 56px 0 60px; overflow: hidden; isolation: isolate;
  border-bottom: 1px solid var(--sp-rule);
}
.sp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 55% 50% at 12% 6%, rgba(255,90,54,0.10), transparent 62%),
    radial-gradient(ellipse 50% 50% at 90% 26%, rgba(199,168,255,0.13), transparent 62%);
}
.sp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(14,16,24,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,16,24,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 75% 70% at 40% 30%, black 25%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 40% 30%, black 25%, transparent 88%);
}
.sp-hero .wrap, .sp-sec .wrap, .sp-cta .wrap {
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px);
}
.sp-crumb {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--sp-soft); margin-bottom: 20px;
}
.sp-crumb a { color: var(--sp-soft); text-decoration: none; }
.sp-crumb a:hover { color: var(--sp-coral); }
.sp-crumb b { color: var(--sp-ink); font-weight: 500; }
.sp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: #fff;
  border: 1px solid var(--sp-rule); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  color: var(--sp-ink);
}
.sp-hero h1 {
  margin: 18px 0 16px; max-width: 780px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05; letter-spacing: -0.035em; font-weight: 500; color: var(--sp-ink);
}
.sp-hero h1 em { font-family: var(--font-display-serif); font-style: italic; font-weight: 400; color: var(--sp-coral); }
.sp-hero .lede { font-size: 16.5px; line-height: 1.6; color: var(--sp-soft); max-width: 600px; margin: 0 0 26px; }
.sp-hero .lede code, .sp-note code, .sp-step code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: color-mix(in srgb, var(--sp-coral) 10%, white);
  color: var(--sp-coral); padding: 1px 6px; border-radius: 5px;
}
.sp-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── Section ──────────────────────────────────────────── */
.sp-sec { background: var(--sp-bg); padding: 64px 0; border-bottom: 1px solid var(--sp-rule); }
.sp-sec.alt { background: #fff; }
.sp-sec.dark { background: var(--sp-ink); color: #fff; border-bottom: none; }
.sp-head { max-width: 680px; margin: 0 0 34px; }
.sp-head.center { margin: 0 auto 34px; text-align: center; }
.sp-head .kicker {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-coral); margin-bottom: 11px;
}
.sp-head h2 {
  font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1; letter-spacing: -0.028em; font-weight: 500; color: inherit; margin: 0 0 12px;
}
.sp-head h2 em { font-family: var(--font-display-serif); font-style: italic; font-weight: 400; color: var(--sp-coral); }
.sp-head p { font-size: 15px; line-height: 1.6; color: var(--sp-soft); margin: 0; }
.sp-sec.dark .sp-head p { color: rgba(255,255,255,0.65); }
.sp-sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--sp-soft); margin-bottom: 12px;
}

/* ─── Grids & cards ────────────────────────────────────── */
.sp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.sp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sp-card {
  background: #fff; border: 1px solid var(--sp-rule); border-radius: 15px;
  padding: 20px; display: flex; flex-direction: column; gap: 7px;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.sp-card:hover {
  border-color: var(--sp-coral); transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--sp-coral) 45%, transparent);
}
.sp-sec.alt .sp-card:not(.on) { background: var(--sp-bg); }
.sp-card .sc-t { font-family: var(--font-display); font-size: 15.5px; font-weight: 500; letter-spacing: -0.018em; color: var(--sp-ink); }
.sp-card .sc-d { font-size: 12.5px; line-height: 1.5; color: var(--sp-soft); }
.sp-card .sc-tag {
  margin-top: auto; padding-top: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sp-coral);
}
.sp-card .sc-i {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 3px;
  background: color-mix(in srgb, var(--sp-coral) 11%, white);
  display: grid; place-items: center;
}
.sp-card .sc-i svg { width: 17px; height: 17px; fill: none; stroke: var(--sp-coral); stroke-width: 1.7; }

/* ─── Steps / numbered ─────────────────────────────────── */
.sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sp-step {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  padding: 18px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 14px;
}
.sp-sec.alt .sp-step:not(.on) { background: var(--sp-bg); }
.sp-step .n {
  width: 30px; height: 30px; border-radius: 999px; background: var(--sp-ink); color: #fff;
  display: grid; place-items: center; font-family: var(--font-display); font-size: 12px; font-weight: 600;
}
.sp-step .t { font-family: var(--font-display); font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--sp-ink); }
.sp-step .d { font-size: 12.5px; line-height: 1.5; color: var(--sp-soft); margin-top: 3px; }

/* ─── Bullet list ──────────────────────────────────────── */
.sp-list { display: flex; flex-direction: column; gap: 2px; }
.sp-li { display: grid; grid-template-columns: 17px 1fr; gap: 11px; padding: 8px 0; align-items: start; }
.sp-li .tick {
  width: 17px; height: 17px; border-radius: 999px; margin-top: 2px;
  background: color-mix(in srgb, var(--sp-coral) 13%, white); color: var(--sp-coral);
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
}
.sp-li .lt { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: -0.012em; color: var(--sp-ink); }
.sp-li .ld { font-size: 12.5px; line-height: 1.5; color: var(--sp-soft); margin-top: 1px; }

/* ─── Note ─────────────────────────────────────────────── */
.sp-note {
  margin-top: 22px; padding: 15px 18px;
  background: color-mix(in srgb, var(--sp-coral) 6%, white);
  border: 1px solid color-mix(in srgb, var(--sp-coral) 22%, transparent);
  border-left: 3px solid var(--sp-coral);
  border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: var(--sp-ink);
}
.sp-note b { font-weight: 600; }

/* ─── Stat row ─────────────────────────────────────────── */
.sp-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--sp-rule); border-radius: 15px; overflow: hidden;
}
.sp-sec.alt .sp-stats:not(.on) { background: var(--sp-bg); }
.sp-stats .s { padding: 20px; border-right: 1px solid var(--sp-rule); }
.sp-stats .s:last-child { border-right: none; }
.sp-stats .v { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 500; letter-spacing: -0.03em; color: var(--sp-ink); line-height: 1; }
.sp-stats .v em { font-family: var(--font-display-serif); font-style: italic; font-weight: 400; color: var(--sp-coral); }
.sp-stats .l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-soft); margin-top: 7px; }

/* ─── Mock panel ───────────────────────────────────────── */
.sp-mock {
  background: #fff; border: 1px solid var(--sp-rule); border-radius: 16px;
  overflow: hidden; box-shadow: var(--sp-shadow);
}
.sp-mock .mh {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--sp-rule); background: var(--sp-bg);
  font-family: var(--font-mono); font-size: 11px; color: var(--sp-soft);
}
.sp-mock .mh .dots { display: flex; gap: 5px; }
.sp-mock .mh .dots i { width: 9px; height: 9px; border-radius: 999px; background: rgba(14,16,24,0.12); display: block; }
.sp-mock .mh .dots i:first-child { background: #FF5F57; }
.sp-mock .mh .dots i:nth-child(2) { background: #FEBC2E; }
.sp-mock .mh .dots i:nth-child(3) { background: #28C840; }
.sp-mock .mb { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.sp-row {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; background: var(--sp-bg); border: 1px solid var(--sp-rule);
  border-radius: 11px; font-size: 13px; color: var(--sp-ink);
}
.sp-row.sel { border-color: var(--sp-coral); background: color-mix(in srgb, var(--sp-coral) 5%, white); }
.sp-row .rm { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--sp-soft); }
.sp-row .ri {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
  background: color-mix(in srgb, var(--sp-coral) 12%, white); color: var(--sp-coral);
  display: grid; place-items: center; font-size: 12px; font-family: var(--font-display); font-weight: 600;
}

/* ─── Docs / API ───────────────────────────────────────── */
.sp-api { display: flex; flex-direction: column; gap: 5px; }
.sp-api .ep {
  display: grid; grid-template-columns: 58px 210px 1fr; gap: 14px; align-items: center;
  padding: 11px 14px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 10px;
  transition: border-color 0.2s ease;
}
.sp-api .ep:hover { border-color: var(--sp-coral); }
.sp-api .m {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 4px 0; border-radius: 5px; text-align: center; color: #fff;
}
.m-get { background: #2E7D5B; } .m-post { background: #2B6CB0; }
.m-patch { background: #B7791F; } .m-delete { background: #C53030; }
.sp-api code { font-family: var(--font-mono); font-size: 12.5px; color: var(--sp-ink); }
.sp-api .ed { font-size: 12.5px; color: var(--sp-soft); line-height: 1.45; }
.sp-hook {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 0;
  border-bottom: 1px dashed var(--sp-rule);
}
.sp-hook code { font-family: var(--font-mono); font-size: 12px; color: var(--sp-coral); }
.sp-hook span { font-size: 12.5px; color: var(--sp-soft); line-height: 1.45; }
.sp-code {
  background: #0A0C12; border-radius: 13px; padding: 18px 20px; overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.06);
}
.sp-code pre {
  margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
  color: rgba(255,255,255,0.85);
}
.sp-code .c { color: rgba(255,255,255,0.4); }
.sp-code .k { color: #C7A8FF; } .sp-code .f { color: #6BD3C5; }
.sp-code .s { color: #FF8A6E; } .sp-code .n { color: #FFCB6B; }

/* ─── Changelog ────────────────────────────────────────── */
.sp-rel-list { display: flex; flex-direction: column; }
.sp-rel { display: grid; grid-template-columns: 190px 1fr; gap: 30px; padding: 26px 0; border-top: 1px solid var(--sp-rule); }
.sp-rel:last-child { border-bottom: 1px solid var(--sp-rule); }
.sp-rel .rl { position: sticky; top: 100px; align-self: start; }
.sp-rel .rv { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.025em; color: var(--sp-ink); }
.sp-rel .rd { font-family: var(--font-mono); font-size: 11px; color: var(--sp-soft); margin-top: 3px; }
.sp-rel .rt {
  display: inline-block; margin-top: 9px; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
}
.rt-major { background: var(--sp-ink); color: #fff; }
.rt-feature { background: color-mix(in srgb, var(--sp-coral) 15%, white); color: var(--sp-coral); }
.rt-patch { background: var(--sp-bg2); color: var(--sp-soft); }
.sp-rel .rb { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sp-rel .rb li {
  position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--sp-ink);
}
.sp-rel .rb li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 999px; background: var(--sp-coral); opacity: 0.5;
}

/* ─── Status ───────────────────────────────────────────── */
.sp-status-banner {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 20px; border-radius: 12px;
  background: color-mix(in srgb, #10B981 9%, white);
  border: 1px solid color-mix(in srgb, #10B981 28%, transparent);
  font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--sp-ink);
  margin-bottom: 22px;
}
.sp-status-banner .dot {
  width: 10px; height: 10px; border-radius: 999px; background: #10B981;
  box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: spPulse 2s ease-in-out infinite;
}
@keyframes spPulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0.45)} 50%{box-shadow:0 0 0 8px transparent} }
.sp-status-list { display: flex; flex-direction: column; gap: 8px; }
.sp-svc {
  display: grid; grid-template-columns: 1fr auto auto; gap: 20px; align-items: center;
  padding: 15px 18px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 12px;
}
.sp-svc .st { font-family: var(--font-display); font-size: 14px; font-weight: 500; color: var(--sp-ink); }
.sp-svc .sd { font-size: 12px; color: var(--sp-soft); margin-top: 2px; }
.sp-svc .bars { display: flex; gap: 2px; }
.sp-svc .bars i { width: 3px; height: 22px; border-radius: 2px; background: #10B981; display: block; }
.sp-svc .bars i:nth-child(23) { background: #F59E0B; }
.sp-svc .ok {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #10B981; font-weight: 600;
}
.sp-legend-row {
  margin-top: 20px; display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--sp-soft);
}
.sp-legend-row b { color: var(--sp-ink); font-weight: 600; }

/* ─── Compare table ────────────────────────────────────── */
.sp-vs { background: #fff; border: 1px solid var(--sp-rule); border-radius: 16px; overflow-x: auto; overflow-y: hidden; }
.sp-vs table { width: 100%; border-collapse: collapse; min-width: 560px; }
.sp-vs th, .sp-vs td {
  padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--sp-rule);
  font-family: var(--font-body); font-size: 13.5px;
}
.sp-vs th:first-child, .sp-vs td:first-child { text-align: left; font-weight: 500; }
.sp-vs thead th {
  background: var(--sp-bg); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-soft); font-weight: 500;
}
.sp-vs thead th.us {
  background: var(--sp-ink); color: #fff; font-family: var(--font-display);
  font-size: 15px; letter-spacing: -0.01em; text-transform: none;
}
.sp-vs tbody tr:last-child td { border-bottom: none; }
.sp-vs td.us { background: color-mix(in srgb, var(--sp-coral) 5%, white); font-weight: 500; }
.sp-vs .y { color: var(--sp-coral); font-size: 17px; }
.sp-vs .n { color: rgba(14,16,24,0.22); font-size: 16px; }
.sp-vs .p { color: var(--sp-soft); font-family: var(--font-mono); font-size: 11px; }
.sp-pros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp-pros .pc { background: #fff; border: 1px solid var(--sp-rule); border-radius: 14px; padding: 20px; }
.sp-sec.alt .sp-pros .pc:not(.on) { background: var(--sp-bg); }
.sp-pros .pc.good { border-top: 3px solid #10B981; }
.sp-pros .pc.bad { border-top: 3px solid var(--sp-coral); }
.sp-pros .ph { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--sp-ink); margin-bottom: 12px; }
.sp-pros ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.sp-pros li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--sp-soft); }
.sp-pros .good li::before { content: "+"; position: absolute; left: 0; color: #10B981; font-weight: 700; }
.sp-pros .bad li::before { content: "−"; position: absolute; left: 0; color: var(--sp-coral); font-weight: 700; }

/* ─── Pill buttons (unscoped mirror of .hero-e .he-btn) ── */
.he-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
}
.he-btn-primary {
  background: var(--sp-coral); color: #fff;
  box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--sp-coral) 55%, transparent);
}
.he-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -6px color-mix(in srgb, var(--sp-coral) 70%, transparent);
}
.he-btn-ghost {
  background: #fff; color: var(--sp-ink); border-color: var(--sp-rule);
}
.he-btn-ghost:hover { border-color: rgba(14,16,24,0.22); }
.he-btn .arr { font-size: 14px; transition: transform 0.25s ease; }
.he-btn:hover .arr { transform: translateX(3px); }

/* ─── CTA ──────────────────────────────────────────────── */
.sp-cta {
  background: var(--sp-ink); color: #fff; padding: 64px 0; text-align: center;
  position: relative; overflow: hidden;
}
.sp-cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, color-mix(in srgb, var(--sp-coral) 24%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 60% at 85% 60%, rgba(199,168,255,0.18), transparent 62%);
}
.sp-cta .wrap { position: relative; z-index: 1; max-width: 700px; }
.sp-cta h2 {
  font-family: var(--font-display); font-size: clamp(27px, 3.6vw, 42px);
  line-height: 1.07; letter-spacing: -0.028em; font-weight: 500; margin: 0 0 13px; color: #fff;
}
.sp-cta h2 em { font-family: var(--font-display-serif); font-style: italic; font-weight: 400; color: color-mix(in srgb, var(--sp-coral) 80%, white); }
.sp-cta p { color: rgba(255,255,255,0.65); font-size: 15.5px; line-height: 1.6; margin: 0 0 24px; }
.sp-cta .ctas { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sp-cta .he-btn-primary { background: #fff; color: var(--sp-ink); }
.sp-cta .he-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.22); }

/* ─── Related strip ────────────────────────────────────── */
.sp-rel-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-rl {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 12px;
  text-decoration: none; color: inherit; transition: all 0.2s ease;
}
.sp-sec.alt .sp-rl:not(.on) { background: var(--sp-bg); }
.sp-rl:hover { border-color: var(--sp-coral); transform: translateX(2px); }
.sp-rl .rk { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-soft); }
.sp-rl .rn { font-family: var(--font-display); font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--sp-ink); margin-top: 3px; }
.sp-rl .ra { color: var(--sp-coral); font-size: 16px; }

@media (max-width: 1000px) {
  .sp-grid-3, .sp-grid-4, .sp-steps, .sp-stats, .sp-rel-links { grid-template-columns: 1fr 1fr; }
  .sp-grid-2, .sp-pros { grid-template-columns: 1fr; }
  .sp-api .ep { grid-template-columns: 58px 1fr; }
  .sp-api .ed { grid-column: 1 / -1; }
  .sp-rel { grid-template-columns: 1fr; gap: 14px; }
  .sp-rel .rl { position: static; display: flex; align-items: baseline; gap: 12px; }
  .sp-rel .rt { margin-top: 0; }
}
@media (max-width: 620px) {
  .sp-grid-3, .sp-grid-4, .sp-steps, .sp-stats, .sp-rel-links { grid-template-columns: 1fr; }
  .sp-stats .s { border-right: none; border-bottom: 1px solid var(--sp-rule); }
  .sp-svc { grid-template-columns: 1fr; gap: 10px; }
  .sp-svc .bars { display: none; }
  .sp-vs table { min-width: 560px; }
}


/* ─────────────────────────────────────────────────────────
   Integration deep-dive components
   ───────────────────────────────────────────────────────── */

/* Message library — phone previews */
.ig-msgs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.ig-msg {
  background: #fff; border: 1px solid var(--sp-rule); border-radius: 15px;
  overflow: hidden; display: flex; flex-direction: column;
}
.sp-sec.alt .ig-msg:not(.on) { background: var(--sp-bg); }
.ig-msg .mt {
  padding: 12px 15px; border-bottom: 1px solid var(--sp-rule);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ig-msg .mt .nm { font-family: var(--font-display); font-size: 13.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--sp-ink); }
.ig-msg .mt .tg {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--sp-coral) 12%, white); color: var(--sp-coral);
}
.ig-msg .wa {
  padding: 14px; background: #ECE5DD; flex: 1;
  display: flex; flex-direction: column; gap: 7px;
}
.ig-bub {
  background: #fff; padding: 9px 11px; border-radius: 11px 11px 11px 4px;
  font-size: 12.5px; line-height: 1.45; color: #0E1018;
  box-shadow: 0 1px 1px rgba(0,0,0,.06); max-width: 92%;
}
.ig-bub.me { background: #DCF8C6; align-self: flex-end; border-radius: 11px 11px 4px 11px; }
.ig-bub b { font-weight: 600; }
.ig-bub .v { color: var(--sp-coral); font-family: var(--font-mono); font-size: 11.5px; }
.ig-bub .tm {
  display: block; margin-top: 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: #6B6E78;
}
.ig-bub .btns { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(0,0,0,.07); }
.ig-bub .btns span {
  text-align: center; padding: 5px; border-radius: 6px;
  background: rgba(0,0,0,.03); color: #128C7E; font-size: 11.5px; font-weight: 500;
}
.ig-msg .mf {
  padding: 11px 15px; border-top: 1px solid var(--sp-rule);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--sp-soft);
}

/* Credential / setup detail rows */
.ig-cred { display: flex; flex-direction: column; gap: 8px; }
.ig-cred .cr {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: start;
  padding: 13px 16px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 11px;
}
.sp-sec.alt .ig-cred .cr:not(.on) { background: var(--sp-bg); }
.ig-cred .cr .k { font-family: var(--font-mono); font-size: 12px; color: var(--sp-coral); word-break: break-all; }
.ig-cred .cr .d { font-size: 12.5px; line-height: 1.5; color: var(--sp-soft); }
.ig-cred .cr .d b { color: var(--sp-ink); font-weight: 600; }

/* Template variable table */
.ig-vars { background: #fff; border: 1px solid var(--sp-rule); border-radius: 14px; overflow: hidden; }
.sp-sec.alt .ig-vars:not(.on) { background: var(--sp-bg); }
.ig-vars table { width: 100%; border-collapse: collapse; }
.ig-vars td, .ig-vars th { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--sp-rule); font-size: 13px; }
.ig-vars thead th {
  background: var(--sp-bg2); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-soft); font-weight: 500;
}
.sp-sec.alt .ig-vars thead th { background: #fff; }
.ig-vars tbody tr:last-child td { border-bottom: none; }
.ig-vars code { font-family: var(--font-mono); font-size: 12px; color: var(--sp-coral); }
.ig-vars .ex { color: var(--sp-soft); font-family: var(--font-mono); font-size: 11.5px; }

/* Cascade diagram */
.ig-chain { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.ig-step {
  position: relative; padding: 16px 15px; border-radius: 13px;
  background: #fff; border: 1px solid var(--sp-rule);
}
.sp-sec.alt .ig-step:not(.on):not(.on2) { background: var(--sp-bg); }
.ig-step::after {
  content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%);
  color: var(--sp-coral); font-size: 15px; z-index: 1;
}
.ig-step:last-child::after { display: none; }
.ig-step.on { border-color: var(--sp-coral); background: color-mix(in srgb, var(--sp-coral) 5%, white); }
.ig-step.on2 { border-color: var(--sp-ink); background: var(--sp-ink); }
.ig-step .o { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-soft); }
.ig-step.on2 .o { color: rgba(255,255,255,.5); }
.ig-step .c { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.018em; color: var(--sp-ink); margin-top: 5px; }
.ig-step.on2 .c { color: #fff; }
.ig-step .s { font-size: 11.5px; line-height: 1.45; color: var(--sp-soft); margin-top: 4px; }
.ig-step.on2 .s { color: rgba(255,255,255,.6); }
.ig-step .st {
  display: inline-block; margin-top: 9px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--sp-bg2); color: var(--sp-soft);
}
.ig-step.on .st { background: var(--sp-coral); color: #fff; }
.ig-step.on2 .st { background: rgba(255,255,255,.14); color: #fff; }

/* Cost table */
.ig-cost { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.ig-cc { padding: 20px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 14px; }
.sp-sec.alt .ig-cc:not(.on) { background: var(--sp-bg); }
.ig-cc .r { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-soft); }
.ig-cc .p { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: var(--sp-ink); margin: 6px 0 3px; }
.ig-cc .p em { font-family: var(--font-display-serif); font-style: italic; font-weight: 400; color: var(--sp-coral); }
.ig-cc .n { font-size: 12px; line-height: 1.5; color: var(--sp-soft); }

/* Troubleshooting */
.ig-trouble { display: flex; flex-direction: column; gap: 8px; }
.ig-tr {
  padding: 15px 17px; background: #fff; border: 1px solid var(--sp-rule);
  border-left: 3px solid var(--sp-coral); border-radius: 10px;
}
.sp-sec.alt .ig-tr:not(.on) { background: var(--sp-bg); }
.ig-tr .sym { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: -0.015em; color: var(--sp-ink); }
.ig-tr .fix { font-size: 12.5px; line-height: 1.55; color: var(--sp-soft); margin-top: 4px; }
.ig-tr .fix code { font-family: var(--font-mono); font-size: 11.5px; background: var(--sp-bg2); color: var(--sp-coral); padding: 1px 5px; border-radius: 4px; }

/* Requirements checklist */
.ig-req { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ig-rq {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
  padding: 12px 14px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 10px;
}
.sp-sec.alt .ig-rq:not(.on) { background: var(--sp-bg); }
.ig-rq .b {
  width: 18px; height: 18px; border-radius: 5px; margin-top: 1px;
  background: color-mix(in srgb, var(--sp-coral) 13%, white); color: var(--sp-coral);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.ig-rq .t { font-family: var(--font-display); font-size: 13.5px; font-weight: 500; color: var(--sp-ink); }
.ig-rq .d { font-size: 12px; line-height: 1.45; color: var(--sp-soft); margin-top: 2px; }

@media (max-width: 1000px) {
  .ig-msgs, .ig-cost { grid-template-columns: 1fr 1fr; }
  .ig-chain { grid-template-columns: 1fr 1fr; }
  .ig-step::after { display: none; }
  .ig-cred .cr { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 620px) {
  .ig-msgs, .ig-cost, .ig-chain, .ig-req { grid-template-columns: 1fr; }
  .ig-vars { overflow-x: auto; }
  .ig-vars table { min-width: 520px; }
}


/* ─────────────────────────────────────────────────────────
   Integration hero — split layout with animated visual
   ───────────────────────────────────────────────────────── */
.sp-hero.ig-hero { padding: 52px 0 60px; }
.sp-hero.ig-hero .wrap {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,440px);
  gap: clamp(32px,5vw,72px); align-items: center;
}
.sp-hero.ig-hero h1 { max-width: 560px; }
.sp-hero.ig-hero .lede { max-width: 520px; }

/* Trust chips under the CTAs */
.ig-hero-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--sp-rule);
}
.ig-hero-chips span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-soft);
}
.ig-hero-chips span::before {
  content: "✓"; color: var(--sp-coral); font-size: 10px;
}

/* ─── Stage ─────────────────────────────────────────── */
.ig-stage { position: relative; display: grid; place-items: center; --ig-gut: clamp(24px, 4vw, 56px); }

.ig-phone {
  position: relative; width: 292px;
  background: #0E1018; border-radius: 40px; padding: 11px;
  box-shadow: 0 40px 90px -28px rgba(14,16,24,.5), 0 0 0 1px rgba(14,16,24,.06);
  animation: igRise .8s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes igRise { from { opacity:0; transform: translateY(22px) } to { opacity:1; transform:none } }
.ig-phone::before {
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 5px; background: rgba(255,255,255,.16); border-radius: 999px; z-index: 4;
}

/* WhatsApp app chrome */
.ig-app {
  background: #ECE5DD; border-radius: 30px; overflow: hidden;
  height: 524px; display: flex; flex-direction: column;
}
.ig-app-bar {
  background: #075E54; padding: 26px 14px 11px;
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.ig-app-bar .av {
  width: 32px; height: 32px; border-radius: 999px; flex: 0 0 32px;
  background: linear-gradient(135deg,#25D366,#128C7E);
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.ig-app-bar .who { flex: 1; min-width: 0; }
.ig-app-bar .nm { color: #fff; font-family: var(--font-display); font-size: 13.5px; font-weight: 500; letter-spacing: -.012em; }
.ig-app-bar .on { color: rgba(255,255,255,.6); font-size: 10.5px; margin-top: 1px; }
.ig-app-bar .ic { color: rgba(255,255,255,.55); font-size: 13px; }

.ig-thread {
  flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
  background-image: radial-gradient(rgba(14,16,24,.028) 1px, transparent 1px);
  background-size: 15px 15px;
  overflow: hidden;
}

/* Bubbles — staggered loop */
.ig-b {
  background: #fff; padding: 9px 11px; border-radius: 11px 11px 11px 4px;
  font-size: 12.5px; line-height: 1.45; color: #0E1018; max-width: 88%;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  opacity: 0; transform: translateY(9px) scale(.97);
  animation: igPop .45s cubic-bezier(.2,.7,.2,1) forwards;
}
.ig-b.me { background: #DCF8C6; align-self: flex-end; border-radius: 11px 11px 4px 11px; }
.ig-b b { font-weight: 600; }
.ig-b .hl { color: #128C7E; font-weight: 600; }
.ig-b .tm {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 5px;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em; color: #7B8794;
}
.ig-b .tick { color: #7B8794; font-size: 9px; animation: igRead .5s 4.4s forwards; }
@keyframes igRead { to { color: #34B7F1 } }
.ig-b .qb { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(0,0,0,.07); }
.ig-b .qb i {
  font-style: normal; text-align: center; padding: 5px; border-radius: 6px;
  background: rgba(0,0,0,.03); color: #128C7E; font-size: 11.5px; font-weight: 500;
}
@keyframes igPop { to { opacity: 1; transform: none } }
.ig-b:nth-child(1) { animation-delay: .5s }
.ig-b:nth-child(2) { animation-delay: 1.5s }
.ig-b.me { animation-delay: 3.9s }

/* Typing indicator */
.ig-typing {
  align-self: flex-start; background: #fff; padding: 10px 13px;
  border-radius: 11px 11px 11px 4px; display: flex; gap: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  opacity: 0; animation: igTypeIn .3s 2.9s forwards, igTypeOut .3s 3.85s forwards;
}
.ig-typing i { width: 6px; height: 6px; border-radius: 999px; background: #B4BCC4; animation: igDot 1.2s ease-in-out infinite; }
.ig-typing i:nth-child(2) { animation-delay: .18s }
.ig-typing i:nth-child(3) { animation-delay: .36s }
@keyframes igDot { 0%,60%,100%{transform:translateY(0);opacity:.5} 30%{transform:translateY(-4px);opacity:1} }
@keyframes igTypeIn { to { opacity: 1 } }
@keyframes igTypeOut { to { opacity: 0; height: 0; padding: 0; margin: -4px 0 0 } }

/* Input bar */
.ig-app-input {
  flex: 0 0 auto; padding: 9px 12px 13px; display: flex; align-items: center; gap: 8px;
  background: #ECE5DD;
}
.ig-app-input .fld {
  flex: 1; background: #fff; border-radius: 999px; padding: 8px 13px;
  font-size: 11.5px; color: #9AA3AC;
}
.ig-app-input .snd {
  width: 30px; height: 30px; border-radius: 999px; flex: 0 0 30px;
  background: #25D366; display: grid; place-items: center; color: #fff; font-size: 12px;
}

/* ─── Floating cards ────────────────────────────────── */
.ig-float {
  position: absolute; z-index: 3;
  background: #fff; border: 1px solid var(--sp-rule); border-radius: 13px;
  padding: 11px 14px; box-shadow: 0 20px 44px -18px rgba(14,16,24,.3);
  opacity: 0; animation: igFloatIn .6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes igFloatIn { from { opacity:0; transform: translateY(12px) scale(.94) } to { opacity:1; transform:none } }

.ig-float.delivered {
  top: 44px; left: max(-34px, calc(4px - var(--ig-gut))); animation-delay: 1.1s;
  display: flex; align-items: center; gap: 10px;
}
.ig-float.delivered .ck {
  width: 26px; height: 26px; border-radius: 999px; flex: 0 0 26px;
  background: #25D366; color: #fff; display: grid; place-items: center; font-size: 12px;
  animation: igPulseG 2.2s ease-in-out infinite;
}
@keyframes igPulseG { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45)} 50%{box-shadow:0 0 0 8px transparent} }
.ig-float .ft { font-family: var(--font-display); font-size: 12.5px; font-weight: 500; letter-spacing: -.012em; color: var(--sp-ink); }
.ig-float .fs { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; color: var(--sp-soft); margin-top: 2px; }

.ig-float.chain {
  bottom: 88px; right: max(-46px, calc(4px - var(--ig-gut))); width: 178px; animation-delay: 1.5s; padding: 13px 15px;
}
.ig-float.chain .fh {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sp-soft); margin-bottom: 9px;
}
.ig-float.chain .cr { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 11.5px; color: var(--sp-ink); }
.ig-float.chain .cr i {
  width: 7px; height: 7px; border-radius: 999px; flex: 0 0 7px; background: rgba(14,16,24,.14);
}
.ig-float.chain .cr.on i { background: #25D366; animation: igPulseG 2.2s ease-in-out infinite; }
.ig-float.chain .cr.on { font-weight: 500; }
.ig-float.chain .cr span { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--sp-soft); }
.ig-float.chain .cr.on span { color: #25D366; }

.ig-float.rate {
  top: 152px; right: max(-52px, calc(4px - var(--ig-gut))); animation-delay: 1.9s; text-align: right;
}
/* Panel-based stages: pad the stage so floats occupy a band
   above and below the panel — clear of it at every width. */
.ig-stage.g-indigo,
.ig-stage.g-navy,
.ig-stage.g-blue,
.ig-stage.g-gcal { padding-block: 62px; }

.ig-stage.g-indigo .ig-float.rate,
.ig-stage.g-navy .ig-float.rate,
.ig-stage.g-blue .ig-float.rate,
.ig-stage.g-gcal .ig-float.rate {
  top: auto; bottom: 0; right: 0;
}
.ig-stage.g-indigo .ig-float.delivered,
.ig-stage.g-navy .ig-float.delivered,
.ig-stage.g-blue .ig-float.delivered,
.ig-stage.g-gcal .ig-float.delivered {
  top: 0; bottom: auto; left: 0;
}
.ig-float.rate .v {
  font-family: var(--font-display); font-size: 24px; font-weight: 500;
  letter-spacing: -.03em; color: var(--sp-ink); line-height: 1;
}
.ig-float.rate .v em { font-family: var(--font-display-serif); font-style: italic; font-weight: 400; color: var(--sp-coral); }
.ig-float.rate .l {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sp-soft); margin-top: 4px;
}

/* Ambient glow behind the phone */
.ig-stage::before {
  content: ""; position: absolute; z-index: 0;
  width: 340px; height: 340px; border-radius: 999px;
  background: radial-gradient(circle, rgba(37,211,102,.18), transparent 66%);
  filter: blur(12px);
  animation: igBreathe 7s ease-in-out infinite;
}
@keyframes igBreathe { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.1);opacity:1} }
.ig-phone, .ig-float { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .ig-stage *, .ig-stage *::before { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ig-typing { display: none; }
}
@media (max-width: 1000px) {
  .sp-hero.ig-hero .wrap { grid-template-columns: 1fr; gap: 52px; }
  .ig-stage {
    margin-top: 6px;
    justify-self: center;
    width: min(100%, 440px);
    max-width: 440px;
  }
  .ig-stage:has(.ig-phone) { width: min(100%, 360px); max-width: 360px; }
}
@media (max-width: 520px) {
  .ig-phone { width: 258px; }
  .ig-float.rate { display: none; }
  .ig-float.chain { bottom: 60px; }
}


/* ─────────────────────────────────────────────────────────
   Integration hero visuals — payment / calendar / video
   ───────────────────────────────────────────────────────── */

/* Generic panel used as the hero centrepiece */
.ig-panel {
  position: relative; width: 100%; max-width: 372px;
  background: #fff; border: 1px solid var(--sp-rule); border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(14,16,24,.34), 0 2px 6px rgba(14,16,24,.04);
  overflow: hidden; z-index: 2;
  animation: igRise .8s cubic-bezier(.2,.7,.2,1) both;
}
.ig-panel .ph {
  padding: 13px 17px; border-bottom: 1px solid var(--sp-rule);
  display: flex; align-items: center; gap: 10px; background: var(--sp-bg);
}
.ig-panel .ph .lg {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.ig-panel .ph .t { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: -.012em; color: var(--sp-ink); }
.ig-panel .ph .st {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sp-soft);
}
.ig-panel .ph .st i { width: 6px; height: 6px; border-radius: 999px; background: #10B981; animation: igPulseG 2.2s ease-in-out infinite; }
.ig-panel .pb { padding: 18px; display: flex; flex-direction: column; gap: 10px; }

/* Ordered reveal for panel rows */
.ig-r {
  opacity: 0; transform: translateY(9px);
  animation: igPop .5s cubic-bezier(.2,.7,.2,1) forwards;
}
.ig-r:nth-child(1){animation-delay:.45s}.ig-r:nth-child(2){animation-delay:.75s}
.ig-r:nth-child(3){animation-delay:1.05s}.ig-r:nth-child(4){animation-delay:1.35s}
.ig-r:nth-child(5){animation-delay:1.65s}.ig-r:nth-child(6){animation-delay:1.95s}

/* Line item */
.ig-line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--sp-soft);
}
.ig-line b { color: var(--sp-ink); font-weight: 500; }
.ig-line.tot {
  padding-top: 11px; border-top: 1px dashed var(--sp-rule);
  font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--sp-ink);
}
.ig-line.tot .amt { letter-spacing: -.02em; }

/* Method tiles */
.ig-methods { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.ig-meth {
  padding: 9px 6px; border: 1px solid var(--sp-rule); border-radius: 9px;
  text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--sp-soft);
  transition: all .3s ease;
}
.ig-meth.on { border-color: var(--sp-coral); background: color-mix(in srgb, var(--sp-coral) 6%, white); color: var(--sp-coral); font-weight: 500; }

/* Card field with shimmer */
.ig-field {
  padding: 11px 13px; border: 1px solid var(--sp-rule); border-radius: 10px;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--sp-ink);
  display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden;
}
.ig-field .num { letter-spacing: .1em; flex: 1; }
.ig-field .mi { font-size: 11px; color: var(--sp-soft); }
.ig-field::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,90,54,.16) 50%, transparent 70%);
  transform: translateX(-100%); animation: igShine 3.4s 2s ease-in-out infinite;
}
@keyframes igShine { 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }

/* Pay button → success swap */
.ig-payb {
  position: relative; padding: 13px; border-radius: 11px; text-align: center;
  background: var(--sp-coral); color: #fff;
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  overflow: hidden;
}
.ig-payb .lbl2 {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #10B981; opacity: 0;
  animation: igSwap .5s 3.4s forwards;
}
@keyframes igSwap { to { opacity: 1 } }

/* Calendar sync visual */
.ig-sync { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 8px; align-items: center; }
.ig-side {
  border: 1px solid var(--sp-rule); border-radius: 11px; padding: 11px; background: var(--sp-bg);
}
.ig-side .sh {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sp-soft); margin-bottom: 8px;
}
.ig-evt {
  padding: 6px 8px; border-radius: 6px; font-size: 10.5px; margin-bottom: 4px;
  background: color-mix(in srgb, var(--sp-coral) 13%, white);
  border-left: 2.5px solid var(--sp-coral); color: var(--sp-ink);
}
.ig-evt.g { background: color-mix(in srgb, #4285F4 13%, white); border-left-color: #4285F4; }
.ig-evt.busy { background: rgba(14,16,24,.05); border-left-color: rgba(14,16,24,.25); color: var(--sp-soft); }
.ig-arrows { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ig-arrows i {
  font-style: normal; font-size: 14px; color: var(--sp-coral);
  animation: igSlideR 2.2s ease-in-out infinite;
}
.ig-arrows i:last-child { color: #4285F4; animation: igSlideL 2.2s 1.1s ease-in-out infinite; }
@keyframes igSlideR { 0%,100%{transform:translateX(-3px);opacity:.45} 50%{transform:translateX(3px);opacity:1} }
@keyframes igSlideL { 0%,100%{transform:translateX(3px);opacity:.45} 50%{transform:translateX(-3px);opacity:1} }

/* Video meeting visual */
.ig-vid {
  border-radius: 12px; overflow: hidden; background: #1A1D27;
  aspect-ratio: 16/10; position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px;
}
.ig-tile {
  background: linear-gradient(135deg, #2A2E3A, #1F232D); border-radius: 8px;
  display: grid; place-items: center; position: relative;
}
.ig-tile .fa {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.ig-tile .nm2 {
  position: absolute; bottom: 5px; left: 6px;
  font-family: var(--font-mono); font-size: 8.5px; color: rgba(255,255,255,.6);
}
.ig-tile.spk { box-shadow: inset 0 0 0 2px #2D8CFF; animation: igSpk 3s ease-in-out infinite; }
@keyframes igSpk { 0%,100%{box-shadow:inset 0 0 0 2px rgba(45,140,255,.25)} 50%{box-shadow:inset 0 0 0 2px rgba(45,140,255,1)} }
.ig-vid-bar {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 7px;
  display: flex; gap: 6px; justify-content: center;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}
.ig-vid-bar span {
  width: 24px; height: 24px; border-radius: 999px; background: rgba(255,255,255,.14);
}
.ig-vid-bar span.end { background: #E5484D; }

/* Link row that "generates" */
.ig-genlink {
  padding: 10px 13px; border-radius: 10px;
  background: color-mix(in srgb, var(--sp-coral) 7%, white);
  border: 1px dashed color-mix(in srgb, var(--sp-coral) 35%, transparent);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--sp-coral);
  display: flex; align-items: center; gap: 8px;
}
.ig-genlink .dot3 {
  width: 5px; height: 5px; border-radius: 999px; background: currentColor;
  animation: igDot 1.2s ease-in-out infinite;
}

/* UPI badge grid */
.ig-upi { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.ig-upi span {
  padding: 8px 4px; border-radius: 8px; text-align: center;
  border: 1px solid var(--sp-rule); font-family: var(--font-mono); font-size: 9px;
  color: var(--sp-soft); letter-spacing: .04em;
}
.ig-upi span.on { border-color: var(--sp-coral); color: var(--sp-coral); background: color-mix(in srgb, var(--sp-coral) 6%, white); }

/* Stage glow variants */
.ig-stage.g-indigo::before { background: radial-gradient(circle, rgba(99,91,255,.2), transparent 66%); }
.ig-stage.g-blue::before   { background: radial-gradient(circle, rgba(45,140,255,.2), transparent 66%); }
.ig-stage.g-gcal::before   { background: radial-gradient(circle, rgba(66,133,244,.2), transparent 66%); }
.ig-stage.g-navy::before   { background: radial-gradient(circle, rgba(51,149,255,.2), transparent 66%); }

@media (prefers-reduced-motion: reduce) {
  .ig-panel, .ig-r, .ig-field::after, .ig-payb .lbl2, .ig-arrows i, .ig-tile.spk, .ig-genlink .dot3 {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}
@media (max-width: 520px) { .ig-panel { max-width: 100%; } }


/* ─────────────────────────────────────────────────────────
   Brand override — modern.css paints h2 em with a legacy
   indigo→fuchsia gradient via -webkit-text-fill-color.
   Reset the fill (color alone cannot win against it).
   ───────────────────────────────────────────────────────── */
body[data-modern="true"] .sp-head h2 em,
body[data-modern="true"] .sp-hero h1 em,
body[data-modern="true"] .sp-sec h2 em,
body[data-modern="true"] .sp-two-col h2 em {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--sp-coral);
  color: var(--sp-coral);
}
body[data-modern="true"] .sp-cta h2 em {
  background: none;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: color-mix(in srgb, var(--sp-coral) 80%, white);
  color: color-mix(in srgb, var(--sp-coral) 80%, white);
}
body[data-modern="true"] .sp-sec.dark h2 em {
  -webkit-text-fill-color: color-mix(in srgb, var(--sp-coral) 85%, white);
  color: color-mix(in srgb, var(--sp-coral) 85%, white);
}


/* ─── Industries directory ─────────────────────────────── */
.idir-tools {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.idir-search {
  flex: 1; min-width: 260px; height: 46px; padding: 0 18px;
  border: 1px solid var(--sp-rule); border-radius: 999px; background: #fff;
  font-family: var(--font-body); font-size: 14px; color: var(--sp-ink); outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.idir-search:focus { border-color: var(--sp-coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-coral) 14%, transparent); }
.idir-count {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--sp-soft); white-space: nowrap;
}
.idir-count b { color: var(--sp-coral); font-weight: 600; }

.idir-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 34px; }
.idir-chips .fx-chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sp-rule);
  background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--sp-soft);
  transition: all .2s ease;
}
.idir-chips .fx-chip b { font-family: var(--font-mono); font-size: 10px; opacity: .6; margin-left: 3px; }
.idir-chips .fx-chip:hover { border-color: var(--sp-rule-2); color: var(--sp-ink); }
.idir-chips .fx-chip.on { background: var(--sp-ink); border-color: var(--sp-ink); color: #fff; }
.idir-chips .fx-chip.on b { opacity: .55; }

.idir-group { margin-bottom: 34px; }
.idir-group[hidden] { display: none; }
.idir-ghead {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--sp-rule);
}
.idir-ghead .gt {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  letter-spacing: -.022em; color: var(--sp-ink);
}
.idir-ghead .gc {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sp-soft);
}
.idir-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 8px;
}
.idir-card {
  aspect-ratio: auto;
  min-height: 0;
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  padding: 13px 15px; background: #fff;
  border: 1px solid var(--sp-rule); border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .25s ease;
}
.idir-card[hidden] { display: none; }
.idir-card:hover {
  border-color: var(--sp-coral); transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--sp-coral) 50%, transparent);
}
.idir-card .ic-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--sp-coral) 11%, white);
  color: var(--sp-coral); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.idir-card .ic-body { min-width: 0; }
.idir-card .ic-n {
  display: block; font-family: var(--font-display); font-size: 14px; font-weight: 500;
  letter-spacing: -.015em; color: var(--sp-ink);
}
.idir-card .ic-k {
  display: block; font-family: var(--font-mono); font-size: 10px;
  color: var(--sp-soft); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idir-card .ic-a { color: var(--sp-coral); font-size: 15px; }

.idir-empty { text-align: center; padding: 46px 20px; }
.idir-empty .ie-t {
  font-family: var(--font-display); font-size: 19px; font-weight: 500;
  letter-spacing: -.022em; color: var(--sp-ink);
}
.idir-empty .ie-d {
  font-size: 14px; line-height: 1.6; color: var(--sp-soft);
  max-width: 480px; margin: 8px auto 0;
}
.idir-empty .ie-d a { color: var(--sp-coral); }


/* Wide comparison table (compare.html hub · 10 columns) */
.sp-vs.wide table { min-width: 1080px; }


/* Full feature index (features.html) */
.fx-group { margin-bottom: 34px; }
.fx-gh { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--sp-rule); }
.fx-gh .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--sp-coral); }
.fx-gh .t { font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: var(--sp-ink); }
.fx-gh .c { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--sp-soft); }
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.fx-i { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--sp-rule); border-radius: 12px; transition: border-color .2s, transform .2s; }
.fx-i:hover { border-color: color-mix(in srgb, var(--sp-coral) 45%, transparent); transform: translateY(-1px); }
.fx-i .fn { font-family: var(--font-mono); font-size: 10px; color: var(--sp-soft); padding-top: 2px; }
.fx-i .ft { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--sp-ink); }
.fx-i .fd { font-size: 12.5px; line-height: 1.5; color: var(--sp-soft); margin-top: 3px; }
@media (max-width: 1000px) { .fx-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .fx-grid { grid-template-columns: 1fr; } }

.fx-gsub { font-size: 13.5px; line-height: 1.55; color: var(--sp-soft); margin: -6px 0 16px; max-width: 620px; }
.fx-i .ft .fx-star { color: var(--sp-coral); font-size: 11px; vertical-align: 2px; }

.fx-i.has-page { text-decoration: none; color: inherit; border-color: color-mix(in srgb, var(--sp-coral) 30%, var(--sp-rule)); }
.fx-i.has-page:hover { border-color: var(--sp-coral); box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--sp-coral) 55%, transparent); }
.fx-more { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-coral); }