/* ============================================================
   PulseChain Developer — page-specific overrides
   Base design system comes from gold-tokenization.css.
   Only layout wrappers that page needs are defined here; no new
   colours, fonts or spacing scales are introduced.
   ============================================================ */

/* Hero visual stage — mirrors .hero-gold-stage from the base sheet,
   sized for the wider PulseChain contract/dApp illustration. */
.pls-hero-stage {
  position: relative;
  margin: 0 auto;
  /* Sized up to fill more of the hero's right column. The column is ~630px
     inside container-xl, so 560px fills it while keeping the gutter. */
  width: 560px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

.pls-hero-svg {
  width: 100%;
  height: auto;
}

/* Section visual wrapper — same role as .gt-visual on the reference page. */
.pls-visual {
  width: 100%;
}

/* Pillar grid for the "Why BlockchainX" column.
   .v3-wu-pillar is styled by the base sheet; only the grid is new. */
.v3-wu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Specialists bento — 4 cards, two per row instead of the base sheet's 3-up.
   .v2-bento is a 6-column grid and .v2-bento-item spans 2; spanning 3 gives
   two equal cards per row. Scoped to #teamSpecialists so the 6-card
   industries bento keeps its 3-up layout. */
#teamSpecialists .v2-bento-item {
  grid-column: span 3;
}

/* The base 12px gap is tuned for narrow 3-up cards and reads as cramped once
   the cards are full 50% width. Both axes are set explicitly so the row and
   column separation stay matched. */
#teamSpecialists {
  column-gap: 32px;
  row-gap: 32px;
}

/* The base sheet drops .v2-bento to 4 columns here — span 2 keeps it 2-up. */
@media (max-width: 992px) {
  #teamSpecialists .v2-bento-item {
    grid-column: span 2;
  }
}

@media (max-width: 767.98px) {
  .pls-hero-stage {
    width: 100%;
    margin: 12px auto;
  }
}

/* ============================================================
   Process stepper — panel height
   The base sheet sets .prc-detail{min-height:540px}, tuned for a longer
   step body. Here the content runs ~330px, so the slack collected as dead
   space under the tags. Shorter panel + vertically centred content puts a
   balanced band above and below instead.
   ============================================================ */
#process .prc-detail {
  min-height: 440px;
}

#process .prc-detail-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================================
   Hero + "Why PulseChain" SVG motion
   Colours are the accents already used on this page; no new palette.
   Every animated element is decorative — the hero stage is aria-hidden and
   the second diagram carries its own role="img" + aria-label.
   ============================================================ */

/* Cards and the gas badge drift on a slow loop, offset by --i so they never
   move in lockstep. */
@keyframes plsFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.pls-card,
.pls-badge {
  animation: plsFloat 6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.6s);
  transform-box: fill-box;
  transform-origin: center;
}

/* Code/progress bars fade in and out like the contract is still rendering. */
@keyframes plsShimmer {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.9; }
}

.pls-bar {
  animation: plsShimmer 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.28s);
}

/* Central nodes breathe with a soft halo in the mint accent. */
@keyframes plsGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(54, 231, 196, 0.35)); }
  50%      { filter: drop-shadow(0 0 12px rgba(54, 231, 196, 0.75)); }
}

.pls-node {
  animation: plsGlow 3.2s ease-in-out infinite;
}

/* The 80px ring around the central hexagon expands gently. */
@keyframes plsHalo {
  0%, 100% { opacity: 0.16; transform: scale(1); }
  50%      { opacity: 0.4;  transform: scale(1.06); }
}

.pls-halo {
  animation: plsHalo 4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Travelling dot riding each connector (motion comes from <animateMotion>). */
.pls-spark {
  filter: drop-shadow(0 0 6px rgba(54, 231, 196, 0.9));
}

/* ---- Draw-in on scroll ------------------------------------------------
   Elements start hidden and are released when the wrapper picks up
   .is-inview, mirroring the .scroll-fade / .visible pattern already used
   by the card grids on this page.

   The hidden state is gated behind .pls-js on <html>, set by an inline
   script at the top of the page — the same trick the rwa-marketplace page
   uses with .art-doc-js. Without JS, or if the observer never fires (a
   viewport that never scrolls, a screenshot tool, a crawler), the diagrams
   stay fully visible instead of blank. */
.pls-js .pls-hero-stage .pls-card,
.pls-js .pls-hero-stage .pls-badge,
.pls-js .pls-visual .pls-card,
.pls-js .pls-visual .pls-hex {
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--i, 0) * 0.14s);
}

