/* -----------------------------------------------------------
   Hero (sticky). One normalized progress 0..1 across the pin.
   Phases: dot -> title up -> typing -> cards.
----------------------------------------------------------- */
:root{
  --zr-hero-bg-light:#f5f7f6;
  --zr-hero-bg-dark:#0e2f27;
  --dot-offset-y: 24px;
}


.hero-pin{height:520vh;} /* runway for all phases */

.hero{
  position:sticky;top:0;height:100vh;width:100%;overflow:hidden;isolation:isolate;
  background:var(--hero-bg,var(--zr-hero-bg-light));

  /* JS-driven vars */
  --p:0;                         /* 0..1 full timeline */
  --bg-strength:0;               /* for bg rows */
  --dot-scale:1;                 /* radius multiplier */
  --dot-base:10px;               /* px */
  --dot-r: calc(var(--dot-base) * var(--dot-scale));

  /* phase vars (JS sets 0..1) */
  --title-up:0;                  /* slide "Oui. Transformons" up */
  --tele-up:0;                   /* kept at 0 (fixed) */

  /* title palette */
  --title-light:#fff;
  --title-dark:var(--zr-hero-bg-dark);
  --title-color:var(--title-dark);

  /* helpers */
  --marquee-x: calc(-70% + (var(--p) * 140%));

  /* dot center (computed by JS) */
  --dot-cx: 50vw;
  --dot-cy: 50vh;
}

