.page_page___svW2 {
  max-width: var(--max-width-dashboard);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 32px) var(--page-gutter) 64px;
}

/* Shared coach avatar: tinted-initials circle, or the coach photo clipped to
   the same circle. Sizing is driven by the --avatar-size CSS var so one
   component serves every surface (44 / 64 / 72 / 84 px today). Tokens and the
   serif-500 initials match the prior per-surface avatar styling. */
.coach-avatar_avatar__iUC7f {
  width: var(--avatar-size, 64px);
  height: var(--avatar-size, 64px);
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--cream-light);
  font-family: var(--font-serif);
  /* Initials scale with the avatar (64px wrapper renders ~24px, matching the
     previous fixed sizing). */
  font-size: calc(var(--avatar-size, 64px) * 0.375);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  -webkit-user-select: none;
          user-select: none;
}

.coach-avatar_img__clnty {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Gentle fade-in once the photo paints. Disabled under reduced motion. */
  animation: coach-avatar_coachAvatarFade__cnwE2 200ms ease both;
}

@keyframes coach-avatar_coachAvatarFade__cnwE2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coach-avatar_img__clnty {
    animation: none;
  }
}

/* Deterministic tones (mirror coach-list): a coach keeps one colour everywhere.
   The soft drop shadow also reads as a subtle lift under a photo. */
.coach-avatar_toneForest__mPMUB {
  background: var(--green-dark);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--green-dark) 70%, transparent);
}

.coach-avatar_toneAmber__HIey3 {
  background: var(--golden-sand);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--golden-sand) 65%, transparent);
}

.coach-avatar_toneOak__Hf84v {
  background: var(--wood-oak);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--wood-oak) 65%, transparent);
}

.coach-avatar_toneSage__PNWj4 {
  background: var(--warm-amber);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--warm-amber) 65%, transparent);
}

.book-session-dialog_content__UxuxQ {
  padding: var(--space-7) var(--space-7) var(--space-6);
}

.book-session-dialog_title__7OMkK {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--light-head);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0;
}

.book-session-dialog_subtitle__x85Wa {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--light-mute);
  line-height: var(--lh-snug);
  margin: var(--space-2) 0 var(--space-5);
}

.book-session-dialog_list___WSCo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.book-session-dialog_row__sgbl_ {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.book-session-dialog_meta__sk83w {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1;
}

.book-session-dialog_name__xyGFp {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--light-head);
  margin: 0;
}

.book-session-dialog_role__buOjw {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--light-mute);
  margin: 0;
}

/* Loading / empty state */
.book-session-dialog_state__DvmJI {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--light-mute);
  text-align: center;
  padding: var(--space-5) 0;
  margin: 0;
}

.book-session-dialog_note__7RgQw {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--light-mute);
  margin: var(--space-4) 0 0;
}

.book-session-dialog_foot__7qjP1 {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.coach-card_root__ISSLH {
  background: var(--cream-light);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
}

.coach-card_head__mSGof {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  align-items: center;
}

.coach-card_info__SmBQx {
  min-width: 0;
}

.coach-card_nameRow__4XuXO {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}

.coach-card_name__7nbw_ {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--light-head);
  margin: 0;
}

.coach-card_pick__L0wmQ {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cream-dark);
  color: var(--light-body);
  font-size: 10.5px;
  font-weight: 500;
}

.coach-card_role__z142L {
  font-size: 12.5px;
  color: var(--light-mute);
  margin-bottom: 8px;
}

.coach-card_footer__Yl46S {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

/* Member-facing coach card (Services tab + coach profile preview).
   Spacing follows the DS SpacingSpec usage map:
   large card padding -> --space-5 · card inner gap -> --space-3 ·
   tight pairs -> --space-1 · pill gap -> --space-2 */

/* Card primitive owns border / radius-lg / shadow / hover lift. */
.coach-public-card_card__11nrK {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  height: 100%;
  padding: var(--space-5);
}

/* ── Heading (serif name + sans subtitle, tight pair) ────────────────────── */
.coach-public-card_heading__nsYkM {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.coach-public-card_name__m_101 {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--light-head);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0;
}

.coach-public-card_role__E7win {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--light-mute);
  margin: 0;
}

/* ── Body copy (DM Sans) ─────────────────────────────────────────────────── */
.coach-public-card_quote__uaGS6 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--light-body);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: pretty;
}

/* ── Focus pills ─────────────────────────────────────────────────────────── */
.coach-public-card_tags__9eg55 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Divider spacing comes from the card's --space-3 gap, not its own margin. */
.coach-public-card_divider__qwo_c {
  margin: 0;
}

/* ── Outside of coaching (tight label + body pair) ───────────────────────── */
.coach-public-card_outside__b3ama {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.coach-public-card_outsideLabel__qnbzj {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--wood-oak);
  margin: 0;
}

.coach-public-card_outsideText__sKtic {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--light-body);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Bio-pending coaches: a gentle placeholder instead of the full body. */
.coach-public-card_pending___LcrE {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--light-mute);
  line-height: var(--lh-snug);
  font-style: italic;
  margin: 0;
  text-wrap: pretty;
}

/* ── Footer actions (pinned to the card bottom so buttons align in a row) ── */
.coach-public-card_foot__efEtQ {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Not-bookable coach: a clear, readable status chip (replaces the old 10px
   ghost note). AA: --light-body on --cream. */
.coach-public-card_availNote__QDZ07 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--cream);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--light-body);
}

.coach-public-card_availIcon__l6vRI {
  flex-shrink: 0;
  color: var(--light-mute);
  display: inline-flex;
}

/* List-level layout only; the card itself lives in coach-public-card.module.css.
   Spacing follows the DS SpacingSpec usage map: grid gutter -> --space-4. */
.coach-list_grid__YDe3V {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Two balanced columns (4 coaches → tidy 2×2, not a stranded 3 + 1). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  /* Equal-height cards per row (default grid stretch) so the "View profile"
     buttons line up across the row regardless of differing copy length. */
}

.coach-list_item__tCmjy {
  display: flex;
}

.coach-list_loading__d0TZT {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--light-mute);
  margin: 0;
}

@media (max-width: 560px) {
  .coach-list_grid__YDe3V {
    grid-template-columns: 1fr;
  }
}

/* Dark sky: the loading line sits directly on the page background. */
html[data-time="evening"] .coach-list_loading__d0TZT,
html[data-time="night"] .coach-list_loading__d0TZT {
  color: var(--sky-body);
}

.services-tab_root__JiuUh {
  display: flex;
  flex-direction: column;
  /* Label → content within a section. */
  gap: var(--space-5);
}

/* Trial gate: shown to members in the free-trial window, above the services
   grid. Paid coaching is reserved for converted members; the card CTAs below
   switch to a disabled "Paid members only" state. */
.services-tab_trialGate__vV9Ef {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 20px 24px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background: var(--c-cream-light);
}

.services-tab_trialGateText__EpMxy {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--c-light-body);
}

/* Between grouped sections → --space-7 (32px) per the DS SpacingSpec.
   Root gap (20) + this margin (12) = 32 before "Meet your coaches". */
.services-tab_coachesLabel__5xDuQ {
  margin-top: var(--space-3);
}

.services-tab_grid___LQru {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* Grid gutter → --space-4 (16px) per the DS SpacingSpec. */
  gap: var(--space-4);
}

@media (max-width: 960px) {
  .services-tab_grid___LQru {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .services-tab_grid___LQru {
    grid-template-columns: 1fr;
  }
}

/* ── Card shell ──────────────────────────────────────────────────────────── */

.services-tab_svc__zjMRb {
  position: relative;
  padding: 28px 24px 22px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  overflow: hidden;
  min-height: 460px;
}

.services-tab_svc__zjMRb:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30, 20, 10, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .services-tab_svc__zjMRb,
  .services-tab_svc__zjMRb:hover {
    transition: none;
    transform: none;
  }
}

.services-tab_ribbon__3WV73 {
  position: absolute;
  top: 16px;
  right: -36px;
  transform: rotate(45deg);
  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 5px 40px;
  z-index: 1;
}

.services-tab_badge__Maj6w {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.95);
  color: #2a1d0a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 999px;
}

.services-tab_head__161C1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.services-tab_ic__y7N1_ {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  opacity: 0.9;
  flex-shrink: 0;
}

.services-tab_ic__y7N1_ svg {
  width: 20px;
  height: 20px;
}

.services-tab_title__m2SJW {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
}

.services-tab_price__2EQLm {
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  margin: 2px 0 0;
}

.services-tab_unit__VeF8J {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  margin-left: 4px;
  opacity: 0.8;
}

.services-tab_sub__IdGJU {
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0.95;
  margin: -4px 0 0;
}

.services-tab_desc__5_41S {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.9;
  text-wrap: pretty;
}

.services-tab_section__QCdPf {
  margin-top: 4px;
}

.services-tab_label__Ay2I1 {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.services-tab_checks__xbFrx {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}

.services-tab_checks__xbFrx li {
  padding-left: 22px;
  position: relative;
  line-height: 1.4;
}

.services-tab_checks__xbFrx li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 10px;
  height: 6px;
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.85;
}