.pls-js .pls-visual .pls-link,
.pls-js .pls-hero-stage .pls-link {
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: calc(0.3s + var(--i, 0) * 0.12s);
}

.pls-hero-stage.is-inview .pls-card,
.pls-hero-stage.is-inview .pls-badge,
.pls-hero-stage.is-inview .pls-link,
.pls-visual.is-inview .pls-card,
.pls-visual.is-inview .pls-hex {
  opacity: 1;
}

.pls-visual.is-inview .pls-link,
.pls-hero-stage.is-inview .pls-link {
  opacity: 0.5;
}

/* ---- Reduced motion ---------------------------------------------------
   Static end state must be the complete, fully visible diagram. */
@media (prefers-reduced-motion: reduce) {

  .pls-card,
  .pls-badge,
  .pls-bar,
  .pls-node,
  .pls-halo,
  .pls-spark {
    animation: none;
  }

  .pls-spark {
    display: none;
  }

  .pls-js .pls-hero-stage .pls-card,
  .pls-js .pls-hero-stage .pls-badge,
  .pls-js .pls-visual .pls-card,
  .pls-js .pls-visual .pls-hex {
    opacity: 1;
    transition: none;
  }

  .pls-js .pls-visual .pls-link,
  .pls-js .pls-hero-stage .pls-link {
    opacity: 0.5;
    transition: none;
  }
}

/* ============================================================
   Cost tier finder (#cost)
   Ported from the supplied pulsechain-tier-finder.html reference. The
   reference shipped its own :root palette (#8b5cf6 / #2dd8c4 / #12121e);
   every one of those is mapped here onto the tokens this site already
   defines in gold-tokenization.css, so the widget reads as part of the
   page rather than a bolt-on. Layout, spacing and behaviour follow the
   reference exactly.

   reference        -> site token
   --accent #8b5cf6 -> var(--pv)      #661EB9
   --accent-text    -> var(--lav)     #A183E0
   --teal   #2dd8c4 -> var(--mint)    #36E7C4
   --card-light     -> var(--b)       #0F1013
   --border #262636 -> var(--border)
   --ink-soft       -> var(--dim)
   ============================================================ */

/* Sub-headings inside #cost. Matched to the page's heading scale:
   same font as .section-heading (--font-primary), centred inside the same
   700px measure as .section-intro-center, one step down in size so they read
   as sub-headings under the section's own H2. */
.pls-tf-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(21px, 2.4vw, 30px);
  line-height: 1.25;
  color: #fff;
  text-align: center;
  max-width: 700px;
  margin: 0 auto 30px;
}

/* ---- All four plans, listed under the finder ------------------------- */
/* Clear separation from the finder panel above. */
.pls-tf-plans-title {
  margin-top: 72px;
}

/* .ai-card sets overflow:hidden, which clips the badge that straddles the
   top border. Lifting it is safe here: the only thing that clip protected is
   .ai-card::before, a 1px gradient hairline that already fades to transparent
   at both ends, so nothing pokes out of the rounded corners. */
.pls-tf-plan {
  position: relative;
  overflow: visible;
}

/* Feature bullets inside a plan card reuse the finder's list styling. */
.pls-tf-plan .pls-tf-feat {
  margin-bottom: 0;
}

/* The plan the finder currently recommends. */
.pls-tf-plan.is-recommended {
  border-color: var(--lav);
  box-shadow: 0 0 0 3px rgba(161, 131, 224, 0.16);
}

/* Badge straddling the card's top border — the pattern pricing pages use to
   mark the suggested plan. Half above the border, half over the card. */
.pls-tf-plan-flag {
  position: absolute;
  top: -11px;
  left: 24px;
  z-index: 2;
  display: inline-block;
  background: var(--pv);
  border: 1px solid var(--lav);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(78, 31, 163, 0.45);
}

