/* ===========================================================================
   page-xperiods — xperiods landing page (On-demand experts for periods).
   Dark cinematic theme on the site's design tokens (--brand #C947E1, deep
   purple/navy gradients). CSP-strict: external stylesheet only, no inline
   styles. Reuses shared components where possible (hero hero--sub, s-light /
   s-dark sections, fa-eyebrow, s-heading, core_solution_cards, s-cta / cta-row,
   footer); this file only adds the xperiods-specific pieces:
   hero logo + badge + pills + CTA, the value-prop / why grids, the accent
   wording (XCLR8 / XCLR8ED), the closing statement and the network stat band.

   NOTE: "Hubot Sans SemiBold Wide" is not self-hosted on this site (strict CSP,
   no external fonts). Wide-caps brand treatment uses var(--font-hero) / the
   site heading font to stay on-brand — same convention as the other pages.
   =========================================================================== */

/* ---- Accent wording: XCLR8 / XCLR8ED, magenta ------------------------------ */
.xp-accent {
  color: var(--brand);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.s-light .xp-accent { color: #b327cf; }
/* Inside the magenta CTA button the accent must stay white for contrast */
.xp-btn .xp-accent,
.s-light .xp-btn .xp-accent { color: #ffffff; }

/* "xperiods" / "XPERIODS" wordmark inside prose — subtle weight, never coloured
   so it reads as a brand, not a link. */
.xp-mark { font-weight: 700; }

/* Intro heading: centre both lines (default introhead is left-aligned) */
#intro .fa-introhead-center { text-align: center; }

/* "xperiods" eyebrow sits directly above the word "Interim" (not centred over
   the whole heading). Anchored to the first heading line; the heading keeps a
   top margin so the eyebrow occupies the space it had in normal flow. */
.xp-introline1 { position: relative; }
.xp-eyebrow-over {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 1rem;
}
#intro .xp-intro-head { margin-top: 2.8rem; }

/* ===========================================================================
   1) HERO (logo only) + LEAD light section (headline, badge, pills, CTA)
   =========================================================================== */
.xp-hero { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

.xperiods-logo {
  display: block;
  width: clamp(220px, 38vw, 420px);
  height: auto;
  margin: 0.5rem auto;
  /* slightly brighter + soft glow so the logo reads clearly on the dark hero */
  filter: brightness(1.12) drop-shadow(0 0 26px rgba(201, 71, 225, 0.4));
}

/* LEAD — centred block on the first light section */
.xp-lead__inner {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}
/* headline group: centred as a block, left-aligned inside, so the
   xperiods pill sits left-aligned directly above the word "On-demand" */
.xp-lead__head {
  display: inline-block;
  text-align: left;
}
.xp-eyebrow-pill {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.35rem 1rem;
  border-radius: 2em;
  background: rgba(201, 71, 225, 0.1);
  border: 1px solid rgba(201, 71, 225, 0.35);
  color: #7a2d9b;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.xp-hero__title {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 0.9rem;
}
/* keep the last word + dot-ring on the same line */
.xp-nowrap { white-space: nowrap; }

.xp-hero__lead {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  max-width: 760px;
  margin: 0 auto 1.5rem;
  line-height: 1.5;
}

/* Light-section variants (lead block sits on .s-light) */
.s-light .xp-hero__title { color: #14141C; }
.s-light .xp-hero__lead { color: #14141C; font-weight: 600; }

/* Tagline badge */
.xp-badge {
  display: inline-block;
  background: rgba(201, 71, 225, 0.15);
  border: 1px solid rgba(201, 71, 225, 0.4);
  border-radius: 2em;
  padding: 0.5rem 1.4rem;
  margin-bottom: 1.5rem;
  color: var(--brand);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Tag pills row */
.xp-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 2rem;
}
.xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 71, 225, 0.35);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.xp-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
/* Light-section pill variant */
.s-light .xp-pill {
  background: rgba(201, 71, 225, 0.06);
  border-color: rgba(201, 71, 225, 0.3);
  color: #2a2440;
}

/* Primary magenta CTA button (distinct from the navy .s-cta__btn) */
.xp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 2.6rem;
  /* same purple as the xperiods logo (~#522080) */
  background: linear-gradient(135deg, #6328a0 0%, #522080 50%, #3c1860 100%);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(82, 32, 128, 0.5), 0 10px 30px rgba(82, 32, 128, 0.3);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), filter 0.28s var(--ease);
}
.xp-btn:hover,
.xp-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 0 22px rgba(99, 40, 160, 0.7), 0 14px 38px rgba(82, 32, 128, 0.4);
  outline: none;
}

/* ===========================================================================
   2) INTRO — division note
   =========================================================================== */
.xp-division {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7a2d9b;
}
/* dash on the left AND right of the centred division note */
.xp-division::before,
.xp-division::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--brand);
  flex-shrink: 0;
}

/* Two-button row under the division note (sentence-case so "xperiods" stays
   lowercase). First = solid purple, second = ghost. */
.xp-btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.8rem;
}
.xp-btn-row .xp-btn {
  text-transform: none;
  letter-spacing: 0.01em;
}
.xp-btn--ghost {
  background: transparent;
  color: #522080;
  border: 1.5px solid rgba(82, 32, 128, 0.45);
  box-shadow: none;
}
.xp-btn--ghost:hover,
.xp-btn--ghost:focus-visible {
  background: rgba(82, 32, 128, 0.07);
  border-color: #522080;
  box-shadow: 0 8px 22px rgba(82, 32, 128, 0.18);
  filter: none;
}

/* ===========================================================================
   3) LOCAL KNOWLEDGE — accent strapline
   =========================================================================== */
.xp-strap {
  display: block;
  margin: 0.2rem 0 1.4rem;
  font-family: var(--font-hero);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand);
}