.services-tab_bullets__zThDk {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.services-tab_bullets__zThDk li {
  padding-left: 14px;
  position: relative;
  line-height: 1.5;
}

.services-tab_bullets__zThDk li::before {
  content: "·";
  position: absolute;
  left: 2px;
  top: -2px;
  font-size: 18px;
  opacity: 0.8;
}

.services-tab_specBox__4KVw2 {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.services-tab_specRow__KvPnS {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.services-tab_specRow__KvPnS span:first-child {
  opacity: 0.8;
}

.services-tab_specRow__KvPnS span:last-child {
  font-weight: 500;
}

.services-tab_tierList__gKNpK {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.services-tab_tierRow__amUQk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  font-size: 13.5px;
}

.services-tab_tierRow__amUQk span:last-child {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
}

.services-tab_delivery__1RGyR {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  opacity: 0.85;
}

.services-tab_subOffer__augEM {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  margin-top: 4px;
}

.services-tab_subOfferIc__vbTZQ {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
}

.services-tab_subOfferT__qSNsi {
  font-family: var(--font-serif);
  font-size: 14.5px;
  font-weight: 500;
  margin: 0 0 2px;
}

.services-tab_subOfferL__RBzZJ {
  font-size: 12.5px;
  opacity: 0.8;
  line-height: 1.45;
}

.services-tab_subOfferLem__QUbDF {
  font-style: italic;
  opacity: 0.7;
}

.services-tab_usage__vqACs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 999px;
  font-size: 12.5px;
  margin-top: auto;
}

.services-tab_cream__qdPyb .services-tab_usage__vqACs,
.services-tab_rust__ayPiZ .services-tab_usage__vqACs {
  background: rgba(255, 255, 255, 0.3);
}

.services-tab_usageDot__3o7Ge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3cb371;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.services-tab_usageEmpty__OhB1f .services-tab_usageDot__3o7Ge {
  background: #e06666;
}

.services-tab_cta__ON3QZ {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.92);
  margin-top: auto;
  transition: background 0.18s var(--ease-out), transform 0.18s var(--ease-out),
    box-shadow 0.18s var(--ease-out);
  text-decoration: none;
}

.services-tab_cta__ON3QZ:hover {
  background: #fff;
  transform: translateY(-1px);
}

.services-tab_cta__ON3QZ:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45);
}

.services-tab_cream__qdPyb .services-tab_cta__ON3QZ:focus-visible {
  outline-color: #2a1d0a;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.7);
}

.services-tab_cta__ON3QZ:disabled {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(0, 0, 0, 0.55);
}

.services-tab_cta__ON3QZ:disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .services-tab_cta__ON3QZ,
  .services-tab_cta__ON3QZ:hover {
    transition: none;
    transform: none;
  }
}

.services-tab_srOnly__8hJo7 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* When card also has usage pill, CTA should not push to bottom */
.services-tab_usage__vqACs + .services-tab_cta__ON3QZ {
  margin-top: 0;
}

/* Color variants */

.services-tab_green__bQFrM {
  background: linear-gradient(160deg, #2a4213 0%, #1a2c0a 100%);
  color: #e8ecd9;
}
.services-tab_green__bQFrM .services-tab_title__m2SJW,
.services-tab_green__bQFrM .services-tab_price__2EQLm {
  color: #fff;
}
.services-tab_green__bQFrM .services-tab_cta__ON3QZ,
.services-tab_green__bQFrM .services-tab_badge__Maj6w {
  color: #2a4213;
}

.services-tab_purple__Gp9ae {
  background: linear-gradient(160deg, #6b2dab 0%, #4b1c85 100%);
  color: #ece0ff;
}
.services-tab_purple__Gp9ae .services-tab_title__m2SJW,
.services-tab_purple__Gp9ae .services-tab_price__2EQLm {
  color: #fff;
}
.services-tab_purple__Gp9ae .services-tab_cta__ON3QZ,
.services-tab_purple__Gp9ae .services-tab_badge__Maj6w {
  color: #4b1c85;
}

.services-tab_blue__aNMc0 {
  background: linear-gradient(160deg, #2b4fb5 0%, #1e3a8a 100%);
  color: #d9e3ff;
}
.services-tab_blue__aNMc0 .services-tab_title__m2SJW,
.services-tab_blue__aNMc0 .services-tab_price__2EQLm {
  color: #fff;
}
.services-tab_blue__aNMc0 .services-tab_cta__ON3QZ,
.services-tab_blue__aNMc0 .services-tab_badge__Maj6w {
  color: #1e3a8a;
}

.services-tab_magenta__FqMEq {
  background: linear-gradient(160deg, #a61b5a 0%, #751042 100%);
  color: #ffd9e9;
}
.services-tab_magenta__FqMEq .services-tab_title__m2SJW,
.services-tab_magenta__FqMEq .services-tab_price__2EQLm {
  color: #fff;
}
.services-tab_magenta__FqMEq .services-tab_cta__ON3QZ,
.services-tab_magenta__FqMEq .services-tab_badge__Maj6w {
  color: #751042;
}

.services-tab_rust__ayPiZ {
  background: linear-gradient(160deg, #b84a1f 0%, #8a2e0d 100%);
  color: #ffe4d1;
}
.services-tab_rust__ayPiZ .services-tab_title__m2SJW,
.services-tab_rust__ayPiZ .services-tab_price__2EQLm {
  color: #fff;
}
.services-tab_rust__ayPiZ .services-tab_cta__ON3QZ,
.services-tab_rust__ayPiZ .services-tab_badge__Maj6w {
  color: #8a2e0d;
}

.services-tab_cream__qdPyb {
  background: linear-gradient(160deg, #faeacb 0%, #f0d9a9 100%);
  color: #4a3520;
}
.services-tab_cream__qdPyb .services-tab_title__m2SJW,
.services-tab_cream__qdPyb .services-tab_price__2EQLm {
  color: #2a1d0a;
}
.services-tab_cream__qdPyb .services-tab_cta__ON3QZ,
.services-tab_cream__qdPyb .services-tab_badge__Maj6w {
  color: #4a3520;
}
.services-tab_cream__qdPyb .services-tab_cta__ON3QZ {
  background: rgba(255, 255, 255, 0.6);
}
.services-tab_cream__qdPyb .services-tab_cta__ON3QZ:hover {
  background: rgba(255, 255, 255, 0.85);
}
.services-tab_cream__qdPyb .services-tab_ribbon__3WV73 {
  background: rgba(74, 53, 32, 0.85);
  color: #f0d9a9;
}
.services-tab_cream__qdPyb .services-tab_subOffer__augEM {
  background: rgba(255, 255, 255, 0.55);
}

.how-it-works-tab_root__0KXot {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.how-it-works-tab_sub__QV_7S {
  font-size: 13px;
  color: var(--light-mute);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 620px;
}

.how-it-works-tab_steps__OH9K8 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .how-it-works-tab_steps__OH9K8 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .how-it-works-tab_steps__OH9K8 {
    grid-template-columns: 1fr;
  }
}

.how-it-works-tab_step__7Qyyl {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--cream-light);
}

.how-it-works-tab_stepNum__7dyJ_ {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-faint);
  color: var(--green-dark);
  font-family: var(--font-serif);
  font-size: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.how-it-works-tab_stepTitle__Rq9rT {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--light-head);
  margin: 0 0 5px;
}

.how-it-works-tab_stepDesc__5_Qtz {
  font-size: 12.5px;
  color: var(--light-mute);
  line-height: 1.5;
  margin: 0;
}

.how-it-works-tab_flow__yvn_f {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--light-body);
  line-height: 1.55;
}

.how-it-works-tab_flow__yvn_f li {
  padding-left: 14px;
  position: relative;
}

.how-it-works-tab_flow__yvn_f li::before {
  content: "·";
  position: absolute;
  left: 2px;
  top: -3px;
  font-size: 20px;
  color: var(--green-dark);
}

.how-it-works-tab_tags__DaZhX {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.accordion_root__9EkFZ {
  display: flex;
  flex-direction: column;
}

.accordion_summary__ZMH8b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
          user-select: none;
}

.accordion_summary__ZMH8b::-webkit-details-marker {
  display: none;
}

.accordion_title__fqVqc {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--c-light-head);
}

.accordion_chevron__h0JLc {
  flex-shrink: 0;
  color: var(--c-light-mute);
  transition: transform var(--dur-fast) var(--ease-out);
}

details[open] > .accordion_summary__ZMH8b .accordion_chevron__h0JLc {
  transform: rotate(180deg);
}

.accordion_content__zvcMo {
  padding: 0 4px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-light-body);
}

.accordion_content__zvcMo p {
  margin: 0 0 10px;
}

.accordion_content__zvcMo p:last-child {
  margin-bottom: 0;
}

.faq-tab_root__tygnY {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-tab_closing__G9_ou {
  text-align: center;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.faq-tab_closingTitle__4bhgy {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--c-light-head);
}

.faq-tab_closingBody__SRL7P {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-light-mute);
  margin: 0 0 8px;
  max-width: 480px;
}

.coaching-tweaks_toggle__pfF6K {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: var(--green-dark);
  color: var(--cream-light);
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(30, 20, 10, 0.2);
  z-index: 98;
}

.coaching-tweaks_panel__KMQmw {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 280px;
  background: var(--cream-light);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(30, 20, 10, 0.15);
  z-index: 99;
  font-family: var(--font-sans);
}

.coaching-tweaks_head__46SzW {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--light-head);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coaching-tweaks_close__IOgql {
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--light-mute);
  padding: 0;
  width: 24px;
  height: 24px;
}

.coaching-tweaks_close__IOgql:hover {
  color: var(--light-head);
}

.coaching-tweaks_group__cXoPW {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coaching-tweaks_label__T1fKK {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--light-mute);
  margin-bottom: 4px;
  font-weight: 500;
}

