/* =========================================================================
   EF JOURNEY — the Group Leader journey add-on to the EF project screen.   v=31
   INTRO-1 ONLY (index.html). Every rule is scoped under .efj, which lives
   inside .project-row[data-theme="ef-tours"] .visual-panel.

   SEQUENCE (user, 2026-10-12): after the EF stack's final card (EF-5, the pink
   "About EF" map) has dwelt, the journey begins INSIDE the same container. The
   EF stack moves horizontally; the journey changes direction and moves
   VERTICALLY to signal a new section:
     Part I   — "Plan your trip"        (Figma 2898:11571)
     Part II  — "Build brand affinity"  (Figma 2900:18478)
     Part III — the milestone sequence  (Figma 2901:15965, 12 keyframes)
   then the layer drops away and the stack loops from EF-1.
   Driven by js/pellmell-intro-efjourney.js.

   GEOMETRY. Figma authors every frame 600 tall; the EF painted box is 660 tall
   x var(--pi-art-w) wide. ONE scale, 660 / 600 = 1.1, maps Figma px to the
   panel — the same x1.1 the Brandip screen uses. Each stage is authored at
   Figma px and scaled once. Stage width = art width / 1.1 (1095.89), so the
   1093-wide Part I/II frames fill the box and their right-hand Activities card
   bleeds off the edge exactly as the Figma frame clips it.
   ========================================================================= */

/* EF Circular — EF's brand face (user 2026-10-13), self-hosted from the user's
   installed OTFs. Weight ranges map the Figma weights onto the four cuts. */
@font-face { font-family: 'EF Circular'; src: url('../assets/fonts/ef-circular-light.woff2') format('woff2');  font-weight: 100 350; font-display: swap; }
@font-face { font-family: 'EF Circular'; src: url('../assets/fonts/ef-circular-book.woff2') format('woff2');   font-weight: 351 450; font-display: swap; }
@font-face { font-family: 'EF Circular'; src: url('../assets/fonts/ef-circular-medium.woff2') format('woff2'); font-weight: 451 550; font-display: swap; }
@font-face { font-family: 'EF Circular'; src: url('../assets/fonts/ef-circular-bold.woff2') format('woff2');   font-weight: 551 900; font-display: swap; }


.project-row[data-theme="ef-tours"] .efj {
  --efj-s: 1.1;                                   /* 660 / 600 — Figma px -> panel px */
  --efj-navy: #1b3f6e;
  --efj-blue: #0074e0;
  --efj-ink: #1b3f6e;
  --efj-mute: #3b5b83;
  position: absolute;
  left: calc((var(--pi-ref-w) - var(--pi-art-w)) / 2);
  bottom: 0;
  width: var(--pi-art-w);
  height: 660px;
  overflow: hidden;
  z-index: 50;                                    /* above every .ef-screen */
  background: var(--efj-navy);
  visibility: hidden;                             /* JS reveals it at hand-off */
  color: var(--efj-ink);
  font-family: 'EF Circular', 'Roboto', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
.project-row[data-theme="ef-tours"] .efj.is-on { visibility: visible; }

.efj p, .efj ul { margin: 0; padding: 0; }
.efj ul { list-style: disc; }
.efj li { margin: 0; }

/* ---- parts: stacked layers; each enters from below (the vertical direction) */
.efj-part {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--efj-navy);                    /* JS parks Parts II / III below (yPercent) */
}

.efj-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--pi-art-w) / 1.1);
  height: 600px;
  transform: scale(var(--efj-s));
  transform-origin: 0 0;
}

/* ===================== PART I / II — the two frames ====================== */
.efj-shot {
  position: absolute;
  left: 24px;
  top: 27px;
  width: 587.5px;
  height: 546px;
  display: block;
  object-fit: cover;
  object-position: top left;
}
/* v6 (Figma 2898:18468 / 2900:18843, user 2026-10-14): each column is a pale
   container holding an inset blue card. */