@keyframes plsOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.pls-orbit {
  animation: plsOrbit 46s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes plsRing {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.pls-ring {
  animation: plsRing 3s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .pls-orbit,
  .pls-ring {
    animation: none;
  }
}

/* ---- Off-screen animation pause --------------------------------------
   These diagrams animate on infinite loops, and one of them (plsGlow) drives
   filter: drop-shadow(), which cannot run on the compositor — it forces a
   repaint and style recalc every frame for as long as it runs. Keeping that
   going while the diagram is scrolled out of view was pure main-thread cost.

   .is-offscreen is toggled by the same IntersectionObserver that already
   handles the draw-in, so nothing changes visually: whenever a diagram is on
   screen it animates exactly as before. */
.pls-hero-stage.is-offscreen *,
.pls-visual.is-offscreen * {
  animation-play-state: paused !important;
}

/* ============================================================
   Cost wizard (#cost)
   Same one-question-per-step pattern as the cost wizard on
   /blockchain-cybersecurity-services/. Rules ported from
   blockchain-cybersecurity-services.css and re-scoped from .cyber-page to
   #cost; its --bx-* palette is mapped onto the tokens this page already
   uses (--mint, --pd, --yellow, --border, --b).
   ============================================================ */
@keyframes bxwfade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
#cost .bx-wiz {max-width: 860px; margin: 44px auto 0; border: 1px solid var(--pd); border-radius: 18px; overflow: hidden; background: rgba(78, 31, 163, .08);}
#cost .bx-wiz-bar {height: 4px; background: rgba(255, 255, 255, .07);}
#cost .bx-wiz-bar i {display: block; height: 100%; background: linear-gradient(90deg, #F5D255 0%, #36E7C4 100%); transition: width .4s cubic-bezier(.4, 0, .2, 1);}
#cost .bx-wiz-in {padding: 40px;}
#cost .bx-wiz-meta {display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .04em; opacity: .6; margin-bottom: 22px;}
#cost .bx-wstep {display: none;}
#cost .bx-wstep.on {display: block; animation: bxwfade .35s ease;}
#cost .bx-wstep h3 {font-size: 26px; font-weight: 600; margin-bottom: 8px; color: #D9D9D9;}
#cost .bx-wstep>p {opacity: .65; margin-bottom: 24px;}
#cost .bx-choices {display: grid; gap: 12px;}
#cost .bx-choice {display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, .03); cursor: pointer; transition: border-color .2s, background .2s;}
#cost .bx-choice:hover {border-color: var(--mint); background: rgba(54, 231, 196, .05);}
#cost .bx-choice input {position: absolute; opacity: 0; width: 0; height: 0;}
#cost .bx-choice .bx-rd {flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(217, 217, 217, .35); margin-top: 3px; position: relative; transition: .2s;}
#cost .bx-choice input:checked~.bx-rd {border-color: var(--mint);}
#cost .bx-choice input:checked~.bx-rd::after {content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--mint);}
#cost .bx-choice input:checked~.bx-ct strong {color: var(--mint);}
#cost .bx-choice:has(input:checked) {border-color: var(--mint); background: rgba(54, 231, 196, .08);}
#cost .bx-choice input:focus-visible~.bx-rd {outline: 2px solid var(--yellow); outline-offset: 3px;}
#cost .bx-ct strong {display: block; font-family: "Exo 2", sans-serif; font-size: 17px; font-weight: 600; margin-bottom: 3px;}
#cost .bx-ct span {font-family: Epilogue, sans-serif; font-weight: 300; font-size: 15px; opacity: .65;}
#cost .bx-wiz-nav {display: flex; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border);}
#cost .bx-wiz-nav.is-result {justify-content: flex-end;}
#cost .bx-wiz-result {text-align: left; padding: 10px 0;}
#cost .bx-wiz-result .bx-rt {font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow);}
#cost .bx-wiz-result #bx-w-tier {font-size: 30px; font-weight: 600; margin: 12px 0 6px; color: #D9D9D9;}
#cost .bx-wiz-result .bx-rn {font-size: 38px; font-weight: 700; margin-bottom: 10px;}
#cost .bx-wiz-result>p {opacity: .75;}
#cost .bx-wiz-cta {margin: 8px 0 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;}
#cost .bx-wstep {display: block; border: 0; margin: 0 0 28px; padding: 0; min-width: 0;}
#cost .bx-wiz.is-ready .bx-wstep:not(.on) {display: none;}
#cost .bx-wiz:not(.is-ready) .bx-wstep[data-step="7"] {display: none;}
#cost .bx-wstep legend {float: none; width: 100%; font-size: 20px; font-weight: 600; margin: 0 0 24px; line-height: 1.4;}
#cost .bx-wiz-nav[hidden] {display: none;}

@media (max-width: 991px) {
  #cost .bx-wiz-in {padding: 28px;}
}

@media (max-width: 767px) {
  #cost .bx-wiz-in {padding: 16px 14px;}
  #cost .bx-wstep h3 {font-size: 17px;}
  #cost .bx-wiz-result #bx-w-tier {font-size: 18px;}
  #cost .bx-wiz-result .bx-rn {font-size: 24px;}
  #cost .bx-wiz-nav {flex-direction: column-reverse;}
}

@media (max-width:767px) {
  #cost .bx-wiz-in {padding: 16px 14px; border-radius: 14px;}
  #cost .bx-wiz-meta {font-size: 12px; margin-bottom: 12px;}
  #cost .bx-wstep {margin: 0 0 14px;}
  #cost .bx-wstep legend {font-size: 16px; margin: 0 0 14px; line-height: 1.35;}
  #cost .bx-wstep h3 {font-size: 17px; margin-bottom: 4px;}
  #cost .bx-wstep>p {font-size: 13px !important; margin-bottom: 14px;}
  #cost .bx-choices {gap: 8px;}
  #cost .bx-choice {padding: 11px 12px; gap: 10px; border-radius: 10px; min-height: auto;}
  #cost .bx-choice .bx-rd {flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px;}
  #cost .bx-ct strong {font-size: 14.5px; line-height: 1.35; margin-bottom: 2px;}
  #cost .bx-ct span {font-size: 12.5px;}
  #cost .bx-wiz-nav {margin-top: 16px; padding-top: 14px; gap: 10px;}
  #cost .bx-wiz-result {padding: 4px 0;}
  #cost .bx-wiz-result #bx-w-tier {font-size: 18px; margin-bottom: 8px;}
  #cost .bx-wiz-result .bx-rn {font-size: 24px;}
  #cost .bx-wiz-pills {gap: 6px; margin-top: 12px;}
  #cost .bx-wiz-pill {padding: 5px 9px; font-size: 12px;}
}

@media (max-width:576px) {
  #cost .bx-choice {padding: 9px 11px; gap: 9px;}
  #cost .bx-wiz-result .bx-rn {font-size: 22px;}
}

/* Wizard nav buttons — solid violet Next, ghost Back, as on the reference
   wizard. The page's gold-gradient buttons are kept for real page CTAs; these
   are in-widget controls and read better in the widget's own accent. */
#cost .bx-wiz-nav .pls-w-btn {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  padding: 12px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--tr);
}

#cost .bx-wiz-nav .pls-w-next {
  background: var(--pv);
  color: #fff;
}