.coaching-tweaks_derived__d2Jhm {
  color: var(--green-dark);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.coaching-tweaks_opts___f7ZK {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coaching-tweaks_opt__Qpy2Z {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--light-body);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s;
}

.coaching-tweaks_opt__Qpy2Z:hover {
  background: var(--cream-dark);
}

.coaching-tweaks_optActive__DzWIZ {
  background: var(--green-faint);
  color: var(--green-dark);
  border-color: var(--border-mid);
  font-weight: 500;
}

.coaching-tweaks_reset__aKvx_ {
  margin-top: 4px;
  background: none;
  border: 0;
  font-size: 11.5px;
  color: var(--green-dark);
  text-align: left;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
}

.coaching-tweaks_reset__aKvx_:hover {
  text-decoration: underline;
}

.coaching-shell_hero__EBNaG {
  margin-bottom: 24px;
}

.coaching-shell_tabBar__6N02a {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.coaching-shell_tab__Wn3iX {
  all: unset;
  cursor: pointer;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-light-mute);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.coaching-shell_tab__Wn3iX:hover {
  color: var(--c-light-head);
}

.coaching-shell_tab__Wn3iX:focus-visible {
  outline: 2px solid var(--c-green-dark);
  outline-offset: -2px;
  border-radius: 2px;
}

.coaching-shell_tabActive__rDHMR {
  color: var(--c-green-dark);
  border-bottom-color: var(--c-green-dark);
}

.coaching-shell_panel__vXl_o {
  min-height: 0;
}

/* ── Dark sky ─────────────────────────────────────────────────────────────
   Same treatment as My Search, which uses the same HeroCard language. */
html[data-time="evening"] .coaching-shell_hero__EBNaG,
html[data-time="night"] .coaching-shell_hero__EBNaG {
  border: 1px solid rgba(245, 240, 234, 0.32);
}

/* The tab bar sits directly on the page background. Without this the whole
   bar, including which tab is selected, disappears on the dark washes. */
html[data-time="evening"] .coaching-shell_tabBar__6N02a,
html[data-time="night"] .coaching-shell_tabBar__6N02a {
  border-bottom-color: var(--sky-line);
}

html[data-time="evening"] .coaching-shell_tab__Wn3iX,
html[data-time="night"] .coaching-shell_tab__Wn3iX {
  color: var(--sky-body);
}

html[data-time="evening"] .coaching-shell_tab__Wn3iX:hover,
html[data-time="night"] .coaching-shell_tab__Wn3iX:hover {
  color: var(--sky-head);
}

html[data-time="evening"] .coaching-shell_tab__Wn3iX:focus-visible,
html[data-time="night"] .coaching-shell_tab__Wn3iX:focus-visible {
  outline-color: var(--sky-accent);
}

html[data-time="evening"] .coaching-shell_tabActive__rDHMR,
html[data-time="night"] .coaching-shell_tabActive__rDHMR {
  color: var(--sky-accent);
  border-bottom-color: var(--sky-accent);
}

.browser-mock_frame__OmMxn {
  background: var(--c-cream-light);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(30, 20, 10, 0.06), 0 18px 48px rgba(30, 20, 10, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
}

.browser-mock_chrome__RMfjU {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--c-cream-dark) 60%, var(--c-cream-light));
  border-bottom: 1px solid var(--c-border);
}

.browser-mock_dots__ng3nQ {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-mock_dot__MhZeF {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Monochrome brand dots (2026-08 landing redesign): the design keeps the
   browser chrome in the restrained palette, three green-deep dots fading in
   opacity, instead of macOS traffic lights. The class names keep their
   position meaning (first/second/third dot). */
.browser-mock_dotRed__sxNyb {
  background: var(--c-green-deep);
  opacity: 0.85;
}

.browser-mock_dotAmber__IzMwK {
  background: var(--c-green-deep);
  opacity: 0.55;
}

.browser-mock_dotGreen__X17M_ {
  background: var(--c-green-deep);
  opacity: 0.3;
}

.browser-mock_urlBar__tpV8x {
  flex: 1 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-cream-light);
  border-radius: 999px;
  padding: 4px 14px;
  border: 1px solid color-mix(in srgb, var(--c-border-mid) 50%, transparent);
}

.browser-mock_urlText__WnDHg {
  font-family: var(--font-mono, "DM Mono", monospace);
  font-size: 11px;
  color: var(--c-light-mute);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.browser-mock_body__OMAxX {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--c-cream-light);
}

/*
 * Shared primitives for the landing sections. Section modules pull these in
 * with `composes: goldPill from "../landing-shared.module.css";` so the pills,
 * eyebrows, and ambient layers stay identical across sections.
 *
 * Palette: --c-* tokens only (marketing convention). Gold never sits on cream
 * or white surfaces (globals.css rule); the gold pill below is for the dark
 * hero/community surfaces only.
 *
 * Motion convention for the ambient layers (fireflies, glow, tilt): every
 * animated decorative element must look correct in its BASE styles, because
 * html[data-motion="static"] collapses the animation to one 0.01ms run and the
 * element then sits at its base state. Fireflies rest at half opacity, the
 * glow rests mid-intensity, the tilt rests level.
 */

/* ── Layout shells ─────────────────────────────────────────────────────────── */

.landing-shared_inner__4NwU2 {
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

.landing-shared_innerNarrow__jjlsu {
  max-width: 960px;
}

.landing-shared_innerWide__7etTT {
  max-width: 1180px;
}

/* Anchor targets land below the fixed nav (the old +44px subnav allowance is
   gone with the subnav itself). */
.landing-shared_anchor__aX2Uf {
  scroll-margin-top: calc(var(--nav-height) + 24px);
}

/* ── Type primitives ───────────────────────────────────────────────────────── */

.landing-shared_eyebrow__kZyHK {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.landing-shared_eyebrowGold__OONAg {
  color: var(--c-gold);
}

.landing-shared_eyebrowOak__hXqlo {
  color: var(--c-wood-oak);
}

/* ── Pills (CTAs) ──────────────────────────────────────────────────────────── */

/* Gold pill: dark surfaces ONLY (7.31:1 on green-deep, 9.89:1 on navy). */
.landing-shared_goldPill__noTZy {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 999px;
  border: 0;
  background: var(--c-gold);
  color: var(--c-green-deep);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55);
}

.landing-shared_goldPill__noTZy:hover {
  background: #e6c86b;
  transform: translateY(-1px);
}

.landing-shared_goldPill__noTZy:focus-visible {
  outline: 3px solid var(--c-cream);
  outline-offset: 3px;
}

/* Ghost pill on dark imagery. */
.landing-shared_ghostPillDark__532qP {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-text);
  border: 1px solid rgba(251, 248, 242, 0.45);
  background: rgba(11, 18, 25, 0.4);
  padding: 14px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.landing-shared_ghostPillDark__532qP:hover {
  background: rgba(251, 248, 242, 0.14);
  border-color: rgba(251, 248, 242, 0.7);
}

.landing-shared_ghostPillDark__532qP:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

/* Green pill for light surfaces (gold is banned there). */
.landing-shared_forestPill__Tiv0N {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  padding: 17px 34px;
  border-radius: 999px;
  border: 0;
  background: var(--c-green-dark);
  color: var(--c-cream);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  box-shadow: 0 18px 38px -18px rgba(45, 74, 50, 0.6);
}

.landing-shared_forestPill__Tiv0N:hover {
  background: var(--c-green-deep);
  transform: translateY(-1px);
}

.landing-shared_forestPill__Tiv0N:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 3px;
}

/* ── Ambient layers ────────────────────────────────────────────────────────── */

@keyframes landing-shared_nariLandingDrift1__jWt0w {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  25% { opacity: 0.85; }
  50% { transform: translate(28px, -36px); opacity: 0.45; }
  75% { opacity: 0.9; }
}

@keyframes landing-shared_nariLandingDrift2__R79Cd {
  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
  30% { opacity: 0.9; }
  50% { transform: translate(-32px, -22px); opacity: 0.4; }
  80% { opacity: 0.75; }
}

@keyframes landing-shared_nariLandingDrift3__3ccRK {
  0%, 100% { transform: translate(0, 0); opacity: 0.2; }
  40% { opacity: 0.8; }
  50% { transform: translate(16px, -48px); opacity: 0.5; }
}

@keyframes landing-shared_nariLandingGlow__KXbM3 {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

@keyframes landing-shared_nariLandingTilt__pnMLM {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-2.2deg); }
  60% { transform: rotate(1.6deg); }
}

.landing-shared_firefly__9FET7 {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 10px 2px rgba(221, 184, 74, 0.5);
  pointer-events: none;
  opacity: 0.5; /* base state: visible but calm when animations are frozen */
}

.landing-shared_fireflyA___n0as {
  animation: landing-shared_nariLandingDrift1__jWt0w 11s ease-in-out infinite;
}

.landing-shared_fireflyB__5_c1l {
  width: 4px;
  height: 4px;
  animation: landing-shared_nariLandingDrift2__R79Cd 14s ease-in-out 2s infinite;
}

.landing-shared_fireflyC__rmv_l {
  width: 3px;
  height: 3px;
  animation: landing-shared_nariLandingDrift3__3ccRK 17s ease-in-out 5s infinite;
}

.landing-shared_fireflyD__bRm4_ {
  animation: landing-shared_nariLandingDrift1__jWt0w 13s ease-in-out 7s infinite;
}

.landing-shared_glow__J9BpH {
  position: absolute;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(221, 184, 74, 0.16), transparent 62%);
  opacity: 0.7; /* base state: mid-intensity when frozen */
  animation: landing-shared_nariLandingGlow__KXbM3 9s ease-in-out infinite;
}

.landing-shared_tilt__AQw9o {
  animation: landing-shared_nariLandingTilt__pnMLM 7s ease-in-out infinite;
  transform-origin: 50% 88%; /* base transform: level (resting pose) */
}