.efj-col {
  position: absolute;
  top: 27px;
  height: 546.025px;
  background: #eef5fd;
}
.efj-col--needs { left: 627.5px; width: 270.488px; }
.efj-col--acts  { left: 905.988px; width: 243.58px; }
.efj-part--brand .efj-col { border-radius: 4px; }
.efj-needs,
.efj-acts {
  position: absolute;
  top: 27.301px;
  height: 491.423px;
  box-sizing: border-box;
  padding: 12.375px;
  border-radius: 16px;
  background: var(--efj-mute);                    /* #3b5b83 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.efj-needs { left: 13.524px; width: 243.439px; gap: 1.063px; }
.efj-acts  { left: 12.179px; width: 219.222px; gap: 12.472px; white-space: nowrap; }
.efj-part--plan .efj-acts { border-radius: 24.75px; }

.efj-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38.672px;
  flex: none;
}
.efj-eyebrow {
  font-family: 'EF Circular', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 10.742px;
  line-height: 21.484px;
  color: var(--efj-ink);
  white-space: nowrap;
}
.efj-eyebrow span { font-weight: 400; }
.efj-needs .efj-eyebrow,
.efj-acts .efj-eyebrow { font-size: 9.668px; line-height: 19.336px; color: #eef5fd; }
.efj-part--plan .efj-needs .efj-eyebrow,
.efj-part--plan .efj-acts .efj-eyebrow { font-weight: 500; }
.efj-logo { width: 17.209px; height: auto; display: block; margin-right: 1.547px; }

.efj-needlist {
  font-family: 'EF Circular', 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13.535px;
  color: #eef5fd;
  width: 218.689px;
  box-sizing: border-box;
  padding-right: 12.375px;
}
.efj-needlist li { margin-left: 20.3025px; line-height: 19.336px; }
.efj-needlist--plan li { padding: 9.668px 0; }              /* 38.672 box, 1 line centred */
.efj-needlist--plan li:nth-child(4) { padding: 10.055px 0; } /* 58.781 box, 2 lines centred */
.efj-needlist--plan li:nth-child(5) { padding: 11.408px 0; } /* 61.488 box, 2 lines centred */
.efj-needlist .efj-light { font-weight: 300; }
.efj-needlist--brand { display: flex; flex-direction: column; gap: 14.4px; width: 203.58px; padding-right: 11.52px; }
.efj-needlist--brand li { line-height: 18px; margin-left: 20.304px; }

.efj-roles { display: flex; gap: 6.188px; align-items: center; }
.efj-acts .efj-role { padding: 2.574px 5.148px; border-radius: 13.729px; font-size: 6.972px; font-weight: 300; }
.efj-actlist { display: flex; flex-direction: column; gap: 11.988px; align-items: flex-start; }
.efj-soft {
  background: #eef5fd;
  border-radius: 4px;
  padding: 2.574px 5.148px;
  font-size: 9.088px;
  line-height: 1.5;
  color: var(--efj-mute);
}
.efj-soft ul { margin-left: 13.632px; }
.efj-soft ul ul { margin-left: 13.632px; }
.efj-soft--full,
.efj-soft--wrap { width: 194.472px; box-sizing: border-box; }
.efj-soft--wrap { white-space: normal; }

/* ===================== shared chips ===================================== */
.efj-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 16px;
  font-size: 8.125px;
  line-height: 1.5;
  color: #fff;
  background: var(--efj-navy);
  white-space: nowrap;
}
.efj-role--gl   { background: var(--efj-blue); }
.efj-role--fade { background: rgba(27, 63, 110, 0.3); }

.efj-chip {
  display: inline-flex;
  align-items: center;
  gap: 1.25px;
  background: #fff;
  border-radius: 16px;
  padding: 3px 6px;
  font-size: 10.625px;
  line-height: 1.5;
  color: var(--efj-ink);
  white-space: nowrap;
  max-width: 100%;
}
.efj-chip--full { display: flex; width: 100%; white-space: normal; }
.efj-chip--full > span:first-child { flex: 1 0 0; min-width: 1px; }
.efj-chip--top { align-items: flex-start; }
.efj-chip ul { margin-left: 15.9375px; }
.efj-chip ul ul { margin-left: 15.9375px; }
.efj-chip b  { font-weight: 600; }
.efj-st { width: 14.602px; height: 14.602px; flex: none; display: block; }
.efj-chip--top .efj-st { margin-top: 1px; }
.efj-ic { display: block; flex: none; }
.efj-row { display: flex; gap: 8px; align-items: flex-start; }