#cost .bx-wiz-nav .pls-w-next:hover {
  background: var(--pd);
}

#cost .bx-wiz-nav .pls-w-back {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: #D9D9D9;
}

#cost .bx-wiz-nav .pls-w-back:hover {
  border-color: var(--lav);
  color: #fff;
}

#cost .bx-wiz-nav .pls-w-back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Result panel typography — restores the left-aligned plan readout the finder
   had before the wizard rebuild. The mint-dot feature list is the same one the
   plan cards use, so the recommendation and the card below it match. */
#cost .bx-wiz-result .bx-rt {
  color: var(--dim);
}

#cost .bx-wiz-result #plsWTier {
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  margin: 10px 0 8px;
}

#cost .bx-wiz-result .bx-rn {
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 700;
  color: var(--mint);
  margin: 0 0 8px;
}

#cost .bx-wiz-result > p {
  font-size: 13.5px;
  color: var(--dim);
  line-height: 1.55;
  margin: 0 0 18px;
  opacity: 1;
}

#cost .bx-wiz-result > p strong {
  color: #fff;
  font-weight: 600;
}

.pls-tf-feat {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pls-tf-feat li {
  font-size: 13.5px;
  color: #d7d7e5;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.4;
}

.pls-tf-feat li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  margin-top: 6px;
  flex-shrink: 0;
}

/* ---- Hero heading pair ------------------------------------------------
   H1 carries the product name, H2 the positioning line beneath it. */
.hero-subheading {
  font-family: var(--font-primary);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin: 10px 0 0;
}