/*
 * Community section: dark green gradient panel, gold hairline borders, bottom
 * gold glow with three fireflies drifting over it.
 *
 * Colors follow the landing token map (--c-* only); the rgba() values are the
 * design's alpha composites over the dark surface and stay literal on purpose.
 * One deliberate deviation: the chips intro lifts from the design's 0.62 cream
 * alpha to 0.68, because 0.62 composites to 4.44:1 on green-dark (just under
 * the 4.5:1 AA floor for 13.5px text); 0.68 lands at 4.98:1.
 */

.community-section_section__DEdXF {
  position: relative;
  overflow: hidden;
  padding: 56px 0 60px;
  background: linear-gradient(
    180deg,
    var(--c-green-deep) 0%,
    var(--c-green-deep) 22%,
    var(--c-green-dark) 100%
  );
  border-top: 1px solid rgba(221, 184, 74, 0.4);
  border-bottom: 1px solid rgba(221, 184, 74, 0.4);
}

/* ── Ambient layers ──────────────────────────────────────────────────────── */

.community-section_glowBottom__8vfHZ {
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
}

.community-section_fly1__ve7Hg {
  left: 26%;
  bottom: 120px;
}

.community-section_fly2__T_Q_w {
  left: 70%;
  bottom: 180px;
}

.community-section_fly3__xAoP5 {
  left: 52%;
  bottom: 90px;
}

/* ── Centered column ─────────────────────────────────────────────────────── */

.community-section_column__QAFWz {
  position: relative;
  max-width: 820px;
  text-align: center;
}

.community-section_eyebrow__8ebmB {
  margin: 0 0 22px;
}

.community-section_heading__ELgzo {
  margin: 0 0 16px;
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--c-text);
}

.community-section_headingItalic__qyCcc {
  font-style: italic;
  color: var(--c-gold);
}

.community-section_body__LzXH_ {
  max-width: 600px;
  margin: 0 auto 38px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(245, 240, 234, 0.86);
}

.community-section_quote__JgVZM {
  max-width: 560px;
  margin: 0 auto 28px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--c-text);
}

/* ── Office-hours illustration ───────────────────────────────────────────── */

.community-section_officeHours__BCWJc {
  max-width: 480px;
  margin: 0 auto 36px;
  padding: 22px 22px 20px;
  background: rgba(11, 18, 25, 0.22);
  border: 1px solid rgba(221, 184, 74, 0.32);
  border-radius: 20px;
}

.community-section_officeHoursTitle__zmYLt {
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 19px;
  color: var(--c-text);
  text-align: left;
}

/* The gallery is one illustration now, not a grid of built tiles. Its own
   tiles carry their backgrounds, so it needs no surface of its own. */
.community-section_officeHoursArt__NaqEx {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Support pillars ─────────────────────────────────────────────────────── */

.community-section_pillars__8iTid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 600px;
  margin: 0 auto 30px;
}

.community-section_pillar__Bq2IR {
  flex: 1 1;
  padding: 0 22px;
  text-align: center;
}

.community-section_pillarArt__SSN4Z {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 46px;
  margin: 0 auto 12px;
}

.community-section_leafArt__ttxvO {
  stroke: var(--c-gold);
}

.community-section_pillarTitle__1ysZ4 {
  margin-bottom: 5px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text);
}

.community-section_pillarBody__Q_cw2 {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(245, 240, 234, 0.72);
}

.community-section_pillarDivider__iqo5X {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(245, 240, 234, 0.22), transparent);
}

/* ── Conversation chips (illustrative, non-interactive) ──────────────────── */

.community-section_chipsIntro__0rCdA {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: rgba(245, 240, 234, 0.68);
}

.community-section_chipsRow__jFkzv {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 660px;
  margin: 0 auto;
}

.community-section_chip__vLpAg {
  padding: 10px 18px;
  background: rgba(245, 240, 234, 0.06);
  border: 1px solid rgba(245, 240, 234, 0.2);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--c-text);
  white-space: nowrap;
}

/* ── Mascot closer ───────────────────────────────────────────────────────── */

/* The closing illustration: the panda who was helped, now with a paw on a
   younger fox. A scene rather than an ornament, so no tilt, and sized to the
   art's 1.53:1 instead of the old 4:3 mascot box. */
.community-section_mascot__5B4WN {
  width: min(360px, 84vw);
  margin: 38px auto 16px;
}

.community-section_mascotImg__mHRrt {
  display: block;
  width: 100%;
  height: auto;
}

.community-section_closer__167yS {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--c-text);
}

/*
 * Gold disc + SVG triangle. Gold sits on dark imagery at every call site
 * (night hero, session poster, sessions poster, demo poster), which is the
 * only surface gold is allowed on.
 */

.play-badge_badge__GPP9A {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-green-deep);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.65);
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease;
}

.play-badge_triangle___uP9q {
  display: block;
}

/* Grow on hover of whichever button or link wraps the badge. :where() keeps
   the specificity at zero so a call site can still override. */
:where(button, a):hover > .play-badge_badge__GPP9A,
:where(button, a):hover .play-badge_badge__GPP9A {
  transform: scale(1.06);
  background: #e6c86b;
}

/*
 * ENGINE section: light gradient surface. Left, the "most resume builders"
 * treadmill (struck-through steps + the red loop line). Right, the demo
 * recording inside the shared BrowserMock frame, with the four-step process
 * bar and the pricing CTA underneath.
 *
 * Palette: --c-* tokens only; the rgba() hairlines and scrims are alpha
 * composites from the design and stay literal (landing convention). Gold
 * appears only on the play circle, which sits over the demo poster imagery,
 * never directly on the cream surface.
 */

.engine-section_section__B8xQo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #fff 0%,
    var(--c-cream-light) 46%,
    var(--c-cream) 100%
  );
  border-top: 1px solid rgba(85, 111, 36, 0.12);
  padding: 56px 0 60px;
}

/* Gold radial corner accent. The shared glow rests at mid-intensity when
   animations are frozen, so the static state stays presentable. */
.engine-section_cornerGlow__htF7_ {
  top: -120px;
  right: -80px;
  width: 520px;
  height: 420px;
}

/* Header */

.engine-section_header__5M_zW {
  max-width: 860px;
  margin-bottom: 42px;
  text-align: center;
}

.engine-section_eyebrow__eUeZo {
  margin-bottom: 20px;
}

.engine-section_heading__BOfmu {
  font-family: var(--font-heading);
  font-size: clamp(29px, 6vw, 36px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-light-head);
  margin-bottom: 14px;
}

.engine-section_headingItalic__AOlfg {
  font-style: italic;
}

