/* Homepage only: keep shared pages on the existing design system. */
.homepage.ds .ds-hero { padding-top: clamp(116px, 11vw, 148px); }
.homepage.ds .hero-ask { position: relative; margin-top: 30px; }
/* Callout on the build button: there on load, gone once the visitor scrolls. */
.homepage .home-tip { position: absolute; left: calc(100% + 18px); top: 50%; translate: 0 -50%; padding: 8px 12px; border-radius: var(--ds-r-md); background: var(--ds-ink, #17151f); color: #fff; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px -12px rgba(23, 21, 31, .5); transition: filter .3s, visibility .3s; }
.homepage .home-tip::before { content: ""; position: absolute; right: 100%; top: 50%; translate: 0 -50%; border: 6px solid transparent; border-right-color: var(--ds-ink, #17151f); }
.homepage .home-tip.is-gone { filter: opacity(0); visibility: hidden; }
.homepage .hero-ask .pill:focus-visible ~ .home-tip.is-gone { filter: none; visibility: visible; }
@media (hover: hover) { .homepage .hero-ask .pill:hover ~ .home-tip.is-gone { filter: none; visibility: visible; } }
@keyframes home-tip-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@media (max-width: 1100px) {
  .homepage .home-tip { left: auto; right: 14px; top: 0; translate: 0 -78%; padding: 6px 11px; font-size: 12.5px; }
  .homepage .home-tip::before { right: 26px; top: 100%; translate: none; border-right-color: transparent; border-top-color: var(--ds-ink, #17151f); }
  @keyframes home-tip-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
}
@keyframes home-tip-in { from { opacity: 0; scale: .92; } }
@media (prefers-reduced-motion: no-preference) {
  .homepage.ds .hero-ask { animation: ds-rise 1s cubic-bezier(.16, 1, .3, 1) .3s both; }
  .homepage .home-examples { animation: ds-rise 1s cubic-bezier(.16, 1, .3, 1) .4s both; }
  .homepage .home-tip { animation: home-tip-in .5s cubic-bezier(.16, 1, .3, 1) 1.6s both, home-tip-nudge 2.4s ease-in-out 2.3s infinite; }
}
.homepage .home-examples { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 0; margin-top: 18px; font-size: 14px; }
.homepage .home-examples > span { margin-right: 10px; font-family: var(--ds-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-primary); }
.homepage .home-examples button { position: relative; padding: 2px 12px; border: 0; background: none; color: var(--ds-body); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.homepage .home-examples button + button:not(.is-line-start)::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 13px; translate: 0 -50%; background: var(--ds-border); }
.homepage .home-examples button:hover { color: var(--ds-primary); text-decoration-color: currentColor; }
.homepage .home-examples button:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; }
.homepage .home-examples .hero-connect { margin-left: 22px; font-size: 14px; }
.homepage.ds .ds-customers { padding-top: clamp(44px, 5vw, 64px); }
.homepage.ds .ds-explore { padding-top: clamp(52px, 6vw, 80px); scroll-margin-top: 80px; }
.homepage.ds .ds-explore .ds-head { margin-bottom: 28px; }
.homepage.ds .ds-explore .fx-stage { margin-top: 0; }
.homepage.ds .fx-stage { padding-block: clamp(16px, 5vw, 72px); }
.homepage.ds .fx-detail-head button { min-width: 36px; min-height: 36px; }
.homepage.home-demo-in-view .landing-jason { visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .homepage .jason-launcher { padding: 8px; gap: 0; font-size: 0 !important; }
  .homepage .jason-launcher img { width: 36px; height: 36px; }
  .homepage .home-examples { font-size: 13.5px; }
  .homepage .home-examples > span { margin-right: 4px; }
  .homepage .home-examples button { min-height: 36px; padding-inline: 8px; }
  .homepage .home-examples button:nth-of-type(n+3) { display: none; }
  .homepage .home-examples .hero-connect { width: 100%; justify-content: center; margin: 6px 0 0; }
  .homepage.ds .hero-ask .pill { padding-inline: 12px; }
}

/* Use cases: four recognisable datasets, each with what arrives and how often. */
.homepage.ds .ds-usecases { padding-top: clamp(56px, 7vw, 96px); }
.homepage .uc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.homepage .uc-grid > li { display: flex; }
.homepage .uc-card { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); overflow: hidden; background: var(--ds-canvas); color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .25s, transform .25s cubic-bezier(.16, 1, .3, 1); }
.homepage .uc-card:hover { border-color: var(--ds-border-strong); box-shadow: 0 18px 40px -28px rgba(101, 61, 233, .5); transform: translateY(-2px); }
.homepage .uc-card:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 3px; }
.homepage .uc-art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 20px 24px; overflow: hidden; isolation: isolate; background: var(--a1); }
.homepage .uc-art::before { content: ""; position: absolute; inset: -25%; z-index: -1; filter: blur(36px); background: radial-gradient(45% 50% at var(--x1) var(--y1), var(--c1) 0%, transparent 70%), radial-gradient(45% 50% at var(--x2) var(--y2), var(--c2) 0%, transparent 70%), linear-gradient(180deg, var(--a1), var(--a2)); }
.homepage .uc-tone-a { --a1: #E6F5EA; --a2: #D3EDDB; --c1: #A8DDBB; --x1: 15%; --y1: 20%; --c2: #EEF9F1; --x2: 85%; --y2: 85%; --tile: #D8EDDF; --ink: #31764D; }
.homepage .uc-tone-b { --a1: #FDEFE3; --a2: #F9DFC9; --c1: #FAD3B3; --x1: 80%; --y1: 15%; --c2: #FFF6EE; --x2: 20%; --y2: 90%; --tile: #FCE4CF; --ink: #A75220; }
.homepage .uc-tone-c { --a1: #FCEDF1; --a2: #F5DAE3; --c1: #F1C3D3; --x1: 20%; --y1: 80%; --c2: #FDF4F7; --x2: 85%; --y2: 20%; --tile: #F4DEE5; --ink: #A04769; }
.homepage .uc-tone-d { --a1: #EAF2FD; --a2: #D8E7FA; --c1: #BBD6F5; --x1: 85%; --y1: 80%; --c2: #F3F8FE; --x2: 15%; --y2: 15%; --tile: #DBE9FA; --ink: #37689D; }
.homepage .uc-mock { width: 100%; max-width: 280px; border-radius: var(--ds-r-md); background: #fff; box-shadow: 0 1px 0 rgba(23, 21, 31, .04), 0 16px 34px -18px rgba(54, 30, 140, .45); font-size: 11px; line-height: 1.3; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.homepage .uc-card:hover .uc-mock { transform: translateY(-3px) scale(1.015); }
.homepage .uc-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--ds-border); }
.homepage .uc-mock-name { font-family: var(--ds-mono); font-size: 10.5px; color: var(--ds-ink); }
.homepage .uc-mock-run { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 999px; background: var(--ds-success-soft); color: var(--ds-success); font-size: 10px; font-weight: 500; }
.homepage .uc-mock-run i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.homepage .uc-rows { margin: 0; padding: 0; list-style: none; }
.homepage .uc-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; }
.homepage .uc-rows li + li { border-top: 1px solid var(--ds-surface-alt); }
.homepage .uc-row-main { display: grid; min-width: 0; }
.homepage .uc-row-main b { overflow: hidden; color: var(--ds-ink); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.homepage .uc-row-main small { overflow: hidden; color: var(--ds-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.homepage .uc-row-val { display: grid; flex: none; justify-items: end; color: var(--ds-ink); font-size: 12px; font-weight: 500; }
.homepage .uc-flag { margin-top: 2px; font-size: 10px; font-style: normal; font-weight: 500; }
.homepage .uc-flag-down, .homepage .uc-flag-new { color: var(--ds-success); }
.homepage .uc-flag-up, .homepage .uc-flag-out { color: #C2410C; }
.homepage .uc-flag-promo { color: var(--ds-primary); }
.homepage .uc-body { display: flex; flex: 1; flex-direction: column; padding: 20px 20px 22px; }
.homepage .uc-body h3 { display: flex; align-items: center; gap: 10px; color: var(--ds-ink); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.homepage .uc-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: var(--ds-r-sm); background: var(--tile, var(--ds-primary-soft)); color: var(--ink, var(--ds-primary)); }
.homepage .uc-icon .icon { width: 16px; height: 16px; }
.homepage .uc-body > p { margin-top: 10px; color: var(--ds-body); font-size: 15px; line-height: 1.5; }
.homepage .uc-meta { display: grid; gap: 6px; margin: 16px 0 18px; padding-top: 14px; border-top: 1px solid var(--ds-border); font-size: 13px; line-height: 1.4; }
.homepage .uc-meta > div { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.homepage .uc-meta dt { padding-top: 2px; color: var(--ds-muted); font-family: var(--ds-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.homepage .uc-meta dd { margin: 0; color: var(--ds-ink); }
.homepage .uc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--ds-primary); font-size: 14px; font-weight: 500; }
.homepage .uc-link .icon { width: 15px; height: 15px; transition: transform .2s; }
.homepage .uc-card:hover .uc-link .icon { transform: translateX(3px); }
.homepage .uc-more { margin-top: 28px; text-align: center; font-size: 15px; }
.homepage .uc-more a { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-body); text-decoration: underline; text-decoration-color: var(--ds-border-strong); text-underline-offset: 4px; }
.homepage .uc-more a:hover { color: var(--ds-primary); text-decoration-color: currentColor; }
.homepage .uc-more .icon { width: 15px; height: 15px; }
@media (max-width: 1100px) { .homepage .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .homepage .uc-art { aspect-ratio: 16 / 9; } }
@media (max-width: 640px) { .homepage .uc-grid { grid-template-columns: 1fr; } .homepage .uc-art { aspect-ratio: 16 / 10; } }
@media (prefers-reduced-motion: reduce) { .homepage .uc-card, .homepage .uc-mock { transition: none; } .homepage .uc-card:hover, .homepage .uc-card:hover .uc-mock { transform: none; } }

/* Demo chat, styled like Jason in Factory: brief bubble, collapsed tool activity,
   and the pipeline, dataset and file it produced as cards that open on the right. */
.homepage .fx-chat-log { display: flex; flex-direction: column; gap: 18px; padding: 20px 20px 12px; }
.homepage .jc-user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.homepage .jc-bubble { max-width: 88%; padding: 10px 14px; border-radius: 14px 6px 14px 14px; background: var(--ds-primary-soft); color: var(--ds-ink); font-size: 14px; line-height: 1.5; }
.homepage .jc-attached { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border: 0; border-radius: 4px; background: none; color: #8A8694; font: inherit; font-size: 12px; cursor: pointer; }
.homepage .jc-attached svg { width: 13px; height: 13px; color: var(--ds-success); }
.homepage .jc-attached span { color: var(--ds-body); text-decoration: underline; text-decoration-color: var(--ds-border-strong); text-underline-offset: 3px; }
.homepage .jc-attached:hover span, .homepage .jc-attached.is-open span { color: var(--ds-primary); text-decoration-color: currentColor; }
.homepage .jc-jason { display: flex; flex-direction: column; align-items: flex-start; }
.homepage .jc-eyebrow { margin-bottom: 4px; color: var(--ds-primary); font-size: 10.5px; font-weight: 500; }
.homepage .jc-text { margin-top: 8px; color: #302E36; font-size: 14px; line-height: 1.55; }
.homepage .jc-text b { font-weight: 600; color: var(--ds-ink); }
.homepage .jc-activity-sum { display: inline-flex; align-items: center; gap: 4px; margin-left: -4px; padding: 2px 4px; border: 0; border-radius: 4px; background: none; color: #8A8694; font: inherit; font-size: 12px; cursor: pointer; }
.homepage .jc-activity-sum:hover { color: var(--ds-body); }
.homepage .jc-chev { width: 12px; height: 12px; transition: transform .15s; }
.homepage .jc-activity.is-open .jc-chev { transform: rotate(90deg); }
.homepage .jc-activity ol { display: none; flex-direction: column; align-items: flex-start; gap: 6px; margin: 6px 0 2px; padding: 0; list-style: none; }
.homepage .jc-activity.is-open ol { display: flex; }
.homepage .jc-tool { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 8px; border: 1px solid var(--ds-border); border-radius: 6px; font-size: 12px; white-space: nowrap; }
.homepage .jc-tool b { font-weight: 600; color: #3E3B46; }
.homepage .jc-tool > span:last-child { overflow: hidden; color: var(--ds-muted); text-overflow: ellipsis; }
.homepage .jc-mono { font-family: var(--ds-mono); font-size: 11.5px; }
.homepage .jc-tile { display: grid; flex: none; place-items: center; width: 16px; height: 16px; border-radius: 4px; color: #fff; }
.homepage .jc-tile svg { width: 11px; height: 11px; }
.homepage .jc-tile-read { background: #0284C7; }
.homepage .jc-tile-think { background: #7C3AED; }
.homepage .jc-embed { display: block; width: 100%; margin-top: 10px; padding: 0; overflow: hidden; border: 1px solid var(--ds-border); border-radius: 8px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.homepage .jc-embed:hover { border-color: #B0A5E3; }
.homepage .jc-embed.is-open { border-color: var(--ds-primary); box-shadow: 0 0 0 3px var(--ds-primary-soft); }
.homepage .jc-embed:focus-visible { outline: 2px solid var(--ds-primary); outline-offset: 2px; }
.homepage .jc-embed-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid var(--ds-border); font-size: 12px; }
.homepage .jc-embed-head svg { flex: none; width: 14px; height: 14px; color: var(--ds-accent); }
.homepage .jc-embed-head b { font-weight: 600; color: var(--ds-ink); }
.homepage .jc-embed-head span { flex: 1; overflow: hidden; color: var(--ds-body); text-overflow: ellipsis; white-space: nowrap; }
.homepage .jc-embed-head svg:last-child { color: var(--ds-primary); }
.homepage .jc-dag { display: flex; align-items: center; padding: 18px 12px; background: radial-gradient(circle, #E3E0EA 1px, transparent 1.2px) 0 0 / 12px 12px, #FCFBFE; }
.homepage .jc-dag i { flex: 1 1 10px; min-width: 8px; height: 1px; background: #B0A5E3; }
.homepage .jc-node { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid var(--ds-border); border-radius: 6px; background: #fff; color: var(--ds-ink); font-family: var(--ds-mono); font-size: 11px; box-shadow: 0 1px 2px rgba(23, 21, 31, .05); }
.homepage .jc-node em { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-success); }
.homepage .jc-node-more { color: var(--ds-success); }
.homepage .jc-ds { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 0; }
.homepage .jc-ds-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.homepage .jc-ds-icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--ds-primary-soft); color: var(--ds-primary); }
.homepage .jc-ds-icon svg { width: 16px; height: 16px; }
.homepage .jc-ds-name { display: grid; min-width: 0; }
.homepage .jc-ds-name b { overflow: hidden; color: var(--ds-ink); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.homepage .jc-ds-name small { overflow: hidden; color: var(--ds-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.homepage .jc-ds-count { color: var(--ds-ink); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.homepage .jc-ds-count small { color: var(--ds-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.homepage .jc-ds-foot { display: flex; justify-content: space-between; gap: 8px; margin: 0 -14px; padding: 8px 14px; border-top: 1px solid var(--ds-surface-alt); background: #FCFBFE; color: var(--ds-muted); font-size: 11px; }
.homepage .jc-ds-foot span:first-child { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; }
.homepage .jc-ds-foot svg { flex: none; width: 12px; height: 12px; }
.homepage .jc-outcome { width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(2, 44, 34, .1); border-radius: 8px; background: rgba(237, 249, 238, .8); color: #064E3B; font-size: 13.5px; line-height: 1.5; }
.homepage .jc-outcome p:first-child { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.homepage .jc-outcome svg { width: 16px; height: 16px; color: var(--ds-success); }
.homepage .jc-outcome b { font-weight: 600; }
.homepage .jc-took { margin-top: 6px; padding-left: 2px; color: #8A8694; font-size: 12px; font-variant-numeric: tabular-nums; }
.homepage .jc-composer { padding: 0 16px 16px; }
.homepage .jc-composer-box { padding: 4px; border-radius: 12px; box-shadow: 0 0 0 1px var(--ds-border); }
.homepage .jc-composer-box textarea { display: block; width: 100%; min-height: 34px; padding: 8px 10px 2px; border: 0; background: none; color: var(--ds-ink); font: inherit; font-size: 14px; resize: none; }
.homepage .jc-composer-box textarea::placeholder { color: #8A8694; }
.homepage .jc-composer-row { display: flex; align-items: center; gap: 6px; padding: 2px 6px 4px 4px; }
.homepage .jc-clip { display: grid; place-items: center; width: 30px; height: 30px; color: var(--ds-muted); }
.homepage .jc-clip svg { width: 16px; height: 16px; }
.homepage .jc-composer-note { flex: 1; color: #8A8694; font-size: 12px; }
.homepage .jc-send { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ds-ink); color: #fff; opacity: .3; }
.homepage .jc-send svg { width: 14px; height: 14px; }
/* Right panel: pipeline steps and uploaded files. */
.homepage .jc-steps { margin: 0; padding: 14px 18px; list-style: none; }
.homepage .jc-steps.is-dim { opacity: .55; }
.homepage .jc-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 8px; background: #fff; }
.homepage .jc-step + .jc-step { margin-top: 14px; }
.homepage .jc-step + .jc-step::before { content: ""; position: absolute; left: 23px; top: -15px; height: 14px; border-left: 1px dashed #B0A5E3; }
.homepage .jc-step-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-success-soft); color: var(--ds-success); }
.homepage .jc-step-mark svg { width: 13px; height: 13px; }
.homepage .jc-step-warn { border-color: #F3D9A4; background: #FFFBF2; }
.homepage .jc-step-warn .jc-step-mark { background: #FDF3DC; color: #9A6412; }
.homepage .jc-step-fix .jc-step-mark { background: var(--ds-primary-soft); color: var(--ds-primary); }
.homepage .jc-step-copy { display: grid; flex: 1; min-width: 0; }
.homepage .jc-step-copy b { color: var(--ds-ink); font-family: var(--ds-mono); font-size: 12.5px; font-weight: 400; }
.homepage .jc-step-copy span { overflow: hidden; color: var(--ds-body); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.homepage .jc-step-time { color: var(--ds-muted); font-family: var(--ds-mono); font-size: 12px; }
.homepage .jc-file-kind { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-muted); font-size: 12.5px; white-space: nowrap; }
.homepage .jc-file-kind svg { width: 15px; height: 15px; color: var(--ds-success); }
.homepage .jc-file-tabs { display: flex; gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--ds-border); }
.homepage .jc-file-tabs button { margin-bottom: -1px; padding: 10px 0 9px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ds-muted); font: inherit; font-size: 13px; cursor: pointer; }
.homepage .jc-file-tabs [aria-selected="true"] { border-bottom-color: var(--ds-accent); color: var(--ds-pressed); }
.homepage .jc-file-table tbody tr { cursor: default; }
.homepage .jc-file-table td { font-size: 13px; }
.homepage .jc-raw { margin: 0; padding: 14px 18px; color: var(--ds-body); font-family: var(--ds-mono); font-size: 12px; line-height: 1.7; white-space: pre; }
@media (max-width: 640px) { .homepage .jc-bubble { max-width: 94%; } }
/* Keep each column inside the window so the chat log and tables scroll, not the frame. */
@media (min-width: 1101px) { .homepage .fx-app { grid-template-rows: minmax(0, 1fr); } }
.homepage :is(.fx-chat, .fx-data, .fx-list) { min-height: 0; }

/* Jason card: copy on the left, a big Jason rising out of the top of the card. */
.homepage.ds .ds-jason { padding-top: clamp(56px, 7vw, 96px); }
.homepage .jm-card { position: relative; display: flex; align-items: center; min-height: clamp(320px, 28vw, 380px); padding: clamp(32px, 4vw, 56px); border-radius: var(--ds-r-lg); background: var(--ds-surface-alt); }
.homepage .jm-copy { position: relative; z-index: 1; max-width: 30rem; }
.homepage .jm-copy h2 { color: var(--ds-ink); font-size: clamp(28px, 3vw, 36px); font-weight: 400; line-height: 1.1; letter-spacing: -.03em; }
.homepage .jm-copy p { margin-top: 16px; color: var(--ds-body); font-size: 17px; line-height: 1.6; }
.homepage .jm-copy .jm-chat { display: inline-block; margin-top: 18px; padding: 0; border: 0; background: none; font: inherit; font-size: 17px; cursor: pointer; }
.homepage .jm-face { position: absolute; right: clamp(24px, 5vw, 72px); top: -44px; width: clamp(300px, 28vw, 390px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 30px 60px -24px rgba(54, 30, 140, .45); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.homepage .jm-face svg { display: block; width: 100%; height: 100%; }
.homepage .jm-card:hover .jm-face { transform: translateY(-6px); }
.homepage .jm-eyes { transform-origin: 256px 244px; animation: jm-blink 5s ease-in-out infinite; }
@keyframes jm-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@media (max-width: 860px) {
  .homepage .jm-card { flex-direction: column; align-items: flex-start; }
  .homepage .jm-face { position: relative; top: auto; right: auto; align-self: center; width: min(240px, 70%); margin: 32px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .homepage .jm-eyes { animation: none; } .homepage .jm-face { transition: none; } }
.homepage .jm-copy p b { color: var(--ds-ink); font-weight: 600; }