/* =====================================================================
   GOLFKIT — MANAGEMENT DUO (floating devices section)
   A laptop and a phone suspended over the cream stage: idle drift on
   air, parallax lean toward the cursor, ground shadows that breathe
   with the lift. Screens are wired for video but ship as designed
   placeholders until the recordings drop in (see README).
   Fully self-scoped (.mgmt-*) — safe to paste into any Golfkit page.
   ===================================================================== */

.mgmt{
  /* inherits the site tokens when present; standalone fallbacks otherwise */
  --m-cream: var(--cream, #f2f1ec);
  --m-ink: var(--ink, #101410);
  --m-ink-soft: var(--ink-soft, #49514b);
  --m-line-ink: var(--line-ink, rgba(16,20,16,.12));
  --m-green: var(--green, #2CD192);
  --m-green-deep: var(--green-deep, #1E8E6E);
  --m-green-dark: var(--green-dark, #06251a);
  --m-display: var(--display, 'Bricolage Grotesque', system-ui, sans-serif);
  --m-serif: var(--serif, 'Instrument Serif', Georgia, serif);
  --m-ease: var(--ease, cubic-bezier(.16,1,.3,1));

  /* geometry knobs */
  --m-lap-w: 72%;                 /* laptop width inside the stage */
  --m-ph-w: 17.5%;                /* phone width inside the stage */
  --m-lap-aspect: 3024 / 1524;    /* true ratio of the desktop recording */
  --m-ph-aspect: 720 / 1556;      /* match the mobile recording */

  position: relative;
  background: var(--m-cream);
  color: var(--m-ink);
  padding: clamp(84px, 11vh, 140px) 0 clamp(96px, 12vh, 150px);
  overflow: clip;                  /* the rings breathe past the wrap */
  z-index: 3;
}
.mgmt .mgmt-wrap{
  max-width: var(--maxw, 1560px);
  margin: 0 auto;
  padding: 0 var(--gutter, clamp(20px, 4.5vw, 72px));
  position: relative;
}

/* ------------------------------------------------------------ stage */
.mgmt-stage{
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  perspective: 1500px;
  perspective-origin: 50% 42%;
}

/* every moving thing = still outer frame + transformed inner "kite" */
.mgmt-kite{ will-change: transform; transform: translateZ(0); }

/* ------------------------------------------------------------ rings (far layer) */
.mgmt-rings{
  position: absolute; left: 47%; top: 46%;
  width: min(1080px, 118%); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: rgba(30,142,110,.16);
}
.mgmt-rings .mgmt-kite{ width: 100%; height: 100%; }
.mgmt-rings svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.mgmt-rings::before{
  content: ""; position: absolute; inset: -8%;
  background: radial-gradient(circle at 50% 44%, rgba(44,209,146,.10), transparent 60%);
}

/* ------------------------------------------------------------ ground shadows */
.mgmt-shadow{
  position: absolute;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(8,18,14,.36), rgba(8,18,14,.16) 46%, transparent 72%);
  filter: blur(7px);
  pointer-events: none;
  will-change: transform, opacity;
}
.mgmt-shadow--lap{ left: 3.5%; width: calc(var(--m-lap-w) * .94); bottom: -46px; }
.mgmt-shadow--ph { right: 12%; width: calc(var(--m-ph-w) * .94); bottom: -60px; height: 22px; }

/* ------------------------------------------------------------ laptop */
.mgmt-float--lap{
  position: relative; z-index: 2;
  width: var(--m-lap-w);
  margin-left: clamp(0px, 2%, 28px);
}
.mgmt-lap{
  position: relative; margin: 0;
  border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(9px, 1vw, 14px);
  background: linear-gradient(155deg, #3b3e3c 0%, #1a1c1b 22%, #101211 50%, #1c1e1d 78%, #34373a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 30px -18px rgba(8,18,14,.38);
}
.mgmt-cam{
  position: absolute; left: 50%; top: calc(clamp(9px, 1vw, 14px) * .32);
  width: 5px; height: 5px; transform: translateX(-50%);
  border-radius: 50%; background: #060807;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.05), inset 0 0 1.5px rgba(120,200,255,.5);
}
.mgmt-lap .mgmt-screen{
  position: relative;
  aspect-ratio: var(--m-lap-aspect);
  border-radius: clamp(7px, .8vw, 11px);
  overflow: hidden;
  background: #0b100d;
  isolation: isolate;
  transform: translateZ(0);
}
.mgmt-lap-base{
  display: block;
  height: clamp(11px, 1.3vw, 17px);
  margin: clamp(9px, 1vw, 14px) -4.6% calc(clamp(9px, 1vw, 14px) * -1);
  border-radius: 0 0 clamp(12px, 1.4vw, 18px) clamp(12px, 1.4vw, 18px);
  background: linear-gradient(#41454234, #2c302d 8%, #16191742 55%, #101312);
  background-color: #1d201e;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 18px -12px rgba(8,18,14,.5);
  position: relative;
}
.mgmt-lap-base::before{
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 13%; height: 46%;
  border-radius: 0 0 9px 9px;
  background: #0c0e0d;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04);
}

/* ------------------------------------------------------------ phone */
.mgmt-float--ph{
  position: absolute; z-index: 3;
  width: var(--m-ph-w);
  right: 11.5%; bottom: -6%;
}
.mgmt-phone{
  --pb: clamp(6px, .62vw, 9px);   /* bezel */
  position: relative; margin: 0;
  border-radius: 15.8% / 7.35%;
  padding: var(--pb);
  background: linear-gradient(155deg, #3b3e3c 0%, #1a1c1b 22%, #101211 50%, #1c1e1d 78%, #34373a 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 26px -16px rgba(8,18,14,.42);
}
.mgmt-phone::before{
  content: ""; position: absolute; inset: calc(var(--pb) * .38);
  border-radius: inherit;
  background: #050605;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.mgmt-btn{
  position: absolute; width: calc(var(--pb) * .55);
  background: linear-gradient(90deg, #2a2d2b, #111312);
  border-radius: 2px; box-shadow: 0 0 0 .5px rgba(255,255,255,.08);
}
.mgmt-btn.l1{ left: calc(var(--pb) * -.5); top: 17%; height: 4.2%; }
.mgmt-btn.l2{ left: calc(var(--pb) * -.5); top: 24%; height: 7.4%; }
.mgmt-btn.l3{ left: calc(var(--pb) * -.5); top: 33%; height: 7.4%; }
.mgmt-btn.r1{ right: calc(var(--pb) * -.5); top: 27%; height: 11.5%; }
.mgmt-phone .mgmt-screen{
  position: relative;
  aspect-ratio: var(--m-ph-aspect);
  border-radius: 12.8% / 5.95%;
  overflow: hidden;
  background: #0b100d;
  isolation: isolate;
  transform: translateZ(0);
}
.mgmt-island{
  position: absolute; z-index: 4; left: 50%; top: 2.55%;
  width: 32%; height: 3.6%;
  transform: translateX(-50%);
  border-radius: 999px; background: #000;
}
.mgmt-status{
  position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 6.2%;
  display: none; align-items: center; justify-content: space-between;
  padding: .4% 7.5% 0 9%;
  color: #fff; pointer-events: none;
  font: 600 clamp(8px, .8vw, 12px)/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.mgmt-status .mgmt-icons{ display: flex; align-items: center; gap: 4px; }
.mgmt-status svg{ height: .8em; width: auto; display: block; }
.has-media .mgmt-status{ display: flex; }   /* status bar appears only over real footage */

/* ------------------------------------------------------------ screens: placeholder + video */
.mgmt-screen video{
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover; transform: none;       /* explicit: never inherit page video rules */
  opacity: 0; transition: opacity .9s var(--m-ease);
}
.has-media .mgmt-screen video{ opacity: 1; }

.mgmt-ph{ /* the designed "empty" state: a screen that is on, waiting */
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 70% -10%, rgba(44,209,146,.14), transparent 55%),
    radial-gradient(110% 100% at 20% 110%, rgba(30,142,110,.10), transparent 60%),
    linear-gradient(160deg, #101713, #0b100d 65%);
}
.mgmt-leaf{
  width: clamp(18px, 2.2vw, 30px); aspect-ratio: 1;
  border-radius: 50% 50% 50% 0;
  background: var(--m-green);
  transform: rotate(-45deg);
  opacity: .85;
  animation: mgmtBreathe 4.6s var(--m-ease) infinite;
}
.mgmt-phone .mgmt-leaf{ width: clamp(15px, 1.7vw, 24px); }
@keyframes mgmtBreathe{
  0%, 100%{ transform: rotate(-45deg) scale(1); opacity: .85; }
  50%     { transform: rotate(-45deg) scale(1.16); opacity: 1; }
}

/* ------------------------------------------------------------ the one sentence */
.mgmt-line{
  margin: clamp(72px, 10vh, 120px) auto 0;
  max-width: 34ch;
  text-align: center;
  text-wrap: balance;
  font-family: var(--m-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.28;
  font-size: clamp(1.28rem, 1rem + 1.55vw, 1.92rem);
  color: var(--m-ink);
}
.mgmt-mark{
  display: block;
  font-style: normal;
  font-size: .62em;
  color: var(--m-green-deep);
  margin-bottom: .9em;
}
.mgmt-em{
  font-family: var(--m-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -.01em;
  color: var(--m-green-deep);
}

/* ------------------------------------------------------------ reveal (matches the site's .rv; self-armed by mgmt.js) */
.mgmt .rv{ opacity: 0; transform: translateY(30px); filter: blur(8px);
  transition: opacity 1s var(--m-ease), transform 1s var(--m-ease), filter 1s var(--m-ease); }
.mgmt .rv.in{ opacity: 1; transform: none; filter: none; }
.mgmt .rv[data-d="1"]{ transition-delay: .1s } .mgmt .rv[data-d="2"]{ transition-delay: .2s }

/* the kites live INSIDE .rv frames, so the reveal transition never
   fights the rAF transforms */

/* ------------------------------------------------------------ phones & narrow screens */
@media (max-width: 900px){
  .mgmt{ padding: clamp(64px, 9vh, 96px) 0 clamp(84px, 11vh, 120px); }
  .mgmt-stage{ perspective: 1100px; }
  .mgmt-float--lap{ width: 100%; margin-left: 0; }
  .mgmt-float--ph{ width: 34%; right: -1%; bottom: -16%; }
  .mgmt-stage{ margin-bottom: 15%; }        /* room for the hanging phone */
  .mgmt-shadow--lap{ left: 2%; width: 92%; bottom: -32px; height: 24px; }
  .mgmt-shadow--ph{ right: 0; width: 31%; bottom: -58px; height: 18px; }
  .mgmt-line{ margin-top: clamp(40px, 7vh, 64px); max-width: 26ch; }
}
@media (max-width: 520px){
  .mgmt-float--ph{ width: 37%; right: -2%; bottom: -18%; }
  .mgmt-rings{ width: 150%; }
}

/* ------------------------------------------------------------ restraint */
@media (prefers-reduced-motion: reduce){
  .mgmt-leaf{ animation: none; }
  .mgmt .rv{ opacity: 1; transform: none; filter: none; transition: none; }
  .mgmt-kite{ transform: none !important; }
  .mgmt-shadow{ transform: none !important; opacity: 1 !important; }
}

/* ------------------------------------------------------------------
   Device frames embedded in the B2B showcase slides (front-page).
   Wrapper provides the aspect vars the frame rules consume, and
   neutralises the slide's generic .art img sizing/transform rules. */
.gk-dev{ --m-ph-aspect: 720 / 1556; --m-lap-aspect: 3024 / 1524; position: relative; }
.gk-dev--ph{ width: min(272px, 58vw, calc((100svh - 320px) * .44)); }
.gk-dev--lap{ width: min(560px, 86vw, calc((100svh - 340px) * 1.7)); }
.gk-slide .art .gk-dev img{ width: 100%; height: 100%; max-height: none; transform: none; object-fit: cover; }
.gk-dev .mgmt-screen > img{ position: absolute; inset: 0; z-index: 2; }
.gk-dev .mgmt-screen video{ opacity: 1; }

/* ==================================================================
   JOURNEY — "How it works at your club" (front-page, light/editorial)
   Large floating photo cards; copy and device frames overlap their
   edges. Reuses the site's cream tokens, .rv reveal and the mgmt
   device frames. Chapters alternate sides; ghost numerals set depth. */
.jour{
  background: var(--cream, #f2f1ec);
  color: var(--ink, #101410);
  padding: clamp(90px, 12vh, 160px) var(--gutter, clamp(20px,4.5vw,72px)) clamp(110px, 14vh, 190px);
  overflow: clip;
}
.jour .jour-head{ max-width: var(--maxw, 1560px); margin: 0 auto clamp(64px, 9vh, 120px); }
.jour .jour-head .kick{ color: var(--green-deep, #1E8E6E); }
.jour .jour-head h2{ color: var(--ink, #101410); max-width: 18ch; }

.jour-ch{
  position: relative;
  max-width: var(--maxw, 1560px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  row-gap: 28px;
}
.jour-ch + .jour-ch{ margin-top: clamp(96px, 14vh, 200px); }

.jour-num{
  position: absolute; top: -0.55em; z-index: 0;
  font-family: var(--display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800; line-height: 1;
  font-size: clamp(6rem, 13vw, 12rem);
  letter-spacing: -.04em;
  color: rgba(16,20,16,.055);
  pointer-events: none; user-select: none;
}
.jour-ch--l .jour-num{ right: 2%; }
.jour-ch--r .jour-num{ left: 2%; }

.jour-media{ position: relative; z-index: 1; grid-row: 1; }
.jour-ch--l .jour-media{ grid-column: 1 / span 8; }
.jour-ch--r .jour-media{ grid-column: 5 / span 8; }

.jour-photo{
  margin: 0; position: relative;
  aspect-ratio: 3 / 2;
  border-radius: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  box-shadow: 0 34px 80px -34px rgba(15, 45, 30, .35), 0 10px 28px -18px rgba(15,45,30,.22);
}
.jour-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jour-photo--empty{
  background:
    radial-gradient(120% 90% at 72% -8%, rgba(44,209,146,.10), transparent 55%),
    linear-gradient(165deg, rgba(16,20,16,.035), rgba(16,20,16,.015));
  border: 1.5px solid var(--line-ink, rgba(16,20,16,.12));
  box-shadow: none;
  display: flex; align-items: flex-end;
}
.jour-slot{
  margin: 20px 24px;
  font-family: var(--display, sans-serif);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-ink, rgba(16,20,16,.42));
}


/* copy block overlapping the photo's outer edge */
.jour-copy{ position: relative; z-index: 2; grid-row: 1; }
.jour-ch--l .jour-copy{ grid-column: 8 / span 5; }
.jour-ch--r .jour-copy{ grid-column: 1 / span 5; grid-row: 1; }
.jour-copy{
  background: color-mix(in srgb, var(--cream, #f2f1ec) 86%, white);
  border: 1px solid var(--line-ink, rgba(16,20,16,.10));
  border-radius: clamp(16px, 1.8vw, 24px);
  padding: clamp(24px, 3vw, 44px);
  box-shadow: 0 24px 60px -30px rgba(15,45,30,.25);
}
.jour-kick{
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display, sans-serif);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-deep, #1E8E6E);
  margin-bottom: 1rem;
}
.jour-kick::before{ content: ""; width: 22px; height: 1.5px; background: var(--green-deep, #1E8E6E); }
.jour-copy h3{
  font-family: var(--display, sans-serif);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.06;
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  color: var(--ink, #101410);
}
.jour-copy h3 .em{
  font-family: var(--serif, Georgia, serif);
  font-style: italic; font-weight: 400; font-size: 1.05em;
  color: var(--green-deep, #1E8E6E);
}
.jour-copy p{
  margin-top: .95rem;
  font-size: .99rem; line-height: 1.7;
  color: var(--muted-ink, #49514b);
  max-width: 42ch;
}

/* reveal offsets: media first, copy follows */
.jour .jour-copy.rv{ transition-delay: .12s; }

@media (max-width: 960px){
  .jour-ch{ display: block; }
  /* the ghost numeral leads each chapter: larger, slightly stronger,
     and lifted so ~60% of it rises into the gap above the photo while
     its base tucks behind the card — visible rhythm, kept depth */
  /* numeral rides ABOVE the cards and inverts whatever it crosses
     (difference blend, like the cursor): ghost-subtle on the cream,
     light over the photo's dark, dark over its sky */
  .jour{ --numh: clamp(5rem, 20vw, 8rem); }
  .jour-num{
    font-size: var(--numh); top: -1em; z-index: 3;
    /* fully above the photo card; color inherited from the desktop ghost */
  }
  .jour-media{ margin: 0; }
  .jour-photo{ aspect-ratio: 4 / 3; }
  .jour-copy{ margin: -34px 4% 0; position: relative; }
  /* gaps sized from the numeral itself so it always clears the box above */
  .jour-ch + .jour-ch{ margin-top: calc(var(--numh) + clamp(28px, 4vh, 44px)); }
  .jour .jour-head{ margin-bottom: calc(var(--numh) + clamp(24px, 3.5vh, 40px)); }
}
@media (prefers-reduced-motion: reduce){
  .jour .rv{ opacity: 1; transform: none; transition: none; }
}

/* ==================================================================
   TRIO — "Three tools, one system" (front-page, under the hero).
   Three image cards on the cream stage: squarish crops that keep the
   blank-screen mockups whole, quiet hover lift, mobile snap-scroll. */
.trio{
  background: var(--cream, #f2f1ec);
  color: var(--ink, #101410);
  padding: clamp(84px, 11vh, 150px) var(--gutter, clamp(20px,4.5vw,72px)) clamp(64px, 8vh, 110px);
  overflow: clip;
}
.trio-head{ max-width: var(--maxw, 1560px); margin: 0 auto clamp(44px, 6vh, 80px); }
.trio-head .kick{ color: var(--green-deep, #1E8E6E); }
.trio-head h2{ color: var(--ink, #101410); max-width: 18ch; }

.trio-row{
  max-width: var(--maxw, 1560px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  align-items: start;
}
.trio-card{ transition: transform .55s var(--ease, cubic-bezier(.16,1,.3,1)); }
.trio-visual{
  margin: 0; position: relative;
  aspect-ratio: 1 / 1.06;
  border-radius: clamp(16px, 1.8vw, 26px);
  overflow: hidden;
  background: rgba(16,20,16,.04);
  box-shadow: 0 26px 60px -30px rgba(15,45,30,.30), 0 8px 22px -14px rgba(15,45,30,.18);
  transition: box-shadow .55s var(--ease, cubic-bezier(.16,1,.3,1));
}
.trio-visual img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.1s var(--ease, cubic-bezier(.16,1,.3,1));
}
@media (hover: hover){
  .trio-card:hover{ transform: translateY(-8px); }
  .trio-card:hover .trio-visual{ box-shadow: 0 40px 80px -34px rgba(15,45,30,.38), 0 12px 28px -16px rgba(15,45,30,.22); }
  .trio-card:hover .trio-visual img{ transform: scale(1.045); }
}
.trio-text{ padding: clamp(16px, 1.8vw, 24px) 6px 0; }
.trio-idx{
  display: block;
  text-transform: uppercase;
  font-family: var(--display, sans-serif);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .2em;
  color: var(--green-deep, #1E8E6E);
  margin-bottom: .45rem;
}
.trio-text h3{
  font-family: var(--display, sans-serif);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(1.18rem, 1.7vw, 1.5rem);
  color: var(--ink, #101410);
}
.trio-text p{
  margin-top: .55rem;
  font-size: .95rem; line-height: 1.65;
  color: var(--muted-ink, #49514b);
  max-width: 36ch;
}
/* staggered entrance (rides the site's .rv reveal) */
.trio-card:nth-child(2){ transition-delay: .1s; }
.trio-card:nth-child(3){ transition-delay: .2s; }

@media (max-width: 900px){
  .trio{ padding-bottom: clamp(30px, 4vh, 50px); }
  .trio-row{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
    gap: 14px;
    margin: 0 calc(var(--gutter, 20px) * -1);
    padding: 0 var(--gutter, 20px) 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trio-row::-webkit-scrollbar{ display: none; }
  .trio-card{ flex: 0 0 76vw; scroll-snap-align: center; transition-delay: 0s !important; }
}
@media (prefers-reduced-motion: reduce){
  .trio-card, .trio-visual img{ transition: none !important; transform: none !important; }
}

/* ------------------------------------------------------------------
   Rhythm between the cream sections (front-page): the revenue block's
   rounded top + oversized top padding were built for sitting on the
   dark hero; with the toolkit section above it they read as seams.
   Flatten the corner, tighten the gap, one intentional cadence. */
.revenue{ border-radius: 0; padding-top: clamp(70px, 9vh, 120px); padding-bottom: clamp(68px, 8.5vh, 100px); }

/* green star accent where the chapter kickers used to sit */
.jour-star{
  display: block;
  font-size: 1.38rem;
  line-height: 1;
  color: var(--green, #2CD192);
  margin-bottom: 1.5rem;
}

/* brand arrow link inside the journey copy cards (base rule is white, for the hero) */
.jour-copy .arrow-link{ margin-top: 1.15rem; color: var(--green-deep, #1E8E6E); font-size: 1rem; }
.jour-copy .arrow-link:hover{ color: var(--green, #2CD192); }

/* platform pills on the trio cards (chip look from the club landing page) */
.trio-meta{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: .5rem;
}
.trio-meta .trio-idx{ margin-bottom: 0; }
.trio-pills{ display: inline-flex; gap: 6px; }
.trio-pill{
  display: inline-flex; align-items: center;
  padding: .38em .72em .4em;
  border-radius: 999px;
  font-family: var(--display, sans-serif);
  font-size: .6rem; font-weight: 700; line-height: 1;
  letter-spacing: .14em;
  color: var(--green-deep, #1E8E6E);
  background: var(--green-ghost, rgba(44,209,146,.12));
  border: 1px solid rgba(30,142,110,.28);
}

/* ==================================================================
   HERO ORBS — floating glass chips around the player (B2B hero).
   Layered: entrance (orbIn) hands off to an endless slow bob (orbBob)
   on the inner element; JS parallax drives the outer .orb transform. */
.hero-orbs{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.orb{ position: absolute; will-change: transform; }
.orb-float{
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .95rem .55rem .6rem;
  border-radius: 999px;
  background: rgba(8, 14, 10, .42);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  animation:
    orbIn 1s var(--ease, cubic-bezier(.16, 1, .3, 1)) var(--ad, 1s) both,
    orbBob var(--bd, 8s) ease-in-out var(--bdl, 2.2s) infinite;
}
.orb-ic{
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: rgba(44, 209, 146, .16);
  border: 1px solid rgba(44, 209, 146, .35);
  color: var(--green, #2CD192);
}
.orb-ic svg{ width: 18px; height: 18px; }
.orb-tx{ display: flex; flex-direction: column; gap: .14rem; line-height: 1.15; white-space: nowrap; padding-right: .15rem; }
.orb-tx b{ font-family: var(--display, sans-serif); font-size: .8rem; font-weight: 700; letter-spacing: .01em; color: #fff; }
.orb-tx i{ font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .6); }
@keyframes orbIn{
  0%{ opacity: 0; transform: translateY(16px) scale(.92); filter: blur(6px); }
  100%{ opacity: 1; transform: none; filter: blur(0); }
}
@keyframes orbBob{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-9px) rotate(-.5deg); }
}
@media (max-width: 1180px){ .orb--wide{ display: none; } }
@media (max-width: 900px){ .hero-orbs{ display: none; } }
@media (prefers-reduced-motion: reduce){
  .orb-float{ animation: none; opacity: 1; }
}

.orb-ic--scan svg{ width: 21px; height: 21px; }

/* tighten the seam between the revenue section and the journey */
.jour{ padding-top: clamp(56px, 7vh, 96px); }

/* brand arrow link on the trio cards (base rule is white, for the hero) */
.trio-text .arrow-link{ margin-top: .9rem; font-size: .95rem; color: var(--green-deep, #1E8E6E); }
.trio-text .arrow-link:hover{ color: var(--green, #2CD192); }

/* header: on in-between widths the centered toggle can collide with
   the items beside it, so let it join the flex flow (space-between)
   instead of absolute screen-centering. Wide screens keep centering. */
@media (max-width: 1200px){
  .nav-mid{ position: static; transform: none; }
}

/* cream-stroke twin of each journey numeral: invisible on the cream,
   it draws a background-colored contour wherever the glyph crosses
   the photo or the copy card (mobile, where numerals ride on top) */
.jour-num.jour-num--line{
  display: none;
  mix-blend-mode: normal;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink, #101410); /* outline-only experiment; was: var(--cream, #f2f1ec) */
  z-index: 4;
}
@media (max-width: 880px){
  .jour-num.jour-num--line{ display: none; } /* stroke twin parked; switch to block to bring the contour back */
}