/* #reach: heading stays centered, but the eyebrow sits above its first word ("Local").
   The wrapper shrinks to the heading's width and is centered as a unit (via the
   parent's text-align:center), so the heading doesn't move; inside it everything is
   left-aligned, putting the eyebrow's left edge exactly above "Local". */
#reach .xp-reach-head { display: inline-block; text-align: left; }
#reach .s2972d601c9:not(#_):not(#_) { text-align: left; }
#reach .fa-eyebrow { align-self: flex-start; }

/* ===========================================================================
   4) VALUE-PROP GRID (Zero Tolerance for Failure)  +  5) WHY XPERIODS GRID
   Shared card look: deep purple/navy gradient, magenta top accent, icon disc.
   =========================================================================== */
.xp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.6rem;
}
.xp-grid--why { grid-template-columns: repeat(4, 1fr); }

.xp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.7rem;
  background: linear-gradient(155deg, #322d52 0%, #272c4a 52%, #1f2338 100%);
  border: 1px solid rgba(201, 71, 225, 0.18);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.xp-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), rgba(74, 123, 200, 0.6) 60%, rgba(201, 71, 225, 0) 100%);
  opacity: 0.75;
  transition: opacity 0.28s var(--ease);
}
.xp-card:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(201, 71, 225, 0.45);
}
.xp-card:hover::before { opacity: 1; }

/* Icon disc */
.xp-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: rgba(201, 71, 225, 0.14);
  border: 1px solid rgba(201, 71, 225, 0.4);
  color: var(--brand);
}
.xp-card__icon svg { width: 26px; height: 26px; }