.engine-section_subline__r7GnD {
  font-size: 15px;
  color: var(--c-light-mute);
  max-width: 540px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* Two-column grid */

.engine-section_grid___0QJ7 {
  /* Keep 1060: job-search-card.module.css .wrap uses the same 1060/32, so the
     two halves of this section share one left and right edge. Moving one
     without the other visibly misaligns the dark card below. */
  max-width: 1060px;
  position: relative;
  display: grid;
  /* Deliberately NOT the repeat(auto-fit, minmax(...)) idiom the other landing
     sections use. These columns are not peers: the left one is six short
     struck lines, the right one is a 16:9 product recording whose legibility
     is the point of the section. Equal tracks capped the player at 470x264 on
     a 1440 desktop, SMALLER than the same player got on a 720px tablet. This
     split spends the band the before/after illustration used to occupy on the
     thing people actually watch.
     Explicit tracks mean the collapse is now this file's job: the media query
     below is load-bearing, not cosmetic. Without it a phone gets two ~130px
     columns. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 48px;
  align-items: center;
}

/* Collapse to one column well above the old 756px fold.
   The demo column is (min(vw, 1060) - 64 - 48) * 0.59, so at 901px it is only
   ~465px and both columns are cramped: the treadmill list starts wrapping and
   the recording is no larger than it was before the reweight. A single
   full-width column hands the demo the whole 704px instead, which is the
   point of the change.
   Separately, and further down: .processCell is nowrap across four fixed
   tracks and needs about 332px, which the column stops providing around a
   677px viewport. That is below this breakpoint, so the collapse keeps the
   bar safe, but it is NOT the reason for choosing 900. Note the bar fails by
   overflowing, and .section is overflow:hidden, so it clips silently rather
   than showing a scrollbar. */
@media (max-width: 900px) {
  .engine-section_grid___0QJ7 {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* Left: the treadmill */

.engine-section_oldWayLabel__rQvfy {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-light-mute);
  margin-bottom: 18px;
}

.engine-section_oldWayList__msjmI {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
}

.engine-section_oldWayFirst__iqjmx {
  font-size: 13.5px;
  color: var(--c-light-body);
}

.engine-section_oldWayNote__WrDiv {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-light-mute);
}

.engine-section_struck__aSHiJ {
  font-size: 13.5px;
  color: var(--c-light-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(160, 40, 40, 0.45);
}

.engine-section_loopRow__1IOEw {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  margin-bottom: 40px;
  border-top: 1px solid rgba(160, 40, 40, 0.18);
}

.engine-section_loopGlyph__ZJMlK {
  font-size: 15px;
  color: var(--c-red);
}

.engine-section_loopLine__z4w4X {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--c-red);
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.engine-section_payoff__TWe2y {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-light-head);
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.engine-section_payoffItalic___Ttxf {
  font-style: italic;
}

/* Right: the demo */

.engine-section_demoCol__PElfP {
  position: relative;
}


/* max-width: none overrides BrowserMock's own 560px cap so the frame fills
   whatever the demo column gives it. Load-bearing since the grid was reweighted
   to 1.18fr: the column is ~559px at 1440, so removing this would re-cap the
   mock at almost exactly the right size and then silently stop working the
   moment anyone widens the section. */
.engine-section_browser__pdYp2 {
  max-width: none;
  border-radius: 20px;
  box-shadow: 0 30px 60px -34px rgba(27, 15, 51, 0.3);
}

/* BrowserMock's body pads its content (18px sides/top, 22px bottom); the
   recording should sit flush against the chrome like the design, so this
   wrapper bleeds back out. The bottom margin stays -22px because the caption
   strip below it re-bleeds itself. Keep in sync with
   browser-mock.module.css .body. */
.engine-section_playerBleed__sMoV_ {
  margin: -18px -18px -22px;
}


.engine-section_player__Lrcri,
.engine-section_posterOnly__hUTk6 {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-cream);
  overflow: hidden;
}

.engine-section_posterImg__wYGDA {
  object-fit: cover;
}

/* Idle: one full-bleed play button over the poster. */

.engine-section_playOverlay__WsGUh {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.engine-section_playOverlay__WsGUh:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: -3px;
}

/* PlayBadge owns the disc; this only adds the keyboard-focus grow, since the
   badge's own rule covers hover but not :focus-visible on the wrapper. */
.engine-section_playOverlay__WsGUh:focus-visible .engine-section_playCircle__Gyxmy {
  transform: scale(1.08);
}

/* Playing */

.engine-section_video__0cxCu {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--c-green-deep);
}

.engine-section_backBtn__eQjzP {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: rgba(27, 15, 51, 0.72);
  border: 1px solid rgba(245, 242, 235, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  transition: background 0.18s ease;
}

/* The pill is visually small per the design; the pseudo-element pads its hit
   target out to the 44px minimum without changing the rendering. */
.engine-section_backBtn__eQjzP::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 999px;
}

.engine-section_backBtn__eQjzP:hover {
  background: rgba(27, 15, 51, 0.9);
}

.engine-section_backBtn__eQjzP:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

/* Error */

.engine-section_errorPane__S04eC {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 28px;
  background: var(--c-green-deep);
  text-align: center;
}

.engine-section_errorText__XXW2C {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: rgba(245, 242, 235, 0.86);
}

.engine-section_retryBtn___APUh {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-cream);
  background: rgba(245, 242, 235, 0.08);
  border: 1px solid rgba(245, 242, 235, 0.35);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.engine-section_retryBtn___APUh:hover {
  background: rgba(245, 242, 235, 0.16);
  border-color: rgba(245, 242, 235, 0.6);
}

.engine-section_retryBtn___APUh:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

/* Below the frame */

/* The frame's own footer strip (design: hairline above, faint tinted band),
   living INSIDE BrowserMock's padded body: bleed to the frame edges and pull
   up to meet the player, which bled the body's bottom padding away. */
.engine-section_caption__p2Iqh {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--c-light-mute);
  text-align: center;
  margin: 0 -18px -22px;
  padding: 9px 14px;
  border-top: 1px solid rgba(85, 111, 36, 0.14);
  background: #faf8f4;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.engine-section_processBar__30qvw {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
  border-top: 1px solid rgba(85, 111, 36, 0.16);
  border-bottom: 1px solid rgba(85, 111, 36, 0.16);
}

.engine-section_processCell__GIvWG {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-light-body);
  text-align: center;
  white-space: nowrap;
  padding: 10px 4px;
}

.engine-section_processCell__GIvWG + .engine-section_processCell__GIvWG {
  border-left: 1px solid rgba(85, 111, 36, 0.16);
}

.engine-section_processCellOptional__2z_7Y {
  color: var(--c-light-mute);
}

.engine-section_footRow__UDwfk {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.engine-section_footnote__uxRV8 {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--c-green-dark);
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

.engine-section_cta__0NJ_W {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-wood-oak);
  white-space: nowrap;
  /* Padding grows the tap target to the 44px minimum; the negative margin
     keeps the row's visual rhythm unchanged. */
  padding: 13px 2px;
  margin: -13px -2px;
}

.engine-section_cta__0NJ_W:hover {
  text-decoration: underline;
}

.engine-section_cta__0NJ_W:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/*
 * HERO: full-bleed night scene, promise column, combined session card, and the
 * recording lightbox. One module for the folder; hero-section.tsx,
 * session-card.tsx and recording-lightbox.tsx all read from here.
 *
 * Colors: --c-* tokens for brand values; the rgba() literals are alpha scrim
 * composites over the night photo (allowed literal per the landing
 * conventions). Gold only ever sits on the dark scene, never on cream.
 */

/* ── Section shell + night scene ─────────────────────────────────────────── */

.hero-section_hero__GuqY0 {
  position: relative;
  background: var(--c-navy);
  overflow: hidden;
  isolation: isolate;
}

.hero-section_scene__lAG7X {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-section_sceneImage__iZJ5y {
  object-fit: cover;
}

/* Horizontal scrim: keeps the copy column legible over the illustration. */
.hero-section_scrimCopy__Iqzbb {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(11, 18, 25, 0.62) 0%,
    rgba(11, 18, 25, 0.5) 34%,
    rgba(11, 18, 25, 0.3) 62%,
    rgba(11, 18, 25, 0.18) 100%
  );
}

/* Vertical scrim: darkens the y=0 band behind the fixed transparent nav and
   reaches solid navy at the floor so the next section seams cleanly. */
.hero-section_scrimVertical__ZxL_h {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 25, 0.55) 0%,
    rgba(11, 18, 25, 0.2) 14%,
    transparent 28%,
    transparent 48%,
    rgba(11, 18, 25, 0.35) 74%,
    rgba(11, 18, 25, 0.82) 90%,
    var(--c-navy) 100%
  );
}

.hero-section_heroGlow__1bbLp {
  top: -140px;
  left: 22%;
  width: 760px;
  height: 560px;
  z-index: 1;
}

.hero-section_heroFireflyA__kE2gy {
  left: 30%;
  top: 34%;
  z-index: 1;
}

.hero-section_heroFireflyB__pWxez {
  left: 58%;
  top: 22%;
  z-index: 1;
}

.hero-section_heroFireflyC__4FN5P {
  left: 44%;
  top: 54%;
  z-index: 1;
}

.hero-section_heroFireflyD__j6ES8 {
  left: 74%;
  top: 40%;
  z-index: 1;
}

/* ── Layout grid ─────────────────────────────────────────────────────────── */

.hero-section_grid___STPG {
  position: relative;
  z-index: 2;
  display: grid;
  /* min(340px, 100%) so a 360px viewport (340 + 64px padding) cannot
     overflow horizontally. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 48px 56px;
  align-items: center;
  /* 44px of visual air below the fixed nav, whatever height the nav +
     announcement banner currently add up to. */
  padding-top: calc(var(--nav-height) + 44px);
  padding-bottom: 64px;
}

/* ── Left column: the promise ────────────────────────────────────────────── */

.hero-section_promise__gaycv {
  max-width: 600px;
  /* The price row's divider has to disappear when the COLUMN is too narrow to
     keep that row on one line. Viewport width is the wrong proxy: the grid
     goes two-column at 800px, which drops this column from 600px to 340px,
     so a viewport-width guard leaves the divider stranded at the end of a
     wrapped line between 800 and 809px. Making the column a container lets
     the guard key off the thing that actually causes the wrap. */
  container-type: inline-size;
}

.hero-section_heading___sn0U {
  font-family: var(--font-heading);
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.08;
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-wrap: pretty;
  text-shadow: 0 2px 6px rgba(11, 18, 25, 0.85), 0 4px 22px rgba(11, 18, 25, 0.6);
}

/* Credibility line under the heading. Sits at body size, not heading size:
   it supports the h1 rather than competing with it. */
.hero-section_subline__vSC1A {
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 400;
  /* 0.9 rather than the mockup's 0.82: this is the smallest body text over the
     busiest part of the illustration, and the extra opacity removes the tail
     of pixels that fell under AA where a firefly drifts behind a glyph. The
     difference is imperceptible on cream over a night scene. */
  color: rgba(245, 240, 234, 0.9);
  max-width: 460px;
  margin-bottom: 20px;
  text-shadow: 0 2px 6px rgba(11, 18, 25, 0.85), 0 4px 22px rgba(11, 18, 25, 0.6);
}

.hero-section_sublineStrong__7frnC {
  font-weight: 600;
  color: var(--c-text);
}

.hero-section_lead__5Wd6H {
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text);
  max-width: 540px;
  margin-bottom: 16px;
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9), 0 2px 14px rgba(11, 18, 25, 0.7);
}

/* The six steps read as one journey, so a hairline rail joins the dots.
   Drawn as one connector PER GAP, on each step except the last, rather than
   as a single line down the list. A single line has to be inset from the
   list's bottom edge, but the last dot sits on that step's FIRST line, so any
   step that wraps pushes the list's bottom past the dot and the rail runs on
   into empty space: measured 25px past it at every phone width and again at
   800-1119px, 47px at 320px. Each connector instead spans dot-centre to
   dot-centre (9.5px down from its own step's top, to 11px of gap plus 9.5px
   into the next), which is fixed however many lines either step occupies.
   The per-step alphas below reproduce the original top-to-bottom fade, which
   a single gradient can no longer provide once the line is segmented. */
.hero-section_benefits__zE7nM {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-width: 540px;
  margin-bottom: 30px;
}

.hero-section_benefit__Hqdcg:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9.5px;
  bottom: -20.5px;
  width: 1px;
  background: rgba(221, 184, 74, 0.55);
}