/* ---- Process stepper nav buttons --------------------------------------
   .prc-nav-btn uses color: var(--text), and that custom property is declared
   four times across the sheets this page loads — #D9D9D9 in
   gold-tokenization.css but #0F172A in common.css. When the dark value won,
   the "Prev" label rendered near-black on a near-black pill and the button
   looked empty. Literal colour here, plus a clearly visible border. */
#process .prc-nav-btn {
  color: #D9D9D9;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}

#process .prc-nav-btn:hover {
  border-color: var(--lav);
  color: #fff;
}

/* Glow on press and on keyboard focus. */
#process .prc-nav-btn:active,
#process .prc-nav-btn:focus-visible {
  color: #fff;
  border-color: var(--lav);
  box-shadow: 0 0 0 3px rgba(161, 131, 224, 0.20), 0 0 18px rgba(161, 131, 224, 0.45);
  outline: none;
}

/* The Next button keeps its gradient fill; give it the same press glow. */
#process .prc-nav-btn--next {
  color: #fff;
}

#process .prc-nav-btn--next:active,
#process .prc-nav-btn--next:focus-visible {
  box-shadow: 0 0 0 3px rgba(161, 131, 224, 0.22), 0 0 20px rgba(102, 30, 185, 0.65);
}

/* ---- Hero heading spacing ---------------------------------------------
   The global h1..h6 rule adds padding-bottom (25px on the h1, 20px on the h2),
   so the visual gaps were 35px and 44px rather than the 10px/24px the margins
   suggested. Zero that padding and set the rhythm explicitly. */
.hero-content-col .hero-heading {
  padding-bottom: 0;
  margin-bottom: 0;
}

.hero-content-col .hero-subheading {
  padding-bottom: 0;
  margin: 8px 0 0;
}

.hero-content-col .hero-subtext {
  margin-top: 18px;
}

/* ---- Wizard result: centre the readout in the panel -------------------
   Bullets stay left-aligned for readability; the block itself is centred. */
#cost .bx-wiz-result {
  max-width: 460px;
  margin: 0 auto;
}

/* ---- Client logo strip -------------------------------------------------
   The shared default assumes 12 logos; this page renders 15, so the loop
   snapped back three logos early and left a gap. Matching the real count
   makes the strip run edge to edge. */
#clientsStrip .scroller__wrapper {
  --scrolling-gallery-items-total: 15;
}

/* ---- Engagement section intro on one line -----------------------------
   .section-intro-center caps at 700px, which forced both the heading and the
   lead paragraph onto two lines. Removing the cap alone is not enough: at a
   1440px viewport container-xl is 1258px while the heading needs 1305px and
   the paragraph 1316px at their default sizes. Easing the type down brings
   both inside the container with room to spare (heading ~1174px,
   paragraph ~1206px).

   Applied only from 1400px up. Below that there genuinely is not room, so the
   text wraps as before rather than overflowing. */
@media (min-width: 1400px) {
  #engagement .section-intro-center {
    max-width: 100%;
  }

  #engagement .section-heading {
    font-size: 36px;
  }

  /* common.css:8 sets p{font-size:18px !important}, so this has to match
     that weight to win. */
  #engagement .body-text {
    font-size: 16.5px !important;
  }
}

/* ============================================================
   Team leads — consultant cards
   Ported from asset-tokenization-company.css (used by
   /real-world-asset-tokenization/), re-scoped from .consultants-section
   to #team. Photo, name, role and a LinkedIn link, replacing the
   text-only .ai-card leads.
   ============================================================ */
/* ===== Our Asset Tokenization Consultants (#consultants) ============ */
#team .whys_section p { color: #a8a8b3; font-size: 14.5px; max-width: 720px; margin: 8px auto 0; line-height: 1.55; }

#team .consultant-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  height: 100%;
  padding: 22px 22px;
  background: rgba(48, 48, 48, 0.18);
  border: 1px solid rgba(86, 44, 175, 0.55);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
#team .consultant-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  background: rgba(78, 31, 163, 0.18);
  box-shadow: 0 16px 36px -12px rgba(54, 231, 196, 0.28);
}
#team .consultant-card::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: 15px; padding: 1px;
  background: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: none;
}
#team .consultant-card:hover::before { opacity: 1; }

/* Photo */
#team .consultant-photo-wrap {
  flex: 0 0 130px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: relative;
  padding: 3px;
  background: linear-gradient(135deg, rgba(86, 44, 175, 0.5), rgba(54, 231, 196, 0.35));
  overflow: hidden;
}
#team .consultant-photo {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #040914;
}

