/* ==========================================================================
   Unterseite BEYOUTIFUL – baut auf style.css auf (Tokens, Header, Footer, Komponenten).
   Dramaturgie: Morgenrot-Auftakt → Haltung → Veränderung → Erwartung →
   "Dazwischen" (drei Monate als Linie) → Investition → Coffee & Soul Date (Morgenrot als Klammer).
   ========================================================================== */

.page-bey { --dawn: #F1DEDA; }

/* Gemeinsame kleine Bausteine */
.bp-label { font-size: 0.9rem; letter-spacing: 0.04em; color: var(--taupe); margin-bottom: 1.25rem; }
.page-bey .section h2 { font-size: calc(clamp(2.2rem, 4.2vw, 3.8rem) * var(--display-scale)); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   Auftakt
   -------------------------------------------------------------------------- */

.bp-hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--cocoa);
  overflow-x: clip;   /* Sand-Leinwand des Titels ragt seitlich über */
}
.bp-hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--dawn);
  pointer-events: none;
}
/* heller Hof hinter dem Text */
.bp-hero-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 52% 32% at 50% 44%, rgba(248, 243, 239, 0.65), rgba(248, 243, 239, 0) 100%);
}
/* unten in den Sand auslaufen */
.bp-hero-scene::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  height: 30svh;
  background: linear-gradient(to bottom, rgba(248, 243, 239, 0) 0%, rgba(248, 243, 239, 0.6) 55%, var(--sand-50) 100%);
}
.bp-hero-bg {
  position: absolute;
  left: 0; right: 0;
  top: 40svh;
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
}
.bp-hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  mix-blend-mode: multiply;
  opacity: 0.85;
}
/* kein z-index/transform/opacity am Container (Stapelkontext): sonst mischt sich der Titel nicht mit dem Video.
   Liegt trotzdem über der Szene (z-index 0), weil er später im Dokument steht. Rausscrollen per --out (main.js) */
.bp-hero-inner { position: relative; padding-top: 6rem; padding-bottom: 18svh; --out: 0; }
.bp-hero-inner > * { translate: 0 calc(var(--out) * -80px); filter: opacity(calc(1 - var(--out))); }
/* Kicker (27. Oktober 2026): unter der Wortmarke und "The Presence Method", über dem Lead (vorher über dem Titel) */
.bp-kicker {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.15rem, 1.6vw, 1.5rem) * var(--display-scale));
  letter-spacing: 0.06em;
  color: var(--rose-deep);
  margin: 3rem 0 0.6rem;   /* Abstand zur Wortmarke (27. Oktober 2026, vorher 1.6rem) */
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.bp-hero-inner { --bw: clamp(18rem, 50vw, 52rem); }   /* Breite der Wortmarke, Logo und "The Presence Method" rechnen damit */
/* Wortmarke seit 30. Oktober 2026 nach Thorstens neuem Logo (assets/logo/beyoutiful-logo.svg, Original in
   Material/beyoutiful-logo-new.svg), in drei Teilen wegen der Effekte. Maße in Wortbreiten (357,29 Einheiten).
   Annyma-Logo (beyoutiful-mark.svg): 22,76 % der Wortbreite, Mitte 0,16 % links, Unterkante 4,39 % der
   Wortbreite unter der Wort-Oberkante (taucht zwischen die Oberlängen ein) */
.bp-mark {
  display: block;
  position: relative;
  left: calc(var(--bw) * -0.0016);
  width: calc(var(--bw) * 0.2276);
  height: auto;
  margin: 0 auto calc(var(--bw) * -0.0439);
}
/* Wortmarke "Beyoutiful" (27. Oktober 2026, statt BEYOUTIFUL in Fraunces): Fläche in Wortgröße, das Wort als
   Maske (--bey-word in style.css). Text nur für Screenreader. */