.hero-section_benefit__Hqdcg:nth-child(2)::before {
  background: rgba(221, 184, 74, 0.46);
}
.hero-section_benefit__Hqdcg:nth-child(3)::before {
  background: rgba(221, 184, 74, 0.37);
}
.hero-section_benefit__Hqdcg:nth-child(4)::before {
  background: rgba(221, 184, 74, 0.28);
}
.hero-section_benefit__Hqdcg:nth-child(5)::before {
  background: rgba(221, 184, 74, 0.19);
}

.hero-section_benefit__Hqdcg {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  /* Same reason as .subline: nudged up from the mockup's 0.88. */
  color: rgba(245, 240, 234, 0.94);
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9);
}

.hero-section_benefitDot__6eWJo {
  position: absolute;
  left: 2px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  /* Halo so the dot reads against the illustration, not just the scrim. */
  box-shadow: 0 0 0 3px rgba(221, 184, 74, 0.22);
}

.hero-section_ctaRow__Kz9sq {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hero-section_primaryCta__ZswA6 {
  text-decoration: none;
}

.hero-section_watchCta__AR_8w {
}

/* The badge brings its own disc; this only nudges it against the label. */
.hero-section_watchCtaBadge__oNiPK {
  margin-right: 2px;
}

/* Price row: the amount leads, the trial terms sit beside it behind a rule.
   Wraps to two lines on narrow phones, where the divider would sit at a line
   end, so it is hidden there rather than dangling. */
.hero-section_priceRow__Q0stX {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9);
}

.hero-section_priceAmount__PmC_x {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--c-text);
  white-space: nowrap;
}

.hero-section_pricePeriod__fHVwS {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(245, 240, 234, 0.8);
}

.hero-section_priceDivider__gZe2z {
  width: 1px;
  height: 18px;
  background: rgba(251, 248, 242, 0.3);
  /* Baseline-aligned flex item: nudge so the rule straddles the x-height
     rather than hanging below it. */
  transform: translateY(3px);
}

.hero-section_priceTrial__fW1yK {
  font-size: 13.5px;
  color: rgba(245, 240, 234, 0.86);
  white-space: nowrap;
}

.hero-section_mission__HTWev {
  font-size: 13.5px;
  color: rgba(245, 240, 234, 0.78);
  max-width: 500px;
  padding-top: 22px;
  border-top: 1px solid rgba(251, 248, 242, 0.26);
  line-height: 1.7;
  text-shadow: 0 1px 4px rgba(11, 18, 25, 0.9);
}

/* The row needs ~345px to stay on one line. Below that the divider would be
   left dangling at the end of a wrapped line, so it goes; the 12px gap still
   separates the amount from the trial terms. 360px leaves margin for font
   loading and rounding. */
@container (max-width: 360px) {
  .hero-section_priceDivider__gZe2z {
    display: none;
  }
}

/* ── Right column: session card ──────────────────────────────────────────── */

.hero-section_cardColumn__a7_OS {
  justify-self: end;
  width: 100%;
  max-width: 460px;
}

.hero-section_card__ZV7Ae {
  width: 100%;
  background: rgba(11, 18, 25, 0.62);
  border: 1px solid rgba(251, 248, 242, 0.22);
  border-radius: 22px;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 30px 64px -32px rgba(0, 0, 0, 0.7);
}

.hero-section_recordingButton__gv47A {
  display: block;
  width: 100%;
  position: relative;
  height: 214px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: filter 0.18s ease;
}

.hero-section_recordingButton__gv47A:hover {
  filter: brightness(1.06);
}

/* Inset outline so the ring is not clipped by the card's overflow: hidden. */
.hero-section_recordingButton__gv47A:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: -3px;
}

.hero-section_posterImage__2Aryh {
  object-fit: cover;
}

.hero-section_posterScrim__bTBLC {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 25, 0.1) 0%,
    rgba(11, 18, 25, 0.35) 52%,
    rgba(11, 18, 25, 0.86) 100%
  );
}

.hero-section_recordingChip__TPm7a {
  position: absolute;
  top: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(11, 18, 25, 0.6);
  border: 1px solid rgba(251, 248, 242, 0.28);
  border-radius: 999px;
  padding: 5px 11px;
}

/* Placement only: PlayBadge owns the disc, triangle, shadow and hover grow.
   The translate has to be re-declared in the hover rule below because the
   badge's own scale() would otherwise replace it. */
.hero-section_playCircle__EJmSj {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
}

.hero-section_recordingButton__gv47A:hover .hero-section_playCircle__EJmSj {
  transform: translate(-50%, -50%) scale(1.06);
}

.hero-section_recordingText__3wM_4 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  display: block;
}

.hero-section_recordingTitle__Ysn3s {
  display: block;
  font-family: var(--font-heading);
  font-size: 19px;
  line-height: 1.25;
  color: var(--c-text);
  margin-bottom: 4px;
}

.hero-section_recordingMeta__6up86 {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(245, 240, 234, 0.72);
}

/* Bottom block: next live session (or the none-state). */

.hero-section_sessionBlock__KM7KA {
  padding: 20px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(251, 248, 242, 0.16);
}

.hero-section_badgeRow__lucml {
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Design's #e8b038 amber dot maps to the gold token; the alpha halo stays
   literal (scrim composite). */
.hero-section_badgeDot__7y_a3 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 4px rgba(232, 176, 56, 0.22);
  flex-shrink: 0;
}

.hero-section_badgeLabel__iWzth {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.hero-section_sessionTitle__ZPP2p {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.22;
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.hero-section_sessionWhen__56qVA {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--c-text);
}

.hero-section_sessionDesc__BXMOx {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.78);
  /* Short block: balance the line lengths. The page default (pretty) only
     pulls one word down, which still left a 380/50 split here. Measured on
     production, where this element renders only when a real session exists:
     balance gives 199/231. */
  text-wrap: balance;
}

.hero-section_sessionCtaRow__5saSn {
  margin-top: 4px;
}

.hero-section_sessionCta__4_SFE {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-gold);
  border: 1px solid rgba(221, 184, 74, 0.55);
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.hero-section_sessionCta__4_SFE:hover {
  background: rgba(221, 184, 74, 0.14);
  border-color: var(--c-gold);
}

.hero-section_sessionCta__4_SFE:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

.hero-section_notifyLine__YA7eL {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.78);
}

.hero-section_notifyLink__QCXnh {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  text-decoration: none;
}

.hero-section_notifyLink__QCXnh:hover {
  text-decoration: underline;
}

.hero-section_notifyLink__QCXnh:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 3px;
}

/* ── Recording lightbox ──────────────────────────────────────────────────────
 * The DS Dialog.Content is restyled into the design's full-screen backdrop
 * (the design's dialog IS the backdrop, with a 960px inner wrapper). Doubled
 * selectors outrank the DS single-class .content rules regardless of CSS
 * bundle order. */

.hero-section_lightboxContent__o0Ayx.hero-section_lightboxContent__o0Ayx {
  top: 0;
  left: 0;
  transform: none;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  background: rgba(6, 10, 14, 0.88);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 32px;
  display: flex;
  font-family: var(--font-body);
  color: var(--c-text);
  animation: hero-section_heroLightboxIn__lYuor 0.2s ease both;
}

@keyframes hero-section_heroLightboxIn__lYuor {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* margin: auto centers in both axes AND keeps the top reachable when the
   flex container has to scroll (align-items: center would clip it). */
.hero-section_lightboxInner__uTRtx {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: auto;
}

.hero-section_lightboxHead__AZohh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hero-section_lightboxChip__xVHm3 {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 6px;
}

.hero-section_lightboxTitle__X9lHo.hero-section_lightboxTitle__X9lHo {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--c-text);
  margin: 0;
}

.hero-section_lightboxActions__F2ywp {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-section_lightboxWatchLink__giUEa {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  text-decoration: none;
  padding: 9px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.hero-section_lightboxWatchLink__giUEa:hover {
  text-decoration: underline;
}

.hero-section_lightboxWatchLink__giUEa:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
}

.hero-section_lightboxClose__AzjhQ {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text);
  background: rgba(251, 248, 242, 0.1);
  border: 1px solid rgba(251, 248, 242, 0.32);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease;
}

.hero-section_lightboxClose__AzjhQ:hover {
  background: rgba(251, 248, 242, 0.2);
}

.hero-section_lightboxClose__AzjhQ:focus-visible {
  outline: 3px solid var(--c-gold);
  outline-offset: 2px;
}

.hero-section_lightboxFrame__yFHIj {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-navy);
  border: 1px solid rgba(251, 248, 242, 0.2);
  border-radius: 14px;
  overflow: hidden;
}

.hero-section_lightboxIframe__bjBVL {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 640px) {
  .hero-section_lightboxContent__o0Ayx.hero-section_lightboxContent__o0Ayx {
    padding: 16px;
  }
}

/*
 * CLOSE section: cream surface with the sunset-meadow scene bleeding off the
 * bottom edge. The rgba(245, 242, 235, x) stops in the veils are alpha
 * composites of the cream token, kept literal per the landing conventions.
 */

.close-section_section__QR4oi {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-cream);
}

/* The scene bleeds 96px below the section so the asset's patched bottom band
   stays hidden; keep this inset exactly. */
.close-section_scene__kXJF0 {
  position: absolute;
  inset: 96px 0 -96px 0;
  z-index: 0;
  pointer-events: none;
}

.close-section_sceneImage__SRpog {
  object-fit: cover;
}

/* Full-height veil: seams the section to pricing above and keeps the copy
   legible on the watercolour. */
.close-section_veilSeam__mOOkT {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--c-cream) 0%,
    rgba(245, 242, 235, 0.92) 7%,
    rgba(245, 242, 235, 0.72) 16%,
    rgba(245, 242, 235, 0.42) 26%,
    rgba(245, 242, 235, 0.16) 36%,
    transparent 46%
  );
}