/* ---------- Background rows ---------- */
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:1}
@supports ((mask-image: linear-gradient(#000,#000)) or (-webkit-mask-image: linear-gradient(#000,#000))) {
  .hero-bg{
    -webkit-mask-image: linear-gradient(90deg, transparent 0 12%, #000 28% 72%, transparent 88% 100%);
            mask-image: linear-gradient(90deg, transparent 0 12%, #000 28% 72%, transparent 88% 100%);
  }
}
.hero-bg::before,.hero-bg::after{
  content:"";position:absolute;top:0;bottom:0;width:18%;pointer-events:none;z-index:2
}
.hero-bg::before{left:0;background:linear-gradient(90deg,var(--hero-bg) 0%,var(--hero-bg) 10%,transparent 32%)}
.hero-bg::after{right:0;background:linear-gradient(270deg,var(--hero-bg) 0%,var(--hero-bg) 10%,transparent 32%)}

.hero-marquee{
  position:absolute;left:0;transform: translate3d(var(--marquee-x),0,0);
  white-space:nowrap;font-weight:800;letter-spacing:.035em;font-size:clamp(36px,8.8vw,116px);
  color:#879490;opacity:calc(0.015 + var(--bg-strength) * 0.25);
  filter:blur(calc(0.7px - var(--bg-strength) * 0.35px));
  will-change:transform,opacity,filter;
}
.hero-marquee--top{top:18%;transform:translate3d(var(--marquee-x),-50%,0)}
.hero-marquee--mid{top:50%;transform:translate3d(var(--marquee-x),-50%,0)}
.hero-marquee--bot{top:82%;transform:translate3d(var(--marquee-x),-50%,0)}
.hero-marquee span{margin-right:2.1rem}

/* ---------- Title (two stacked copies) ---------- */
.hero-inner{position:relative;z-index:4;height:100%}
.hero-title-wrap{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:4;
  transform: translate3d(0, calc(-115vh * var(--title-up)), 0);
}
.hero-title{
  margin:0;font-weight:800;line-height:.95;letter-spacing:-.02em;
  font-size:clamp(42px,10vw,120px);
  text-shadow:0 2px 14px rgba(0,0,0,.12);
  position:absolute;
  opacity: calc(1 - var(--title-up));
}
.hero-title--base{ color:var(--zr-hero-bg-dark) !important; z-index:3; }
.hero-title--inside{ color:#fff; z-index:4; }

/* Dot (period) */
.hero-title__period{
  position:relative; display:inline-block;
  width:0.32em; margin-left:0.01em; color:transparent;
}
.hero-title__period::before{
  content:""; position:absolute; left:50%; top:calc(50% + var(--dot-offset-y));
  width: calc(var(--dot-r) * 2); height: calc(var(--dot-r) * 2);
  transform: translate3d(-50%, -50%, 0);
  border-radius:50%;
  background: radial-gradient(circle at center, var(--zr-hero-bg-dark) 0 98%, rgba(0,0,0,0) 100%);
  will-change: width,height,transform;
  contain: paint;
}
/* White-title reveal only inside dot */
.hero-title--inside .hero-title__period::before{ content:none; }
.hero-title--inside{
  -webkit-mask-image: radial-gradient(
    circle var(--dot-r) at var(--dot-cx) calc(var(--dot-cy) + var(--dot-offset-y)),
    #000 98%, transparent 100%
  );
          mask-image: radial-gradient(
    circle var(--dot-r) at var(--dot-cx) calc(var(--dot-cy) + var(--dot-offset-y)),
    #000 98%, transparent 100%
  );
}

/* ---------- Inside-dot background ---------- */
.hero-bg--inside{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  -webkit-mask-image: radial-gradient(
    circle var(--dot-r) at var(--dot-cx) calc(var(--dot-cy) + var(--dot-offset-y)),
    #000 98%, transparent 100%
  );
          mask-image: radial-gradient(
    circle var(--dot-r) at var(--dot-cx) calc(var(--dot-cy) + var(--dot-offset-y)),
    #000 98%, transparent 100%
  );
}
.hero-bg--inside .hero-marquee{ color:#eef4f2; opacity:.85; filter:blur(0); }

/* ---------- Flash (disabled) ---------- */
.hero-flash{display:none!important}

/* ---------- State toggles ---------- */
.hero[data-inverted="true"]{--hero-bg:var(--zr-hero-bg-dark)}
.hero[data-contrast="light"] .hero-title--base{color:var(--zr-hero-bg-dark)}

/* Keep the dot green even when inverted */
.hero[data-inverted="true"] .hero-title__period::before{
  background: radial-gradient(circle at center, var(--zr-hero-bg-dark) 0 98%, rgba(0,0,0,0) 100%);
}

.hero[data-inverted="true"] .hero-bg,
.hero[data-inverted="true"] .hero-bg--inside{
  opacity:0;
}

/* Keep page edges dark while hero is active */
body.hero-dark-lock{ background: var(--zr-hero-bg-dark); }

/* ---------- Teleprompter ---------- */
.hero-typer{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px, 2.2vw, 26px);
  z-index:4; pointer-events:none;
  opacity:0; transform: translate3d(0, calc(-115vh * var(--tele-up)), 0);
  transition: opacity .2s linear;
}
.hero[data-typing="true"] .hero-typer{ opacity:1; }

.typer-line{
  font-weight:800; letter-spacing:-.02em;
  line-height:1.04;
  font-size:clamp(32px, 6.4vw, 88px);
  color:#fff; text-align:center;
  white-space:normal; max-width:min(78ch, 88vw);
  margin:0 auto;
  overflow-wrap:break-word; text-wrap:balance;
}
.hero-typer .typer-line:nth-child(3){
  font-size:clamp(30px, 5.8vw, 80px);
  line-height:1.06;
}
.typer-caret{
  display:inline-block; width:.04em; height:1em; translate:0 .12em;
  background:currentColor; margin-left:.22em; opacity:.95;
  animation:blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity:0 } }

/* ---------- Rising Badges (4) ---------- */
.hero-badges{
  position:absolute; inset:0; z-index:12; pointer-events:none; isolation:isolate;
  --edgeX: clamp(24px, 4vw, 56px);  /* horizontal margin from edges */
  --edgeY: clamp(20px, 4vh, 60px);  /* vertical padding from top before rise */
}
.hero-badges .badge{
  --p:0; --op:0; --baseY:58vh;
  position:absolute; top:0;
  width:min(38vw,560px);
  opacity:var(--op);
}

/* LEFT lane (1 & 3) */
.hero-badges .badge:nth-child(odd){
  left:calc(var(--edgeX) + 6vw);
  transform:translate3d(0, calc(var(--edgeY) + var(--baseY) - (var(--baseY) + 50vh) * var(--p)), 0);

}
.hero-badges .badge:nth-child(even){
  right:calc(var(--edgeX) + 6vw);
  transform:translate3d(0, calc(var(--edgeY) + var(--baseY) - (var(--baseY) + 50vh) * var(--p)), 0);

}

/* per-card base tracks (tweak freely) */
.hero-badges .badge:nth-child(1){ --baseY:54vh; }
.hero-badges .badge:nth-child(2){ --baseY:66vh; }
.hero-badges .badge:nth-child(3){ --baseY:60vh; }
.hero-badges .badge:nth-child(4){ --baseY:72vh; }

/* Card visuals */
.badge-card{ position:relative; display:block; border-radius:20px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35); outline:1px solid rgba(255,255,255,.12); }
.badge-media{ width:100%; aspect-ratio:5/3; background-size:cover; background-position:center;
  background-image: radial-gradient(80% 80% at 20% 20%, rgba(255,255,255,.18), transparent 55%),
                    linear-gradient(135deg,#0cb59b,#0a7c6b 65%,#095a4f); }

.badge-media{
  width:100%; aspect-ratio:5/3;
  background-size:cover; background-position:center;
  background-image:
    /* TOP: subtle diagonal stripes */
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.08) 0 2px,
      transparent 2px 8px
    ),
    /* MID: soft geometric spots */
    radial-gradient(220px 180px at 18% 24%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(180px 140px at 78% 22%, rgba(0,0,0,0.10), transparent 60%),
    /* BASE: original brand gradient */
    linear-gradient(135deg,#0cb59b,#0a7c6b 65%,#095a4f);
}

/* distinct palette per card (replace with images if you want) */
/* Card 2 — warm palette + conic wedges & dotted rings (distinct from card 1) */
/* Card 2 — warm palette + dotted radial circles only */
.hero-badges .badge:nth-child(2) .badge-media{
  background-image:
    repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,0.14) 0 2px, transparent 2px 14px),
    linear-gradient(135deg,#ff7a3d,#d83e24 65%,#a12a1a);
}

/* Card 3 — cool palette + isometric grid & corner glow (new look) */
.hero-badges .badge:nth-child(3) .badge-media{
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-60deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 14px),
    radial-gradient(220px 180px at 16% 18%, rgba(255,255,255,0.12), transparent 60%),
    linear-gradient(135deg,#7a86ff,#4353ff 65%,#2e38b8);
}

/* Card 4 — cyan palette + cross-hatch & highlight */
.hero-badges .badge:nth-child(4) .badge-media{
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.07) 0 1px, transparent 1px 8px),
    radial-gradient(200px 160px at 24% 24%, rgba(255,255,255,0.10), transparent 60%),
    linear-gradient(135deg,#46d3ff,#16a7e0 65%,#0b6ea1);
}
.badge-overlay{ position:absolute; inset:auto 0 0 0; padding:18px 22px 20px 22px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.25) 60%,rgba(0,0,0,.38) 100%);
  color:#fff; }
.badge-tags{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.badge-tags span{ display:inline-block; padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.15); color:#fff; font-size:12px; font-weight:700; letter-spacing:.015em; }
.badge-title{ margin:0 0 4px 0; font-weight:800; font-size:clamp(18px,2.2vw,26px); line-height:1.1;
  text-shadow:0 2px 12px rgba(0,0,0,.35);}
.badge-desc{ margin:0; color:#e9f6f3; font-size:clamp(13px,1.8vw,16px); line-height:1.3; }

@media (max-width: 960px){
  /* Title: force two lines and keep it fully in view */
  .hero-title-wrap{ justify-items:center; padding-inline:6vw; }
  .hero-title{
  width:15ch;
  max-width:85vw;
  text-align:center;
  left:50%;
  transform:translateX(-50%);  /* absolute-center the title box */
  margin:0;                     /* margins don't center abspos elements */
}
  .hero-title .hero-title__text{ display:inline; white-space:normal; }
  :root{ --dot-offset-y:2px; } /* dot aligned with “transformons” */

  /* Background rows: a touch stronger on mobile */
  .hero-marquee{
    opacity: calc(0.12 + var(--bg-strength) * 0.60);
    filter:  blur(calc(0.3px - var(--bg-strength) * 0.15px));
  }
	
	/* Slightly stronger only for top & bottom phrases */
.hero-marquee--top,
.hero-marquee--bot{
  opacity: calc(0.25 + var(--bg-strength) * 0.72);
}

  /* Cards: single centered lane (keep) */
  .hero-badges .badge{ left:var(--edgeX); right:var(--edgeX); width:auto; }
  .hero-badges .badge:nth-child(even){ right:var(--edgeX); }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-marquee{transform:none;opacity:.18}
  .hero-title-wrap{transform:none}
  .hero-title{opacity:1}
  .hero-typer{opacity:1; transform:none}
  .typer-caret{display:none}
}

/* ===== Wipe Showcase (new pinned section) ===== */
.wipe-pin{ height:260vh; margin-top:-24vh;; } /* overlaps hero so wipe starts immediately */
.wipe-stage{
  position:sticky; top:0; height:100vh;
  isolation:isolate;
  background:transparent;   /* show hero behind */
  color:#0e2f27;
  z-index:30;               /* above hero */
}
.wipe-bg{ position:absolute; inset:0; background:#0e2f27; }
.wipe-typo{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.wipe-typo .typo-big{ font-weight:800; letter-spacing:-.02em; line-height:.9; text-align:center; color:#0e2f27; opacity:.08; font-size:clamp(36px,12vw,84px); }
.wipe-typo .typo-sub{ margin-top:.6rem; color:#0e2f27; opacity:.25; font-weight:600; text-align:center; font-size:clamp(14px,4.2vw,26px); }

.wipe-overlay{
  position:absolute; inset:0; background:#f5f7f6;
  -webkit-clip-path: var(--wipe-clip); clip-path: var(--wipe-clip);
  transition: clip-path .04s linear;
}

/* Boards (laterally sliding after wipe) */
.wipe-boards{
  position:absolute; inset:0; pointer-events:none;
  z-index:3; /* above .wipe-overlay (z-index:2) and .wipe-ghost (z-index:1) */
}
.wipe-board{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(840px,92vw); border-radius:24px;
  background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.25); overflow:hidden; opacity:0;
}

.wipe-board__grid{ display:grid; grid-template-columns:2fr 1fr; }
@media (max-width: 900px){ .wipe-board__grid{ grid-template-columns:1fr; } }

.wipe-board__text{ padding:24px 28px 20px; }
.wipe-board__kicker{ font-size:12px; font-weight:800; letter-spacing:.12em; color:#0e2f27cc; }
.wipe-board__title{ margin:.25rem 0; font-weight:800; font-size:clamp(20px,3vw,28px); color:#0e2f27; }
.wipe-board__summary{ color:#0e2f27cc; font-size:15px; line-height:1.45; }

.wipe-board__bullets{ margin:10px 0 0 0; padding:0; list-style:none; }
.wipe-board__bullets li{ display:flex; gap:8px; align-items:flex-start; color:#0e2f27; font-size:14px; margin:.25rem 0; }
.wipe-board__bullets li::before{ content:''; width:6px; height:6px; border-radius:50%; background:#0e2f27; margin-top:.4em; }

.wipe-board__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.wipe-board__chip{ padding:6px 10px; border-radius:999px; background:#0e2f2714; color:#0e2f27; border:1px solid #0e2f2720; font-size:12px; font-weight:600; }

.wipe-board__strip{ background: linear-gradient(135deg,var(--c1),var(--c2)); position:relative; }
.wipe-board__strip::after{
  content:'';
  position:absolute;
  inset:16px;
  border-radius:16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
}
	
	

  .wipe-hero-ghost{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; z-index:0; /* under the overlay */
  text-align:center;
}
.wipe-hero-ghost .line{
  font-weight:800; letter-spacing:-.01em; line-height:1.06;
  font-size:clamp(28px, 5.8vw, 96px);
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}
.wipe-hero-ghost .line + .line{ margin-top:.28em; }
	
	/* Freeze the hero sentence inside the wipe stage */
.wipe-stage{ z-index:30; } /* ensure stage sits above the hero */

.wipe-ghost{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
  z-index:1;                 /* under the white wedge, above the hero */
  text-align:center;
}
.wipe-ghost__line{
  font-weight:800; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(36px, 7.2vw, 116px);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.24);
  opacity: var(--ghost-op, 0);          /* ← add this */
  transition: opacity .08s linear;      /* optional, makes it smooth */
}

/* keep the wedge/overlay above the ghost */
.wipe-overlay{ position:absolute; inset:0; z-index:2; }

/* ===== KPI Narrative (pinned, centered, small gauge) ===== */
.kpi-pin{ height:300vh; }                  /* enough runway for 3 KPIs */
.kpi-stage{ position:sticky; top:0; height:100vh; z-index:20; }
.kpi-center{ position:absolute; inset:0; display:grid; place-items:center; background:transparent; }
.kpi-card{
  width:min(1100px,94vw);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  color:#fff; pointer-events:auto;
}

/* label / value */
.kpi-label{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:none; opacity:.8; }
.kpi-gauge svg{ width:clamp(160px, 22vmin, 240px); height:auto; display:block; }
.kpi-value{ margin-top:.35rem; font-weight:800; line-height:1; }
.kpi-value .kpi-num{ font-size:clamp(64px, 11vmin, 104px); }
.kpi-value .kpi-suf{ font-size:clamp(28px, 4.4vmin, 44px); margin-left:.24rem; font-weight:800; }
.kpi-caption{ margin-top:.25rem; font-size:13px; color:rgba(255,255,255,.7); }

/* tags */
.kpi-tags{ margin-top:.7rem; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.kpi-tags .tag{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20); font-size:12px; }

/* phrase (typed) */
.kpi-phrase{ margin-top:.65rem; min-height:1.7em; font-size:clamp(15px, 2.2vmin, 18px); font-weight:600; }

/* CTAs */
.kpi-ctas{ margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.kpi-evidence{ padding:.55rem 1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06); color:#fff; text-decoration:none; font-weight:600; font-size:14px; }
.kpi-evidence:hover{ background:rgba(255,255,255,.12); }
.kpi-contact{ padding:.55rem 1rem; border-radius:999px; background:#fff; color:#0e2f27; text-decoration:none;
  font-weight:800; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.kpi-contact:hover{ background:#f3f3f3; }

/* dots */
.kpi-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:8px; display:flex; gap:6px; opacity:.65; }
.kpi-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.12); }
.kpi-dots span.is-active{ background:rgba(255,255,255,.28); }

/* motion (JS drives transforms via inline style) */
.kpi-card{ will-change: transform, opacity; }
/* make sure the KPI gauge never expands to 100% because of global svg rules */
.kpi-gauge svg{ width:clamp(160px,22vmin,240px) !important; height:auto !important; }
.kpi-stage svg{ max-width:none !important; }

/* ===== Partners (Scatter -> Grid logos) ===== */
.partners-pin{ height:180vh; } /* desktop/default runway */
.partners-stage{
  position:-webkit-sticky; position:sticky;
top:0;

/* robust order of fallbacks for iOS/Chrome toolbars */
height:100vh;        /* basic fallback */
height:100dvh;       /* dynamic viewport */
height:100svh;       /* small viewport (iOS 16+/Chrome 108+) */
min-height:100vh;

  background:var(--zr-hero-bg-dark);
  color:#fff;
  z-index:18;

  /* avoid scroll-chain/bounce that can “unstick” on mobile */
  overscroll-behavior:contain;
}
.partners-center{ position:absolute; inset:0; display:grid; place-items:center; }

.partners-title{
  position:absolute; top:10vh; left:50%; transform:translateX(-50%);
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  font-size:clamp(14px, 2.6vw, 18px); color:rgba(255,255,255,.9);
}

.partners-area{ position:relative; width:min(940px,92vw); height:420px; }
.partner{
  position:absolute; left:50%; top:50%;
  display:grid; place-items:center;
  width:160px; height:100px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  opacity:.7; will-change:transform,opacity;
}
.partner img{
  max-width:72%; max-height:62%;
  filter: invert(1) brightness(1.2) saturate(0) contrast(1.1);
  opacity:.95;
}
.partner:focus-visible{ outline:2px solid #fff; outline-offset:2px; border-radius:18px; }

/* tablet */
@media (max-width: 860px){
  /* give a bit more runway so the section “feels locked” */
  .partners-pin{ height:200vh; }
  .partners-area{ height:460px; }
  .partner{ width:144px; height:92px; }
}

/* phones */
@media (max-width: 560px){
  /* longest runway on small screens; sticky uses 100svh */
  .partners-pin{ height:240vh; }
  .partners-stage{ height:100svh; min-height:100vh; }
  .partners-area{ height:560px; }
  .partner{ width:132px; height:84px; }
}





/* ===== Apply Invite Ribbon (pinned, calm) ===== */
.join-pin{ height:200vh; } /* runway */
@media (max-width: 860px){ .join-pin{ height:220vh; } }
@media (max-width: 560px){ .join-pin{ height:240vh; } }

.join-stage{
  position:-webkit-sticky; position:sticky; top:0;
  height:100svh; min-height:100vh;
  background:var(--zr-hero-bg-dark); color:#fff; z-index:16;
  overscroll-behavior:contain;
}
.join-center{ position:absolute; inset:0; display:grid; place-items:center; }
.join-wrap{ width:min(960px,92vw); }

.join-head{ text-align:center; margin-bottom:12px; opacity:0; transform:translateY(12px); }
.join-kicker{ font-size:11px; font-weight:800; letter-spacing:.18em; color:rgba(255,255,255,.7); }
.join-title{ margin:.2rem 0 0; font-weight:800; letter-spacing:-.01em; line-height:1.1;
  font-size:clamp(24px,4.6vw,36px); }
.join-sub{ margin:.25rem 0 0; color:rgba(255,255,255,.7); font-size:14px; }

.join-promises{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:12px 0; }
.join-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  font-weight:700; font-size:13px;
  opacity:0; transform:translateY(10px);
}
.join-pill .dot{ width:6px; height:6px; border-radius:50%; background:#fff; opacity:.85; display:inline-block; }

.join-ribbon{ width:min(720px,92vw); margin:10px auto 0; }
.join-ribbon__track{ height:8px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.join-ribbon__bar{ height:100%; background:rgba(255,255,255,.28); width:0%; }
.join-ribbon__pct{ text-align:right; font-size:11px; letter-spacing:.18em; color:rgba(255,255,255,.6); margin-top:6px; }

.join-cta{
  width:min(680px,92vw);
  margin:16px auto 0;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  opacity:0; transform:translateY(16px) scale(.985);
}
.join-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.55rem 1rem; border-radius:999px; font-weight:800; text-decoration:none;
  transition:transform .14s cubic-bezier(.2,.8,.2,1), background .14s linear, color .14s linear, border-color .14s linear;
}
.join-btn--primary{ background:#fff; color:#0e2f27; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.join-btn--primary:hover{ background:#f3f3f3; }
.join-btn--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.22); }
.join-btn--ghost:hover{ background:rgba(255,255,255,.06); }

.join-head, .join-pill, .join-cta, .join-ribbon__bar{ will-change:transform,opacity; }