/* Numbered variant (Why XPERIODS) */
.xp-card__num {
  font-family: var(--font-hero);
  font-size: 2.6rem;
  line-height: 1;
  margin: 0 0 0.5rem;
  background: linear-gradient(135deg, #d564ea 0%, #8a5bc4 50%, #4a7bc8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xp-card__title {
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1.25;
  color: #ffffff;
}
.xp-card__text {
  margin: 0;
  font-size: 0.97rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------------------
   Carousel (Why xperiods) — scroll-snap track + prev/next buttons + dots.
   CSP-strict: behaviour wired in page-xperiods.js via addEventListener.
   --------------------------------------------------------------------------- */
.xp-carousel {
  position: relative;
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.xp-carousel__viewport {
  flex: 1 1 auto;
  overflow: hidden;
}
.xp-carousel__track {
  display: flex;
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* hide native scrollbar (Firefox / IE) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.4rem 0.2rem 1rem;
}
.xp-carousel__track::-webkit-scrollbar { display: none; }

/* 3 cards per view on desktop (gap accounted for) */
.xp-carousel__slide {
  flex: 0 0 calc((100% - 2 * 1.4rem) / 3);
  scroll-snap-align: start;
}

/* Round nav buttons */
.xp-carousel__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6328a0 0%, #522080 50%, #3c1860 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 22px rgba(82, 32, 128, 0.3);
  cursor: pointer;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease), opacity 0.2s var(--ease);
}
.xp-carousel__btn:hover:not(:disabled),
.xp-carousel__btn:focus-visible:not(:disabled) {
  transform: scale(1.08);
  filter: brightness(1.12);
  outline: none;
}
.xp-carousel__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.xp-carousel__btn svg { width: 22px; height: 22px; }

/* Dots */
.xp-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.4rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.xp-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(82, 32, 128, 0.3);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.xp-carousel__dot.is-active {
  background: var(--brand);
  transform: scale(1.25);
}

@media (max-width: 900px) {
  .xp-carousel__slide { flex-basis: calc((100% - 1.4rem) / 2); }
}
@media (max-width: 600px) {
  .xp-carousel__slide { flex-basis: 100%; }
  .xp-carousel__btn { width: 38px; height: 38px; }
}

/* Big closing statement under the value props */
.xp-statement {
  max-width: 900px;
  margin: 3rem auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.4;
  color: #000000;
}
.xp-statement strong { color: var(--brand); font-weight: 700; }

/* ===========================================================================
   6) NETWORK STAT BAND
   =========================================================================== */
.xp-statband {
  text-align: center;
  /* slimmer band — less vertical padding than the default section */
  padding-top: clamp(2.6rem, 5vw, 4rem);
  padding-bottom: clamp(2.6rem, 5vw, 4rem);
  background:
    radial-gradient(circle 600px at 50% 0%, rgba(201, 71, 225, 0.18) 0%, transparent 70%),
    linear-gradient(160deg, #2b2150 0%, #1c1838 60%, #16142b 100%);
}
.xp-statband__num {
  display: block;
  font-family: var(--font-hero);
  font-size: clamp(3.6rem, 11vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #f08bff 0%, #c947e1 45%, #7a4fb8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(201, 71, 225, 0.4));
}
.xp-statband__label {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  font-weight: 600;
  color: #ffffff;
}
/* Statband strapline styled like a section heading (with the magenta dot-ring) */
.xp-statband__head {
  margin: 1.3rem 0 0;
}
/* second line minimally smaller than the first */
.xp-statband__line2 { font-size: 0.85em; }

/* ===========================================================================
   7) CLOSING CTA — centred statement variant
   =========================================================================== */
.xp-cta { text-align: center; }
.xp-cta__statement {
  max-width: 820px;
  margin: 0 auto 2rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.3;
  color: #ffffff;
}
.xp-cta__statement strong { color: var(--brand); font-weight: 700; }
/* "SOLUTION" — larger wordmark with the spinning dot-ring after it */
.xp-cta__solution {
  display: inline-block;
  margin-top: 0.5em;
  font-family: var(--font-hero);
  font-weight: 800;
  font-size: 1.5em;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--brand);
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1023px) {
  .xp-grid,
  .xp-grid--why { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .xp-grid,
  .xp-grid--why { grid-template-columns: 1fr; }
}