/* Denser 600px upper veil behind the copy block. */
.close-section_veilUpper__Fj65c {
  position: absolute;
  inset: 0 0 auto 0;
  height: 600px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(245, 242, 235, 0.96) 0%,
    rgba(245, 242, 235, 0.94) 52%,
    rgba(245, 242, 235, 0.88) 68%,
    rgba(245, 242, 235, 0.6) 78%,
    rgba(245, 242, 235, 0.22) 88%,
    transparent 96%
  );
}

/* Deep bottom padding leaves the meadow visible below the copy. */
.close-section_content__F6n1B {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 52px 32px 340px;
  text-align: center;
}

.close-section_heading__noAa3 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--c-light-head);
  font-weight: 500;
  margin-bottom: 16px;
}

.close-section_headingItalic__IP5AK {
  font-style: italic;
}

.close-section_body__cmv6e {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-light-body);
  max-width: 500px;
  margin: 0 auto 26px;
}

.close-section_cta__zbGOV {
}

.close-section_priceLine__Dh6iK {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--c-light-body);
}

/*
 * Question deck, two render modes sharing one card style:
 *   - unenhanced (SSR / crawlers / no-JS): .staticList, a plain ordered list
 *     with every card visible at natural height;
 *   - enhanced: .deck, a fixed-height stack of absolutely positioned .slide
 *     wrappers whose transforms come inline from the component.
 * The white card surfaces use --c-cream-light (the closest token to the
 * design's #fff; no white token exists). Gold appears on the dark answer
 * panel (allowed) and as the active indicator dot (per the section task).
 */

/* ── Unenhanced list ───────────────────────────────────────────────────────── */

.question-deck_staticList__Gmwbz {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.question-deck_staticItem__7sUd_ {
  margin: 0;
}

.question-deck_staticIndex__gcwCa {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--c-light-mute);
  margin-bottom: 8px;
}

/* ── Shared card ───────────────────────────────────────────────────────────── */

.question-deck_card__sbFlK {
  width: 100%;
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.2);
  border-radius: 20px;
  padding: 36px 36px 32px;
  box-shadow: 0 20px 40px -24px rgba(27, 15, 51, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.question-deck_question__sRtBq {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 20px;
  color: var(--c-light-head);
  line-height: 1.5;
}

/* #945a1b in the design has no token; wood-oak is the mapped small-text
   stand-in (gold is banned on light surfaces). */
.question-deck_quoteMark__1GDUd {
  color: var(--c-wood-oak);
}

.question-deck_answer__lpZZa {
  background: var(--c-green-deep);
  border-radius: 14px;
  padding: 18px 22px;
  color: rgba(245, 242, 235, 0.92);
  font-size: 14px;
  line-height: 1.65;
}

/* Gold label on the dark green panel: allowed surface for gold. */
.question-deck_who__a_gpi {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 6px;
}

/* ── Enhanced deck ─────────────────────────────────────────────────────────── */

/* Fixed heights sized to the longest card (question one) at each width band;
   cards stretch to fill so the stack edge is uniform. */
.question-deck_deck__PwvqG {
  position: relative;
  height: 520px;
  outline-offset: 6px;
}

.question-deck_deck__PwvqG:focus-visible {
  outline: 3px solid var(--c-green-dark);
}

@media (min-width: 480px) {
  .question-deck_deck__PwvqG {
    height: 460px;
  }
}

@media (min-width: 700px) {
  .question-deck_deck__PwvqG {
    height: 340px;
  }
}

/* Transform/opacity/z-index come inline from the component. Time-based
   transitions, so html[data-motion="static"] snaps card changes. */
.question-deck_slide__MeKXi {
  position: absolute;
  inset: 0;
  cursor: pointer;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.question-deck_slide__MeKXi .question-deck_card__sbFlK {
  height: 100%;
}

.question-deck_slideHidden__1IAN7 {
  pointer-events: none;
  cursor: default;
}

/* ── Controls ──────────────────────────────────────────────────────────────── */

.question-deck_controls__OSsI0 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.question-deck_navBtn__kXePZ {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(85, 111, 36, 0.24);
  background: var(--c-cream-light);
  color: var(--c-green-dark);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.question-deck_navBtn__kXePZ:hover {
  background: rgba(85, 111, 36, 0.1);
}

.question-deck_navBtn__kXePZ:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 2px;
}

.question-deck_dots__tAgK2 {
  display: flex;
  gap: 7px;
}

.question-deck_dot__sbyxt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(85, 111, 36, 0.28);
  transition: background 0.15s ease;
}

.question-deck_dotActive__7KiO4 {
  /* Position indicator (informational): needs 3:1 on cream, which gold fails
     (1.68:1) and is banned there anyway. Green-dark is 8.79:1. */
  background: var(--c-green-dark);
}

.question-deck_count__xWrtV {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--c-light-mute);
  min-width: 40px;
}

/* ── Narrow screens ────────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .question-deck_card__sbFlK {
    padding: 26px 22px 24px;
  }

  .question-deck_question__sRtBq {
    font-size: 18px;
  }
}

/*
 * WHY section: dark narration panel bridging the navy hero into the deep-green
 * body of the page. Left column narrates, right column stacks the three
 * "absent insider" portrait rows.
 *
 * rgba(245, 240, 234, 0.78) is the design's soft-text alpha composite of
 * --c-text on the dark gradient and stays literal per the landing conventions
 * (alpha composites, not brand colors).
 */

.why-section_section__WY8ay {
  /* -1px overlap hides the seam against the hero above. */
  margin-top: -1px;
  padding: 40px 0 84px;
  background: linear-gradient(
    180deg,
    var(--c-navy) 0%,
    var(--c-navy) 14%,
    var(--c-green-deep) 58%,
    var(--c-green-deep) 100%
  );
}

.why-section_grid__MG04Z {
  display: grid;
  /* min(300px, 100%) so a 360px viewport (296px of content) cannot overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 44px 52px;
  align-items: center;
}

/* ── Left · the narration ─────────────────────────────────────────────────── */

.why-section_eyebrow__mdYQY {
  margin: 0 0 20px;
}

.why-section_heading__4AcMC {
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1.16;
  color: var(--c-text);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  text-wrap: pretty;
}

.why-section_headingItalic__zNwrx {
  font-style: italic;
}

.why-section_body__jqczV {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(245, 240, 234, 0.78);
  margin: 0;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

/* ── Right · the absent insiders ──────────────────────────────────────────── */

.why-section_insiders__25PME {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-section_row__c1FwB {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 4px;
}

.why-section_portraitWrap__QxsRp {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-section_portraitHalo__zQZCO {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(221, 184, 74, 0.15),
    transparent 62%
  );
}

/* Paints the art above its absolutely positioned halo. */
.why-section_portraitArt__t_2qS {
  position: relative;
}

.why-section_rowBody__8aunY {
  flex: 1 1;
}

.why-section_rowTitle__FMZWX {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--c-text);
  line-height: 1.3;
  margin: 0;
}

/* The design's #b8cca0 is exactly --sage-bg in tokens.css (aliased as
   --c-sage-bg); --c-sage-text is its dark companion (#1e3028), so the bg
   token is the correct exact match for this sage label on the dark surface
   (about 8.2:1 on green-deep). */
.why-section_tag__yYh85 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-sage-bg);
  margin-left: 8px;
  white-space: nowrap;
  display: inline-block;
}

.why-section_quote__MLtqL {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 240, 234, 0.78);
  margin: 7px 0 0;
}

.why-section_quoteMark__nJhtm {
  color: var(--c-gold);
}

/*
 * "So we built Nari." section.
 *
 * White section. The top 420px is a dawn-panorama band: the image layer is
 * parallax-scrolled (ParallaxLayer), masked from transparent at the top to
 * solid, and a white gradient wash seats the band into the white surface
 * below. Content rises out of the band; the three cards cascade in via the
 * global stagger reveal and lift on hover.
 *
 * The rgba() values below are the design's alpha composites (scrims, washes,
 * tinted borders/shadows), kept literal per the landing conventions.
 */

.built-section_section__7dMfI {
  position: relative;
  overflow: hidden;
  background: #fff; /* design: pure white surface (no brand token for white) */
  padding: 0;
}

/* ── Dawn band ─────────────────────────────────────────────────────────────── */

.built-section_band__5iYm2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 420px;
  overflow: hidden;
  background: var(--c-green-deep);
}

/* The parallax-transformed layer: bleeds 70px past the band on both vertical
   edges so the 30px parallax travel never exposes the band background. The
   mask fades the image in from transparent at the top to solid past the
   midpoint (the design's seat-into-the-dark-section-above fade). */
.built-section_bandParallax__m9MOp {
  position: absolute;
  inset: -70px 0;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 8%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.32) 24%,
    rgba(0, 0, 0, 0.58) 33%,
    rgba(0, 0, 0, 0.82) 42%,
    #000 52%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 8%,
    rgba(0, 0, 0, 0.12) 16%,
    rgba(0, 0, 0, 0.32) 24%,
    rgba(0, 0, 0, 0.58) 33%,
    rgba(0, 0, 0, 0.82) 42%,
    #000 52%
  );
}

.built-section_bandImage__xm1io {
  object-fit: cover;
}

/* White wash rising from the bottom of the band: seats the panorama into the
   white section (also the scrim under the heading, preserved per a11y rule). */