/* Text */
#team .consultant-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
#team .consultant-name {
  font-family: 'Syne', 'Exo 2', sans-serif;
  font-size: 19px; font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin: 0;
  transition: background 0.25s ease, -webkit-background-clip 0.25s ease;
}
#team .consultant-card:hover .consultant-name {
  background: linear-gradient(89.98deg, #f5d255 -3.37%, #36e7c4 99.98%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
#team .consultant-role {
  font-family: 'Exo 2', 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: #a8a8b3;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* LinkedIn pill button */
#team .consultant-linkedin {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  padding: 7px 14px;
  background: rgba(78, 31, 163, 0.22);
  border: 1px solid rgba(86, 44, 175, 0.6);
  border-radius: 50px;
  color: #d9d9d9;
  font-family: 'Exo 2', sans-serif;
  font-size: 12.5px; font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
#team .consultant-linkedin svg { transition: transform 0.25s ease; }
#team .consultant-linkedin:hover {
  background: #0a66c2; /* LinkedIn brand blue */
  border-color: #0a66c2;
  color: #fff;
  transform: translateY(-1px);
}
#team .consultant-linkedin:hover svg { transform: scale(1.1); }

/* Responsive */
@media (max-width: 575px) {
  #team .consultant-card { flex-direction: column; text-align: center; gap: 16px; padding: 22px 18px; }
  #team .consultant-photo-wrap { flex: 0 0 110px; width: 110px; height: 110px; }
  #team .consultant-name { font-size: 17px; }
  #team .consultant-info { align-items: center; }
}
/* Tag pills inside the engagement / pricing cards sat flush against the
   paragraph above them. Give them room to breathe. */
#engagement .ai-card .prc-detail-tags,
#cost .ai-card .prc-detail-tags {
  margin-top: 16px;
}

/* ---- Plan cards: even spacing and a common button baseline ------------
   .ai-card-desc had no bottom margin, so the "Best For:" line ran straight
   into the bullets. And because the four cards carry different amounts of
   copy, their CTAs sat at four different heights (373 / 362 / 362 / 424px).
   Making the card a flex column and pushing the CTA with margin-top:auto
   pins every button to the same baseline regardless of copy length. */
#cost .pls-tf-plan {
  display: flex;
  flex-direction: column;
}

#cost .pls-tf-plan .ai-card-desc {
  margin-bottom: 18px;
}

#cost .pls-tf-plan .pls-tf-feat {
  margin-bottom: 22px;
}

#cost .pls-tf-plan .btn-primary-gradient {
  margin-top: auto;
  align-self: flex-start;
}

/* ---- Cost section intro on one line -----------------------------------
   The heading only needs 962px, so it wrapped purely because of the 700px
   .section-intro-center cap. The paragraph needs 1330px at 18px against a
   1258px container, so it also needs the type easing down. Gated at 1400px
   up; below that both wrap normally rather than overflowing. */
@media (min-width: 1400px) {
  #cost .section-intro-center {
    max-width: 100%;
  }

  /* common.css:8 sets p{font-size:18px !important}, so this must match that
     weight to win. */
  #cost .section-intro-center > .body-text {
    font-size: 16.5px !important;
  }
}

/* ---- Icon beside the heading, not above it ----------------------------
   Both card types are icon / title / description as three stacked siblings.
   Laying the card out as a small grid puts the icon and title on one row and
   drops the description onto a second row spanning both columns — same
   markup, same content, just a different arrangement. */
#teamSpecialists .v2-bento-item,
#industriesBento .v2-bento-item,
#whyBxPillars .v3-wu-pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "desc desc";
  column-gap: 14px;
  align-items: center;
}

#teamSpecialists .v2-bento-icon,
#industriesBento .v2-bento-icon,
#whyBxPillars .v3-wu-icon {
  grid-area: icon;
  margin-bottom: 0;
  line-height: 1;
}

#teamSpecialists .v2-bento-title,
#industriesBento .v2-bento-title,
#whyBxPillars .v3-wu-title {
  grid-area: title;
  margin-bottom: 0;
}

#teamSpecialists .v2-bento-sub,
#industriesBento .v2-bento-sub,
#whyBxPillars .v3-wu-desc {
  grid-area: desc;
  margin-top: 14px;
}