.bp-title {
  width: var(--bw);
  aspect-ratio: 357.29 / 88.97;
  margin: 0 auto !important;
  -webkit-mask: var(--bey-word) center / 100% 100% no-repeat;
  mask: var(--bey-word) center / 100% 100% no-repeat;
  /* Video und Morgenrot scheinen durch die Buchstaben, wo der Clip hinter dem Titel liegt */
  mix-blend-mode: multiply;
  /* Wort gefüllt mit der Palette des Übergangsrings (Farbwolken: Pflaume, Beere, Hellrosa, Hauch Aprikose),
     die langsam durch die Buchstaben wandern; dieselben Farben wie die Sand-Körner, die darin landen.
     Wolken mittel bis dunkel halten, helle nur schmal: sonst wird der Titel auf dem Morgenrot zu blass. */
  background:
    radial-gradient(18% 110% at 8% 45%, #7E3658 0%, rgba(126, 54, 88, 0) 100%),
    radial-gradient(14% 120% at 24% 30%, #E39BBE 0%, rgba(227, 155, 190, 0) 100%),
    radial-gradient(16% 110% at 40% 70%, #9C486E 0%, rgba(156, 72, 110, 0) 100%),
    radial-gradient(10% 90% at 55% 35%, #E3A27E 0%, rgba(227, 162, 126, 0) 100%),
    radial-gradient(16% 120% at 70% 60%, #6E2E4C 0%, rgba(110, 46, 76, 0) 100%),
    radial-gradient(13% 110% at 84% 30%, #DD8DB4 0%, rgba(221, 141, 180, 0) 100%),
    radial-gradient(16% 110% at 96% 65%, #7E3658 0%, rgba(126, 54, 88, 0) 100%),
    #B0517B;
  background-size: 220% 100%;
  /* negativer Start: die Aprikose-Wolke steht schon rechts im Wort und zieht sofort sichtbar durch */
  animation: bp-title-drift 22s ease-in-out -9s infinite alternate;
}
@keyframes bp-title-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .bp-title { animation: none; } }
/* "The Presence Method" mit Linien links und rechts (beyoutiful-method.svg): 100,2 % der Wortbreite, Oberkante
   21,76 % der Wortbreite unter der Wort-Oberkante (reicht neben dem y-Schwung in die Wortfläche hinein) */
.bp-method {
  display: block;
  width: calc(var(--bw) * 1.002);
  height: auto;
  margin: calc(var(--bw) * -0.0315) auto 0;
}
/* Mobil größer, sonst wird "The Presence Method" (ein Drittel der Wortbreite) unlesbar klein */
@media (max-width: 600px) { .bp-hero-inner { --bw: min(88vw, 26rem); } }
.bp-hero .lead { margin-inline: auto; max-width: 34em; text-wrap: balance; }   /* kein einzelnes Wort in Zeile 2 */
/* Scroll-Hinweis in Dunkelrosé statt CI-Pink (heller Grund: Pink wäre dort zu blass) */
.bp-cue { --cue: 156, 72, 110; }

/* --------------------------------------------------------------------------
   Haltung
   -------------------------------------------------------------------------- */

.bp-intro .grid { row-gap: 3rem; align-items: start; }
.bp-statement {
  grid-column: 1 / span 9;
  font-size: calc(clamp(2.2rem, 4.6vw, 4.8rem) * var(--display-scale)) !important;
  line-height: 1.08;
  margin-bottom: 0 !important;
}
.bp-statement .w { display: inline-block; white-space: pre; }
.bp-intro-copy { grid-column: 7 / span 6; }
.bp-intro-copy p:not(.lead) { max-width: 32em; }
.bp-band {
  margin-top: clamp(4rem, 8vw, 7rem);
  margin-bottom: 0;
  aspect-ratio: 2.39 / 1;
  overflow: hidden;
  background: var(--sand-100);
}
/* Überstand für die Parallaxe oben und unten verteilt (30. Oktober 2026): vorher nur unten, dann zeigte sich oben
   ein Streifen Grund, solange data-parallax das Bild nach unten schiebt */
.bp-band img { position: relative; top: -9%; width: 100%; height: 118%; object-fit: cover; object-position: 50% 50%; }

/* --------------------------------------------------------------------------
   Was sich verändert – drei Zeilen wie der Angebots-Index
   -------------------------------------------------------------------------- */

/* Kopf im selben Raster wie die Zeilen darunter (8. Oktober 2026): der Text rechts beginnt bündig mit den
   Listen und steht senkrecht mittig zur Überschrift */
.bp-head {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: 2.5rem;
  row-gap: 2rem;
  align-items: center;
  margin-bottom: 3.5rem;
}
.bp-head h2 { grid-column: 1 / span 2; margin-bottom: 0 !important; }
.bp-head p { grid-column: 3; max-width: 32em; margin: 0; }

.bp-shift-row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem 2.5rem;
  align-items: baseline;
  padding: 2.5rem 0;
  border-top: 1px solid var(--sand-200);
}
.bp-shift-row:last-child { border-bottom: 1px solid var(--sand-200); }
.bp-num { font-size: 0.9rem; color: var(--taupe); font-variant-numeric: tabular-nums; }
.bp-shift-row h3 { font-size: calc(clamp(1.9rem, 3vw, 2.9rem) * var(--display-scale)); }
.bp-shift-row ul { display: grid; gap: 0.6rem; }
.bp-shift-row li { position: relative; padding-left: 1.5rem; }
/* kleiner Ring statt Aufzählungspunkt: das Kreis-Motiv als Haarlinie */
.bp-shift-row li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.45rem; height: 0.45rem;
  border: 1px solid var(--rose-deep);
  border-radius: 50%;
  opacity: 0.7;
}
.bp-shift-end { margin-top: clamp(3.5rem, 6vw, 5rem); text-align: center; }
.bp-shift-end p {
  max-width: 30em;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.4rem, 2.2vw, 2rem) * var(--display-scale));
  line-height: 1.3;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.bp-shift-end em { color: var(--head-color); }

/* --------------------------------------------------------------------------
   Was Dich erwartet
   -------------------------------------------------------------------------- */

.bp-expect .grid { row-gap: 3rem; align-items: start; }
.bp-expect-figure {
  grid-column: 1 / span 5;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--sand-100);
  position: sticky;
  top: 7.5rem;
}
.bp-expect-figure img { width: 100%; height: 118%; object-fit: cover; }
.bp-expect-copy { grid-column: 7 / span 6; }
.bp-expect-copy p:not(.lead) { max-width: 32em; }
.bp-incl { margin-top: 3rem; }
.bp-incl-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding: 1.1rem 0;
  border-top: 1px solid var(--sand-200);
}
.bp-incl-row:last-of-type { border-bottom: 1px solid var(--sand-200); }
.bp-incl-row span:first-child { font-weight: 400; }
.bp-incl-row span:last-child { font-size: 0.95rem; color: var(--taupe); text-align: right; }
.bp-where { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   Dazwischen – drei Monate als Linie
   -------------------------------------------------------------------------- */

.bp-between { text-align: center; }
.page-bey .section .bp-quote {
  max-width: 17em;
  margin-inline: auto;
  font-size: calc(clamp(2.4rem, 5vw, 5rem) * var(--display-scale));
  line-height: 1.08;
  margin-bottom: 2rem;
}
.bp-between-copy p { max-width: 34em; margin-inline: auto; }

.bp-months { margin-top: clamp(4rem, 8vw, 6.5rem); text-align: left; }
.bp-month-labels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-bottom: 1.75rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(1.35rem * var(--display-scale));
  color: var(--head-color);
  text-align: center;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
/* 12. Oktober 2026: Zeitachse über sechs Monate. Monat 1 bis 3 = Grundprogramm (durchgezogen),
   Monat 4 bis 6 = optionale Verlängerung (gestrichelt, Beschriftung zurückgenommen) */
.bp-phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cocoa);
  text-align: center;
}
.bp-phase--opt, .bp-month--opt { opacity: 0.55; }
.bp-line {
  position: relative;
  height: 1px;
  background:
    linear-gradient(to right, var(--sand-200) 50%, transparent 50%),
    repeating-linear-gradient(90deg, var(--sand-200) 0 6px, transparent 6px 12px);
  margin-bottom: 4.5rem;
}
/* Füllung per clip-path (main.js), nicht scaleX: sonst würden die Striche beim Zeichnen gestaucht */
.bp-line-fill {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--rose-deep) 50%, transparent 50%),
    repeating-linear-gradient(90deg, var(--rose-deep) 0 6px, transparent 6px 12px);
  opacity: 0.7;
}
.bp-tick {
  position: absolute;
  left: calc(var(--at) * 100%);
  top: -0.6rem;
  width: 1px;
  height: 1.2rem;
  background: var(--sand-200);
}
.bp-session {
  position: absolute;
  left: calc(var(--at) * 100%);
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
}
/* Ring: leer, solange die Linie ihn nicht erreicht hat, dann füllt er sich in Rosé */
.bp-session i {
  display: block;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--rose-deep);
  background: var(--sand-50);
  transition: background-color 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.bp-session.is-reached i { background: var(--rose-soft); transform: scale(1.15); }