.built-section_bandWash__fZjQR {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    #fff 0%,
    rgba(255, 255, 255, 0.92) 8%,
    rgba(252, 250, 245, 0.7) 18%,
    rgba(245, 242, 235, 0.4) 30%,
    rgba(237, 233, 224, 0.18) 42%,
    transparent 56%
  );
}

/* ── Content ───────────────────────────────────────────────────────────────── */

.built-section_bodyWrap__DSHWC {
  position: relative;
  padding: 0 0 60px;
}

.built-section_content__IJzU4 {
  position: relative;
  padding-top: 190px;
  text-align: center;
}

.built-section_heading__zxLXg {
  font-family: var(--font-heading);
  font-size: clamp(31px, 5.2vw, 38px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-light-head);
  margin-bottom: 10px;
}

.built-section_subline___El4J {
  font-size: 16px;
  color: var(--c-light-body);
  max-width: 460px;
  margin: 0 auto 34px;
  text-wrap: balance;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.built-section_grid__M86eT {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  list-style: none;
  padding: 0;
}

.built-section_card__lYHUV {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #fffdf9 0%, #faf7f0 100%);
  border: 1px solid rgba(85, 111, 36, 0.14);
  border-radius: 14px;
  padding: 26px 26px 28px;
  box-shadow: 0 20px 44px -34px rgba(27, 15, 51, 0.4);
  /* `opacity` appended for the nari-reveal-fade arm: this shorthand outranks
     the global fade transition in the cascade (globals.css gotcha). */
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s,
    border-color 0.22s,
    opacity 0.6s cubic-bezier(0.2, 0.65, 0.25, 1);
}

/* Tripled class on purpose: after reveal, the global stagger rule
   (.nari-reveal-stagger.reveal-armed.is-revealed > *) pins `transform: none`
   on the cards at three-class specificity, and the per-child stagger rule adds
   a transition-delay; a plain .card:hover would lose to both. (0,4,1) wins,
   and the zeroed delay keeps the lift immediate. */
.built-section_card__lYHUV.built-section_card__lYHUV.built-section_card__lYHUV:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 56px -32px rgba(27, 15, 51, 0.42);
  border-color: rgba(168, 104, 32, 0.55);
  transition-delay: 0s;
}

/* Top accent bar. The design drew it gold, but gold never sits on cream/white
   (globals rule), so it is re-toned to golden-sand, the DS's warm accent for
   light surfaces (3.9:1 non-text on white). */
.built-section_cardBar__x809C {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-golden-sand), rgba(168, 104, 32, 0.15));
}

/* Giant ghost number behind the card content. */
.built-section_cardGhost__LiP2m {
  position: absolute;
  right: 16px;
  bottom: -14px;
  font-family: var(--font-heading);
  font-size: 92px;
  font-weight: 400; /* Lora 300 is not loaded; pin to a real weight */
  line-height: 1;
  color: rgba(45, 74, 50, 0.06);
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

/* Replaces the old mono eyebrow. The eyebrow named the thing ("The engine")
   and the title named it again, so the icon carries that job silently and the
   title gets to be the first words read. Golden-sand on a tinted square, not
   gold: gold is banned on light surfaces. */
.built-section_cardIcon__aup5e {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  margin-bottom: 18px;
  color: var(--c-wood-oak);
  background: rgba(168, 104, 32, 0.09);
}

.built-section_cardTitle__uA89J {
  position: relative;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-light-head);
  margin-bottom: 10px;
  text-wrap: pretty;
}

/* The promise. Carries the weight the old italic emphasis used to, but on the
   whole line rather than a single word spliced in by an indexOf. */
.built-section_cardLead__t8Lzv {
  position: relative;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-green-dark);
  margin-bottom: 12px;
  text-wrap: pretty;
}

.built-section_cardBody__tXq6b {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-light-mute);
  text-wrap: pretty;
}

.built-section_closer__e_UN7 {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 18px;
  font-weight: 400; /* Lora italic 400 is loaded; avoid a faux 300 */
  color: var(--c-green-dark);
  margin-top: 34px;
  /* Short block: balance the line lengths. */
  text-wrap: balance;
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .built-section_band__5iYm2 {
    height: 300px;
  }

  .built-section_content__IJzU4 {
    padding-top: 140px;
  }
}

/*
 * Job search card: the Engine section's second half.
 *
 * Dark green card, so gold is allowed here (it is banned on cream/white).
 * The right-hand panel is a light surface INSIDE that card, so anything on it
 * uses the light-surface tokens.
 *
 * Motion: the panel's assembly comes from the shared .nari-reveal-stagger
 * classes in globals.css. The only bespoke motion is the Search press below,
 * and it follows the page convention: the base (un-animated) state is the
 * resting button, so Static mode freezes on something presentable.
 */

.job-search-card_wrap__GiNsu {
  max-width: 1060px;
  margin: 44px auto 0;
  padding: 0 32px;
}

.job-search-card_card__moOmK {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--c-green-deep), var(--c-green-dark));
  border-radius: 20px;
  padding: 34px 36px 36px;
  box-shadow: 0 30px 60px -34px rgba(27, 15, 51, 0.4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 34px 42px;
  align-items: center;
}

.job-search-card_topBar__kQC5K {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-gold), rgba(221, 184, 74, 0.12));
}

/* ── Left column ─────────────────────────────────────────────────────────── */

.job-search-card_eyebrow__FX0XB {
  font-size: 9.5px;
  margin-bottom: 14px;
}

.job-search-card_heading__svJEG {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--c-text);
  margin-bottom: 12px;
}

.job-search-card_headingItalic__6Yokf {
  font-style: italic;
}

/* Gold, not body copy. This is the claim the bullets then evidence, so it
   carries the section's accent. Gold is fine here: the card is dark green. */
.job-search-card_goldLine__TOolG {
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-gold);
  margin-bottom: 18px;
  text-wrap: pretty;
}

.job-search-card_bullets__1TJBl {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.job-search-card_bullet__7gaq0 {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 240, 234, 0.86);
}

.job-search-card_bulletDot__6mslE {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* ── Right column: the panel illustration ────────────────────────────────── */

.job-search-card_panel__FQd8r {
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.18);
  border-radius: 14px;
  padding: 20px 20px 22px;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.6);
}

.job-search-card_panelInner__gwZVV {
  display: block;
}

.job-search-card_fieldLabel__RsRAd {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-light-mute);
  margin-bottom: 8px;
}

.job-search-card_field__NNsnF {
  display: block;
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--c-light-body);
}

.job-search-card_fieldHelp__IkrS_ {
  font-size: 11.5px;
  color: var(--c-light-mute);
  margin: 8px 0 18px;
}

.job-search-card_chips__ZZOjH {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.job-search-card_chip___UY6E {
  font-size: 12.5px;
  color: var(--c-light-body);
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  /* A filter pill that wraps mid-label stops reading as a control. */
  white-space: nowrap;
  flex-shrink: 0;
}

.job-search-card_searchRow__dUhOv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(85, 111, 36, 0.16);
}

.job-search-card_directOnly__b_nkP {
  font-size: 13px;
  color: var(--c-light-body);
}

.job-search-card_searchBtn__zN6zX {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-cream);
  background: var(--c-green-dark);
  border-radius: 8px;
  padding: 8px 18px;
}

/* The one bespoke beat: after the panel has assembled, the Search button gives
   a single press. Base state is the resting button, so Static mode (and every
   mobile visitor) simply sees it at rest. */
/* The ring spreads onto the PANEL, which is a light surface, so it is toned in
   golden-sand alphas rather than gold (same reason the trust deck's ring is).
   The card being dark buys nothing here. */
@keyframes job-search-card_nariJobsPress__jIE7A {
  0% { transform: none; box-shadow: 0 0 0 0 rgba(168, 104, 32, 0); }
  45% { transform: scale(0.96); box-shadow: 0 0 0 6px rgba(168, 104, 32, 0.22); }
  100% { transform: none; box-shadow: 0 0 0 0 rgba(168, 104, 32, 0); }
}

.job-search-card_panelInner__gwZVV.is-revealed .job-search-card_searchBtn__zN6zX {
  animation: job-search-card_nariJobsPress__jIE7A 0.6s 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The picker sits above the downloads now rather than beside them: at the
   panel's width a named resume plus two buttons on one line left every item
   too narrow to read as itself. */
.job-search-card_applyingRow__zd8Q3 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-search-card_resumePick__bZ6Bx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-light-body);
}

.job-search-card_downloads__ay0Y5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.job-search-card_download__fTEBj {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--c-light-body);
  background: var(--c-cream-light);
  border: 1px solid rgba(85, 111, 36, 0.22);
  border-radius: 8px;
  padding: 9px 10px;
  white-space: nowrap;
}

/* Both panel glyphs. Muted so they read as affordance hints on a mock rather
   than as live controls. */
.job-search-card_glyph__QzAt4 {
  flex-shrink: 0;
  color: var(--c-light-mute);
}

/* ── Foot row ────────────────────────────────────────────────────────────── */

.job-search-card_footRow__ORzGa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.job-search-card_footnote__x2zaB {
  font-size: 13.5px;
  color: var(--c-light-mute);
}

.job-search-card_cta__R_fsr {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-wood-oak);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Underline, not a colour shift: the foot row sits OUTSIDE the dark card, on
   the section's cream gradient, where golden-sand is 4.03:1 (fails AA, and
   fails at the exact moment the visitor is targeting the link). Matches the
   identical CTA one section up, which keeps wood-oak in both states. */
.job-search-card_cta__R_fsr:hover {
  text-decoration: underline;
}

.job-search-card_cta__R_fsr:focus-visible {
  outline: 3px solid var(--c-green-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .job-search-card_card__moOmK {
    padding: 28px 22px 30px;
  }
}