/* Making the plan card a flex column (for the shared button baseline) also
   made its children stretch to full width, so the price badge ballooned to
   241px against MODEL 01's 81px — the 135deg gradient then spread out and
   looked washed. Shrink it back to its content. */
#cost .pls-tf-plan .ai-badge {
  align-self: flex-start;
}

/* ---- Consistent card rhythm ------------------------------------------
   The services cards ran 20px / 10px between icon, title and copy while the
   industries cards ran 12px / 6px, so the two grids read differently. One
   rhythm for both. */
/* Services still stacks icon above title, so it keeps a bottom margin.
   Industries switched to the icon-beside-heading grid, where that margin
   would push the description down, so it is not included here. */
#servicesGrid .icon-3d-wrap {
  margin-bottom: 14px;
}

#servicesGrid .service-card-title {
  margin-bottom: 12px;
}

/* ---- Result panel type scale ------------------------------------------
   Everything steps up a little. The "Best For" line is the exception: it was
   rendering at 18px because common.css's p{font-size:18px !important} beat the
   earlier rule, which left it larger than the plan name's supporting copy and
   well above the bullets. Pulled to 16px (with matching weight) so the
   hierarchy reads name > price > best-for > bullets. */
#cost .bx-wiz-result {
  max-width: 520px;
}

#cost .bx-wiz-result .bx-rt {
  font-size: 13px;
  letter-spacing: 0.14em;
}

#cost .bx-wiz-result #plsWTier {
  font-size: 30px;
  margin: 12px 0 10px;
}

#cost .bx-wiz-result .bx-rn {
  font-size: 26px;
  margin: 0 0 12px;
}

#cost .bx-wiz-result > p {
  font-size: 16px !important;
  line-height: 1.6;
  margin: 0 0 20px;
}

#cost .bx-wiz-result .pls-tf-feat {
  gap: 10px;
  margin-bottom: 26px;
}

#cost .bx-wiz-result .pls-tf-feat li {
  font-size: 15px;
  line-height: 1.5;
}

#cost .bx-wiz-result .pls-tf-feat li::before {
  margin-top: 7px;
}

/* ---- Services & Industries intros on one line -------------------------
   Both headings already fit (1232px and 1161px against a 1258px container).
   The lead paragraphs did not: 1301px and 1409px at 18px. Easing the type
   brings each inside the container. As elsewhere on this page, !important is
   required to beat common.css:8 — p { font-size: 18px !important }.

   Gated at 1400px up; below that the container is too narrow and both wrap
   normally rather than overflowing. */
@media (min-width: 1400px) {
  #services .section-intro-center > .body-text {
    font-size: 17px !important;
  }

  #industries .v2-body {
    font-size: 15.5px !important;
  }
}

/* The 700px cap also sits on the paragraphs themselves, not just their
   wrapper: gold-tokenization.css:3578 caps #services' .body-text, and the
   industries paragraph carries .section-intro-center directly. Both need
   releasing for the single-line sizes above to take effect. */
@media (min-width: 1400px) {
  #services .section-intro-center > .body-text,
  #industries .v2-body.section-intro-center {
    max-width: 100%;
  }
}

/* Tier-card CTA. .btn-primary-gradient is inline-flex, so it sizes to its label
   and sits left-aligned at whatever height the feature list happens to end —
   four different positions across the row. Make the card a column so the list
   absorbs the slack and the button always lands at the bottom, and stretch the
   button to the card width with a centred label so the four read as one row. */
.pls-tf-plan {
  display: flex;
  flex-direction: column;
}

.pls-tf-plan .pls-tf-feat {
  flex: 1 1 auto;
}

.pls-tf-plan .btn-primary-gradient {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  margin-top: 22px;
}

/* FAQ text scaled to match /art-tokenization-services/ (24/20/18/16). This file
   loads after gold-tokenization.css, which owns .faq-*, so these win here only. */
.faq-question-text { font-size: 24px; line-height: 29px; }
@media (max-width: 991px) { .faq-question-text { font-size: 20px; } }
@media (max-width: 576px) { .faq-question-text { font-size: 18px; } }
@media (max-width: 425px) { .faq-question-text { font-size: 16px; } }

/* Contrast (WCAG AA): --dim at .5 measured 3.95-4.10:1 here; .6 clears 4.5:1. */
.v3-wu-desc, .prc-num { color: rgba(217, 217, 217, 0.6); }