.bp-session--opt i { border-style: dashed; }
.bp-session--opt b { opacity: 0.7; }
/* Grenze nach drei Monaten: etwas höher und in Rosé */
.bp-tick--phase { top: -1.1rem; height: 2.2rem; background: var(--rose-deep); opacity: 0.5; }
.bp-session b {
  position: absolute;
  top: 2.2rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--taupe);
  font-variant-numeric: tabular-nums;
}
.bp-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 3rem;
  font-size: 0.9rem;
  color: var(--taupe);
}
.bp-legend span { display: inline-flex; align-items: center; gap: 0.75rem; }
.bp-legend-ring { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid var(--rose-deep); background: var(--rose-soft); }
.bp-legend-line { width: 2.5rem; height: 1px; background: var(--rose-deep); opacity: 0.7; }
.bp-legend-line--opt { background: repeating-linear-gradient(90deg, var(--rose-deep) 0 6px, transparent 6px 12px); }

/* --------------------------------------------------------------------------
   Investition
   -------------------------------------------------------------------------- */

.bp-invest { padding-top: calc(var(--section) * 0.35); }
.bp-invest .grid {
  row-gap: 2.5rem;
  align-items: end;
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--sand-200);
}
/* 11. Oktober 2026: zwei Pakete nebeneinander (3 und 6 Monate), darunter der gemeinsame Text */
.bp-invest-label { grid-column: 1 / span 12; margin-bottom: -1rem; }
.bp-plan { grid-column: span 6; }
.bp-plan + .bp-plan { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--sand-200); }
.bp-plan-name {
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cocoa);
  margin-bottom: 0.9rem;
}
.bp-price {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(3rem, 5.5vw, 5.5rem) * var(--display-scale));
  line-height: 1;
  color: var(--head-color);
  margin-bottom: 1rem;
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
/* gleiches Raster wie die Pakete (subgrid), damit der zweite Absatz bündig unter "6 Monate" steht */
.bp-invest-copy { grid-column: 1 / span 12; display: grid; grid-template-columns: subgrid; row-gap: 1rem; margin-top: 1rem; }
.bp-invest-copy p { grid-column: span 6; max-width: 32em; margin: 0; }
.bp-invest-copy p + p { padding-left: clamp(1.5rem, 3vw, 3rem); }
.bp-invest .grid { align-items: start; }

