/* "Desktop & app" = the website's members-space card, ported verbatim from
   functionalps.ch src/components/events/members-banner.css (the card on
   /events and the homepage). Changes: the texture path, the eyebrow class
   (.evp-eyebrow lives in the site's events-page.css), the phone ratio for the
   new iPhone 16 Pro screens, and the site's tokens declared here. */
.mb-card {
  --serif: var(--f-display); --ui: var(--f-body); --cream: #F5F0E8; --forest: #2E5438;
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
}
.usecase .mb-card { width: 100%; }

.mb-card {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(34px, 4.4vw, 60px); border-radius: 28px; overflow: hidden;
  /* Owner's blue fluted-glass texture (public/images/general/bg-blue-homepage,
     the .png is the original upload, the .webp is what ships). A navy shade
     sits over it, darkest behind the copy, so the cream text keeps its
     contrast over the texture's bright highlights; it thins out to the right
     where the dashboard illustration is. */
  background:
    linear-gradient(90deg, rgba(8, 27, 50, .86) 0%, rgba(8, 27, 50, .74) 38%, rgba(8, 27, 50, .30) 70%, rgba(8, 27, 50, .12) 100%),
    #1D4A78 url('../../../../login-bg.webp') center / cover no-repeat;
  color: var(--cream);
}
.mb-eyebrow { margin: 0 0 10px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #E3C98F; }
.mb-title {
  font-family: var(--serif); font-weight: 400; margin: 0 0 22px;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -0.01em; color: var(--cream);
}
.mb-part { padding: 16px 0; border-top: 1px solid rgba(245, 240, 232, .16); }
.mb-part-label {
  margin: 0 0 6px; font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #E3C98F;
}
.mb-text { margin: 0; font-family: var(--ui); font-size: 15px; line-height: 1.6; font-weight: 300; color: rgba(245, 240, 232, .88); max-width: 480px; }
.mb-points { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mb-points li { display: flex; gap: 9px; font-family: var(--ui); font-size: 14px; line-height: 1.5; color: rgba(245, 240, 232, .9); }
.mb-points li::before { content: '✦'; color: #E3C98F; }
.mb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.mb-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 13px 26px; border-radius: var(--r-pill);
  font-family: var(--ui); font-size: 14.5px; font-weight: 500; text-decoration: none;
  background: var(--cream); color: var(--forest); transition: background .25s ease;
}
.mb-btn:hover, .mb-btn:focus-visible { background: #fff; }
.mb-note { font-family: var(--ui); font-size: 12.5px; color: rgba(245, 240, 232, .72); }

/* ── The dashboard illustration ──────────────────────────────────────────── */
/* Bottom padding leaves room for the phone, which hangs below the window. */
.mb-art { position: relative; min-width: 0; padding: 10px 3% 44px 0; }
/* The 3D: one perspective on the stage, the window turned toward the copy.
   No overflow:hidden on anything inside the 3D context (it would flatten it). */
.mb-stage { position: relative; perspective: 1800px; perspective-origin: 30% 40%; }
.mb-dash {
  position: relative; font-size: clamp(8.4px, .78vw, 11px);
  border-radius: 1.6em; background: #F7F3EC; color: #1A1A16;
  transform: rotateY(-13deg) rotateX(7deg) rotateZ(.6deg); transform-origin: 60% 50%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 3em 5em -1em rgba(0, 0, 0, .45),
    0 1em 2em rgba(0, 0, 0, .18);
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-smooth);
}
/* The tiles below translateZ off the window, so every box between them and
   .mb-dash has to keep the 3D context. */
.mb-body, .mb-metrics, .mb-row { transform-style: preserve-3d; }
/* A soft sheen across the glass, the "premium" light. */
.mb-dash::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 38%);
  mix-blend-mode: soft-light;
}
.mb-card:hover .mb-dash { transform: rotateY(-8deg) rotateX(5deg) rotateZ(.3deg); }