/* ===================== PART III — the milestone sequence ================= */
.efj-cam {
  position: absolute;
  left: 0;
  top: 0;
  width: 2342px;
  height: 600px;
  transform-origin: 0 0;                          /* JS owns x / y / scale */
}
.efj-line {
  position: absolute;
  left: 239px;
  top: 267.79px;
  width: 1945.761px;
  height: 4.579px;
  border-radius: 8px;
  background: var(--efj-mute);
}
.efj-ms-label {
  position: absolute;
  left: 24px;
  top: 257.31px;
  width: 172.25px;
  text-align: right;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--efj-mute);
  z-index: 20;                                    /* the tile the milestones stack behind */
  background: var(--efj-navy);
}
.efj .efj-ms-label {                              /* beats .efj p's margin/padding reset */
  top: 250px;                                     /* text stays on its Figma line (257.31) */
  padding: 7.31px 22px 10px 0;                    /* tile covers the stacked tiles (256.9–283.3) */
}
.efj-ms {
  position: absolute;
  top: 256.875px;
  width: 175.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.875px;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--efj-mute);
  white-space: nowrap;
}
.efj-ms i {
  display: block;
  width: 26.438px;
  height: 26.438px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #eef5fd;
  background: #eef5fd;
}
.efj-ms--first i { background: #fff; }
.efj-ms--hollow i { background: #fff; border-color: var(--efj-mute); }
.efj-ms small { font-weight: 100; font-size: inherit; }

.efj-legend {
  position: absolute;
  left: 10px;
  top: 96px;
  width: 213.602px;
  height: 208px;
  border-radius: 27.5px;
  background: #e6f1fc;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  z-index: 30;                                    /* above the Milestones label tile (z 20) */
}
.efj-legend-title { font-weight: 500; font-size: 24px; line-height: 1.5; }
.efj-legend-keys { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.efj-key {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 22px;
  padding: 0 3px 0 4px;
  border-radius: 16px;
  background: #f5f5f5;
  font-size: 10.625px;
  line-height: 1.5;
  white-space: nowrap;
}

.efj-pill {
  position: absolute;
  top: 245px;
  width: 105px;
  height: 105px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 27.5px;
  background: #e6f1fc;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.875px;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--efj-mute);
  white-space: nowrap;
  opacity: 0;
}
.efj-pill i {
  display: block;
  flex: none;
  width: 26.438px;
  height: 26.438px;
  border-radius: 50%;
  background: var(--efj-navy);
}

.efj-playhead {                                   /* v6 — leads the step-through */
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--efj-navy);
  box-shadow: 0 0 0 4px #eef5fd;
  z-index: 25;
  transform: scale(0);
  pointer-events: none;
}
.efj-card {
  will-change: transform, clip-path;
  position: absolute;
  top: 38px;
  width: 270.49px;
  height: 524px;
  box-sizing: border-box;
  border-radius: 27.5px;
  background: #e6f1fc;
  overflow: hidden;
  visibility: hidden;
}
.efj-card--collect { background: #eef5fd; }
.efj-deck .efj-card { background: #eef5fd; }        /* GL Journey 2901:16306: every column is #eef5fd */

/* CARD DECK (user 2026-10-14) — the six GL Journey columns, Figma px. JS owns x / y / scale. */
.efj-deck {
  position: absolute;
  left: 0;
  top: 0;
  width: 1760px;
  height: 600px;
  transform-origin: 0 0;
}
.efj-card--key {                                   /* legend column 2901:16309 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 0;
  gap: 24px;
}
.efj-card--key > * { width: 242.99px; }
.efj-key-title {
  font-weight: 500;
  font-size: 25px;
  line-height: 1.5;
  color: var(--efj-ink);
}
.efj .efj-key-title { margin: 0; padding: 0; }
.efj-key-list { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.efj-card--key .efj-key {
  height: 22px;
  padding: 0 3px 0 4px;
  gap: 0;
  font-weight: 300;
  font-size: 10.625px;
  color: var(--efj-mute);
}
.efj-card-head {
  position: relative;
  z-index: 1;
  height: 36px;
  padding: 4px 13.75px 0;
  display: flex;
  align-items: center;
  background: inherit;
}
.efj-card-body {
  padding: 4px 13.75px 13.75px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.efj-grp { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }

/* COLLECT INFORMATION is authored a size up (11.953 / 9.141 / 18px radius). */
.efj-card--collect .efj-card-body { gap: 18px; }
.efj-card--collect .efj-grp { gap: 9px; }
.efj-card--collect .efj-chip { font-size: 11.953px; border-radius: 18px; padding: 3.375px 6.75px; gap: 1.406px; }
.efj-card--collect .efj-role { font-size: 9.141px; border-radius: 18px; padding: 3.375px 6.75px; }
.efj-card--collect .efj-st { width: 16.428px; height: 16.428px; }
.efj-cta {
  display: inline-flex;
  background: #f5f5f5;
  border-radius: 18px;
  padding: 3.375px 6.75px;
  font-weight: 400;
  font-size: 11.953px;
  line-height: 1.5;
  color: #191919;
}
.efj-card--collect .efj-tc { margin-top: 18px; }

.efj-card--connect .efj-card-body { gap: 32px; }
.efj-card--recruit .efj-card-body { gap: 64px; }
.efj-card--prepare .efj-card-body { gap: 64px; }
.efj-card--travel  .efj-card-body { gap: 16px; }
.efj-card--travel  .efj-tdgrp { display: flex; flex-direction: column; gap: 24px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .project-row[data-theme="ef-tours"] .efj { display: none; }
}

/* LIQUID LAYER (v15, user 2026-10-14) — plain shapes under one SVG goo filter
   (#efj-goo, injected by js/pellmell-intro-efjourney.js). JS owns every box. */
.efj-goo {
  position: absolute;
  inset: 0;
  filter: url(#efj-goo);
  pointer-events: none;
  visibility: hidden;
}
.efj-goo i {
  position: absolute;
  display: block;
  background: #eef5fd;
  visibility: hidden;
}

/* CARD DESIGN OPT-2 (Figma 2937:8878, user 2026-10-14) — no pale container;
   translucent white chips on the blue card; light EF logo. Values are
   2937:8878's ÷ 0.8073 (its text scale), i.e. at authored size. */
.efj-col,
.efj-part--brand .efj-col { background: transparent; }
.efj-logo { width: 20.403px; margin-right: 1.547px; }
.efj-soft {
  background: rgba(255, 255, 255, 0.15);          /* white-scale/white-15 */
  color: #eef5fd;
  padding: 4.955px;                               /* 4 */
  border-radius: 9.91px;                          /* 8 */
}
/* the three block chips: EF Team check-ins, GL:, Share the experience */
.efj-part--plan .efj-actlist > .efj-soft:nth-child(3),
.efj-part--plan .efj-actlist > .efj-soft:nth-child(4),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(2) { padding: 9.91px; border-radius: 19.82px; }   /* 8 / 16 */
.efj-soft--full { width: auto; }
.efj-part--brand .efj-actlist > .efj-soft:nth-child(7) { width: 188.28px; }   /* 152 */
.efj-part--brand .efj-actlist > .efj-soft:nth-child(8) { width: 136.26px; }   /* 110 */

/* 50/50 SPLIT (Figma 2939:14146, user 2026-10-14) — stage px. JS builds the
   panel and the three screenshot strips; GSAP owns clip-path and yPercent. */
.efj-panel {
  position: absolute;
  left: 546.375px;
  top: 79px;
  width: 475.88px;
  height: 442px;
  background: #cfe3f2;                            /* role/system */
}
.efj-strip {
  position: absolute;
  top: 79px;
  height: 442px;
  overflow: hidden;
}
.efj-strip-img {
  position: absolute;
  top: 0;
  width: 475.875px;
  height: 442px;
  max-width: none;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* FULL-BLEED SPLIT (Figma 2942:15763, user 2026-10-14) — overrides the 50/50
   boxes above: screenshot 642 x 600 from the left edge, panel from x 642 running
   two screens wide; the screenshot strips sit above the cards so the first card
   slides away under the screenshot when the panel pans. */
.efj-panel { left: 642.174px; top: 0; width: 642.181px; height: 600px; z-index: 0; }
.efj-strip { top: 0; height: 600px; z-index: 2; }
.efj-strip-img { width: 642.174px; height: 600px; }
.efj-part--plan .efj-col,
.efj-part--brand .efj-col { z-index: 1; }

/* ROLLOVER PAUSE (user 2026-10-14) — the EF row holds its CSS loops while hovered */
.project-row[data-theme="ef-tours"].is-held,
.project-row[data-theme="ef-tours"].is-held * { animation-play-state: paused !important; }

/* smoothness (user 2026-10-14): the split halves and cards get their own compositor layers */
.efj-strip, .efj-panel, .efj-part--plan .efj-col, .efj-part--brand .efj-col { will-change: transform; backface-visibility: hidden; }

/* LIQUID MORPH card swap (user 2026-10-14): JS tweens these five values */
.efj-part--plan .efj-needs, .efj-part--plan .efj-acts,
.efj-part--brand .efj-needs, .efj-part--brand .efj-acts {
  clip-path: inset(var(--efj-ct, 0px) var(--efj-cr, 0px) var(--efj-cb, 0px) var(--efj-cl, 0px) round var(--efj-crad, 0px));
}

/* Activities card darker (Figma 2937:11556, user 2026-10-14) — sets it apart as it rises over the User Needs card */
.efj-part--plan .efj-acts,
.efj-part--brand .efj-acts { background: var(--efj-navy); }   /* #1b3f6e */

/* CARD CRAFT (user 2026-10-14: "increase their craft — and aid the animation").
   Split-screen cards only. Each card is lit from its top-left: a soft radial bloom
   over a tonal diagonal gradient (lighter -> the Figma fill -> deeper), a 1px inner
   rim catching the light along the top edge, glassy chips, and a depth shadow on the
   column (filter drop-shadow, so it follows the card's animated clip). A specular
   sheen band (::after) sweeps across as a card lands — JS drives --efj-sheen. */
.efj-part--plan .efj-needs,
.efj-part--brand .efj-needs {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(155deg, #4d72a1 0%, #3b5b83 48%, #2c4a72 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.efj-part--plan .efj-acts,
.efj-part--brand .efj-acts {
  background:
    radial-gradient(120% 55% at 0% 0%, rgba(120, 170, 235, 0.20) 0%, rgba(120, 170, 235, 0) 60%),
    linear-gradient(155deg, #255088 0%, #1b3f6e 50%, #11294c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.efj-part--plan .efj-needs::after, .efj-part--plan .efj-acts::after,
.efj-part--brand .efj-needs::after, .efj-part--brand .efj-acts::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 58%);
  background-size: 300% 100%;
  background-position: var(--efj-sheen, 120%) 0;
}
.efj-part--plan .efj-col,
.efj-part--brand .efj-col {
  filter: drop-shadow(0 22px 28px rgba(9, 27, 56, 0.34));
}
/* glass chips */
.efj-part--plan .efj-soft,
.efj-part--brand .efj-soft {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.10) 100%);
  box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* FACETIME-STYLE GRADIENT (user 2026-10-14, iOS FaceTime call cards as the reference):
   replaces the lit/diagonal treatment above. A quiet, vertical, single-hue-family
   gradient — lighter and slightly cooler at the top, deepening and warming a touch
   toward the bottom — with no corner glow and no rim, so the card reads as one soft
   tinted surface. Same pair contrast: User Needs light, Activities dark. */
.efj-part--plan .efj-needs,
.efj-part--brand .efj-needs {
  background: linear-gradient(180deg, #7590b8 0%, #5676a0 38%, #3d5d86 72%, #34527a 100%);
  box-shadow: none;
}
.efj-part--plan .efj-acts,
.efj-part--brand .efj-acts {
  background: linear-gradient(180deg, #3a5f92 0%, #26497a 38%, #1b3f6e 70%, #152f55 100%);
  box-shadow: none;
}

/* no sheen band (user 2026-10-14) — the diagonal specular stripe is off */
.efj-part--plan .efj-needs::after, .efj-part--plan .efj-acts::after,
.efj-part--brand .efj-needs::after, .efj-part--brand .efj-acts::after { content: none; }

/* SAME NAVY, MIRRORED (user 2026-10-14): both cards take the dark navy gradient;
   User Needs runs light-at-top, Activities runs light-at-bottom, so the pair still
   reads as two cards as one rises over the other. */
.efj-part--plan .efj-needs,
.efj-part--brand .efj-needs {
  background: linear-gradient(180deg, #3a5f92 0%, #26497a 38%, #1b3f6e 70%, #152f55 100%);
}
.efj-part--plan .efj-acts,
.efj-part--brand .efj-acts {
  background: linear-gradient(0deg, #3a5f92 0%, #26497a 38%, #1b3f6e 70%, #152f55 100%);
}

/* NAVY (user 2026-10-14): both cards stay within the brand navy (#1b3f6e) —
   a shallow navy-to-deep-navy fall, mirrored between the two cards. */
.efj-part--plan .efj-needs,
.efj-part--brand .efj-needs {
  background: linear-gradient(180deg, #1f4677 0%, #1b3f6e 45%, #12305a 100%);
}
.efj-part--plan .efj-acts,
.efj-part--brand .efj-acts {
  background: linear-gradient(0deg, #1f4677 0%, #1b3f6e 45%, #12305a 100%);
}

/* FLAT CHIPS (user 2026-10-14): no stroke, no gradient — the Figma fill only */
.efj-part--plan .efj-soft,
.efj-part--brand .efj-soft {
  background: rgba(255, 255, 255, 0.15);          /* white-scale/white-15 */
  box-shadow: none;
}

/* TIMELINE TEXT UP A STEP (user 2026-10-14; Figma 2901:13722): milestone + row labels 12.5 -> 15px */
.efj-ms, .efj-ms-label { font-size: 15px; }

/* STACKED OFFSET CARDS (Figma 2957:22599, user 2026-10-14). Authored px = Figma
   px ÷ 0.8073 (the stack renders at Q_K, so a card is 200 wide like the frame).
   JS owns each card's height (back 388 / front 320) and the 69 offset. */
.efj-part--plan .efj-needs,
.efj-part--brand .efj-needs {
  background: linear-gradient(180deg, #3b5b83 0%, #0d141d 100%);
  border-radius: 16px;
  padding: 9.91px 12.375px;
  gap: 0;
  overflow: hidden;
}
.efj-part--plan .efj-acts,
.efj-part--brand .efj-acts {
  background: linear-gradient(180deg, #1b3f6e 0%, #3479d4 100%);
  border-radius: 16px;
  padding: 12.375px;
  gap: 1.064px;
  overflow: hidden;
}
/* eyebrow: 4 blank + 4 gap + the #ff3567 square + 4 gap, Medium 7.805 */
.efj-part--plan .efj-eyebrow,
.efj-part--brand .efj-eyebrow {
  display: flex;
  align-items: center;
  gap: 4.955px;
  padding-left: 9.91px;
  font-weight: 500;
  font-size: 9.668px;
  line-height: 19.336px;
  color: #eef5fd;
}
.efj-part--plan .efj-eyebrow::before,
.efj-part--brand .efj-eyebrow::before {
  content: '';
  flex: none;
  width: 4.955px;
  height: 4.955px;
  background: #ff3567;
}
.efj-part--plan .efj-needs .efj-head,
.efj-part--brand .efj-needs .efj-head { margin-bottom: -7.432px; }
/* User Needs rows: Light 10.927, 31.219 rows, 15.5 inset, 8 apart */
.efj-part--plan .efj-needlist,
.efj-part--brand .efj-needlist {
  display: flex;
  flex-direction: column;
  gap: 9.91px;
  width: 100%;
  padding: 0;
  font-size: 13.535px;
}
.efj-part--plan .efj-needlist li,
.efj-part--brand .efj-needlist li {
  margin-left: 0;
  padding: 0 12.375px 0 19.2px;
  min-height: 38.672px;
  display: flex;
  align-items: center;
  line-height: 19.82px;
}
/* Activities: title row, then the chips */
.efj-acttitle {
  flex: none;
  display: flex;
  align-items: center;
  height: 38.672px;
  padding-left: 19.2px;
  font-family: 'EF Circular', 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 13.535px;
  color: #eef5fd;
}
.efj-part--plan .efj-roles,
.efj-part--brand .efj-roles { gap: 8.35px; }
.efj-part--plan .efj-acts .efj-role,
.efj-part--brand .efj-acts .efj-role { padding: 3.474px 6.948px; border-radius: 18.527px; font-size: 9.408px; font-weight: 300; }
.efj-part--plan .efj-actlist,
.efj-part--brand .efj-actlist { gap: 16.178px; width: 100%; }
.efj-part--plan .efj-soft,
.efj-part--brand .efj-soft {
  background: rgba(255, 255, 255, 0.15);          /* white-scale/white-15 */
  box-shadow: none;
  font-size: 12.263px;                            /* 9.9 */
  line-height: 1.5;
  padding: 6.687px;                               /* 5.398 */
  border-radius: 13.373px;                        /* 10.796 */
}
.efj-part--plan .efj-actlist > .efj-soft:nth-child(3),
.efj-part--plan .efj-actlist > .efj-soft:nth-child(4),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(2) { padding: 13.373px; border-radius: 26.745px; }   /* 10.796 / 21.591 */
.efj-part--plan .efj-soft ul,
.efj-part--brand .efj-soft ul { margin-left: 18.395px; }      /* 14.85 */
.efj-part--plan .efj-soft--full { width: 100%; box-sizing: border-box; }

/* INNER-CARD CONTENT UPDATE (Figma 2957:22599 rev, user 2026-10-14): the Activities
   card's second row is the role line in Lexend-size Light 9.9 (EF Circular here);
   header + role line sit 1 apart, then 8 to the chips */
.efj-part--plan .efj-acts,
.efj-part--brand .efj-acts { gap: 9.91px; }
.efj-acttitle {
  margin-top: calc(1.239px - 9.91px);
  font-size: 12.263px;
  line-height: 1.5;
  font-weight: 300;
}

/* PART II CARDS (Figma 2957:23436, user 2026-10-14) */
.efj-part--brand .efj-acttitle { font-size: 13.535px; line-height: normal; }        /* Light 10.927 */
.efj-part--brand .efj-roles { gap: 6.193px; }                                        /* 4.999 */
.efj-part--brand .efj-acts .efj-role { padding: 2.576px 5.152px; border-radius: 13.738px; font-size: 6.977px; }   /* 5.632 */
.efj-part--brand .efj-actlist > .efj-soft:nth-child(2) { padding: 6.687px; border-radius: 13.373px; }
.efj-part--brand .efj-actlist > .efj-soft:nth-child(2),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(3),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(4),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(6),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(7) { width: 100%; box-sizing: border-box; white-space: normal; }
.efj-part--brand .efj-actlist > .efj-soft:nth-child(8) { width: auto; white-space: nowrap; font-size: 9.095px; }  /* 7.342 */

/* BULLETED NEEDS (Figma 2964:14752, user 2026-10-14): each User Needs row is a disc
   bullet item — text indented 15.5 + 16.39 from the row, the disc hanging in the
   indent, aligned to the first line. */
.efj-part--plan .efj-needlist li,
.efj-part--brand .efj-needlist li { padding-left: 39.503px; }       /* (15.5 + 16.39) / 0.8073 */
.efj-part--plan .efj-needlist li > span,
.efj-part--brand .efj-needlist li > span { position: relative; display: block; }
.efj-part--plan .efj-needlist li > span::before,
.efj-part--brand .efj-needlist li > span::before {
  content: '';
  position: absolute;
  left: -12.6px;
  top: calc(9.91px - 1.65px);                     /* first line's centre */
  width: 3.3px;
  height: 3.3px;
  border-radius: 50%;
  background: currentColor;
}

/* SCREEN HEADER (Figma 2964:14752, user 2026-10-14): names the screen over the card
   pair — Medium 10.532 / 21.065, centred on the pair in a 95.1 x 42.13 box at y 67.15 */
.efj .efj-screenhead {
  position: absolute;
  left: 800.7px;                                  /* pair centre 848.25 - 47.55 */
  top: 67.148px;
  width: 95.107px;
  height: 42.129px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-family: 'EF Circular', 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 10.532px;
  line-height: 21.065px;
  color: #eef5fd;
  z-index: 4;
}

/* PART II TEXT UPDATE (Figma 2957:23436 rev, user 2026-10-14): "Team debrief" is now
   the card's second row, so the chip list starts at Share the experience; card gap 10 */
.efj-part--brand .efj-acts { gap: 12.387px; }
.efj-part--brand .efj-actlist > .efj-soft:nth-child(n) { width: auto; white-space: nowrap; font-size: 12.263px; }
.efj-part--brand .efj-actlist > .efj-soft:nth-child(1),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(2),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(3),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(5),
.efj-part--brand .efj-actlist > .efj-soft:nth-child(6) { width: 100%; box-sizing: border-box; white-space: normal; }
.efj-part--brand .efj-actlist > .efj-soft:nth-child(7) { font-size: 9.095px; }      /* 7.342 */

/* LEGEND KEYS (Figma 2901:16309, user 2026-10-14): the #f5f5f5 pill behind each key is removed */
.efj-card--key .efj-key { background: transparent; }

/* MILESTONES LABEL SIZE (user 2026-10-14): "Milestones" renders at the same size as the
   screen headers (MANAGE TOURS, COMMUNITY / NEXT TRIP: 10.532 stage px x 1.1 = 11.585 px on
   screen). The timeline is drawn at 1205.48 / 2342 of its Figma size, so 11.585 / 0.51472 =
   22.507 Figma px here. Top padding re-centres the bigger text on the line (y 270.09). */
.efj .efj-ms-label { font-size: 22.507px; padding-top: 3.205px; }