/* --------------------------------------------------------------------------
   Sechs Monate (11. Oktober 2026)
   -------------------------------------------------------------------------- */
.bp-six .grid { row-gap: 3rem; align-items: start; }
.bp-six-copy { grid-column: 1 / span 6; }
.bp-six-copy h2 { font-size: calc(clamp(2rem, 3.4vw, 3.2rem) * var(--display-scale)); line-height: 1.12; margin: 0.75rem 0 1.75rem; }
.bp-six-copy p:not(.lead) { max-width: 32em; }
.bp-six-incl { grid-column: 8 / span 5; margin-top: 0.4rem; }
/* längere Beschreibungen: links unter dem Titel ausgerichtet statt rechtsbündig */
.bp-incl-row--text { grid-template-columns: 8.5rem minmax(0, 1fr); }
.bp-incl-row--text span:last-child { text-align: left; }
.bp-six-end { text-align: center; margin-top: clamp(4rem, 8vw, 6.5rem); }
.page-bey .section .bp-six-end .bp-quote { font-size: calc(clamp(2rem, 4vw, 3.8rem) * var(--display-scale)); }
.bp-six-end p:not(.bp-quote) { max-width: 34em; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Einblick: Workshop als Einstieg (12. Oktober 2026)
   Links Annys Text, rechts eine weiße Karte im Stil der Preiskarten (Formular-Tokens), ganz verlinkt
   -------------------------------------------------------------------------- */

.bp-taste { padding-top: calc(var(--section) * 0.6); }
.bp-taste .grid { align-items: center; row-gap: 3rem; }
.bp-taste-copy { grid-column: 1 / span 6; }
.bp-taste-copy h2 { font-size: calc(clamp(2rem, 3.4vw, 3.2rem) * var(--display-scale)); line-height: 1.12; }
.bp-taste-copy p:not(.lead) { max-width: 32em; }
.bp-taste-card {
  grid-column: 8 / span 5;
  display: block;
  padding: 2.25rem 2.1rem 2rem;
  background: var(--field-bg);
  border: 1px solid var(--field-line);
  border-radius: 1.6rem;
  box-shadow: var(--field-shadow);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.5s var(--ease-out), translate 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
/* translate statt transform: GSAP besitzt transform (data-stagger) */
.bp-taste-card:hover {
  border-color: rgba(156, 72, 110, 0.35);
  translate: 0 -4px;
  box-shadow: 0 2px 4px rgba(74, 58, 49, 0.04), 0 26px 50px -26px rgba(156, 72, 110, 0.45);
}
.bp-taste-card:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 4px; }
.bp-taste-kind { font-size: 0.9rem; color: var(--taupe); }
.bp-taste-name {
  margin: 0.4rem 0 1.5rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.6rem, 2.2vw, 2rem) * var(--display-scale));
  line-height: 1.15;
  color: var(--head-color);
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.bp-taste-facts > div {
  position: relative;   /* für die gezeichnete Linie (.rule) */
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--sand-200);
  font-size: 0.95rem;
}
.bp-taste-facts > div span:first-child { color: var(--taupe); }
.bp-taste-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand-200);
}
.bp-taste-price {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(2.2rem * var(--display-scale));
  line-height: 1;
  color: var(--head-color);
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.bp-taste-card .btn { border-radius: 999px; }

/* --------------------------------------------------------------------------
   Coffee & Soul Date – Morgenrot als Klammer zum Auftakt
   -------------------------------------------------------------------------- */

.bp-date {
  overflow: hidden;
  text-align: center;
  background: linear-gradient(to bottom, rgba(241, 222, 218, 0) 0%, var(--dawn) 38%, var(--dawn) 62%, rgba(241, 222, 218, 0) 100%);   /* unten aus: Footer-Karte steht auf Sand */
  padding-block: calc(var(--section) * 1.3);
}
.bp-date-inner { position: relative; z-index: 1; }
.bp-date .lead { max-width: 30em; margin-inline: auto; }
.bp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin-top: 2.5rem; }
.bp-free { margin-top: 1.25rem; }
.bp-closing {
  margin-top: clamp(4rem, 7vw, 6rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(clamp(1.3rem, 2vw, 1.8rem) * var(--display-scale));
  color: var(--head-color);
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
/* Ensō um den Abschluss: zeichnet sich wie auf der Startseite per Scroll */
.orbit--date {
  width: 94vmin; height: 94vmin;
  left: 50%; top: 50%;
  margin: -47vmin 0 0 -47vmin;
}

/* --------------------------------------------------------------------------
   Schmaler (Mobil kommt später, hier nur, dass nichts bricht)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .bp-statement, .bp-intro-copy, .bp-expect-figure, .bp-expect-copy, .bp-plan, .bp-invest-copy, .bp-six-copy, .bp-six-incl, .bp-taste-copy, .bp-taste-card { grid-column: 1 / span 12; }
  .bp-expect-figure { position: relative; top: 0; }
  .bp-head { grid-template-columns: 1fr; }
  .bp-head h2, .bp-head p { grid-column: 1; }
  .bp-shift-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .bp-shift-row ul { grid-column: 2; }
}

/* Zeitachse: "Monat" steht nur am Desktop, mobil nur die Zahl (sechs Spalten à ~55 px) */
.bp-month-labels i { font-style: normal; }
@media (max-width: 600px) {
  .bp-month-labels i { display: none; }
  .bp-phases { font-size: 0.68rem; letter-spacing: 0.12em; }
}