.mb-bar {
  display: flex; align-items: center; gap: .5em; padding: .9em 1.2em;
  border-bottom: 1px solid rgba(26, 26, 22, .07); border-radius: 1.6em 1.6em 0 0; background: #EFE9DF;
}
.mb-bar i { width: .75em; height: .75em; border-radius: 50%; background: #D8D1C4; }
.mb-bar i:first-child { background: #E5A99B; }
.mb-bar span {
  margin-left: .8em; padding: .25em 1em; border-radius: 1em; background: rgba(255, 255, 255, .8);
  font-family: var(--ui); font-size: .95em; color: #7A796F;
}
.mb-body { padding: 1.3em 1.4em 1.5em; display: grid; gap: 1.1em; }
.mb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.mb-head strong { font-family: var(--serif); font-weight: 400; font-size: 1.9em; line-height: 1; }
.mb-head span { font-family: var(--ui); font-size: 1em; color: #7A796F; }

/* Score tiles lift off the window: they are the headline of the dashboard. */
.mb-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.mb-metric {
  position: relative; display: grid; gap: .15em; padding: .9em 1em .6em; border-radius: 1.1em;
  background: #fff; box-shadow: 0 .8em 1.6em -.6em rgba(26, 51, 34, .28), 0 0 0 1px rgba(46, 84, 56, .06);
  transform: translateZ(2.4em);
}
.mb-metric-label { font-family: var(--ui); font-size: .95em; font-weight: 600; letter-spacing: .04em; color: #7A796F; }
.mb-metric-value { font-family: var(--serif); font-size: 2.4em; line-height: 1.05; color: #1A1A16; }
.mb-metric-value small { font-family: var(--ui); font-size: .42em; margin-left: .25em; color: #7A796F; }
.mb-metric-delta { font-family: var(--ui); font-size: .95em; font-weight: 600; color: #2E7D4F; }
.mb-spark { width: 100%; height: 2.4em; margin-top: .2em; overflow: visible; }
.mb-spark path { fill: none; stroke: #4A8A5C; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.mb-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .8em; }
.mb-chart { padding: .9em 1em .7em; border-radius: 1.1em; background: #fff; box-shadow: 0 0 0 1px rgba(46, 84, 56, .06); }
.mb-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .4em; font-family: var(--ui); }
.mb-chart-head span { font-size: 1.05em; font-weight: 600; }
.mb-chart-head small { font-size: .9em; color: #7A796F; }
.mb-chart svg { display: block; width: 100%; height: 8.6em; overflow: visible; }
.mb-grid { stroke: rgba(26, 26, 22, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mb-chart-line { fill: none; stroke: #2E5438; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mb-chart-dot { fill: #2E5438; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mb-guide {
  display: flex; flex-direction: column; gap: .5em; padding: .9em 1em; border-radius: 1.1em;
  background: linear-gradient(160deg, #F0E6D0 0%, #F7F0E1 100%); box-shadow: 0 0 0 1px rgba(196, 139, 53, .18);
  transform: translateZ(1.6em);
}
.mb-guide small { font-family: var(--ui); font-size: .9em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8E5D1B; }
.mb-guide p { margin: 0; font-family: var(--serif); font-size: 1.3em; line-height: 1.25; color: #1A1A16; }

.mb-lib-title { font-family: var(--ui); font-size: 1.05em; font-weight: 600; margin-bottom: .6em; }
.mb-lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.mb-article { border-radius: 1em; background: #fff; box-shadow: 0 0 0 1px rgba(46, 84, 56, .06), 0 .6em 1.2em -.8em rgba(26, 51, 34, .3); }
.mb-article img { display: block; width: 100%; height: 5.6em; object-fit: cover; border-radius: 1em 1em 0 0; }
.mb-article div { display: grid; gap: .3em; padding: .7em .8em .9em; }
.mb-article small { font-family: var(--ui); font-size: .82em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #4A8A5C; }
.mb-article span { font-family: var(--serif); font-size: 1.2em; line-height: 1.2; color: #1A1A16; }

/* The app, in front of the dashboard: the other half of the ecosystem.
   Owner (2026-09-29): big, on the right, over the right-hand article, the
   "This week" card and the end of the score chart; the overlap is wanted.
   Two phones: the app's home (score, log a meal, check-in, ask your
   nutritionist; the left half of app-screens.webp) behind and higher, the
   energy check-in in front. */
.mb-phone {
  position: absolute; aspect-ratio: 640 / 1391;
  padding: 6px; border-radius: 28px; background: #111; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .8s var(--ease-smooth);
}
.mb-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 22px; background: #F5F0E8; }
.mb-phone--home { right: -4%; top: 10%; width: 30%; z-index: 2; transform: rotate(11deg); }
.mb-phone--checkin { right: 5%; top: 40%; width: 35%; z-index: 3; transform: rotate(4deg); }
.mb-card:hover .mb-phone--home { transform: rotate(13deg) translateY(-6px); }
.mb-card:hover .mb-phone--checkin { transform: rotate(2deg) translateY(-10px); }

@media (max-width: 1020px) {
  .mb-card {
    grid-template-columns: minmax(0, 1fr);
    /* Stacked: the copy is on top, so the shade runs top to bottom. */
    background:
      linear-gradient(180deg, rgba(8, 27, 50, .84) 0%, rgba(8, 27, 50, .76) 50%, rgba(8, 27, 50, .28) 78%, rgba(8, 27, 50, .12) 100%),
      #1D4A78 url('../../../../login-bg.webp') center / cover no-repeat;
  }
  .mb-art { padding: 6px 4% 50px 0; }
  .mb-dash { font-size: clamp(7.2px, 1.45vw, 11px); transform: rotateY(-8deg) rotateX(5deg); }
  .mb-card:hover .mb-dash { transform: rotateY(-8deg) rotateX(5deg); }
}
@media (max-width: 560px) {
  .mb-card { padding: 32px 20px; }
  .mb-art { padding: 4px 5% 44px 0; }
  .mb-dash { font-size: 6.8px; }
  .mb-phone { border-radius: 18px; padding: 4px; }
  .mb-phone img { border-radius: 14px; }
  .mb-phone--home { width: 30%; right: 0; top: 12%; }
  .mb-phone--checkin { width: 36%; right: 3%; top: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-dash, .mb-phone, .mb-btn { transition: none; }
  .mb-card:hover .mb-dash { transform: rotateY(-13deg) rotateX(7deg) rotateZ(.6deg); }
  .mb-card:hover .mb-phone--home { transform: rotate(11deg); }
  .mb-card:hover .mb-phone--checkin { transform: rotate(4deg); }
}

/* The new iPhone 16 Pro screens are taller than the site's (640/1391 vs
   474/872): slightly narrower phones keep them inside the card. */
.mb-phone--home { width: 26%; top: 6%; }
.mb-phone--checkin { width: 30%; top: 34%; }
@media (max-width: 560px) {
  .mb-phone--home { width: 26%; top: 8%; }
  .mb-phone--checkin { width: 30%; top: 36%; }
}