/* The home-page case design, shared unchanged by every host page. */
.figma-screen .shared-cases { position: absolute; left: 0; width: 100%; color: #232323; font: 16px/normal HelveticaLocal, Helvetica, Arial, sans-serif; }
.figma-screen .shared-cases[hidden] { display: none; }
.shared-cases *, .shared-cases *::before, .shared-cases *::after { box-sizing: border-box; }
.shared-cases h2, .shared-cases h3, .shared-cases h4, .shared-cases p { margin: 0; letter-spacing: normal; text-transform: none; }
.shared-cases .shared-cases-heading { margin: 0 80px 38px; font: 500 32px/40px FigmaAgora, Georgia, serif; }
.shared-cases-panel { margin: 0 104px; padding: 50px 46px 67px; background: #f5f5f5; }
.shared-cases-content { touch-action: pan-y; }
.shared-cases-intro { display: flex; flex-direction: column; gap: 20px; width: 654px; max-width: 100%; margin-bottom: 39px; }
.shared-cases .shared-cases-title { font: 400 22px/normal HelveticaLocal, Helvetica, Arial, sans-serif; min-height: 26px; }
.shared-cases .shared-cases-lead, .shared-cases .shared-cases-copy { font: 400 16px/normal HelveticaLocal, Helvetica, Arial, sans-serif; overflow-wrap: anywhere; }
.shared-cases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "challenge work value" "meta result value"; gap: 20px; }
.shared-cases-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 15px; min-width: 0; min-height: 125px; padding: 27px 25px 27px 32px; background: rgba(255,255,255,.38); }
.shared-cases-card::before { content: ''; position: absolute; width: 2px; left: 20px; top: 27px; bottom: 27px; background: linear-gradient(#ee1427, #ff775c); }
.shared-cases-card[data-case-field="challenge"] { grid-area: challenge; }
.shared-cases-card[data-case-field="work"] { grid-area: work; gap: 12px; padding-top: 19.5px; padding-bottom: 19.5px; }
.shared-cases-card[data-case-field="result"] { grid-area: result; }
.shared-cases-card[data-case-field="value"] { grid-area: value; min-height: 270px; padding-top: 72.5px; padding-bottom: 72.5px; }
.shared-cases-card[data-case-field="meta"] { grid-area: meta; }
.shared-cases .shared-cases-label { font: 400 20px/normal HelveticaLocal, Helvetica, Arial, sans-serif; color: rgba(35,35,35,.5); }
.shared-cases-arrows { position: absolute; top: var(--case-arrow-top); left: 80px; right: 80px; display: flex; justify-content: space-between; pointer-events: none; }
.shared-cases-arrow { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 0; color: #fff; background: linear-gradient(#ed1426, #ff775c); cursor: pointer; pointer-events: auto; }
.shared-cases-arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1; }
.shared-cases-next svg { transform: rotate(180deg); }
.shared-cases-arrow:disabled { opacity: .45; cursor: default; }
.shared-cases-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 27px 13px 0; }
.shared-cases-dot { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.shared-cases-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #d9d9d9; }
.shared-cases-dot[aria-current="true"]::after { background: #e30d1b; }
.shared-cases button:focus-visible { outline: 1px solid #e31e26; outline-offset: 2px; }
.figma-screen[data-variant="tablet"] .shared-cases-heading { margin-left: 20px; margin-right: 20px; }
.figma-screen[data-variant="tablet"] .shared-cases-panel { margin: 0; padding: 50px 20px 41px; }
.figma-screen[data-variant="tablet"] .shared-cases-intro { margin-bottom: 45px; }
.figma-screen[data-variant="tablet"] .shared-cases-title { font-size: 20px; min-height: 22px; }
.figma-screen[data-variant="tablet"] .shared-cases-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "challenge work" "meta result" "value value"; }
.figma-screen[data-variant="tablet"] .shared-cases-card { padding-top: 28px; padding-bottom: 28px; }
.figma-screen[data-variant="tablet"] .shared-cases-card[data-case-field="work"] { padding-top: 21px; padding-bottom: 21px; }
.figma-screen[data-variant="tablet"] .shared-cases-card[data-case-field="value"] { min-height: 178px; margin-top: 10px; padding-top: 46px; padding-bottom: 46px; }
.figma-screen[data-variant="tablet"] .shared-cases-arrows { top: -6px; left: auto; right: 20px; gap: 16px; }
.figma-screen[data-variant="mobile"] .shared-cases-heading { margin: 0 13px 89px; text-align: center; font-size: 24px; line-height: 30px; }
.figma-screen[data-variant="mobile"] .shared-cases-panel { margin: 0; padding: 35px 13px 40px; }
.figma-screen[data-variant="mobile"] .shared-cases-intro { margin: 0 13px 34px; width: auto; gap: 15px; }
.figma-screen[data-variant="mobile"] .shared-cases-title { width: 325px; max-width: 100%; font-size: 18px; min-height: 40px; }
.figma-screen[data-variant="mobile"] .shared-cases-lead, .figma-screen[data-variant="mobile"] .shared-cases-copy { font-size: 14px; }
.figma-screen[data-variant="mobile"] .shared-cases-label { font-size: 18px; }
.figma-screen[data-variant="mobile"] .shared-cases-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "challenge" "work" "meta" "result" "value"; gap: 10px; }
.figma-screen[data-variant="mobile"] .shared-cases-card { gap: 12px; padding-top: 31.5px; padding-bottom: 31.5px; }
.figma-screen[data-variant="mobile"] .shared-cases-card[data-case-field="challenge"] { gap: 10px; padding-top: 32.5px; padding-bottom: 32.5px; }
.figma-screen[data-variant="mobile"] .shared-cases-card[data-case-field="value"] { min-height: 173px; }
.figma-screen[data-variant="mobile"] .shared-cases-arrows { top: 64px; left: 0; right: 0; justify-content: center; gap: 10px; }
.figma-screen[data-variant="mobile"] .shared-cases-arrow { width: 35px; height: 35px; }
.figma-screen[data-variant="mobile"] .shared-cases-arrow svg { width: 20px; height: 20px; }
.figma-screen[data-variant="mobile"] .shared-cases-dots { margin-top: 24px; }